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