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