@syncfusion/ej2-calendars 31.2.18 → 32.1.19

package/styles/datepicker/tailwind3.css

@@ -2,6 +2,76 @@
 
 
 
+
+
+
+
+/* Font Family */
+/* border */
+/* 0px */
+/* 1px */
+/* 1.5px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* Radius */
+/* 1px */
+/* 2px */
+/* 3px */
+/* 4px */
+/* 5px */
+/* 6px */
+/* 7px */
+/* 8px */
+/* 9px */
+/* 10px */
+/* 11px */
+/* 12px */
+/* 13px */
+/* 14px */
+/* 15px */
+/* 16px */
+/* 17px */
+/* 18px */
+/* 19px */
+/* 20px */
+/* 21px */
+/* 22px */
+/* 23px */
+/* 24px */
+/* 25px */
+/* 26px */
+/* 27px */
+/* 28px */
+/* 29px */
+/* 30px */
+/* 31px */
+/* 32px */
+/* 33px */
+/* 34px */
+/* 35px */
+/* 36px */
+/* 37px */
+/* 38px */
+/* 39px */
+/* 40px */
+/* 41px */
+/* 42px */
+/* 43px */
+/* 44px */
+/* 45px */
+/* 46px */
+/* 47px */
+/* 48px */
+/* 49px */
+/* 50px */
+/* 5em */
+
+
 /* stylelint-disable property-no-vendor-prefix */
 /* stylelint-disable */
 .e-filled.e-float-input.e-error label.e-float-text,
@@ -15,6 +85,54 @@
   color: var(--color-sf-danger) !important;
 }
 
+.e-underline.e-input-group.e-control-wrapper,
+.e-underline.e-input-group,
+.e-underline.e-input-group:not(.e-float-icon-left),
+.e-underline.e-float-input,
+.e-underline.e-float-input.e-control-wrapper,
+.e-underline.e-input-group:not(.e-float-icon-left),
+.e-underline.e-input-group.e-success:not(.e-float-icon-left),
+.e-underline.e-input-group.e-warning:not(.e-float-icon-left),
+.e-underline.e-input-group.e-error:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
+  border: 1px solid var(--color-sf-border);
+  border-width: 1px;
+  padding-top: 1px;
+  border-radius: calc(var(--e-radius) * 0);
+}
+
+.e-filled.e-input-group,
+.e-filled.e-input-group.e-control-wrapper {
+  border-radius: calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0);
+  padding: 0 10px 0 12px;
+}
+
+.e-filled.e-float-input,
+.e-filled.e-float-input.e-control-wrapper {
+  border: 1px solid;
+  border-radius: calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0.25) calc(var(--e-radius) * 0) calc(var(--e-radius) * 0);
+  border-width: 1px;
+  margin-top: 0;
+  padding: 0;
+}
+
+.e-underline.e-input-group:not(.e-float-icon-left),
+.e-underline.e-input-group.e-success:not(.e-float-icon-left),
+.e-underline.e-input-group.e-warning:not(.e-float-icon-left),
+.e-underline.e-input-group.e-error:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-warning:not(.e-float-icon-left),
+.e-underline.e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
+  border: 1px solid;
+  border-width: 1px;
+  padding-top: 1px;
+  border-radius: calc(var(--e-radius) * 0);
+}
+
 /* stylelint-disable-line no-empty-source */
 /*! calendar bootstrap5 theme variables */
 /*! component icons */
@@ -34,7 +152,7 @@
 .e-input-group-icon.e-date-icon:focus,
 *.e-control-wrapper .e-input-group-icon.e-date-icon:focus {
   background: var(--color-sf-secondary-text-color-hover);
-  border-radius: 50%;
+  border-radius: 999px;
 }
 
 .e-small .e-input-group-icon.e-date-icon,
@@ -65,7 +183,7 @@
   display: none;
 }
 .e-datepicker.e-popup-wrapper {
-  border-radius: 6px;
+  border-radius: calc(var(--e-radius) * 0.375);
   overflow-y: hidden;
   pointer-events: auto;
 }
