npm - @syncfusion/blazor-themes - Versions diffs - 23.1.41 → 23.1.42 - Mend

@syncfusion/blazor-themes 23.1.41 → 23.1.42

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 (129) hide show

package/SCSS-Themes/buttons/switch/fabric-dark.scss CHANGED Viewed

@@ -971,11 +971,15 @@ $switch-bigger-small-ripple-width: 36px !default;
         }
         & .e-ripple-container {
-          background-color: $switch-checked-ripple-bg-color;
+          @if $skin-name == 'Material3' {
+            background-color: $switch-checked-ripple-bg-color;
+          }
         }
         & .e-ripple-check.e-ripple-container {
-          background-color: $switch-ripple-bg-color;
+          @if $skin-name == 'Material3' {
+            background-color: $switch-ripple-bg-color;
+          }
         }
       }
     }

package/SCSS-Themes/buttons/switch/fabric.scss CHANGED Viewed

@@ -969,11 +969,15 @@ $switch-bigger-small-ripple-width: 36px !default;
         }
         & .e-ripple-container {
-          background-color: $switch-checked-ripple-bg-color;
+          @if $skin-name == 'Material3' {
+            background-color: $switch-checked-ripple-bg-color;
+          }
         }
         & .e-ripple-check.e-ripple-container {
-          background-color: $switch-ripple-bg-color;
+          @if $skin-name == 'Material3' {
+            background-color: $switch-ripple-bg-color;
+          }
         }
       }
     }

package/SCSS-Themes/buttons/switch/fluent-dark.scss CHANGED Viewed

@@ -964,11 +964,15 @@ $switch-handle-off-hover-bg-color: $border-alt !default;
         }
         & .e-ripple-container {
-          background-color: $switch-checked-ripple-bg-color;
+          @if $skin-name == 'Material3' {
+            background-color: $switch-checked-ripple-bg-color;
+          }
         }
         & .e-ripple-check.e-ripple-container {
-          background-color: $switch-ripple-bg-color;
+          @if $skin-name == 'Material3' {
+            background-color: $switch-ripple-bg-color;
+          }
         }
       }
     }

package/SCSS-Themes/buttons/switch/fluent.scss CHANGED Viewed

@@ -964,11 +964,15 @@ $switch-handle-off-hover-bg-color: $border-alt !default;
         }
         & .e-ripple-container {
-          background-color: $switch-checked-ripple-bg-color;
+          @if $skin-name == 'Material3' {
+            background-color: $switch-checked-ripple-bg-color;
+          }
         }
         & .e-ripple-check.e-ripple-container {
-          background-color: $switch-ripple-bg-color;
+          @if $skin-name == 'Material3' {
+            background-color: $switch-ripple-bg-color;
+          }
         }
       }
     }

package/SCSS-Themes/buttons/switch/highcontrast.scss CHANGED Viewed

@@ -971,11 +971,15 @@ $switch-bigger-small-ripple-width: 36px !default;
         }
         & .e-ripple-container {
-          background-color: $switch-checked-ripple-bg-color;
+          @if $skin-name == 'Material3' {
+            background-color: $switch-checked-ripple-bg-color;
+          }
         }
         & .e-ripple-check.e-ripple-container {
-          background-color: $switch-ripple-bg-color;
+          @if $skin-name == 'Material3' {
+            background-color: $switch-ripple-bg-color;
+          }
         }
       }
     }

package/SCSS-Themes/buttons/switch/material-dark.scss CHANGED Viewed

@@ -979,11 +979,15 @@ $switch-handle-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2),
         }
         & .e-ripple-container {
-          background-color: $switch-checked-ripple-bg-color;
+          @if $skin-name == 'Material3' {
+            background-color: $switch-checked-ripple-bg-color;
+          }
         }
         & .e-ripple-check.e-ripple-container {
-          background-color: $switch-ripple-bg-color;
+          @if $skin-name == 'Material3' {
+            background-color: $switch-ripple-bg-color;
+          }
         }
       }
     }

package/SCSS-Themes/buttons/switch/material.scss CHANGED Viewed

