npm - @syncfusion/blazor-themes - Versions diffs - 22.2.12 → 23.1.36 - Mend

@syncfusion/blazor-themes 22.2.12 → 23.1.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (365) hide show

package/SCSS-Themes/calendars/daterangepicker/bootstrap-dark.scss CHANGED Viewed

@@ -243,13 +243,13 @@ $modal-range-footer-display: none !default;
 $modal-range-landscape-header-height: 27vh !default;
 $modal-range-landscape-conetent-overflow: auto !default;
 $modal-range-table-display: table !default;
-$modal-range-start-end-size: 38px !default;
+$modal-range-start-end-size: 28px !default;
 // header styles for presets
 $modal-range-presets-header-height: 10% !default;
 $modal-range-presets-portrait-height: 90% !default;
 $modal-range-presets-landscape-height: 85% !default;
-$modal-range-header-padding: 2.5vh 2.5vw !default;
+$modal-range-header-padding: 2.5vh 2.5vw 2.5vh 1.5vw !default;
 $modal-range-header-display-style: flex !default;
 $modal-range-header-content-align: center !default;
 $modal-range-header-portrait-font-size: 3vh !default;
@@ -258,7 +258,7 @@ $modal-portrait-content-padding: 1vh 2vw !default;
 $modal-range-header-title-transform: capitalize !default;
 $modal-range-header-border-bottom: 1px solid $grey-44 !default;
 $modal-range-header-landscape-height: 15% !default;
-$modal-range-header-landscape-font-size: 2vw !default;
+$modal-range-header-landscape-font-size: 18px !default;
 $modal-landscape-padding: 1vh 1vw !default;
 // modal dialog colors
@@ -266,7 +266,7 @@ $modal-range-header-bg-color: $grey-dark !default;
 $modal-range-header-text-color: $grey-dark-font !default;
 // tablet device style changes for modal popup
-$modal-range-tablet-font-size: 24px !default;
+$modal-range-tablet-font-size: 18px !default;
 $range-header-font-size: 16px !default;
@@ -986,12 +986,36 @@ $range-header-font-size: 16px !default;
                 padding: $modal-range-portrait-month-header-padding;
                 line-height: $modal-range-month-header-line-height;
-                #{if(&, '&', '*')} .e-prev,
+                #{if(&, '&', '*')} .e-prev {
+                  height: $modal-range-prev-next-icon-size;
+                  width: $modal-range-prev-next-icon-size;
+                  @if ($skin-name == 'Material3') {
+                    margin-right: 60vw;
+                    vertical-align: inherit;
+                    font-size: $modal-range-tablet-font-size
+                  }
+                  @media screen and (orientation: landscape) {
+                    @if ($skin-name == 'Material3') {
+                      margin-right: 78vw;
+                      vertical-align: inherit;
+                    }
+                  }
+                  #{if(&, '&', '*')} span {
+                    @media (min-device-width: 768px) {
+                      font-size: 18px;
+                      padding: 11px;
+                    }
+                  }
+                }
                 #{if(&, '&', '*')} .e-next {
                   height: $modal-range-prev-next-icon-size;
                   width: $modal-range-prev-next-icon-size;
+                  @if ($skin-name == 'Material3') {
+                    margin-right: 42px;
+                  }
-                  #{if(&, '&', '*')} span{
+                  #{if(&, '&', '*')} span {
                     padding: $modal-range-prev-next-icon-padding;
                     line-height: $modal-range-prev-next-icon-line-height;
                     @media (min-device-width: 768px) {
@@ -1002,10 +1026,26 @@ $range-header-font-size: 16px !default;
                 #{if(&, '&', '*')} .e-title {
                   @media (max-height: 600px) {
+                    @if ($skin-name == 'Material3') {
+                      margin-left: $modal-header-month-name-left-width;
+                      position: absolute;
+                      text-align: center;
+                      vertical-align: middle;
+                      width: $modal-header-month-name-width;
+                      line-height: $modal-month-name-line-height;
+                  }
                     line-height: $modal-range-month-landscape-title-line-height;
                   }
                   @media (min-height: 600px) {
+                    @if ($skin-name == 'Material3') {
+                      margin-left: $modal-header-month-name-left-width;
+                      position: absolute;
+                      text-align: center;
+                      vertical-align: middle;
+                      width: $modal-header-month-name-width;
+                      line-height: $modal-month-name-line-height;
+                  }
                     line-height: $modal-range-month-header-title-line-height;
                   }
@@ -1053,14 +1093,6 @@ $range-header-font-size: 16px !default;
                 }
               }
             }
