feat(datepicker): adjust dropdown modal size overrides (#144)

oruga-ui · Sep 6, 2024 · 2c97a18 · 2c97a18
1 parent fbe4e1c
commit 2c97a18
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/src/assets/scss/components/_datepicker.scss b/src/assets/scss/components/_datepicker.scss
@@ -16,7 +16,8 @@ $datepicker-month-width: 20rem !default;
 $datepicker-month-cell-spacer: calc($spacer * 0.5) !default;
 $datepicker-month-cell-height: 2.5rem !default;
 $datepicker-dropdown-width: calc(100vw - 40px) !default;
-$datepicker-dropdown-max-width: 460px !default;
+$datepicker-dropdown-min-width: 380px !default;
+$datepicker-dropdown-max-width: 420px !default;
 /* @docs */
 
 .datepicker {
@@ -227,18 +228,20 @@ $datepicker-dropdown-max-width: 460px !default;
 
   // on mobile modal
   &.mobile {
-    .dropdown-modal > .dropdown-menu {
-      --#{$prefix}dropdown-width: #{$datepicker-dropdown-width};
-      --#{$prefix}dropdown-max-width: #{$datepicker-dropdown-max-width};
-    }
-
     .pagination > .pagination-list {
       flex-grow: 1;
       flex-shrink: 1;
       justify-content: center;
     }
   }
 
+  // modal size adjustments
+  &.dropdown.dropdown-modal > .dropdown-menu {
+    --#{$prefix}dropdown-width: #{$datepicker-dropdown-width};
+    --#{$prefix}dropdown-min-width: #{$datepicker-dropdown-min-width};
+    --#{$prefix}dropdown-max-width: #{$datepicker-dropdown-max-width};
+  }
+
   // datetimepicker overrides
   .timepicker {
     .dropdown-menu {

diff --git a/src/assets/scss/components/_dropdown.scss b/src/assets/scss/components/_dropdown.scss
@@ -162,16 +162,18 @@ $dropdown-modal-backdrop-zindex: $zindex-modal-backdrop !default;
   &.dropdown-modal {
     .dropdown-menu {
       --#{$prefix}dropdown-width: 75%;
-      --#{$prefix}dropdown-min-width: 50%;
+      --#{$prefix}dropdown-min-width: 25%;
       --#{$prefix}dropdown-max-width: 90%;
       --#{$prefix}dropdown-zindex: #{$dropdown-modal-menu-zindex};
 
       position: fixed;
       top: 25%;
       left: 50%;
-      width: var(--#{$prefix}dropdown-width);
-      max-width: var(--#{$prefix}dropdown-max-width);
-      min-width: var(--#{$prefix}dropdown-min-width);
+      width: clamp(
+        var(--#{$prefix}dropdown-min-width),
+        var(--#{$prefix}dropdown-width),
+        var(--#{$prefix}dropdown-max-width)
+      );
       transform: translate3d(-50%, -25%, 0);
       z-index: var(--#{$prefix}dropdown-zindex);
     }