diff options
author | Andrew Dolgov <[email protected]> | 2011-11-08 20:40:44 +0400 |
---|---|---|
committer | Andrew Dolgov <[email protected]> | 2011-11-08 20:40:44 +0400 |
commit | 81bea17aefb26859f825b9293c7c99192874806e (patch) | |
tree | fb244408ca271affa2899adb634788802c9a89d8 /lib/dijit/themes/claro/layout/BorderContainer.css | |
parent | 870a70e109ac9e80a88047044530de53d0404ec7 (diff) |
upgrade Dojo to 1.6.1
Diffstat (limited to 'lib/dijit/themes/claro/layout/BorderContainer.css')
-rw-r--r-- | lib/dijit/themes/claro/layout/BorderContainer.css | 130 |
1 files changed, 81 insertions, 49 deletions
diff --git a/lib/dijit/themes/claro/layout/BorderContainer.css b/lib/dijit/themes/claro/layout/BorderContainer.css index 333a45890..ede2a56c5 100644 --- a/lib/dijit/themes/claro/layout/BorderContainer.css +++ b/lib/dijit/themes/claro/layout/BorderContainer.css @@ -1,77 +1,109 @@ +/* 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 +*/ .claro .dijitBorderContainer { - border: 1px #b5bcc7 solid; - padding: 5px; + /* matches the width of the splitters between panes */ + + padding: 5px; } -.claro .dijitSplitContainer-child, -.claro .dijitBorderContainer-child { - - border: 1px #b5bcc7 solid; +.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 #b5bcc7 solid; } .claro .dijitBorderContainer-dijitTabContainerTop, .claro .dijitBorderContainer-dijitTabContainerBottom, .claro .dijitBorderContainer-dijitTabContainerLeft, .claro .dijitBorderContainer-dijitTabContainerRight, .claro .dijitBorderContainer-dijitAccordionContainer { - - border: none; + /* 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 { - - border: 1px #c0ccdf solid; - padding: 5px; + /* make nested BorderContainers look like a single big widget with lots of splitters */ + + border: 0; + padding: 0; } -.claro .dijitSplitterH, -.claro .dijitGutterH { - background:none; - border:0; - height:5px; +/* Splitters and gutters */ +.claro .dijitSplitterH, .claro .dijitGutterH { + background: none; + border: 0; + height: 5px; } .claro .dijitSplitterH .dijitSplitterThumb { - background:#dde2e9 none; - height:1px; - top:2px; - width:19px; + background: #b5bcc7 none; + height: 1px; + top: 2px; + width: 19px; } -.claro .dijitSplitterV, -.claro .dijitGutterV { - background:none; - border:0; - width:5px; - margin: 0; +.claro .dijitSplitterV, .claro .dijitGutterV { + background: none; + border: 0; + width: 5px; + margin: 0; } .claro .dijitSplitterV .dijitSplitterThumb { - background:#dde2e9 none; - height:19px; - left:2px; - width:1px; - margin: 0; + background: #b5bcc7 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; + font-size: 1px; + background: url("images/splitterHorizontalHover.png") no-repeat center top; } .claro .dijitSplitterHHover .dijitSplitterThumb { - background:#769dc0 none; + background: #769dc0 none; } .claro .dijitSplitterVHover { - font-size: 1px; - background: url("images/splitterVerticalHover.png") no-repeat center left; + font-size: 1px; + background: url("images/splitterVerticalHover.png") no-repeat center left; } .claro .dijitSplitterVHover .dijitSplitterThumb { - background:#769dc0 none; -} -.dj_ie6 .dijitSplitterHHover, -.dj_ie6 .claro .dijitSplitterVHover { - background-color:#cfe9ff; - background-image:none; + background: #769dc0 none; } -.claro .dijitSplitterHActive { - font-size: 1px; - background-color:#abd4fb; - border-top:blue; +.dj_ie6 .dijitSplitterHHover, .dj_ie6 .claro .dijitSplitterVHover { + background-color: #cfe5fa; + background-image: none; } -.claro .dijitSplitterVActive { - font-size: 1px; - background-color:#abd4fb; +/* active splitter */ +.claro .dijitSplitterHActive, .claro .dijitSplitterVActive { + font-size: 1px; + background-color: #abd6ff; } |