@@ -973,11 +973,15 @@ $switch-bigger-small-handle-to: 0 !default;
         }
         & .e-ripple-container {
-          background-color: $switch-checked-ripple-bg-color;
+          @if $skin-name == 'Material3' {
+            background-color: $switch-checked-ripple-bg-color;
+          }
         }
         & .e-ripple-check.e-ripple-container {
-          background-color: $switch-ripple-bg-color;
+          @if $skin-name == 'Material3' {
+            background-color: $switch-ripple-bg-color;
+          }
         }
       }
     }

package/SCSS-Themes/buttons/switch/material3-dark.scss CHANGED Viewed

@@ -987,11 +987,15 @@ $switch-small-off-ripple-left: -7px !default;
         }
         & .e-ripple-container {
-          background-color: $switch-checked-ripple-bg-color;
+          @if $skin-name == 'Material3' {
+            background-color: $switch-checked-ripple-bg-color;
+          }
         }
         & .e-ripple-check.e-ripple-container {
-          background-color: $switch-ripple-bg-color;
+          @if $skin-name == 'Material3' {
+            background-color: $switch-ripple-bg-color;
+          }
         }
       }
     }

package/SCSS-Themes/buttons/switch/material3.scss CHANGED Viewed

@@ -987,11 +987,15 @@ $switch-small-off-ripple-left: -7px !default;
         }
         & .e-ripple-container {
-          background-color: $switch-checked-ripple-bg-color;
+          @if $skin-name == 'Material3' {
+            background-color: $switch-checked-ripple-bg-color;
+          }
         }
         & .e-ripple-check.e-ripple-container {
-          background-color: $switch-ripple-bg-color;
+          @if $skin-name == 'Material3' {
+            background-color: $switch-ripple-bg-color;
+          }
         }
       }
     }

package/SCSS-Themes/buttons/switch/tailwind-dark.scss CHANGED Viewed

@@ -962,11 +962,15 @@ $switch-handle-off-hover-bg-color: $content-bg-color !default;
         }
         & .e-ripple-container {
-          background-color: $switch-checked-ripple-bg-color;
+          @if $skin-name == 'Material3' {
+            background-color: $switch-checked-ripple-bg-color;
+          }
         }
         & .e-ripple-check.e-ripple-container {
-          background-color: $switch-ripple-bg-color;
+          @if $skin-name == 'Material3' {
+            background-color: $switch-ripple-bg-color;
+          }
         }
       }
     }

package/SCSS-Themes/buttons/switch/tailwind.scss CHANGED Viewed

@@ -962,11 +962,15 @@ $switch-handle-off-hover-bg-color: $content-bg-color !default;
         }
         & .e-ripple-container {
-          background-color: $switch-checked-ripple-bg-color;
+          @if $skin-name == 'Material3' {
+            background-color: $switch-checked-ripple-bg-color;
+          }
         }
         & .e-ripple-check.e-ripple-container {
-          background-color: $switch-ripple-bg-color;
+          @if $skin-name == 'Material3' {
+            background-color: $switch-ripple-bg-color;
+          }
         }
       }
     }

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

@@ -383,8 +383,8 @@ $range-header-font-size: 16px !default;
           #{if(&, '&', '*')} .e-title {
             cursor: $range-cursor-pointer-style;
             line-height: $range-normal-nav-icon-height;
-            width: $range-control-header-width;
             @if ($skin-name != 'FluentUI') {
+              width: $range-control-header-width;
               float: $range-float-none;
               font-weight: $range-font-weight-normal;
               margin-left: $range-value-zero;
@@ -398,12 +398,13 @@ $range-header-font-size: 16px !default;
             }
           }
           #{if(&, '&', '*')} .e-next {
-            float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-right;
+            }
           }
           #{if(&, '&', '*')} .e-prev {
-            float: $range-float-left;
-            @if ($skin-name == 'FluentUI') {
-              float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-left;
             }
           }
           #{if(&, '&', '*')} .e-next,
