153 lines
3.0 KiB
SCSS
153 lines
3.0 KiB
SCSS
|
// Mixin for generating new styles
|
||
|
|
@mixin btn-styles($btn-color, $btn-states-color) {
|
||
|
|
background-color: $btn-color;
|
||
|
|
|
||
|
|
&:hover,
|
||
|
|
&:focus,
|
||
|
|
&:active,
|
||
|
|
&.active,
|
||
|
|
&:active:focus,
|
||
|
|
&:active:hover,
|
||
|
|
&.active:focus,
|
||
|
|
&.active:hover,
|
||
|
|
.open > &.dropdown-toggle,
|
||
|
|
.open > &.dropdown-toggle:focus,
|
||
|
|
.open > &.dropdown-toggle:hover {
|
||
|
|
background-color: $btn-states-color;
|
||
|
|
color: $white-color;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.disabled,
|
||
|
|
&:disabled,
|
||
|
|
&[disabled],
|
||
|
|
fieldset[disabled] & {
|
||
|
|
&,
|
||
|
|
&:hover,
|
||
|
|
&:focus,
|
||
|
|
&.focus,
|
||
|
|
&:active,
|
||
|
|
&.active {
|
||
|
|
background-color: $btn-color;
|
||
|
|
border-color: $btn-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.focus,
|
||
|
|
&:focus{
|
||
|
|
box-shadow: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
// btn-neutral style
|
||
|
|
@if $btn-color == $white-color{
|
||
|
|
color: $primary-color;
|
||
|
|
|
||
|
|
&.btn-danger{
|
||
|
|
color: $danger-color;
|
||
|
|
|
||
|
|
&:hover,
|
||
|
|
&:focus,
|
||
|
|
&:active{
|
||
|
|
color: $danger-states-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.btn-info{
|
||
|
|
color: $info-color;
|
||
|
|
|
||
|
|
&:hover,
|
||
|
|
&:focus,
|
||
|
|
&:active{
|
||
|
|
color: $info-states-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.btn-warning{
|
||
|
|
color: $warning-color;
|
||
|
|
|
||
|
|
&:hover,
|
||
|
|
&:focus,
|
||
|
|
&:active{
|
||
|
|
color: $warning-states-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.btn-success{
|
||
|
|
color: $success-color;
|
||
|
|
|
||
|
|
&:hover,
|
||
|
|
&:focus,
|
||
|
|
&:active{
|
||
|
|
color: $success-states-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.btn-default{
|
||
|
|
color: $default-color;
|
||
|
|
|
||
|
|
&:hover,
|
||
|
|
&:focus,
|
||
|
|
&:active{
|
||
|
|
color: $default-states-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.active,
|
||
|
|
&:active:focus,
|
||
|
|
&:active:hover,
|
||
|
|
&.active:focus,
|
||
|
|
&.active:hover,
|
||
|
|
.open > &.dropdown-toggle,
|
||
|
|
.open > &.dropdown-toggle:focus,
|
||
|
|
.open > &.dropdown-toggle:hover {
|
||
|
|
background-color: $white-color;
|
||
|
|
color: $primary-color;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover,
|
||
|
|
&:focus,
|
||
|
|
&:active{
|
||
|
|
color: $primary-states-color;
|
||
|
|
}
|
||
|
|
|
||
|
|
} @else {
|
||
|
|
color: $white-color;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.btn-simple{
|
||
|
|
color: $btn-color;
|
||
|
|
border-color: $btn-color;
|
||
|
|
|
||
|
|
&:hover,
|
||
|
|
&:focus,
|
||
|
|
&:active{
|
||
|
|
background-color: $transparent-bg;
|
||
|
|
color: $btn-states-color;
|
||
|
|
border-color: $btn-states-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&.btn-link{
|
||
|
|
color: $btn-color;
|
||
|
|
|
||
|
|
&:hover,
|
||
|
|
&:focus,
|
||
|
|
&:active{
|
||
|
|
background-color: $transparent-bg;
|
||
|
|
color: $btn-states-color;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
@mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border){
|
||
|
|
font-size: $font-size;
|
||
|
|
border-radius: $border;
|
||
|
|
padding: $padding-vertical $padding-horizontal;
|
||
|
|
|
||
|
|
&.btn-simple{
|
||
|
|
padding: $padding-vertical - 1 $padding-horizontal - 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|