mirror of
https://git.tt-rss.org/git/tt-rss.git
synced 2026-02-10 16:01:33 +00:00
initial
This commit is contained in:
Andrew Dolgov
@@ -0,0 +1,169 @@
|
||||
/* Accordion
|
||||
*
|
||||
* Styling AccordionContainer basically means styling the accordion pane (dijitAccordionInnerContainer)
|
||||
* and the title inside of it (dijitAccordionTitle). There are 4 basic states to style:
|
||||
*
|
||||
* 1. closed pane (and default styling):
|
||||
* .dijitAccordionInnerContainer - container for each accordion child
|
||||
* .dijitAccordionTitle - title for each accordion child
|
||||
*
|
||||
* 2. active closed pane (ie, mouse down on a title bar)
|
||||
* .dijitAccordionInnerContainerActive - for background-color, border
|
||||
* .dijitAccordionInnerContainerActive dijitAccordionTitle - for text color
|
||||
*
|
||||
* 3. open pane (expanded child)
|
||||
* .dijitAccordionChildWrapper - wraps around the child widget (typically ContentPane)
|
||||
* setting a margin so that there's blue trim all the way around the child
|
||||
*
|
||||
* These rules need to override the closed pane active:
|
||||
*
|
||||
* .dijitAccordionInnerContainerSelected - for background-color, border
|
||||
* .dijitAccordionInnerContainerSelected .dijitAccordionTitle - for text color
|
||||
*
|
||||
* 4. hovered pane, open or closed
|
||||
* The selectors below affect hovering over both a closed pane (ie, hovering a title bar),
|
||||
* and hovering over an open pane. Also, treat mouse down on an open pane as a hover:
|
||||
*
|
||||
* .dijitAccordionInnerContainerHover, .dijitAccordionInnerContainerSelectedActive - for background-color, border
|
||||
* .dijitAccordionInnerContainerHover .dijitAccordionTitle - for text color
|
||||
*/
|
||||
.flat .dijitAccordionContainer {
|
||||
border: 0 none;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.flat .dijitAccordionInnerContainer {
|
||||
background-color: #fff;
|
||||
border: 1px solid #9e9e9e;
|
||||
border-radius: 3px;
|
||||
-webkit-transition-property: background-color, border;
|
||||
-moz-transition-property: background-color, border;
|
||||
-o-transition-property: background-color, border;
|
||||
-ms-transition-property: background-color, border;
|
||||
transition-property: background-color, border;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
-moz-transition-duration: 0.3s;
|
||||
-o-transition-duration: 0.3s;
|
||||
-ms-transition-duration: 0.3s;
|
||||
transition-duration: 0.3s;
|
||||
-webkit-transition-timing-function: linear;
|
||||
-moz-transition-timing-function: linear;
|
||||
-o-transition-timing-function: linear;
|
||||
-ms-transition-timing-function: linear;
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
.flat .dijitAccordionInnerContainer +.dijitAccordionInnerContainer {
|
||||
margin-top: 0;
|
||||
position: relative;
|
||||
}
|
||||
.flat .dijitAccordionTitle {
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: #9e9e9e;
|
||||
padding: 4px;
|
||||
border-radius: 3px;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
-webkit-transition: all 0.05s linear;
|
||||
-moz-transition: all 0.05s linear;
|
||||
-o-transition: all 0.05s linear;
|
||||
-ms-transition: all 0.05s linear;
|
||||
transition: all 0.05s linear;
|
||||
background: #fff;
|
||||
border: 0 none;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.flat .dijitAccordionTitle .arrowTextUp,
|
||||
.flat .dijitAccordionTitle .arrowTextDown {
|
||||
display: none;
|
||||
float: right;
|
||||
font-family: "flat-icon";
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
font-size: 16px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
font-size: 0px;
|
||||
}
|
||||
.flat .dijitAccordionTitle .arrowTextUp:before,
|
||||
.flat .dijitAccordionTitle .arrowTextDown:before {
|
||||
content: "\f007";
|
||||
font-size: 18px;
|
||||
}
|
||||
.flat .dijitAccordionTitle .arrowTextUp {
|
||||
display: block;
|
||||
}
|
||||
.flat .dijitAccordionTitle .arrowTextUp:before {
|
||||
content: "\f006";
|
||||
}
|
||||
.flat .dijitAccordionInnerContainerHover .dijitAccordionTitle {
|
||||
-webkit-transition: all 0.1s;
|
||||
-moz-transition: all 0.1s;
|
||||
-o-transition: all 0.1s;
|
||||
-ms-transition: all 0.1s;
|
||||
transition: all 0.1s;
|
||||
background: #f2f2f2;
|
||||
border-color: #d9d9d9;
|
||||
}
|
||||
.flat .dijitAccordionInnerContainerActive .dijitAccordionTitle {
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
-o-transition: none;
|
||||
-ms-transition: none;
|
||||
transition: none;
|
||||
outline: none;
|
||||
-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
|
||||
box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
|
||||
background: #e0e0e0;
|
||||
border-color: #b3b3b3;
|
||||
}
|
||||
.flat .dijitAccordionInnerContainerSelected {
|
||||
border: 0 none;
|
||||
}
|
||||
.flat .dijitAccordionInnerContainerSelected .dijitAccordionTitle {
|
||||
color: #fff;
|
||||
background-color: #2196f3;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
.flat .dijitAccordionInnerContainerSelected .dijitAccordionTitle .arrowTextUp {
|
||||
display: none;
|
||||
}
|
||||
.flat .dijitAccordionInnerContainerSelected .dijitAccordionTitle .arrowTextDown {
|
||||
display: block;
|
||||
}
|
||||
.flat .dijitAccordionContainer .dijitAccordionChildWrapper {
|
||||
background-color: #fff;
|
||||
border: 1px solid #9e9e9e;
|
||||
border-top: 0 none;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
clear: both;
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
.flat .dijitAccordionInnerContainer {
|
||||
border-radius: 0;
|
||||
}
|
||||
.flat .dijitAccordionInnerContainer .dijitAccordionTitle {
|
||||
border-radius: 0;
|
||||
}
|
||||
.flat .dijitAccordionInnerContainer:not(:last-child) .dijitAccordionChildWrapper {
|
||||
border-radius: 0;
|
||||
}
|
||||
.flat .dijitAccordionInnerContainer +.dijitAccordionInnerContainer {
|
||||
border-top: 0 none;
|
||||
}
|
||||
.flat .dijitAccordionInnerContainer +.dijitAccordionInnerContainerSelected:last-child .dijitAccordionTitle {
|
||||
border-radius: 0;
|
||||
}
|
||||
.flat .dijitAccordionInnerContainer:first-child,
|
||||
.flat .dijitAccordionInnerContainer:first-child .dijitAccordionTitle {
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
.flat .dijitAccordionInnerContainer:last-child,
|
||||
.flat .dijitAccordionInnerContainer:last-child .dijitAccordionTitle {
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
+160
@@ -0,0 +1,160 @@
|
||||
/* Accordion
|
||||
*
|
||||
* Styling AccordionContainer basically means styling the accordion pane (dijitAccordionInnerContainer)
|
||||
* and the title inside of it (dijitAccordionTitle). There are 4 basic states to style:
|
||||
*
|
||||
* 1. closed pane (and default styling):
|
||||
* .dijitAccordionInnerContainer - container for each accordion child
|
||||
* .dijitAccordionTitle - title for each accordion child
|
||||
*
|
||||
* 2. active closed pane (ie, mouse down on a title bar)
|
||||
* .dijitAccordionInnerContainerActive - for background-color, border
|
||||
* .dijitAccordionInnerContainerActive dijitAccordionTitle - for text color
|
||||
*
|
||||
* 3. open pane (expanded child)
|
||||
* .dijitAccordionChildWrapper - wraps around the child widget (typically ContentPane)
|
||||
* setting a margin so that there's blue trim all the way around the child
|
||||
*
|
||||
* These rules need to override the closed pane active:
|
||||
*
|
||||
* .dijitAccordionInnerContainerSelected - for background-color, border
|
||||
* .dijitAccordionInnerContainerSelected .dijitAccordionTitle - for text color
|
||||
*
|
||||
* 4. hovered pane, open or closed
|
||||
* The selectors below affect hovering over both a closed pane (ie, hovering a title bar),
|
||||
* and hovering over an open pane. Also, treat mouse down on an open pane as a hover:
|
||||
*
|
||||
* .dijitAccordionInnerContainerHover, .dijitAccordionInnerContainerSelectedActive - for background-color, border
|
||||
* .dijitAccordionInnerContainerHover .dijitAccordionTitle - for text color
|
||||
*/
|
||||
|
||||
@import 'dijit_layout_variables';
|
||||
|
||||
.{$theme-name} {
|
||||
|
||||
.dijitAccordionContainer {
|
||||
border: 0 none;
|
||||
border-radius: $accordion-border-radius;
|
||||
}
|
||||
|
||||
.dijitAccordionInnerContainer {
|
||||
background-color: $accordion-background-color;
|
||||
border: 1px solid $accordion-border-color;
|
||||
border-radius: $accordion-border-radius;
|
||||
transition-property: background-color, border;
|
||||
transition-duration: .3s;
|
||||
transition-timing-function: linear;
|
||||
|
||||
+.dijitAccordionInnerContainer {
|
||||
margin-top: $accordion-spacing;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
/* title bar */
|
||||
|
||||
.dijitAccordionTitle {
|
||||
button-style();
|
||||
border: 0 none;
|
||||
border-radius: $accordion-border-radius;
|
||||
|
||||
.arrowTextUp,
|
||||
.arrowTextDown {
|
||||
display: none;
|
||||
float: right;
|
||||
_icon-core-style();
|
||||
text-align: center;
|
||||
font-size: 0px;
|
||||
&:before {
|
||||
content: $icon-collapse;
|
||||
font-size: $icon-expand-collapse-size;
|
||||
}
|
||||
}
|
||||
.arrowTextUp {
|
||||
display: block;
|
||||
&:before {
|
||||
content: $icon-expand;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
|
||||
.dijitAccordionInnerContainerHover .dijitAccordionTitle {
|
||||
button-hover-style();
|
||||
}
|
||||
|
||||
/* Active */
|
||||
|
||||
.dijitAccordionInnerContainerActive .dijitAccordionTitle {
|
||||
button-active-style();
|
||||
}
|
||||
|
||||
/* Selected */
|
||||
|
||||
.dijitAccordionInnerContainerSelected {
|
||||
border: 0 none;
|
||||
.dijitAccordionTitle {
|
||||
color: $accordion-title-bar-checked-text-color;
|
||||
background-color: $accordion-title-bar-checked-background-color;
|
||||
border-radius: $accordion-border-radius $accordion-border-radius 0 0;
|
||||
|
||||
.arrowTextUp {
|
||||
display: none;
|
||||
}
|
||||
.arrowTextDown {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* content wrapper */
|
||||
|
||||
.dijitAccordionContainer .dijitAccordionChildWrapper {
|
||||
background-color: $accordion-content-background-color;
|
||||
border: 1px solid $accordion-content-border-color;
|
||||
border-top: 0 none;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
clear: both;
|
||||
border-radius: 0 0 $accordion-border-radius $accordion-border-radius;
|
||||
}
|
||||
|
||||
|
||||
/* if the spacing between panes is 0 */
|
||||
|
||||
if($accordion-spacing[0] <= "0") {
|
||||
.dijitAccordionInnerContainer {
|
||||
border-radius: 0;
|
||||
|
||||
.dijitAccordionTitle {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
.dijitAccordionChildWrapper {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
+.dijitAccordionInnerContainer {
|
||||
border-top: 0 none;
|
||||
}
|
||||
+.dijitAccordionInnerContainerSelected:last-child {
|
||||
.dijitAccordionTitle {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child,
|
||||
&:first-child .dijitAccordionTitle {
|
||||
border-radius: $accordion-border-radius $accordion-border-radius 0 0;
|
||||
}
|
||||
&:last-child,
|
||||
&:last-child .dijitAccordionTitle {
|
||||
border-radius: 0 0 $accordion-border-radius $accordion-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
.flat .dijitAccordionTitle .arrowTextUp,
|
||||
.flat .dijitAccordionTitle .arrowTextDown {
|
||||
float: left;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
@import 'dijit_layout_variables';
|
||||
|
||||
.{$theme-name} {
|
||||
|
||||
.dijitAccordionTitle {
|
||||
.arrowTextUp,
|
||||
.arrowTextDown {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
/* BorderContainer
|
||||
|
||||
Splitters and gutters separate panes within a BorderContainer. Splitters can be moved up and down (horizonal splitters) or left and right (vertical splitters), while Gutters are static. A "thumb" is the slit on a Splitter that indicates it is movable.
|
||||
|
||||
Styling the BorderContainer widget consists of the following:
|
||||
|
||||
.dijitBorderContainer - for border and padding of the entire border container
|
||||
|
||||
.dijitSplitContainer-child, .dijitBorderContainer-child - for border or child panes of the border container. By default borders are put on all children of BorderContainer.
|
||||
|
||||
.dijitBorderContainer-dijitTabContainerTop,
|
||||
.dijitBorderContainer-dijitTabContainerBottom,
|
||||
.dijitBorderContainer-dijitTabContainerLeft,
|
||||
.dijitBorderContainer-dijitTabContainerRight,
|
||||
.dijitBorderContainer-dijitAccordionContainer -for border of the border containers within TabContainer or AccordionContainer widget
|
||||
|
||||
.dijitBorderContainer-dijitBorderContainer - for border and padding of nested BorderContainers
|
||||
|
||||
Splitters and gutters:
|
||||
|
||||
.dijitSplitterH, .dijitGutterH - for height, background, and border of a horizontal splitter and gutter
|
||||
.dijitSplitterH .dijitSplitterThumb - for color, height/width of the thumb on a horizontal splitter
|
||||
.dijitSplitterV, .dijitGutterV - - for height, background, and border of a vertical splitter and gutter
|
||||
.dijitSplitterV .dijitSplitterThumb - for color, height/width of the thumb on a vertical splitter
|
||||
.dijitSplitterHHover - for background-color of a hovered horizontal splitter
|
||||
.dijitSplitterHHover .dijitSplitterThumb - for background-color of a hovered thumb on a horizontal splitter
|
||||
.dijitSplitterVHover - for background-color of a hovered vertical splitter
|
||||
.dijitSplitterVHover .dijitSplitterThumb - for background-color of a hovered thumb on a vertical splitter
|
||||
.dijitSplitterHActive - for background-color of an active horizontal splitter
|
||||
.dijitSplitterVActive - for background-color of an active horizontal splitter
|
||||
*/
|
||||
.flat .dijitBorderContainer {
|
||||
/* matches the width of the splitters between panes */
|
||||
padding: 5px;
|
||||
}
|
||||
.flat .dijitSplitContainer-child,
|
||||
.flat .dijitBorderContainer-child {
|
||||
border: 1px solid #9e9e9e;
|
||||
}
|
||||
.flat .dijitBorderContainer-dijitTabContainerTop,
|
||||
.flat .dijitBorderContainer-dijitTabContainerBottom,
|
||||
.flat .dijitBorderContainer-dijitTabContainerLeft,
|
||||
.flat .dijitBorderContainer-dijitTabContainerRight,
|
||||
.flat .dijitBorderContainer-dijitAccordionContainer {
|
||||
/* except that TabContainer defines borders on it's sub-nodes (tablist and dijitTabPaneWrapper),
|
||||
* so override rule setting border on domNode
|
||||
*/
|
||||
border: none;
|
||||
}
|
||||
.flat .dijitBorderContainer-dijitBorderContainer {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.flat .dijitSplitterH,
|
||||
.flat .dijitGutterH {
|
||||
background: none;
|
||||
border: 0;
|
||||
height: 5px;
|
||||
}
|
||||
.flat .dijitSplitterH .dijitSplitterThumb {
|
||||
background: #9e9e9e;
|
||||
height: 1px;
|
||||
top: 2px;
|
||||
width: 19px;
|
||||
}
|
||||
.flat .dijitSplitterV,
|
||||
.flat .dijitGutterV {
|
||||
background: none;
|
||||
border: 0;
|
||||
width: 5px;
|
||||
margin: 0;
|
||||
}
|
||||
.flat .dijitSplitterV .dijitSplitterThumb {
|
||||
background: #9e9e9e;
|
||||
height: 19px;
|
||||
left: 2px;
|
||||
width: 1px;
|
||||
margin: 0;
|
||||
}
|
||||
.flat .dijitSplitterHHover,
|
||||
.flat .dijitSplitterVHover {
|
||||
font-size: 1px;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
.flat .dijitSplitterHHover .dijitSplitterThumb,
|
||||
.flat .dijitSplitterVHover .dijitSplitterThumb {
|
||||
background: #767676;
|
||||
}
|
||||
.flat .dijitSplitterHActive,
|
||||
.flat .dijitSplitterVActive {
|
||||
font-size: 1px;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
.flat .dijitSplitterHActive .dijitSplitterThumb,
|
||||
.flat .dijitSplitterVActive .dijitSplitterThumb {
|
||||
background: #767676;
|
||||
}
|
||||
Executable
+117
@@ -0,0 +1,117 @@
|
||||
/* BorderContainer
|
||||
|
||||
Splitters and gutters separate panes within a BorderContainer. Splitters can be moved up and down (horizonal splitters) or left and right (vertical splitters), while Gutters are static. A "thumb" is the slit on a Splitter that indicates it is movable.
|
||||
|
||||
Styling the BorderContainer widget consists of the following:
|
||||
|
||||
.dijitBorderContainer - for border and padding of the entire border container
|
||||
|
||||
.dijitSplitContainer-child, .dijitBorderContainer-child - for border or child panes of the border container. By default borders are put on all children of BorderContainer.
|
||||
|
||||
.dijitBorderContainer-dijitTabContainerTop,
|
||||
.dijitBorderContainer-dijitTabContainerBottom,
|
||||
.dijitBorderContainer-dijitTabContainerLeft,
|
||||
.dijitBorderContainer-dijitTabContainerRight,
|
||||
.dijitBorderContainer-dijitAccordionContainer -for border of the border containers within TabContainer or AccordionContainer widget
|
||||
|
||||
.dijitBorderContainer-dijitBorderContainer - for border and padding of nested BorderContainers
|
||||
|
||||
Splitters and gutters:
|
||||
|
||||
.dijitSplitterH, .dijitGutterH - for height, background, and border of a horizontal splitter and gutter
|
||||
.dijitSplitterH .dijitSplitterThumb - for color, height/width of the thumb on a horizontal splitter
|
||||
.dijitSplitterV, .dijitGutterV - - for height, background, and border of a vertical splitter and gutter
|
||||
.dijitSplitterV .dijitSplitterThumb - for color, height/width of the thumb on a vertical splitter
|
||||
.dijitSplitterHHover - for background-color of a hovered horizontal splitter
|
||||
.dijitSplitterHHover .dijitSplitterThumb - for background-color of a hovered thumb on a horizontal splitter
|
||||
.dijitSplitterVHover - for background-color of a hovered vertical splitter
|
||||
.dijitSplitterVHover .dijitSplitterThumb - for background-color of a hovered thumb on a vertical splitter
|
||||
.dijitSplitterHActive - for background-color of an active horizontal splitter
|
||||
.dijitSplitterVActive - for background-color of an active horizontal splitter
|
||||
*/
|
||||
|
||||
@import 'dijit_layout_variables';
|
||||
|
||||
.{$theme-name} {
|
||||
|
||||
.dijitBorderContainer {
|
||||
/* matches the width of the splitters between panes */
|
||||
padding: $splitter-size;
|
||||
}
|
||||
|
||||
.dijitSplitContainer-child,
|
||||
.dijitBorderContainer-child {
|
||||
border: 1px solid $bordercontainer-border-color;
|
||||
}
|
||||
|
||||
.dijitBorderContainer-dijitTabContainerTop,
|
||||
.dijitBorderContainer-dijitTabContainerBottom,
|
||||
.dijitBorderContainer-dijitTabContainerLeft,
|
||||
.dijitBorderContainer-dijitTabContainerRight,
|
||||
.dijitBorderContainer-dijitAccordionContainer {
|
||||
/* except that TabContainer defines borders on it's sub-nodes (tablist and dijitTabPaneWrapper),
|
||||
* so override rule setting border on domNode
|
||||
*/
|
||||
border: none;
|
||||
}
|
||||
|
||||
.dijitBorderContainer-dijitBorderContainer {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Splitters and gutters */
|
||||
|
||||
.dijitSplitterH,
|
||||
.dijitGutterH {
|
||||
background:none;
|
||||
border:0;
|
||||
height: $splitter-size;
|
||||
}
|
||||
|
||||
.dijitSplitterH .dijitSplitterThumb {
|
||||
background: $splitter-color;
|
||||
height: 1px;
|
||||
top: isEven($splitter-size) ? half($splitter-size) : half($splitter-size - 1);
|
||||
width: 19px;
|
||||
}
|
||||
|
||||
.dijitSplitterV,
|
||||
.dijitGutterV {
|
||||
background: $splitter-background-color;
|
||||
border: 0;
|
||||
width: $splitter-size;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dijitSplitterV .dijitSplitterThumb {
|
||||
background: $splitter-color;
|
||||
height: 19px;
|
||||
left: isEven($splitter-size) ? half($splitter-size) : half($splitter-size - 1);
|
||||
width: 1px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* hovered */
|
||||
.dijitSplitterHHover,
|
||||
.dijitSplitterVHover {
|
||||
font-size: 1px;
|
||||
background: $splitter-hovered-background-color;
|
||||
|
||||
.dijitSplitterThumb {
|
||||
background: $splitter-hovered-color;
|
||||
}
|
||||
}
|
||||
|
||||
/* active (dragged) */
|
||||
|
||||
.dijitSplitterHActive,
|
||||
.dijitSplitterVActive {
|
||||
font-size: 1px;
|
||||
background: $splitter-dragged-background-color;
|
||||
.dijitSplitterThumb {
|
||||
background: $splitter-dragged-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
/* ContentPane
|
||||
*
|
||||
* .dijitContentPane
|
||||
* set padding for basic content pane
|
||||
*
|
||||
* Nested layouts:
|
||||
*
|
||||
* .dijitTabContainerTop-dijitContentPane,
|
||||
* .dijitTabContainerLeft-dijitContentPane,
|
||||
* .dijitTabContainerBottom-dijitContentPane,
|
||||
* .dijitTabContainerRight-dijitContentPane
|
||||
* set background-color and padding of ContentPanes nested within TabContainer (can do top, left, bottom, or right) or Accordion Container
|
||||
*
|
||||
* .dijitAccordionContainer-dijitContentPane
|
||||
* set background-color and padding of ContentPane nested within Accordion
|
||||
*
|
||||
* .dijitSplitContainer-dijitContentPane,
|
||||
* set background-color and padding of ContentPane nested within a SplitContainer
|
||||
*
|
||||
* .dijitBorderContainer-dijitContentPane
|
||||
* set background-color and padding of ContentPane nested within a BorderContainer
|
||||
*/
|
||||
.flat .dijitContentPane {
|
||||
background-color: #fff;
|
||||
padding: 8px;
|
||||
}
|
||||
.flat .dijitTabContainerTop-dijitContentPane,
|
||||
.flat .dijitTabContainerLeft-dijitContentPane,
|
||||
.flat .dijitTabContainerBottom-dijitContentPane,
|
||||
.flat .dijitTabContainerRight-dijitContentPane,
|
||||
.flat .dijitAccordionContainer-dijitContentPane {
|
||||
background-color: #fff;
|
||||
padding: 8px;
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
}
|
||||
Executable
+45
@@ -0,0 +1,45 @@
|
||||
/* ContentPane
|
||||
*
|
||||
* .dijitContentPane
|
||||
* set padding for basic content pane
|
||||
*
|
||||
* Nested layouts:
|
||||
*
|
||||
* .dijitTabContainerTop-dijitContentPane,
|
||||
* .dijitTabContainerLeft-dijitContentPane,
|
||||
* .dijitTabContainerBottom-dijitContentPane,
|
||||
* .dijitTabContainerRight-dijitContentPane
|
||||
* set background-color and padding of ContentPanes nested within TabContainer (can do top, left, bottom, or right) or Accordion Container
|
||||
*
|
||||
* .dijitAccordionContainer-dijitContentPane
|
||||
* set background-color and padding of ContentPane nested within Accordion
|
||||
*
|
||||
* .dijitSplitContainer-dijitContentPane,
|
||||
* set background-color and padding of ContentPane nested within a SplitContainer
|
||||
*
|
||||
* .dijitBorderContainer-dijitContentPane
|
||||
* set background-color and padding of ContentPane nested within a BorderContainer
|
||||
*/
|
||||
|
||||
@import 'dijit_layout_variables';
|
||||
|
||||
.{$theme-name} {
|
||||
|
||||
.dijitContentPane {
|
||||
background-color: $contentpane-background-color;
|
||||
padding: $contentpane-padding;
|
||||
}
|
||||
|
||||
/* contentpane in other layouts */
|
||||
.dijitTabContainerTop-dijitContentPane,
|
||||
.dijitTabContainerLeft-dijitContentPane,
|
||||
.dijitTabContainerBottom-dijitContentPane,
|
||||
.dijitTabContainerRight-dijitContentPane,
|
||||
.dijitAccordionContainer-dijitContentPane {
|
||||
background-color: $contentpane-nested-background-color;
|
||||
padding: $contentpane-nested-padding;
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,359 @@
|
||||
/* TabContainer
|
||||
*
|
||||
* Styling TabContainer means styling the TabList and Its content container (dijitTitlePane)
|
||||
*
|
||||
* Tab List: (including 4 kinds of tab location)
|
||||
* .dijitTabContainerTop-tabs - tablist container at top
|
||||
* .dijitTabContainerBottom-tabs - tablist container at bottom
|
||||
* .dijitTabContainerLeft-tabs - tablist container at left
|
||||
* .dijitTabContainerRight-tabs - tablist container at right
|
||||
*
|
||||
* Tab Strip Button:
|
||||
* .dijitTabStripIcon - tab strip button icon
|
||||
* .dijitTabStripMenuIcon - down arrow icon position
|
||||
* .dijitTabStripSlideLeftIcon - left arrow icon position
|
||||
* .dijitTabStripSlideRightIcon - right arrow icon position
|
||||
*
|
||||
* .tabStripButtonDisabled - styles for disabled tab strip buttons
|
||||
*
|
||||
* Tab Button:
|
||||
* .dijitTabContainerTop-tabs .dijitTab - styles for top tab button container
|
||||
* .dijitTabContainerBottom-tabs .dijitTab - styles for bottom tab button container
|
||||
* .dijitTabContainerLeft-tabs .dijitTab - styles for left tab button container
|
||||
* .dijitTabContainerRight-tabs .dijitTab - styles for right tab button container
|
||||
*
|
||||
* .dijitTabContainerTop-tabs .dijitTabChecked .dijitTab
|
||||
* - styles for selected status of top tab button
|
||||
* same to Bottom, Left, Right Tabs
|
||||
*
|
||||
* .dijitTabHover .dijitTab - styles when mouse hover on tab buttons
|
||||
* .dijitTabActive .dijitTab - styles when mouse down on tab buttons
|
||||
* .dijitTabChecked .dijitTab - styles when on buttons of selected tab
|
||||
*
|
||||
* .dijitTabCloseButton - the close action buttons lie at the right top of each tab button on closable tabs
|
||||
* .dijitTabCloseButtonHover - styles when mouse hover on close action button
|
||||
* .dijitTabCloseButtonActive - styles when mouse down on close action button
|
||||
*
|
||||
* Tab Button: (checked status)
|
||||
*
|
||||
* Tab Content Container:
|
||||
* .dijitTabContainerTop-dijitContentPane
|
||||
* .dijitTabContainerBottom-dijitContentPane
|
||||
* .dijitTabContainerLeft-dijitContentPane
|
||||
* .dijitTabContainerRight-dijitContentPane - for background and padding
|
||||
*
|
||||
* Nested Tabs:
|
||||
* .dijitTabContainerNested - Container for nested tabs
|
||||
* .dijitTabContainerTabListNested - tab list container for nested tabs
|
||||
*/
|
||||
.flat .dijitTabContainer {
|
||||
border-radius: 3px;
|
||||
}
|
||||
.flat .dijitTabPaneWrapper {
|
||||
background: #fff;
|
||||
border: 1px solid #9e9e9e;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
.flat .dijitTabContainerTop-tabs,
|
||||
.flat .dijitTabContainerBottom-tabs,
|
||||
.flat .dijitTabContainerLeft-tabs,
|
||||
.flat .dijitTabContainerRight-tabs {
|
||||
border: none;
|
||||
}
|
||||
.flat .dijitTabSpacer {
|
||||
display: none;
|
||||
}
|
||||
.flat .dijitTab {
|
||||
border: 1px solid transparent;
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
-webkit-transition-property: background, padding, margin;
|
||||
-moz-transition-property: background, padding, margin;
|
||||
-o-transition-property: background, padding, margin;
|
||||
-ms-transition-property: background, padding, margin;
|
||||
transition-property: background, padding, margin;
|
||||
-webkit-transition-duration: 0.2s;
|
||||
-moz-transition-duration: 0.2s;
|
||||
-o-transition-duration: 0.2s;
|
||||
-ms-transition-duration: 0.2s;
|
||||
transition-duration: 0.2s;
|
||||
-webkit-transition-timing-function: ease;
|
||||
-moz-transition-timing-function: ease;
|
||||
-o-transition-timing-function: ease;
|
||||
-ms-transition-timing-function: ease;
|
||||
transition-timing-function: ease;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
.flat .dijitTab:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
.flat .dijitTabHover {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.flat .dijitTabActive {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
.flat .dijitTabChecked {
|
||||
border: 1px solid #9e9e9e;
|
||||
z-index: 1;
|
||||
}
|
||||
.flat .dijitTabChecked.dijitTabHover,
|
||||
.flat .dijitTabChecked.dijitTabActive {
|
||||
border: 1px solid #9e9e9e;
|
||||
background-color: #fff;
|
||||
color: #424242;
|
||||
}
|
||||
.flat .dijitTabDisabled {
|
||||
opacity: 0.65;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
|
||||
filter: alpha(opacity=65);
|
||||
}
|
||||
.flat .tabStripButton {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
.flat .dijitTabCloseButton {
|
||||
font-family: "flat-icon";
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
font-size: 16px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
line-height: 1;
|
||||
font-size: 1em;
|
||||
vertical-align: middle;
|
||||
margin-left: 4px;
|
||||
opacity: 0.35;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";
|
||||
filter: alpha(opacity=35);
|
||||
}
|
||||
.flat .dijitTabCloseButton:before {
|
||||
content: "\f00e";
|
||||
}
|
||||
.flat .dijitTabCloseButtonHover {
|
||||
opacity: 0.75;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
|
||||
filter: alpha(opacity=75);
|
||||
}
|
||||
.flat .dijitTabCloseButtonActive {
|
||||
opacity: 1;
|
||||
-ms-filter: none;
|
||||
filter: none;
|
||||
}
|
||||
.flat .dijitTabContainerTop-tabs .dijitTab {
|
||||
margin-right: 0;
|
||||
padding: 6px 16px;
|
||||
border-bottom-color: #9e9e9e;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
.flat .dijitTabContainerTop-tabs .dijitTabChecked {
|
||||
border-bottom: 1px solid #fff;
|
||||
border-left: 1px solid #9e9e9e;
|
||||
border-right: 1px solid #9e9e9e;
|
||||
}
|
||||
.flat .dijitTabContainerTop-tabs .dijitTabChecked:before {
|
||||
height: 3px;
|
||||
background: #2196f3;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
right: -1px;
|
||||
}
|
||||
.flat .dijitTabListContainer-top {
|
||||
margin-top: 1px;
|
||||
}
|
||||
.flat .dijitTabListContainer-top .dijitTab {
|
||||
top: 0;
|
||||
}
|
||||
.flat .dijitTabPaneWrapper.dijitTabContainerBottom-container {
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
.flat .dijitTabContainerBottom-tabs .dijitTab {
|
||||
margin-right: 0;
|
||||
padding: 6px 16px;
|
||||
border-top-color: #9e9e9e;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
.flat .dijitTabContainerBottom-tabs .dijitTabChecked {
|
||||
border-top: 1px solid #fff;
|
||||
border-left: 1px solid #9e9e9e;
|
||||
border-right: 1px solid #9e9e9e;
|
||||
}
|
||||
.flat .dijitTabContainerBottom-tabs .dijitTabChecked:before {
|
||||
height: 3px;
|
||||
background: #2196f3;
|
||||
bottom: -1px;
|
||||
left: -1px;
|
||||
right: -1px;
|
||||
}
|
||||
.flat .dijitTabListContainer-bottom {
|
||||
margin-top: -1px;
|
||||
}
|
||||
.flat .dijitTabListContainer-bottom .dijitTab {
|
||||
top: 0;
|
||||
}
|
||||
.flat .dijitTabPaneWrapper.dijitTabContainerLeft-container {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
.flat .dijitTabContainerLeft-tabs .dijitTab {
|
||||
margin-bottom: 0;
|
||||
padding: 8px 12px;
|
||||
border-right-color: #9e9e9e;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
.flat .dijitTabContainerLeft-tabs .dijitTabChecked {
|
||||
border-right: 1px solid #fff;
|
||||
border-top: 1px solid #9e9e9e;
|
||||
border-bottom: 1px solid #9e9e9e;
|
||||
}
|
||||
.flat .dijitTabContainerLeft-tabs .dijitTabChecked:before {
|
||||
width: 3px;
|
||||
background: #2196f3;
|
||||
bottom: -1px;
|
||||
left: -1px;
|
||||
top: -1px;
|
||||
}
|
||||
.flat .dijitTabPaneWrapper.dijitTabContainerRight-container {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
.flat .dijitTabContainerRight-tabs .dijitTab {
|
||||
margin-bottom: 0;
|
||||
padding: 8px 12px;
|
||||
border-left-color: #9e9e9e;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
.flat .dijitTabContainerRight-tabs .dijitTabChecked {
|
||||
border-left: 1px solid #fff;
|
||||
border-top: 1px solid #9e9e9e;
|
||||
border-bottom: 1px solid #9e9e9e;
|
||||
}
|
||||
.flat .dijitTabContainerRight-tabs .dijitTabChecked:before {
|
||||
width: 3px;
|
||||
background: #2196f3;
|
||||
bottom: -1px;
|
||||
right: -1px;
|
||||
top: -1px;
|
||||
}
|
||||
.flat .tabStripButton {
|
||||
background-color: #fff;
|
||||
border: 1px solid transparent;
|
||||
-webkit-transition-property: background-color;
|
||||
-moz-transition-property: background-color;
|
||||
-o-transition-property: background-color;
|
||||
-ms-transition-property: background-color;
|
||||
transition-property: background-color;
|
||||
}
|
||||
.flat .dijitTabListContainer-top .tabStripButton,
|
||||
.flat .dijitTabListContainer-bottom .tabStripButton {
|
||||
padding: 4px 8px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.flat .dijitTabListContainer-top .tabStripButton {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
.flat .dijitTabListContainer-bottom .tabStripButton {
|
||||
margin-top: 1px;
|
||||
}
|
||||
.flat .tabStripButtonHover {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.flat .tabStripButtonActive {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
.flat .dijitTabStripIcon {
|
||||
font-family: "flat-icon";
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
font-size: 16px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
color: #2196f3;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.flat .dijitTabStripIcon:before {
|
||||
content: "\f004";
|
||||
}
|
||||
.flat .dijitTabStripSlideRightIcon:before {
|
||||
content: "\f005";
|
||||
}
|
||||
.flat .dijitTabStripMenuIcon:before {
|
||||
content: "\f006";
|
||||
}
|
||||
.flat .dijitTabListContainer-top .tabStripButtonDisabled,
|
||||
.flat .dijitTabListContainer-bottom .tabStripButtonDisabled {
|
||||
opacity: 0.65;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
|
||||
filter: alpha(opacity=65);
|
||||
}
|
||||
.flat .dijitTabContainerNested .dijitTabListWrapper {
|
||||
height: auto;
|
||||
}
|
||||
.flat .dijitTabContainerTabListNested .dijitTab {
|
||||
color: #2196f3;
|
||||
margin: 4px;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
-webkit-transition-property: background-color, border-color;
|
||||
-moz-transition-property: background-color, border-color;
|
||||
-o-transition-property: background-color, border-color;
|
||||
-ms-transition-property: background-color, border-color;
|
||||
transition-property: background-color, border-color;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
-moz-transition-duration: 0.3s;
|
||||
-o-transition-duration: 0.3s;
|
||||
-ms-transition-duration: 0.3s;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
.flat .dijitTabContainerTabListNested .dijitTabHover {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.flat .dijitTabContainerTabListNested .dijitTabActive {
|
||||
color: #2196f3;
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
.flat .dijitTabContainerTabListNested .dijitTabChecked,
|
||||
.flat .dijitTabContainerTabListNested .dijitTabChecked.dijitTabHover,
|
||||
.flat .dijitTabContainerTabListNested .dijitTabChecked.dijitTabActive {
|
||||
color: #fff;
|
||||
background-color: #2196f3;
|
||||
}
|
||||
.flat .dijitTabContainerTabListNested .dijitTabChecked:before,
|
||||
.flat .dijitTabContainerTabListNested .dijitTabChecked.dijitTabHover:before,
|
||||
.flat .dijitTabContainerTabListNested .dijitTabChecked.dijitTabActive:before {
|
||||
display: none;
|
||||
}
|
||||
.flat .dijitTabContainerTabListNested.dijitTabContainerTop-tabs .dijitTab {
|
||||
margin-right: 4px;
|
||||
}
|
||||
.flat .dijitTabContainerTabListNested.dijitTabContainerBottom-tabs .dijitTab {
|
||||
margin-right: 4px;
|
||||
}
|
||||
.flat .dijitTabContainerTabListNested.dijitTabContainerLeft-tabs .dijitTab {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.flat .dijitTabContainerTabListNested.dijitTabContainerRight-tabs .dijitTab {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.flat .dijitTabPaneWrapperNested {
|
||||
border: none; /* prevent double border */
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
Executable
+446
@@ -0,0 +1,446 @@
|
||||
/* TabContainer
|
||||
*
|
||||
* Styling TabContainer means styling the TabList and Its content container (dijitTitlePane)
|
||||
*
|
||||
* Tab List: (including 4 kinds of tab location)
|
||||
* .dijitTabContainerTop-tabs - tablist container at top
|
||||
* .dijitTabContainerBottom-tabs - tablist container at bottom
|
||||
* .dijitTabContainerLeft-tabs - tablist container at left
|
||||
* .dijitTabContainerRight-tabs - tablist container at right
|
||||
*
|
||||
* Tab Strip Button:
|
||||
* .dijitTabStripIcon - tab strip button icon
|
||||
* .dijitTabStripMenuIcon - down arrow icon position
|
||||
* .dijitTabStripSlideLeftIcon - left arrow icon position
|
||||
* .dijitTabStripSlideRightIcon - right arrow icon position
|
||||
*
|
||||
* .tabStripButtonDisabled - styles for disabled tab strip buttons
|
||||
*
|
||||
* Tab Button:
|
||||
* .dijitTabContainerTop-tabs .dijitTab - styles for top tab button container
|
||||
* .dijitTabContainerBottom-tabs .dijitTab - styles for bottom tab button container
|
||||
* .dijitTabContainerLeft-tabs .dijitTab - styles for left tab button container
|
||||
* .dijitTabContainerRight-tabs .dijitTab - styles for right tab button container
|
||||
*
|
||||
* .dijitTabContainerTop-tabs .dijitTabChecked .dijitTab
|
||||
* - styles for selected status of top tab button
|
||||
* same to Bottom, Left, Right Tabs
|
||||
*
|
||||
* .dijitTabHover .dijitTab - styles when mouse hover on tab buttons
|
||||
* .dijitTabActive .dijitTab - styles when mouse down on tab buttons
|
||||
* .dijitTabChecked .dijitTab - styles when on buttons of selected tab
|
||||
*
|
||||
* .dijitTabCloseButton - the close action buttons lie at the right top of each tab button on closable tabs
|
||||
* .dijitTabCloseButtonHover - styles when mouse hover on close action button
|
||||
* .dijitTabCloseButtonActive - styles when mouse down on close action button
|
||||
*
|
||||
* Tab Button: (checked status)
|
||||
*
|
||||
* Tab Content Container:
|
||||
* .dijitTabContainerTop-dijitContentPane
|
||||
* .dijitTabContainerBottom-dijitContentPane
|
||||
* .dijitTabContainerLeft-dijitContentPane
|
||||
* .dijitTabContainerRight-dijitContentPane - for background and padding
|
||||
*
|
||||
* Nested Tabs:
|
||||
* .dijitTabContainerNested - Container for nested tabs
|
||||
* .dijitTabContainerTabListNested - tab list container for nested tabs
|
||||
*/
|
||||
|
||||
@import 'dijit_layout_variables';
|
||||
|
||||
.{$theme-name} {
|
||||
|
||||
/************ common styles *************/
|
||||
|
||||
.dijitTabContainer {
|
||||
border-radius: $tab-wrapper-border-radius;
|
||||
}
|
||||
|
||||
.dijitTabPaneWrapper {
|
||||
background: $tab-wrapper-background-color;
|
||||
border: 1px solid $tab-wrapper-border-color;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 0 0 $tab-wrapper-border-radius $tab-wrapper-border-radius;
|
||||
}
|
||||
|
||||
.dijitTabContainerTop-tabs,
|
||||
.dijitTabContainerBottom-tabs,
|
||||
.dijitTabContainerLeft-tabs,
|
||||
.dijitTabContainerRight-tabs {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.dijitTabSpacer {
|
||||
// display: none if !$tab-has-gutter;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* tabs */
|
||||
|
||||
.dijitTab {
|
||||
border: 1px solid $tab-border-color;
|
||||
background-color: $tab-background-color;
|
||||
text-align: center;
|
||||
transition-property: background, padding, margin;
|
||||
transition-duration: .2s;
|
||||
transition-timing-function: ease;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
if ($tab-checked-has-highlight-border) {
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* tabs: hover */
|
||||
|
||||
.dijitTabHover {
|
||||
background-color: $tab-hover-background-color;
|
||||
}
|
||||
|
||||
/* tabs: active */
|
||||
|
||||
.dijitTabActive {
|
||||
background-color: $tab-active-background-color;
|
||||
}
|
||||
|
||||
/* tabs: checked */
|
||||
|
||||
.dijitTabChecked {
|
||||
border: 1px solid $tab-checked-border-color;
|
||||
z-index: 1;
|
||||
&.dijitTabHover,
|
||||
&.dijitTabActive {
|
||||
border: 1px solid $tab-checked-border-color;
|
||||
background-color: $tab-checked-background-color;
|
||||
color: $tab-checked-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
/* tabs: disabled */
|
||||
|
||||
.dijitTabDisabled {
|
||||
opacity: $disabled-opacity;
|
||||
}
|
||||
|
||||
/* tabs: strip button */
|
||||
|
||||
.tabStripButton {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* tabs: close button */
|
||||
|
||||
.dijitTabCloseButton {
|
||||
_icon-core-style();
|
||||
line-height: 1;
|
||||
font-size: 1em;
|
||||
vertical-align: middle;
|
||||
margin-left: $tab-padding;
|
||||
opacity: $tab-close-button-opacity;
|
||||
&:before {
|
||||
content: $tab-close-button-icon;
|
||||
}
|
||||
}
|
||||
.dijitTabCloseButtonHover {
|
||||
opacity: $tab-close-button-hover-opacity;
|
||||
}
|
||||
.dijitTabCloseButtonActive {
|
||||
opacity: $tab-close-button-active-opacity;
|
||||
}
|
||||
|
||||
/************* end common **************/
|
||||
|
||||
|
||||
/*************** top tabs ***************/
|
||||
|
||||
.dijitTabContainerTop-tabs {
|
||||
.dijitTab {
|
||||
margin-right: $tab-spacing;
|
||||
padding: $tab-top-padding;
|
||||
border-bottom-color: $tab-wrapper-border-color;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
// .dijitTabHover,
|
||||
// .dijitTabActive,
|
||||
// .dijitTabChecked {
|
||||
// }
|
||||
.dijitTabChecked {
|
||||
border-bottom: 1px solid $tab-wrapper-background-color;
|
||||
border-left: 1px solid $tab-wrapper-border-color;
|
||||
border-right: 1px solid $tab-wrapper-border-color;
|
||||
if ($tab-checked-has-highlight-border) {
|
||||
&:before {
|
||||
height: 3px;
|
||||
background: $tab-highlight-color;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
right: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dijitTabListContainer-top {
|
||||
margin-top: 1px;
|
||||
.dijitTab {
|
||||
top:0;
|
||||
}
|
||||
}
|
||||
|
||||
/*************** end top tabs **************/
|
||||
|
||||
/*************** bottom tabs ***************/
|
||||
|
||||
.dijitTabPaneWrapper.dijitTabContainerBottom-container {
|
||||
border-radius: $tab-wrapper-border-radius $tab-wrapper-border-radius 0 0;
|
||||
}
|
||||
|
||||
.dijitTabContainerBottom-tabs {
|
||||
.dijitTab {
|
||||
margin-right: $tab-spacing;
|
||||
padding: $tab-bottom-padding;
|
||||
border-top-color: $tab-wrapper-border-color;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
// .dijitTabHover,
|
||||
// .dijitTabActive,
|
||||
// .dijitTabChecked {
|
||||
// }
|
||||
.dijitTabChecked {
|
||||
border-top: 1px solid $tab-wrapper-background-color;
|
||||
border-left: 1px solid $tab-wrapper-border-color;
|
||||
border-right: 1px solid $tab-wrapper-border-color;
|
||||
if ($tab-checked-has-highlight-border) {
|
||||
&:before {
|
||||
height: 3px;
|
||||
background: $tab-highlight-color;
|
||||
bottom: -1px;
|
||||
left: -1px;
|
||||
right: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dijitTabListContainer-bottom {
|
||||
margin-top: -1px;
|
||||
.dijitTab {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/************ end bottom tabs ************/
|
||||
|
||||
/*************** left tabs ***************/
|
||||
|
||||
.dijitTabPaneWrapper.dijitTabContainerLeft-container {
|
||||
border-radius: 0 $tab-wrapper-border-radius $tab-wrapper-border-radius 0;
|
||||
}
|
||||
|
||||
.dijitTabContainerLeft-tabs {
|
||||
.dijitTab {
|
||||
margin-bottom: $tab-spacing;
|
||||
padding: $tab-left-padding;
|
||||
border-right-color: $tab-wrapper-border-color;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
// .dijitTabHover,
|
||||
// .dijitTabActive,
|
||||
// .dijitTabChecked {
|
||||
// }
|
||||
.dijitTabChecked {
|
||||
border-right: 1px solid $tab-wrapper-background-color;
|
||||
border-top: 1px solid $tab-wrapper-border-color;
|
||||
border-bottom: 1px solid $tab-wrapper-border-color;
|
||||
if ($tab-checked-has-highlight-border) {
|
||||
&:before {
|
||||
width: 3px;
|
||||
background: $tab-highlight-color;
|
||||
bottom: -1px;
|
||||
left: -1px;
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/************** end left tabs *************/
|
||||
|
||||
/*************** right tabs ***************/
|
||||
|
||||
.dijitTabPaneWrapper.dijitTabContainerRight-container{
|
||||
border-radius: $tab-wrapper-border-radius 0 0 $tab-wrapper-border-radius
|
||||
}
|
||||
|
||||
.dijitTabContainerRight-tabs {
|
||||
.dijitTab {
|
||||
margin-bottom: $tab-spacing;
|
||||
padding: $tab-right-padding;
|
||||
border-left-color: $tab-wrapper-border-color;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
// .dijitTabHover,
|
||||
// .dijitTabActive,
|
||||
// .dijitTabChecked {
|
||||
// }
|
||||
.dijitTabChecked {
|
||||
border-left: 1px solid $tab-wrapper-background-color;
|
||||
border-top: 1px solid $tab-wrapper-border-color;
|
||||
border-bottom: 1px solid $tab-wrapper-border-color;
|
||||
if ($tab-checked-has-highlight-border) {
|
||||
&:before {
|
||||
width: 3px;
|
||||
background: $tab-highlight-color;
|
||||
bottom: -1px;
|
||||
right: -1px;
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/************* end right tabs *************/
|
||||
|
||||
/************ left/right scroll buttons + menu button ***********/
|
||||
.tabStripButton {
|
||||
background-color: $tab-strip-button-background-color;
|
||||
border: 1px solid $tab-strip-button-border-color;
|
||||
transition-property: background-color;
|
||||
}
|
||||
|
||||
.dijitTabListContainer-top ,
|
||||
.dijitTabListContainer-bottom {
|
||||
.tabStripButton {
|
||||
padding: $tab-padding $tab-padding*2;
|
||||
margin-left: $tab-spacing;
|
||||
margin-right $tab-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
.dijitTabListContainer-top {
|
||||
.tabStripButton {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.dijitTabListContainer-bottom {
|
||||
.tabStripButton {
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.tabStripButtonHover {
|
||||
background-color: $tab-strip-button-hover-background-color;
|
||||
}
|
||||
|
||||
.tabStripButtonActive {
|
||||
background-color: $tab-strip-button-active-background-color;
|
||||
}
|
||||
|
||||
.dijitTabStripIcon {
|
||||
_icon-core-style();
|
||||
color: $tab-strip-button-arrow-color;
|
||||
vertical-align: middle;
|
||||
&:before {
|
||||
content: $tab-left-icon;
|
||||
}
|
||||
}
|
||||
|
||||
.dijitTabStripSlideRightIcon {
|
||||
&:before {
|
||||
content: $tab-right-icon;
|
||||
}
|
||||
}
|
||||
|
||||
.dijitTabStripMenuIcon {
|
||||
&:before {
|
||||
content: $tab-menu-icon;
|
||||
}
|
||||
}
|
||||
|
||||
/* disabled */
|
||||
|
||||
.dijitTabListContainer-top .tabStripButtonDisabled,
|
||||
.dijitTabListContainer-bottom .tabStripButtonDisabled {
|
||||
opacity: $disabled-opacity;
|
||||
}
|
||||
|
||||
/*********** end left/right scroll buttons + menu button *********/
|
||||
|
||||
/*************** nested tabs ***************/
|
||||
|
||||
.dijitTabContainerNested .dijitTabListWrapper {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.dijitTabContainerTabListNested {
|
||||
.dijitTab {
|
||||
color: $nestedtab-text-color;
|
||||
margin: $tab-padding;
|
||||
padding: $nestedtab-padding;
|
||||
border: 1px solid $nestedtab-border-color;
|
||||
border-radius: $nestedtab-border-radius;
|
||||
transition-property: background-color, border-color;
|
||||
transition-duration: .3s;
|
||||
}
|
||||
.dijitTabHover {
|
||||
background-color: $nestedtab-hover-background-color;
|
||||
}
|
||||
.dijitTabActive {
|
||||
color: $nestedtab-active-text-color;
|
||||
background-color:$nestedtab-active-background-color;
|
||||
}
|
||||
.dijitTabChecked,
|
||||
.dijitTabChecked.dijitTabHover,
|
||||
.dijitTabChecked.dijitTabActive {
|
||||
color: $nestedtab-checked-text-color;
|
||||
background-color: $nestedtab-checked-background-color;
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/************* nested top tabs *************/
|
||||
|
||||
.dijitTabContainerTabListNested.dijitTabContainerTop-tabs .dijitTab {
|
||||
margin-right: $nestedtab-spacing;
|
||||
}
|
||||
|
||||
/************* nested bottom tabs *************/
|
||||
|
||||
.dijitTabContainerTabListNested.dijitTabContainerBottom-tabs .dijitTab {
|
||||
margin-right: $nestedtab-spacing;
|
||||
}
|
||||
|
||||
/************* nested left tabs *************/
|
||||
|
||||
.dijitTabContainerTabListNested.dijitTabContainerLeft-tabs .dijitTab {
|
||||
margin-bottom: $nestedtab-spacing;
|
||||
}
|
||||
|
||||
/************* nested right tabs *************/
|
||||
|
||||
.dijitTabContainerTabListNested.dijitTabContainerRight-tabs .dijitTab {
|
||||
margin-bottom: $nestedtab-spacing;
|
||||
}
|
||||
|
||||
|
||||
.dijitTabPaneWrapperNested {
|
||||
border: none; /* prevent double border */
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
.flat .dijitTabContainerTop-tabs .dijitTabRtl,
|
||||
.flat .dijitTabContainerBottom-tabs .dijitTabRtl {
|
||||
margin-right: 0;
|
||||
margin-left: -1px;
|
||||
}
|
||||
.flat .dijitTabControllerRtl,
|
||||
.flat .dijitTabControllerRtl .nowrapTabStrip {
|
||||
text-align: right;
|
||||
}
|
||||
.flat .dijitTabRtl .dijitTabCloseButton {
|
||||
margin-left: 0;
|
||||
margin-right: 4px;
|
||||
}
|
||||
Executable
+23
@@ -0,0 +1,23 @@
|
||||
@import 'dijit_layout_variables';
|
||||
|
||||
.{$theme-name} {
|
||||
|
||||
.dijitTabContainerTop-tabs,
|
||||
.dijitTabContainerBottom-tabs {
|
||||
.dijitTabRtl {
|
||||
margin-right: 0;
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
.dijitTabControllerRtl,
|
||||
.dijitTabControllerRtl .nowrapTabStrip {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.dijitTabRtl .dijitTabCloseButton {
|
||||
margin-left: 0;
|
||||
margin-right: $tab-padding;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
/* dijit/layout/* variables */
|
||||
|
||||
@import '../../variables';
|
||||
|
||||
/* BorderContainer*/
|
||||
|
||||
$bordercontainer-padding = $padding;
|
||||
$bordercontainer-border-color = $border-color;
|
||||
|
||||
// splitter
|
||||
$splitter-size = isEven($bordercontainer-padding) ? $bordercontainer-padding + 1 : $bordercontainer-padding; // the width of the splitter, will always be an odd number since the splitter bar's width is always 1px
|
||||
$splitter-color = $border-color; // color of the splitter thumb (the 1px wide bar)
|
||||
$splitter-hovered-color = darken($splitter-color, 25%);
|
||||
$splitter-dragged-color = $splitter-hovered-color;
|
||||
$splitter-background-color = none;
|
||||
$splitter-hovered-background-color = darken(#fff, 5%);
|
||||
$splitter-dragged-background-color = darken(#fff, 5%);
|
||||
|
||||
/* ContentPane */
|
||||
|
||||
$contentpane-padding = $padding * 2;
|
||||
$contentpane-background-color = $theme-base-color;
|
||||
|
||||
// contentpane in other layout widgets (accordion and tab container)
|
||||
$contentpane-nested-padding = $padding * 2;
|
||||
$contentpane-nested-background-color = $theme-base-color;
|
||||
|
||||
/* TabContainer */
|
||||
|
||||
$tab-highlight-color = $theme-base;
|
||||
$tab-padding = $padding;
|
||||
$tab-checked-has-highlight-border = true; // whether to have a highlight bar on the edge of the tab
|
||||
|
||||
// TabContainer: wrapper
|
||||
// (the outer container)
|
||||
$tab-wrapper-background-color = $theme-base-color;
|
||||
$tab-wrapper-border-color = $border-color;
|
||||
$tab-wrapper-border-radius = $border-radius;
|
||||
|
||||
// tabs
|
||||
$tab-background-color = $tab-wrapper-background-color;
|
||||
$tab-border-color = transparent;
|
||||
$tab-spacing = 0; // space between tabs
|
||||
|
||||
// hover
|
||||
$tab-hover-background-color = darken($theme-base-color, 5%);
|
||||
|
||||
// active
|
||||
$tab-active-background-color = darken($theme-base-color, 10%);
|
||||
|
||||
// checked
|
||||
$tab-checked-border-color = $tab-wrapper-border-color;
|
||||
$tab-checked-background-color = $tab-wrapper-background-color;
|
||||
$tab-checked-text-color = $grey-dark;
|
||||
|
||||
// icons
|
||||
$tab-left-icon = "\f004";
|
||||
$tab-right-icon = "\f005";
|
||||
$tab-menu-icon = "\f006";
|
||||
|
||||
// close button
|
||||
$tab-close-button-icon = "\f00e";
|
||||
$tab-close-button-opacity = .35;
|
||||
|
||||
// hover
|
||||
$tab-close-button-hover-opacity = .75;
|
||||
|
||||
// active
|
||||
$tab-close-button-active-opacity = 1;
|
||||
|
||||
// tab dtrip button
|
||||
$tab-strip-button-background-color = $tab-background-color;
|
||||
$tab-strip-button-border-color = $tab-border-color;
|
||||
|
||||
// hover
|
||||
$tab-strip-button-hover-background-color = $tab-hover-background-color;
|
||||
|
||||
// active
|
||||
$tab-strip-button-active-background-color = $tab-active-background-color;
|
||||
|
||||
// arrow
|
||||
$tab-strip-button-arrow-color = $theme-base;
|
||||
|
||||
// tabs: top
|
||||
$tab-top-padding = $tab-padding * 1.5 $tab-padding * 4;
|
||||
|
||||
// tabs: bottom
|
||||
$tab-bottom-padding = $tab-top-padding;
|
||||
|
||||
// tabs: left
|
||||
$tab-left-padding = $tab-padding * 2 $tab-padding * 3;
|
||||
|
||||
// tabs: right
|
||||
$tab-right-padding = $tab-left-padding;
|
||||
|
||||
// nested tab container
|
||||
$nestedtab-spacing = $padding;
|
||||
$nestedtab-padding = $tab-padding $tab-padding * 2;
|
||||
$nestedtab-border-color = transparent;
|
||||
$nestedtab-border-radius = $border-radius;
|
||||
|
||||
// normal
|
||||
$nestedtab-text-color = $theme-base;
|
||||
|
||||
// hover
|
||||
$nestedtab-hover-background-color = $tab-hover-background-color;
|
||||
|
||||
// active
|
||||
$nestedtab-active-text-color = $theme-base;
|
||||
$nestedtab-active-background-color = $tab-active-background-color;
|
||||
|
||||
// checked
|
||||
$nestedtab-checked-background-color = $theme-base;
|
||||
$nestedtab-checked-text-color = $theme-base-color;
|
||||
|
||||
/* AccordionContainer */
|
||||
|
||||
$accordion-spacing = 0; // space between accordion panes; minimum value is 0
|
||||
$accordion-border-color = $border-color;
|
||||
$accordion-border-radius = $border-radius;
|
||||
$accordion-background-color = $theme-base-color;
|
||||
|
||||
// accordion title bar
|
||||
// normal, hover and active status styles are inherited from "form/Button"
|
||||
|
||||
// checked
|
||||
$accordion-title-bar-checked-background-color = $theme-base;
|
||||
$accordion-title-bar-checked-text-color = $theme-base-color;
|
||||
|
||||
// content pane
|
||||
$accordion-content-border-color = $accordion-border-color;
|
||||
$accordion-content-background-color = $theme-base-color;
|
||||
|
||||
// icons
|
||||
// uses common vars directly
|
||||
Reference in New Issue
Block a user