3 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.
5 Styling the BorderContainer widget consists of the following:
7 .dijitBorderContainer - for border and padding of the entire border container
9 .dijitSplitContainer-child, .dijitBorderContainer-child - for border or child panes of the border container. By default borders are put on all children of BorderContainer.
11 .dijitBorderContainer-dijitTabContainerTop,
12 .dijitBorderContainer-dijitTabContainerBottom,
13 .dijitBorderContainer-dijitTabContainerLeft,
14 .dijitBorderContainer-dijitTabContainerRight,
15 .dijitBorderContainer-dijitAccordionContainer -for border of the border containers within TabContainer or AccordionContainer widget
17 .dijitBorderContainer-dijitBorderContainer - for border and padding of nested BorderContainers
19 Splitters and gutters:
21 .dijitSplitterH, .dijitGutterH - for height, background, and border of a horizontal splitter and gutter
22 .dijitSplitterH .dijitSplitterThumb - for color, height/width of the thumb on a horizontal splitter
23 .dijitSplitterV, .dijitGutterV - - for height, background, and border of a vertical splitter and gutter
24 .dijitSplitterV .dijitSplitterThumb - for color, height/width of the thumb on a vertical splitter
25 .dijitSplitterHHover - for background-color of a hovered horizontal splitter
26 .dijitSplitterHHover .dijitSplitterThumb - for background-color of a hovered thumb on a horizontal splitter
27 .dijitSplitterVHover - for background-color of a hovered vertical splitter
28 .dijitSplitterVHover .dijitSplitterThumb - for background-color of a hovered thumb on a vertical splitter
29 .dijitSplitterHActive - for background-color of an active horizontal splitter
30 .dijitSplitterVActive - for background-color of an active horizontal splitter
32 .claro .dijitBorderContainer {
33 /* matches the width of the splitters between panes */
37 .claro .dijitSplitContainer-child, .claro .dijitBorderContainer-child {
38 /* By default put borders on all children of BorderContainer,
39 * to give illusion of borders on the splitters themselves.
42 border: 1px #b5bcc7 solid
;
44 .claro
.dijitBorderContainer-dijitTabContainerTop
,
45 .claro
.dijitBorderContainer-dijitTabContainerBottom
,
46 .claro
.dijitBorderContainer-dijitTabContainerLeft
,
47 .claro
.dijitBorderContainer-dijitTabContainerRight
,
48 .claro .dijitBorderContainer-dijitAccordionContainer {
49 /* except that TabContainer defines borders on it's sub-nodes (tablist and dijitTabPaneWrapper),
50 * so override rule setting border on domNode
55 .claro .dijitBorderContainer-dijitBorderContainer {
56 /* make nested BorderContainers look like a single big widget with lots of splitters */
61 /* Splitters and gutters */
62 .claro .dijitSplitterH, .claro .dijitGutterH {
67 .claro .dijitSplitterH .dijitSplitterThumb {
68 background: #b5bcc7 none
;
73 .claro .dijitSplitterV, .claro .dijitGutterV {
79 .claro .dijitSplitterV .dijitSplitterThumb {
80 background: #b5bcc7 none
;
86 /* hovered splitter */
87 .claro .dijitSplitterHHover, .claro .dijitSplitterVHover {
89 background-color: #cfe5fa;
91 .claro .dijitSplitterHHover {
92 background-image: -moz-linear-gradient
(left
, #ffffff 0px, rgba
(255, 255, 255, 0) 50%, #ffffff 100%);
93 background-image: -webkit-linear-gradient
(left
, #ffffff 0px, rgba
(255, 255, 255, 0) 50%, #ffffff 100%);
94 background-image: -o-linear-gradient
(left
, #ffffff 0px, rgba
(255, 255, 255, 0) 50%, #ffffff 100%);
95 background-image: linear-gradient
(left
, #ffffff 0px, rgba
(255, 255, 255, 0) 50%, #ffffff 100%);
97 .claro .dijitSplitterVHover {
98 background-image: -moz-linear-gradient
(top
, #ffffff 0px, rgba
(255, 255, 255, 0) 50%, #ffffff 100%);
99 background-image: -webkit-linear-gradient
(top
, #ffffff 0px, rgba
(255, 255, 255, 0) 50%, #ffffff 100%);
100 background-image: -o-linear-gradient
(top
, #ffffff 0px, rgba
(255, 255, 255, 0) 50%, #ffffff 100%);
101 background-image: linear-gradient
(top
, #ffffff 0px, rgba
(255, 255, 255, 0) 50%, #ffffff 100%);
103 .claro .dijitSplitterHHover .dijitSplitterThumb, .claro .dijitSplitterVHover .dijitSplitterThumb {
104 background: #759dc0 none
;
106 /* active splitter */
107 .claro .dijitSplitterHActive, .claro .dijitSplitterVActive {
109 background-color: #abd6ff;
110 background-image: none
;