@@ -148,7 +266,7 @@
   }
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand {
-  border-radius: 0;
+  border-radius: calc(var(--e-radius) * 0);
 }
 .e-datepick-mob-popup-wrap .e-datepicker.e-popup-expand .e-model-header.e-blazor-device {
   height: 15vh;

package/styles/datepicker/tailwind3.scss

@@ -1,8 +1,8 @@
-@import 'ej2-base/styles/definition/tailwind3.scss';
-@import 'ej2-inputs/styles/input/tailwind3-definition.scss';
-@import 'ej2-popups/styles/popup/tailwind3-definition.scss';
-@import '../calendar/tailwind3-definition.scss';
-@import 'tailwind3-definition.scss';
-@import 'icons/tailwind3.scss';
-@import 'all.scss';
-@import 'bigger.scss';
+@use 'ej2-base/styles/definition/tailwind3' as *;
+@use 'ej2-inputs/styles/input/tailwind3-definition' as *;
+@use 'ej2-popups/styles/popup/tailwind3-definition' as *;
+@use '../calendar/tailwind3-definition' as *;
+@use 'tailwind3-definition' as *;
+@use 'icons/tailwind3' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/daterangepicker/_all.scss

@@ -1,2 +1,2 @@
-@import 'layout.scss';
-@import 'theme.scss';
+@use 'layout' as *;
+@use 'theme' as *;

package/styles/daterangepicker/_bds-definition.scss

@@ -1,3 +1,6 @@
+@use 'ej2-base/styles/definition/bds' as *;
+@forward 'ej2-base/styles/definition/bds';
+
 // size variables
 $range-btn-font-weight: $font-weight-medium !default;
 $range-btn-width: 50% !default;
@@ -292,3 +295,33 @@ $footer-top-border-color :1px solid $border-light !default;
 .e-daterangepicker.e-popup .e-footer{
   border-top: 1px solid $footer-top-border-color !important;
 }
+
+$padding-zero: 0;
+$margin-zero: 0;
+$daterangepicker-day-span-margin: 8px 0;
+$daterangepicker-span-padding: 11px;
+$height-zero: 0 !default;
+$range-full-height: 100% !default;
+$range-full-width: 100% !default;
+$range-content-min-height: 40px !default;
+$range-normal-content-min-height: 33px !default;
+
+//flu2
+$title-hover-width: 72% !default;
+$date-range-icon-padding: 6px 12px 6px 6px !default;
+
+//tail3
+$date-range-popup-next-right: -10px !default;
+$date-range-popup-next-top: 4px !default;
+
+//
+$zero-border: 0 !default;
+$range-device-span-font-size: 18px !default;
+$range-calendar-container-height: 78vh !default;
+$range-footer-font-size: 18px !default;
+$range-calendar-holder-container-height: 70vh !default;
+$range-calendar-holder-container-600-height: 65% !default;
+$range-container-content-month-height: 50vh !default;
+$date-range-day-span-font-size: 16px !default;
+$range-outline-float-text-width: calc(100% - 80px);
+$range-outline-static-clear-float-text-width: calc(100% - 110px);

package/styles/daterangepicker/_bigger.scss

@@ -1,3 +1,5 @@
+@use 'ej2-base/styles/common/mixin' as *;
+@use './theme-variables' as *;
 @include export-module('daterangepicker-bigger') {
 
   .e-bigger #{&}.e-daterangepicker.e-range-modal,
@@ -8,13 +10,13 @@
     @if $skin-name == 'Material3' {
       background: $range-overlay;
     }
-    height: 100%;
-    left: 0;
+    height: $range-full-height;
+    left: $margin-zero;
     opacity: .5;
     pointer-events: auto;
     position: fixed;
-    top: 0;
-    width: 100%;
+    top: $margin-zero;
+    width: $range-full-width;
     z-index: 999;
   }
 
@@ -220,7 +222,7 @@
             margin: $range-device-indicator-margin;
             
             @if $skin-name == 'fluentUI' or $skin-name == 'bootstrap5' or $skin-name == 'bootstrap5.3' or $skin-name == 'bootstrap4' {
-              margin-bottom: 0;
+              margin-bottom: $margin-zero;
             }
           }
         }
@@ -240,7 +242,7 @@
   .e-bigger .e-content-placeholder.e-daterangepicker.e-placeholder-daterangepicker,
   .e-bigger.e-content-placeholder.e-daterangepicker.e-placeholder-daterangepicker {
     background-size: 250px 40px;
-    min-height: 40px;
+    min-height: $range-content-min-height;
   }
 
   .e-bigger .e-calendar .e-content.e-month td.e-today.e-range-hover span.e-day {
@@ -617,7 +619,7 @@
           color: $range-calendar-header-dark-color;
           text-decoration: none;
           @if $skin-name == 'fluent2' {
-            width: 72%;
+            width: $title-hover-width;
           }
         }
         #{if(&, '&', '*')} .e-content .e-range-hover {