-            #{if( &, '&', '*')} .e-footer {
-              display: block;
-              #{if( &, '&', '*')} .e-btn.e-apply,
-              #{if( &, '&', '*')} .e-btn.e-cancel {
-                float: right;
-              }
-            }
         }
         #{if(&, '&', '*')} .e-calendar-container {
@@ -1144,13 +1176,10 @@ $range-header-font-size: 16px !default;
     #{if( &, '&', '*')} .e-daterangepicker.e-popup.e-popup-expand {
-      #{if( &, '&', '*')} .e-date-range-container .e-range-header.e-blazor-device {
-        @media (max-height: 600px) {
-            height: 23vh;
-        }
-        @media (min-height: 600px) {
-          height: 20vh;
+      #{if( &, '&', '*')} .e-date-range-container .e-range-header .e-model-header-wrapper .e-btn {
+        padding: 0;
+        @media (min-device-width: 768px) {
+          font-size: $modal-range-header-landscape-font-size;
         }
       }
@@ -1225,8 +1254,8 @@ $range-header-font-size: 16px !default;
           }
           #{if(&, '&', '*')} .e-day-span {
-            margin: 5px 0;
-            font-size: 20px;
+            margin: 8px 0;
+            font-size: 16px;
           }
         }

package/SCSS-Themes/calendars/daterangepicker/bootstrap.scss CHANGED Viewed

@@ -243,13 +243,13 @@ $modal-range-footer-display: none !default;
 $modal-range-landscape-header-height: 27vh !default;
 $modal-range-landscape-conetent-overflow: auto !default;
 $modal-range-table-display: table !default;
-$modal-range-start-end-size: 38px !default;
+$modal-range-start-end-size: 28px !default;
 // header styles for presets
 $modal-range-presets-header-height: 10% !default;
 $modal-range-presets-portrait-height: 90% !default;
 $modal-range-presets-landscape-height: 85% !default;
-$modal-range-header-padding: 2.5vh 2.5vw !default;
+$modal-range-header-padding: 2.5vh 2.5vw 2.5vh 1.5vw !default;
 $modal-range-header-display-style: flex !default;
 $modal-range-header-content-align: center !default;
 $modal-range-header-portrait-font-size: 3vh !default;
@@ -258,7 +258,7 @@ $modal-portrait-content-padding: 1vh 2vw !default;
 $modal-range-header-title-transform: capitalize !default;
 $modal-range-header-border-bottom: 1px solid $grey-cc !default;
 $modal-range-header-landscape-height: 15% !default;
-$modal-range-header-landscape-font-size: 2vw !default;
+$modal-range-header-landscape-font-size: 18px !default;
 $modal-landscape-padding: 1vh 1vw !default;
 // modal dialog colors
@@ -266,7 +266,7 @@ $modal-range-header-bg-color: $grey-white !default;
 $modal-range-header-text-color: $grey-light-font !default;
 // tablet device style changes for modal popup
-$modal-range-tablet-font-size: 24px !default;
+$modal-range-tablet-font-size: 18px !default;
 $range-header-font-size: 16px !default;
@@ -986,12 +986,36 @@ $range-header-font-size: 16px !default;
                 padding: $modal-range-portrait-month-header-padding;
                 line-height: $modal-range-month-header-line-height;
-                #{if(&, '&', '*')} .e-prev,
+                #{if(&, '&', '*')} .e-prev {
+                  height: $modal-range-prev-next-icon-size;
+                  width: $modal-range-prev-next-icon-size;
+                  @if ($skin-name == 'Material3') {
+                    margin-right: 60vw;
+                    vertical-align: inherit;
+                    font-size: $modal-range-tablet-font-size
+                  }
+                  @media screen and (orientation: landscape) {
+                    @if ($skin-name == 'Material3') {
+                      margin-right: 78vw;
+                      vertical-align: inherit;
+                    }
+                  }
+                  #{if(&, '&', '*')} span {
+                    @media (min-device-width: 768px) {
+                      font-size: 18px;
+                      padding: 11px;
+                    }
+                  }
+                }
                 #{if(&, '&', '*')} .e-next {
                   height: $modal-range-prev-next-icon-size;
                   width: $modal-range-prev-next-icon-size;
