border-color: $border;
@include box-shadow($btn-box-shadow);
- @include hover {
+ @include hover() {
color: color-yiq($hover-background);
@include gradient-bg($hover-background);
border-color: $hover-border;
&:focus,
&.focus {
- // Avoid using mixin so we can pass custom focus shadow properly
+ color: color-yiq($hover-background);
+ @include gradient-bg($hover-background);
+ border-color: $hover-border;
@if $enable-shadows {
- box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
+ @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
} @else {
+ // Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
}
}
border-color: $active-border;
&:focus {
- // Avoid using mixin so we can pass custom focus shadow properly
- @if $enable-shadows {
- box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
+ @if $enable-shadows and $btn-active-box-shadow != none {
+ @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
} @else {
+ // Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
}
}
color: $color;
border-color: $color;
- @include hover {
+ @include hover() {
color: $color-hover;
background-color: $active-background;
border-color: $active-border;
border-color: $active-border;
&:focus {
- // Avoid using mixin so we can pass custom focus shadow properly
@if $enable-shadows and $btn-active-box-shadow != none {
- box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
+ @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
} @else {
+ // Avoid using mixin so we can pass custom focus shadow properly
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
}
}
// Button sizes
@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
padding: $padding-y $padding-x;
- font-size: $font-size;
+ @include font-size($font-size);
line-height: $line-height;
// Manually declare to provide an override to the browser default
- @if $enable-rounded {
- border-radius: $border-radius;
- } @else {
- border-radius: 0;
- }
+ @include border-radius($border-radius, 0);
}