##// END OF EJS Templates
Cleaned up widget LESS. Added comments and sorted code.
Jonathan Frederic -
Show More
@@ -1,4 +1,19 b''
1
1
2 /*
3 LESS file that styles IPython notebook widgets and the area they sit in.
4
5 The widget area typically looks something like this:
6 +------------------------------------------+
7 | widget-area |
8 | +--------+---------------------------+ |
9 | | prompt | widget-subarea | |
10 | | | +--------+ +--------+ | |
11 | | | | widget | | widget | | |
12 | | | +--------+ +--------+ | |
13 | +--------+---------------------------+ |
14 +------------------------------------------+
15 */
16
2 .widget-area {
17 .widget-area {
3 page-break-inside: avoid;
18 page-break-inside: avoid;
4 .hbox();
19 .hbox();
@@ -10,45 +25,76 b''
10 .vbox();
25 .vbox();
11 .box-flex2();
26 .box-flex2();
12
27
28 /* Horizontal Label */
13 .widget-hlabel {
29 .widget-hlabel {
14 min-width: 10ex;
30 min-width: 10ex;
15 padding-right: 8px;
31 padding-right: 8px;
32 padding-top: 3px;
16 text-align: right;
33 text-align: right;
17 vertical-align: text-top;
34 vertical-align: text-top;
18 padding-top: 3px;
19 }
35 }
20
36
37 /* Vertical Label */
21 .widget-vlabel {
38 .widget-vlabel {
39 padding-bottom: 5px;
22 text-align: center;
40 text-align: center;
23 vertical-align: text-bottom;
41 vertical-align: text-bottom;
24 padding-bottom: 5px;
25 }
42 }
26
43
44
45 /* Slider Track */
46 .slide-track {
47 border: 1px solid #CCCCCC;
48 background: #FFFFFF;
49 .corner-all(); /* Round the corners of the slide track */
50 }
51
52 /* Horizontal jQuery Slider
53
54 Both the horizontal and vertical versions of the slider are characterized
55 by a styled div that contains an invisible jQuery slide div which
56 contains a visible slider handle div. This is requred so we can control
57 how the slider is drawn and 'fix' the issue where the slide handle
58 doesn't stop at the end of the slide.
59
60 Both horizontal and vertical sliders have this div nesting:
61 +------------------------------------------+
62 | widget-(h/v)slider |
63 | +--------+---------------------------+ |
64 | | ui-slider | |
65 | | +------------------+ | |
66 | | | ui-slider-handle | | |
67 | | +------------------+ | |
68 | +--------+---------------------------+ |
69 +------------------------------------------+
70 */
27 .widget-hslider {
71 .widget-hslider {
72
73 /* Fix the padding of the slide track so the ui-slider is sized
74 correctly. */
28 padding-left: 8px;
75 padding-left: 8px;
29 padding-right: 5px;
76 padding-right: 5px;
30 margin-top: 11px;
77 overflow: visible;
31
78
32 width: 348px;
79 /* Default size of the slider */
80 width: 348px;
33 height: 5px;
81 height: 5px;
34 max-height: 5px;
82 max-height: 5px;
35 overflow: visible;
83 margin-top: 11px;
36
84
37 border: 1px solid #CCCCCC;
85 /* Style the slider track */
38 background: #FFFFFF;
86 .slide-track();
39 .corner-all();
40
87
41 display: -moz-box;
88 /* Make the div a flex box (makes FF behave correctly). */
42 display: -webkit-box;
89 .hbox();
43
90
91 /* Inner, invisible slide div */
44 .ui-slider {
92 .ui-slider {
45 border: 0px !important;
93 border: 0px !important;
46 background: none !important;
94 background: none !important;
47
95
48 display: -moz-box;
96 .hbox();
49 display: -webkit-box;
97 .box-flex1();
50 -moz-box-flex: 1; /* Mozilla */
51 -webkit-box-flex: 1; /* WebKit */
52
98
53 .ui-slider-handle {
99 .ui-slider-handle {
54 width: 14px !important;
100 width: 14px !important;
@@ -59,19 +105,27 b''
59 }
105 }
60 }
106 }
61
107
108 /* Vertical jQuery Slider */
62 .widget-vslider {
109 .widget-vslider {
63 border: 1px solid #CCCCCC;
110
64 background: #FFFFFF;
111 /* Fix the padding of the slide track so the ui-slider is sized
112 correctly. */
113 padding-bottom: 8px;
114 overflow: visible;
115
116 /* Default size of the slider */
65 width: 5px;
117 width: 5px;
66 max-width: 5px;
118 max-width: 5px;
119 height: 250px;
67 margin-left: 12px;
120 margin-left: 12px;
121
122 /* Style the slider track */
123 .slide-track();
68
124
69 padding-bottom: 8px;
125 /* Make the div a flex box (makes FF behave correctly). */
70 .vbox();
126 .vbox();
71 .corner-all();
127
72
128 /* Inner, invisible slide div */
73 height: 250px;
74
75 .ui-slider {
129 .ui-slider {
76 border: 0px !important;
130 border: 0px !important;
77 background: none !important;
131 background: none !important;
@@ -81,9 +135,6 b''
81 .vbox();
135 .vbox();
82 .box-flex1();
136 .box-flex1();
83
137
84 /* height: 100%;
85 min-height: 100%; */
86
87 .ui-slider-handle {
138 .ui-slider-handle {
88 width: 28px !important;
139 width: 28px !important;
89 height: 14px !important;
140 height: 14px !important;
@@ -92,15 +143,18 b''
92 }
143 }
93 }
144 }
94
145
146 /* String Textbox - used for TextBoxView and TextAreaView */
95 .widget-text {
147 .widget-text {
96 width: 350px;
148 width: 350px;
97 margin-bottom: 0px;
149 margin-bottom: 0px;
98 }
150 }
99
151
152 /* Single Line Textbox - used for IntTextView and FloatTextView */
100 .widget-numeric-text {
153 .widget-numeric-text {
101 width: 150px;
154 width: 150px;
102 }
155 }
103
156
157 /* Progress Bar */
104 .widget-progress {
158 .widget-progress {
105 width: 363px;
159 width: 363px;
106
160
@@ -114,31 +168,41 b''
114 }
168 }
115 }
169 }
116
170
171 /* ComboBox Main Button */
117 .widget-combo-btn {
172 .widget-combo-btn {
118 min-width: 138px; /* + 26px drop arrow btn = 164px */
173 min-width: 138px; /* + 26px drop arrow btn = 164px */
119 }
174 }
120
175
176 /* ContainerWidget */
121 .widget-container {
177 .widget-container {
122 .border-box-sizing();
178 .border-box-sizing();
123 }
179 }
124
180
181 /* The following section sets the style for the invisible div that
182 hold widgets and their accompanying labels.
183
184 Looks like this:
185 +-----------------------------+
186 | widget-box (or similar) |
187 | +-------+---------------+ |
188 | | Label | Actual Widget | |
189 | +-------+---------------+ |
190 +-----------------------------+
191 */
125 .widget-box {
192 .widget-box {
126 .start();
193 .start();
127 .widget-container();
194 .widget-container();
128 margin: 5px;
195 margin: 5px;
129 }
196 }
130
197 .widget-hbox { /* Horizontal widgets */
131 .widget-hbox {
132 .widget-box();
198 .widget-box();
133 .hbox();
199 .hbox();
134 }
200 }
135
201 .widget-hbox-single { /* Single line horizontal widgets */
136 .widget-hbox-single {
137 .widget-hbox();
202 .widget-hbox();
138 height: 30px;
203 height: 30px;
139 }
204 }
140
205 .widget-vbox-single { /* For vertical slides */
141 .widget-vbox-single {
142 .widget-box();
206 .widget-box();
143 .vbox();
207 .vbox();
144 width: 30px;
208 width: 30px;
General Comments 0
You need to be logged in to leave comments. Login now