@syncfusion/ej2-calendars 33.2.15 → 34.1.29

package/styles/daterangepicker/_layout.scss

@@ -1,4 +1,4 @@
-@use 'ej2-base/styles/common/mixin' as *;
+@use 'variables' as *;
 @include export-module('daterangepicker-layout') {
 
   .e-input-group.e-control-wrapper.e-date-range-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,
@@ -25,24 +25,24 @@
     @if $skin-name == 'material' or $skin-name == 'material-dark' or $skin-name == 'Material3' {
       --dummy-style: true;
     }
-    #{if(&, '&', '*')}.e-popup {
+    &.e-popup {
       border: $range-popup-border;
       border-radius: $range-popup-border-radius;
       box-shadow: $range-box-shadow;
       max-height: $range-max-height;
       max-width: $range-max-width;
 
-      #{if(&, '&', '*')}.e-daterange-day-header-lg {
+      &.e-daterange-day-header-lg {
         max-width: $range-lg-day-header-format-width;
       }
-      #{if(&, '&', '*')}.e-preset-wrapper {
+      &.e-preset-wrapper {
         min-width: $range-preset-min-width;
 
-        #{if(&, '&', '*')} .e-presets {
+        & .e-presets {
           max-height: $range-value-none;
         }
       }
-      #{if(&, '&', '*')} .e-range-header {
+      & .e-range-header {
         background: $range-header-bg-color;
         padding: $range-control-header-margin;
         width: $range-control-header-width;
@@ -57,8 +57,8 @@
           border-top-right-radius: inherit;
         }
 
-        #{if(&, '&', '*')} .e-start-label,
-        #{if(&, '&', '*')} .e-end-label {
+        & .e-start-label,
+        & .e-end-label {
           cursor: $range-cursor-default-style;
           display: $range-inline-block-style;
           font-size: $range-header-label-size;
@@ -73,13 +73,13 @@
             font-weight: $font-weight-semibold;
           }
         }
-        #{if(&, '&', '*')} .e-change-icon {
+        & .e-change-icon {
           font-size: $range-font-size;
           font-weight: $range-font-weight-bold;
           text-align: $range-align-center;
           width: $range-change-icon-width;
         }
-        #{if(&, '&', '*')} .e-day-span {
+        & .e-day-span {
           direction: $range-direction-left;
           font-size: $range-calendar-small-font-size;
           height: $range-day-span-height;
@@ -88,19 +88,19 @@
           user-select: $range-browser-select-none;
           width: $range-indicator-label-width;
         }
-        #{if(&, '&', '*')} .e-start-end {
+        & .e-start-end {
           align-items: $range-align-center;
           display: $range-flex-style;
           height: $range-start-end-container-height;
         }
       }
-      #{if(&, '&', '*')} .e-separator {
+      & .e-separator {
         @if ($skin-name != 'FluentUI') {
           height: $range-separator-height;
           margin: $range-separator-margin;
         }
       }
-      #{if(&, '&', '*')} .e-calendar {
+      & .e-calendar {
         border: $range-calendar-border;
         margin: $range-calendar-margin;
         @if ($skin-name != 'FluentUI') {
@@ -110,13 +110,13 @@
           box-shadow: none;
         }
 
-        #{if(&, '&', '*')} .e-content table {
+        & .e-content table {
           @if ($skin-name != 'FluentUI') {
             padding: $range-calendar-normal-table-padding;
           }
         }
-        #{if(&, '&', '*')} .e-header {
-          #{if(&, '&', '*')} .e-title {
+        & .e-header {
+          & .e-title {
             cursor: $range-cursor-pointer-style;
             @if $skin-name == 'bootstrap5.3' {
               line-height: $range-normal-nav-icon-line-height;
@@ -132,14 +132,14 @@
               margin-left: $range-value-zero;
             }
           }
-          #{if(&, '&', '*')}.e-month,
-          #{if(&, '&', '*')}.e-year,
-          #{if(&, '&', '*')}.e-decade {
+          &.e-month,
+          &.e-year,
+          &.e-decade {
             @if ($skin-name != 'FluentUI') {
               padding: $range-calendar-header-padding;
             }
           }
-          #{if(&, '&', '*')} .e-next {
+          & .e-next {
             @if ($skin-name != 'FluentUI' and $skin-name != 'fluent2') {
               float: $range-float-right;
             }
@@ -148,7 +148,7 @@
               right: $date-range-popup-next-right;
             }
           }
-          #{if(&, '&', '*')} .e-prev {
+          & .e-prev {
             @if ($skin-name != 'FluentUI' and $skin-name != 'fluent2') {
               float: $range-float-left;
             }
@@ -156,8 +156,8 @@
               left: $date-range-popup-next-right;
             }
           }
