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