@@ -547,7 +548,9 @@ $range-header-font-size: 16px !default;
             float: $range-float-left;
           }
           #{if(&, '&', '*')} .e-prev {
-            float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-right;
+            }
           }
           #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
             border-radius: $range-hover-end-radius;

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

@@ -383,8 +383,8 @@ $range-header-font-size: 16px !default;
           #{if(&, '&', '*')} .e-title {
             cursor: $range-cursor-pointer-style;
             line-height: $range-normal-nav-icon-height;
-            width: $range-control-header-width;
             @if ($skin-name != 'FluentUI') {
+              width: $range-control-header-width;
               float: $range-float-none;
               font-weight: $range-font-weight-normal;
               margin-left: $range-value-zero;
@@ -398,12 +398,13 @@ $range-header-font-size: 16px !default;
             }
           }
           #{if(&, '&', '*')} .e-next {
-            float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-right;
+            }
           }
           #{if(&, '&', '*')} .e-prev {
-            float: $range-float-left;
-            @if ($skin-name == 'FluentUI') {
-              float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-left;
             }
           }
           #{if(&, '&', '*')} .e-next,
@@ -547,7 +548,9 @@ $range-header-font-size: 16px !default;
             float: $range-float-left;
           }
           #{if(&, '&', '*')} .e-prev {
-            float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-right;
+            }
           }
           #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
             border-radius: $range-hover-end-radius;

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

@@ -393,8 +393,8 @@ $range-header-font-size: 16px !default;
           #{if(&, '&', '*')} .e-title {
             cursor: $range-cursor-pointer-style;
             line-height: $range-normal-nav-icon-height;
-            width: $range-control-header-width;
             @if ($skin-name != 'FluentUI') {
+              width: $range-control-header-width;
               float: $range-float-none;
               font-weight: $range-font-weight-normal;
               margin-left: $range-value-zero;
@@ -408,12 +408,13 @@ $range-header-font-size: 16px !default;
             }
           }
           #{if(&, '&', '*')} .e-next {
-            float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-right;
+            }
           }
           #{if(&, '&', '*')} .e-prev {
-            float: $range-float-left;
-            @if ($skin-name == 'FluentUI') {
-              float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-left;
             }
           }
           #{if(&, '&', '*')} .e-next,
@@ -557,7 +558,9 @@ $range-header-font-size: 16px !default;
             float: $range-float-left;
           }
           #{if(&, '&', '*')} .e-prev {
-            float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-right;
+            }
           }
           #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
             border-radius: $range-hover-end-radius;

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

@@ -421,8 +421,8 @@ $range-header-font-size: 16px !default;
           #{if(&, '&', '*')} .e-title {
             cursor: $range-cursor-pointer-style;
             line-height: $range-normal-nav-icon-height;
-            width: $range-control-header-width;
             @if ($skin-name != 'FluentUI') {
+              width: $range-control-header-width;
               float: $range-float-none;
               font-weight: $range-font-weight-normal;
               margin-left: $range-value-zero;
@@ -436,12 +436,13 @@ $range-header-font-size: 16px !default;
             }
           }
           #{if(&, '&', '*')} .e-next {
-            float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-right;
+            }
           }
           #{if(&, '&', '*')} .e-prev {
-            float: $range-float-left;
-            @if ($skin-name == 'FluentUI') {
-              float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-left;
             }
           }
           #{if(&, '&', '*')} .e-next,
@@ -585,7 +586,9 @@ $range-header-font-size: 16px !default;
             float: $range-float-left;
           }
           #{if(&, '&', '*')} .e-prev {
-            float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-right;
+            }
           }
           #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
             border-radius: $range-hover-end-radius;

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

@@ -421,8 +421,8 @@ $range-header-font-size: 16px !default;
           #{if(&, '&', '*')} .e-title {
             cursor: $range-cursor-pointer-style;
             line-height: $range-normal-nav-icon-height;
-            width: $range-control-header-width;
             @if ($skin-name != 'FluentUI') {
+              width: $range-control-header-width;
               float: $range-float-none;
               font-weight: $range-font-weight-normal;
               margin-left: $range-value-zero;
@@ -436,12 +436,13 @@ $range-header-font-size: 16px !default;
             }
           }
           #{if(&, '&', '*')} .e-next {
