/** * @class Ext.Button */ // Private variables $disabled-color: #999; .x-button { @include background-clip(padding-box); @include toolbar-button($background-color); min-height: 1.8em; padding: .3em .6em .5em .6em; // Default icon style .x-button-icon { width: 20px; height: 24px; &:before { font-size: 24px; line-height: 22px; } } .x-button-label { color: $foreground-color; } &.x-disabled { border-color: $disabled-color; .x-button-label, .x-button-icon { color: $disabled-color; } } &.x-button-pressing, &.x-button-pressed { &, .x-button-label, .x-button-icon:before { color: $background-color; } }} .x-button-round { @include border-radius(1.8em);} // Button icon alignment .x-iconalign-left .x-button-label { margin-left: .6em;}.x-iconalign-right .x-button-label { margin-right: .6em;} .x-iconalign-top .x-button-label { margin-top: .6em;} .x-iconalign-bottom .x-button-label { margin-bottom: .6em;} // Button labels .x-button-label { line-height: 1.2em; text-transform: lowercase;} // Toolbar button styling .x-toolbar .x-button { margin: 0 .2em; padding: .3em .5em; min-width: 2.6em; min-height: 2.6em; .x-hasbadge .x-badge { line-height: 1.6em; } .x-button-label { padding-left: 6px; padding-right: 6px; line-height: 1.6em; } .x-webkit & .x-button-icon:before { line-height: 26px; }} .x-button-small,.x-toolbar .x-button-small { padding: .2em .4em; min-height: 0; .x-button-label { font-size: $font-size-small; }} .x-button-forward,.x-button-back { position: relative; overflow: visible; z-index: 1; border-radius: 40px; min-width: 40px !important; min-height: 40px !important; .x-button-label { display: none; } &:before { @include absolute-position; content: '['; // TODO: Use FontAwesome font-family: 'Pictos'; text-align: center; font-size: 29px; line-height: 40px; color: $foreground-color; } .x-ie &:before { line-height: 35px; } &.x-button-pressing { &:before { color: $background-color; } }} .x-button-forward { &:before { content: ']'; }} // Badges .x-hasbadge { overflow: visible;} .x-badge { border: 0; background-color: $base-color; color: #fff; font-size: 9pt; min-width: 30px; right: -3px; top: -2px; @include ellipsis; padding: 0 2px;} /** * Creates a theme UI for buttons. * Also automatically generates UIs for {ui-label}-round and {ui-label}-small. * * // SCSS * @include sencha-button-ui('secondary', #99A4AE, 'glossy'); * * // JS * var cancelBtn = new Ext.Button({text: 'Cancel', ui: 'secondary'}); * * @param {string} $ui-label The name of the UI being created. * Can not included spaces or special punctuation (used in class names) * @param {color} $color Base color for the UI. */@mixin sencha-button-ui($ui-label, $color) { .x-button.x-button-#{$ui-label}, .x-button.x-button-#{$ui-label}-round, .x-button.x-button-#{$ui-label}-small { @include toolbar-button($color); } .x-button.x-button-#{$ui-label}-small { @extend .x-button-small; } .x-button-#{$ui-label}-round { @extend .x-button-round; }} @if $include-button-uis { @include sencha-button-ui('action', $background-color); @include sencha-button-ui('confirm', desaturate(darken($confirm-color, 10%), 5%)); @include sencha-button-ui('decline', desaturate(darken($alert-color, 10%), 5%));}