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