You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
1.5 KiB
71 lines
1.5 KiB
// Button backgrounds
|
|
// ------------------
|
|
@mixin buttonBackground($startColor, $endColor, $text-color: #fff, $textShadow: 0px 1px 0 rgba(0, 0, 0, 0.1)) {
|
|
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
|
|
@include gradientBar($startColor, $endColor, $text-color, $textShadow);
|
|
|
|
// in these cases the gradient won't cover the background, so we override
|
|
&:hover,
|
|
&:focus,
|
|
&:active,
|
|
&.active,
|
|
&.disabled,
|
|
&[disabled] {
|
|
color: $text-color;
|
|
background-image: none;
|
|
background-color: $startColor;
|
|
}
|
|
}
|
|
|
|
// Button sizes
|
|
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
|
|
padding: $padding-y $padding-x;
|
|
font-size: $font-size;
|
|
//box-shadow: inset 0 (-$padding-y/3) rgba(0,0,0,0.15);
|
|
|
|
@include border-radius($border-radius);
|
|
}
|
|
|
|
@mixin button-outline-variant($color) {
|
|
color: $white;
|
|
background-image: none;
|
|
background-color: transparent;
|
|
border: 1px solid $white;
|
|
|
|
@include hover {
|
|
color: $white;
|
|
background-color: $color;
|
|
}
|
|
|
|
&:focus,
|
|
&.focus {
|
|
color: $white;
|
|
background-color: $color;
|
|
}
|
|
|
|
&:active,
|
|
&.active,
|
|
.open > &.dropdown-toggle {
|
|
color: $white;
|
|
background-color: $color;
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&.focus {
|
|
color: $white;
|
|
background-color: darken($color, 17%);
|
|
border-color: darken($color, 25%);
|
|
}
|
|
}
|
|
|
|
&.disabled,
|
|
&:disabled {
|
|
&:focus,
|
|
&.focus {
|
|
border-color: lighten($color, 20%);
|
|
}
|
|
@include hover {
|
|
border-color: lighten($color, 20%);
|
|
}
|
|
}
|
|
}
|
|
|