]>
Commit | Line | Data |
---|---|---|
81bea17a | 1 | /* BorderContainer |
2f01fe57 | 2 | |
81bea17a AD |
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. |
4 | ||
5 | Styling the BorderContainer widget consists of the following: | |
6 | ||
7 | .dijitBorderContainer - for border and padding of the entire border container | |
8 | ||
9 | .dijitSplitContainer-child, .dijitBorderContainer-child - for border or child panes of the border container. By default borders are put on all children of BorderContainer. | |
10 | ||
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 | |
16 | ||
17 | .dijitBorderContainer-dijitBorderContainer - for border and padding of nested BorderContainers | |
18 | ||
19 | Splitters and gutters: | |
20 | ||
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 | |
31 | */ | |
2f01fe57 | 32 | .claro .dijitBorderContainer { |
81bea17a AD |
33 | /* matches the width of the splitters between panes */ |
34 | ||
35 | padding: 5px; | |
2f01fe57 | 36 | } |
81bea17a AD |
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. | |
40 | */ | |
41 | ||
42 | border: 1px #b5bcc7 solid; | |
2f01fe57 AD |
43 | } |
44 | .claro .dijitBorderContainer-dijitTabContainerTop, | |
45 | .claro .dijitBorderContainer-dijitTabContainerBottom, | |
46 | .claro .dijitBorderContainer-dijitTabContainerLeft, | |
47 | .claro .dijitBorderContainer-dijitTabContainerRight, | |
48 | .claro .dijitBorderContainer-dijitAccordionContainer { | |
81bea17a AD |
49 | /* except that TabContainer defines borders on it's sub-nodes (tablist and dijitTabPaneWrapper), |
50 | * so override rule setting border on domNode | |
51 | */ | |
52 | ||
53 | border: none; | |
2f01fe57 AD |
54 | } |
55 | .claro .dijitBorderContainer-dijitBorderContainer { | |
81bea17a AD |
56 | /* make nested BorderContainers look like a single big widget with lots of splitters */ |
57 | ||
58 | border: 0; | |
59 | padding: 0; | |
2f01fe57 | 60 | } |
81bea17a AD |
61 | /* Splitters and gutters */ |
62 | .claro .dijitSplitterH, .claro .dijitGutterH { | |
63 | background: none; | |
64 | border: 0; | |
65 | height: 5px; | |
2f01fe57 AD |
66 | } |
67 | .claro .dijitSplitterH .dijitSplitterThumb { | |
81bea17a AD |
68 | background: #b5bcc7 none; |
69 | height: 1px; | |
70 | top: 2px; | |
71 | width: 19px; | |
2f01fe57 | 72 | } |
81bea17a AD |
73 | .claro .dijitSplitterV, .claro .dijitGutterV { |
74 | background: none; | |
75 | border: 0; | |
76 | width: 5px; | |
77 | margin: 0; | |
2f01fe57 AD |
78 | } |
79 | .claro .dijitSplitterV .dijitSplitterThumb { | |
81bea17a AD |
80 | background: #b5bcc7 none; |
81 | height: 19px; | |
82 | left: 2px; | |
83 | width: 1px; | |
84 | margin: 0; | |
2f01fe57 | 85 | } |
81bea17a | 86 | /* hovered splitter */ |
2f01fe57 | 87 | .claro .dijitSplitterHHover { |
81bea17a | 88 | font-size: 1px; |
1354d172 | 89 | background: url("../layout/images/splitterHorizontalHover.png") no-repeat center top; |
2f01fe57 AD |
90 | } |
91 | .claro .dijitSplitterHHover .dijitSplitterThumb { | |
1354d172 | 92 | background: #759dc0 none; |
2f01fe57 AD |
93 | } |
94 | .claro .dijitSplitterVHover { | |
81bea17a | 95 | font-size: 1px; |
1354d172 | 96 | background: url("../layout/images/splitterVerticalHover.png") no-repeat center left; |
2f01fe57 AD |
97 | } |
98 | .claro .dijitSplitterVHover .dijitSplitterThumb { | |
1354d172 | 99 | background: #759dc0 none; |
2f01fe57 | 100 | } |
81bea17a AD |
101 | .dj_ie6 .dijitSplitterHHover, .dj_ie6 .claro .dijitSplitterVHover { |
102 | background-color: #cfe5fa; | |
103 | background-image: none; | |
2f01fe57 | 104 | } |
81bea17a AD |
105 | /* active splitter */ |
106 | .claro .dijitSplitterHActive, .claro .dijitSplitterVActive { | |
107 | font-size: 1px; | |
108 | background-color: #abd6ff; | |
2f01fe57 | 109 | } |