+                  @if ($skin-name == 'Material3') {
+                    margin-right: 42px;
+                  }
-                  #{if(&, '&', '*')} span{
+                  #{if(&, '&', '*')} span {
                     padding: $modal-range-prev-next-icon-padding;
                     line-height: $modal-range-prev-next-icon-line-height;
                     @media (min-device-width: 768px) {
@@ -1002,10 +1026,26 @@ $range-header-font-size: 16px !default;
                 #{if(&, '&', '*')} .e-title {
                   @media (max-height: 600px) {
+                    @if ($skin-name == 'Material3') {
+                      margin-left: $modal-header-month-name-left-width;
+                      position: absolute;
+                      text-align: center;
+                      vertical-align: middle;
+                      width: $modal-header-month-name-width;
+                      line-height: $modal-month-name-line-height;
+                  }
                     line-height: $modal-range-month-landscape-title-line-height;
                   }
                   @media (min-height: 600px) {
+                    @if ($skin-name == 'Material3') {
+                      margin-left: $modal-header-month-name-left-width;
+                      position: absolute;
+                      text-align: center;
+                      vertical-align: middle;
+                      width: $modal-header-month-name-width;
+                      line-height: $modal-month-name-line-height;
+                  }
                     line-height: $modal-range-month-header-title-line-height;
                   }
@@ -1053,14 +1093,6 @@ $range-header-font-size: 16px !default;
                 }
               }
             }
-            #{if( &, '&', '*')} .e-footer {
-              display: block;
-              #{if( &, '&', '*')} .e-btn.e-apply,
-              #{if( &, '&', '*')} .e-btn.e-cancel {
-                float: right;
-              }
-            }
         }
         #{if(&, '&', '*')} .e-calendar-container {
@@ -1144,13 +1176,10 @@ $range-header-font-size: 16px !default;
     #{if( &, '&', '*')} .e-daterangepicker.e-popup.e-popup-expand {
-      #{if( &, '&', '*')} .e-date-range-container .e-range-header.e-blazor-device {
-        @media (max-height: 600px) {
-            height: 23vh;
-        }
-        @media (min-height: 600px) {
-          height: 20vh;
+      #{if( &, '&', '*')} .e-date-range-container .e-range-header .e-model-header-wrapper .e-btn {
+        padding: 0;
+        @media (min-device-width: 768px) {
+          font-size: $modal-range-header-landscape-font-size;
         }
       }
@@ -1225,8 +1254,8 @@ $range-header-font-size: 16px !default;
           }
           #{if(&, '&', '*')} .e-day-span {
-            margin: 5px 0;
-            font-size: 20px;
+            margin: 8px 0;
+            font-size: 16px;
           }
         }

package/SCSS-Themes/calendars/daterangepicker/bootstrap4.scss CHANGED Viewed

@@ -253,13 +253,13 @@ $modal-range-footer-display: none !default;
 $modal-range-landscape-header-height: 27vh !default;
 $modal-range-landscape-conetent-overflow: auto !default;
 $modal-range-table-display: table !default;
-$modal-range-start-end-size: 38px !default;
+$modal-range-start-end-size: 28px !default;
 // header styles for presets
 $modal-range-presets-header-height: 10% !default;
 $modal-range-presets-portrait-height: 90% !default;
 $modal-range-presets-landscape-height: 85% !default;
-$modal-range-header-padding: 2.5vh 2.5vw !default;
+$modal-range-header-padding: 2.5vh 2.5vw 2.5vh 1.5vw !default;
 $modal-range-header-display-style: flex !default;
 $modal-range-header-content-align: center !default;
 $modal-range-header-portrait-font-size: 3vh !default;
@@ -268,7 +268,7 @@ $modal-portrait-content-padding: 1vh 2vw !default;
 $modal-range-header-title-transform: capitalize !default;
 $modal-range-header-border-bottom: none !default;
 $modal-range-header-landscape-height: 15% !default;
-$modal-range-header-landscape-font-size: 2vw !default;
+$modal-range-header-landscape-font-size: 18px !default;
 $modal-landscape-padding: 1vh 1vw !default;
 // modal dialog colors
@@ -276,7 +276,7 @@ $modal-range-header-bg-color: $content-popup-bg !default;
 $modal-range-header-text-color: $gray-900 !default;
 // tablet device style changes for modal popup
-$modal-range-tablet-font-size: 24px !default;
+$modal-range-tablet-font-size: 18px !default;
 $range-header-font-size: 16px !default;
@@ -996,12 +996,36 @@ $range-header-font-size: 16px !default;
                 padding: $modal-range-portrait-month-header-padding;
                 line-height: $modal-range-month-header-line-height;
