Automated build for v0.01
1
lib/dijit/themes/claro/layout/AccordionContainer.css
Normal file
@ -0,0 +1 @@
|
||||
.claro .dijitAccordionContainer {border: none;}.claro .dijitAccordionInnerContainer {background-color: #efefef; 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/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;}.claro .dijitAccordionContainer .dijitAccordionChildWrapper {background-color: #ffffff; border: 1px solid #759dc0; margin: 0 2px 2px;}.claro .dijitAccordionContainer .dijitAccordionContainer-child {padding: 9px;}.claro .dijitAccordionInnerContainerHover {border: 1px solid #759dc0; background-color: #abd6ff; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s;}.claro .dijitAccordionInnerContainerHover .dijitAccordionTitle {color: #000000;}.claro .dijitAccordionInnerContainerActive {border: 1px solid #759dc0; background-color: #7dbdfa; -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; transition-duration: 0.1s;}.claro .dijitAccordionInnerContainerActive .dijitAccordionTitle {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;}.claro .dijitAccordionInnerContainerSelected {border-color: #759dc0; background-color: #cfe5fa;}.claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle {color: #000000; 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;}
|
100
lib/dijit/themes/claro/layout/AccordionContainer.less
Normal file
@ -0,0 +1,100 @@
|
||||
/* 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 */
|
||||
.standard-gradient("../");
|
||||
padding: 5px 7px 2px 7px;
|
||||
min-height:17px;
|
||||
color:@unselected-text-color;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Hover state for closed pane */
|
||||
|
||||
.claro .dijitAccordionInnerContainerHover {
|
||||
border:1px solid @hovered-border-color;
|
||||
background-color:@hovered-background-color;
|
||||
.transition-duration(.2s);
|
||||
}
|
||||
|
||||
.claro .dijitAccordionInnerContainerHover .dijitAccordionTitle {
|
||||
color:@hovered-text-color;
|
||||
}
|
||||
|
||||
/* Active state for closed pane */
|
||||
|
||||
.claro .dijitAccordionInnerContainerActive {
|
||||
border:1px solid @selected-border-color;
|
||||
background-color:@pressed-background-color;
|
||||
.transition-duration(.1s);
|
||||
}
|
||||
.claro .dijitAccordionInnerContainerActive .dijitAccordionTitle {
|
||||
.active-gradient("../");
|
||||
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;
|
||||
.standard-gradient("../"); /* avoid effect when clicking the title of the open pane */
|
||||
}
|
||||
|
1
lib/dijit/themes/claro/layout/BorderContainer.css
Normal file
@ -0,0 +1 @@
|
||||
.claro .dijitBorderContainer {padding: 5px;}.claro .dijitSplitContainer-child,.claro .dijitBorderContainer-child {border: 1px #b5bcc7 solid;}.claro .dijitBorderContainer-dijitTabContainerTop,.claro .dijitBorderContainer-dijitTabContainerBottom,.claro .dijitBorderContainer-dijitTabContainerLeft,.claro .dijitBorderContainer-dijitTabContainerRight,.claro .dijitBorderContainer-dijitAccordionContainer {border: none;}.claro .dijitBorderContainer-dijitBorderContainer {border: 0; padding: 0;}.claro .dijitSplitterH,.claro .dijitGutterH {background: none; border: 0; height: 5px;}.dj_ios .claro .dijitSplitterH,.dj_android .claro .dijitSplitterH {height: 11px;}.claro .dijitSplitterH .dijitSplitterThumb {background: #b5bcc7 none; height: 1px; top: 2px; width: 19px;}.dj_ios .claro .dijitSplitterH .dijitSplitterThumb,.dj_android .claro .dijitSplitterH .dijitSplitterThumb {top: 5px;}.claro .dijitSplitterV,.claro .dijitGutterV {background: none; border: 0; width: 5px; margin: 0;}.dj_ios .claro .dijitSplitterV,.dj_android .claro .dijitSplitterV {width: 11px;}.claro .dijitSplitterV .dijitSplitterThumb {background: #b5bcc7 none; height: 19px; left: 2px; width: 1px; margin: 0;}.dj_ios .claro .dijitSplitterV .dijitSplitterThumb,.dj_android .claro .dijitSplitterV .dijitSplitterThumb {left: 5px;}.claro .dijitSplitterHHover,.claro .dijitSplitterVHover {font-size: 1px; background-color: #cfe5fa;}.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 {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 .dijitSplitterHHover .dijitSplitterThumb,.claro .dijitSplitterVHover .dijitSplitterThumb {background: #759dc0 none;}.claro .dijitSplitterHActive,.claro .dijitSplitterVActive {font-size: 1px; background-color: #abd6ff; background-image: none;}
|
135
lib/dijit/themes/claro/layout/BorderContainer.less
Normal file
@ -0,0 +1,135 @@
|
||||
/* 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;
|
||||
}
|
||||
.dj_ios .claro .dijitSplitterH, .dj_android .claro .dijitSplitterH {
|
||||
height: 11px;
|
||||
}
|
||||
|
||||
.claro .dijitSplitterH .dijitSplitterThumb {
|
||||
background:@border-color none;
|
||||
height:1px;
|
||||
top:2px;
|
||||
width:19px;
|
||||
}
|
||||
.dj_ios .claro .dijitSplitterH .dijitSplitterThumb, .dj_android .claro .dijitSplitterH .dijitSplitterThumb{
|
||||
top:5px;
|
||||
}
|
||||
.claro .dijitSplitterV,
|
||||
.claro .dijitGutterV {
|
||||
background:none;
|
||||
border:0;
|
||||
width:5px;
|
||||
margin: 0;
|
||||
}
|
||||
.dj_ios .claro .dijitSplitterV, .dj_android .claro .dijitSplitterV {
|
||||
width: 11px;
|
||||
}
|
||||
|
||||
.claro .dijitSplitterV .dijitSplitterThumb {
|
||||
background:@border-color none;
|
||||
height:19px;
|
||||
left:2px;
|
||||
width:1px;
|
||||
margin: 0;
|
||||
}
|
||||
.dj_ios .claro .dijitSplitterV .dijitSplitterThumb, .dj_android .claro .dijitSplitterV .dijitSplitterThumb{
|
||||
left:5px;
|
||||
}
|
||||
|
||||
/* hovered splitter */
|
||||
.claro .dijitSplitterHHover,
|
||||
.claro .dijitSplitterVHover {
|
||||
font-size: 1px;
|
||||
background-color: @splitter-hovered-background-color;
|
||||
}
|
||||
|
||||
.claro .dijitSplitterHHover {
|
||||
.alpha-white-gradient (left, 1,0px, 0,50%, 1,100%);
|
||||
}
|
||||
|
||||
.claro .dijitSplitterVHover {
|
||||
.alpha-white-gradient (top, 1,0px, 0,50%, 1,100%);
|
||||
}
|
||||
|
||||
.claro .dijitSplitterHHover .dijitSplitterThumb,
|
||||
.claro .dijitSplitterVHover .dijitSplitterThumb {
|
||||
background:@hovered-border-color 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
|
||||
}
|
1
lib/dijit/themes/claro/layout/ContentPane.css
Normal file
@ -0,0 +1 @@
|
||||
.claro .dijitContentPane {padding: 8px;}.claro .dijitTabContainerTop-dijitContentPane,.claro .dijitTabContainerLeft-dijitContentPane,.claro .dijitTabContainerBottom-dijitContentPane,.claro .dijitTabContainerRight-dijitContentPane,.claro .dijitAccordionContainer-dijitContentPane {background-color: #ffffff; padding: 8px;}.claro .dijitSplitContainer-dijitContentPane,.claro .dijitBorderContainer-dijitContentPane {background-color: #ffffff; padding: 8px;}
|
43
lib/dijit/themes/claro/layout/ContentPane.less
Normal file
@ -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;
|
||||
}
|
1
lib/dijit/themes/claro/layout/TabContainer.css
Normal file
360
lib/dijit/themes/claro/layout/TabContainer.less
Normal file
@ -0,0 +1,360 @@
|
||||
/* TabContainer
|
||||
*
|
||||
* Styling TabContainer means styling the TabList and Its content container (dijitTitlePane)
|
||||
*
|
||||
* Tab List: (including 4 kinds of tab location)
|
||||
* .dijitTabContainerTop-tabs - tablist container at top
|
||||
* .dijitTabContainerBottom-tabs - tablist container at bottom
|
||||
* .dijitTabContainerLeft-tabs - tablist container at left
|
||||
* .dijitTabContainerRight-tabs - tablist container at right
|
||||
*
|
||||
* Tab Strip Button:
|
||||
* .dijitTabStripIcon - tab strip button icon
|
||||
* .dijitTabStripMenuIcon - down arrow icon position
|
||||
* .dijitTabStripSlideLeftIcon - left arrow icon position
|
||||
* .dijitTabStripSlideRightIcon - right arrow icon position
|
||||
*
|
||||
* .tabStripButtonDisabled - styles for disabled tab strip buttons
|
||||
*
|
||||
* Tab Button:
|
||||
* .dijitTabContainerTop-tabs .dijitTab - styles for top tab button container
|
||||
* .dijitTabContainerBottom-tabs .dijitTab - styles for bottom tab button container
|
||||
* .dijitTabContainerLeft-tabs .dijitTab - styles for left tab button container
|
||||
* .dijitTabContainerRight-tabs .dijitTab - styles for right tab button container
|
||||
*
|
||||
* .dijitTabContainerTop-tabs .dijitTabChecked .dijitTab
|
||||
* - styles for selected status of top tab button
|
||||
* same to Bottom, Left, Right Tabs
|
||||
*
|
||||
* .dijitTabHover .dijitTab - styles when mouse hover on tab buttons
|
||||
* .dijitTabActive .dijitTab - styles when mouse down on tab buttons
|
||||
* .dijitTabChecked .dijitTab - styles when on buttons of selected tab
|
||||
*
|
||||
* .dijitTabCloseButton - the close action buttons lie at the right top of each tab button on closable tabs
|
||||
* .dijitTabCloseButtonHover - styles when mouse hover on close action button
|
||||
* .dijitTabCloseButtonActive - styles when mouse down on close action button
|
||||
*
|
||||
* Tab Button: (checked status)
|
||||
*
|
||||
* Tab Content Container:
|
||||
* .dijitTabContainerTop-dijitContentPane
|
||||
* .dijitTabContainerBottom-dijitContentPane
|
||||
* .dijitTabContainerLeft-dijitContentPane
|
||||
* .dijitTabContainerRight-dijitContentPane - for background and padding
|
||||
*
|
||||
* Nested Tabs:
|
||||
* .dijitTabContainerNested - Container for nested tabs
|
||||
* .dijitTabContainerTabListNested - tab list container for nested tabs
|
||||
*/
|
||||
|
||||
@import "../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;
|
||||
}
|
||||
.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("../@{image-layout-tab-close}") 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 .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 {
|
||||
border-color: @hovered-border-color;
|
||||
background-color:@hovered-background-color;
|
||||
.transition-duration(.25s);
|
||||
color:@hovered-text-color;
|
||||
}
|
||||
.claro .dijitTabActive {
|
||||
border-color: @pressed-border-color;
|
||||
background-color:@pressed-background-color;
|
||||
color:@selected-text-color;
|
||||
.transition-duration(.1s);
|
||||
}
|
||||
.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 {
|
||||
background-color: transparent;
|
||||
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:3px 6px;
|
||||
border-bottom-width: 0;
|
||||
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 {
|
||||
/* selected tab */
|
||||
padding-bottom: 4px;
|
||||
padding-top: 9px;
|
||||
|
||||
// gradient (CSS gradient, with backup image for IE6-9)
|
||||
background-image: url("images/tabTopSelected.png");
|
||||
.topBottom-selected-tab-gradient (top);
|
||||
|
||||
.box-shadow(0 -1px 2px rgba(0, 0, 0, 0.05));
|
||||
}
|
||||
|
||||
/** end top tab **/
|
||||
|
||||
|
||||
/*************** bottom tab ***************/
|
||||
.claro .dijitTabContainerBottom-tabs .dijitTab {
|
||||
/* unselected (and not hovered/pressed) tab */
|
||||
top: -1px; /* used for overlap */
|
||||
margin-right: 1px;
|
||||
padding:3px 6px;
|
||||
border-top-width: 0;
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
|
||||
// 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));
|
||||
}
|
||||
|
||||
/* selected tab */
|
||||
.claro .dijitTabContainerBottom-tabs .dijitTabChecked {
|
||||
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 {
|
||||
/* unselected (and not hovered/pressed) tab */
|
||||
left: 1px; /* used for overlap */
|
||||
margin-bottom: 1px;
|
||||
padding:3px 8px 4px 4px;
|
||||
|
||||
// gradient (CSS gradient, with backup image for IE6-9)
|
||||
background-image: url("images/tabLeftUnselected.png");
|
||||
background-repeat: repeat-y;
|
||||
.unselected-tab-gradient(left);
|
||||
}
|
||||
|
||||
/* selected tab */
|
||||
.claro .dijitTabContainerLeft-tabs .dijitTabChecked {
|
||||
border-right-width: 0;
|
||||
padding-right: 9px;
|
||||
|
||||
// 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 {
|
||||
/* unselected (and not hovered/pressed) tab */
|
||||
left: -1px; /* used for overlap */
|
||||
margin-bottom: 1px;
|
||||
padding:3px 8px 4px 4px;
|
||||
|
||||
// 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);
|
||||
}
|
||||
.claro .dijitTabContainerRight-tabs .dijitTabChecked {
|
||||
/* selected tab */
|
||||
padding-left: 5px;
|
||||
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 .dijitTab {
|
||||
.border-radius(2px 2px 0 0);
|
||||
}
|
||||
.claro .dijitTabContainerBottom-tabs .dijitTab {
|
||||
.border-radius(0 0 2px 2px);
|
||||
}
|
||||
.claro .dijitTabContainerLeft-tabs .dijitTab {
|
||||
.border-radius(2px 0 0 2px);
|
||||
}
|
||||
|
||||
.claro .dijitTabContainerRight-tabs .dijitTab {
|
||||
.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;
|
||||
.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: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;
|
||||
}
|
||||
.claro .tabStripButtonActive {
|
||||
background-color:@pressed-background-color;
|
||||
}
|
||||
.claro .dijitTabStripIcon {
|
||||
height:15px;
|
||||
width:15px;
|
||||
margin: 0 auto;
|
||||
background:url("../@{image-form-button-arrows}") 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:2px 2px 4px;
|
||||
}
|
||||
.claro .dijitTabContainerTabListNested .dijitTab {
|
||||
background-color:rgba(255, 255, 255, 0);
|
||||
border: none;
|
||||
padding: 4px;
|
||||
border-color: rgba(118,157,192,0);
|
||||
.transition-property(background-color, border-color);
|
||||
.transition-duration(.3s);
|
||||
.border-radius(2px);
|
||||
top: 0;/* to override top: 1px/-1px for normal tabs */
|
||||
.box-shadow(none);
|
||||
|
||||
// CSS gradient with fallback to image for IE
|
||||
background-image: url("images/tabNested.png") repeat-x;
|
||||
.alpha-white-gradient (0.61,0%, 0,17%, 0,83%, 0.61,100%);
|
||||
}
|
||||
.claro .dijitTabContainerTabListNested .dijitTabHover {
|
||||
background-color: @nestedtab-hovered-background-color;
|
||||
border:solid 1px @nestedtab-hovered-border-color;
|
||||
padding: 3px; // 4px above padding - 1px compensation for border
|
||||
.transition-duration(.2s);
|
||||
}
|
||||
.claro .dijitTabContainerTabListNested .dijitTabHover .tabLabel {
|
||||
text-decoration: none;
|
||||
}
|
||||
.claro .dijitTabContainerTabListNested .dijitTabActive {
|
||||
border:solid 1px @nestedtab-selected-border-color;
|
||||
padding: 3px;
|
||||
.transition-duration(.1s);
|
||||
}
|
||||
.claro .dijitTabContainerTabListNested .dijitTabChecked {
|
||||
padding: 3px;
|
||||
border:solid 1px @selected-border-color;
|
||||
background-color:@selected-background-color;
|
||||
}
|
||||
.claro .dijitTabContainerTabListNested .dijitTabChecked .tabLabel {
|
||||
text-decoration: none;
|
||||
background-image:none;
|
||||
}
|
||||
.claro .dijitTabPaneWrapperNested {
|
||||
border: none;/* prevent double border */
|
||||
}
|
||||
|
||||
.claro .dijitTabContainer .dijitTab,
|
||||
.claro .dijitTabContainer .tabStripButton {
|
||||
// IE6 can't handle background-image and background-color on same node
|
||||
_background-image: none;
|
||||
}
|
1
lib/dijit/themes/claro/layout/TabContainer_rtl.css
Normal file
@ -0,0 +1 @@
|
||||
.claro .dijitTabContainerTop-tabs .dijitTabRtl,.claro .dijitTabContainerBottom-tabs .dijitTabRtl {margin-right: 0; margin-left: 1px;}
|
7
lib/dijit/themes/claro/layout/TabContainer_rtl.less
Normal file
@ -0,0 +1,7 @@
|
||||
@import "../variables";
|
||||
|
||||
.claro .dijitTabContainerTop-tabs .dijitTabRtl,
|
||||
.claro .dijitTabContainerBottom-tabs .dijitTabRtl {
|
||||
margin-right: 0;
|
||||
margin-left: 1px;
|
||||
}
|
BIN
lib/dijit/themes/claro/layout/images/tabBottomSelected.png
Normal file
After Width: | Height: | Size: 118 B |
18
lib/dijit/themes/claro/layout/images/tabBottomSelected.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 885 B |
BIN
lib/dijit/themes/claro/layout/images/tabBottomUnselected.png
Normal file
After Width: | Height: | Size: 110 B |
19
lib/dijit/themes/claro/layout/images/tabBottomUnselected.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 923 B |
BIN
lib/dijit/themes/claro/layout/images/tabClose.png
Normal file
After Width: | Height: | Size: 1.4 KiB |
BIN
lib/dijit/themes/claro/layout/images/tabLeftSelected.png
Normal file
After Width: | Height: | Size: 213 B |
17
lib/dijit/themes/claro/layout/images/tabLeftSelected.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 784 B |
BIN
lib/dijit/themes/claro/layout/images/tabLeftUnselected.png
Normal file
After Width: | Height: | Size: 106 B |
16
lib/dijit/themes/claro/layout/images/tabLeftUnselected.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 737 B |
BIN
lib/dijit/themes/claro/layout/images/tabNested.png
Normal file
After Width: | Height: | Size: 272 B |
BIN
lib/dijit/themes/claro/layout/images/tabRightSelected.png
Normal file
After Width: | Height: | Size: 210 B |
17
lib/dijit/themes/claro/layout/images/tabRightSelected.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 786 B |
BIN
lib/dijit/themes/claro/layout/images/tabRightUnselected.png
Normal file
After Width: | Height: | Size: 105 B |
16
lib/dijit/themes/claro/layout/images/tabRightUnselected.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 738 B |
BIN
lib/dijit/themes/claro/layout/images/tabTopSelected.png
Normal file
After Width: | Height: | Size: 120 B |
18
lib/dijit/themes/claro/layout/images/tabTopSelected.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 882 B |
BIN
lib/dijit/themes/claro/layout/images/tabTopUnselected.png
Normal file
After Width: | Height: | Size: 121 B |
19
lib/dijit/themes/claro/layout/images/tabTopUnselected.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 920 B |