@@ -912,7 +914,7 @@
         border-radius: $range-icon-bigger-border-radius;
       }
       @if $skin-name == 'fluent2' {
-        padding: 6px 12px 6px 6px;
+        padding: $date-range-icon-padding;
       }
       @if $skin-name == 'bootstrap-dark' or $skin-name == 'bootstrap' or $skin-name == 'fabric-dark' or $skin-name == 'fabric'  or $skin-name == 'highcontrast-light' or $skin-name == 'highcontrast' {
         font-size: $range-bigger-icon-font-size;

package/styles/daterangepicker/_bootstrap-dark-definition.scss

@@ -1,4 +1,6 @@
 @use 'sass:color';
+@use 'ej2-base/styles/definition/bootstrap-dark' as *;
+@forward 'ej2-base/styles/definition/bootstrap-dark';
 
 $range-bg-color:  $content-bg-color !default;
 $range-primary-color: $brand-primary !default;
@@ -258,3 +260,23 @@ $modal-range-header-text-color: $grey-dark-font !default;
 $modal-range-tablet-font-size: 18px !default;
 
 $range-header-font-size: 16px !default;
+
+$padding-zero: 0;
+$margin-zero: 0;
+$daterangepicker-day-span-margin: 8px 0;
+$daterangepicker-span-padding: 11px;
+$height-zero: 0 !default;
+$range-full-height: 100% !default;
+$range-full-width: 100% !default;
+$range-content-min-height: 40px !default;
+$range-normal-content-min-height: 33px !default;
+$zero-border: 0 !default;
+$range-device-span-font-size: 18px !default;
+$range-calendar-container-height: 78vh !default;
+$range-footer-font-size: 18px !default;
+$range-calendar-holder-container-height: 70vh !default;
+$range-calendar-holder-container-600-height: 65% !default;
+$range-container-content-month-height: 50vh !default;
+$date-range-day-span-font-size: 16px !default;
+$range-outline-float-text-width: calc(100% - 80px);
+$range-outline-static-clear-float-text-width: calc(100% - 110px);

package/styles/daterangepicker/_bootstrap-definition.scss

@@ -1,5 +1,6 @@
 @use 'sass:color';
-
+@use 'ej2-base/styles/definition/bootstrap' as *;
+@forward 'ej2-base/styles/definition/bootstrap';
 $range-bg-color:  $content-bg-color !default;
 $range-primary-color: $brand-primary !default;
 $range-primary-font-color: $brand-primary-font !default;
@@ -258,3 +259,23 @@ $modal-range-header-text-color: $grey-light-font !default;
 $modal-range-tablet-font-size: 18px !default;
 
 $range-header-font-size: 16px !default;
+
+$padding-zero: 0;
+$margin-zero: 0;
+$daterangepicker-day-span-margin: 8px 0;
+$daterangepicker-span-padding: 11px;
+$height-zero: 0 !default;
+$range-full-height: 100% !default;
+$range-full-width: 100% !default;
+$range-content-min-height: 40px !default;
+$range-normal-content-min-height: 33px !default;
+$zero-border: 0 !default;
+$range-device-span-font-size: 18px !default;
+$range-calendar-container-height: 78vh !default;
+$range-footer-font-size: 18px !default;
+$range-calendar-holder-container-height: 70vh !default;
+$range-calendar-holder-container-600-height: 65% !default;
+$range-container-content-month-height: 50vh !default;
+$date-range-day-span-font-size: 16px !default;
+$range-outline-float-text-width: calc(100% - 80px);
+$range-outline-static-clear-float-text-width: calc(100% - 110px);

package/styles/daterangepicker/_bootstrap4-definition.scss

@@ -1,5 +1,6 @@
 @use 'sass:color';
-
+@use 'ej2-base/styles/definition/bootstrap4' as *;
+@forward 'ej2-base/styles/definition/bootstrap4';
 $range-bg-color: $content-bg !default;
 $range-primary-color: $primary !default;
 $range-primary-font-color: $primary-font !default;
@@ -268,3 +269,23 @@ $modal-range-header-text-color: $gray-900 !default;
 $modal-range-tablet-font-size: 18px !default;
 
 $range-header-font-size: 16px !default;
+
+$padding-zero: 0;
+$margin-zero: 0;
+$daterangepicker-day-span-margin: 8px 0;
+$daterangepicker-span-padding: 11px;
+$height-zero: 0 !default;
+$range-full-height: 100% !default;
+$range-full-width: 100% !default;
+$range-content-min-height: 40px !default;
+$range-normal-content-min-height: 33px !default;
+$zero-border: 0 !default;
+$range-device-span-font-size: 18px !default;
+$range-calendar-container-height: 78vh !default;
+$range-footer-font-size: 18px !default;
+$range-calendar-holder-container-height: 70vh !default;
+$range-calendar-holder-container-600-height: 65% !default;
+$range-container-content-month-height: 50vh !default;
+$date-range-day-span-font-size: 16px !default;
+$range-outline-float-text-width: calc(100% - 80px);
+$range-outline-static-clear-float-text-width: calc(100% - 110px);