179 lines
4.2 KiB
SCSS
179 lines
4.2 KiB
SCSS
|
// Buttons
|
||
|
// *******************************************************************************
|
||
|
|
||
|
.btn {
|
||
|
cursor: pointer;
|
||
|
display: inline-flex !important;
|
||
|
align-items: center;
|
||
|
justify-content: center;
|
||
|
&:not(.dropdown-toggle):not([class*='btn-text-']) {
|
||
|
transition: all 0.135s ease-in-out;
|
||
|
transform: scale(1.001);
|
||
|
}
|
||
|
|
||
|
&[class*='btn-outline-'] {
|
||
|
&:disabled,
|
||
|
&.disabled {
|
||
|
background: transparent !important;
|
||
|
}
|
||
|
}
|
||
|
&[class*='btn-text-'] {
|
||
|
padding-inline: 0.75rem;
|
||
|
&[class*='btn-sm'] {
|
||
|
padding-inline: 0.5625rem;
|
||
|
}
|
||
|
&[class*='btn-lg'] {
|
||
|
padding-inline: 1rem;
|
||
|
}
|
||
|
&:disabled,
|
||
|
&.disabled {
|
||
|
background: transparent !important;
|
||
|
border-color: transparent !important;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.ti {
|
||
|
line-height: 0.9;
|
||
|
}
|
||
|
&.btn-text {
|
||
|
background: none;
|
||
|
box-shadow: none;
|
||
|
border: none;
|
||
|
}
|
||
|
&.disabled,
|
||
|
&:disabled {
|
||
|
cursor: default;
|
||
|
}
|
||
|
&[class*='btn-']:active:not([class*='btn-text']):not(.dropdown-toggle),
|
||
|
&[class*='btn-'].active:not([class*='btn-text']):not(.dropdown-toggle) {
|
||
|
transform: scale(0.98);
|
||
|
transition: all 0.135s ease-in-out;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Badge within button
|
||
|
.btn .badge {
|
||
|
@include transition($btn-transition);
|
||
|
}
|
||
|
|
||
|
label.btn {
|
||
|
margin-bottom: 0;
|
||
|
}
|
||
|
|
||
|
// Button Sizes
|
||
|
|
||
|
.btn-xl {
|
||
|
@include button-size($btn-padding-y-xl, $btn-padding-x-xl, $btn-font-size-xl, $btn-border-radius-xl);
|
||
|
}
|
||
|
|
||
|
.btn-sm {
|
||
|
line-height: $btn-line-height-sm;
|
||
|
}
|
||
|
|
||
|
.btn-xs {
|
||
|
@include button-size($btn-padding-y-xs, $btn-padding-x-xs, $btn-font-size-xs, $btn-border-radius-xs);
|
||
|
}
|
||
|
|
||
|
// Buttons Variant
|
||
|
|
||
|
@each $color, $value in $theme-colors {
|
||
|
@if $color != primary {
|
||
|
@include template-button-variant('.btn-#{$color}', if($color== 'dark' and $dark-style, $dark, $value));
|
||
|
@include template-button-label-variant('.btn-label-#{$color}', if($color== 'dark' and $dark-style, $dark, $value));
|
||
|
@include template-button-outline-variant(
|
||
|
'.btn-outline-#{$color}',
|
||
|
if($color== 'dark' and $dark-style, $dark, $value)
|
||
|
);
|
||
|
@if $color == secondary {
|
||
|
$value: $body-color;
|
||
|
}
|
||
|
@include template-button-text-variant('.btn-text-#{$color}', $value);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Icon button
|
||
|
|
||
|
.btn-icon {
|
||
|
$btn-icon-size: ($btn-font-size * $btn-line-height) + ($btn-padding-y * 1.998);
|
||
|
$btn-icon-size-xl: ($btn-font-size-xl * $btn-line-height-xl) + ($btn-padding-y-xl * 2);
|
||
|
$btn-icon-size-lg: ($btn-font-size-lg * $btn-line-height-lg) + ($btn-padding-y-lg * 2);
|
||
|
$btn-icon-size-sm: ($btn-font-size-sm * $btn-line-height-sm) + ($btn-padding-y-sm * 2.785);
|
||
|
$btn-icon-size-xs: ($btn-font-size-xs * $btn-line-height-xs) + ($btn-padding-y-xs * 2);
|
||
|
$borders-width: calc(#{$btn-border-width} * 2);
|
||
|
--#{$prefix}btn-active-border-color: transparent;
|
||
|
|
||
|
padding: 0;
|
||
|
width: calc(#{$btn-icon-size} + #{$borders-width});
|
||
|
height: calc(#{$btn-icon-size} + #{$borders-width});
|
||
|
display: inline-flex;
|
||
|
flex-shrink: 0;
|
||
|
justify-content: center;
|
||
|
align-items: center;
|
||
|
|
||
|
&.btn-xl {
|
||
|
width: calc(#{$btn-icon-size-xl} + #{$borders-width});
|
||
|
height: calc(#{$btn-icon-size-xl} + #{$borders-width});
|
||
|
> span {
|
||
|
font-size: $btn-font-size-xl;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
&.btn-lg {
|
||
|
width: calc(#{$btn-icon-size-lg} + #{$borders-width});
|
||
|
height: calc(#{$btn-icon-size-lg} + #{$borders-width});
|
||
|
font-size: $btn-font-size-lg;
|
||
|
}
|
||
|
|
||
|
&.btn-sm {
|
||
|
width: calc(#{$btn-icon-size-sm} + #{$borders-width});
|
||
|
height: calc(#{$btn-icon-size-sm} + #{$borders-width});
|
||
|
font-size: $btn-font-size-sm;
|
||
|
}
|
||
|
|
||
|
&.btn-xs {
|
||
|
width: calc(#{$btn-icon-size-xs} + #{$borders-width});
|
||
|
height: calc(#{$btn-icon-size-xs} + #{$borders-width});
|
||
|
font-size: $btn-font-size-xs;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Without border
|
||
|
|
||
|
.btn.borderless {
|
||
|
&:not(.active):not(:active):not(:hover):not(:focus),
|
||
|
:not(.show) > &.dropdown-toggle:not(:hover):not(:focus) {
|
||
|
border-color: transparent;
|
||
|
box-shadow: none;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Link buttons
|
||
|
.btn.btn-link {
|
||
|
font-size: inherit;
|
||
|
}
|
||
|
|
||
|
.btn-pinned {
|
||
|
position: absolute;
|
||
|
top: 1rem;
|
||
|
@include ltr-style {
|
||
|
right: 1rem;
|
||
|
}
|
||
|
@include rtl-style {
|
||
|
left: 1rem;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
// Button focus
|
||
|
button:focus,
|
||
|
button:focus-visible {
|
||
|
outline: none;
|
||
|
}
|
||
|
|
||
|
// Table Action Dropdown fix
|
||
|
.btn:not([class*='btn-']):active,
|
||
|
.btn:not([class*='btn-']).active,
|
||
|
.btn:not([class*='btn-']).show,
|
||
|
.btn:not([class*='btn-']) {
|
||
|
border: none;
|
||
|
}
|