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