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