-            float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-right;
+            }
           }
           #{if(&, '&', '*')} .e-prev {
-            float: $range-float-left;
-            @if ($skin-name == 'FluentUI') {
-              float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-left;
             }
           }
           #{if(&, '&', '*')} .e-next,
@@ -585,7 +586,9 @@ $range-header-font-size: 16px !default;
             float: $range-float-left;
           }
           #{if(&, '&', '*')} .e-prev {
-            float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-right;
+            }
           }
           #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
             border-radius: $range-hover-end-radius;

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

@@ -386,8 +386,8 @@ $range-header-font-size: 16px !default;
           #{if(&, '&', '*')} .e-title {
             cursor: $range-cursor-pointer-style;
             line-height: $range-normal-nav-icon-height;
-            width: $range-control-header-width;
             @if ($skin-name != 'FluentUI') {
+              width: $range-control-header-width;
               float: $range-float-none;
               font-weight: $range-font-weight-normal;
               margin-left: $range-value-zero;
@@ -401,12 +401,13 @@ $range-header-font-size: 16px !default;
             }
           }
           #{if(&, '&', '*')} .e-next {
-            float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-right;
+            }
           }
           #{if(&, '&', '*')} .e-prev {
-            float: $range-float-left;
-            @if ($skin-name == 'FluentUI') {
-              float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-left;
             }
           }
           #{if(&, '&', '*')} .e-next,
@@ -550,7 +551,9 @@ $range-header-font-size: 16px !default;
             float: $range-float-left;
           }
           #{if(&, '&', '*')} .e-prev {
-            float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-right;
+            }
           }
           #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
             border-radius: $range-hover-end-radius;

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

@@ -383,8 +383,8 @@ $range-header-font-size: 16px !default;
           #{if(&, '&', '*')} .e-title {
             cursor: $range-cursor-pointer-style;
             line-height: $range-normal-nav-icon-height;
-            width: $range-control-header-width;
             @if ($skin-name != 'FluentUI') {
+              width: $range-control-header-width;
               float: $range-float-none;
               font-weight: $range-font-weight-normal;
               margin-left: $range-value-zero;
@@ -398,12 +398,13 @@ $range-header-font-size: 16px !default;
             }
           }
           #{if(&, '&', '*')} .e-next {
-            float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-right;
+            }
           }
           #{if(&, '&', '*')} .e-prev {
-            float: $range-float-left;
-            @if ($skin-name == 'FluentUI') {
-              float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-left;
             }
           }
           #{if(&, '&', '*')} .e-next,
@@ -547,7 +548,9 @@ $range-header-font-size: 16px !default;
             float: $range-float-left;
           }
           #{if(&, '&', '*')} .e-prev {
-            float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-right;
+            }
           }
           #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
             border-radius: $range-hover-end-radius;

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

@@ -317,6 +317,23 @@ $modal-range-tablet-font-size: 18px !default;
 $range-header-font-size: 16px !default;
+.e-daterangepicker.e-popup .e-calendar .e-header .e-title {
+  width: 65%;
+}
+.e-daterangepicker.e-popup.e-small .e-calendar .e-header .e-title {
+  width: 61%;
+}
+.e-daterangepicker.e-popup.e-bigger .e-calendar .e-header .e-title,
+.e-daterangepicker.e-popup.e-device .e-calendar .e-header .e-title {
+  width: 72%;
+}
+.e-daterangepicker.e-popup.e-bigger.e-small .e-calendar .e-header .e-title {
+  width: 70%;
+}
 @include export-module('daterangepicker-layout') {
   /*! daterangepicker layout */
@@ -430,8 +447,8 @@ $range-header-font-size: 16px !default;
           #{if(&, '&', '*')} .e-title {
             cursor: $range-cursor-pointer-style;
             line-height: $range-normal-nav-icon-height;
-            width: $range-control-header-width;
             @if ($skin-name != 'FluentUI') {
+              width: $range-control-header-width;
               float: $range-float-none;
               font-weight: $range-font-weight-normal;
               margin-left: $range-value-zero;
@@ -445,12 +462,13 @@ $range-header-font-size: 16px !default;
             }
           }
           #{if(&, '&', '*')} .e-next {
