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