diff options
Diffstat (limited to 'lib/dijit/themes/claro/layout')
-rw-r--r-- | lib/dijit/themes/claro/layout/AccordionContainer.css | 145 | ||||
-rw-r--r-- | lib/dijit/themes/claro/layout/AccordionContainer.less | 116 | ||||
-rw-r--r-- | lib/dijit/themes/claro/layout/BorderContainer.css | 130 | ||||
-rw-r--r-- | lib/dijit/themes/claro/layout/BorderContainer.less | 128 | ||||
-rw-r--r-- | lib/dijit/themes/claro/layout/ContentPane.css | 39 | ||||
-rw-r--r-- | lib/dijit/themes/claro/layout/ContentPane.less | 43 | ||||
-rw-r--r-- | lib/dijit/themes/claro/layout/TabContainer.css | 536 | ||||
-rw-r--r-- | lib/dijit/themes/claro/layout/TabContainer.less | 408 | ||||
-rw-r--r-- | lib/dijit/themes/claro/layout/TabContainer_rtl.css | 72 | ||||
-rw-r--r-- | lib/dijit/themes/claro/layout/TabContainer_rtl.less | 81 | ||||
-rw-r--r-- | lib/dijit/themes/claro/layout/images/tabBottom.png | bin | 753 -> 718 bytes | |||
-rw-r--r-- | lib/dijit/themes/claro/layout/images/tabTop.png | bin | 748 -> 721 bytes |
12 files changed, 1336 insertions, 362 deletions
diff --git a/lib/dijit/themes/claro/layout/AccordionContainer.css b/lib/dijit/themes/claro/layout/AccordionContainer.css index 77b8bd967..f76947959 100644 --- a/lib/dijit/themes/claro/layout/AccordionContainer.css +++ b/lib/dijit/themes/claro/layout/AccordionContainer.css @@ -1,65 +1,124 @@ - +/* 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 + */ .claro .dijitAccordionContainer { - border:none; + border: none; } .claro .dijitAccordionInnerContainer { - background-color: #e6e6e7; - border:solid 1px #b5bcc7; - margin-bottom:1px; - -webkit-transition-property:background-color,border; - -webkit-transition-duration:.3s; - -webkit-transition-timing-function:linear; + background-color: #efefef; + /* gray, for closed pane */ + + border: solid 1px #b5bcc7; + margin-bottom: 1px; + -webkit-transition-property: background-color, border; + -moz-transition-property: background-color, border; + transition-property: background-color, border; + -webkit-transition-duration: 0.3s; + -moz-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + transition-timing-function: linear; } .claro .dijitAccordionTitle { - background-color: transparent; - background-image: url("images/accordion.png"); - background-position:0px 0px; - background-repeat:repeat-x; - padding: 5px 7px 2px 7px; - min-height:17px; - color:#4a4a4a; + background-color: transparent; + /* pick up color from dijitAccordionInnerContainer */ + + background-image: url("images/accordion.png"); + background-position: 0 0; + background-repeat: repeat-x; + padding: 5px 7px 2px 7px; + min-height: 17px; + color: #4a4a4a; +} +.claro .dijitAccordionTitleHover { + color: #000000; } .dj_ie6 .claro .dijitAccordionTitle { - background-image: none; + background-image: none; +} +.claro .dijitAccordionContainer .dijitAccordionChildWrapper { + /* this extends the blue trim styling of the title bar to wrapping around the node. + * done by setting margin + */ + + background-color: #ffffff; + border: 1px solid #769dc0; + margin: 0 2px 2px; } .claro .dijitAccordionContainer .dijitAccordionContainer-child { - background-color:#fff; - - border:1px solid #92bce1 !important; - margin: 0px 2px 2px; - padding: 9px; + /* this is affecting the child widget itself */ + + padding: 9px; } +/* Active state for closed pane */ .claro .dijitAccordionInnerContainerActive { - border:1px solid #769DC0; - background-color:#7dbefa; - -webkit-transition-duration:.1s; + border: 1px solid #769dc0; + background-color: #7dbefa; + -webkit-transition-duration: 0.1s; + -moz-transition-duration: 0.1s; + transition-duration: 0.1s; } .claro .dijitAccordionInnerContainerActive .dijitAccordionTitle { - background-position:0px -136px; - color:#000; + background-position: 0 -136px; + color: #000000; } +/* Open (a.k.a. selected) pane */ .claro .dijitAccordionInnerContainerSelected { - border-color:#92bce1; - background-color: #cde8ff; + border-color: #769dc0; + background-color: #cfe5fa; } .claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle { - color:#000; - background-position: 0 0; + color: #000000; + background-position: 0 0; + /* avoid effect when clicking the title of the open pane */ + } +/* Hovering open or closed pane */ .claro .dijitAccordionInnerContainerHover dijitAccordionTitle { - - color:#000; + /* both open and closed */ + + color: #000000; } -.claro .dijitAccordionInnerContainerHover, -.claro .dijitAccordionInnerContainerSelectedActive { - border:1px solid #769DC0; - background-color:#9dcfff; - -webkit-transition-duration:.2s; +.claro .dijitAccordionInnerContainerHover, .claro .dijitAccordionInnerContainerSelectedActive { + /* note: clicking the currently selected Accordion pane should have no effect, so treating same as hover. */ + + border: 1px solid #769dc0; + background-color: #abd6ff; + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + transition-duration: 0.2s; } -.claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionContainer-child, -.claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionContainer-child { - background-color:#ffffff; - border:1px solid #769DC0 !important; - -webkit-box-shadow:inset 0px 0px 3px rgba(0, 0, 0, .25); - -moz-box-shadow:inset 0px 0px 3px rgba(0, 0, 0, .25); +.claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionChildWrapper, .claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionChildWrapper { + background-color: #ffffff; + border: 1px solid #769dc0 !important; + -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.25); + -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.25); + box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.25); } diff --git a/lib/dijit/themes/claro/layout/AccordionContainer.less b/lib/dijit/themes/claro/layout/AccordionContainer.less new file mode 100644 index 000000000..01f4427f4 --- /dev/null +++ b/lib/dijit/themes/claro/layout/AccordionContainer.less @@ -0,0 +1,116 @@ +/* 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 "../variables"; + +.claro .dijitAccordionContainer { + border:none; +} +.claro .dijitAccordionInnerContainer { + background-color: @unselected-background-color; /* gray, for closed pane */ + border:solid 1px @border-color; + margin-bottom:1px; + .transition-property(background-color,border); + .transition-duration(.3s); + .transition-timing-function(linear); +} +.claro .dijitAccordionTitle { + background-color: transparent; /* pick up color from dijitAccordionInnerContainer */ + background-image: url("images/accordion.png"); + background-position:0 0; + background-repeat:repeat-x; + padding: 5px 7px 2px 7px; + min-height:17px; + color:@unselected-text-color; +} +.claro .dijitAccordionTitleHover { + color:@hovered-text-color; +} +.dj_ie6 .claro .dijitAccordionTitle { + background-image: none; +} +.claro .dijitAccordionContainer .dijitAccordionChildWrapper { + /* this extends the blue trim styling of the title bar to wrapping around the node. + * done by setting margin + */ + background-color:@pane-background-color; + border:1px solid @selected-border-color; + margin: 0 2px 2px; +} + +.claro .dijitAccordionContainer .dijitAccordionContainer-child { + /* this is affecting the child widget itself */ + padding: 9px; +} + +/* Active state for closed pane */ + +.claro .dijitAccordionInnerContainerActive { + border:1px solid @selected-border-color; + background-color:@pressed-background-color; + .transition-duration(.1s); +} +.claro .dijitAccordionInnerContainerActive .dijitAccordionTitle { + background-position:0 -136px; + color:@selected-text-color; +} + +/* Open (a.k.a. selected) pane */ + +.claro .dijitAccordionInnerContainerSelected { + border-color:@selected-border-color; + background-color: @selected-background-color; +} +.claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle { + color:@selected-text-color; + background-position: 0 0; /* avoid effect when clicking the title of the open pane */ +} + +/* Hovering open or closed pane */ + +.claro .dijitAccordionInnerContainerHover dijitAccordionTitle { + /* both open and closed */ + color:@hovered-text-color; +} + +.claro .dijitAccordionInnerContainerHover, +.claro .dijitAccordionInnerContainerSelectedActive { + /* note: clicking the currently selected Accordion pane should have no effect, so treating same as hover. */ + border:1px solid @hovered-border-color; + background-color:@hovered-background-color; + .transition-duration(.2s); +} + +.claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionChildWrapper, +.claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionChildWrapper { + background-color:@pane-background-color; + border:1px solid @hovered-border-color !important; + .box-shadow(inset 0 0 3px rgba(0, 0, 0, .25)); +} diff --git a/lib/dijit/themes/claro/layout/BorderContainer.css b/lib/dijit/themes/claro/layout/BorderContainer.css index 333a45890..ede2a56c5 100644 --- a/lib/dijit/themes/claro/layout/BorderContainer.css +++ b/lib/dijit/themes/claro/layout/BorderContainer.css @@ -1,77 +1,109 @@ +/* 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 +*/ .claro .dijitBorderContainer { - border: 1px #b5bcc7 solid; - padding: 5px; + /* matches the width of the splitters between panes */ + + padding: 5px; } -.claro .dijitSplitContainer-child, -.claro .dijitBorderContainer-child { - - border: 1px #b5bcc7 solid; +.claro .dijitSplitContainer-child, .claro .dijitBorderContainer-child { + /* By default put borders on all children of BorderContainer, + * to give illusion of borders on the splitters themselves. + */ + + border: 1px #b5bcc7 solid; } .claro .dijitBorderContainer-dijitTabContainerTop, .claro .dijitBorderContainer-dijitTabContainerBottom, .claro .dijitBorderContainer-dijitTabContainerLeft, .claro .dijitBorderContainer-dijitTabContainerRight, .claro .dijitBorderContainer-dijitAccordionContainer { - - border: none; + /* except that TabContainer defines borders on it's sub-nodes (tablist and dijitTabPaneWrapper), + * so override rule setting border on domNode + */ + + border: none; } .claro .dijitBorderContainer-dijitBorderContainer { - - border: 1px #c0ccdf solid; - padding: 5px; + /* make nested BorderContainers look like a single big widget with lots of splitters */ + + border: 0; + padding: 0; } -.claro .dijitSplitterH, -.claro .dijitGutterH { - background:none; - border:0; - height:5px; +/* Splitters and gutters */ +.claro .dijitSplitterH, .claro .dijitGutterH { + background: none; + border: 0; + height: 5px; } .claro .dijitSplitterH .dijitSplitterThumb { - background:#dde2e9 none; - height:1px; - top:2px; - width:19px; + background: #b5bcc7 none; + height: 1px; + top: 2px; + width: 19px; } -.claro .dijitSplitterV, -.claro .dijitGutterV { - background:none; - border:0; - width:5px; - margin: 0; +.claro .dijitSplitterV, .claro .dijitGutterV { + background: none; + border: 0; + width: 5px; + margin: 0; } .claro .dijitSplitterV .dijitSplitterThumb { - background:#dde2e9 none; - height:19px; - left:2px; - width:1px; - margin: 0; + background: #b5bcc7 none; + height: 19px; + left: 2px; + width: 1px; + margin: 0; } +/* hovered splitter */ .claro .dijitSplitterHHover { - font-size: 1px; - background: url("images/splitterHorizontalHover.png") no-repeat center top; + font-size: 1px; + background: url("images/splitterHorizontalHover.png") no-repeat center top; } .claro .dijitSplitterHHover .dijitSplitterThumb { - background:#769dc0 none; + background: #769dc0 none; } .claro .dijitSplitterVHover { - font-size: 1px; - background: url("images/splitterVerticalHover.png") no-repeat center left; + font-size: 1px; + background: url("images/splitterVerticalHover.png") no-repeat center left; } .claro .dijitSplitterVHover .dijitSplitterThumb { - background:#769dc0 none; -} -.dj_ie6 .dijitSplitterHHover, -.dj_ie6 .claro .dijitSplitterVHover { - background-color:#cfe9ff; - background-image:none; + background: #769dc0 none; } -.claro .dijitSplitterHActive { - font-size: 1px; - background-color:#abd4fb; - border-top:blue; +.dj_ie6 .dijitSplitterHHover, .dj_ie6 .claro .dijitSplitterVHover { + background-color: #cfe5fa; + background-image: none; } -.claro .dijitSplitterVActive { - font-size: 1px; - background-color:#abd4fb; +/* active splitter */ +.claro .dijitSplitterHActive, .claro .dijitSplitterVActive { + font-size: 1px; + background-color: #abd6ff; } diff --git a/lib/dijit/themes/claro/layout/BorderContainer.less b/lib/dijit/themes/claro/layout/BorderContainer.less new file mode 100644 index 000000000..17c4b63cb --- /dev/null +++ b/lib/dijit/themes/claro/layout/BorderContainer.less @@ -0,0 +1,128 @@ +/* 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 "../variables"; + +.claro .dijitBorderContainer { + /* matches the width of the splitters between panes */ + padding: 5px; +} + +.claro .dijitSplitContainer-child, +.claro .dijitBorderContainer-child { + /* By default put borders on all children of BorderContainer, + * to give illusion of borders on the splitters themselves. + */ + border: 1px @border-color solid; +} + +.claro .dijitBorderContainer-dijitTabContainerTop, +.claro .dijitBorderContainer-dijitTabContainerBottom, +.claro .dijitBorderContainer-dijitTabContainerLeft, +.claro .dijitBorderContainer-dijitTabContainerRight, +.claro .dijitBorderContainer-dijitAccordionContainer { + /* except that TabContainer defines borders on it's sub-nodes (tablist and dijitTabPaneWrapper), + * so override rule setting border on domNode + */ + border: none; + +} +.claro .dijitBorderContainer-dijitBorderContainer { + /* make nested BorderContainers look like a single big widget with lots of splitters */ + border: 0; + padding: 0; +} + +/* Splitters and gutters */ + +.claro .dijitSplitterH, +.claro .dijitGutterH { + background:none; + border:0; + height:5px; +} + +.claro .dijitSplitterH .dijitSplitterThumb { + background:@border-color none; + height:1px; + top:2px; + width:19px; +} + +.claro .dijitSplitterV, +.claro .dijitGutterV { + background:none; + border:0; + width:5px; + margin: 0; +} + +.claro .dijitSplitterV .dijitSplitterThumb { + background:@border-color none; + height:19px; + left:2px; + width:1px; + margin: 0; +} + +/* hovered splitter */ +.claro .dijitSplitterHHover { + font-size: 1px; + background: url("images/splitterHorizontalHover.png") no-repeat center top; +} + + +.claro .dijitSplitterHHover .dijitSplitterThumb { + background:@hovered-border-color none; +} + +.claro .dijitSplitterVHover { + font-size: 1px; + background: url("images/splitterVerticalHover.png") no-repeat center left; +} + +.claro .dijitSplitterVHover .dijitSplitterThumb { + background:@hovered-border-color none; +} + +.dj_ie6 .dijitSplitterHHover, +.dj_ie6 .claro .dijitSplitterVHover { + background-color: @splitter-hovered-background-color; + background-image:none; +} + +/* active splitter */ +.claro .dijitSplitterHActive, +.claro .dijitSplitterVActive { + font-size: 1px; + background-color:@splitter-dragged-background-color; +} diff --git a/lib/dijit/themes/claro/layout/ContentPane.css b/lib/dijit/themes/claro/layout/ContentPane.css index f9f543cd1..a7753de1d 100644 --- a/lib/dijit/themes/claro/layout/ContentPane.css +++ b/lib/dijit/themes/claro/layout/ContentPane.css @@ -1,17 +1,38 @@ - +/* 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 + */ .claro .dijitContentPane { - padding: 8px; -} + padding: 8px; +} +/* nested layouts */ .claro .dijitTabContainerTop-dijitContentPane, .claro .dijitTabContainerLeft-dijitContentPane, .claro .dijitTabContainerBottom-dijitContentPane, .claro .dijitTabContainerRight-dijitContentPane, .claro .dijitAccordionContainer-dijitContentPane { - background-color: #fff; - padding: 8px; + background-color: #ffffff; + padding: 8px; } -.claro .dijitSplitContainer-dijitContentPane, -.claro .dijitBorderContainer-dijitContentPane { - background-color: #fff; - padding: 8px; +.claro .dijitSplitContainer-dijitContentPane, .claro .dijitBorderContainer-dijitContentPane { + background-color: #ffffff; + padding: 8px; } diff --git a/lib/dijit/themes/claro/layout/ContentPane.less b/lib/dijit/themes/claro/layout/ContentPane.less new file mode 100644 index 000000000..83329bdb7 --- /dev/null +++ b/lib/dijit/themes/claro/layout/ContentPane.less @@ -0,0 +1,43 @@ +/* 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 "../variables"; + +.claro .dijitContentPane { + padding: 8px; +} + +/* nested layouts */ +.claro .dijitTabContainerTop-dijitContentPane, +.claro .dijitTabContainerLeft-dijitContentPane, +.claro .dijitTabContainerBottom-dijitContentPane, +.claro .dijitTabContainerRight-dijitContentPane, +.claro .dijitAccordionContainer-dijitContentPane { + background-color: @pane-background-color; + padding: 8px; +} +.claro .dijitSplitContainer-dijitContentPane, +.claro .dijitBorderContainer-dijitContentPane { + background-color: @pane-background-color; + padding: 8px; +}
\ No newline at end of file diff --git a/lib/dijit/themes/claro/layout/TabContainer.css b/lib/dijit/themes/claro/layout/TabContainer.css index 95fe2c262..030e4b761 100644 --- a/lib/dijit/themes/claro/layout/TabContainer.css +++ b/lib/dijit/themes/claro/layout/TabContainer.css @@ -1,348 +1,434 @@ - +/* 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 .dijitTabInnerDiv/.dijitTabContent - styles for top tab button container + * .dijitTabContainerBottom-tabs .dijitTabInnerDiv/.dijitTabContent - styles for bottom tab button container + * .dijitTabContainerLeft-tabs .dijitTabInnerDiv/.dijitTabContent - styles for left tab button container + * .dijitTabContainerRight-tabs .dijitTabInnerDiv/.dijitTabContent - styles for right tab button container + * + * .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv/.dijitTabContent + * - styles for selected status of top tab button + * same to Bottom, Left, Right Tabs + * + * .dijitTabHover .dijitTabInnerDiv - styles when mouse hover on tab buttons + * .dijitTabActive .dijitTabInnerDiv - styles when mouse down on tab buttons + * .dijitTabChecked .dijitTabInnerDiv - 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 + */ +/*** some common features ***/ .claro .dijitTabPaneWrapper { - background:#fff; + background: #ffffff; } .claro .dijitTabPaneWrapper, .claro .dijitTabContainerTop-tabs, .claro .dijitTabContainerBottom-tabs, .claro .dijitTabContainerLeft-tabs, .claro .dijitTabContainerRight-tabs { - - border-color: #b5bcc7; + /* todo: add common class name for this div */ + + border-color: #b5bcc7; } .claro .dijitTabCloseButton { - background: url("images/tabClose.png") no-repeat; - width: 14px; - height: 14px; - margin-left: 5px; - margin-right:-3px; + background: url("images/tabClose.png") no-repeat; + width: 14px; + height: 14px; + margin-left: 5px; + margin-right: -5px; } .claro .dijitTabCloseButtonHover { - background-position:-14px; + background-position: -14px; } .claro .dijitTabCloseButtonActive { - background-position:-28px; + background-position: -28px; } .claro .dijitTabSpacer { - - display: none; + /* set the spacer invisible. note that height:0 doesn't work on IE/quirks, it's still 10px. */ + + display: none; } .claro .dijitTabInnerDiv { - background-color:#e6e6e7; - -webkit-transition-property:background-color, border; - -webkit-transition-duration:.35s; - color:#4a4a4a; + background-color: #efefef; + -webkit-transition-property: background-color, border; + -moz-transition-property: background-color, border; + transition-property: background-color, border; + -webkit-transition-duration: 0.35s; + -moz-transition-duration: 0.35s; + transition-duration: 0.35s; + color: #4a4a4a; } .claro .dijitTabHover .dijitTabInnerDiv { - background-color:#a9d6ff; - -webkit-transition-duration:.25s; - color:#000; + background-color: #abd6ff; + -webkit-transition-duration: 0.25s; + -moz-transition-duration: 0.25s; + transition-duration: 0.25s; + color: #000000; } .claro .dijitTabActive .dijitTabInnerDiv { - background-color:#8bc4f9; - color:#000; - -webkit-transition-duration:.1s; + background-color: #7dbefa; + color: #000000; + -webkit-transition-duration: 0.1s; + -moz-transition-duration: 0.1s; + transition-duration: 0.1s; } .claro .dijitTabChecked .dijitTabInnerDiv { - background-color:#b2d4f3; - color:#000; + background-color: #cfe5fa; + color: #000000; } .claro .dijitTabContent { - border: 1px solid #b5bcc7; + border: 1px solid #b5bcc7; +} +.claro .dijitTabHover .dijitTabContent { + border-color: #769dc0; } -.claro .dijitTabHover .dijitTabContent, .claro .dijitTabActive .dijitTabContent { - border-color: #769dc0; + border-color: #769dc0; } .claro .dijitTabChecked .dijitTabContent { - color:#000; - border-color: #b5bcc7; + color: #000000; + border-color: #b5bcc7; } .claro .tabStripButton .dijitTabInnerDiv { - background-color: transparent; + background-color: transparent; } .claro .tabStripButton .dijitTabContent { - border: none; + border: none; } +/*** end common ***/ +/*************** top tab ***************/ .claro .dijitTabContainerTop-tabs .dijitTab { - top: 1px; - margin-right: 1px; - padding-top: 3px; + top: 1px; + /* used for overlap */ + + margin-right: 1px; + padding-top: 3px; } .dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTab { - top: 3px; + top: 3px; } +/* for top tab padding. change height when status changes */ .claro .dijitTabContainerTop-tabs .dijitTabContent { - padding:3px 8px 3px 4px; - border-bottom: 1px; - background-image:url("images/tabTop.png"); - background-position:0px 0px; - background-repeat:repeat-x; - min-width: 60px; - text-align: center; + padding: 3px 6px; + border-bottom-width: 0; + background-image: url("images/tabTop.png"); + background-position: 0 0; + background-repeat: repeat-x; + min-width: 60px; + text-align: center; } .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent { - padding-bottom: 4px; - padding-top: 6px; -} -.dj_ie .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent { - border-bottom: none; + padding-bottom: 4px; + padding-top: 6px; } +/* normal status */ .claro .dijitTabContainerTop-tabs .dijitTabInnerDiv { - background-image:url("images/tabTop.png"); - background-position:0px -248px; - background-position:bottom; - background-repeat:repeat-x; - box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.04); - -webkit-box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.04); - -moz-box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.04); -} + background-image: url("images/tabTop.png"); + background-position: 0 -248px; + background-position: bottom; + background-repeat: repeat-x; + -webkit-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.04); + -moz-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.04); + box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.04); +} +/* checked status */ .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv { - background-image:none; - box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.05); - -webkit-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.05); + background-image: none; + -webkit-box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05); + box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05); } .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent { - background-position:0px -102px; - background-repeat:repeat-x; + background-position: 0 -102px; + background-repeat: repeat-x; } +/** end top tab **/ +/*************** bottom tab ***************/ .claro .dijitTabContainerBottom-tabs .dijitTab { - top: -1px; - margin-right: 1px; + top: -1px; + /* used for overlap */ + + margin-right: 1px; } +/* calculate the position and size */ .claro .dijitTabContainerBottom-tabs .dijitTabContent { - padding:3px 8px 4px 4px; - border-top: none; - background-image: url("images/tabBottom.png"); - background-position:0px -249px; - background-repeat: repeat-x; - background-position:bottom; - min-width: 60px; - text-align: center; + padding: 3px 6px; + border-top-width: 0; + background-image: url("images/tabBottom.png"); + background-position: 0 -249px; + background-repeat: repeat-x; + background-position: bottom; + min-width: 60px; + text-align: center; } .claro .dijitTabContainerBottom-tabs .dijitTab { - padding-bottom: 3px; + padding-bottom: 3px; } +/* normal status */ .claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv { - background-image: url("images/tabBottom.png"); - background-position: top; - background-repeat: repeat-x; - box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.04); - -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.04); - -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.04); - -} + background-image: url("images/tabBottom.png"); + background-position: top; + background-repeat: repeat-x; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); +} +/* checked status */ .claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabContent { - padding-bottom: 7px; - padding-top: 4px; - background-position:0px -119px; + padding-bottom: 7px; + padding-top: 4px; + background-position: 0 -119px; } .claro .dijitTabContainerBottom-tabs .dijitTabChecked { - padding-bottom: 0; + padding-bottom: 0; } .claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv { - background-image:none; - box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); - -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); + background-image: none; + -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } +/** end bottom tab **/ +/*************** left tab ***************/ .claro .dijitTabContainerLeft-tabs .dijitTab { - left: 1px; - margin-bottom: 1px; + border-right-width: 0; + left: 1px; + /* used for overlap */ + + margin-bottom: 1px; } +/* normal status */ .claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv { - background-image: url("images/tabLeft.png"); - background-position: -347px -340px; - background-repeat: repeat-y; + background-image: url("images/tabLeft.png"); + background-position: -347px -340px; + background-repeat: repeat-y; } .claro .dijitTabContainerLeft-tabs .dijitTabContent { - padding:3px 8px 4px 4px; - background-image: url("images/tabLeft.png"); - background-repeat: repeat-y; - background-position:0px 0px; + padding: 3px 8px 4px 4px; + background-image: url("images/tabLeft.png"); + background-repeat: repeat-y; + background-position: 0 0; } +/* checked status */ .claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabContent { - padding-right: 9px; - border-right: none; - background-image: none; + padding-right: 9px; + border-right: none; + background-image: none; } .claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv { - background-position:0px -179px; - background-repeat:repeat-y; - box-shadow: -1px 0px 2px rgba(0, 0, 0, .05); - -webkit-box-shadow: -1px 0px 2px rgba(0, 0, 0, .05); - -moz-box-shadow: -1px 0px 2px rgba(0, 0, 0, 0.05); -} + background-position: 0 -179px; + background-repeat: repeat-y; + -webkit-box-shadow: -1px 0 2px rgba(0, 0, 0, 0.05); + -moz-box-shadow: -1px 0 2px rgba(0, 0, 0, 0.05); + box-shadow: -1px 0 2px rgba(0, 0, 0, 0.05); +} +/** end left tab **/ +/*************** right tab ***************/ .claro .dijitTabContainerRight-tabs .dijitTab { - left: -1px; - margin-bottom: 1px; + border-left-width: 0; + left: -1px; + /* used for overlap */ + + margin-bottom: 1px; } +/* normal status */ .claro .dijitTabContainerRight-tabs .dijitTabInnerDiv { - background-image: url("images/tabRight.png"); - background-repeat: repeat-y; - background-position: -1px -347px; + background-image: url("images/tabRight.png"); + background-repeat: repeat-y; + background-position: -1px -347px; } .claro .dijitTabContainerRight-tabs .dijitTabContent { - padding:3px 8px 4px 4px; - background-image: url("images/tabRight.png"); - background-position:right top; - background-repeat: repeat-y; + padding: 3px 8px 4px 4px; + background-image: url("images/tabRight.png"); + background-position: right top; + background-repeat: repeat-y; } +/* checked status */ .claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabContent { - padding-left: 5px; - border-left: none; - background-image: none; + padding-left: 5px; + border-left: none; + background-image: none; } .claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv { - background-position:-348px -179px; - box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.07); - -webkit-box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.07); - -moz-box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.07); -} -.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv, -.claro .dijitTabContainerTop-tabs .dijitTabContent { - border-radius: 2px 2px 0px 0px; - -moz-border-radius: 2px 2px 0px 0px; - -webkit-border-top-left-radius:2px; - -webkit-border-top-right-radius:2px; -} -.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv, -.claro .dijitTabContainerBottom-tabs .dijitTabContent{ - border-radius: 0px 0px 2px 2px; - -moz-border-radius: 0px 0px 2px 2px; - -webkit-border-bottom-right-radius:2px; - -webkit-border-bottom-left-radius:2px; -} -.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv, -.claro .dijitTabContainerLeft-tabs .dijitTabContent{ - border-radius: 2px 0px 0px 2px; - -moz-border-radius: 2px 0px 0px 2px; - -webkit-border-top-left-radius:2px; - -webkit-border-bottom-left-radius:2px; -} -.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv, -.claro .dijitTabContainerRight-tabs .dijitTabContent{ - border-radius: 0px 2px 2px 0px; - -moz-border-radius: 0px 2px 2px 0px; - -webkit-border-top-right-radius:2px; - -webkit-border-bottom-right-radius:2px; -} + background-position: -348px -179px; + -webkit-box-shadow: 1px 0 2px rgba(0, 0, 0, 0.07); + -moz-box-shadow: 1px 0 2px rgba(0, 0, 0, 0.07); + box-shadow: 1px 0 2px rgba(0, 0, 0, 0.07); +} +/** end right tab **/ +/** round corner **/ +.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv, .claro .dijitTabContainerTop-tabs .dijitTabContent { + -moz-border-radius: 2px 2px 0 0; + border-radius: 2px 2px 0 0; +} +.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv, .claro .dijitTabContainerBottom-tabs .dijitTabContent { + -moz-border-radius: 0 0 2px 2px; + border-radius: 0 0 2px 2px; +} +.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv, .claro .dijitTabContainerLeft-tabs .dijitTabContent { + -moz-border-radius: 2px 0 0 2px; + border-radius: 2px 0 0 2px; +} +.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv, .claro .dijitTabContainerRight-tabs .dijitTabContent { + -moz-border-radius: 0 2px 2px 0; + border-radius: 0 2px 2px 0; +} +/************ left/right scroll buttons + menu button ************/ .claro .tabStripButton { - background-color:#deecf9; - border: 1px solid #b5bcc7; + background-color: #e9f4fe; + border: 1px solid #b5bcc7; } .claro .dijitTabListContainer-top .tabStripButton { - padding: 4px 3px; - margin-top:7px; - background-image: url("images/tabTop.png"); - background-position:0px 0px; + padding: 4px 3px; + margin-top: 7px; + background-image: url("images/tabTop.png"); + background-position: 0 0; } .claro .dijitTabListContainer-bottom .tabStripButton { - padding:5px 3px; - margin-bottom:4px; - background-image: url("images/tabTop.png"); - background-position:0px -248px; - background-position:bottom; + padding: 5px 3px; + margin-bottom: 4px; + background-image: url("images/tabTop.png"); + background-position: 0 -248px; + background-position: bottom; } .claro .tabStripButtonHover { - background-color:#a6d2fb; + background-color: #abd6ff; } .claro .tabStripButtonActive { - background-color:#7dbefa; + background-color: #7dbefa; } .claro .dijitTabStripIcon { - height:15px; - width:15px; - margin: 0 auto; - background:url("../form/images/buttonArrows.png") no-repeat -75px 50%; - background-color: transparent; + height: 15px; + width: 15px; + margin: 0 auto; + background: url("../form/images/buttonArrows.png") no-repeat -75px 50%; + background-color: transparent; } -.claro .dijitTabStripSlideRightIcon{ - background-position: -24px 50%; +.claro .dijitTabStripSlideRightIcon { + background-position: -24px 50%; } .claro .dijitTabStripMenuIcon { - background-position: -51px 50%; + background-position: -51px 50%; } -.claro .dijitTabListContainer-top .tabStripButtonDisabled, -.claro .dijitTabListContainer-bottom .tabStripButtonDisabled { - background-color:#dddddd; - border:1px solid #c9c9c9; +/*disabled styles for tab strip buttons*/ +.claro .dijitTabListContainer-top .tabStripButtonDisabled, .claro .dijitTabListContainer-bottom .tabStripButtonDisabled { + background-color: #d3d3d3; + border: 1px solid #b5bcc7; + /* to match border of TabContainer itself */ + } .claro .tabStripButtonDisabled .dijitTabStripSlideLeftIcon { - background-position:-175px 50%; + background-position: -175px 50%; } .claro .tabStripButtonDisabled .dijitTabStripSlideRightIcon { - background-position: -124px 50%; + background-position: -124px 50%; } .claro .tabStripButtonDisabled .dijitTabStripMenuIcon { - background-position: -151px 50%; -} + background-position: -151px 50%; +} +/* Nested Tabs */ .claro .dijitTabContainerNested .dijitTabListWrapper { - height: auto; + height: auto; } .claro .dijitTabContainerNested .dijitTabContainerTop-tabs { - border-bottom:solid 1px #b5bcc7; - padding:1px 2px 4px; - margin-top:-2px; + border-bottom: solid 1px #b5bcc7; + padding: 1px 2px 4px; + margin-top: -2px; } .claro .dijitTabContainerTabListNested .dijitTabContent { - background:rgba(255, 255, 255, 0) none repeat scroll 0 0; - border: none; - padding: 4px; - border-color: rgba(118,157,192,0); - -webkit-transition-property:background-color, border-color; - -webkit-transition-duration:.3s; + background: rgba(255, 255, 255, 0) none repeat scroll 0 0; + border: none; + padding: 4px; + border-color: rgba(118, 157, 192, 0); + -webkit-transition-property: background-color, border-color; + -moz-transition-property: background-color, border-color; + transition-property: background-color, border-color; + -webkit-transition-duration: 0.3s; + -moz-transition-duration: 0.3s; + transition-duration: 0.3s; + -moz-border-radius: 2px; + border-radius: 2px; } .claro .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv { - - background: none; - border: none; - top: 0px; - box-shadow: none; - -webkit-box-shadow: none; - -moz-box-shadow: none; + /* 4 element selector to override box-shadow setting from above rule: + * .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv { ... } + */ + + background: none; + border: none; + top: 0; + /* to override top: 1px/-1px for normal tabs */ + + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; } .claro .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent { - background-color:#eaf4fc; - border-radius: 2px 2px 2px 2px; - -moz-border-radius: 2px 2px 2px 2px; - -webkit-border-radius:2px; - border:solid 1px #c8dff3; - padding: 3px; - webkit-transition-duration:.2s; + background-color: #e9f4fe; + border: solid 1px #cfe5fa; + padding: 3px; + -webkit-transition-duration: 0.2s; + -moz-transition-duration: 0.2s; + transition-duration: 0.2s; } .claro .dijitTabContainerTabListNested .dijitTabHover .tabLabel { - text-decoration: none; + text-decoration: none; } .claro .dijitTabContainerTabListNested .dijitTabActive .dijitTabContent { - border-radius: 2px 2px 2px 2px; - -moz-border-radius: 2px 2px 2px 2px; - -webkit-border-radius:2px; - border:solid 1px #a8c7e2; - padding: 3px; - background:#b9d9f5 url("images/tabNested.png") repeat-x; - -webkit-transition-duration:.1s; + border: solid 1px #769dc0; + padding: 3px; + background: #abd6ff url("images/tabNested.png") repeat-x; + -webkit-transition-duration: 0.1s; + -moz-transition-duration: 0.1s; + transition-duration: 0.1s; } .claro .dijitTabContainerTabListNested .dijitTabChecked .dijitTabContent { - border-radius: 2px 2px 2px 2px; - -moz-border-radius: 2px 2px 2px 2px; - -webkit-border-radius:2px; - padding: 3px; - border:solid 1px #a8c7e2; - background-position: 0px 105px; - background-color:#d4e8f9; + padding: 3px; + border: solid 1px #769dc0; + background-position: 0 105px; + background-color: #cfe5fa; } .claro .dijitTabContainerTabListNested .dijitTabChecked .tabLabel { - text-decoration: none; - background-image:none; + text-decoration: none; + background-image: none; } .claro .dijitTabPaneWrapperNested { - border: none; + border: none; + /* prevent double border */ + } .dj_ie6 .claro .dijitTabContent, .dj_ie6 .claro .dijitTabInnerDiv, .dj_ie6 .dijitTabListContainer-top .tabStripButton, -.dj_ie6 .dijitTabListContainer-bottom .tabStripButton{ - background-image: none; +.dj_ie6 .dijitTabListContainer-bottom .tabStripButton { + background-image: none; } diff --git a/lib/dijit/themes/claro/layout/TabContainer.less b/lib/dijit/themes/claro/layout/TabContainer.less new file mode 100644 index 000000000..691900eba --- /dev/null +++ b/lib/dijit/themes/claro/layout/TabContainer.less @@ -0,0 +1,408 @@ +/* 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 .dijitTabInnerDiv/.dijitTabContent - styles for top tab button container + * .dijitTabContainerBottom-tabs .dijitTabInnerDiv/.dijitTabContent - styles for bottom tab button container + * .dijitTabContainerLeft-tabs .dijitTabInnerDiv/.dijitTabContent - styles for left tab button container + * .dijitTabContainerRight-tabs .dijitTabInnerDiv/.dijitTabContent - styles for right tab button container + * + * .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv/.dijitTabContent + * - styles for selected status of top tab button + * same to Bottom, Left, Right Tabs + * + * .dijitTabHover .dijitTabInnerDiv - styles when mouse hover on tab buttons + * .dijitTabActive .dijitTabInnerDiv - styles when mouse down on tab buttons + * .dijitTabChecked .dijitTabInnerDiv - 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 "../variables"; + +/*** some common features ***/ +.claro .dijitTabPaneWrapper { + background:@pane-background-color; +} +.claro .dijitTabPaneWrapper, +.claro .dijitTabContainerTop-tabs, +.claro .dijitTabContainerBottom-tabs, +.claro .dijitTabContainerLeft-tabs, +.claro .dijitTabContainerRight-tabs { + /* todo: add common class name for this div */ + border-color: @border-color; +} +.claro .dijitTabCloseButton { + background: url("images/tabClose.png") no-repeat; + width: 14px; + height: 14px; + margin-left: 5px; + margin-right:-5px; +} +.claro .dijitTabCloseButtonHover { + background-position:-14px; +} +.claro .dijitTabCloseButtonActive { + background-position:-28px; +} +.claro .dijitTabSpacer { + /* set the spacer invisible. note that height:0 doesn't work on IE/quirks, it's still 10px. */ + display: none; +} +.claro .dijitTabInnerDiv { + background-color:@unselected-background-color; + .transition-property(background-color, border); + .transition-duration(.35s); + color:@unselected-text-color; +} +.claro .dijitTabHover .dijitTabInnerDiv { + background-color:@hovered-background-color; + .transition-duration(.25s); + color:@hovered-text-color; +} +.claro .dijitTabActive .dijitTabInnerDiv { + background-color:@pressed-background-color; + color:@selected-text-color; + .transition-duration(.1s); +} +.claro .dijitTabChecked .dijitTabInnerDiv { + background-color:@selected-background-color; + color:@selected-text-color; +} + +.claro .dijitTabContent { + border: 1px solid @border-color; +} +.claro .dijitTabHover .dijitTabContent { + border-color: @hovered-border-color; +} +.claro .dijitTabActive .dijitTabContent { + border-color: @pressed-border-color; +} +.claro .dijitTabChecked .dijitTabContent { + color:@selected-text-color; // todo: redundant with .claro .dijitTabChecked .dijitTabInnerDiv above? + border-color: @border-color; // don't use @selected-border-color because need to match border of TabContainer +} + +.claro .tabStripButton .dijitTabInnerDiv { + background-color: transparent; +} +.claro .tabStripButton .dijitTabContent { + border: none; +} +/*** end common ***/ + + +/*************** top tab ***************/ +.claro .dijitTabContainerTop-tabs .dijitTab { + top: 1px; /* used for overlap */ + margin-right: 1px; + padding-top: 3px; +} +.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTab { + top: 3px; +} +/* for top tab padding. change height when status changes */ +.claro .dijitTabContainerTop-tabs .dijitTabContent { + padding:3px 6px; + border-bottom-width: 0; + background-image:url("images/tabTop.png"); + background-position:0 0; + background-repeat:repeat-x; + min-width: 60px; + text-align: center; +} +.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent { + padding-bottom: 4px; + padding-top: 6px; +} + +/* normal status */ +.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv { + background-image:url("images/tabTop.png"); + background-position:0 -248px; + background-position:bottom; + background-repeat:repeat-x; + .box-shadow(0 -1px 1px rgba(0, 0, 0, 0.04)); +} + +/* checked status */ +.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv { + background-image:none; + .box-shadow(0 -1px 2px rgba(0, 0, 0, 0.05)); +} +.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent { + background-position:0 -102px; + background-repeat:repeat-x; +} +/** end top tab **/ + + +/*************** bottom tab ***************/ +.claro .dijitTabContainerBottom-tabs .dijitTab { + top: -1px; /* used for overlap */ + margin-right: 1px; +} +/* calculate the position and size */ +.claro .dijitTabContainerBottom-tabs .dijitTabContent { + padding:3px 6px; + border-top-width: 0; + background-image: url("images/tabBottom.png"); + background-position:0 -249px; + background-repeat: repeat-x; + background-position:bottom; + min-width: 60px; + text-align: center; +} +.claro .dijitTabContainerBottom-tabs .dijitTab { + padding-bottom: 3px; +} +/* normal status */ +.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv { + background-image: url("images/tabBottom.png"); + background-position: top; + background-repeat: repeat-x; + .box-shadow(0 1px 1px rgba(0, 0, 0, 0.04)); + +} + +/* checked status */ +.claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabContent { + padding-bottom: 7px; + padding-top: 4px; + background-position:0 -119px; +} +.claro .dijitTabContainerBottom-tabs .dijitTabChecked { + padding-bottom: 0; +} +.claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv { + background-image:none; + .box-shadow(0 1px 2px rgba(0, 0, 0, 0.05)); +} +/** end bottom tab **/ + +/*************** left tab ***************/ +.claro .dijitTabContainerLeft-tabs .dijitTab { + border-right-width: 0; + left: 1px; /* used for overlap */ + margin-bottom: 1px; +} +/* normal status */ +.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv { + background-image: url("images/tabLeft.png"); + background-position: -347px -340px; + background-repeat: repeat-y; +} +.claro .dijitTabContainerLeft-tabs .dijitTabContent { + padding:3px 8px 4px 4px; + background-image: url("images/tabLeft.png"); + background-repeat: repeat-y; + background-position:0 0; +} +/* checked status */ +.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabContent { + padding-right: 9px; + border-right: none; + background-image: none; +} +.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv { + background-position:0 -179px; + background-repeat:repeat-y; + .box-shadow(-1px 0 2px rgba(0, 0, 0, .05)); +} +/** end left tab **/ + +/*************** right tab ***************/ +.claro .dijitTabContainerRight-tabs .dijitTab { + border-left-width: 0; + left: -1px; /* used for overlap */ + margin-bottom: 1px; +} +/* normal status */ +.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv { + background-image: url("images/tabRight.png"); + background-repeat: repeat-y; + background-position: -1px -347px; +} +.claro .dijitTabContainerRight-tabs .dijitTabContent { + padding:3px 8px 4px 4px; + background-image: url("images/tabRight.png"); + background-position:right top; + background-repeat: repeat-y; +} +/* checked status */ +.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabContent { + padding-left: 5px; + border-left: none; + background-image: none; +} +.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv { + background-position:-348px -179px; + .box-shadow(1px 0 2px rgba(0, 0, 0, 0.07)); +} +/** end right tab **/ + +/** round corner **/ +.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv, +.claro .dijitTabContainerTop-tabs .dijitTabContent { + .border-radius(2px 2px 0 0); +} +.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv, +.claro .dijitTabContainerBottom-tabs .dijitTabContent{ + .border-radius(0 0 2px 2px); +} +.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv, +.claro .dijitTabContainerLeft-tabs .dijitTabContent{ + .border-radius(2px 0 0 2px); +} + +.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv, +.claro .dijitTabContainerRight-tabs .dijitTabContent{ + .border-radius(0 2px 2px 0); +} + +/************ left/right scroll buttons + menu button ************/ +.claro .tabStripButton { + background-color:@button-background-color; + border: 1px solid @border-color; +} +.claro .dijitTabListContainer-top .tabStripButton { + padding: 4px 3px; + margin-top:7px; + background-image: url("images/tabTop.png"); + background-position:0 0; +} +.claro .dijitTabListContainer-bottom .tabStripButton { + padding:5px 3px; + margin-bottom:4px; + background-image: url("images/tabTop.png"); + background-position:0 -248px; + background-position:bottom; +} +.claro .tabStripButtonHover { + background-color:@hovered-background-color; +} +.claro .tabStripButtonActive { + background-color:@pressed-background-color; +} +.claro .dijitTabStripIcon { + height:15px; + width:15px; + margin: 0 auto; + background:url("../form/images/buttonArrows.png") no-repeat -75px 50%; + background-color: transparent; +} +.claro .dijitTabStripSlideRightIcon{ + background-position: -24px 50%; +} +.claro .dijitTabStripMenuIcon { + background-position: -51px 50%; +} + +/*disabled styles for tab strip buttons*/ +.claro .dijitTabListContainer-top .tabStripButtonDisabled, +.claro .dijitTabListContainer-bottom .tabStripButtonDisabled { + background-color:@tab-disabled-background-color; + border:1px solid @border-color; /* to match border of TabContainer itself */ +} +.claro .tabStripButtonDisabled .dijitTabStripSlideLeftIcon { + background-position:-175px 50%; +} +.claro .tabStripButtonDisabled .dijitTabStripSlideRightIcon { + background-position: -124px 50%; +} +.claro .tabStripButtonDisabled .dijitTabStripMenuIcon { + background-position: -151px 50%; +} +/* Nested Tabs */ +.claro .dijitTabContainerNested .dijitTabListWrapper { + height: auto; +} +.claro .dijitTabContainerNested .dijitTabContainerTop-tabs { + border-bottom:solid 1px @border-color; + padding:1px 2px 4px; + margin-top:-2px; +} +.claro .dijitTabContainerTabListNested .dijitTabContent { + background:rgba(255, 255, 255, 0) none repeat scroll 0 0; + border: none; + padding: 4px; + border-color: rgba(118,157,192,0); + .transition-property(background-color, border-color); + .transition-duration(.3s); + .border-radius(2px); +} +.claro .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv { + /* 4 element selector to override box-shadow setting from above rule: + * .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv { ... } + */ + background: none; + border: none; + top: 0;/* to override top: 1px/-1px for normal tabs */ + .box-shadow(none); +} +.claro .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent { + background-color: @nestedtab-hovered-background-color; + border:solid 1px @nestedtab-hovered-border-color; + padding: 3px; + .transition-duration(.2s); +} +.claro .dijitTabContainerTabListNested .dijitTabHover .tabLabel { + text-decoration: none; +} +.claro .dijitTabContainerTabListNested .dijitTabActive .dijitTabContent { + border:solid 1px @nestedtab-selected-border-color; + padding: 3px; + background: @nestedtab-selected-background-color url("images/tabNested.png") repeat-x; + .transition-duration(.1s); +} +.claro .dijitTabContainerTabListNested .dijitTabChecked .dijitTabContent { + padding: 3px; + border:solid 1px @selected-border-color; + background-position: 0 105px; + background-color:@selected-background-color; +} +.claro .dijitTabContainerTabListNested .dijitTabChecked .tabLabel { + text-decoration: none; + background-image:none; +} +.claro .dijitTabPaneWrapperNested { + border: none;/* prevent double border */ +} + + +.dj_ie6 .claro .dijitTabContent, +.dj_ie6 .claro .dijitTabInnerDiv, +.dj_ie6 .dijitTabListContainer-top .tabStripButton, +.dj_ie6 .dijitTabListContainer-bottom .tabStripButton{ + background-image: none; +} diff --git a/lib/dijit/themes/claro/layout/TabContainer_rtl.css b/lib/dijit/themes/claro/layout/TabContainer_rtl.css index 156cea977..89fdff097 100644 --- a/lib/dijit/themes/claro/layout/TabContainer_rtl.css +++ b/lib/dijit/themes/claro/layout/TabContainer_rtl.css @@ -1,67 +1,67 @@ -.claro .dijitTabContainerTop-tabs .dijitTabRtl, -.claro .dijitTabContainerBottom-tabs .dijitTabRtl { - margin-right: 0; - margin-left: 1px; +.claro .dijitTabContainerTop-tabs .dijitTabRtl, .claro .dijitTabContainerBottom-tabs .dijitTabRtl { + margin-right: 0; + margin-left: 1px; } .claro .dijitTabRtl { - -moz-box-orient:horizontal; - text-align: right; + -moz-box-orient: horizontal; + text-align: right; } .dj_ie7 .claro .dijitTabRtl .dijitTabContent { - display: block; - left: 0; + display: block; + left: 0; } -.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl, -.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabCheckedRtl { - top: 1px; +.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl, .dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabCheckedRtl { + top: 1px; } .dj_ie7 .claro .tabStripButtonRtl .dijitButtonContents, -.dj_ie8 .claro .tabStripButtonRtl .dijitButtonContents, +.dj_ie8 .claro .tabStripButtonRtl .dijitButtonContents, .dj_ie6 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, .dj_ie6 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv, .dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, .dj_ie7 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv, .dj_iequirks .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, .dj_iequirks .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv { - float:left; + float: left; } .dj_ie6 .claro .dijitTabRtl .tabLabel, .dj_ie6 .claro .dijitTabContainerRight-tabs .dijitTabRtl, .dj_ie6 .claro .dijitTabContainerLeft-tabs .dijitTabRtl, .dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtl .dijitTabInnerDiv, .dj_ie7 .claro .dijitTabContainerLeft-tabs .dijitTabRtl .dijitTabInnerDiv { - - zoom:1; + /*Make the .tablabel have width in ie6 with haslayout property, fix Close icon position bug*/ + + zoom: 1; } -.dj_ie6 .claro .dijitTabRtl .dijitTabCloseButton, -.dj_ie7 .claro .dijitTabRtl .dijitTabCloseButton, -.dj_iequirks .claro .dijitTabRtl .dijitTabCloseButton { - margin-right:5px; +.dj_ie6 .claro .dijitTabRtl .dijitTabCloseButton, .dj_ie7 .claro .dijitTabRtl .dijitTabCloseButton, .dj_iequirks .claro .dijitTabRtl .dijitTabCloseButton { + margin-right: 5px; } -.dj_ie6 .claro .dijitTabContainerRightRtl .dijitTabContainerRight-tabs, -.dj_ie6 .claro .dijitTabContainerLeftRtl .dijitTabContainerLeft-tabs { - width:1%; +.dj_ie6 .claro .dijitTabContainerRightRtl .dijitTabContainerRight-tabs, .dj_ie6 .claro .dijitTabContainerLeftRtl .dijitTabContainerLeft-tabs { + width: 1%; } -.dj_ie6 .dijitTabContainerTopStrip, -.dj_ie6 .dijitTabContainerBottomStrip { - position:absolute; +.dj_ie6 .dijitTabContainerTopStrip, .dj_ie6 .dijitTabContainerBottomStrip { + position: absolute; } .dj_iequirks .claro .dijitTabContainerTopRtl .dijitTabContainerTopStrip { - padding-top: 10px; + padding-top: 10px; } .dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtlChecked .dijitTabInnerDiv { - background-position:-341px -179px; + background-position: -341px -179px; } -.dj_ie6 .dijitTabContainerTopRtl .dijitTabStripIcon, -.dj_ie6 .dijitTabContainerBottomRtl .dijitTabStripIcon { - position: relative; +.dj_ie6 .dijitTabContainerTopRtl .dijitTabStripIcon, .dj_ie6 .dijitTabContainerBottomRtl .dijitTabStripIcon { + position: relative; } -.dj_ie6-rtl .claro .dijitTabContainerTop-tabs { - - padding-left: 3px; +.dj_ie6-rtl .claro .dijitTabContainerTop-tabs { + /* this strange rule prevents IE6 bug in themeTester.html?dir=rtl upon closing + * "Closable" tab, where the other tabs disappear + */ + + padding-left: 3px; } .dj_iequirks-rtl .claro .dijitTabListWrapper { - - border-left: 1px solid #fff; - border-right: 1px solid #fff; + /* this strange rule prevents IE6 bug in themeTesterQuirk.html?dir=rtl upon closing + * "Closable" tab, where the other tabs disappear + */ + + border-left: 1px solid #ffffff; + border-right: 1px solid #ffffff; } diff --git a/lib/dijit/themes/claro/layout/TabContainer_rtl.less b/lib/dijit/themes/claro/layout/TabContainer_rtl.less new file mode 100644 index 000000000..eaada0d0a --- /dev/null +++ b/lib/dijit/themes/claro/layout/TabContainer_rtl.less @@ -0,0 +1,81 @@ +@import "../variables"; + +.claro .dijitTabContainerTop-tabs .dijitTabRtl, +.claro .dijitTabContainerBottom-tabs .dijitTabRtl { + margin-right: 0; + margin-left: 1px; +} +.claro .dijitTabRtl { + -moz-box-orient:horizontal; + text-align: right; +} +.dj_ie7 .claro .dijitTabRtl .dijitTabContent { + display: block; + left: 0; +} +.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl, +.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabCheckedRtl { + top: 1px; +} + +// Note that .tabStripButtonRtl .dijitButtonContents needed for IE8 quirks but breaks IE6 quirks +.dj_ie7 .claro .tabStripButtonRtl .dijitButtonContents, +.dj_ie8 .claro .tabStripButtonRtl .dijitButtonContents, +.dj_ie6 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, +.dj_ie6 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv, +.dj_ie7 .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, +.dj_ie7 .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv, +.dj_iequirks .claro .dijitTabContainerTop-tabs .dijitTabRtl .dijitTabInnerDiv, +.dj_iequirks .claro .dijitTabContainerBottom-tabs .dijitTabRtl .dijitTabInnerDiv { + float:left; +} +.dj_ie6 .claro .dijitTabRtl .tabLabel, +.dj_ie6 .claro .dijitTabContainerRight-tabs .dijitTabRtl, +.dj_ie6 .claro .dijitTabContainerLeft-tabs .dijitTabRtl, +.dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtl .dijitTabInnerDiv, +.dj_ie7 .claro .dijitTabContainerLeft-tabs .dijitTabRtl .dijitTabInnerDiv { + /*Make the .tablabel have width in ie6 with haslayout property, fix Close icon position bug*/ + zoom:1; +} +.dj_ie6 .claro .dijitTabRtl .dijitTabCloseButton, +.dj_ie7 .claro .dijitTabRtl .dijitTabCloseButton, +.dj_iequirks .claro .dijitTabRtl .dijitTabCloseButton { + margin-right:5px; +} + +.dj_ie6 .claro .dijitTabContainerRightRtl .dijitTabContainerRight-tabs, +.dj_ie6 .claro .dijitTabContainerLeftRtl .dijitTabContainerLeft-tabs { + width:1%; +} + +.dj_ie6 .dijitTabContainerTopStrip, +.dj_ie6 .dijitTabContainerBottomStrip { + position:absolute; +} +.dj_iequirks .claro .dijitTabContainerTopRtl .dijitTabContainerTopStrip { + padding-top: 10px; +} +.dj_ie7 .claro .dijitTabContainerRight-tabs .dijitTabRtlChecked .dijitTabInnerDiv { + background-position:-341px -179px; +} + +.dj_ie6 .dijitTabContainerTopRtl .dijitTabStripIcon, +.dj_ie6 .dijitTabContainerBottomRtl .dijitTabStripIcon { + position: relative; +} + + +.dj_ie6-rtl .claro .dijitTabContainerTop-tabs { + /* this strange rule prevents IE6 bug in themeTester.html?dir=rtl upon closing + * "Closable" tab, where the other tabs disappear + */ + padding-left: 3px; +} + +.dj_iequirks-rtl .claro .dijitTabListWrapper { + /* this strange rule prevents IE6 bug in themeTesterQuirk.html?dir=rtl upon closing + * "Closable" tab, where the other tabs disappear + */ + border-left: 1px solid @pane-background-color; + border-right: 1px solid @pane-background-color; +} diff --git a/lib/dijit/themes/claro/layout/images/tabBottom.png b/lib/dijit/themes/claro/layout/images/tabBottom.png Binary files differindex bf232406f..dbcfc851b 100644 --- a/lib/dijit/themes/claro/layout/images/tabBottom.png +++ b/lib/dijit/themes/claro/layout/images/tabBottom.png diff --git a/lib/dijit/themes/claro/layout/images/tabTop.png b/lib/dijit/themes/claro/layout/images/tabTop.png Binary files differindex db7626ea8..2822487ed 100644 --- a/lib/dijit/themes/claro/layout/images/tabTop.png +++ b/lib/dijit/themes/claro/layout/images/tabTop.png |