2025-04-02 13:24:56 +05:30

196 lines
4.3 KiB
SCSS

// Buttons
// *******************************************************************************
.btn {
cursor: pointer;
display: inline-flex !important;
align-items: center;
justify-content: center;
&[class*='btn-outline-'] {
&:disabled,
&.disabled {
background: transparent !important;
}
}
&[class*='btn-text-'] {
border-color: transparent !important;
}
.btn-check:focus + &,
&:focus,
&.focus,
&:active,
&.active {
box-shadow: none;
&:hover {
transform: $btn-focus-transform;
}
}
&[class*='btn-text-'] {
padding-inline: 0.75rem;
&[class*='btn-sm'] {
padding-inline: 0.5rem;
}
&[class*='btn-lg'] {
padding-inline: 1rem;
}
&:disabled,
&.disabled {
background: transparent !important;
border-color: transparent !important;
}
}
.bx {
line-height: 1.15;
}
&.btn-text {
background: none;
box-shadow: none;
border: none;
}
&.disabled,
&:disabled {
cursor: default;
}
&:hover {
transform: $btn-hover-transform;
}
}
.btn-group,
.btn-group-vertical {
&:has(.btn.active),
&:has(.btn:active),
&:has(.btn.focus),
&:has(.btn:focus) {
.btn {
box-shadow: none !important;
}
}
}
// 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, $light, $value));
@include template-button-label-variant('.btn-label-#{$color}', if($color== 'dark' and $dark-style, $light, $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 * 1.998);
$btn-icon-size-sm: ($btn-font-size-sm * $btn-line-height-sm) + ($btn-padding-y-sm * 1.998);
$btn-icon-size-xs: ($btn-font-size-xs * $btn-line-height-xs) + ($btn-padding-y-xs * 1.998);
$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: 0.75rem;
@include ltr-style {
right: 0.75rem;
}
@include rtl-style {
left: 0.75rem;
}
}
// 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;
}