-          #{if(&, '&', '*')} .e-next,
-          #{if(&, '&', '*')} .e-prev {
+          & .e-next,
+          & .e-prev {
             height: $range-normal-nav-icon-height;
             width: $range-normal-nav-icon-width;
             @if $skin-name == 'tailwind3' {
@@ -165,33 +165,33 @@
               top: $date-range-popup-next-top;
             }
           }
-          #{if(&, '&', '*')} .e-next span,
-          #{if(&, '&', '*')} .e-prev span {
+          & .e-next span,
+          & .e-prev span {
             padding: $range-icon-normal-padding;
           }
         }
-        #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
+        & .e-start-date.e-selected.e-range-hover {
           border-radius: $range-hover-start-radius;
         }
-        #{if(&, '&', '*')} .e-end-date.e-selected.e-range-hover {
+        & .e-end-date.e-selected.e-range-hover {
           border-radius: $range-hover-end-radius;
         }
-        #{if(&, '&', '*')} .e-start-date.e-selected {
+        & .e-start-date.e-selected {
           @if ($skin-name == 'FluentUI') {
             border-radius: $range-hover-start-radius;
           }
         }
-        #{if(&, '&', '*')} .e-end-date.e-selected {
+        & .e-end-date.e-selected {
           @if ($skin-name == 'FluentUI') {
             border-radius: $range-hover-end-radius;
           }
         }
-        #{if(&, '&', '*')} .e-end-date.e-selected.e-range-hover span.e-day,
-        #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover span.e-day {
+        & .e-end-date.e-selected.e-range-hover span.e-day,
+        & .e-start-date.e-selected.e-range-hover span.e-day {
           border: $range-calendar-hover-border;
         }
       }
-      #{if(&, '&', '*')} .e-footer {
+      & .e-footer {
         align-items: $range-align-center;
         @if ($skin-name != 'FluentUI' and $skin-name != 'fluent2' and $skin-name != 'tailwind3') {
           border-top: $range-border-value;
@@ -204,7 +204,7 @@
           border-radius: $range-popup-footer-border-radius;
         }
       }
-      #{if(&, '&', '*')} .e-footer .e-btn {
+      & .e-footer .e-btn {
         font-weight: $range-btn-font-weight;
         height: $range-btn-normal-height;
         line-height: $range-btn-normal-line-height;
@@ -215,30 +215,30 @@
           border: $footer-btn-border;
         }
       }
-      #{if(&, '&', '*')} .e-footer .e-btn.e-apply {
+      & .e-footer .e-btn.e-apply {
         margin: $range-normal-footer-margin;
       }
-      #{if(&, '&', '*')} .e-date-range-container {
+      & .e-date-range-container {
         float: $range-float-left;
         @if $skin-name == 'fluent2' {
           border-top-left-radius: inherit;
           border-top-right-radius: inherit;
         }
 
-        #{if(&, '&', '*')}.e-range-border {
+        &.e-range-border {
           @if $skin-name != 'tailwind3' {
             border-right: $range-border-value;
           }
         }
       }
-      #{if(&, '&', '*')} .e-calendar-container {
+      & .e-calendar-container {
         display: $range-flex-style;
 
-        #{if(&, '&', '*')} .e-left-container,
-        #{if(&, '&', '*')} .e-right-container {
+        & .e-left-container,
+        & .e-right-container {
           float: $range-float-left;
         }
-        #{if(&, '&', '*')} .e-left-container {
+        & .e-left-container {
           @if $skin-name != 'FluentUI' and $skin-name != 'fluent2' and $skin-name != 'tailwind3' {
             border-right: $range-border-value;
           }
@@ -247,12 +247,12 @@
           }
         }
       }
