mirror of https://github.com/Abi476/Ta.git
236 lines
4.4 KiB
SCSS
236 lines
4.4 KiB
SCSS
/*
|
|
<--!----------------------------------------------------------------!-->
|
|
<--! Button SCSS Start !-->
|
|
<--!----------------------------------------------------------------!-->
|
|
*/
|
|
|
|
@each $color, $value in $theme-colors {
|
|
.btn-light-#{$color} {
|
|
color: $value;
|
|
background: shift-color($value, $soft-bg-level);
|
|
border-color: shift-color($value, $soft-bg-level);
|
|
&:hover {
|
|
color: #fff;
|
|
background: $value;
|
|
border-color: $value;
|
|
}
|
|
&.focus,
|
|
&:focus {
|
|
color: #fff;
|
|
background: $value;
|
|
border-color: $value;
|
|
}
|
|
&:not(:disabled):not(.disabled).active,
|
|
&:not(:disabled):not(.disabled):active,
|
|
.show > &.dropdown-toggle {
|
|
color: #fff;
|
|
background: $value;
|
|
border-color: $value;
|
|
}
|
|
}
|
|
|
|
.btn-check:active,
|
|
.btn-check:checked {
|
|
+ .btn-light-#{$color} {
|
|
background: $value;
|
|
color: #fff;
|
|
border-color: $value;
|
|
}
|
|
}
|
|
}
|
|
|
|
button,
|
|
.btn {
|
|
i {
|
|
font-size: 16px;
|
|
}
|
|
|
|
&[class*="btn-light-"] {
|
|
box-shadow: none;
|
|
}
|
|
|
|
&[class*="btn-outline-"]:not(:hover) {
|
|
box-shadow: none;
|
|
}
|
|
|
|
&.btn-shadow {
|
|
box-shadow: 0 6px 7px -1px rgba(80, 86, 175, 0.3);
|
|
}
|
|
|
|
&.btn-sm {
|
|
i {
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
display: flex;
|
|
padding: 12px 16px;
|
|
font-size: $font-10;
|
|
line-height: normal;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: $font-700;
|
|
text-transform: $font-uppercase;
|
|
letter-spacing: $text-spacing-md;
|
|
border-radius: 3px;
|
|
transition: all 0.3s ease;
|
|
&:hover,
|
|
&:focus,
|
|
&:active,
|
|
&:focus,
|
|
&.active,
|
|
&.show,
|
|
.btn-check:focus + &,
|
|
.btn-check:checked + &,
|
|
.btn-check:active + & {
|
|
&:hover,
|
|
&:focus,
|
|
&:active,
|
|
&:focus {
|
|
color: $white;
|
|
outline: none;
|
|
box-shadow: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
}
|
|
}
|
|
.btn-light,
|
|
.btn-light-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: $brand-dark;
|
|
border: 1px solid $border-color-2;
|
|
&:hover,
|
|
&:focus,
|
|
&:active,
|
|
&:focus,
|
|
&.show {
|
|
color: $brand-dark !important;
|
|
border: 1px solid $gray-400 !important;
|
|
transition: all 0.3s ease;
|
|
}
|
|
}
|
|
.btn-icon {
|
|
color: $dark;
|
|
display: flex;
|
|
padding: 11px 11px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid $border-color-2;
|
|
border-radius: 3px;
|
|
transition: all 0.3s ease;
|
|
&:hover,
|
|
&:focus,
|
|
&:active,
|
|
&:focus,
|
|
&.show {
|
|
color: $brand-dark !important;
|
|
border: 1px solid $gray-400 !important;
|
|
transition: all 0.3s ease;
|
|
}
|
|
}
|
|
.btn-close {
|
|
&:focus,
|
|
&:active {
|
|
outline: 0;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
button:focus:not(:focus-visible) {
|
|
outline: none;
|
|
box-shadow: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.btn-sm,
|
|
.btn-group-sm > .btn {
|
|
padding: 7px 15px;
|
|
font-size: $font-9;
|
|
}
|
|
.btn-md,
|
|
.btn-group-md > .btn {
|
|
padding: 10px 15px;
|
|
font-size: $font-10;
|
|
}
|
|
.btn-lg,
|
|
.btn-group-lg > .btn {
|
|
padding: 15px 20px;
|
|
font-size: $font-11;
|
|
}
|
|
.btn-xl,
|
|
.btn-group-lg > .btn {
|
|
padding: 20px 30px;
|
|
font-size: $font-12;
|
|
}
|
|
.btn-xxl,
|
|
.btn-group-lg > .btn {
|
|
padding: 25px 35px;
|
|
font-size: $font-15;
|
|
}
|
|
.btn-primary,
|
|
.btn-primary:hover,
|
|
.btn.bg-soft-primary:focus,
|
|
.btn.bg-soft-primary:hover {
|
|
color: $white !important;
|
|
border-color: $primary !important;
|
|
background-color: $primary !important;
|
|
}
|
|
.btn-secondary,
|
|
.btn-secondary:hover,
|
|
.btn.bg-soft-secondary:focus,
|
|
.btn.bg-soft-secondary:hover {
|
|
color: $white !important;
|
|
border-color: $secondary !important;
|
|
background-color: $secondary !important;
|
|
}
|
|
.btn-success,
|
|
.btn-success:hover,
|
|
.btn.bg-soft-success:focus,
|
|
.btn.bg-soft-success:hover {
|
|
color: $white !important;
|
|
border-color: $success !important;
|
|
background-color: $success !important;
|
|
}
|
|
.btn-danger,
|
|
.btn-danger:hover,
|
|
.btn.bg-soft-danger:focus,
|
|
.btn.bg-soft-danger:hover {
|
|
color: $white !important;
|
|
border-color: $danger !important;
|
|
background-color: $danger !important;
|
|
}
|
|
.btn-info,
|
|
.btn-info:hover,
|
|
.btn.bg-soft-info:focus,
|
|
.btn.bg-soft-info:hover {
|
|
color: $white !important;
|
|
border-color: $info !important;
|
|
background-color: $info !important;
|
|
}
|
|
.btn-warning,
|
|
.btn-warning:hover,
|
|
.btn.bg-soft-warning:focus,
|
|
.btn.bg-soft-warning:hover {
|
|
color: $white !important;
|
|
border-color: $warning !important;
|
|
background-color: $warning !important;
|
|
}
|
|
.btn-teal,
|
|
.btn-teal:hover,
|
|
.btn.bg-soft-teal:focus,
|
|
.btn.bg-soft-teal:hover {
|
|
color: $white !important;
|
|
border-color: $teal !important;
|
|
background-color: $teal !important;
|
|
}
|
|
.btn-indigo,
|
|
.btn-indigo:hover,
|
|
.btn.bg-soft-indigo:focus,
|
|
.btn.bg-soft-indigo:hover {
|
|
color: $white !important;
|
|
border-color: $indigo !important;
|
|
background-color: $indigo !important;
|
|
}
|