-            float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-right;
+            }
           }
           #{if(&, '&', '*')} .e-prev {
-            float: $range-float-left;
-            @if ($skin-name == 'FluentUI') {
-              float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-left;
             }
           }
           #{if(&, '&', '*')} .e-next,
@@ -594,7 +612,9 @@ $range-header-font-size: 16px !default;
             float: $range-float-left;
           }
           #{if(&, '&', '*')} .e-prev {
-            float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-right;
+            }
           }
           #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
             border-radius: $range-hover-end-radius;

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

@@ -317,6 +317,23 @@ $modal-range-tablet-font-size: 18px !default;
 $range-header-font-size: 16px !default;
+.e-daterangepicker.e-popup .e-calendar .e-header .e-title {
+  width: 65%;
+}
+.e-daterangepicker.e-popup.e-small .e-calendar .e-header .e-title {
+  width: 61%;
+}
+.e-daterangepicker.e-popup.e-bigger .e-calendar .e-header .e-title,
+.e-daterangepicker.e-popup.e-device .e-calendar .e-header .e-title {
+  width: 72%;
+}
+.e-daterangepicker.e-popup.e-bigger.e-small .e-calendar .e-header .e-title {
+  width: 70%;
+}
 @include export-module('daterangepicker-layout') {
   /*! daterangepicker layout */
@@ -430,8 +447,8 @@ $range-header-font-size: 16px !default;
           #{if(&, '&', '*')} .e-title {
             cursor: $range-cursor-pointer-style;
             line-height: $range-normal-nav-icon-height;
-            width: $range-control-header-width;
             @if ($skin-name != 'FluentUI') {
+              width: $range-control-header-width;
               float: $range-float-none;
               font-weight: $range-font-weight-normal;
               margin-left: $range-value-zero;
@@ -445,12 +462,13 @@ $range-header-font-size: 16px !default;
             }
           }
           #{if(&, '&', '*')} .e-next {
-            float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-right;
+            }
           }
           #{if(&, '&', '*')} .e-prev {
-            float: $range-float-left;
-            @if ($skin-name == 'FluentUI') {
-              float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-left;
             }
           }
           #{if(&, '&', '*')} .e-next,
@@ -594,7 +612,9 @@ $range-header-font-size: 16px !default;
             float: $range-float-left;
           }
           #{if(&, '&', '*')} .e-prev {
-            float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-right;
+            }
           }
           #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
             border-radius: $range-hover-end-radius;

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

@@ -383,8 +383,8 @@ $range-header-font-size: 16px !default;
           #{if(&, '&', '*')} .e-title {
             cursor: $range-cursor-pointer-style;
             line-height: $range-normal-nav-icon-height;
-            width: $range-control-header-width;
             @if ($skin-name != 'FluentUI') {
+              width: $range-control-header-width;
               float: $range-float-none;
               font-weight: $range-font-weight-normal;
               margin-left: $range-value-zero;
@@ -398,12 +398,13 @@ $range-header-font-size: 16px !default;
             }
           }
           #{if(&, '&', '*')} .e-next {
-            float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-right;
+            }
           }
           #{if(&, '&', '*')} .e-prev {
-            float: $range-float-left;
-            @if ($skin-name == 'FluentUI') {
-              float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-left;
             }
           }
           #{if(&, '&', '*')} .e-next,
@@ -547,7 +548,9 @@ $range-header-font-size: 16px !default;
             float: $range-float-left;
           }
           #{if(&, '&', '*')} .e-prev {
-            float: $range-float-right;
+            @if ($skin-name != 'FluentUI') {
+              float: $range-float-right;
+            }
           }
           #{if(&, '&', '*')} .e-start-date.e-selected.e-range-hover {
             border-radius: $range-hover-end-radius;