-      #{if(&, '&', '*')} .e-presets {
+      & .e-presets {
         max-height: $range-presets-height;
         overflow: auto;
         width: $range-width-auto;
 
-        #{if(&, '&', '*')} .e-list-item {
+        & .e-list-item {
           border-radius: $range-list-border-radius;
           cursor: $range-cursor-pointer-style;
           line-height: $range-list-item-height;
@@ -261,17 +261,17 @@
           white-space: $range-text-nowrap;
           text-overflow: $range-text-overflow;
         }
-        #{if(&, '&', '*')} .e-list-parent {
+        & .e-list-parent {
           margin: $range-value-zero;
           max-width: $range-presets-width;
           padding: $range-value-zero;
         }
-        #{if(&, '&', '*')} .e-text-content {
+        & .e-text-content {
           line-height: $range-list-item-line-height;
         }
-        #{if(&, '&', '*')} .e-ul {
+        & .e-ul {
 
-          #{if(&, '&', '*')} li.e-list-item {
+          & li.e-list-item {
             font-size: $range-presets-normal-list-font-size;
             height: $range-preset-normal-list-height;
             line-height: $range-preset-normal-list-height;
@@ -287,19 +287,19 @@
           }
         }
       }
-      #{if(&, '&', '*')} .e-hide-range {
+      & .e-hide-range {
         display: $range-display-none;
       }
     }
