]>
Commit | Line | Data |
---|---|---|
6527f429 DM |
1 | /**\r |
2 | * Creates a visual theme for a Panel.\r | |
3 | *\r | |
4 | * **Note:** When using `frame: true`, this mixin call creates a UI property with the name and a "-framed" suffix.\r | |
5 | *\r | |
6 | * For example, Panel's UI will be set to "highlight-framed" if `frame:true`.\r | |
7 | *\r | |
8 | * @param {string} $ui\r | |
9 | * The name of the UI being created. Can not included spaces or special punctuation\r | |
10 | * (used in CSS class names).\r | |
11 | * \r | |
12 | * @param {color} [$ui-border-color=$panel-border-color]\r | |
13 | * The border-color of the Panel\r | |
14 | *\r | |
15 | * @param {number} [$ui-border-radius=$panel-border-radius]\r | |
16 | * The border-radius of the Panel\r | |
17 | *\r | |
18 | * @param {number} [$ui-border-width=$panel-border-width]\r | |
19 | * The border-width of the Panel\r | |
20 | *\r | |
21 | * @param {number} [$ui-padding=$panel-padding]\r | |
22 | * The padding of the Panel\r | |
23 | *\r | |
24 | * @param {color} [$ui-header-color=$panel-header-color]\r | |
25 | * The text color of the Header\r | |
26 | *\r | |
27 | * @param {string} [$ui-header-font-family=$panel-header-font-family]\r | |
28 | * The font-family of the Header\r | |
29 | *\r | |
30 | * @param {number} [$ui-header-font-size=$panel-header-font-size]\r | |
31 | * The font-size of the Header\r | |
32 | *\r | |
33 | * @param {string} [$ui-header-font-weight=$panel-header-font-weight]\r | |
34 | * The font-weight of the Header\r | |
35 | *\r | |
36 | * @param {number} [$ui-header-line-height=$panel-header-line-height]\r | |
37 | * The line-height of the Header\r | |
38 | *\r | |
39 | * @param {color} [$ui-header-border-color=$panel-header-border-color]\r | |
40 | * The border-color of the Header\r | |
41 | *\r | |
42 | * @param {number} [$ui-header-border-width=$panel-header-border-width]\r | |
43 | * The border-width of the Header\r | |
44 | *\r | |
45 | * @param {string} [$ui-header-border-style=$panel-header-border-style]\r | |
46 | * The border-style of the Header\r | |
47 | *\r | |
48 | * @param {color} [$ui-header-background-color=$panel-header-background-color]\r | |
49 | * The background-color of the Header\r | |
50 | *\r | |
51 | * @param {string/list} [$ui-header-background-gradient=$panel-header-background-gradient]\r | |
52 | * The background-gradient of the Header. Can be either the name of a predefined gradient\r | |
53 | * or a list of color stops. Used as the `$type` parameter for {@link Global_CSS#background-gradient}.\r | |
54 | *\r | |
55 | * @param {color} [$ui-header-inner-border-color=$panel-header-inner-border-color]\r | |
56 | * The inner border-color of the Header\r | |
57 | *\r | |
58 | * @param {number} [$ui-header-inner-border-width=$panel-header-inner-border-width]\r | |
59 | * The inner border-width of the Header\r | |
60 | *\r | |
61 | * @param {number/list} [$ui-header-text-padding=$panel-header-text-padding]\r | |
62 | * The padding of the Header's text element\r | |
63 | *\r | |
64 | * @param {number/list} [$ui-header-text-margin=$panel-header-text-margin]\r | |
65 | * The margin of the Header's text element\r | |
66 | *\r | |
67 | * @param {string} [$ui-header-text-transform=$panel-header-text-transform]\r | |
68 | * The text-transform of the Header\r | |
69 | *\r | |
70 | * @param {number/list} [$ui-header-padding=$panel-header-padding]\r | |
71 | * The padding of the Header\r | |
72 | *\r | |
73 | * @param {number} [$ui-header-icon-width=$panel-header-icon-width]\r | |
74 | * The width of the Header icon\r | |
75 | *\r | |
76 | * @param {number} [$ui-header-icon-height=$panel-header-icon-height]\r | |
77 | * The height of the Header icon\r | |
78 | *\r | |
79 | * @param {number} [$ui-header-icon-spacing=$panel-header-icon-spacing]\r | |
80 | * The space between the Header icon and text\r | |
81 | *\r | |
82 | * @param {list} [$ui-header-icon-background-position=$panel-header-icon-background-position]\r | |
83 | * The background-position of the Header icon\r | |
84 | *\r | |
85 | * @param {color} [$ui-header-glyph-color=$panel-header-glyph-color]\r | |
86 | * The color of the Header glyph icon\r | |
87 | *\r | |
88 | * @param {number} [$ui-header-glyph-opacity=$panel-header-glyph-opacity]\r | |
89 | * The opacity of the Header glyph icon\r | |
90 | *\r | |
91 | * @param {number} [$ui-header-noborder-adjust=$panel-header-noborder-adjust]\r | |
92 | * True to adjust the padding of borderless panel headers so that their height is the same\r | |
93 | * as the height of bordered panels. This is helpful when borderless and bordered panels\r | |
94 | * are used side-by-side, as it maintains a consistent vertical alignment.\r | |
95 | *\r | |
96 | * @param {number} [$ui-tool-spacing=$panel-tool-spacing]\r | |
97 | * The space between the Panel {@link Ext.panel.Tool Tools}\r | |
98 | *\r | |
99 | * @param {string} [$ui-tool-background-image=$panel-tool-background-image]\r | |
100 | * The background sprite to use for Panel {@link Ext.panel.Tool Tools}\r | |
101 | *\r | |
102 | * @param {color} [$ui-tool-glyph-color=$tool-glyph-color]\r | |
103 | * The color to use for tool icons when {@link Global_CSS#$enable-font-icons} is `true`.\r | |
104 | *\r | |
105 | * @param {color} [$ui-tool-focus-outline-color=$panel-tool-focus-outline-color]\r | |
106 | * The color of the outline around Panel {@link Ext.panel.Tool Tools} when focused\r | |
107 | *\r | |
108 | * @param {string} [$ui-tool-focus-outline-style=$panel-tool-focus-outline-style]\r | |
109 | * The outline-style of Panel {@link Ext.panel.Tool Tools} when focused\r | |
110 | *\r | |
111 | * @param {number} [$ui-tool-focus-outline-width=$panel-tool-focus-outline-width]\r | |
112 | * The outline-width of Panel {@link Ext.panel.Tool Tools} when focused\r | |
113 | *\r | |
114 | * @param {number} [$ui-tool-focus-outline-offset=$panel-tool-focus-outline-offset]\r | |
115 | * The outline-offset of Panel {@link Ext.panel.Tool Tools} when focused\r | |
116 | *\r | |
117 | * @param {color} [$ui-body-color=$panel-body-color]\r | |
118 | * The color of text inside the Panel body\r | |
119 | *\r | |
120 | * @param {color} [$ui-body-border-color=$panel-body-border-color]\r | |
121 | * The border-color of the Panel body\r | |
122 | *\r | |
123 | * @param {number} [$ui-body-border-width=$panel-body-border-width]\r | |
124 | * The border-width of the Panel body\r | |
125 | *\r | |
126 | * @param {string} [$ui-body-border-style=$panel-body-border-style]\r | |
127 | * The border-style of the Panel body\r | |
128 | *\r | |
129 | * @param {color} [$ui-body-background-color=$panel-body-background-color]\r | |
130 | * The background-color of the Panel body\r | |
131 | *\r | |
132 | * @param {number} [$ui-body-font-size=$panel-body-font-size]\r | |
133 | * The font-size of the Panel body\r | |
134 | *\r | |
135 | * @param {string} [$ui-body-font-weight=$panel-body-font-weight]\r | |
136 | * The font-weight of the Panel body\r | |
137 | *\r | |
138 | * @param {string} [$ui-background-stretch-top=$panel-background-stretch-top]\r | |
139 | * The direction to strech the background-gradient of top docked Headers when slicing images\r | |
140 | * for IE using Sencha Cmd\r | |
141 | *\r | |
142 | * @param {string} [$ui-background-stretch-bottom=$panel-background-stretch-bottom]\r | |
143 | * The direction to strech the background-gradient of bottom docked Headers when slicing images\r | |
144 | * for IE using Sencha Cmd\r | |
145 | *\r | |
146 | * @param {string} [$ui-background-stretch-right=$panel-background-stretch-right]\r | |
147 | * The direction to strech the background-gradient of right docked Headers when slicing images\r | |
148 | * for IE using Sencha Cmd\r | |
149 | *\r | |
150 | * @param {string} [$ui-background-stretch-left=$panel-background-stretch-left]\r | |
151 | * The direction to strech the background-gradient of left docked Headers when slicing images\r | |
152 | * for IE using Sencha Cmd\r | |
153 | *\r | |
154 | * @param {boolean} [$ui-include-border-management-rules=$panel-include-border-management-rules]\r | |
155 | * True to include neptune style border management rules.\r | |
156 | *\r | |
157 | * @param {color} [$ui-wrap-border-color=$panel-wrap-border-color]\r | |
158 | * The color to apply to the border that wraps the body and docked items in a framed\r | |
159 | * panel. The presence of the wrap border in a framed panel is controlled by the\r | |
160 | * {@link #border} config. Only applicable when `$ui-include-border-management-rules` is\r | |
161 | * `true`.\r | |
162 | *\r | |
163 | * @param {color} [$ui-wrap-border-width=$panel-wrap-border-width]\r | |
164 | * The width to apply to the border that wraps the body and docked items in a framed\r | |
165 | * panel. The presence of the wrap border in a framed panel is controlled by the\r | |
166 | * {@link #border} config. Only applicable when `$ui-include-border-management-rules` is\r | |
167 | * `true`.\r | |
168 | *\r | |
169 | * @param {boolean} [$ui-ignore-frame-padding=$panel-ignore-frame-padding]\r | |
170 | * True to ignore the frame padding. By default, the frame mixin adds extra padding when\r | |
171 | * border radius is larger than border width. This is intended to prevent the content\r | |
172 | * from colliding with the rounded corners of the frame. Set this to true to prevent\r | |
173 | * the panel frame from adding this extra padding.\r | |
174 | *\r | |
175 | * @member Ext.panel.Panel\r | |
176 | */\r | |
177 | @mixin extjs-panel-ui(\r | |
178 | $ui: null,\r | |
179 | \r | |
180 | $ui-border-color: $panel-border-color,\r | |
181 | $ui-border-radius: $panel-border-radius,\r | |
182 | $ui-border-width: $panel-border-width,\r | |
183 | $ui-padding: 0,\r | |
184 | \r | |
185 | $ui-header-color: $panel-header-color,\r | |
186 | $ui-header-font-family: $panel-header-font-family,\r | |
187 | $ui-header-font-size: $panel-header-font-size,\r | |
188 | $ui-header-font-weight: $panel-header-font-weight,\r | |
189 | $ui-header-line-height: $panel-header-line-height,\r | |
190 | $ui-header-border-color: $panel-header-border-color,\r | |
191 | $ui-header-border-width: $panel-header-border-width,\r | |
192 | $ui-header-border-style: $panel-header-border-style,\r | |
193 | $ui-header-background-color: $panel-header-background-color,\r | |
194 | $ui-header-background-gradient: $panel-header-background-gradient,\r | |
195 | $ui-header-inner-border-color: $panel-header-inner-border-color,\r | |
196 | $ui-header-inner-border-width: $panel-header-inner-border-width,\r | |
197 | $ui-header-text-padding: $panel-header-text-padding,\r | |
198 | $ui-header-text-margin: $panel-header-text-margin,\r | |
199 | $ui-header-text-transform: $panel-header-text-transform,\r | |
200 | $ui-header-padding: $panel-header-padding,\r | |
201 | $ui-header-icon-width: $panel-header-icon-width,\r | |
202 | $ui-header-icon-height: $panel-header-icon-height,\r | |
203 | $ui-header-icon-spacing: $panel-header-icon-spacing,\r | |
204 | $ui-header-icon-background-position: $panel-header-icon-background-position,\r | |
205 | $ui-header-glyph-color: $panel-header-glyph-color,\r | |
206 | $ui-header-glyph-opacity: $panel-header-glyph-opacity,\r | |
207 | $ui-header-noborder-adjust: $panel-header-noborder-adjust,\r | |
208 | \r | |
209 | $ui-tool-spacing: $panel-tool-spacing,\r | |
210 | $ui-tool-background-image: $panel-tool-background-image,\r | |
211 | $ui-tool-glyph-color: $tool-glyph-color,\r | |
212 | $ui-tool-focus-outline-color: $panel-tool-focus-outline-color,\r | |
213 | $ui-tool-focus-outline-style: $panel-tool-focus-outline-style,\r | |
214 | $ui-tool-focus-outline-width: $panel-tool-focus-outline-width,\r | |
215 | $ui-tool-focus-outline-offset: $panel-tool-focus-outline-offset,\r | |
216 | \r | |
217 | $ui-body-color: $panel-body-color,\r | |
218 | $ui-body-border-color: $panel-body-border-color,\r | |
219 | $ui-body-border-width: $panel-body-border-width,\r | |
220 | $ui-body-border-style: $panel-body-border-style,\r | |
221 | $ui-body-background-color: $panel-body-background-color,\r | |
222 | $ui-body-font-size: $panel-body-font-size,\r | |
223 | $ui-body-font-weight: $panel-body-font-weight,\r | |
224 | $ui-body-font-family: $panel-body-font-family,\r | |
225 | \r | |
226 | $ui-background-stretch-top: $panel-background-stretch-top,\r | |
227 | $ui-background-stretch-bottom: $panel-background-stretch-bottom,\r | |
228 | $ui-background-stretch-right: $panel-background-stretch-right,\r | |
229 | $ui-background-stretch-left: $panel-background-stretch-left,\r | |
230 | \r | |
231 | // See the docs above\r | |
232 | $ui-include-border-management-rules: $panel-include-border-management-rules,\r | |
233 | $ui-wrap-border-color: null,\r | |
234 | $ui-wrap-border-width: null,\r | |
235 | $ui-ignore-frame-padding: $panel-ignore-frame-padding,\r | |
236 | \r | |
237 | // deprecated - use $ui instead\r | |
238 | $ui-label: null\r | |
239 | ){\r | |
240 | @if $ui == null {\r | |
241 | @if $ui-label != null {\r | |
242 | @warn '$ui-label is deprecated. Use $ui instead';\r | |
243 | $ui: $ui-label;\r | |
244 | } @else {\r | |
245 | @warn "#{error('$ui is required')}";\r | |
246 | }\r | |
247 | }\r | |
248 | \r | |
249 | @if is-null($ui-wrap-border-color) {\r | |
250 | @if $ui == 'default-framed' {\r | |
251 | $ui-wrap-border-color: $panel-wrap-border-color;\r | |
252 | } @else {\r | |
253 | $ui-wrap-border-color: $ui-border-color;\r | |
254 | }\r | |
255 | }\r | |
256 | \r | |
257 | @if is-null($ui-wrap-border-width) {\r | |
258 | @if $ui == 'default-framed' {\r | |
259 | $ui-wrap-border-width: $panel-wrap-border-width;\r | |
260 | } @else {\r | |
261 | $ui-wrap-border-width: $ui-border-width;\r | |
262 | }\r | |
263 | }\r | |
264 | \r | |
265 | @if is-null($ui-header-inner-border-color) and not is-null($ui-header-background-color) {\r | |
266 | $ui-header-inner-border-color: lighten($ui-header-background-color, 10);\r | |
267 | }\r | |
268 | \r | |
269 | $ui-header-padding-noborder:\r | |
270 | top($ui-header-padding) + top($ui-header-border-width)\r | |
271 | right($ui-header-padding) + right($ui-header-border-width)\r | |
272 | // don't add bottom border since bottom border always gets removed by dock layout\r | |
273 | bottom($ui-header-padding)\r | |
274 | left($ui-header-padding) + left($ui-header-border-width);\r | |
275 | \r | |
276 | .#{$prefix}panel-#{$ui} {\r | |
277 | @if not is-null($ui-border-color) { border-color: $ui-border-color; }\r | |
278 | padding: $ui-padding;\r | |
279 | }\r | |
280 | \r | |
281 | // header\r | |
282 | .#{$prefix}panel-header-#{$ui} {\r | |
283 | @if not is-null($ui-header-font-size) { font-size: $ui-header-font-size; }\r | |
284 | \r | |
285 | @if $ui-header-border-width != 0 {\r | |
286 | border: $ui-header-border-width $ui-header-border-style $ui-header-border-color;\r | |
287 | }\r | |
288 | \r | |
289 | .#{$prefix}tool-img {\r | |
290 | @if $enable-font-icons {\r | |
291 | @if $ui-tool-glyph-color != $tool-glyph-color {\r | |
292 | color: $ui-tool-glyph-color;\r | |
293 | }\r | |
294 | } @else if $ui-tool-background-image != $tool-background-image {\r | |
295 | background-image: theme-background-image($ui-tool-background-image);\r | |
296 | }\r | |
297 | @if is-null($ui-header-background-gradient) {\r | |
298 | // EXTJSIV-8846: partially transparent png images do not display correctly\r | |
299 | // in winXP/IE8 when the image element has a transparent background.\r | |
300 | // to fix this, we give the element the same background-color as the header.\r | |
301 | background-color: $ui-header-background-color;\r | |
302 | }\r | |
303 | }\r | |
304 | }\r | |
305 | \r | |
306 | .#{$prefix}panel-header-#{$ui}-horizontal {\r | |
307 | padding: $ui-header-padding;\r | |
308 | \r | |
309 | @if $include-ext-tab-bar {\r | |
310 | .#{$prefix}panel-header-#{$ui}-tab-bar {\r | |
311 | margin-top: -(top($ui-header-padding));\r | |
312 | margin-bottom: -(bottom($ui-header-padding));\r | |
313 | }\r | |
314 | }\r | |
315 | }\r | |
316 | \r | |
317 | @if $ui-header-noborder-adjust {\r | |
318 | .#{$prefix}panel-header-#{$ui}-horizontal.#{$prefix}header-noborder {\r | |
319 | padding: $ui-header-padding-noborder;\r | |
320 | \r | |
321 | @if $include-ext-tab-bar {\r | |
322 | .#{$prefix}panel-header-#{$ui}-tab-bar {\r | |
323 | margin-top: -(top($ui-header-padding-noborder));\r | |
324 | margin-bottom: -(bottom($ui-header-padding-noborder));\r | |
325 | }\r | |
326 | }\r | |
327 | }\r | |
328 | }\r | |
329 | \r | |
330 | .#{$prefix}panel-header-#{$ui}-vertical {\r | |
331 | padding: rotate90($ui-header-padding);\r | |
332 | \r | |
333 | @if $include-ext-tab-bar {\r | |
334 | .#{$prefix}panel-header-#{$ui}-tab-bar {\r | |
335 | margin-right: -(top($ui-header-padding));\r | |
336 | margin-left: -(bottom($ui-header-padding));\r | |
337 | }\r | |
338 | }\r | |
339 | }\r | |
340 | \r | |
341 | @if $ui-header-noborder-adjust {\r | |
342 | .#{$prefix}panel-header-#{$ui}-vertical.#{$prefix}header-noborder {\r | |
343 | padding: rotate90($ui-header-padding-noborder);\r | |
344 | \r | |
345 | @if $include-ext-tab-bar {\r | |
346 | .#{$prefix}panel-header-#{$ui}-tab-bar {\r | |
347 | margin-right: -(top($ui-header-padding-noborder));\r | |
348 | margin-left: -(bottom($ui-header-padding-noborder));\r | |
349 | }\r | |
350 | }\r | |
351 | }\r | |
352 | }\r | |
353 | \r | |
354 | @if $include-rtl {\r | |
355 | .#{$prefix}rtl.#{$prefix}panel-header-#{$ui}-vertical {\r | |
356 | padding: rotate270($ui-header-padding);\r | |
357 | \r | |
358 | @if $include-ext-tab-bar {\r | |
359 | .#{$prefix}panel-header-#{$ui}-tab-bar {\r | |
360 | margin-left: -(top($ui-header-padding));\r | |
361 | margin-right: -(bottom($ui-header-padding));\r | |
362 | }\r | |
363 | }\r | |
364 | }\r | |
365 | \r | |
366 | @if $ui-header-noborder-adjust {\r | |
367 | .#{$prefix}rtl.#{$prefix}panel-header-#{$ui}-vertical.#{$prefix}header-noborder {\r | |
368 | padding: rotate270($ui-header-padding-noborder);\r | |
369 | \r | |
370 | @if $include-ext-tab-bar {\r | |
371 | .#{$prefix}panel-header-#{$ui}-tab-bar {\r | |
372 | margin-left: -(top($ui-header-padding-noborder));\r | |
373 | margin-right: -(bottom($ui-header-padding-noborder));\r | |
374 | }\r | |
375 | }\r | |
376 | }\r | |
377 | }\r | |
378 | }\r | |
379 | \r | |
380 | .#{$prefix}panel-header-title-#{$ui} {\r | |
381 | @if not is-null($ui-header-color) { color: $ui-header-color; }\r | |
382 | \r | |
383 | @if not is-null($ui-header-font-size) { font-size: $ui-header-font-size; }\r | |
384 | @if not is-null($ui-header-font-weight) { font-weight: $ui-header-font-weight; }\r | |
385 | @if not is-null($ui-header-font-family) { font-family: $ui-header-font-family; }\r | |
386 | @if not is-null($ui-header-line-height) { line-height: $ui-header-line-height; }\r | |
387 | \r | |
388 | @if $ui-header-text-margin != 0 {\r | |
389 | margin: $ui-header-text-margin;\r | |
390 | }\r | |
391 | \r | |
392 | > {\r | |
393 | .#{$prefix}title-text-#{$ui} {\r | |
394 | text-transform: $ui-header-text-transform;\r | |
395 | padding: $ui-header-text-padding;\r | |
396 | \r | |
397 | @if $ext-trial {\r | |
398 | &:after {\r | |
399 | font-family: ext-watermark;\r | |
400 | font-size: ($ui-header-line-height + vertical($ui-header-padding)) * 0.75;\r | |
401 | content: 'd';\r | |
402 | position: absolute;\r | |
403 | top: 0;\r | |
404 | right: 0;\r | |
405 | // since IE8 does not support opacity on pseudo elements we simulate it by\r | |
406 | // mixing the text color with the background color\r | |
407 | color: mix($ui-header-color, $ui-header-background-color, 40%);\r | |
408 | }\r | |
409 | \r | |
410 | @if $include-rtl {\r | |
411 | &.#{$prefix}rtl:after {\r | |
412 | right: auto;\r | |
413 | left: 0;\r | |
414 | }\r | |
415 | }\r | |
416 | }\r | |
417 | @if $ext-beta {\r | |
418 | &:after {\r | |
419 | font-family: ext-watermark;\r | |
420 | font-size: ($ui-header-line-height + vertical($ui-header-padding)) * 0.75;\r | |
421 | content: 'b';\r | |
422 | position: absolute;\r | |
423 | top: 0;\r | |
424 | right: 0;\r | |
425 | // since IE8 does not support opacity on pseudo elements we simulate it by\r | |
426 | // mixing the text color with the background color\r | |
427 | color: mix($ui-header-color, $ui-header-background-color, 40%);\r | |
428 | }\r | |
429 | \r | |
430 | @if $include-rtl {\r | |
431 | &.#{$prefix}rtl:after {\r | |
432 | right: auto;\r | |
433 | left: 0;\r | |
434 | }\r | |
435 | }\r | |
436 | }\r | |
437 | }\r | |
438 | \r | |
439 | .#{$prefix}title-icon-wrap-#{$ui} {\r | |
440 | &.#{$prefix}title-icon-top {\r | |
441 | height: $ui-header-icon-height + $ui-header-icon-spacing;\r | |
442 | padding-bottom: $ui-header-icon-spacing;\r | |
443 | }\r | |
444 | \r | |
445 | &.#{$prefix}title-icon-right {\r | |
446 | width: $ui-header-icon-width + $ui-header-icon-spacing;\r | |
447 | padding-left: $ui-header-icon-spacing;\r | |
448 | \r | |
449 | @if $include-rtl {\r | |
450 | &.#{$prefix}rtl {\r | |
451 | padding-left: 0;\r | |
452 | padding-right: $ui-header-icon-spacing;\r | |
453 | }\r | |
454 | }\r | |
455 | }\r | |
456 | \r | |
457 | &.#{$prefix}title-icon-bottom {\r | |
458 | height: $ui-header-icon-height + $ui-header-icon-spacing;\r | |
459 | padding-top: $ui-header-icon-spacing;\r | |
460 | }\r | |
461 | \r | |
462 | &.#{$prefix}title-icon-left {\r | |
463 | width: $ui-header-icon-width + $ui-header-icon-spacing;\r | |
464 | padding-right: $ui-header-icon-spacing;\r | |
465 | \r | |
466 | @if $include-rtl {\r | |
467 | &.#{$prefix}rtl {\r | |
468 | padding-right: 0;\r | |
469 | padding-left: $ui-header-icon-spacing;\r | |
470 | }\r | |
471 | }\r | |
472 | }\r | |
473 | \r | |
474 | > .#{$prefix}title-icon-#{$ui} {\r | |
475 | width: $ui-header-icon-width;\r | |
476 | height: $ui-header-icon-height;\r | |
477 | font-size: $ui-header-icon-height;\r | |
478 | color: $ui-header-glyph-color;\r | |
479 | background-position: $ui-header-icon-background-position;\r | |
480 | \r | |
481 | @if $ui-header-glyph-opacity != 1 {\r | |
482 | // do not use the opacity mixin because we do not want IE's filter version of\r | |
483 | // opacity to be included. We emulate the opacity setting in IE8m by mixing\r | |
484 | // the icon color into the background color. (see below)\r | |
485 | opacity: $ui-header-glyph-opacity;\r | |
486 | }\r | |
487 | // In IE8 and below when a glyph contains partially transparent pixels, we\r | |
488 | // can't apply an opacity filter to the glyph element, because IE8m will render\r | |
489 | // the partially transparent pixels of the glyph as black. To work around this,\r | |
490 | // we emulate the approximate color that the glyph would have if it had opacity\r | |
491 | // applied by mixing the glyph color with the header's background-color.\r | |
492 | @if $include-ie {\r | |
493 | .#{$prefix}ie8 & {\r | |
494 | color: mix($ui-header-glyph-color, $ui-header-background-color, $ui-header-glyph-opacity * 100);\r | |
495 | }\r | |
496 | }\r | |
497 | }\r | |
498 | }\r | |
499 | }\r | |
500 | }\r | |
501 | \r | |
502 | // body\r | |
503 | .#{$prefix}panel-body-#{$ui} {\r | |
504 | @if not is-null($ui-body-background-color) { background: $ui-body-background-color; }\r | |
505 | @if not is-null($ui-body-border-color) { border-color: $ui-body-border-color; }\r | |
506 | @if not is-null($ui-body-color) { color: $ui-body-color; }\r | |
507 | @if not is-null($ui-body-font-size) { font-size: $ui-body-font-size; }\r | |
508 | @if not is-null($ui-body-font-weight) { font-weight: $ui-body-font-weight; }\r | |
509 | @if not is-null($ui-body-font-family) { font-family: $ui-body-font-family; }\r | |
510 | \r | |
511 | @if not is-null($ui-body-border-width) {\r | |
512 | border-width: $ui-body-border-width;\r | |
513 | @if not is-null($ui-body-border-style) { border-style: $ui-body-border-style; }\r | |
514 | }\r | |
515 | }\r | |
516 | \r | |
517 | @if not is-null($ui-border-radius) and $ui-border-radius != 0 {\r | |
518 | @include x-frame(\r | |
519 | $cls: 'panel',\r | |
520 | $ui: '#{$ui}',\r | |
521 | $border-radius: $ui-border-radius,\r | |
522 | $border-width: $ui-border-width,\r | |
523 | $padding: $ui-padding,\r | |
524 | $background-color: $ui-body-background-color,\r | |
525 | $ignore-frame-padding: $ui-ignore-frame-padding\r | |
526 | );\r | |
527 | \r | |
528 | @include x-frame(\r | |
529 | $cls: 'panel-header',\r | |
530 | $ui: '#{$ui}-top',\r | |
531 | $border-radius: top($ui-border-radius) right($ui-border-radius) 0 0,\r | |
532 | $border-width: top($ui-header-border-width) right($ui-header-border-width) 0 left($ui-header-border-width),\r | |
533 | $padding: $ui-header-padding,\r | |
534 | $background-color: $ui-header-background-color,\r | |
535 | $background-gradient: $ui-header-background-gradient,\r | |
536 | $background-stretch: $ui-background-stretch-top\r | |
537 | );\r | |
538 | \r | |
539 | @include x-frame(\r | |
540 | $cls: 'panel-header',\r | |
541 | $ui: '#{$ui}-right',\r | |
542 | $border-radius: 0 right($ui-border-radius) bottom($ui-border-radius) 0,\r | |
543 | $border-width: top($ui-header-border-width) right($ui-header-border-width) bottom($ui-header-border-width) 0,\r | |
544 | $padding: rotate90($ui-header-padding),\r | |
545 | $background-color: $ui-header-background-color,\r | |
546 | $background-gradient: $ui-header-background-gradient,\r | |
547 | $background-direction: right,\r | |
548 | $include-frame-rtl: $include-rtl,\r | |
549 | $background-stretch: $ui-background-stretch-right\r | |
550 | );\r | |
551 | \r | |
552 | @include x-frame(\r | |
553 | $cls: 'panel-header',\r | |
554 | $ui: '#{$ui}-bottom',\r | |
555 | $border-radius: 0 0 bottom($ui-border-radius) left($ui-border-radius),\r | |
556 | $border-width: 0 right($ui-header-border-width) bottom($ui-header-border-width) left($ui-header-border-width),\r | |
557 | $padding: $ui-header-padding,\r | |
558 | $background-color: $ui-header-background-color,\r | |
559 | $background-gradient: $ui-header-background-gradient,\r | |
560 | $background-stretch: $ui-background-stretch-bottom\r | |
561 | );\r | |
562 | \r | |
563 | @include x-frame(\r | |
564 | $cls: 'panel-header',\r | |
565 | $ui: '#{$ui}-left',\r | |
566 | $border-radius: top($ui-border-radius) 0 0 left($ui-border-radius),\r | |
567 | $border-width: top($ui-header-border-width) 0 bottom($ui-header-border-width) left($ui-header-border-width),\r | |
568 | $padding: rotate90($ui-header-padding),\r | |
569 | $background-color: $ui-header-background-color,\r | |
570 | $background-gradient: $ui-header-background-gradient,\r | |
571 | $background-direction: right,\r | |
572 | $include-frame-rtl: $include-rtl,\r | |
573 | $background-stretch: $ui-background-stretch-left\r | |
574 | );\r | |
575 | \r | |
576 | @include x-frame(\r | |
577 | $cls: 'panel-header',\r | |
578 | $ui: '#{$ui}-collapsed-top',\r | |
579 | $border-radius: top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius),\r | |
580 | $border-width: $ui-header-border-width,\r | |
581 | $padding: $ui-header-padding,\r | |
582 | $background-color: $ui-header-background-color,\r | |
583 | $background-gradient: $ui-header-background-gradient,\r | |
584 | $background-stretch: $ui-background-stretch-top\r | |
585 | );\r | |
586 | \r | |
587 | @include x-frame(\r | |
588 | $cls: 'panel-header',\r | |
589 | $ui: '#{$ui}-collapsed-right',\r | |
590 | $border-radius: top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius),\r | |
591 | $border-width: $ui-header-border-width,\r | |
592 | $padding: rotate90($ui-header-padding),\r | |
593 | $background-color: $ui-header-background-color,\r | |
594 | $background-gradient: $ui-header-background-gradient,\r | |
595 | $background-direction: right,\r | |
596 | $include-frame-rtl: $include-rtl,\r | |
597 | $background-stretch: $ui-background-stretch-right\r | |
598 | );\r | |
599 | \r | |
600 | @include x-frame(\r | |
601 | $cls: 'panel-header',\r | |
602 | $ui: '#{$ui}-collapsed-bottom',\r | |
603 | $border-radius: top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius),\r | |
604 | $border-width: $ui-header-border-width,\r | |
605 | $padding: $ui-header-padding,\r | |
606 | $background-color: $ui-header-background-color,\r | |
607 | $background-gradient: $ui-header-background-gradient,\r | |
608 | $background-stretch: $ui-background-stretch-bottom\r | |
609 | );\r | |
610 | \r | |
611 | @include x-frame(\r | |
612 | $cls: 'panel-header',\r | |
613 | $ui: '#{$ui}-collapsed-left',\r | |
614 | $border-radius: top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius),\r | |
615 | $border-width: $ui-header-border-width,\r | |
616 | $padding: rotate90($ui-header-padding),\r | |
617 | $background-color: $ui-header-background-color,\r | |
618 | $background-gradient: $ui-header-background-gradient,\r | |
619 | $background-direction: right,\r | |
620 | $include-frame-rtl: $include-rtl,\r | |
621 | $background-stretch: $ui-background-stretch-left\r | |
622 | );\r | |
623 | \r | |
624 | // !important is needed in the following rules to override dock layout's border\r | |
625 | // management rules. the x-panel ancestor selector is used to increase the\r | |
626 | // specificity over the ".#{$prefix}nbr .#{$prefix}#{$cls-ui}" rule produced by\r | |
627 | // x-frame\r | |
628 | .#{$prefix}panel {\r | |
629 | .#{$prefix}panel-header-#{$ui}-top {\r | |
630 | border-bottom-width: bottom($ui-header-border-width) !important;\r | |
631 | }\r | |
632 | \r | |
633 | .#{$prefix}panel-header-#{$ui}-right {\r | |
634 | border-left-width: bottom($ui-header-border-width) !important;\r | |
635 | }\r | |
636 | \r | |
637 | .#{$prefix}panel-header-#{$ui}-bottom {\r | |
638 | border-top-width: bottom($ui-header-border-width) !important;\r | |
639 | }\r | |
640 | \r | |
641 | .#{$prefix}panel-header-#{$ui}-left {\r | |
642 | border-right-width: bottom($ui-header-border-width) !important;\r | |
643 | }\r | |
644 | }\r | |
645 | @if $include-slicer-border-radius {\r | |
646 | .#{$prefix}nbr {\r | |
647 | .#{$prefix}panel-header-#{$ui}-collapsed-top {\r | |
648 | border-bottom-width: 0 !important;\r | |
649 | }\r | |
650 | \r | |
651 | .#{$prefix}panel-header-#{$ui}-collapsed-right {\r | |
652 | border-left-width: 0 !important;\r | |
653 | }\r | |
654 | \r | |
655 | .#{$prefix}panel-header-#{$ui}-collapsed-bottom {\r | |
656 | border-top-width: 0 !important;\r | |
657 | }\r | |
658 | \r | |
659 | .#{$prefix}panel-header-#{$ui}-collapsed-left {\r | |
660 | border-right-width: 0 !important;\r | |
661 | }\r | |
662 | }\r | |
663 | }\r | |
664 | \r | |
665 | } @else {\r | |
666 | @if not is-null($ui-header-background-color) {\r | |
667 | .#{$prefix}panel-header-#{$ui} {\r | |
668 | @include background-gradient($ui-header-background-color, $ui-header-background-gradient);\r | |
669 | }\r | |
670 | \r | |
671 | .#{$prefix}panel-header-#{$ui}-vertical {\r | |
672 | @include background-gradient($ui-header-background-color, $ui-header-background-gradient, right);\r | |
673 | }\r | |
674 | \r | |
675 | @if $include-rtl {\r | |
676 | .#{$prefix}rtl.#{$prefix}panel-header-#{$ui}-vertical {\r | |
677 | @include background-gradient($ui-header-background-color, $ui-header-background-gradient, left);\r | |
678 | }\r | |
679 | }\r | |
680 | }\r | |
681 | \r | |
682 | // header background images\r | |
683 | $panel-header-ui: 'panel-header-#{$ui}';\r | |
684 | $panel-header-path: 'panel-header/panel-header-#{$ui}';\r | |
685 | \r | |
686 | @if not is-null($ui-header-background-color) and not is-null($ui-header-background-gradient) {\r | |
687 | @if $include-slicer-gradient {\r | |
688 | .#{$prefix}nlg {\r | |
689 | .#{$prefix}#{$panel-header-ui}-top {\r | |
690 | background: slicer-background-image($panel-header-ui + '-top',\r | |
691 | '#{$panel-header-path}-top-bg');\r | |
692 | }\r | |
693 | \r | |
694 | .#{$prefix}#{$panel-header-ui}-bottom {\r | |
695 | background: slicer-background-image($panel-header-ui + '-bottom',\r | |
696 | '#{$panel-header-path}-bottom-bg') bottom left;\r | |
697 | }\r | |
698 | \r | |
699 | .#{$prefix}#{$panel-header-ui}-left {\r | |
700 | background: slicer-background-image($panel-header-ui + '-left',\r | |
701 | '#{$panel-header-path}-left-bg') top left;\r | |
702 | }\r | |
703 | \r | |
704 | .#{$prefix}#{$panel-header-ui}-right {\r | |
705 | background: slicer-background-image($panel-header-ui + '-right',\r | |
706 | '#{$panel-header-path}-right-bg') top right;\r | |
707 | }\r | |
708 | \r | |
709 | @if $include-rtl {\r | |
710 | .#{$prefix}rtl {\r | |
711 | &.#{$prefix}#{$panel-header-ui}-left {\r | |
712 | background: slicer-background-image-rtl($panel-header-ui + '-left',\r | |
713 | '#{$panel-header-path}-left-bg-rtl') top right;\r | |
714 | }\r | |
715 | &.#{$prefix}#{$panel-header-ui}-right {\r | |
716 | background: slicer-background-image-rtl($panel-header-ui + '-right',\r | |
717 | '#{$panel-header-path}-right-bg-rtl') top left;\r | |
718 | }\r | |
719 | }\r | |
720 | }\r | |
721 | }\r | |
722 | }\r | |
723 | }\r | |
724 | \r | |
725 | .#{$prefix}panel {\r | |
726 | // !important is needed here to override dock layout's border management\r | |
727 | // rules. the x-panel ancestor selector is used to increase the specificity\r | |
728 | // over the ".#{$prefix}nbr .#{$prefix}#{$cls-ui}" rule produced by x-frame\r | |
729 | .#{$prefix}panel-header-#{$ui}-collapsed-border-top {\r | |
730 | border-bottom-width: $ui-header-border-width !important;\r | |
731 | }\r | |
732 | \r | |
733 | .#{$prefix}panel-header-#{$ui}-collapsed-border-right {\r | |
734 | border-left-width: $ui-header-border-width !important;\r | |
735 | }\r | |
736 | \r | |
737 | .#{$prefix}panel-header-#{$ui}-collapsed-border-bottom {\r | |
738 | border-top-width: $ui-header-border-width !important;\r | |
739 | }\r | |
740 | \r | |
741 | .#{$prefix}panel-header-#{$ui}-collapsed-border-left {\r | |
742 | border-right-width: $ui-header-border-width !important;\r | |
743 | }\r | |
744 | }\r | |
745 | \r | |
746 | $stretch: slicer-background-stretch($panel-header-ui + '-top', $ui-background-stretch-top);\r | |
747 | $stretch: slicer-background-stretch($panel-header-ui + '-right', $ui-background-stretch-right);\r | |
748 | $stretch: slicer-background-stretch($panel-header-ui + '-bottom', $ui-background-stretch-bottom);\r | |
749 | $stretch: slicer-background-stretch($panel-header-ui + '-left', $ui-background-stretch-left);\r | |
750 | \r | |
751 | @include x-slicer($panel-header-ui + '-top');\r | |
752 | @include x-slicer($panel-header-ui + '-bottom');\r | |
753 | @include x-slicer($panel-header-ui + '-left');\r | |
754 | @include x-slicer($panel-header-ui + '-right');\r | |
755 | }\r | |
756 | \r | |
757 | @if $ui-header-inner-border-width != 0 {\r | |
758 | .#{$prefix}panel-header-#{$ui}-top {\r | |
759 | @include inner-border($ui-header-inner-border-width, $ui-header-inner-border-color);\r | |
760 | }\r | |
761 | \r | |
762 | .#{$prefix}panel-header-#{$ui}-right {\r | |
763 | @include inner-border(rotate90($ui-header-inner-border-width), $ui-header-inner-border-color);\r | |
764 | }\r | |
765 | \r | |
766 | .#{$prefix}panel-header-#{$ui}-bottom {\r | |
767 | @include inner-border(rotate180($ui-header-inner-border-width), $ui-header-inner-border-color);\r | |
768 | }\r | |
769 | \r | |
770 | .#{$prefix}panel-header-#{$ui}-left {\r | |
771 | @include inner-border(rotate270($ui-header-inner-border-width), $ui-header-inner-border-color);\r | |
772 | }\r | |
773 | }\r | |
774 | \r | |
775 | $ui-tool-margin: 0 0 0 $ui-tool-spacing;\r | |
776 | .#{$prefix}panel-header-#{$ui}-horizontal {\r | |
777 | .#{$prefix}tool-after-title {\r | |
778 | margin: $ui-tool-margin;\r | |
779 | }\r | |
780 | \r | |
781 | @if $include-rtl {\r | |
782 | .#{$prefix}rtl.#{$prefix}tool-after-title {\r | |
783 | margin: rtl($ui-tool-margin);\r | |
784 | }\r | |
785 | }\r | |
786 | \r | |
787 | .#{$prefix}tool-before-title {\r | |
788 | margin: rtl($ui-tool-margin);\r | |
789 | }\r | |
790 | \r | |
791 | @if $include-rtl {\r | |
792 | .#{$prefix}rtl.#{$prefix}tool-before-title {\r | |
793 | margin: $ui-tool-margin;\r | |
794 | }\r | |
795 | }\r | |
796 | }\r | |
797 | \r | |
798 | .#{$prefix}panel-header-#{$ui}-vertical {\r | |
799 | .#{$prefix}tool-after-title {\r | |
800 | margin: rotate90($ui-tool-margin);\r | |
801 | }\r | |
802 | \r | |
803 | @if $include-rtl {\r | |
804 | .#{$prefix}rtl.#{$prefix}tool-after-title {\r | |
805 | margin: rotate270(rtl($ui-tool-margin));\r | |
806 | }\r | |
807 | }\r | |
808 | \r | |
809 | .#{$prefix}tool-before-title {\r | |
810 | margin: rotate90(rtl($ui-tool-margin));\r | |
811 | }\r | |
812 | \r | |
813 | @if $include-rtl {\r | |
814 | .#{$prefix}rtl.#{$prefix}tool-before-title {\r | |
815 | margin: rotate270($ui-tool-margin);\r | |
816 | }\r | |
817 | }\r | |
818 | }\r | |
819 | \r | |
820 | .#{$prefix}panel-header-#{$ui} {\r | |
821 | .#{$prefix}tool-focus {\r | |
822 | @include css-outline(\r | |
823 | $width: $ui-tool-focus-outline-width,\r | |
824 | $style: $ui-tool-focus-outline-style,\r | |
825 | $color: $ui-tool-focus-outline-color,\r | |
826 | $offset: $ui-tool-focus-outline-offset\r | |
827 | );\r | |
828 | }\r | |
829 | }\r | |
830 | \r | |
831 | @if $include-rtl {\r | |
832 | .#{$prefix}rtl {\r | |
833 | &.#{$prefix}panel-header-#{$ui}-collapsed-border-right {\r | |
834 | border-right-width: $ui-header-border-width !important;\r | |
835 | }\r | |
836 | &.#{$prefix}panel-header-#{$ui}-collapsed-border-left {\r | |
837 | border-left-width: $ui-header-border-width !important;\r | |
838 | }\r | |
839 | }\r | |
840 | }\r | |
841 | \r | |
842 | // Panel resizing.\r | |
843 | // If there's a border that's wider than the specified threshold (Sencha default is 2) then\r | |
844 | // embed the handles in the borders using -ve position and make resizable windows show overflow.\r | |
845 | // The dock layout should ensure that all constituent elements fit within the element.\r | |
846 | // The only exception is during animated resizing. Overflow inline style is set hidden during animation (AbstractComponent.animate)\r | |
847 | .#{$prefix}panel-#{$ui}-resizable {\r | |
848 | \r | |
849 | // Panel resize handles are invisible\r | |
850 | .#{$prefix}panel-handle {\r | |
851 | @include opacity(0);\r | |
852 | }\r | |
853 | \r | |
854 | // If there's a border width, embed the handles in that border\r | |
855 | @if $ui-border-width > $border-width-threshold {\r | |
856 | // Resizable Panel element overflow must be visible for embedded handles to accept mouseovers.\r | |
857 | overflow: visible;\r | |
858 | \r | |
859 | .#{$prefix}panel-handle-north-br {\r | |
860 | top: -($ui-border-width);\r | |
861 | }\r | |
862 | .#{$prefix}panel-handle-south-br {\r | |
863 | bottom: -($ui-border-width);\r | |
864 | }\r | |
865 | .#{$prefix}panel-handle-east-br {\r | |
866 | right: -($ui-border-width);\r | |
867 | }\r | |
868 | .#{$prefix}panel-handle-west-br {\r | |
869 | left: -($ui-border-width);\r | |
870 | }\r | |
871 | .#{$prefix}panel-handle-northwest-br {\r | |
872 | left: -($ui-border-width);\r | |
873 | top: -($ui-border-width);\r | |
874 | }\r | |
875 | .#{$prefix}panel-handle-northeast-br {\r | |
876 | right: -($ui-border-width);\r | |
877 | top: -($ui-border-width);\r | |
878 | }\r | |
879 | .#{$prefix}panel-handle-southeast-br {\r | |
880 | right: -($ui-border-width);\r | |
881 | bottom: -($ui-border-width);\r | |
882 | }\r | |
883 | .#{$prefix}panel-handle-southwest-br {\r | |
884 | left: -($ui-border-width);\r | |
885 | bottom: -($ui-border-width);\r | |
886 | }\r | |
887 | }\r | |
888 | }\r | |
889 | \r | |
890 | @if $ui-include-border-management-rules {\r | |
891 | @include border-management(\r | |
892 | $parent-cls: panel-#{$ui},\r | |
893 | $border-width: $ui-wrap-border-width,\r | |
894 | $border-color: $ui-wrap-border-color\r | |
895 | );\r | |
896 | }\r | |
897 | }\r | |
898 | \r | |
899 | .#{$prefix}panel-ghost {\r | |
900 | @include opacity($panel-ghost-opacity);\r | |
901 | }\r | |
902 | \r | |
903 | @if $include-panel-default-ui {\r | |
904 | @include extjs-panel-ui(\r | |
905 | $ui: 'default'\r | |
906 | );\r | |
907 | }\r | |
908 | \r | |
909 | @if $include-panel-default-framed-ui {\r | |
910 | @include extjs-panel-ui(\r | |
911 | $ui: 'default-framed',\r | |
912 | \r | |
913 | $ui-border-color: $panel-frame-border-color,\r | |
914 | $ui-border-width: $panel-frame-border-width,\r | |
915 | $ui-border-radius: $panel-frame-border-radius,\r | |
916 | $ui-padding: $panel-frame-padding,\r | |
917 | \r | |
918 | $ui-header-border-color: $panel-frame-border-color,\r | |
919 | $ui-header-border-width: $panel-frame-header-border-width,\r | |
920 | $ui-header-inner-border-color: $panel-frame-header-inner-border-color,\r | |
921 | $ui-header-inner-border-width: $panel-frame-header-inner-border-width,\r | |
922 | $ui-header-padding: $panel-frame-header-padding,\r | |
923 | \r | |
924 | $ui-body-border-width: $panel-frame-body-border-width,\r | |
925 | $ui-body-background-color: $panel-frame-background-color\r | |
926 | );\r | |
927 | }\r |