]>
Commit | Line | Data |
---|---|---|
81bea17a AD |
1 | /* BorderContainer |
2 | ||
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 | */ | |
32 | ||
33 | @import "../variables"; | |
34 | ||
35 | .claro .dijitBorderContainer { | |
36 | /* matches the width of the splitters between panes */ | |
37 | padding: 5px; | |
38 | } | |
39 | ||
40 | .claro .dijitSplitContainer-child, | |
41 | .claro .dijitBorderContainer-child { | |
42 | /* By default put borders on all children of BorderContainer, | |
43 | * to give illusion of borders on the splitters themselves. | |
44 | */ | |
45 | border: 1px @border-color solid; | |
46 | } | |
47 | ||
48 | .claro .dijitBorderContainer-dijitTabContainerTop, | |
49 | .claro .dijitBorderContainer-dijitTabContainerBottom, | |
50 | .claro .dijitBorderContainer-dijitTabContainerLeft, | |
51 | .claro .dijitBorderContainer-dijitTabContainerRight, | |
52 | .claro .dijitBorderContainer-dijitAccordionContainer { | |
53 | /* except that TabContainer defines borders on it's sub-nodes (tablist and dijitTabPaneWrapper), | |
54 | * so override rule setting border on domNode | |
55 | */ | |
56 | border: none; | |
57 | ||
58 | } | |
59 | .claro .dijitBorderContainer-dijitBorderContainer { | |
60 | /* make nested BorderContainers look like a single big widget with lots of splitters */ | |
61 | border: 0; | |
62 | padding: 0; | |
63 | } | |
64 | ||
65 | /* Splitters and gutters */ | |
66 | ||
67 | .claro .dijitSplitterH, | |
68 | .claro .dijitGutterH { | |
69 | background:none; | |
70 | border:0; | |
71 | height:5px; | |
72 | } | |
73 | ||
74 | .claro .dijitSplitterH .dijitSplitterThumb { | |
75 | background:@border-color none; | |
76 | height:1px; | |
77 | top:2px; | |
78 | width:19px; | |
79 | } | |
80 | ||
81 | .claro .dijitSplitterV, | |
82 | .claro .dijitGutterV { | |
83 | background:none; | |
84 | border:0; | |
85 | width:5px; | |
86 | margin: 0; | |
87 | } | |
88 | ||
89 | .claro .dijitSplitterV .dijitSplitterThumb { | |
90 | background:@border-color none; | |
91 | height:19px; | |
92 | left:2px; | |
93 | width:1px; | |
94 | margin: 0; | |
95 | } | |
96 | ||
97 | /* hovered splitter */ | |
f0cfe83e AD |
98 | .claro .dijitSplitterHHover, |
99 | .claro .dijitSplitterVHover { | |
81bea17a | 100 | font-size: 1px; |
f0cfe83e | 101 | background-color: @splitter-hovered-background-color; |
81bea17a AD |
102 | } |
103 | ||
f0cfe83e AD |
104 | .claro .dijitSplitterHHover { |
105 | .alpha-white-gradient (left, 1,0px, 0,50%, 1,100%); | |
81bea17a AD |
106 | } |
107 | ||
108 | .claro .dijitSplitterVHover { | |
f0cfe83e | 109 | .alpha-white-gradient (top, 1,0px, 0,50%, 1,100%); |
81bea17a AD |
110 | } |
111 | ||
f0cfe83e | 112 | .claro .dijitSplitterHHover .dijitSplitterThumb, |
81bea17a AD |
113 | .claro .dijitSplitterVHover .dijitSplitterThumb { |
114 | background:@hovered-border-color none; | |
115 | } | |
116 | ||
81bea17a AD |
117 | |
118 | /* active splitter */ | |
119 | .claro .dijitSplitterHActive, | |
120 | .claro .dijitSplitterVActive { | |
121 | font-size: 1px; | |
122 | background-color:@splitter-dragged-background-color; | |
f0cfe83e | 123 | background-image: none; // color all the way across, not gradient like in hover mode |
81bea17a | 124 | } |