npm - @syncfusion/blazor-themes - Versions diffs - 20.3.61 → 20.4.40 - Mend

@syncfusion/blazor-themes 20.3.61 → 20.4.40

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

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

@@ -965,7 +965,7 @@ $btn-focus-box-shadow: none !default;
   outline: $btn-focus-outline;
   outline-offset: $btn-focus-outline-offset;
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-focus-bgcolor, 50%), $btn-focus-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-focus-bgcolor, 50%), $btn-focus-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if $skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'FluentUI' {
@@ -985,7 +985,7 @@ $btn-focus-box-shadow: none !default;
     outline-offset: $btn-active-outline-offset;
   }
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-active-bgcolor, 50%), $btn-active-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-active-bgcolor, 50%), $btn-active-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if $skin-name != 'bootstrap5' {
@@ -999,7 +999,7 @@ $btn-focus-box-shadow: none !default;
   color: $btn-primary-focus-color;
   outline: $btn-primary-outline;
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-primary-focus-bgcolor, 50%), $btn-primary-focus-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-primary-focus-bgcolor, 50%), $btn-primary-focus-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
@@ -1021,7 +1021,7 @@ $btn-focus-box-shadow: none !default;
     outline: $btn-active-outline;
   }
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-primary-active-bgcolor, 50%), $btn-primary-active-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-primary-active-bgcolor, 50%), $btn-primary-active-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if $skin-name != 'bootstrap5' {
@@ -1041,7 +1041,7 @@ $btn-focus-box-shadow: none !default;
 @mixin outline-focus {
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-outline-focus-bgcolor, 50%), $btn-outline-default-focus-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-outline-focus-bgcolor, 50%), $btn-outline-default-focus-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
@@ -1056,7 +1056,7 @@ $btn-focus-box-shadow: none !default;
   @if $skin-name == 'bootstrap4' {
     background-color: $btn-bgcolor;
     border-color: transparent;
-    $color-rgba: rgba(mix(lighten($btn-outline-active-bgcolor, 50%), $btn-outline-active-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-outline-active-bgcolor, 50%), $btn-outline-active-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else {
@@ -1071,7 +1071,7 @@ $btn-focus-box-shadow: none !default;
 @mixin outline-primary-focus {
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-outline-primary-focus-bgcolor, 50%), $btn-outline-primary-focus-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-outline-primary-focus-bgcolor, 50%), $btn-outline-primary-focus-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
@@ -1086,7 +1086,7 @@ $btn-focus-box-shadow: none !default;
   @if $skin-name == 'bootstrap4' {
     background-color: $btn-primary-bgcolor;
     border-color: transparent;
-    $color-rgba: rgba(mix(lighten($btn-primary-active-bgcolor, 50%), $btn-outline-primary-active-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-primary-active-bgcolor, 50%), $btn-outline-primary-active-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if ($skin-name == 'bootstrap5') {
@@ -1104,7 +1104,7 @@ $btn-focus-box-shadow: none !default;
 @mixin outline-success-focus {
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-success-focus-bgcolor, 50%), $btn-success-focus-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-success-focus-bgcolor, 50%), $btn-success-focus-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
@@ -1119,7 +1119,7 @@ $btn-focus-box-shadow: none !default;
   @if $skin-name == 'bootstrap4' {
     background-color: $btn-success-bgcolor;
     border-color: transparent;
-    $color-rgba: rgba(mix(lighten($btn-success-active-bgcolor, 50%), $btn-success-active-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-success-active-bgcolor, 50%), $btn-success-active-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else {
@@ -1134,7 +1134,7 @@ $btn-focus-box-shadow: none !default;
 @mixin outline-info-focus {
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-info-hover-bgcolor, 50%), $btn-info-focus-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-info-hover-bgcolor, 50%), $btn-info-focus-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
@@ -1149,7 +1149,7 @@ $btn-focus-box-shadow: none !default;
   @if $skin-name == 'bootstrap4' {
     background-color: $btn-info-bgcolor;
     border-color: transparent;
-    $color-rgba: rgba(mix(lighten($btn-info-active-bgcolor, 50%), $btn-info-active-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-info-active-bgcolor, 50%), $btn-info-active-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if ($skin-name == 'bootstrap5') {
@@ -1167,7 +1167,7 @@ $btn-focus-box-shadow: none !default;
 @mixin outline-warning-focus {
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-warning-hover-bgcolor, 50%), $btn-warning-focus-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-warning-hover-bgcolor, 50%), $btn-warning-focus-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
@@ -1182,7 +1182,7 @@ $btn-focus-box-shadow: none !default;
   @if $skin-name == 'bootstrap4' {
     background-color: $btn-warning-bgcolor;
     border-color: transparent;
-    $color-rgba: rgba(mix(lighten($btn-warning-active-bgcolor, 50%), $btn-warning-active-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-warning-active-bgcolor, 50%), $btn-warning-active-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else {
@@ -1197,7 +1197,7 @@ $btn-focus-box-shadow: none !default;
 @mixin outline-danger-focus {
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-danger-hover-bgcolor, 50%), $btn-danger-focus-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-danger-hover-bgcolor, 50%), $btn-danger-focus-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
@@ -1212,7 +1212,7 @@ $btn-focus-box-shadow: none !default;
   @if $skin-name == 'bootstrap4' {
     background-color: $btn-danger-bgcolor;
     border-color: transparent;
-    $color-rgba: rgba(mix(lighten($btn-danger-active-bgcolor, 50%), $btn-danger-active-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-danger-active-bgcolor, 50%), $btn-danger-active-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else {
@@ -1307,7 +1307,7 @@ $btn-focus-box-shadow: none !default;
   border-color: $btn-success-focus-border-color;
   color: $btn-success-hover-color;
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-success-focus-bgcolor, 50%), $btn-success-focus-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-success-focus-bgcolor, 50%), $btn-success-focus-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
@@ -1326,7 +1326,7 @@ $btn-focus-box-shadow: none !default;
   border-color: $btn-success-active-border-color;
   color: $btn-success-active-color;
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-success-active-bgcolor, 50%), $btn-success-active-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-success-active-bgcolor, 50%), $btn-success-active-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if $skin-name != 'bootstrap5' {
@@ -1339,7 +1339,7 @@ $btn-focus-box-shadow: none !default;
   border-color: $btn-info-focus-border-color;
   color: $btn-info-hover-color;
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-info-focus-bgcolor, 50%), $btn-info-focus-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-info-focus-bgcolor, 50%), $btn-info-focus-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
@@ -1363,7 +1363,7 @@ $btn-focus-box-shadow: none !default;
     border-color: $btn-info-active-border-color;
   }
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-info-active-bgcolor, 50%), $btn-info-active-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-info-active-bgcolor, 50%), $btn-info-active-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if $skin-name != 'bootstrap5' {
@@ -1376,7 +1376,7 @@ $btn-focus-box-shadow: none !default;
   border-color: $btn-warning-focus-border-color;
   color: $btn-warning-hover-color;
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-warning-focus-bgcolor, 50%), $btn-warning-focus-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-warning-focus-bgcolor, 50%), $btn-warning-focus-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
@@ -1400,7 +1400,7 @@ $btn-focus-box-shadow: none !default;
   }
   color: $btn-warning-active-color;
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-warning-active-bgcolor, 50%), $btn-warning-active-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-warning-active-bgcolor, 50%), $btn-warning-active-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if $skin-name != 'bootstrap5' {
@@ -1413,7 +1413,7 @@ $btn-focus-box-shadow: none !default;
   border-color: $btn-danger-focus-border-color;
   color: $btn-danger-hover-color;
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-danger-focus-bgcolor, 50%), $btn-danger-focus-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-danger-focus-bgcolor, 50%), $btn-danger-focus-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
@@ -1437,7 +1437,7 @@ $btn-focus-box-shadow: none !default;
   }
   color: $btn-danger-active-color;
   @if $skin-name == 'bootstrap4' {
-    $color-rgba: rgba(mix(lighten($btn-danger-active-bgcolor, 50%), $btn-danger-active-border-color, .15), .5);
+    $color-rgba: rgba(mix(lighten($btn-danger-active-bgcolor, 50%), $btn-danger-active-border-color, 15%), .5);
     box-shadow: 0 0 0 .25em $color-rgba;
   }
   @else if $skin-name != 'bootstrap5' {
@@ -1800,7 +1800,7 @@ $btn-focus-box-shadow: none !default;
           background-color: $btn-primary-active-bgcolor;
           border-color: $btn-primary-active-border-color;
           @if $skin-name == 'bootstrap4' {
-            $color-rgba: rgba(mix(lighten($btn-primary-focus-bgcolor, 50%), $btn-primary-focus-border-color, .15), .5);
+            $color-rgba: rgba(mix(lighten($btn-primary-focus-bgcolor, 50%), $btn-primary-focus-border-color, 15%), .5);
             box-shadow: 0 0 0 .25em $color-rgba;
           }
           @else if $skin-name != 'bootstrap5' {
@@ -1980,7 +1980,7 @@ $btn-focus-box-shadow: none !default;
           background-color: $btn-danger-active-bgcolor;
           border-color: $btn-danger-active-border-color;
           @if $skin-name == 'bootstrap4' {
-            $color-rgba: rgba(mix(lighten($btn-primary-focus-bgcolor, 50%), $btn-primary-focus-border-color, .15), .5);
+            $color-rgba: rgba(mix(lighten($btn-primary-focus-bgcolor, 50%), $btn-primary-focus-border-color, 15%), .5);
             box-shadow: 0 0 0 .25em $color-rgba;
           }
           @else if $skin-name != 'bootstrap5' {
@@ -2016,7 +2016,7 @@ $btn-focus-box-shadow: none !default;
           border-color: $btn-flat-focus-border-color;
           color: $btn-flat-focus-color;
           @if $skin-name == 'bootstrap4' {
-            $color-rgba: rgba(mix(lighten($btn-flat-focus-bgcolor, 50%), $btn-flat-focus-border-color, .15), .5);
+            $color-rgba: rgba(mix(lighten($btn-flat-focus-bgcolor, 50%), $btn-flat-focus-border-color, 15%), .5);
             box-shadow: 0 0 0 .25em $color-rgba;
           }
           @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'bootstrap5') {
@@ -2039,7 +2039,7 @@ $btn-focus-box-shadow: none !default;
           border-color: $btn-flat-active-border-color;
           color: $btn-flat-active-color;
           @if $skin-name == 'bootstrap4' {
-            $color-rgba: rgba(mix(lighten($btn-flat-active-bgcolor, 50%), $btn-flat-active-border-color, .15), .5);
+            $color-rgba: rgba(mix(lighten($btn-flat-active-bgcolor, 50%), $btn-flat-active-border-color, 15%), .5);
             box-shadow: 0 0 0 .25em $color-rgba;
           }
           @else if $skin-name != 'bootstrap5' {
@@ -2074,7 +2074,7 @@ $btn-focus-box-shadow: none !default;
             border-color: $btn-flat-primary-focus-border-color;
             color: $btn-flat-primary-focus-color;
             @if $skin-name == 'bootstrap4' {
-              $color-rgba: rgba(mix(lighten($btn-flat-primary-focus-bgcolor, 50%), $btn-flat-primary-focus-border-color, .15), .5);
+              $color-rgba: rgba(mix(lighten($btn-flat-primary-focus-bgcolor, 50%), $btn-flat-primary-focus-border-color, 15%), .5);
               box-shadow: 0 0 0 .25em $color-rgba;
             }
             @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
@@ -2097,7 +2097,7 @@ $btn-focus-box-shadow: none !default;
             border-color: $btn-flat-primary-active-border-color;
             color: $btn-flat-primary-active-color;
             @if $skin-name == 'bootstrap4' {
-              $color-rgba: rgba(mix(lighten($btn-flat-primary-active-bgcolor, 50%), $btn-flat-primary-active-border-color, .15), .5);
+              $color-rgba: rgba(mix(lighten($btn-flat-primary-active-bgcolor, 50%), $btn-flat-primary-active-border-color, 15%), .5);
               box-shadow: 0 0 0 .25em $color-rgba;
             }
           }
@@ -2131,7 +2131,7 @@ $btn-focus-box-shadow: none !default;
             border-color: $btn-flat-success-focus-border-color;
             color: $btn-flat-success-focus-color;
             @if $skin-name == 'bootstrap4' {
-              $color-rgba: rgba(mix(lighten($btn-flat-success-focus-bgcolor, 50%), $btn-flat-success-focus-border-color, .15), .5);
+              $color-rgba: rgba(mix(lighten($btn-flat-success-focus-bgcolor, 50%), $btn-flat-success-focus-border-color, 15%), .5);
               box-shadow: 0 0 0 .25em $color-rgba;
             }
             @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
@@ -2157,7 +2157,7 @@ $btn-focus-box-shadow: none !default;
             border-color: $btn-flat-success-active-border-color;
             color: $btn-flat-success-active-color;
             @if $skin-name == 'bootstrap4' {
-              $color-rgba: rgba(mix(lighten($btn-flat-success-active-bgcolor, 50%), $btn-flat-success-active-border-color, .15), .5);
+              $color-rgba: rgba(mix(lighten($btn-flat-success-active-bgcolor, 50%), $btn-flat-success-active-border-color, 15%), .5);
               box-shadow: 0 0 0 .25em $color-rgba;
             }
             @else if $skin-name != 'bootstrap5' {
@@ -2193,7 +2193,7 @@ $btn-focus-box-shadow: none !default;
             border-color: $btn-flat-info-focus-border-color;
             color: $btn-flat-info-focus-color;
             @if $skin-name == 'bootstrap4' {
-              $color-rgba: rgba(mix(lighten($btn-flat-info-focus-bgcolor, 50%), $btn-flat-info-focus-border-color, .15), .5);
+              $color-rgba: rgba(mix(lighten($btn-flat-info-focus-bgcolor, 50%), $btn-flat-info-focus-border-color, 15%), .5);
               box-shadow: 0 0 0 .25em $color-rgba;
             }
             @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
@@ -2219,7 +2219,7 @@ $btn-focus-box-shadow: none !default;
             border-color: $btn-flat-info-active-border-color;
             color: $btn-flat-info-active-color;
             @if $skin-name == 'bootstrap4' {
-              $color-rgba: rgba(mix(lighten($btn-flat-info-active-bgcolor, 50%), $btn-flat-info-active-border-color, .15), .5);
+              $color-rgba: rgba(mix(lighten($btn-flat-info-active-bgcolor, 50%), $btn-flat-info-active-border-color, 15%), .5);
               box-shadow: 0 0 0 .25em $color-rgba;
             }
             @else if $skin-name != 'bootstrap5' {
@@ -2255,7 +2255,7 @@ $btn-focus-box-shadow: none !default;
             border-color: $btn-flat-warning-focus-border-color;
             color: $btn-flat-warning-focus-color;
             @if $skin-name == 'bootstrap4' {
-              $color-rgba: rgba(mix(lighten($btn-flat-warning-focus-bgcolor, 50%), $btn-flat-warning-focus-border-color, .15), .5);
+              $color-rgba: rgba(mix(lighten($btn-flat-warning-focus-bgcolor, 50%), $btn-flat-warning-focus-border-color, 15%), .5);
               box-shadow: 0 0 0 .25em $color-rgba;
             }
             @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
@@ -2281,7 +2281,7 @@ $btn-focus-box-shadow: none !default;
             border-color: $btn-flat-warning-active-border-color;
             color: $btn-flat-warning-active-color;
             @if $skin-name == 'bootstrap4' {
-              $color-rgba: rgba(mix(lighten($btn-flat-warning-active-bgcolor, 50%), $btn-flat-warning-active-border-color, .15), .5);
+              $color-rgba: rgba(mix(lighten($btn-flat-warning-active-bgcolor, 50%), $btn-flat-warning-active-border-color, 15%), .5);
               box-shadow: 0 0 0 .25em $color-rgba;
             }
             @else if $skin-name != 'bootstrap5' {
@@ -2317,7 +2317,7 @@ $btn-focus-box-shadow: none !default;
             border-color: $btn-flat-danger-focus-border-color;
             color: $btn-flat-danger-focus-color;
             @if $skin-name == 'bootstrap4' {
-              $color-rgba: rgba(mix(lighten($btn-flat-danger-focus-bgcolor, 50%), $btn-flat-danger-focus-border-color, .15), .5);
+              $color-rgba: rgba(mix(lighten($btn-flat-danger-focus-bgcolor, 50%), $btn-flat-danger-focus-border-color, 15%), .5);
               box-shadow: 0 0 0 .25em $color-rgba;
             }
             @else if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
@@ -2343,7 +2343,7 @@ $btn-focus-box-shadow: none !default;
             border-color: $btn-flat-danger-active-border-color;
             color: $btn-flat-danger-active-color;
             @if $skin-name == 'bootstrap4' {
-              $color-rgba: rgba(mix(lighten($btn-flat-danger-active-bgcolor, 50%), $btn-flat-danger-active-border-color, .15), .5);
+              $color-rgba: rgba(mix(lighten($btn-flat-danger-active-bgcolor, 50%), $btn-flat-danger-active-border-color, 15%), .5);
               box-shadow: 0 0 0 .25em $color-rgba;
             }
             @else if $skin-name != 'bootstrap5' {