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