-    #{if(&, '&', '*')}.e-rtl {
-      #{if(&, '&', '*')} .e-date-range-container {
+    &.e-rtl {
+      & .e-date-range-container {
         float: $range-float-right;
 
-        #{if(&, '&', '*')}.e-range-border {
+        &.e-range-border {
           border-left: $range-border-value;
           border-right: $range-value-zero;
         }
-        #{if(&, '&', '*')} .e-left-container {
+        & .e-left-container {
           @if $skin-name != 'FluentUI' {
             border-left: $range-border-value;
             border-right: $range-value-zero;
@@ -308,22 +308,22 @@
             border-left: $range-container-border-value;
           }
         }
-        #{if(&, '&', '*')} .e-calendar {
-          #{if(&, '&', '*')} .e-next {
+        & .e-calendar {
+          & .e-next {
             float: $range-float-left;
           }
-          #{if(&, '&', '*')} .e-prev {
+          & .e-prev {
             @if ($skin-name != 'FluentUI') {
               float: $range-float-right;
             }
           }
-          #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
+          & .e-start-date.e-selected.e-range-hover {
             border-radius: $range-hover-end-radius;
             @if ($skin-name == 'FluentUI') {
               box-shadow: $selected-range-box-shadow;
             }
           }
-          #{if(&, '&', '*')} .e-end-date.e-selected.e-range-hover {
+          & .e-end-date.e-selected.e-range-hover {
             border-radius: $range-hover-start-radius;
             @if ($skin-name == 'FluentUI') {
               box-shadow: $selected-range-box-shadow;
@@ -331,14 +331,14 @@
           }
         }
       }
-      #{if(&, '&', '*')} .e-footer {
+      & .e-footer {
         flex-direction: $range-flex-direction-row;
         justify-content: $range-flex-justify-content;
 
-        #{if(&, '&', '*')} .e-btn.e-cancel {
+        & .e-btn.e-cancel {
           margin: $range-normal-rtl-footer-margin;
         }
-        #{if(&, '&', '*')} .e-btn.e-apply {
+        & .e-btn.e-apply {
           margin-left: $range-value-zero;
         }
       }
@@ -346,9 +346,9 @@
   }
 
   .e-small #{&}.e-daterangepicker,
-  #{if(&, '&', '*')}.e-small#{&}.e-daterangepicker {
-    #{if(&, '&', '*')}.e-popup {
-      #{if(&, '&', '*')} .e-range-header {
+  *.e-small#{&}.e-daterangepicker {
+    &.e-popup {
+      & .e-range-header {
         @if $skin-name != 'tailwind' {
           margin: $range-control-small-header-margin;
         }
@@ -357,37 +357,37 @@
           padding: $range-control-bigger-header-margin;
         }
 
-        #{if(&, '&', '*')} .e-start-label,
-        #{if(&, '&', '*')} .e-end-label {
+        & .e-start-label,
+        & .e-end-label {
           font-size: $range-small-header-label-size;
         }
 
-        #{if(&, '&', '*')} .e-change-icon {
+        & .e-change-icon {
           font-size: $range-small-font-size;
         }
 
-        #{if(&, '&', '*')} .e-start-end {
+        & .e-start-end {
           height: $range-start-end-container-small-height;
         }
 
-        #{if(&, '&', '*')} .e-day-span {
+        & .e-day-span {
           font-size: $range-calendar-mouse-small-font-size;
           margin: $range-indicator-small-margin;
         }
 
-        #{if(&, '&', '*')} .e-separator {
+        & .e-separator {
           @if ($skin-name != 'FluentUI') {
             margin: $range-separator-small-margin;
           }
         }
       }
 
-      #{if(&, '&', '*')} .e-footer .e-btn.e-apply {
+      & .e-footer .e-btn.e-apply {
         margin: $range-small-footer-margin;
       }
 
-      #{if(&, '&', '*')}.e-preset-wrapper .e-presets .e-list-parent.e-ul {
-        #{if(&, '&', '*')} .e-list-item {
+      &.e-preset-wrapper .e-presets .e-list-parent.e-ul {
+        & .e-list-item {
           font-size: $range-presets-small-list-font-size;
           height: $range-preset-small-list-height;
           line-height: $range-preset-small-list-height;
@@ -450,8 +450,8 @@
 }
 
 .e-daterangepick-mob-popup-wrap {
-    #{if( &, '&', '*')} .e-daterangepicker.e-popup.e-popup-expand {      
-      #{if(&, '&', '*')} .e-date-range-container {
+    & .e-daterangepicker.e-popup.e-popup-expand {      
+      & .e-date-range-container {
             & {
               min-height: $modal-range-portrait-calendar-min-height;
               min-width: $modal-range-portrait-calendar-min-width;
@@ -459,13 +459,13 @@
               width: $modal-range-portrait-calendar-width;
             }
             
-            #{if(&, '&', '*')} .e-range-header {
+            & .e-range-header {
               height: $modal-range-portrait-header-height;
               padding: $modal-range-portrait-header-padding;
               margin: $margin-zero;
               color: $range-calendar-header-dark-color;
 
-              #{if(&, '&', '*')} .e-model-header-wrapper {
+              & .e-model-header-wrapper {
                 @media (max-device-width: 768px) {
                   font-size: $range-header-font-size;
                 }
@@ -474,16 +474,16 @@
                   font-size: $modal-range-tablet-font-size;
                 }
 
-                #{if(&, '&', '*')} .e-apply {
+                & .e-apply {
                   float: $modal-range-portrait-icon-float;
                 }
               }
 
-              #{if(&, '&', '*')} .e-start-end {
+              & .e-start-end {
                 margin: $modal-range-start-end-margin;
               }
             }
-            #{if(&, '&', '*')} .e-calendar {
+            & .e-calendar {
               @media (max-height: 600px) {
                 min-height: $modal-range-portrait-calendar-height;
                 height: $modal-range-portrait-calendar-height;
@@ -499,9 +499,9 @@
                 overflow: $modal-range-calendar-overflow;
               }
               
-              #{if(&, '&', '*')} .e-header.e-month,
-              #{if(&, '&', '*')} .e-header.e-year,
-              #{if(&, '&', '*')} .e-header.e-decade {
+              & .e-header.e-month,
+              & .e-header.e-year,
+              & .e-header.e-decade {
                 height: $modal-range-portrait-header-month-height;
                 border-style: $modal-range-calendar-header-border-style;
                 border-width: $modal-range-calendar-header-border-width;
@@ -509,7 +509,7 @@
                 padding: $modal-range-portrait-month-header-padding;
                 line-height: $modal-range-month-header-line-height;
 
-                #{if(&, '&', '*')} .e-prev {
+                & .e-prev {
                   height: $modal-range-prev-next-icon-size;
                   width: $modal-range-prev-next-icon-size;
                   @if ($skin-name == 'Material3') {
@@ -522,18 +522,18 @@
                     }
                   }
 
-                  #{if(&, '&', '*')} span {
+                  & span {
                     @media (min-device-width: 768px) {
                       font-size: $range-device-span-font-size;
                       padding: $daterangepicker-span-padding;
                     }
                   }
                 }
-                #{if(&, '&', '*')} .e-next {
+                & .e-next {
                   height: $modal-range-prev-next-icon-size;
                   width: $modal-range-prev-next-icon-size;
 
-                  #{if(&, '&', '*')} span {
+                  & span {
                     padding: $modal-range-prev-next-icon-padding;
                     line-height: $modal-range-prev-next-icon-line-height;
                     @media (min-device-width: 768px) {
@@ -542,7 +542,7 @@
                   }
                 }
 
-                #{if(&, '&', '*')} .e-title {
+                & .e-title {
                   @media (max-height: 600px) {
                       @if ($skin-name =='Material3') {
                         margin-left: $modal-header-month-name-left-landscape-width;
@@ -574,14 +574,14 @@
                 }
               }
 
-              #{if(&, '&', '*')} th {
+              & th {
                 @media (min-device-width: 768px) {
                   font-size: $modal-range-tablet-font-size;
                   height: $modal-range-calendar-th-size;
                 }
               }
       
-              #{if(&, '&', '*')} .e-content span.e-day {
+              & .e-content span.e-day {
                 @media (min-device-width: 768px) {
                   font-size: $modal-range-tablet-font-size;
                   height: $modal-range-tablet-content-size;
@@ -589,23 +589,23 @@
                   line-height: $modal-range-tablet-content-size;
                 }
               }
-              #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover,
-              #{if(&, '&', '*')} .e-end-date.e-selected.e-range-hover {
+              & .e-start-date.e-selected.e-range-hover,
+              & .e-end-date.e-selected.e-range-hover {
                 border-radius: $modal-range-range-hover-radius;
               }
             }            
         }        
 
-        #{if( &, '&', '*')} .e-calendar-holder {
+        & .e-calendar-holder {
             height: $range-full-height;
 
-            #{if( &, '&', '*')} .e-calendar-container {
+            & .e-calendar-container {
               @media (max-height: 600px) {
                 min-height: $range-calendar-container-height;
                 height: $range-calendar-container-height;
               }
 
-              #{if( &, '&', '*')} .e-calendar {
+              & .e-calendar {
                 @media (max-height: 600px) {
                   min-height: $range-calendar-container-height;
                   height: $range-calendar-container-height;
@@ -614,7 +614,7 @@
             }
         }
 
-        #{if(&, '&', '*')} .e-calendar-container {
+        & .e-calendar-container {
           @media (max-height: 600px) {
             min-height: $modal-range-portrait-calendar-height;
             height: $modal-range-portrait-calendar-height;
@@ -625,11 +625,11 @@
           }
         }
 
-        #{if(&, '&', '*')} .e-separator {
+        & .e-separator {
             margin: $margin-zero;
         }
 
-        #{if( &, '&', '*')} .e-content.e-month {
+        & .e-content.e-month {
             height: $modal-range-portrait-calendar-content-height;
 
             table {
@@ -638,17 +638,17 @@
               border-spacing: $modal-range-calendar-overflow;
             }
         }
-        #{if( &, '&', '*')} .e-footer{
+        & .e-footer{
           display: $modal-range-footer-display;
         }
 
-        #{if(&, '&', '*')} .e-presets {
+        & .e-presets {
           max-height: $modal-range-presets-portrait-height;
           height: $modal-range-presets-portrait-height;
-          #{if(&, '&', '*')} ul {
+          & ul {
             height: $modal-range-portrait-calendar-height;
 
-            #{if(&, '&', '*')} li.e-list-item {
+            & li.e-list-item {
               font-size: $range-header-font-size;
 
               @media (min-device-width: 768px) {
@@ -658,11 +658,11 @@
            }
         }
 
-        #{if(&, '&', '*')} .e-range-mob-popup-wrap {
+        & .e-range-mob-popup-wrap {
           position: relative;
           height: $range-full-height;
 
-          #{if(&, '&', '*')} .e-model-header {
+          & .e-model-header {
             height: $modal-range-presets-header-height;
             padding: $modal-range-header-padding;
             display: $modal-range-header-display-style;
@@ -673,12 +673,12 @@
               font-size: $modal-range-header-landscape-font-size;
             }
 
-            #{if(&, '&', '*')} .e-popup-close {
+            & .e-popup-close {
               float: $modal-close-icon-float;
               padding: $modal-portrait-content-padding;
             }
 
-            #{if(&, '&', '*')} .e-model-title {
+            & .e-model-title {
               padding: $modal-portrait-content-padding;
               text-transform: $modal-range-header-title-transform;
             }
@@ -689,8 +689,8 @@
 
 @media screen and (orientation: landscape) {
   .e-daterangepick-mob-popup-wrap {
-    #{if( &, '&', '*')} .e-daterangepicker.e-popup.e-popup-expand {
-      #{if( &, '&', '*')} .e-date-range-container .e-range-header .e-model-header-wrapper .e-btn {
+    & .e-daterangepicker.e-popup.e-popup-expand {
+      & .e-date-range-container .e-range-header .e-model-header-wrapper .e-btn {
         @if $skin-name != 'fluent2' {
           padding: $padding-zero;
         }
@@ -699,8 +699,8 @@
         }
       }
 
-      #{if( &, '&', '*')} .e-calendar-holder {
-        #{if(&, '&', '*')} .e-calendar-container {
+      & .e-calendar-holder {
+        & .e-calendar-container {
           @media (min-height: 600px) {
             min-height: $range-calendar-holder-container-height;
             height: $range-calendar-holder-container-height;
@@ -711,16 +711,16 @@
             height: $range-calendar-holder-container-600-height;
           }
 
-          #{if(&, '&', '*')} .e-calendar {
+          & .e-calendar {
             @media (min-height: 600px) {
               min-height: $range-calendar-holder-container-height;
               height: $range-calendar-holder-container-height;
             }
           }
 
-          #{if(&, '&', '*')} .e-content.e-month,
-          #{if(&, '&', '*')} .e-content.e-year,
-          #{if(&, '&', '*')} .e-content.e-decade {        
+          & .e-content.e-month,
+          & .e-content.e-year,
+          & .e-content.e-decade {        
             @media (max-height: 600px) {
               height: $range-container-content-month-height;
             }
@@ -728,27 +728,27 @@
         }
       }
 
-      #{if(&, '&', '*')} .e-presets {
+      & .e-presets {
         max-height: $modal-range-presets-landscape-height;
         height: $modal-range-presets-landscape-height;
       }
 
-      #{if(&, '&', '*')} .e-range-mob-popup-wrap {
-        #{if(&, '&', '*')} .e-model-header {
+      & .e-range-mob-popup-wrap {
+        & .e-model-header {
           height: $modal-range-header-landscape-height;
           font-size: $modal-range-header-landscape-font-size;
 
-          #{if(&, '&', '*')} .e-popup-close {
+          & .e-popup-close {
             padding: $modal-landscape-padding;
           }
 
-          #{if(&, '&', '*')} .e-model-title {
+          & .e-model-title {
             padding: $modal-landscape-padding;
           }
         }
       }
       
-      #{if( &, '&', '*')} .e-date-range-container .e-range-header {
+      & .e-date-range-container .e-range-header {
           @media (max-height: 600px) {
             height: $modal-range-landscape-header-height;
           }
@@ -758,7 +758,7 @@
           }
           width: $modal-range-portrait-calendar-width;
 
-          #{if(&, '&', '*')} .e-start-end {
+          & .e-start-end {
             margin: $modal-range-calendar-padding;
             height: $modal-range-start-end-size;
 
@@ -767,23 +767,23 @@
             }
           }
 
-          #{if(&, '&', '*')} .e-day-span {
+          & .e-day-span {
             margin: $daterangepicker-day-span-margin;
             font-size: $date-range-day-span-font-size;
           }
           
         }            
 
-        #{if(&, '&', '*')} .e-calendar-container {
+        & .e-calendar-container {
           @media (min-height: 600px) {
             min-height: $modal-range-landscape-container-height;
             height: $modal-range-landscape-container-height;
           }
         }
 
-        #{if(&, '&', '*')} .e-content.e-month,
-        #{if(&, '&', '*')} .e-content.e-year,
-        #{if(&, '&', '*')} .e-content.e-decade {        
+        & .e-content.e-month,
+        & .e-content.e-year,
+        & .e-content.e-decade {        
           @media (max-height: 600px) {
             height: $modal-range-header-height;
           }