source: branches/testFACT++branch/dim/WebDID/ext-4.1.1a/resources/themes/stylesheets/neptune/default/widgets/_button.scss

Last change on this file was 14939, checked in by tbretz, 12 years ago
Added WebDID from v20r5
File size: 29.4 KB
Line 
1/**
2 * @class Ext.Button
3 * Used to create the base structure of an Ext.Button
4 */
5@mixin extjs-button {
6 // default button pictos icons
7 @if $include-default-button-icons {
8 @include extjs-button-icon('forbidden', 'd');
9 @include extjs-button-icon('people', 'g');
10 @include extjs-button-icon('information', 'i');
11 @include extjs-button-icon('link', 'j');
12 @include extjs-button-icon('love', 'k');
13 @include extjs-button-icon('list', 'l', $top: 1px);
14 @include extjs-button-icon('music', 'm');
15// @include extjs-button-icon('folder', 'o');
16 @include extjs-button-icon('edit2', 'p');
17 @include extjs-button-icon('chat2', 'q');
18 @include extjs-button-icon('retweet', 'r');
19 @include extjs-button-icon('search', 's');
20 @include extjs-button-icon('time', 't');
21 @include extjs-button-icon('photo', 'v');
22 @include extjs-button-icon('chat', 'w');
23 @include extjs-button-icon('settings', 'x');
24 @include extjs-button-icon('settings2', 'y');
25 @include extjs-button-icon('bookmark', 'z');
26 @include extjs-button-icon('link2', 'A');
27 @include extjs-button-icon('tweet', 'B');
28 @include extjs-button-icon('cloud', 'C');
29 @include extjs-button-icon('close', 'D');
30// @include extjs-button-icon('file', 'F');
31 @include extjs-button-icon('home', 'H');
32 @include extjs-button-icon('key', 'K');
33 @include extjs-button-icon('mail', 'M');
34 @include extjs-button-icon('paste', 'N');
35 @include extjs-button-icon('power', 'Q');
36 @include extjs-button-icon('open', 'R');
37 @include extjs-button-icon('star', 'S');
38 @include extjs-button-icon('person', 'U');
39 @include extjs-button-icon('video', 'V');
40 @include extjs-button-icon('edit', 'W');
41 @include extjs-button-icon('charts', 'Z');
42 @include extjs-button-icon('expand', '`');
43 @include extjs-button-icon('refresh', '1');
44 @include extjs-button-icon('tick', '2');
45 @include extjs-button-icon('tick2', '3');
46 @include extjs-button-icon('play', '4');
47 @include extjs-button-icon('pause', '5');
48 @include extjs-button-icon('stop', '6');
49 @include extjs-button-icon('forward', '7');
50 @include extjs-button-icon('rewind', '8');
51 @include extjs-button-icon('play2', '9');
52 @include extjs-button-icon('refresh2', '0');
53 @include extjs-button-icon('minus', '-');
54 @include extjs-button-icon('power', '-');
55 @include extjs-button-icon('left', '[');
56 @include extjs-button-icon('right', ']');
57 @include extjs-button-icon('date', '\\');
58 @include extjs-button-icon('shuffle', ';');
59 @include extjs-button-icon('wifi', '\'');
60 @include extjs-button-icon('speed', ',');
61 @include extjs-button-icon('more', '.');
62 @include extjs-button-icon('print', '/');
63 @include extjs-button-icon('warning', '!');
64 @include extjs-button-icon('location', '@');
65 @include extjs-button-icon('trash', '#');
66 @include extjs-button-icon('cart', '$');
67 @include extjs-button-icon('flag', '^');
68 @include extjs-button-icon('add', '&');
69 @include extjs-button-icon('close', '*');
70 @include extjs-button-icon('lock', '(');
71 @include extjs-button-icon('unlock', ')');
72 @include extjs-button-icon('remove', '_');
73 @include extjs-button-icon('add2', '+');
74 @include extjs-button-icon('up', '{');
75 @include extjs-button-icon('down', '}');
76 @include extjs-button-icon('bell', ':');
77 @include extjs-button-icon('quote', '"');
78 @include extjs-button-icon('novolume', '<');
79 @include extjs-button-icon('volume', '>');
80 @include extjs-button-icon('question', '?');
81 }
82
83 .#{$prefix}btn {
84 display: inline-block;
85 // @tag ie6hack
86 *display: inline;
87 position: relative;
88 vertical-align: middle;
89 background-repeat: no-repeat;
90 @extend .mr-white-glove;
91
92 // icons
93 // @todo hacking
94 &.small {
95 .x-btn-icon:after {
96 font-size: 16px;
97 }
98 }
99
100 &.medium {
101 .x-btn-icon:before,
102 .x-btn-icon:after {
103 font-size: 24px;
104 }
105 }
106
107 &.large {
108 .x-btn-icon:before,
109 .x-btn-icon:after {
110 font-size: 30px;
111 }
112 }
113
114 em {
115 background-repeat: no-repeat;
116
117 // Styles for an anchor button.
118 a {
119 text-decoration: none;
120 display: inline-block;
121 color: inherit;
122 }
123 }
124
125 button {
126 margin: 0;
127 padding: 0;
128 border: 0;
129 width: auto;
130 background: none;
131 @extend .outline-none;
132 overflow: hidden;
133 vertical-align: bottom;
134 -webkit-appearance: none;
135
136 &::-moz-focus-inner {
137 border: 0;
138 padding: 0;
139 }
140 }
141
142 .#{$prefix}btn-inner {
143 display: block;
144 white-space: nowrap;
145 background-color: transparent;
146 background-repeat: no-repeat;
147 background-position: left center;
148 @include transition(color);
149 }
150
151 .#{$prefix}btn-left .#{$prefix}btn-inner {
152 text-align: left;
153 }
154
155 .#{$prefix}btn-center .#{$prefix}btn-inner {
156 text-align: center;
157 }
158
159 .#{$prefix}btn-right .#{$prefix}btn-inner {
160 text-align: right;
161 }
162 }
163
164 .#{$prefix}btn-disabled {
165 @include opacity(1);
166 }
167
168 .#{$prefix}btn-disabled span {
169 @include opacity(.5);
170
171 .#{$prefix}ie6 &,
172 .#{$prefix}ie7 & {
173 filter: none;
174 }
175 }
176
177 //remove the opacity rule of IE8
178 .#{$prefix}ie7 .#{$prefix}btn-disabled,
179 .#{$prefix}ie8 .#{$prefix}btn-disabled {
180 filter: none;
181 }
182
183 .#{$prefix}ie6 .#{$prefix}btn-disabled,
184 .#{$prefix}ie7 .#{$prefix}btn-disabled,
185 .#{$prefix}ie8 .#{$prefix}btn-disabled {
186 .#{$prefix}btn-icon {
187 @include opacity(.6);
188 }
189 }
190
191 @if $include-ie {
192 * html .#{$prefix}ie {
193 .#{$prefix}btn button {
194 width: 1px;
195 }
196 }
197
198 .#{$prefix}ie .#{$prefix}btn button {
199 overflow-x: visible; /*prevents extra horiz space in IE*/
200 vertical-align: baseline; /*IE doesn't like bottom*/
201 }
202
203 .#{$prefix}strict .#{$prefix}ie6,
204 .#{$prefix}strict .#{$prefix}ie7 {
205 .#{$prefix}btn .#{$prefix}frame-mc {
206 height: 100%;
207 }
208 }
209 }
210
211 @if not $supports-border-radius or $compile-all {
212 .#{$prefix}nbr {
213 .#{$prefix}btn {
214 .#{$prefix}frame-mc {
215 vertical-align: middle;
216 white-space: nowrap;
217 text-align: center;
218 cursor: pointer;
219 }
220 }
221 }
222 }
223
224 // Icon alignment
225 .#{$prefix}btn-icon-text-left .#{$prefix}btn-icon { background-position: left center; }
226 .#{$prefix}btn-icon-text-right .#{$prefix}btn-icon { background-position: right center; }
227 .#{$prefix}btn-icon-text-top .#{$prefix}btn-icon { background-position: center top; }
228 .#{$prefix}btn-icon-text-bottom .#{$prefix}btn-icon { background-position: center bottom; }
229
230 .#{$prefix}btn {
231 button, a {
232 position: relative;
233
234 .#{$prefix}btn-icon {
235 position: absolute;
236 background-repeat: no-repeat;
237 }
238 }
239 }
240
241 .#{$prefix}btn-arrow-right {
242 background: transparent no-repeat right 4px;
243 padding-right: $button-arrow-size;
244
245 .#{$prefix}btn-inner {
246 padding-right: 0 !important;
247 }
248 }
249
250 .x-btn-pressed {
251 .#{$prefix}btn-arrow-right {
252 background-position: right -17px;
253 }
254 }
255
256 .x-btn-menu-active {
257 .#{$prefix}btn-arrow-right {
258// background-position: right -28px;
259 }
260 }
261
262 .#{$prefix}toolbar .#{$prefix}btn-arrow-right {
263 padding-right: $button-toolbar-arrow-size;
264 }
265
266 .#{$prefix}btn-arrow-bottom {
267 background: transparent no-repeat center bottom;
268 padding-bottom: $button-arrow-size;
269 }
270
271 .#{$prefix}btn-arrow {
272 background-image: theme-background-image($theme-name, 'button/arrow.png');
273 display: block;
274 }
275
276 //split buttons
277 .#{$prefix}btn-split-right,
278 .#{$prefix}btn-over .#{$prefix}btn-split-right {
279 background: transparent no-repeat right center;
280 background-image: theme-background-image($theme-name, 'button/s-arrow.png');
281 padding-right: $button-split-size !important;
282 }
283
284 .#{$prefix}btn-split-bottom,
285 .#{$prefix}btn-over .#{$prefix}btn-split-bottom {
286 background: transparent no-repeat center bottom;
287 background-image: theme-background-image($theme-name, 'button/s-arrow-b.png');
288 padding-bottom: $button-split-size;
289 }
290
291 .#{$prefix}toolbar .#{$prefix}btn-split-right {
292 background-image: theme-background-image($theme-name, 'button/s-arrow-noline.png');
293 padding-right: $button-toolbar-split-size !important;
294 }
295
296 .#{$prefix}toolbar .#{$prefix}btn-split-bottom {
297 background-image: theme-background-image($theme-name, 'button/s-arrow-b-noline.png');
298 }
299
300 .#{$prefix}btn-split {
301 display: block;
302 }
303
304 .#{$prefix}item-disabled,
305 .#{$prefix}item-disabled * {
306 cursor: default;
307 }
308
309 .#{$prefix}cycle-fixed-width .#{$prefix}btn-inner {
310 text-align: inherit;
311 }
312
313 .#{$prefix}btn-over .#{$prefix}btn-split-right { background-image: theme-background-image($theme-name, 'button/s-arrow-o.png'); }
314 .#{$prefix}btn-over .#{$prefix}btn-split-bottom { background-image: theme-background-image($theme-name, 'button/s-arrow-bo.png'); }
315
316 .#{$prefix}btn-menu-active .#{$prefix}btn-split-right,
317 .#{$prefix}btn-pressed .#{$prefix}btn-split-right { background-image: theme-background-image($theme-name, 'button/s-arrow-p.png'); }
318 .#{$prefix}btn-menu-active .#{$prefix}btn-split-bottom,
319 .#{$prefix}btn-pressed .#{$prefix}btn-split-bottom { background-image: theme-background-image($theme-name, 'button/s-arrow-bp.png'); }
320
321 @if $include-button-uis {
322 @include extjs-button-ui( 'default-small',
323 $padding: $button-small-padding,
324 $text-padding: $button-small-text-padding,
325 $icon-size: $button-small-icon-size
326 );
327
328 @include extjs-button-ui( 'default-medium',
329 $icon-size: $button-medium-icon-size
330 );
331
332 @include extjs-button-ui( 'default-large',
333 $icon-size: $button-large-icon-size
334 );
335
336 @include extjs-button-ui( 'confirm-small',
337 $background-color: $confirm-color,
338 $icon-size: $button-small-icon-size
339 );
340
341 @include extjs-button-ui( 'confirm-medium',
342 $background-color: $confirm-color,
343 $icon-size: $button-medium-icon-size
344 );
345
346 @include extjs-button-ui( 'drastic-medium',
347 $background-color: $drastic-color,
348 $icon-size: $button-medium-icon-size
349 );
350
351 @include extjs-button-ui( 'action-medium',
352 $background-color: $base-color,
353 $icon-size: $button-medium-icon-size
354 );
355
356 @if $include-toolbar-uis {
357 @include extjs-toolbar-button-ui( 'default-toolbar-small',
358 $icon-size: $button-small-icon-size,
359 $text-padding: $button-small-text-padding
360 );
361
362 @include extjs-toolbar-button-ui( 'default-toolbar-medium',
363 $icon-size: $button-medium-icon-size
364 );
365
366 @include extjs-toolbar-button-ui( 'default-toolbar-large',
367 $icon-size: $button-large-icon-size
368 );
369 }
370 }
371
372 .#{$prefix}btn-default-toolbar-small-disabled,
373 .#{$prefix}btn-default-toolbar-medium-disabled,
374 .#{$prefix}btn-default-toolbar-large-disabled {
375 border-color: transparent;
376 background-image: none;
377 background: transparent;
378 }
379}
380
381// This may move to compat file (new theme will likely have simpler defaults)
382
383@mixin extjs-toolbar-button-ui(
384 $ui,
385 $icon-size: $button-small-icon-size,
386 $text-padding: $button-text-padding
387){
388 @include extjs-button-ui(
389 $ui,
390 $color: color-by-background($button-toolbar-background-color, 50%),
391 $border-color: $button-toolbar-border-color,
392 $border-color-over: $button-toolbar-border-color-over,
393 $border-color-pressed: $button-toolbar-border-color-pressed,
394
395 $background-color: $button-toolbar-background-color,
396 $background-color-over: $button-toolbar-background-color-over,
397 $background-color-pressed: $button-toolbar-background-color-pressed,
398 $background-gradient: $button-toolbar-background-gradient,
399 $background-gradient-over: $button-toolbar-background-gradient-over,
400 $background-gradient-pressed: $button-toolbar-background-gradient-pressed,
401
402 $font-weight: $button-toolbar-font-weight,
403 $font-family: $button-toolbar-font-family,
404 $font-size: $button-toolbar-font-size
405 );
406}
407
408@mixin extjs-button-ui(
409 $ui,
410
411 $border-radius: $button-border-radius,
412 $border-width: $button-border-width,
413
414 $padding: $button-padding,
415 $text-padding: $button-text-padding,
416
417 $background-color: $button-base-color,
418 $background-color-over: color-offset($background-color, 10%),
419 $background-color-focus: $background-color-over,
420 $background-color-pressed: color-offset($background-color, 10%, dark),
421 $background-color-disabled: $background-color,
422
423 $border-color: darken($background-color, 20%),
424 $border-color-over: $border-color,
425 $border-color-focus: $border-color,
426 $border-color-pressed: $border-color,
427 $border-color-disabled: $border-color,
428
429 $background-gradient: $button-background-gradient,
430 $background-gradient-over: $button-background-gradient-over,
431 $background-gradient-focus: $button-background-gradient-over,
432 $background-gradient-pressed: $button-background-gradient-pressed,
433 $background-gradient-disabled: $button-background-gradient,
434
435 $color: color-by-background($background-color, 60%),
436 $color-over: color-by-background($background-color-over, 70%),
437 $color-focus: $color,
438 $color-pressed: color-by-background($background-color-pressed, 80%),
439 $color-disabled: $button-color-disabled,
440
441 $font-size: $button-font-size,
442 $font-size-over: $font-size,
443 $font-size-focus: $font-size,
444 $font-size-pressed: $font-size,
445 $font-size-disabled: $font-size,
446
447 $font-weight: $button-font-weight,
448 $font-weight-over: $font-weight,
449 $font-weight-focus: $font-weight,
450 $font-weight-pressed: $font-weight,
451 $font-weight-disabled: $font-weight,
452
453 $font-family: $button-font-family,
454 $font-family-over: $font-family,
455 $font-family-focus: $font-family,
456 $font-family-pressed: $font-family,
457 $font-family-disabled: $font-family,
458
459 $icon-size: $button-small-icon-size
460) {
461 .#{$prefix}btn-#{$ui} {
462 border-color: $border-color;
463 }
464
465 .#{$prefix}btn-#{$ui} .#{$prefix}btn-inner {
466 font-size: $font-size;
467 font-weight: $font-weight;
468 font-family: $font-family;
469 color: $color;
470 background-repeat: no-repeat;
471 padding: 0 $text-padding;
472 @if $include-button-highlights {
473 @include inset-by-background($background-color);
474 }
475 }
476
477 @include x-frame('btn', $ui, $border-radius, $border-width, $padding, $background-color, $background-gradient, true);
478
479 // Icons
480 @if $include-default-button-icons {
481 .x-btn-icon:after {
482 @include background-gradient($color, matte);
483 }
484
485 @if $color-over != $color {
486 .#{$prefix}btn-#{$ui}-over {
487 .x-btn-icon:after {
488 @include background-gradient($color-over, matte);
489 }
490 }
491 }
492
493 @if $color-focus != $color {
494 .#{$prefix}btn-#{$ui}-focus {
495 .x-btn-icon:after {
496 @include background-gradient($color-focus, matte);
497 }
498 }
499 }
500
501 @if $color-pressed != $color {
502 .#{$prefix}btn-#{$ui}-menu-active,
503 .#{$prefix}btn-#{$ui}-pressed {
504 .x-btn-icon:after {
505 @include background-gradient($color-pressed, matte);
506 }
507 }
508 }
509 }
510
511 .#{$prefix}btn-#{$ui}-icon,
512 .#{$prefix}btn-#{$ui}-noicon {
513 button,
514 .#{$prefix}btn-inner {
515 height: $icon-size;
516 line-height: $icon-size;
517 }
518 }
519
520 //icons
521 .#{$prefix}btn-#{$ui}-icon {
522 button {
523 padding: 0;
524 width: $icon-size !important;
525 height: $icon-size;
526 }
527
528 .#{$prefix}btn-icon {
529 width: $icon-size;
530 height: $icon-size;
531 top: 0;
532 left: 0;
533 bottom: 0;
534 right: 0;
535 }
536 }
537
538 .#{$prefix}btn-#{$ui}-icon-text-left {
539 button {
540 height: $icon-size;
541 }
542 .#{$prefix}btn-inner {
543 height: $icon-size;
544 line-height: $icon-size;
545 padding-left: $icon-size + 4px;
546 }
547
548 .#{$prefix}btn-icon {
549 width: $icon-size;
550 height: auto;
551 top: 0;
552 left: 0;
553 bottom: 0;
554 right: auto;
555
556 .#{$prefix}ie6 &,
557 .#{$prefix}quirks & {
558 height: $icon-size;
559 }
560 }
561 }
562
563 .#{$prefix}btn-#{$ui}-icon-text-right {
564 button {
565 height: $icon-size;
566 }
567 .#{$prefix}btn-inner {
568 height: $icon-size;
569 line-height: $icon-size;
570 padding-right: $icon-size + 4px !important;
571 }
572
573 .#{$prefix}btn-icon {
574 width: $icon-size;
575 height: auto;
576 top: 0;
577 left: auto;
578 bottom: 0;
579 right: 0;
580
581 .#{$prefix}ie6 &,
582 .#{$prefix}quirks & {
583 height: $icon-size;
584 }
585 }
586 }
587
588 .#{$prefix}btn-#{$ui}-icon-text-top {
589 .#{$prefix}btn-inner {
590 padding-top: $icon-size + 4px;
591 }
592
593 .#{$prefix}btn-icon {
594 width: auto;
595 height: $icon-size;
596 top: 0;
597 left: 0;
598 bottom: auto;
599 right: 0;
600
601 .#{$prefix}ie6 &,
602 .#{$prefix}quirks .#{$prefix}ie & {
603 width: $icon-size;
604 }
605 }
606 }
607
608 .#{$prefix}btn-#{$ui}-icon-text-bottom {
609 .#{$prefix}btn-inner {
610 padding-bottom: $icon-size + 4px;
611 }
612
613 .#{$prefix}btn-icon {
614 width: auto;
615 height: $icon-size;
616 top: auto;
617 left: 0;
618 bottom: 0;
619 right: 0;
620
621 .#{$prefix}ie6 &,
622 .#{$prefix}quirks .#{$prefix}ie & {
623 width: $icon-size;
624 }
625 }
626 }
627
628 .#{$prefix}btn-#{$ui}-over {
629 @if $border-color-over != $border-color {
630 border-color: $border-color-over;
631 }
632 @if $background-color-over != null {
633 @include background-gradient($background-color-over, $background-gradient-over);
634 }
635
636 .#{$prefix}btn-inner {
637 @if $color-over != $color {
638 color: $color-over;
639 }
640 @if $font-weight-over != $font-weight {
641 font-weight: $font-weight-over;
642 }
643 @if $font-size-over != $font-size {
644 font-size: $font-size-over;
645 }
646 @if $font-family-over != $font-family {
647 font-family: $font-family-over;
648 }
649// @if $include-button-highlights {
650// @include inset-by-background($background-color-over);
651// }
652 }
653
654 // @todo IE6ify?
655// @if $include-button-highlights {
656// @include box-shadow($css-shadow-background-color 0 1px 1px);
657// }
658 }
659
660 .#{$prefix}btn-#{$ui}-focus {
661 @if $border-color-focus != $border-color {
662 border-color: $border-color-focus;
663 }
664 @if $background-color-focus != null {
665 @include background-gradient($background-color-focus, $background-gradient-focus);
666 }
667
668 .#{$prefix}btn-inner {
669 @if $color-focus != $color {
670 color: $color-focus;
671 }
672 @if $font-weight-focus != $font-weight {
673 font-weight: $font-weight-focus;
674 }
675 @if $font-size-focus != $font-size {
676 font-size: $font-size-focus;
677 }
678 @if $font-family-focus != $font-family {
679 font-family: $font-family-focus;
680 }
681 }
682 }
683
684 .#{$prefix}btn-#{$ui}-menu-active,
685 .#{$prefix}btn-#{$ui}-pressed {
686 @if $border-color-pressed != $border-color {
687 border-color: $border-color-pressed;
688 }
689 @if $include-button-highlights {
690 @include box-shadow(none);
691 }
692 @if $background-color-pressed != null {
693 @include background-gradient($background-color-pressed, $background-gradient-pressed);
694 }
695
696 .#{$prefix}btn-inner {
697 @if $color-pressed != $color {
698 color: $color-pressed;
699 }
700 @if $font-weight-pressed != $font-weight {
701 font-weight: $font-weight-pressed;
702 }
703 @if $font-size-pressed != $font-size {
704 font-size: $font-size-pressed;
705 }
706 @if $font-family-pressed != $font-family {
707 font-family: $font-family-pressed;
708 }
709 @if $include-button-highlights {
710 @include inset-by-background($background-color-pressed);
711 }
712 }
713 }
714
715 .#{$prefix}btn-#{$ui}-menu-active {
716 @include border-bottom-radius(0);
717 }
718
719// .#{$prefix}btn-#{$ui}-menu-active {
720// border-color: #fff;
721//// border: 0;
722// @include border-bottom-radius(0);
723
724// background-image: none;
725// background: #fff;
726
727// @include box-shadow(#CACAC9 0 0 4px);
728
729// .#{$prefix}btn-inner {
730// color: #010101;
731// font-weight: bold;
732// }
733// }
734
735 .#{$prefix}btn-#{$ui}-disabled {
736 @if $border-color-disabled != $border-color {
737 border-color: $border-color-disabled;
738 }
739 @if $background-color-disabled != null {
740 @include background-gradient($background-color-disabled, $background-gradient-disabled);
741 }
742
743 .#{$prefix}btn-inner {
744 @if $color-disabled != $color {
745 color: $color !important;
746 }
747 @if $font-weight-disabled != $font-weight {
748 font-weight: $font-weight-disabled;
749 }
750 @if $font-size-disabled != $font-size {
751 font-size: $font-size-disabled;
752 }
753 @if $font-family-disabled != $font-family {
754 font-family: $font-family-disabled;
755 }
756 }
757 }
758
759 .#{$prefix}ie .#{$prefix}btn-#{$ui}-disabled {
760 .#{$prefix}btn-inner {
761 @if $color-disabled != $color {
762 color: darken($color-disabled, 20) !important;
763 }
764 }
765 }
766
767 .#{$prefix}ie6 .#{$prefix}btn-#{$ui}-disabled {
768 .#{$prefix}btn-inner {
769 @if $color-disabled != $color {
770 color: $color-disabled !important;
771 }
772 }
773 }
774
775 @if not $supports-border-radius or $compile-all {
776 .#{$prefix}nbr {
777 .#{$prefix}btn-#{$ui}-over {
778 .#{$prefix}frame-tl,
779 .#{$prefix}frame-bl,
780 .#{$prefix}frame-tr,
781 .#{$prefix}frame-br,
782 .#{$prefix}frame-tc,
783 .#{$prefix}frame-bc {
784 background-image: theme-background-image($theme-name, 'btn/btn-#{$ui}-over-corners.gif');
785 }
786 .#{$prefix}frame-ml,
787 .#{$prefix}frame-mr {
788 background-image: theme-background-image($theme-name, 'btn/btn-#{$ui}-over-sides.gif');
789 }
790 .#{$prefix}frame-mc {
791 background-color: $background-color-over;
792 @if $background-gradient-over != null {
793 background-image: theme-background-image($theme-name, 'btn/btn-#{$ui}-over-bg.gif');
794 }
795 }
796 }
797
798 .#{$prefix}btn-#{$ui}-focus {
799 .#{$prefix}frame-tl,
800 .#{$prefix}frame-bl,
801 .#{$prefix}frame-tr,
802 .#{$prefix}frame-br,
803 .#{$prefix}frame-tc,
804 .#{$prefix}frame-bc {
805 background-image: theme-background-image($theme-name, 'btn/btn-#{$ui}-focus-corners.gif');
806 }
807 .#{$prefix}frame-ml,
808 .#{$prefix}frame-mr {
809 background-image: theme-background-image($theme-name, 'btn/btn-#{$ui}-focus-sides.gif');
810 }
811 .#{$prefix}frame-mc {
812 background-color: $background-color-focus;
813 @if $background-gradient-focus != null {
814 background-image: theme-background-image($theme-name, 'btn/btn-#{$ui}-focus-bg.gif');
815 }
816 }
817 }
818
819 .#{$prefix}btn-#{$ui}-menu-active,
820 .#{$prefix}btn-#{$ui}-pressed {
821 .#{$prefix}frame-tl,
822 .#{$prefix}frame-bl,
823 .#{$prefix}frame-tr,
824 .#{$prefix}frame-br,
825 .#{$prefix}frame-tc,
826 .#{$prefix}frame-bc {
827 background-image: theme-background-image($theme-name, 'btn/btn-#{$ui}-pressed-corners.gif');
828 }
829 .#{$prefix}frame-ml,
830 .#{$prefix}frame-mr {
831 background-image: theme-background-image($theme-name, 'btn/btn-#{$ui}-pressed-sides.gif');
832 }
833 .#{$prefix}frame-mc {
834 background-color: $background-color-pressed;
835 @if $background-gradient-pressed != null {
836 background-image: theme-background-image($theme-name, 'btn/btn-#{$ui}-pressed-bg.gif');
837 }
838 }
839 }
840
841 .#{$prefix}btn-#{$ui}-disabled {
842 .#{$prefix}frame-tl,
843 .#{$prefix}frame-bl,
844 .#{$prefix}frame-tr,
845 .#{$prefix}frame-br,
846 .#{$prefix}frame-tc,
847 .#{$prefix}frame-bc {
848 background-image: theme-background-image($theme-name, 'btn/btn-#{$ui}-disabled-corners.gif');
849 }
850 .#{$prefix}frame-ml,
851 .#{$prefix}frame-mr {
852 background-image: theme-background-image($theme-name, 'btn/btn-#{$ui}-disabled-sides.gif');
853 }
854 .#{$prefix}frame-mc {
855 background-color: $background-color-disabled;
856 @if $background-gradient-disabled != null {
857 background-image: theme-background-image($theme-name, 'btn/btn-#{$ui}-disabled-bg.gif');
858 }
859 }
860 }
861 }
862 }
863
864 @if not $supports-gradients or $compile-all {
865 @if $background-gradient != null {
866 .#{$prefix}nlg {
867 .#{$prefix}btn-#{$ui} {
868 background-repeat: repeat-x;
869 background-image: theme-background-image($theme-name, 'btn/btn-#{$ui}-bg.gif');
870 }
871 }
872 }
873
874 @if $background-gradient-over != null {
875 .#{$prefix}nlg {
876 .#{$prefix}btn-#{$ui}-over {
877 background-repeat: repeat-x;
878 background-image: theme-background-image($theme-name, 'btn/btn-#{$ui}-over-bg.gif');
879 }
880 }
881 }
882
883 @if $background-gradient-focus != null {
884 .#{$prefix}nlg {
885 .#{$prefix}btn-#{$ui}-focus {
886 background-repeat: repeat-x;
887 background-image: theme-background-image($theme-name, 'btn/btn-#{$ui}-focus-bg.gif');
888 }
889 }
890 }
891
892 @if $background-gradient-pressed != null {
893 .#{$prefix}nlg {
894 .#{$prefix}btn-#{$ui}-menu-active,
895 .#{$prefix}btn-#{$ui}-pressed {
896 background-repeat: repeat-x;
897 background-image: theme-background-image($theme-name, 'btn/btn-#{$ui}-pressed-bg.gif');
898 }
899 }
900 }
901
902 @if $background-gradient-disabled != null {
903 .#{$prefix}nlg {
904 .#{$prefix}btn-#{$ui}-disabled {
905 background-repeat: repeat-x;
906 background-image: theme-background-image($theme-name, 'btn/btn-#{$ui}-disabled-bg.gif');
907 }
908 }
909 }
910 }
911};
912
913@mixin extjs-button-icon($name, $key, $size: 17px, $top: null, $left: null) {
914 .#{$name} {
915 @include pictos($key, $color: #fff, $size: $size, $include-states: false, $shadow: false, $border-color: false);
916
917 &:after {
918 @if $top {
919 top: $top;
920 }
921
922 @if $left {
923 left: $left;
924 }
925 }
926 }
927}
Note: See TracBrowser for help on using the repository browser.