Unified Box Shadows with Bootstrap Compatibility (#1586)

2025-12-21 17:34:25 +04:00 · 2023-05-18 22:08:47 +02:00
parent 6471d089ef
commit 4de166dba2
14 changed files with 62 additions and 34 deletions
--- a/.changeset/orange-donuts-cough.md
+++ b/.changeset/orange-donuts-cough.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Unified Box Shadows with Bootstrap Compatibility
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -13,7 +13,6 @@ $enable-cssgrid: true !default;

 // DARK MODE
 $color-mode-type: data !default;
-
 // ASSETS BASE
 $assets-base: ".." !default;

@@ -435,24 +434,20 @@ $aspect-ratios: (
 ) !default;

 // Shadows
-$shadow: rgba(var(--#{$prefix}body-color-rgb), 0.04) 0 2px 4px 0 !default;
-$shadow-inset: inset var(--#{$prefix}border-color-translucent) 0 0 0 1px !default;
-$shadow-transparent: 0 0 0 0 transparent !default;
-$shadow-button: 0 1px 0 rgba(var(--#{$prefix}body-color-rgb), 0.04) !default;
-$shadow-button-inset: inset 0 -1px 0 rgba(var(--#{$prefix}body-color-rgb), 0.2) !default;
-$shadow-card: 0 0 4px rgba(var(--#{$prefix}body-color-rgb), 0.04) !default;
-$shadow-card-hover: rgba(var(--#{$prefix}body-color-rgb), 0.16) 0 2px 16px 0 !default;
-$shadow-dropdown: 0px 16px 24px 2px rgb(0, 0, 0, 0.07),
-  0px 6px 30px 5px rgb(0, 0, 0, 0.06), 0px 8px 10px -5px rgb(0, 0, 0, 0.1) !default;
+$box-shadow: rgba(var(--#{$prefix}body-color-rgb), 0.04) 0 2px 4px 0 !default;
+$box-shadow-transparent: 0 0 0 0 transparent !default;
+$box-shadow-input: 0 1px 1px rgba(var(--#{$prefix}body-color-rgb), 0.06) !default;
+$box-shadow-card: 0 0 4px rgba(var(--#{$prefix}body-color-rgb), 0.04) !default;
+$box-shadow-card-hover: rgba(var(--#{$prefix}body-color-rgb), 0.16) 0 2px 16px 0 !default;
+$box-shadow-dropdown: 0 16px 24px 2px rgb(0, 0, 0, 0.07), 0 6px 30px 5px rgb(0, 0, 0, 0.06), 0 8px 10px -5px rgb(0, 0, 0, 0.1) !default;

-$shadows: (
-  shadow: $shadow,
-  shadow-transparent: $shadow-transparent,
-  shadow-button: $shadow-button,
-  shadow-button-inset: $shadow-button-inset,
-  shadow-card: $shadow-card,
-  shadow-card-hover: $shadow-card-hover,
-  shadow-dropdown: $shadow-dropdown,
+$box-shadows: (
+  box-shadow: $box-shadow,
+  box-shadow-transparent: $box-shadow-transparent,
+  box-shadow-input: $box-shadow-input,
+  box-shadow-card: $box-shadow-card,
+  box-shadow-card-hover: $box-shadow-card-hover,
+  box-shadow-dropdown: $box-shadow-dropdown,
 ) !default;

 $box-shadow-inset: 0 0 transparent !default;
@@ -539,6 +534,7 @@ $input-height-lg: null !default;
 $input-border-radius: var(--#{$prefix}border-radius) !default;
 $input-color: var(--#{$prefix}body-color) !default;
 $input-focus-color: var(--#{$prefix}body-color) !default;
+$input-box-shadow: var(--#{$prefix}box-shadow-input) !default;

 // Buttons
 $btn-disabled-opacity: 0.4 !default;
@@ -546,6 +542,7 @@ $btn-padding-x: 1rem !default;
 $btn-font-weight: var(--#{$prefix}font-weight-medium) !default;
 $btn-border-color: var(--#{$prefix}border-color) !default;
 $btn-border-radius: var(--#{$prefix}border-radius) !default;
+$btn-box-shadow: var(--#{$prefix}box-shadow-input) !default;

 // Cards
 $card-title-spacer-y: 1.25rem !default;
@@ -838,13 +835,14 @@ $input-border-radius: var(--#{$prefix}border-radius) !default;

 // Forms
 $form-check-margin-bottom: 0.5rem !default;
-$form-check-input-width: 1rem !default;
-$form-check-padding-start: $form-check-input-width + 0.5rem !default;
+$form-check-padding-start: 1.5rem !default;

+$form-check-input-width: 1rem !default;
 $form-check-input-bg: var(--#{$prefix}bg-forms) !default;
 $form-check-input-border: var(--#{$prefix}border-width)
  var(--#{$prefix}border-style) $input-border-color-translucent !default;
 $form-check-input-border-radius: var(--#{$prefix}border-radius) !default;
+$form-check-input-box-shadow: $input-box-shadow !default;

 $form-check-input-checked-bg-size: 1rem !default;
 $form-check-input-checked-bg-color: var(--#{$prefix}primary) !default;
@@ -860,6 +858,7 @@ $form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://w
 $form-check-label-disabled-opacity: $text-muted-opacity;

 $form-select-indicator-color: $text-muted-light !default;
+$form-select-box-shadow: var(--#{$prefix}box-shadow-input) !default;

 $form-switch-width: 2rem !default;
 $form-switch-height: 1.125rem !default;
--- a/src/scss/demo.scss
+++ b/src/scss/demo.scss
@@ -104,7 +104,7 @@ $demo-icon-size: 4rem;

  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
-  box-shadow: $shadow;
+  box-shadow: $box-shadow;
 }

 .settings-scheme {
@@ -115,7 +115,7 @@ $demo-icon-size: 4rem;
  position: relative;
  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
    var(--#{$prefix}border-color);
-  box-shadow: $shadow;
+  box-shadow: $box-shadow;

  &-light {
    background: linear-gradient(135deg, $white 50%, $light 50%);
--- a/src/scss/layout/_root.scss
+++ b/src/scss/layout/_root.scss
@@ -62,7 +62,7 @@
    --#{$prefix}line-height-#{$name}: #{$value};
  }

-  @each $name, $value in $shadows {
+  @each $name, $value in $box-shadows {
    --#{$prefix}#{$name}: #{$value};
  }
 }
--- a/src/scss/ui/_avatars.scss
+++ b/src/scss/ui/_avatars.scss
@@ -1,7 +1,7 @@
 .avatar {
  --#{$prefix}avatar-size: #{$avatar-size};
  --#{$prefix}avatar-bg: #{$avatar-bg};
-  --#{$prefix}avatar-shadow: #{$shadow-inset};
+  --#{$prefix}avatar-shadow: #{$box-shadow-inset};
  position: relative;
  width: var(--#{$prefix}avatar-size);
  height: var(--#{$prefix}avatar-size);
--- a/src/scss/ui/_button-group.scss
+++ b/src/scss/ui/_button-group.scss
@@ -1,5 +1,7 @@
 .btn-group,
 .btn-group-vertical {
+  box-shadow: $input-box-shadow;
+
  > .btn-check:checked + .btn,
  > .btn:active,
  > .btn.active {
--- a/src/scss/ui/_buttons.scss
+++ b/src/scss/ui/_buttons.scss
@@ -2,15 +2,13 @@
 // Button
 //
 .btn {
-  --#{$prefix}btn-bg: var(--#{$prefix}bg-surface);
-  --#{$prefix}btn-hover-bg: var(--#{$prefix}bg-surface);
  --#{$prefix}btn-icon-size: #{$icon-size};
  --#{$prefix}btn-bg: var(--#{$prefix}bg-surface);
  --#{$prefix}btn-color: var(--#{$prefix}body-color);
  --#{$prefix}btn-border-color: #{$btn-border-color};
  --#{$prefix}btn-hover-bg: var(--#{$prefix}btn-bg);
  --#{$prefix}btn-hover-border-color: var(--#{$prefix}border-color-active);
-  --#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-button);
+  --#{$prefix}btn-box-shadow: var(--#{$prefix}box-shadow-input);
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-bg};
  --#{$prefix}btn-active-border-color: #{$active-border-color};
@@ -90,7 +88,7 @@
    --#{$prefix}btn-active-bg: rgba(var(--#{$prefix}#{$color}-rgb), .8);
    --#{$prefix}btn-disabled-bg: var(--#{$prefix}#{$color});
    --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color}-fg);
-    --#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-button), var(--#{$prefix}shadow-button-inset);
+    --#{$prefix}btn-box-shadow: var(--#{$prefix}box-shadow-input);
  }

  .btn-outline-#{$color} {
--- a/src/scss/ui/_cards.scss
+++ b/src/scss/ui/_cards.scss
@@ -11,7 +11,7 @@

    &:hover {
      text-decoration: none;
-      box-shadow: $shadow-card-hover;
+      box-shadow: $box-shadow-card-hover;
    }
  }

--- a/src/scss/ui/_carousel.scss
+++ b/src/scss/ui/_carousel.scss
@@ -35,7 +35,7 @@
    background: no-repeat center/cover;
    border: 0;
    border-radius: var(--#{$prefix}border-radius);
-    box-shadow: $shadow;
+    box-shadow: $box-shadow;
    margin: 0 $carousel-indicator-spacer;
    opacity: $carousel-indicator-thumb-opacity;

--- a/src/scss/ui/_forms.scss
+++ b/src/scss/ui/_forms.scss
@@ -161,6 +161,16 @@ Form help
 /**
 Input group
 */
+.input-group {
+  box-shadow: $input-box-shadow;
+  border-radius: $input-border-radius;
+
+  .form-control,
+  .btn {
+    box-shadow: none;
+  }
+}
+
 .input-group-link {
  font-size: $h5-font-size;
 }
--- a/src/scss/ui/forms/_form-check.scss
+++ b/src/scss/ui/forms/_form-check.scss
@@ -24,6 +24,7 @@ Form check
 .form-check-input {
  background-size: $form-check-input-width;
  margin-top: ($form-check-min-height - $form-check-input-width) * .5;
+  box-shadow: $form-check-input-box-shadow;
  
  .form-switch & {
    @include transition(background-color$transition-time, background-position $transition-time);
--- a/src/scss/ui/forms/_form-selectgroup.scss
+++ b/src/scss/ui/forms/_form-selectgroup.scss
@@ -43,6 +43,7 @@ Select group
  user-select: none;
  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color;
  border-radius: 3px;
+  box-shadow: $input-box-shadow;
  @include transition(border-color $transition-time, background $transition-time, color $transition-time);

  .icon:only-child {
@@ -60,6 +61,7 @@ Select group
  height: $form-check-input-width;
  border: $form-check-input-border;
  vertical-align: middle;
+  box-shadow: $form-check-input-box-shadow;

  .form-selectgroup-input[type="checkbox"] + .form-selectgroup-label & {
    border-radius: $form-check-input-border-radius;
--- a/src/scss/vendor/_litepicker.scss
+++ b/src/scss/vendor/_litepicker.scss
@@ -50,9 +50,13 @@
    }
  }

-  .datepicker-inline & .container__months {
+  .datepicker-inline & {
+    box-shadow: $input-box-shadow;
+    
+    .container__months {
      box-shadow: none;
      background-color: var(--#{$prefix}bg-forms);
    }
+  }
 }

--- a/src/scss/vendor/_tom-select.scss
+++ b/src/scss/vendor/_tom-select.scss
@@ -23,6 +23,13 @@ $input-border-width: 1px;
 }

 .ts-wrapper {
+  .form-control, 
+  .form-select,
+  &.form-control, 
+  &.form-select {
+    box-shadow: $input-box-shadow; 
+  }
+
  &.is-invalid,
  &.is-valid {
    .ts-control {