-                #{if(&, '&', '*')} .e-prev,
+                #{if(&, '&', '*')} .e-prev {
+                  height: $modal-range-prev-next-icon-size;
+                  width: $modal-range-prev-next-icon-size;
+                  @if ($skin-name == 'Material3') {
+                    margin-right: 60vw;
+                    vertical-align: inherit;
+                    font-size: $modal-range-tablet-font-size
+                  }
+                  @media screen and (orientation: landscape) {
+                    @if ($skin-name == 'Material3') {
+                      margin-right: 78vw;
+                      vertical-align: inherit;
+                    }
+                  }
+                  #{if(&, '&', '*')} span {
+                    @media (min-device-width: 768px) {
+                      font-size: 18px;
+                      padding: 11px;
+                    }
+                  }
+                }
                 #{if(&, '&', '*')} .e-next {
                   height: $modal-range-prev-next-icon-size;
                   width: $modal-range-prev-next-icon-size;
+                  @if ($skin-name == 'Material3') {
+                    margin-right: 42px;
+                  }
-                  #{if(&, '&', '*')} span{
+                  #{if(&, '&', '*')} span {
                     padding: $modal-range-prev-next-icon-padding;
                     line-height: $modal-range-prev-next-icon-line-height;
                     @media (min-device-width: 768px) {
@@ -1012,10 +1036,26 @@ $range-header-font-size: 16px !default;
                 #{if(&, '&', '*')} .e-title {
                   @media (max-height: 600px) {
+                    @if ($skin-name == 'Material3') {
+                      margin-left: $modal-header-month-name-left-width;
+                      position: absolute;
+                      text-align: center;
+                      vertical-align: middle;
+                      width: $modal-header-month-name-width;
+                      line-height: $modal-month-name-line-height;
+                  }
                     line-height: $modal-range-month-landscape-title-line-height;
                   }
                   @media (min-height: 600px) {
+                    @if ($skin-name == 'Material3') {
+                      margin-left: $modal-header-month-name-left-width;
+                      position: absolute;
+                      text-align: center;
+                      vertical-align: middle;
+                      width: $modal-header-month-name-width;
+                      line-height: $modal-month-name-line-height;
+                  }
                     line-height: $modal-range-month-header-title-line-height;
                   }
@@ -1063,14 +1103,6 @@ $range-header-font-size: 16px !default;
                 }
               }
             }
-            #{if( &, '&', '*')} .e-footer {
-              display: block;
-              #{if( &, '&', '*')} .e-btn.e-apply,
-              #{if( &, '&', '*')} .e-btn.e-cancel {
-                float: right;
-              }
-            }
         }
         #{if(&, '&', '*')} .e-calendar-container {
@@ -1154,13 +1186,10 @@ $range-header-font-size: 16px !default;
     #{if( &, '&', '*')} .e-daterangepicker.e-popup.e-popup-expand {
-      #{if( &, '&', '*')} .e-date-range-container .e-range-header.e-blazor-device {
-        @media (max-height: 600px) {
-            height: 23vh;
-        }
-        @media (min-height: 600px) {
-          height: 20vh;
+      #{if( &, '&', '*')} .e-date-range-container .e-range-header .e-model-header-wrapper .e-btn {
+        padding: 0;
+        @media (min-device-width: 768px) {
+          font-size: $modal-range-header-landscape-font-size;
         }
       }
@@ -1235,8 +1264,8 @@ $range-header-font-size: 16px !default;
           }
           #{if(&, '&', '*')} .e-day-span {
-            margin: 5px 0;
-            font-size: 20px;
+            margin: 8px 0;
+            font-size: 16px;
           }
         }

package/SCSS-Themes/calendars/daterangepicker/bootstrap5-dark.scss CHANGED Viewed

@@ -281,13 +281,13 @@ $modal-range-footer-display: none !default;
 $modal-range-landscape-header-height: 27vh !default;
 $modal-range-landscape-conetent-overflow: auto !default;
 $modal-range-table-display: table !default;
-$modal-range-start-end-size: 38px !default;
+$modal-range-start-end-size: 28px !default;
 // header styles for presets
 $modal-range-presets-header-height: 10% !default;
 $modal-range-presets-portrait-height: 90% !default;
 $modal-range-presets-landscape-height: 85% !default;
-$modal-range-header-padding: 2.5vh 2.5vw !default;
+$modal-range-header-padding: 2.5vh 2.5vw 2.5vh 1.5vw !default;
 $modal-range-header-display-style: flex !default;
 $modal-range-header-content-align: center !default;
 $modal-range-header-portrait-font-size: 3vh !default;
