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