153 lines
2.5 KiB
SCSS
153 lines
2.5 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: $white-color;
|
|
|
|
&.btn-danger {
|
|
color: $danger-color;
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
color: $danger-states-color;
|
|
}
|
|
}
|
|
|
|
&.btn-info {
|
|
color: $white-color;
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
color: $info-states-color;
|
|
}
|
|
}
|
|
|
|
&.btn-warning {
|
|
color: $white-color;
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
color: $warning-states-color;
|
|
}
|
|
}
|
|
|
|
&.btn-success {
|
|
color: $white-color;
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
color: $success-states-color;
|
|
}
|
|
}
|
|
|
|
&.btn-default {
|
|
color: $white-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, $line-height){
|
|
font-size: $font-size;
|
|
//border-radius: $border;
|
|
padding: $padding-vertical $padding-horizontal;
|
|
|
|
&.btn-simple{
|
|
padding: $padding-vertical + 2 $padding-horizontal;
|
|
}
|
|
|
|
}
|