refactor(DatePicker, DateRangePicker, MultiSelect, TimePicker): add t…

…he possibility to add `box-shadow` to the dropdown menu
coreui · Nov 14, 2023 · ba1a4ab · ba1a4ab
1 parent e005ebd
commit ba1a4ab
Show file tree

Hide file tree

Showing 14 changed files with 23 additions and 8 deletions.
diff --git a/dist/css/coreui-grid.css.map b/dist/css/coreui-grid.css.map
diff --git a/dist/css/coreui-grid.rtl.css.map b/dist/css/coreui-grid.rtl.css.map
diff --git a/dist/css/coreui-reboot.css.map b/dist/css/coreui-reboot.css.map
diff --git a/dist/css/coreui-reboot.rtl.css.map b/dist/css/coreui-reboot.rtl.css.map
diff --git a/dist/css/coreui-utilities.css.map b/dist/css/coreui-utilities.css.map
diff --git a/dist/css/coreui-utilities.rtl.css.map b/dist/css/coreui-utilities.rtl.css.map
diff --git a/dist/css/coreui.css b/dist/css/coreui.css
diff --git a/dist/css/coreui.css.map b/dist/css/coreui.css.map
diff --git a/dist/css/coreui.rtl.css b/dist/css/coreui.rtl.css
diff --git a/dist/css/coreui.rtl.css.map b/dist/css/coreui.rtl.css.map
diff --git a/scss/_date-picker.scss b/scss/_date-picker.scss
@@ -35,6 +35,7 @@
   --#{$prefix}date-picker-dropdown-border-width: #{$date-picker-dropdown-border-width};
   --#{$prefix}date-picker-dropdown-border-color: #{$date-picker-dropdown-border-color};
   --#{$prefix}date-picker-dropdown-border-radius: #{$date-picker-dropdown-border-radius};
+  --#{$prefix}date-picker-dropdown-box-shadow: #{$date-picker-dropdown-box-shadow};
   --#{$prefix}date-picker-ranges-width: #{$date-picker-ranges-width};
   --#{$prefix}date-picker-ranges-padding: #{$date-picker-ranges-padding};
   --#{$prefix}date-picker-ranges-border-width: #{$date-picker-ranges-border-width};
@@ -195,6 +196,7 @@
   background-clip: padding-box;
   border: var(--#{$prefix}date-picker-dropdown-border-width) solid var(--#{$prefix}date-picker-dropdown-border-color);
   @include border-radius(var(--#{$prefix}date-picker-dropdown-border-radius));
+  @include box-shadow(var(--#{$prefix}date-picker-dropdown-box-shadow));
   @include elevation(4);
 
   .date-picker.show & {

diff --git a/scss/_time-picker.scss b/scss/_time-picker.scss
@@ -36,6 +36,7 @@
   --#{$prefix}time-picker-dropdown-border-width: #{$time-picker-dropdown-border-width};
   --#{$prefix}time-picker-dropdown-border-color: #{$time-picker-dropdown-border-color};
   --#{$prefix}time-picker-dropdown-border-radius: #{$time-picker-dropdown-border-radius};
+  --#{$prefix}time-picker-dropdown-box-shadow: #{$time-picker-dropdown-box-shadow};
   --#{$prefix}time-picker-roll-col-border-width: #{$time-picker-roll-col-border-width};
   --#{$prefix}time-picker-roll-col-border-color: #{$time-picker-roll-col-border-color};
   --#{$prefix}time-picker-roll-cell-selected-color: #{$time-picker-roll-cell-selected-color};
@@ -185,6 +186,7 @@
   background-clip: padding-box;
   border: var(--#{$prefix}time-picker-dropdown-border-width) solid var(--#{$prefix}time-picker-dropdown-border-color);
   @include border-radius(var(--#{$prefix}time-picker-dropdown-border-radius));
+  @include box-shadow(var(--#{$prefix}time-picker-dropdown-box-shadow));
   @include elevation(4);
 
   .time-picker.show & {

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1247,6 +1247,7 @@ $form-multi-select-dropdown-bg:               var(--#{$prefix}body-bg) !default;
 $form-multi-select-dropdown-border-color:     var(--#{$prefix}border-color) !default;
 $form-multi-select-dropdown-border-width:     var(--#{$prefix}border-width) !default;
 $form-multi-select-dropdown-border-radius:    var(--#{$prefix}border-radius) !default;
+$form-multi-select-dropdown-box-shadow:       var(--#{$prefix}box-shadow) !default;
 
 $form-multi-select-select-all-padding-y:      .5rem !default;
 $form-multi-select-select-all-padding-x:      .75rem !default;
@@ -2343,6 +2344,7 @@ $date-picker-dropdown-bg:                var(--#{$prefix}body-bg) !default;
 $date-picker-dropdown-border-color:      var(--#{$prefix}border-color) !default;
 $date-picker-dropdown-border-width:      var(--#{$prefix}border-width) !default;
 $date-picker-dropdown-border-radius:     var(--#{$prefix}border-radius) !default;
+$date-picker-dropdown-box-shadow:        var(--#{$prefix}box-shadow) !default;
 
 $date-picker-ranges-width:             10rem !default;
 $date-picker-ranges-padding:           $spacer * .5 !default;
@@ -2417,6 +2419,7 @@ $time-picker-dropdown-bg:                   var(--#{$prefix}body-bg) !default;
 $time-picker-dropdown-border-color:         var(--#{$prefix}border-color) !default;
 $time-picker-dropdown-border-width:         var(--#{$prefix}border-width) !default;
 $time-picker-dropdown-border-radius:        var(--#{$prefix}border-radius) !default;
+$time-picker-dropdown-box-shadow:        var(--#{$prefix}box-shadow) !default;
 
 $time-picker-body-padding:                  $spacer * .5 !default;
 

diff --git a/scss/forms/_form-multi-select.scss b/scss/forms/_form-multi-select.scss
@@ -50,6 +50,7 @@
   --#{$prefix}form-multi-select-dropdown-border-width: #{$form-multi-select-dropdown-border-width};
   --#{$prefix}form-multi-select-dropdown-border-color: #{$form-multi-select-dropdown-border-color};
   --#{$prefix}form-multi-select-dropdown-border-radius: #{$form-multi-select-dropdown-border-radius};
+  --#{$prefix}form-multi-select-dropdown-box-shadow: #{$form-multi-select-dropdown-box-shadow};
   --#{$prefix}form-multi-select-options-padding-y: #{$form-multi-select-options-padding-y};
   --#{$prefix}form-multi-select-options-padding-x: #{$form-multi-select-options-padding-x};
   --#{$prefix}form-multi-select-options-font-size: #{$form-multi-select-options-font-size};
@@ -322,6 +323,7 @@ select.form-multi-select {
   background-clip: padding-box;
   border: var(--#{$prefix}form-multi-select-dropdown-border-width) solid var(--#{$prefix}form-multi-select-dropdown-border-color);
   @include border-radius(var(--#{$prefix}form-multi-select-dropdown-border-radius));
+  @include box-shadow(var(--#{$prefix}form-multi-select-dropdown-box-shadow));
   @include elevation(4);
 
   .form-multi-select.show & {