diff options
author | Richard Beales <[email protected]> | 2013-03-18 07:32:01 +0000 |
---|---|---|
committer | Richard Beales <[email protected]> | 2013-03-18 07:32:01 +0000 |
commit | 7c97d17aaf373339a8bcd917ad59ca6018148f0d (patch) | |
tree | 5a3c04f0f9529be392c1263d3feb75806eb43797 /lib/dijit/themes/claro/layout | |
parent | 70db7424e7068701e60cc5bcdfe8f858be508179 (diff) | |
parent | c670a80ddd9b03bd4ea6d940a9ed682fd26248d7 (diff) |
Merge remote-tracking branch 'upstream/master'
Diffstat (limited to 'lib/dijit/themes/claro/layout')
31 files changed, 414 insertions, 478 deletions
diff --git a/lib/dijit/themes/claro/layout/AccordionContainer.css b/lib/dijit/themes/claro/layout/AccordionContainer.css index 34831764c..b59aeca8b 100644 --- a/lib/dijit/themes/claro/layout/AccordionContainer.css +++ b/lib/dijit/themes/claro/layout/AccordionContainer.css @@ -50,16 +50,17 @@ background-color: transparent; /* pick up color from dijitAccordionInnerContainer */ - background-image: url("../layout/images/accordion.png"); - background-position: 0 0; + background-image: url("../images/standardGradient.png"); background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + _background-image: none; padding: 5px 7px 2px 7px; min-height: 17px; color: #494949; } -.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 @@ -83,7 +84,13 @@ transition-duration: 0.1s; } .claro .dijitAccordionInnerContainerActive .dijitAccordionTitle { - background-position: 0 -136px; + background-image: url("../images/activeGradient.png"); + background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%); + _background-image: none; color: #000000; } /* Open (a.k.a. selected) pane */ @@ -93,7 +100,13 @@ } .claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle { color: #000000; - background-position: 0 0; + background-image: url("../images/standardGradient.png"); + background-repeat: repeat-x; + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%); + _background-image: none; /* avoid effect when clicking the title of the open pane */ } @@ -114,7 +127,7 @@ } .claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionChildWrapper, .claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionChildWrapper { background-color: #ffffff; - border: 1px solid #759dc0 !important; + border: 1px solid #759dc0; -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 index b3aa62248..fd4308c30 100644 --- a/lib/dijit/themes/claro/layout/AccordionContainer.less +++ b/lib/dijit/themes/claro/layout/AccordionContainer.less @@ -43,16 +43,12 @@ } .claro .dijitAccordionTitle { background-color: transparent; /* pick up color from dijitAccordionInnerContainer */ - background-image: url("../@{image-layout-accordion}"); - background-position:0 0; - background-repeat:repeat-x; + .standard-gradient("../"); padding: 5px 7px 2px 7px; min-height:17px; color:@unselected-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 @@ -75,7 +71,7 @@ .transition-duration(.1s); } .claro .dijitAccordionInnerContainerActive .dijitAccordionTitle { - background-position:0 -136px; + .active-gradient("../"); color:@selected-text-color; } @@ -87,7 +83,7 @@ } .claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle { color:@selected-text-color; - background-position: 0 0; /* avoid effect when clicking the title of the open pane */ + .standard-gradient("../"); /* avoid effect when clicking the title of the open pane */ } /* Hovering open or closed pane */ @@ -97,6 +93,8 @@ color:@hovered-text-color; } +// TODO: why do we have any hover effect on the selected pane? +// Since you can't click it, there shouldn't be a hover effect. .claro .dijitAccordionInnerContainerHover, .claro .dijitAccordionInnerContainerSelectedActive { /* note: clicking the currently selected Accordion pane should have no effect, so treating same as hover. */ @@ -108,6 +106,6 @@ .claro .dijitAccordionInnerContainerSelectedHover .dijitAccordionChildWrapper, .claro .dijitAccordionInnerContainerSelectedActive .dijitAccordionChildWrapper { background-color:@pane-background-color; - border:1px solid @hovered-border-color !important; + border:1px solid @hovered-border-color; .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 8c0a5fa96..f00c5d1d7 100644 --- a/lib/dijit/themes/claro/layout/BorderContainer.css +++ b/lib/dijit/themes/claro/layout/BorderContainer.css @@ -84,26 +84,28 @@ Splitters and gutters: margin: 0; } /* hovered splitter */ -.claro .dijitSplitterHHover { +.claro .dijitSplitterHHover, .claro .dijitSplitterVHover { font-size: 1px; - background: url("../layout/images/splitterHorizontalHover.png") no-repeat center top; + background-color: #cfe5fa; } -.claro .dijitSplitterHHover .dijitSplitterThumb { - background: #759dc0 none; +.claro .dijitSplitterHHover { + background-image: -moz-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%); + background-image: -webkit-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%); + background-image: -o-linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%); + background-image: linear-gradient(left, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%); } .claro .dijitSplitterVHover { - font-size: 1px; - background: url("../layout/images/splitterVerticalHover.png") no-repeat center left; + background-image: -moz-linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%); + background-image: -webkit-linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%); + background-image: -o-linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%); + background-image: linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0) 50%, #ffffff 100%); } -.claro .dijitSplitterVHover .dijitSplitterThumb { +.claro .dijitSplitterHHover .dijitSplitterThumb, .claro .dijitSplitterVHover .dijitSplitterThumb { background: #759dc0 none; } -.dj_ie6 .dijitSplitterHHover, .dj_ie6 .claro .dijitSplitterVHover { - background-color: #cfe5fa; - background-image: none; -} /* active splitter */ .claro .dijitSplitterHActive, .claro .dijitSplitterVActive { font-size: 1px; background-color: #abd6ff; + background-image: none; } diff --git a/lib/dijit/themes/claro/layout/BorderContainer.less b/lib/dijit/themes/claro/layout/BorderContainer.less index b7c672e63..f3edcd3c5 100644 --- a/lib/dijit/themes/claro/layout/BorderContainer.less +++ b/lib/dijit/themes/claro/layout/BorderContainer.less @@ -95,34 +95,30 @@ Splitters and gutters: } /* hovered splitter */ -.claro .dijitSplitterHHover { +.claro .dijitSplitterHHover, +.claro .dijitSplitterVHover { font-size: 1px; - background: url("../@{image-layout-splitter-horizontal-hover}") no-repeat center top; + background-color: @splitter-hovered-background-color; } - -.claro .dijitSplitterHHover .dijitSplitterThumb { - background:@hovered-border-color none; +.claro .dijitSplitterHHover { + .alpha-white-gradient (left, 1,0px, 0,50%, 1,100%); } .claro .dijitSplitterVHover { - font-size: 1px; - background: url("../@{image-layout-splitter-vertical-hover}") no-repeat center left; + .alpha-white-gradient (top, 1,0px, 0,50%, 1,100%); } +.claro .dijitSplitterHHover .dijitSplitterThumb, .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; + background-image: none; // color all the way across, not gradient like in hover mode } diff --git a/lib/dijit/themes/claro/layout/TabContainer.css b/lib/dijit/themes/claro/layout/TabContainer.css index 641b921ec..6db8550ec 100644 --- a/lib/dijit/themes/claro/layout/TabContainer.css +++ b/lib/dijit/themes/claro/layout/TabContainer.css @@ -17,18 +17,18 @@ * .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 .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 .dijitTabInnerDiv/.dijitTabContent + * .dijitTabContainerTop-tabs .dijitTabChecked .dijitTab * - 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 + * .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 @@ -77,7 +77,8 @@ display: none; } -.claro .dijitTabInnerDiv { +.claro .dijitTab { + border: 1px solid #b5bcc7; background-color: #efefef; -webkit-transition-property: background-color, border; -moz-transition-property: background-color, border; @@ -87,132 +88,104 @@ transition-duration: 0.35s; color: #494949; } -.claro .dijitTabHover .dijitTabInnerDiv { +.claro .dijitTabHover { + border-color: #759dc0; background-color: #abd6ff; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; transition-duration: 0.25s; color: #000000; } -.claro .dijitTabActive .dijitTabInnerDiv { +.claro .dijitTabActive { + border-color: #759dc0; background-color: #7dbdfa; color: #000000; -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; transition-duration: 0.1s; } -.claro .dijitTabChecked .dijitTabInnerDiv { +.claro .dijitTabChecked { + border-color: #b5bcc7; background-color: #cfe5fa; color: #000000; } -.claro .dijitTabContent { - border: 1px solid #b5bcc7; -} -.claro .dijitTabHover .dijitTabContent { - border-color: #759dc0; -} -.claro .dijitTabActive .dijitTabContent { - border-color: #759dc0; -} -.claro .dijitTabChecked .dijitTabContent { - color: #000000; - border-color: #b5bcc7; +.claro .dijitTabDisabled { + background-color: #d3d3d3; } -.claro .tabStripButton .dijitTabInnerDiv { +.claro .tabStripButton { background-color: transparent; -} -.claro .tabStripButton .dijitTabContent { border: none; } /*** end common ***/ /*************** top tab ***************/ .claro .dijitTabContainerTop-tabs .dijitTab { + /* unselected (and not hovered/pressed) tab */ + 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("../layout/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("../layout/images/tabTop.png"); - background-position: 0 -248px; - background-position: bottom; + background-image: url("images/tabTopUnselected.png"); background-repeat: repeat-x; + background-image: -moz-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); -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; +.claro .dijitTabContainerTop-tabs .dijitTabChecked { + /* selected tab */ + + padding-bottom: 4px; + padding-top: 9px; + background-image: url("images/tabTopSelected.png"); + background-image: -moz-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px); + background-image: -webkit-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px); + background-image: -o-linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px); + background-image: linear-gradient(top, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px); -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: 0 -102px; - background-repeat: repeat-x; -} /** end top tab **/ /*************** bottom tab ***************/ .claro .dijitTabContainerBottom-tabs .dijitTab { + /* unselected (and not hovered/pressed) tab */ + 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("../layout/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("../layout/images/tabBottom.png"); - background-position: top; + background-image: url("images/tabBottomUnselected.png"); background-repeat: repeat-x; + background-position: bottom; + background-image: -moz-linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); -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: 0 -119px; -} +/* selected tab */ .claro .dijitTabContainerBottom-tabs .dijitTabChecked { - padding-bottom: 0; -} -.claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv { - background-image: none; + padding-bottom: 9px; + padding-top: 4px; + background-image: url("images/tabBottomSelected.png"); + background-image: -moz-linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px); + background-image: -webkit-linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px); + background-image: -o-linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px); + background-image: linear-gradient(bottom, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0) 2px, #ffffff 7px); -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); @@ -220,33 +193,29 @@ /** end bottom tab **/ /*************** left tab ***************/ .claro .dijitTabContainerLeft-tabs .dijitTab { - border-right-width: 0; + /* unselected (and not hovered/pressed) tab */ + left: 1px; /* used for overlap */ margin-bottom: 1px; -} -/* normal status */ -.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv { - background-image: url("../layout/images/tabLeft.png"); - background-position: -347px -340px; - background-repeat: repeat-y; -} -.claro .dijitTabContainerLeft-tabs .dijitTabContent { padding: 3px 8px 4px 4px; - background-image: url("../layout/images/tabLeft.png"); + background-image: url("images/tabLeftUnselected.png"); background-repeat: repeat-y; - background-position: 0 0; + background-image: -moz-linear-gradient(left, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(left, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(left, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(left, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); } -/* checked status */ -.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabContent { +/* selected tab */ +.claro .dijitTabContainerLeft-tabs .dijitTabChecked { + border-right-width: 0; padding-right: 9px; - border-right: none; - background-image: none; -} -.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv { - background-position: 0 -179px; - background-repeat: repeat-y; + background-image: url("images/tabLeftSelected.png"); + background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px); + background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px); + background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px); + background-image: linear-gradient(left, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px); -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); @@ -254,51 +223,50 @@ /** end left tab **/ /*************** right tab ***************/ .claro .dijitTabContainerRight-tabs .dijitTab { - border-left-width: 0; + /* unselected (and not hovered/pressed) tab */ + left: -1px; /* used for overlap */ margin-bottom: 1px; -} -/* normal status */ -.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv { - background-image: url("../layout/images/tabRight.png"); - background-repeat: repeat-y; - background-position: -1px -347px; -} -.claro .dijitTabContainerRight-tabs .dijitTabContent { padding: 3px 8px 4px 4px; - background-image: url("../layout/images/tabRight.png"); - background-position: right top; + background-image: url("images/tabRightUnselected.png"); background-repeat: repeat-y; -} -/* checked status */ -.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabContent { + background-position: right; + background-image: -moz-linear-gradient(right, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(right, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(right, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(right, #ffffff 0px, #ffffff 1px, rgba(255, 255, 255, 0.1) 2px, rgba(255, 255, 255, 0.6) 7px, rgba(255, 255, 255, 0) 100%); +} +.claro .dijitTabContainerRight-tabs .dijitTabChecked { + /* selected tab */ + padding-left: 5px; - border-left: none; - background-image: none; -} -.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv { - background-position: -348px -179px; + border-left-width: 0; + background-image: url("images/tabRightSelected.png"); + background-image: -moz-linear-gradient(right, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px); + background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px); + background-image: -o-linear-gradient(right, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px); + background-image: linear-gradient(right, rgba(255, 255, 255, 0.5) 0px, #ffffff 30px); -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 { +.claro .dijitTabContainerTop-tabs .dijitTab { -moz-border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0; } -.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv, .claro .dijitTabContainerBottom-tabs .dijitTabContent { +.claro .dijitTabContainerBottom-tabs .dijitTab { -moz-border-radius: 0 0 2px 2px; border-radius: 0 0 2px 2px; } -.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv, .claro .dijitTabContainerLeft-tabs .dijitTabContent { +.claro .dijitTabContainerLeft-tabs .dijitTab { -moz-border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px; } -.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv, .claro .dijitTabContainerRight-tabs .dijitTabContent { +.claro .dijitTabContainerRight-tabs .dijitTab { -moz-border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0; } @@ -310,15 +278,18 @@ .claro .dijitTabListContainer-top .tabStripButton { padding: 4px 3px; margin-top: 7px; - background-image: url("../layout/images/tabTop.png"); - background-position: 0 0; + background-image: -moz-linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(top, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%); } .claro .dijitTabListContainer-bottom .tabStripButton { - padding: 5px 3px; - margin-bottom: 4px; - background-image: url("../layout/images/tabTop.png"); - background-position: 0 -248px; - background-position: bottom; + padding: 4px 3px; + margin-bottom: 7px; + background-image: -moz-linear-gradient(bottom, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%); + background-image: -webkit-linear-gradient(bottom, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%); + background-image: -o-linear-gradient(bottom, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%); + background-image: linear-gradient(bottom, #ffffff 0px, rgba(255, 255, 255, 0.1) 1px, rgba(255, 255, 255, 0.6) 6px, rgba(255, 255, 255, 0) 100%); } .claro .tabStripButtonHover { background-color: #abd6ff; @@ -361,10 +332,9 @@ } .claro .dijitTabContainerNested .dijitTabContainerTop-tabs { border-bottom: solid 1px #b5bcc7; - padding: 1px 2px 4px; - margin-top: -2px; + padding: 2px 2px 4px; } -.claro .dijitTabContainerTabListNested .dijitTabContent { +.claro .dijitTabContainerTabListNested .dijitTab { background: rgba(255, 255, 255, 0) none repeat scroll 0 0; border: none; padding: 4px; @@ -378,11 +348,7 @@ -moz-border-radius: 2px; border-radius: 2px; } -.claro .dijitTabContainerTabListNested .dijitTab .dijitTabInnerDiv { - /* 4 element selector to override box-shadow setting from above rule: - * .claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabInnerDiv { ... } - */ - +.claro .dijitTabContainerTabListNested .dijitTab { background: none; border: none; top: 0; @@ -392,7 +358,7 @@ -moz-box-shadow: none; box-shadow: none; } -.claro .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent { +.claro .dijitTabContainerTabListNested .dijitTabHover { background-color: #e5f2fe; border: solid 1px #cfe5fa; padding: 3px; @@ -403,18 +369,21 @@ .claro .dijitTabContainerTabListNested .dijitTabHover .tabLabel { text-decoration: none; } -.claro .dijitTabContainerTabListNested .dijitTabActive .dijitTabContent { +.claro .dijitTabContainerTabListNested .dijitTabActive { border: solid 1px #759dc0; padding: 3px; - background: #abd6ff url("../layout/images/tabNested.png") repeat-x; + background: #abd6ff url("images/tabNested.png") repeat-x; + background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.61) 0%, rgba(255, 255, 255, 0) 17%, rgba(255, 255, 255, 0) 83%, rgba(255, 255, 255, 0.61) 100%); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.61) 0%, rgba(255, 255, 255, 0) 17%, rgba(255, 255, 255, 0) 83%, rgba(255, 255, 255, 0.61) 100%); + background-image: -o-linear-gradient(rgba(255, 255, 255, 0.61) 0%, rgba(255, 255, 255, 0) 17%, rgba(255, 255, 255, 0) 83%, rgba(255, 255, 255, 0.61) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.61) 0%, rgba(255, 255, 255, 0) 17%, rgba(255, 255, 255, 0) 83%, rgba(255, 255, 255, 0.61) 100%); -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; transition-duration: 0.1s; } -.claro .dijitTabContainerTabListNested .dijitTabChecked .dijitTabContent { +.claro .dijitTabContainerTabListNested .dijitTabChecked { padding: 3px; border: solid 1px #759dc0; - background-position: 0 105px; background-color: #cfe5fa; } .claro .dijitTabContainerTabListNested .dijitTabChecked .tabLabel { @@ -426,9 +395,6 @@ /* prevent double border */ } -.dj_ie6 .claro .dijitTabContent, -.dj_ie6 .claro .dijitTabInnerDiv, -.dj_ie6 .dijitTabListContainer-top .tabStripButton, -.dj_ie6 .dijitTabListContainer-bottom .tabStripButton { - background-image: none; +.claro .dijitTab, .claro .tabStripButton { + _background-image: none !important; } diff --git a/lib/dijit/themes/claro/layout/TabContainer.less b/lib/dijit/themes/claro/layout/TabContainer.less index 16947ff9c..74495b209 100644 --- a/lib/dijit/themes/claro/layout/TabContainer.less +++ b/lib/dijit/themes/claro/layout/TabContainer.less @@ -17,18 +17,18 @@ * .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 .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 .dijitTabInnerDiv/.dijitTabContent + * .dijitTabContainerTop-tabs .dijitTabChecked .dijitTab * - 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 + * .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 @@ -49,6 +49,13 @@ @import "../variables"; +.unselected-tab-gradient (@direction) { + // white line, dark line, then fade from light to dark + .alpha-white-gradient (@direction, 1,0px, 1,1px, 0.1,2px, 0.6,7px, 0,100%); +} +.topBottom-selected-tab-gradient (@direction) { + .alpha-white-gradient (@direction, 1,0px, 1,1px, 0,2px, 1,7px); // white line, blue line, remainder white +} /*** some common features ***/ .claro .dijitTabPaneWrapper { background:@pane-background-color; @@ -78,45 +85,37 @@ /* set the spacer invisible. note that height:0 doesn't work on IE/quirks, it's still 10px. */ display: none; } -.claro .dijitTabInnerDiv { +.claro .dijitTab { + border: 1px solid @border-color; background-color:@unselected-background-color; .transition-property(background-color, border); .transition-duration(.35s); color:@unselected-text-color; } -.claro .dijitTabHover .dijitTabInnerDiv { +.claro .dijitTabHover { + border-color: @hovered-border-color; background-color:@hovered-background-color; .transition-duration(.25s); color:@hovered-text-color; } -.claro .dijitTabActive .dijitTabInnerDiv { +.claro .dijitTabActive { + border-color: @pressed-border-color; 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? +.claro .dijitTabChecked { + // selected tab border-color: @border-color; // don't use @selected-border-color because need to match border of TabContainer + background-color: @selected-background-color; + color: @selected-text-color; +} +.claro .dijitTabDisabled { + background-color: @tab-disabled-background-color; } -.claro .tabStripButton .dijitTabInnerDiv { +.claro .tabStripButton { background-color: transparent; -} -.claro .tabStripButton .dijitTabContent { border: none; } /*** end common ***/ @@ -124,169 +123,133 @@ /*************** top tab ***************/ .claro .dijitTabContainerTop-tabs .dijitTab { + /* unselected (and not hovered/pressed) tab */ 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("../@{image-layout-tab-top}"); - background-position:0 0; - background-repeat:repeat-x; min-width: 60px; text-align: center; + + // gradient (CSS gradient, with backup image for IE6-9) + background-image: url("images/tabTopUnselected.png"); + background-repeat: repeat-x; + .unselected-tab-gradient(top); + + .box-shadow(0 -1px 1px rgba(0, 0, 0, 0.04)); } -.claro .dijitTabContainerTop-tabs .dijitTabChecked .dijitTabContent { + +.claro .dijitTabContainerTop-tabs .dijitTabChecked { + /* selected tab */ padding-bottom: 4px; - padding-top: 6px; -} + padding-top: 9px; -/* normal status */ -.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv { - background-image:url("../@{image-layout-tab-top}"); - background-position:0 -248px; - background-position:bottom; - background-repeat:repeat-x; - .box-shadow(0 -1px 1px rgba(0, 0, 0, 0.04)); -} + // gradient (CSS gradient, with backup image for IE6-9) + background-image: url("images/tabTopSelected.png"); + .topBottom-selected-tab-gradient (top); -/* 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 { + /* unselected (and not hovered/pressed) tab */ 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("../@{image-layout-tab-bottom}"); - 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("../@{image-layout-tab-bottom}"); - background-position: top; + + // gradient (CSS gradient, with backup image for IE6-9) + background-image: url("images/tabBottomUnselected.png"); background-repeat: repeat-x; + background-position: bottom; + .unselected-tab-gradient(bottom); + .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; -} +/* selected tab */ .claro .dijitTabContainerBottom-tabs .dijitTabChecked { - padding-bottom: 0; -} -.claro .dijitTabContainerBottom-tabs .dijitTabChecked .dijitTabInnerDiv { - background-image:none; + padding-bottom: 9px; + padding-top: 4px; + + // gradient (CSS gradient, with backup image for IE6-9) + background-image: url("images/tabBottomSelected.png"); + .topBottom-selected-tab-gradient (bottom); + .box-shadow(0 1px 2px rgba(0, 0, 0, 0.05)); } /** end bottom tab **/ /*************** left tab ***************/ .claro .dijitTabContainerLeft-tabs .dijitTab { - border-right-width: 0; + /* unselected (and not hovered/pressed) tab */ left: 1px; /* used for overlap */ margin-bottom: 1px; -} -/* normal status */ -.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv { - background-image: url("../@{image-layout-tab-left}"); - background-position: -347px -340px; - background-repeat: repeat-y; -} -.claro .dijitTabContainerLeft-tabs .dijitTabContent { padding:3px 8px 4px 4px; - background-image: url("../@{image-layout-tab-left}"); + + // gradient (CSS gradient, with backup image for IE6-9) + background-image: url("images/tabLeftUnselected.png"); background-repeat: repeat-y; - background-position:0 0; + .unselected-tab-gradient(left); } -/* checked status */ -.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabContent { + +/* selected tab */ +.claro .dijitTabContainerLeft-tabs .dijitTabChecked { + border-right-width: 0; padding-right: 9px; - border-right: none; - background-image: none; -} -.claro .dijitTabContainerLeft-tabs .dijitTabChecked .dijitTabInnerDiv { - background-position:0 -179px; - background-repeat:repeat-y; + + // gradient (CSS gradient, with backup image for IE6-9) + background-image: url("images/tabLeftSelected.png"); + .alpha-white-gradient (left, 0.5,0px, 1,30px); // 1/2 inch blue gradient, remainder white + .box-shadow(-1px 0 2px rgba(0, 0, 0, .05)); } /** end left tab **/ /*************** right tab ***************/ .claro .dijitTabContainerRight-tabs .dijitTab { - border-left-width: 0; + /* unselected (and not hovered/pressed) tab */ left: -1px; /* used for overlap */ margin-bottom: 1px; -} -/* normal status */ -.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv { - background-image: url("../@{image-layout-tab-right}"); - background-repeat: repeat-y; - background-position: -1px -347px; -} -.claro .dijitTabContainerRight-tabs .dijitTabContent { padding:3px 8px 4px 4px; - background-image: url("../@{image-layout-tab-right}"); - background-position:right top; + + // gradient (CSS gradient, with backup image for IE6-9) + background-image: url("images/tabRightUnselected.png"); background-repeat: repeat-y; + background-position: right; + .unselected-tab-gradient(right); } -/* checked status */ -.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabContent { +.claro .dijitTabContainerRight-tabs .dijitTabChecked { + /* selected tab */ padding-left: 5px; - border-left: none; - background-image: none; -} -.claro .dijitTabContainerRight-tabs .dijitTabChecked .dijitTabInnerDiv { - background-position:-348px -179px; + border-left-width: 0; + + // gradient (CSS gradient, with backup image for IE6-9) + background-image: url("images/tabRightSelected.png"); + .alpha-white-gradient (right, 0.5,0px, 1,30px); // 1/2 inch blue gradient, remainder white + .box-shadow(1px 0 2px rgba(0, 0, 0, 0.07)); } /** end right tab **/ /** round corner **/ -.claro .dijitTabContainerTop-tabs .dijitTabInnerDiv, -.claro .dijitTabContainerTop-tabs .dijitTabContent { +.claro .dijitTabContainerTop-tabs .dijitTab { .border-radius(2px 2px 0 0); } -.claro .dijitTabContainerBottom-tabs .dijitTabInnerDiv, -.claro .dijitTabContainerBottom-tabs .dijitTabContent{ +.claro .dijitTabContainerBottom-tabs .dijitTab { .border-radius(0 0 2px 2px); } -.claro .dijitTabContainerLeft-tabs .dijitTabInnerDiv, -.claro .dijitTabContainerLeft-tabs .dijitTabContent{ +.claro .dijitTabContainerLeft-tabs .dijitTab { .border-radius(2px 0 0 2px); } -.claro .dijitTabContainerRight-tabs .dijitTabInnerDiv, -.claro .dijitTabContainerRight-tabs .dijitTabContent{ +.claro .dijitTabContainerRight-tabs .dijitTab { .border-radius(0 2px 2px 0); } @@ -298,15 +261,12 @@ .claro .dijitTabListContainer-top .tabStripButton { padding: 4px 3px; margin-top:7px; - background-image: url("../@{image-layout-tab-top}"); - background-position:0 0; + .alpha-white-gradient (top, 1,0px, 0.1,1px, 0.6,6px, 0,100%); // to match unselected tab, but had to tweak numbers } .claro .dijitTabListContainer-bottom .tabStripButton { - padding:5px 3px; - margin-bottom:4px; - background-image: url("../@{image-layout-tab-top}"); - background-position:0 -248px; - background-position:bottom; + padding:4px 3px; + margin-bottom:7px; + .alpha-white-gradient (bottom, 1,0px, 0.1,1px, 0.6,6px, 0,100%); // to match unselected tab, but had to tweak numbers } .claro .tabStripButtonHover { background-color:@hovered-background-color; @@ -349,10 +309,9 @@ } .claro .dijitTabContainerNested .dijitTabContainerTop-tabs { border-bottom:solid 1px @border-color; - padding:1px 2px 4px; - margin-top:-2px; + padding:2px 2px 4px; } -.claro .dijitTabContainerTabListNested .dijitTabContent { +.claro .dijitTabContainerTabListNested .dijitTab { background:rgba(255, 255, 255, 0) none repeat scroll 0 0; border: none; padding: 4px; @@ -361,34 +320,35 @@ .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 { ... } - */ +.claro .dijitTabContainerTabListNested .dijitTab { background: none; border: none; top: 0;/* to override top: 1px/-1px for normal tabs */ .box-shadow(none); } -.claro .dijitTabContainerTabListNested .dijitTabHover .dijitTabContent { +.claro .dijitTabContainerTabListNested .dijitTabHover { background-color: @nestedtab-hovered-background-color; border:solid 1px @nestedtab-hovered-border-color; - padding: 3px; + padding: 3px; // 4px above padding - 1px compensation for border .transition-duration(.2s); } .claro .dijitTabContainerTabListNested .dijitTabHover .tabLabel { text-decoration: none; } -.claro .dijitTabContainerTabListNested .dijitTabActive .dijitTabContent { +.claro .dijitTabContainerTabListNested .dijitTabActive { border:solid 1px @nestedtab-selected-border-color; padding: 3px; - background: @nestedtab-selected-background-color url("../@{image-layout-tab-nested}") repeat-x; + + // CSS gradient with fallback to image for IE + // this is in a weird place, only for active state; mailed Jason about it + background: @nestedtab-selected-background-color url("images/tabNested.png") repeat-x; + .alpha-white-gradient (0.61,0%, 0,17%, 0,83%, 0.61,100%); + .transition-duration(.1s); } -.claro .dijitTabContainerTabListNested .dijitTabChecked .dijitTabContent { +.claro .dijitTabContainerTabListNested .dijitTabChecked { padding: 3px; border:solid 1px @selected-border-color; - background-position: 0 105px; background-color:@selected-background-color; } .claro .dijitTabContainerTabListNested .dijitTabChecked .tabLabel { @@ -399,10 +359,8 @@ 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; +.claro .dijitTab, +.claro .tabStripButton { + // IE6 can't handle background-image and background-color on same node + _background-image: none !important; } diff --git a/lib/dijit/themes/claro/layout/TabContainer_rtl.css b/lib/dijit/themes/claro/layout/TabContainer_rtl.css index 89fdff097..3b4d87ad3 100644 --- a/lib/dijit/themes/claro/layout/TabContainer_rtl.css +++ b/lib/dijit/themes/claro/layout/TabContainer_rtl.css @@ -2,66 +2,3 @@ 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; -} -.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 #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 index eaada0d0a..c6cec49fd 100644 --- a/lib/dijit/themes/claro/layout/TabContainer_rtl.less +++ b/lib/dijit/themes/claro/layout/TabContainer_rtl.less @@ -5,77 +5,3 @@ 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/accordion.png b/lib/dijit/themes/claro/layout/images/accordion.png Binary files differdeleted file mode 100644 index 48181035a..000000000 --- a/lib/dijit/themes/claro/layout/images/accordion.png +++ /dev/null diff --git a/lib/dijit/themes/claro/layout/images/splitterHorizontalHover.png b/lib/dijit/themes/claro/layout/images/splitterHorizontalHover.png Binary files differdeleted file mode 100644 index 0f5b691f6..000000000 --- a/lib/dijit/themes/claro/layout/images/splitterHorizontalHover.png +++ /dev/null diff --git a/lib/dijit/themes/claro/layout/images/splitterVerticalHover.png b/lib/dijit/themes/claro/layout/images/splitterVerticalHover.png Binary files differdeleted file mode 100644 index 2c3c6960e..000000000 --- a/lib/dijit/themes/claro/layout/images/splitterVerticalHover.png +++ /dev/null diff --git a/lib/dijit/themes/claro/layout/images/tabBottom.png b/lib/dijit/themes/claro/layout/images/tabBottom.png Binary files differdeleted file mode 100644 index dbcfc851b..000000000 --- a/lib/dijit/themes/claro/layout/images/tabBottom.png +++ /dev/null diff --git a/lib/dijit/themes/claro/layout/images/tabBottomSelected.png b/lib/dijit/themes/claro/layout/images/tabBottomSelected.png Binary files differnew file mode 100644 index 000000000..f92b05f45 --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabBottomSelected.png diff --git a/lib/dijit/themes/claro/layout/images/tabBottomSelected.svg b/lib/dijit/themes/claro/layout/images/tabBottomSelected.svg new file mode 100644 index 000000000..4e6ff6d43 --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabBottomSelected.svg @@ -0,0 +1,18 @@ +<?xml version="1.0" ?> +<!-- + Source file for tabBottomSelected.png, which is used by IE7-9 for selected tabs. + Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm + + Output should match CSS gradient from .topBottom-selected-tab-gradient() from TabContainer.less. +--> +<svg xmlns="http://www.w3.org/2000/svg" width="1px" height="250px" viewBox="0 0 1 250" preserveAspectRatio="none"> + <defs> + <linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/> + <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/> + </linearGradient> + </defs> + <rect x="0" y="0" width="1" height="242" fill="white"/> + <rect x="0" y="242" width="1" height="6" fill="url(#gradient)"/> + <rect x="0" y="248" width="1" height="2" fill="white"/> +</svg>
\ No newline at end of file diff --git a/lib/dijit/themes/claro/layout/images/tabBottomUnselected.png b/lib/dijit/themes/claro/layout/images/tabBottomUnselected.png Binary files differnew file mode 100644 index 000000000..7815d9cfb --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabBottomUnselected.png diff --git a/lib/dijit/themes/claro/layout/images/tabBottomUnselected.svg b/lib/dijit/themes/claro/layout/images/tabBottomUnselected.svg new file mode 100644 index 000000000..4193238e8 --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabBottomUnselected.svg @@ -0,0 +1,19 @@ +<?xml version="1.0" ?> +<!-- + Source file for tabBottomUnselected.png, which is used by IE7-9 for the selected tabs. + Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm + + Output should match CSS gradient from TabContainer.less. +--> +<svg xmlns="http://www.w3.org/2000/svg" width="1px" height="16px" viewBox="0 0 1 16" preserveAspectRatio="none"> + <defs> + <linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0%" y1="100%" x2="0%" y2="0%"> + <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/> + <stop offset="6%" stop-color="#ffffff" stop-opacity="1"/> + <stop offset="13%" stop-color="#ffffff" stop-opacity="0.2"/> + <stop offset="43%" stop-color="#ffffff" stop-opacity="0.6"/> + <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/> + </linearGradient> + </defs> + <rect x="0" y="0" width="1" height="16" fill="url(#gradient)"/> +</svg>
\ No newline at end of file diff --git a/lib/dijit/themes/claro/layout/images/tabLeft.png b/lib/dijit/themes/claro/layout/images/tabLeft.png Binary files differdeleted file mode 100644 index 8e9fcba27..000000000 --- a/lib/dijit/themes/claro/layout/images/tabLeft.png +++ /dev/null diff --git a/lib/dijit/themes/claro/layout/images/tabLeftSelected.png b/lib/dijit/themes/claro/layout/images/tabLeftSelected.png Binary files differnew file mode 100644 index 000000000..9700afb37 --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabLeftSelected.png diff --git a/lib/dijit/themes/claro/layout/images/tabLeftSelected.svg b/lib/dijit/themes/claro/layout/images/tabLeftSelected.svg new file mode 100644 index 000000000..12e7d8a64 --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabLeftSelected.svg @@ -0,0 +1,17 @@ +<?xml version="1.0" ?> +<!-- + Source file for tabLeftSelected.png, which is used by IE7-9 for selected tabs. + Compile to png with batik, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm + + Output should match CSS gradient from TabContainer.less. +--> +<svg xmlns="http://www.w3.org/2000/svg" width="1000px" height="1px" viewBox="0 0 1000 1" preserveAspectRatio="none"> + <defs> + <linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="100%" y2="0%"> + <stop offset="0%" stop-color="#ffffff" stop-opacity="0.5"/> + <stop offset="100%" stop-color="#ffffff" stop-opacity="1"/> + </linearGradient> + </defs> + <rect x="0" y="0" width="30" height="1" fill="url(#gradient)"/> + <rect x="30" y="0" width="970" height="1" fill="white"/> +</svg>
\ No newline at end of file diff --git a/lib/dijit/themes/claro/layout/images/tabLeftUnselected.png b/lib/dijit/themes/claro/layout/images/tabLeftUnselected.png Binary files differnew file mode 100644 index 000000000..412390e08 --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabLeftUnselected.png diff --git a/lib/dijit/themes/claro/layout/images/tabLeftUnselected.svg b/lib/dijit/themes/claro/layout/images/tabLeftUnselected.svg new file mode 100644 index 000000000..e31c211b7 --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabLeftUnselected.svg @@ -0,0 +1,16 @@ +<?xml version="1.0" ?> +<!-- + Source file for tabLeftUnselected.png, which is used by IE7-9 for the selected tabs. + Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm + + Output should match CSS gradient from TabContainer.less. +--> +<svg xmlns="http://www.w3.org/2000/svg" width="150px" height="1px" viewBox="0 0 100 1" preserveAspectRatio="none"> + <defs> + <linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="100%" y2="0%"> + <stop offset="0%" stop-color="#ffffff" stop-opacity="0.5"/> + <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/> + </linearGradient> + </defs> + <rect x="0" y="0" width="150" height="1" fill="url(#gradient)"/> +</svg>
\ No newline at end of file diff --git a/lib/dijit/themes/claro/layout/images/tabRight.png b/lib/dijit/themes/claro/layout/images/tabRight.png Binary files differdeleted file mode 100644 index 0aaae53a1..000000000 --- a/lib/dijit/themes/claro/layout/images/tabRight.png +++ /dev/null diff --git a/lib/dijit/themes/claro/layout/images/tabRightSelected.png b/lib/dijit/themes/claro/layout/images/tabRightSelected.png Binary files differnew file mode 100644 index 000000000..1a2843499 --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabRightSelected.png diff --git a/lib/dijit/themes/claro/layout/images/tabRightSelected.svg b/lib/dijit/themes/claro/layout/images/tabRightSelected.svg new file mode 100644 index 000000000..d8d3d674a --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabRightSelected.svg @@ -0,0 +1,17 @@ +<?xml version="1.0" ?> +<!-- + Source file for tabRightSelected.png, which is used by IE7-9 for selected tabs. + Compile to png with batik, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm + + Output should match CSS gradient from TabContainer.less. +--> +<svg xmlns="http://www.w3.org/2000/svg" width="1000px" height="1px" viewBox="0 0 1000 1" preserveAspectRatio="none"> + <defs> + <linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="100%" y1="0%" x2="0%" y2="0%"> + <stop offset="0%" stop-color="#ffffff" stop-opacity="0.5"/> + <stop offset="100%" stop-color="#ffffff" stop-opacity="1"/> + </linearGradient> + </defs> + <rect x="0" y="0" width="970" height="1" fill="white"/> + <rect x="970" y="0" width="30" height="1" fill="url(#gradient)"/> +</svg>
\ No newline at end of file diff --git a/lib/dijit/themes/claro/layout/images/tabRightUnselected.png b/lib/dijit/themes/claro/layout/images/tabRightUnselected.png Binary files differnew file mode 100644 index 000000000..2bdd00e4d --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabRightUnselected.png diff --git a/lib/dijit/themes/claro/layout/images/tabRightUnselected.svg b/lib/dijit/themes/claro/layout/images/tabRightUnselected.svg new file mode 100644 index 000000000..d1379a717 --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabRightUnselected.svg @@ -0,0 +1,16 @@ +<?xml version="1.0" ?> +<!-- + Source file for tabRightUnselected.png, which is used by IE7-9 for the selected tabs. + Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm + + Output should match CSS gradient from TabContainer.less. +--> +<svg xmlns="http://www.w3.org/2000/svg" width="150px" height="1px" viewBox="0 0 100 1" preserveAspectRatio="none"> + <defs> + <linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="100%" y1="0%" x2="0%" y2="0%"> + <stop offset="0%" stop-color="#ffffff" stop-opacity="0.5"/> + <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/> + </linearGradient> + </defs> + <rect x="0" y="0" width="150" height="1" fill="url(#gradient)"/> +</svg>
\ No newline at end of file diff --git a/lib/dijit/themes/claro/layout/images/tabTop.png b/lib/dijit/themes/claro/layout/images/tabTop.png Binary files differdeleted file mode 100644 index 2822487ed..000000000 --- a/lib/dijit/themes/claro/layout/images/tabTop.png +++ /dev/null diff --git a/lib/dijit/themes/claro/layout/images/tabTopSelected.png b/lib/dijit/themes/claro/layout/images/tabTopSelected.png Binary files differnew file mode 100644 index 000000000..f4d577258 --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabTopSelected.png diff --git a/lib/dijit/themes/claro/layout/images/tabTopSelected.svg b/lib/dijit/themes/claro/layout/images/tabTopSelected.svg new file mode 100644 index 000000000..d06e646ea --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabTopSelected.svg @@ -0,0 +1,18 @@ +<?xml version="1.0" ?> +<!-- + Source file for tabTopSelected.png, which is used by IE7-9 for the selected tabs. + Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm + + Output should match CSS gradient from .topBottom-selected-tab-gradient() from TabContainer.less. +--> +<svg xmlns="http://www.w3.org/2000/svg" width="1px" height="250px" viewBox="0 0 1 250" preserveAspectRatio="none"> + <defs> + <linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="0%" stop-color="#ffffff" stop-opacity="0"/> + <stop offset="100%" stop-color="#ffffff" stop-opacity="1"/> + </linearGradient> + </defs> + <rect x="0" y="0" width="1" height="2" fill="white"/> + <rect x="0" y="2" width="1" height="6" fill="url(#gradient)"/> + <rect x="0" y="8" width="1" height="242" fill="white"/> +</svg>
\ No newline at end of file diff --git a/lib/dijit/themes/claro/layout/images/tabTopUnselected.png b/lib/dijit/themes/claro/layout/images/tabTopUnselected.png Binary files differnew file mode 100644 index 000000000..8c34545f5 --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabTopUnselected.png diff --git a/lib/dijit/themes/claro/layout/images/tabTopUnselected.svg b/lib/dijit/themes/claro/layout/images/tabTopUnselected.svg new file mode 100644 index 000000000..c55e92532 --- /dev/null +++ b/lib/dijit/themes/claro/layout/images/tabTopUnselected.svg @@ -0,0 +1,19 @@ +<?xml version="1.0" ?> +<!-- + Source file for tabTopUnSelected.png, which is used by IE7-9 for the selected tabs. + Compile to png with batik, gimp, or online tool ex: http://www.fileformat.info/convert/image/svg2raster.htm + + Output should match CSS gradient from TabContainer.less. +--> +<svg xmlns="http://www.w3.org/2000/svg" width="1px" height="16px" viewBox="0 0 1 16" preserveAspectRatio="none"> + <defs> + <linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/> + <stop offset="6%" stop-color="#ffffff" stop-opacity="1"/> + <stop offset="13%" stop-color="#ffffff" stop-opacity="0.2"/> + <stop offset="43%" stop-color="#ffffff" stop-opacity="0.6"/> + <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/> + </linearGradient> + </defs> + <rect x="0" y="0" width="1" height="16" fill="url(#gradient)"/> +</svg>
\ No newline at end of file |