diff options
Diffstat (limited to 'lib/dijit/themes/claro/layout/BorderContainer.less')
-rw-r--r-- | lib/dijit/themes/claro/layout/BorderContainer.less | 128 |
1 files changed, 128 insertions, 0 deletions
diff --git a/lib/dijit/themes/claro/layout/BorderContainer.less b/lib/dijit/themes/claro/layout/BorderContainer.less new file mode 100644 index 000000000..17c4b63cb --- /dev/null +++ b/lib/dijit/themes/claro/layout/BorderContainer.less @@ -0,0 +1,128 @@ +/* BorderContainer + +Splitters and gutters separate panes within a BorderContainer. Splitters can be moved up and down (horizonal splitters) or left and right (vertical splitters), while Gutters are static. A "thumb" is the slit on a Splitter that indicates it is movable. + +Styling the BorderContainer widget consists of the following: + +.dijitBorderContainer - for border and padding of the entire border container + +.dijitSplitContainer-child, .dijitBorderContainer-child - for border or child panes of the border container. By default borders are put on all children of BorderContainer. + +.dijitBorderContainer-dijitTabContainerTop, +.dijitBorderContainer-dijitTabContainerBottom, +.dijitBorderContainer-dijitTabContainerLeft, +.dijitBorderContainer-dijitTabContainerRight, +.dijitBorderContainer-dijitAccordionContainer -for border of the border containers within TabContainer or AccordionContainer widget + +.dijitBorderContainer-dijitBorderContainer - for border and padding of nested BorderContainers + +Splitters and gutters: + +.dijitSplitterH, .dijitGutterH - for height, background, and border of a horizontal splitter and gutter +.dijitSplitterH .dijitSplitterThumb - for color, height/width of the thumb on a horizontal splitter +.dijitSplitterV, .dijitGutterV - - for height, background, and border of a vertical splitter and gutter +.dijitSplitterV .dijitSplitterThumb - for color, height/width of the thumb on a vertical splitter +.dijitSplitterHHover - for background-color of a hovered horizontal splitter +.dijitSplitterHHover .dijitSplitterThumb - for background-color of a hovered thumb on a horizontal splitter +.dijitSplitterVHover - for background-color of a hovered vertical splitter +.dijitSplitterVHover .dijitSplitterThumb - for background-color of a hovered thumb on a vertical splitter +.dijitSplitterHActive - for background-color of an active horizontal splitter +.dijitSplitterVActive - for background-color of an active horizontal splitter +*/ + +@import "../variables"; + +.claro .dijitBorderContainer { + /* matches the width of the splitters between panes */ + padding: 5px; +} + +.claro .dijitSplitContainer-child, +.claro .dijitBorderContainer-child { + /* By default put borders on all children of BorderContainer, + * to give illusion of borders on the splitters themselves. + */ + border: 1px @border-color solid; +} + +.claro .dijitBorderContainer-dijitTabContainerTop, +.claro .dijitBorderContainer-dijitTabContainerBottom, +.claro .dijitBorderContainer-dijitTabContainerLeft, +.claro .dijitBorderContainer-dijitTabContainerRight, +.claro .dijitBorderContainer-dijitAccordionContainer { + /* except that TabContainer defines borders on it's sub-nodes (tablist and dijitTabPaneWrapper), + * so override rule setting border on domNode + */ + border: none; + +} +.claro .dijitBorderContainer-dijitBorderContainer { + /* make nested BorderContainers look like a single big widget with lots of splitters */ + border: 0; + padding: 0; +} + +/* Splitters and gutters */ + +.claro .dijitSplitterH, +.claro .dijitGutterH { + background:none; + border:0; + height:5px; +} + +.claro .dijitSplitterH .dijitSplitterThumb { + background:@border-color none; + height:1px; + top:2px; + width:19px; +} + +.claro .dijitSplitterV, +.claro .dijitGutterV { + background:none; + border:0; + width:5px; + margin: 0; +} + +.claro .dijitSplitterV .dijitSplitterThumb { + background:@border-color none; + height:19px; + left:2px; + width:1px; + margin: 0; +} + +/* hovered splitter */ +.claro .dijitSplitterHHover { + font-size: 1px; + background: url("images/splitterHorizontalHover.png") no-repeat center top; +} + + +.claro .dijitSplitterHHover .dijitSplitterThumb { + background:@hovered-border-color none; +} + +.claro .dijitSplitterVHover { + font-size: 1px; + background: url("images/splitterVerticalHover.png") no-repeat center left; +} + +.claro .dijitSplitterVHover .dijitSplitterThumb { + background:@hovered-border-color none; +} + +.dj_ie6 .dijitSplitterHHover, +.dj_ie6 .claro .dijitSplitterVHover { + background-color: @splitter-hovered-background-color; + background-image:none; +} + +/* active splitter */ +.claro .dijitSplitterHActive, +.claro .dijitSplitterVActive { + font-size: 1px; + background-color:@splitter-dragged-background-color; +} |