first commit

resources/assets/vendor/scss/_bootstrap-extended/_buttons.scss

@@ -0,0 +1,178 @@
+// 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;
+}