/**
* @class Ext.Button
*/
.x-button {
@include background-clip(padding-box);
@include toolbar-button(#ccc, $button-gradient);
@if $include-border-radius {
@include border-radius($button-radius);
}
min-height: $button-height;
padding: .3em .6em;
// Default icon style
.x-button-icon {
width: 1.5em;
height: 1.5em;
&:before {
font-size: 1.6em;
line-height: 1em;
}
}
&.x-item-disabled .x-button-label,
&.x-item-disabled .x-button-icon {
opacity: .5;
}
}
@if $include-border-radius {
.x-button-round {
@include border-radius($button-height/2);
}
}
.x-ie .x-button {
height: 0px;
.x-button-label {
overflow: visible;
}
}
.x-iconalign-left .x-button-label {
margin-left: .6em;
}
.x-iconalign-right .x-button-label {
margin-right: .6em;
}
.x-iconalign-top,
.x-iconalign-bottom {
padding-top: .2em !important;
padding-bottom: .2em !important;
}
// Button labels
.x-button-label {
font-weight: bold;
line-height: 1.2em;
}
// Toolbar button styling
.x-toolbar .x-button {
margin: 6px .2em;
padding: 0 .6em;
.x-button-label {
font-size: .7em;
}
.x-button-label, .x-hasbadge .x-badge {
line-height: 1.6em;
}
.x-button-icon {
&:before {
font-size: 1.3em;
line-height: 1.3em;
}
}
}
// For whatever reason, IE10 multiples before values with existing values!? We need to add lower values
// here so it is the correct size.
.x-ie .x-toolbar .x-button .x-button-icon::before {
font-size: .6em;
line-height: 1em;
}
.x-button-small,
.x-toolbar .x-button-small {
@if $include-border-radius {
@include border-radius(.3em);
}
padding: .2em .4em;
min-height: 0;
.x-button-label {
font-size: .6em;
}
.x-button-icon {
width: .75em;
height: .75em;
}
}
// Back/Forward buttons
$shadow-width: .045em; // Space between tip and its shadow
$overlap-width: .2em; // how far the mask is clipped
// $mask-height: $button-height + $button-stroke-weight * 2; // Ugh, this is non-specific... borders?
$mask-height: $button-height;
$mask-width: $mask-height/2.23;
$mask-offset: $button-radius - $overlap-width + $shadow-width - .02;
$tip-width: $mask-width - $mask-offset + $shadow-width;
.x-button-forward,
.x-button-back {
position: relative;
overflow: visible;
height: $button-height - 0.1;
z-index: 1;
}
.x-webkit {
.x-button-forward,
.x-button-back {
&:before, &:after {
@include insertion(15px, auto, -2px, auto);
bottom: -2px;
z-index: 2;
-webkit-mask: 4px 0 theme_image('default', "tip2_left.png") no-repeat;
-webkit-mask-size: 15px 100%;
overflow: hidden;
}
}
}
.x-webkit {
.x-button-back,
.x-toolbar .x-button-back {
margin-left: $tip-width - $shadow-width + $toolbar-spacing - 0.01;
padding-left: .4em;
&:before {
left: -15px;
}
&:after {
left: -14px;
}
}
.x-button-forward,
.x-toolbar .x-button-forward {
margin-right: $tip-width - $shadow-width + $toolbar-spacing;
padding-right: .4em;
&:before,
&:after {
-webkit-mask: -4px 0 theme_image('default', "tip2_right.png") no-repeat;
-webkit-mask-size: 15px 100%;
}
&:before {
right: -15px;
}
&:after {
right: -14px;
}
}
}
// Plain buttons automatically use a margin trick to have a
// wide gradial glow for pressed state.
.x-button.x-button-plain,
.x-toolbar .x-button.x-button-plain {
background: none;
border: 0 none;
min-height: 0;
text-shadow: none;
line-height: auto;
height: 1.9em;
padding: 0 0.5em;
@if $include-border-radius {
@include border-radius(none);
}
& > * {
overflow: visible;
}
&.x-button-pressing, &.x-button-pressed {
background: none;
$mask-radial-glow: lighten($active-color, 50%);
@include background-image(radial-gradient(fade-out($mask-radial-glow, .3), fade-out($mask-radial-glow, 1) 24px));
}
}
// SegmentedButtons
.x-segmentedbutton .x-button {
margin: 0;
@if $include-border-radius {
@include border-radius(0);
&.x-first {
@include border-left-radius($button-radius);
}
&.x-last {
@include border-right-radius($button-radius);
}
}
&:not(.x-first) {
border-left: 0;
}
}
// Badges
$badge-size: 2em !default;
$badge-radius: .2em !default;
$badge-bg-color: darken($alert-color, 10%) !default;
$badge-bg-gradient: $base-gradient !default;
.x-hasbadge {
overflow: visible;
.x-badge {
@extend .x-button-label;
border-color: darken($badge-bg-color, 10%);
min-width: $badge-size;
line-height: 1.2em;
top: -.2em;
padding: .1em .3em;
@include background-clip(padding-box);
@include color-by-background($badge-bg-color, $contrast: 50%);
@include background-gradient($badge-bg-color, $badge-bg-gradient);
@if $include-border-radius {
@include border-radius($badge-radius);
}
@if $include-button-highlights {
@include bevel-by-background($badge-bg-color);
@include box-shadow(rgba(#000, .5) 0 .1em .1em);
}
}
}
@if $include-default-icons {
@include icon('calendar');
@include icon('action');
@include icon('add');
@include icon('arrow_down');
@include icon('arrow_left');
@include icon('arrow_right');
@include icon('arrow_up');
@include icon('compose');
@include icon('delete');
@include icon('organize');
@include icon('refresh');
@include icon('reply');
@include icon('search');
@include icon('settings');
@include icon('star');
@include icon('trash');
@include icon('maps');
@include icon('locate');
@include icon('home');
@include icon('bookmarks');
@include icon('download');
@include icon('favorites');
@include icon('info');
@include icon('more');
@include icon('time');
@include icon('user');
@include icon('team');
}
/**
* 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.
* @param {string} $gradient Default gradient for the UI.
*/
@mixin sencha-button-ui($ui-label, $color, $gradient: $button-gradient) {
.x-button.x-button-#{$ui-label},
.x-button.x-button-#{$ui-label}-round,
.x-button.x-button-#{$ui-label}-small {
@include toolbar-button($color, $gradient);
}
@if $include-border-radius {
.x-button.x-button-#{$ui-label}-round {
@extend .x-button-round;
}
}
.x-button.x-button-#{$ui-label}-small {
@extend .x-button-small;
}
}
@if $include-button-uis {
@include sencha-button-ui('action', $active-color);
@include sencha-button-ui('confirm', desaturate(darken($confirm-color, 10%), 5%));
@include sencha-button-ui('decline', desaturate(darken($alert-color, 10%), 5%));
}