2025-03-07 00:29:07 -06:00

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;
}