Automated build for v0.01

This commit is contained in:
Fmstrat
2019-03-22 10:17:29 -04:00
commit 791b998489
2771 changed files with 222096 additions and 0 deletions

View 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;}

View 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 */
}

View 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;}

View 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
}

View 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;}

View 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;
}

File diff suppressed because one or more lines are too long

View 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;
}

View File

@ -0,0 +1 @@
.claro .dijitTabContainerTop-tabs .dijitTabRtl,.claro .dijitTabContainerBottom-tabs .dijitTabRtl {margin-right: 0; margin-left: 1px;}

View File

@ -0,0 +1,7 @@
@import "../variables";
.claro .dijitTabContainerTop-tabs .dijitTabRtl,
.claro .dijitTabContainerBottom-tabs .dijitTabRtl {
margin-right: 0;
margin-left: 1px;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 118 B

View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 110 B

View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 213 B

View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 106 B

View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 272 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 210 B

View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 105 B

View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 120 B

View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 121 B

View 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