220 lines
5.0 KiB
SCSS
220 lines
5.0 KiB
SCSS
.btn {
|
|
padding: 0.54rem 1.2rem !important;
|
|
height: 34px;
|
|
line-height: 1.2;
|
|
border-radius: 0.2rem;
|
|
cursor: pointer;
|
|
box-shadow: $default-btn-shadow;
|
|
}
|
|
|
|
.btn.btn-trans {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.btn-trans.btn-primary {
|
|
background-color: lighten($primary, 40%);
|
|
border-color: lighten($primary, 40%);
|
|
color: $primary;
|
|
}
|
|
|
|
.btn-shadow.btn,
|
|
.btn:hover,
|
|
.btn:focus {
|
|
box-shadow: $btn-shadow;
|
|
}
|
|
|
|
.btn-shadow.btn:hover,
|
|
.btn-shadow.btn:focus {
|
|
box-shadow: $btn-shadow-hover;
|
|
}
|
|
|
|
.btn-group-sm>.btn, .btn-sm, .btn-lg {
|
|
border-radius: 0.2rem;
|
|
}
|
|
|
|
.btn-primary {
|
|
color: $white;
|
|
}
|
|
|
|
.btn-sm, .btn-xs {
|
|
padding: .54rem .9rem!important
|
|
}
|
|
|
|
a.btn, span.btn {
|
|
line-height: 1.4;
|
|
}
|
|
|
|
div.btn {
|
|
line-height: 1.3;
|
|
}
|
|
|
|
div.btn.btn-sm, .btn-group-sm > div.btn, span.btn.btn-sm, .btn-group-sm > span.btn {
|
|
line-height: 1.2;
|
|
}
|
|
|
|
a.btn-sm, .btn-group-sm > a.btn {
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.btn-warning, .btn.btn-warning:hover, .btn.btn-warning:focus, .btn.btn-warning.active {
|
|
color: white;
|
|
}
|
|
|
|
.btn-sm, .btn-group-sm > .btn {
|
|
//padding: 0.45rem 1rem !important;
|
|
font-size: 12px;
|
|
line-height: 1.1;
|
|
height: 30px;
|
|
}
|
|
|
|
.btn-default {
|
|
background: white;
|
|
border-color: white;
|
|
}
|
|
.btn-default:hover, .btn-default:focus, .btn-default.active {
|
|
background: white;
|
|
box-shadow: $shadow-100;
|
|
}
|
|
|
|
.btn-group {
|
|
.btn:not(.btn-white):hover {
|
|
box-shadow: $shadow-100;
|
|
}
|
|
.btn {
|
|
box-shadow: none!important;
|
|
}
|
|
|
|
box-shadow: $default-btn-shadow;
|
|
}
|
|
|
|
.btn-group.btn-shadow {
|
|
box-shadow: $btn-group-btn-shadow;
|
|
}
|
|
|
|
// --------------------- btn-custom -----------------------
|
|
.btn-custom {
|
|
@include button-variant($custom, $custom);
|
|
color: #fff;
|
|
}
|
|
.btn-outline-custom {
|
|
@include button-outline-variant($custom, $custom);
|
|
}
|
|
// --------------------- btn-cyan -----------------------
|
|
.btn-cyan {
|
|
@include button-variant($cyan, $cyan);
|
|
}
|
|
.btn-outline-cyan {
|
|
@include button-outline-variant($cyan, $cyan);
|
|
}
|
|
|
|
.btn.btn-white, .btn.btn-default {
|
|
color: $font-color;
|
|
box-shadow: $default-btn-shadow;
|
|
background: $white;
|
|
}
|
|
|
|
//.btn.btn-white.btn-shadow, .btn.btn-default.btn-shadow {
|
|
// box-shadow: none;
|
|
//}
|
|
|
|
.btn.btn-white.btn-primary, .btn.btn-white.btn-primary:hover, .btn.btn-white.btn-primary:focus {
|
|
color: $white !important;
|
|
}
|
|
.btn-white:hover, .btn-white:focus, .btn-white.active {
|
|
box-shadow: $btn-shadow-hover !important;
|
|
}
|
|
|
|
.btn-light {
|
|
border-color: $input-border-color!important;
|
|
background-color: $white!important;
|
|
color: #444;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.btn-light:hover, .btn-light:focus {
|
|
box-shadow: $btn-shadow-hover!important;
|
|
color: #444!important;
|
|
}
|
|
|
|
.btn-secondary {
|
|
border-color: darken($border-color, 2.2%)!important;
|
|
background-color: lighten(#eee, 2.5%)!important;
|
|
color: $font-color!important;
|
|
box-shadow: none;
|
|
}
|
|
.btn-secondary:hover, .btn-secondary:focus {
|
|
box-shadow: $btn-shadow-hover!important;
|
|
}
|
|
|
|
.btn-no-shadow {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.btn-outline-primary, .btn-outline-success, .btn-outline-danger, .btn-outline-info, .btn-outline-warning, .btn-outline-dark,
|
|
.btn-flat-primary, .btn-flat-success, .btn-flat-danger, .btn-flat-info, .btn-flat-warning, .btn-flat-dark {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.input-group-sm > .form-control, .input-group-sm > .custom-select, .input-group-sm > .input-group-prepend > .input-group-text, .input-group-sm > .input-group-append > .input-group-text, .input-group-sm > .input-group-prepend > .btn, .input-group-sm > .input-group-append > .btn {
|
|
padding: 0.5rem .7rem;
|
|
}
|
|
|
|
// loading
|
|
.btn:not(.btn-sm) .spinner-grow, a:not(.btn) .spinner-grow {
|
|
margin-bottom: .15rem;
|
|
}
|
|
|
|
|
|
.btn-outline {
|
|
background-color: transparent;
|
|
}
|
|
.btn-primary.btn-outline {
|
|
color: $primary;
|
|
border-color: $primary;
|
|
}
|
|
.btn-info.btn-outline {
|
|
color: $info;
|
|
border-color: $info;
|
|
}
|
|
.btn-success.btn-outline {
|
|
color: $success;
|
|
border-color: $success;
|
|
}
|
|
.btn-danger.btn-outline {
|
|
color: $danger;
|
|
border-color: $danger;
|
|
}
|
|
.btn-warning.btn-outline {
|
|
color: $warning;
|
|
border-color: $warning;
|
|
}
|
|
|
|
.btn-primary.btn-outline.disabled,
|
|
.btn-primary.btn-outline:disabled {
|
|
background: transparent;
|
|
}
|
|
|
|
.btn-info.btn-outline:hover, .btn-success.btn-outline:hover, .btn-danger.btn-outline:hover, .btn-warning.btn-outline:hover,
|
|
//.btn-primary.btn-outline:focus, .btn-info.btn-outline:focus, .btn-success.btn-outline:focus, .btn-danger.btn-outline:focus, .btn-warning.btn-outline:focus,
|
|
.btn-info.btn-outline.active, .btn-success.btn-outline.active, .btn-danger.btn-outline.active, .btn-warning.btn-outline.active{
|
|
color: $white;
|
|
}
|
|
|
|
.btn-primary.btn-outline:hover,
|
|
.btn-primary.btn-outline.active {
|
|
background: rgba($primary, .05);
|
|
color: $primary;
|
|
}
|
|
|
|
.number-group {
|
|
.input-group-btn:first-child .btn {
|
|
border-bottom-right-radius: 0;
|
|
border-top-right-radius: 0;
|
|
border-right: 0;
|
|
}
|
|
.input-group-btn:last-child .btn {
|
|
border-bottom-left-radius: 0;
|
|
border-top-left-radius: 0;
|
|
}
|
|
}
|