4
0
Fork 0
dcat-admin/resources/assets/dcat/sass/components/_button.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;
}
}