##// END OF EJS Templates
fix width overriden by 04abbe99
Jonathan Frederic -
Show More
@@ -1,265 +1,268 b''
1 1 .widget-area {
2 2 /*
3 3 LESS file that styles IPython notebook widgets and the area they sit in.
4 4
5 5 The widget area typically looks something like this:
6 6 +------------------------------------------+
7 7 | widget-area |
8 8 | +--------+---------------------------+ |
9 9 | | prompt | widget-subarea | |
10 10 | | | +--------+ +--------+ | |
11 11 | | | | widget | | widget | | |
12 12 | | | +--------+ +--------+ | |
13 13 | +--------+---------------------------+ |
14 14 +------------------------------------------+
15 15 */
16 16
17 17 page-break-inside : avoid;
18 18 .hbox();
19 19
20 20 .widget-subarea {
21 21 padding : 0.44em 0.4em 0.4em 1px;
22 22 margin-left : 6px;
23 23
24 24 .border-box-sizing();
25 25 .vbox();
26 26 .box-flex2();
27 27 }
28 28 }
29 29
30 30 /* THE CLASSES BELOW CAN APPEAR ANYWHERE IN THE DOM (POSSIBLEY OUTSIDE OF
31 31 THE WIDGET AREA). */
32 32
33 33 .widget-hlabel {
34 34 /* Horizontal Label */
35 35 min-width : 10ex;
36 36 padding-right : 8px;
37 37 padding-top : 3px;
38 38 text-align : right;
39 39 vertical-align : text-top;
40 40 }
41 41
42 42 .widget-vlabel {
43 43 /* Vertical Label */
44 44 padding-bottom : 5px;
45 45 text-align : center;
46 46 vertical-align : text-bottom;
47 47 }
48 48
49 49 .widget-hreadout {
50 50 padding-left : 8px;
51 51 padding-top : 3px;
52 52 text-align : left;
53 53 vertical-align : text-top;
54 54 }
55 55
56 56 .widget-vreadout {
57 57 /* Vertical Label */
58 58 padding-top : 5px;
59 59 text-align : center;
60 60 vertical-align : text-top;
61 61 }
62 62
63 63 .slide-track {
64 64 /* Slider Track */
65 65 border : 1px solid #CCCCCC;
66 66 background : #FFFFFF;
67 67
68 68 .corner-all(); /* Round the corners of the slide track */
69 69 }
70 70
71 71 .widget-hslider {
72 72 /* Horizontal jQuery Slider
73 73
74 74 Both the horizontal and vertical versions of the slider are characterized
75 75 by a styled div that contains an invisible jQuery slide div which
76 76 contains a visible slider handle div. This is requred so we can control
77 77 how the slider is drawn and 'fix' the issue where the slide handle
78 78 doesn't stop at the end of the slide.
79 79
80 80 Both horizontal and vertical sliders have this div nesting:
81 81 +------------------------------------------+
82 82 | widget-(h/v)slider |
83 83 | +--------+---------------------------+ |
84 84 | | ui-slider | |
85 85 | | +------------------+ | |
86 86 | | | ui-slider-handle | | |
87 87 | | +------------------+ | |
88 88 | +--------+---------------------------+ |
89 89 +------------------------------------------+
90 90 */
91 91
92 92 /* Fix the padding of the slide track so the ui-slider is sized
93 93 correctly. */
94 94 padding-left : 8px;
95 95 padding-right : 5px;
96 96 overflow : visible;
97 97
98 98 /* Default size of the slider */
99 99 width : 348px;
100 100 height : 5px;
101 101 max-height : 5px;
102 102 margin-top : 11px;
103 103
104 104 /* Style the slider track */
105 105 .slide-track();
106 106
107 107 /* Make the div a flex box (makes FF behave correctly). */
108 108 .hbox();
109 109
110 110 .ui-slider {
111 111 /* Inner, invisible slide div */
112 112 border : 0px !important;
113 113 background : none !important;
114 114
115 115 .hbox();
116 116 .box-flex1();
117 117
118 118 .ui-slider-handle {
119 119 width : 14px !important;
120 120 height : 28px !important;
121 121 margin-top : -8px !important;
122 122 }
123 123 }
124 124 }
125 125
126 126 .widget-vslider {
127 127 /* Vertical jQuery Slider */
128 128
129 129 /* Fix the padding of the slide track so the ui-slider is sized
130 130 correctly. */
131 131 padding-bottom : 8px;
132 132 overflow : visible;
133 133
134 134 /* Default size of the slider */
135 135 width : 5px;
136 136 max-width : 5px;
137 137 height : 250px;
138 138 margin-left : 12px;
139 139
140 140 /* Style the slider track */
141 141 .slide-track();
142 142
143 143 /* Make the div a flex box (makes FF behave correctly). */
144 144 .vbox();
145 145
146 146 .ui-slider {
147 147 /* Inner, invisible slide div */
148 148 border : 0px !important;
149 149 background : none !important;
150 150 margin-left : -4px;
151 151 margin-top : 5px;
152 152
153 153 .vbox();
154 154 .box-flex1();
155 155
156 156 .ui-slider-handle {
157 157 width : 28px !important;
158 158 height : 14px !important;
159 159 margin-left : -9px;
160 160 }
161 161 }
162 162 }
163 163
164 164 .widget-text {
165 165 /* String Textbox - used for TextBoxView and TextAreaView */
166 166 width : 350px;
167 167 margin-bottom : 0px;
168 168 }
169 169
170 170 .widget-listbox {
171 171 /* Listbox */
172 172 width : 364px;
173 173 margin-bottom : 0px;
174 174 }
175 175
176 176 .widget-numeric-text {
177 177 /* Single Line Textbox - used for IntTextView and FloatTextView */
178 178 width : 150px;
179 179 }
180 180
181 181 .widget-progress {
182 182 /* Progress Bar */
183 183 width : 363px;
184 184
185 185 .bar {
186 186 /* Disable progress bar animation */
187 187 -webkit-transition : none;
188 188 -moz-transition : none;
189 189 -ms-transition : none;
190 190 -o-transition : none;
191 191 transition : none;
192 192 }
193 193 }
194 194
195 195 .widget-combo-btn {
196 196 /* ComboBox Main Button */
197 197 min-width : 138px; /* + 26px drop arrow btn = 164px */
198 198 }
199 199
200 200 .widget-box {
201 201 /* The following section sets the style for the invisible div that
202 202 hold widgets and their accompanying labels.
203 203
204 204 Looks like this:
205 205 +-----------------------------+
206 206 | widget-box (or similar) |
207 207 | +-------+---------------+ |
208 208 | | Label | Actual Widget | |
209 209 | +-------+---------------+ |
210 210 +-----------------------------+
211 211 */
212 212 margin : 5px;
213 213
214 214 .start();
215 215 .widget-container();
216 216 }
217 217
218 218 .widget-hbox {
219 219 /* Horizontal widgets */
220 220 .widget-box();
221 221 .hbox();
222 222 }
223 223
224 224 .widget-hbox-single {
225 225 /* Single line horizontal widgets */
226 .widget-hbox();
226 227 height : 30px;
228 }
227 229
228 .widget-hbox();
230 .widget-vbox {
231 /* Vertical widgets */
232 .widget-box();
233 .vbox();
229 234 }
230 235
231 236 .widget-vbox-single {
232 237 /* For vertical slides */
238 .widget-vbox();
233 239 width : 30px;
234
235 .widget-box();
236 .vbox();
237 240 }
238 241
239 242 .widget-modal {
240 243 /* ContainerWidget - ModalView */
241 244 overflow : hidden;
242 245 position : absolute !important;
243 246 top : 0px;
244 247 left : 0px;
245 248 margin-left : 0px !important;
246 249 }
247 250
248 251 .widget-modal-body {
249 252 /* ContainerWidget - ModalView Body */
250 253 max-height: none !important;
251 254 }
252 255
253 256 .widget-container {
254 257 /* ContainerWidget */
255 258 .border-box-sizing();
256 259 }
257 260
258 261 .docked-widget-modal {
259 262 /* Horizontal Label */
260 263 overflow: hidden;
261 264 position: relative !important;
262 265 top: 0px !important;
263 266 left: 0px !important;
264 267 margin-left: 0px !important;
265 268 } No newline at end of file
General Comments 0
You need to be logged in to leave comments. Login now