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