@@ -296,7 +296,7 @@ $modal-portrait-content-padding: 1vh 2vw !default;
 $modal-range-header-title-transform: capitalize !default;
 $modal-range-header-border-bottom: 1px solid $border-light !default;
 $modal-range-header-landscape-height: 15% !default;
-$modal-range-header-landscape-font-size: 2vw !default;
+$modal-range-header-landscape-font-size: 18px !default;
 $modal-landscape-padding: 1vh 1vw !default;
 // modal dialog colors
@@ -304,7 +304,7 @@ $modal-range-header-bg-color: $flyout-bg-color !default;
 $modal-range-header-text-color: $content-text-color-alt1 !default;
 // tablet device style changes for modal popup
-$modal-range-tablet-font-size: 24px !default;
+$modal-range-tablet-font-size: 18px !default;
 $range-header-font-size: 16px !default;
@@ -1024,12 +1024,36 @@ $range-header-font-size: 16px !default;
                 padding: $modal-range-portrait-month-header-padding;
                 line-height: $modal-range-month-header-line-height;
-                #{if(&, '&', '*')} .e-prev,
+                #{if(&, '&', '*')} .e-prev {
+                  height: $modal-range-prev-next-icon-size;
+                  width: $modal-range-prev-next-icon-size;
+                  @if ($skin-name == 'Material3') {
+                    margin-right: 60vw;
+                    vertical-align: inherit;
+                    font-size: $modal-range-tablet-font-size
+                  }
+                  @media screen and (orientation: landscape) {
+                    @if ($skin-name == 'Material3') {
+                      margin-right: 78vw;
+                      vertical-align: inherit;
+                    }
+                  }
+                  #{if(&, '&', '*')} span {
+                    @media (min-device-width: 768px) {
+                      font-size: 18px;
+                      padding: 11px;
+                    }
+                  }
+                }
                 #{if(&, '&', '*')} .e-next {
                   height: $modal-range-prev-next-icon-size;
                   width: $modal-range-prev-next-icon-size;
+                  @if ($skin-name == 'Material3') {
+                    margin-right: 42px;
+                  }
-                  #{if(&, '&', '*')} span{
+                  #{if(&, '&', '*')} span {
                     padding: $modal-range-prev-next-icon-padding;
                     line-height: $modal-range-prev-next-icon-line-height;
                     @media (min-device-width: 768px) {
@@ -1040,10 +1064,26 @@ $range-header-font-size: 16px !default;
                 #{if(&, '&', '*')} .e-title {
                   @media (max-height: 600px) {
+                    @if ($skin-name == 'Material3') {
+                      margin-left: $modal-header-month-name-left-width;
+                      position: absolute;
+                      text-align: center;
+                      vertical-align: middle;
+                      width: $modal-header-month-name-width;
+                      line-height: $modal-month-name-line-height;
+                  }
                     line-height: $modal-range-month-landscape-title-line-height;
                   }
                   @media (min-height: 600px) {
+                    @if ($skin-name == 'Material3') {
+                      margin-left: $modal-header-month-name-left-width;
+                      position: absolute;
+                      text-align: center;
+                      vertical-align: middle;
+                      width: $modal-header-month-name-width;
+                      line-height: $modal-month-name-line-height;
+                  }
                     line-height: $modal-range-month-header-title-line-height;
                   }
@@ -1091,14 +1131,6 @@ $range-header-font-size: 16px !default;
                 }
               }
             }
-            #{if( &, '&', '*')} .e-footer {
-              display: block;
-              #{if( &, '&', '*')} .e-btn.e-apply,
-              #{if( &, '&', '*')} .e-btn.e-cancel {
-                float: right;
-              }
-            }
         }
         #{if(&, '&', '*')} .e-calendar-container {
@@ -1182,13 +1214,10 @@ $range-header-font-size: 16px !default;
     #{if( &, '&', '*')} .e-daterangepicker.e-popup.e-popup-expand {
-      #{if( &, '&', '*')} .e-date-range-container .e-range-header.e-blazor-device {
-        @media (max-height: 600px) {
-            height: 23vh;
-        }
-        @media (min-height: 600px) {
-          height: 20vh;
+      #{if( &, '&', '*')} .e-date-range-container .e-range-header .e-model-header-wrapper .e-btn {
+        padding: 0;
+        @media (min-device-width: 768px) {
+          font-size: $modal-range-header-landscape-font-size;
         }
       }
@@ -1263,8 +1292,8 @@ $range-header-font-size: 16px !default;
           }
           #{if(&, '&', '*')} .e-day-span {
-            margin: 5px 0;
-            font-size: 20px;
+            margin: 8px 0;
+            font-size: 16px;
           }
         }