phpvms/resources/sass/admin/paper/mixins/_buttons.scss

153 lines
2.5 KiB
SCSS
Raw Normal View History

2017-08-18 03:54:14 +08:00
// Mixin for generating new styles
@mixin btn-styles($btn-color, $btn-states-color) {
2018-01-02 07:00:40 +08:00
background-color: $btn-color;
2017-08-18 03:54:14 +08:00
&:hover,
&:focus,
&:active,
&.active,
2018-01-02 07:00:40 +08:00
&: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;
2017-08-18 03:54:14 +08:00
}
2018-01-02 07:00:40 +08:00
2017-08-18 03:54:14 +08:00
&.disabled,
&:disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&.focus,
&:active,
&.active {
2018-01-02 07:00:40 +08:00
background-color: $btn-color;
2017-08-18 07:26:48 +08:00
border-color: $btn-color;
2017-08-18 03:54:14 +08:00
}
}
2018-01-02 07:00:40 +08:00
&.focus,
&:focus {
box-shadow: none;
}
// btn-neutral style
@if $btn-color == $white-color {
2017-08-18 03:54:14 +08:00
color: $white-color;
2018-01-02 07:00:40 +08:00
&.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;
}
}
2017-08-18 03:54:14 +08:00
&.active,
2018-01-02 07:00:40 +08:00
&: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;
2017-08-18 03:54:14 +08:00
}
2018-01-02 07:00:40 +08:00
&:hover,
&:focus,
&:active {
color: $primary-states-color;
2017-08-18 03:54:14 +08:00
}
2018-01-02 07:00:40 +08:00
} @else {
color: $white-color;
2017-08-18 03:54:14 +08:00
}
2018-01-02 07:00:40 +08:00
2017-08-18 07:26:48 +08:00
&.btn-simple {
2018-01-02 07:00:40 +08:00
color: $btn-color;
border-color: $btn-color;
2017-08-18 07:26:48 +08:00
&:hover,
&:focus,
2018-01-02 07:00:40 +08:00
&:active {
background-color: $transparent-bg;
color: $btn-states-color;
border-color: $btn-states-color;
2017-08-18 07:26:48 +08:00
}
2018-01-02 07:00:40 +08:00
}
&.btn-link {
color: $btn-color;
&:hover,
&:focus,
&:active {
background-color: $transparent-bg;
color: $btn-states-color;
text-decoration: none;
2017-08-18 07:26:48 +08:00
}
2017-08-18 03:54:14 +08:00
}
}
2017-08-18 07:26:48 +08:00
@mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border, $line-height){
2017-08-18 03:54:14 +08:00
font-size: $font-size;
2018-01-02 07:00:40 +08:00
//border-radius: $border;
2017-08-18 03:54:14 +08:00
padding: $padding-vertical $padding-horizontal;
2018-01-02 07:00:40 +08:00
2017-08-18 03:54:14 +08:00
&.btn-simple{
2018-01-02 07:00:40 +08:00
padding: $padding-vertical + 2 $padding-horizontal;
2017-08-18 03:54:14 +08:00
}
2018-01-02 07:00:40 +08:00
}