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

@syncfusion/blazor-themes 20.3.61 → 20.4.38

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

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

@@ -970,7 +970,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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' {
@@ -990,7 +990,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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' {
@@ -1004,7 +1004,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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') {
@@ -1026,7 +1026,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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' {
@@ -1046,7 +1046,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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') {
@@ -1061,7 +1061,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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 {
@@ -1076,7 +1076,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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') {
@@ -1091,7 +1091,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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') {
@@ -1109,7 +1109,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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') {
@@ -1124,7 +1124,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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 {
@@ -1139,7 +1139,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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') {
@@ -1154,7 +1154,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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') {
@@ -1172,7 +1172,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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') {
@@ -1187,7 +1187,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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 {
@@ -1202,7 +1202,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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') {
@@ -1217,7 +1217,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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 {
@@ -1312,7 +1312,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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') {
@@ -1331,7 +1331,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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' {
@@ -1344,7 +1344,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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') {
@@ -1368,7 +1368,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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' {
@@ -1381,7 +1381,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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') {
@@ -1405,7 +1405,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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' {
@@ -1418,7 +1418,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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') {
@@ -1442,7 +1442,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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' {
@@ -1805,7 +1805,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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' {
@@ -1985,7 +1985,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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' {
@@ -2021,7 +2021,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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') {
@@ -2044,7 +2044,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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' {
@@ -2079,7 +2079,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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') {
@@ -2102,7 +2102,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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;
             }
           }
@@ -2136,7 +2136,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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') {
@@ -2162,7 +2162,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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' {
@@ -2198,7 +2198,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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') {
@@ -2224,7 +2224,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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' {
@@ -2260,7 +2260,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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') {
@@ -2286,7 +2286,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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' {
@@ -2322,7 +2322,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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') {
@@ -2348,7 +2348,7 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !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' {

package/SCSS-Themes/buttons/check-box/bootstrap-dark.scss CHANGED Viewed

@@ -589,7 +589,7 @@ $cbox-border-style: solid !default;
             &:not(.e-check):not(.e-stop) {
               color: $cbox-icon-color;
-              @media (max-width: 768px) {
+              @media (max-width: 768px)  {
                 color: $cbox-bgcolor;
               }
             }

package/SCSS-Themes/buttons/check-box/bootstrap.scss CHANGED Viewed

@@ -586,7 +586,7 @@ $cbox-key-focussed-bgcolor: transparent !default;
             &:not(.e-check):not(.e-stop) {
               color: $cbox-icon-color;
-              @media (max-width: 768px) {
+              @media (max-width: 768px)  {
                 color: $cbox-bgcolor;
               }
             }

package/SCSS-Themes/buttons/check-box/bootstrap4.scss CHANGED Viewed

@@ -589,7 +589,7 @@ $cbox-border-style: solid !default;
             &:not(.e-check):not(.e-stop) {
               color: $cbox-icon-color;
-              @media (max-width: 768px) {
+              @media (max-width: 768px)  {
                 color: $cbox-bgcolor;
               }
             }

package/SCSS-Themes/buttons/check-box/bootstrap5-dark.scss CHANGED Viewed

@@ -589,7 +589,7 @@ $cbox-border-style: solid !default;
             &:not(.e-check):not(.e-stop) {
               color: $cbox-icon-color;
-              @media (max-width: 768px) {
+              @media (max-width: 768px)  {
                 color: $cbox-bgcolor;
               }
             }

package/SCSS-Themes/buttons/check-box/bootstrap5.scss CHANGED Viewed

@@ -589,7 +589,7 @@ $cbox-border-style: solid !default;
             &:not(.e-check):not(.e-stop) {
               color: $cbox-icon-color;
-              @media (max-width: 768px) {
+              @media (max-width: 768px)  {
                 color: $cbox-bgcolor;
               }
             }

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

@@ -591,7 +591,7 @@ $cbox-ripple-size: -9px !default;
             &:not(.e-check):not(.e-stop) {
               color: $cbox-icon-color;
-              @media (max-width: 768px) {
+              @media (max-width: 768px)  {
                 color: $cbox-bgcolor;
               }
             }

package/SCSS-Themes/buttons/check-box/fabric.scss CHANGED Viewed

@@ -588,7 +588,7 @@ $cbox-checked-ripple-bgcolo: rgba(0, 0, 0, .3) !default;
             &:not(.e-check):not(.e-stop) {
               color: $cbox-icon-color;
-              @media (max-width: 768px) {
+              @media (max-width: 768px)  {
                 color: $cbox-bgcolor;
               }
             }

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

@@ -593,7 +593,7 @@ $cbox-icon-color: $icon-color !default;
             &:not(.e-check):not(.e-stop) {
               color: $cbox-icon-color;
-              @media (max-width: 768px) {
+              @media (max-width: 768px)  {
                 color: $cbox-bgcolor;
               }
             }

package/SCSS-Themes/buttons/check-box/fluent.scss CHANGED Viewed

@@ -593,7 +593,7 @@ $cbox-icon-color: $icon-color !default;
             &:not(.e-check):not(.e-stop) {
               color: $cbox-icon-color;
-              @media (max-width: 768px) {
+              @media (max-width: 768px)  {
                 color: $cbox-bgcolor;
               }
             }

package/SCSS-Themes/buttons/check-box/highcontrast.scss CHANGED Viewed

@@ -587,7 +587,7 @@ $cbox-checked-ripple-bgcolo: rgba(0, 0, 0, .3) !default;
             &:not(.e-check):not(.e-stop) {
               color: $cbox-icon-color;
-              @media (max-width: 768px) {
+              @media (max-width: 768px)  {
                 color: $cbox-bgcolor;
               }
             }

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

@@ -592,7 +592,7 @@ $cbox-border-style: solid !default;
             &:not(.e-check):not(.e-stop) {
               color: $cbox-icon-color;
-              @media (max-width: 768px) {
+              @media (max-width: 768px)  {
                 color: $cbox-bgcolor;
               }
             }

package/SCSS-Themes/buttons/check-box/material.scss CHANGED Viewed

@@ -588,7 +588,7 @@ $cbox-border-style: solid !default;
             &:not(.e-check):not(.e-stop) {
               color: $cbox-icon-color;
-              @media (max-width: 768px) {
+              @media (max-width: 768px)  {
                 color: $cbox-bgcolor;
               }
             }

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

@@ -589,7 +589,7 @@ $cbox-border-style: solid !default;
             &:not(.e-check):not(.e-stop) {
               color: $cbox-icon-color;
-              @media (max-width: 768px) {
+              @media (max-width: 768px)  {
                 color: $cbox-bgcolor;
               }
             }

package/SCSS-Themes/buttons/check-box/tailwind.scss CHANGED Viewed

@@ -589,7 +589,7 @@ $cbox-border-style: solid !default;
             &:not(.e-check):not(.e-stop) {
               color: $cbox-icon-color;
-              @media (max-width: 768px) {
+              @media (max-width: 768px)  {
                 color: $cbox-bgcolor;
               }
             }

package/SCSS-Themes/buttons/floating-action-button/bootstrap-dark.scss CHANGED Viewed

@@ -140,7 +140,7 @@ $fab-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0
   .e-fab.e-btn {
     box-shadow: $fab-box-shadow;
-    &:hover,
+    &:hover:not(:focus),
     &:active,
     &.e-active,
     &:disabled {

package/SCSS-Themes/buttons/floating-action-button/bootstrap.scss CHANGED Viewed

@@ -140,7 +140,7 @@ $fab-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0
   .e-fab.e-btn {
     box-shadow: $fab-box-shadow;
-    &:hover,
+    &:hover:not(:focus),
     &:active,
     &.e-active,
     &:disabled {

package/SCSS-Themes/buttons/floating-action-button/bootstrap4.scss CHANGED Viewed

@@ -140,7 +140,7 @@ $fab-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0
   .e-fab.e-btn {
     box-shadow: $fab-box-shadow;
-    &:hover,
+    &:hover:not(:focus),
     &:active,
     &.e-active,
     &:disabled {

package/SCSS-Themes/buttons/floating-action-button/bootstrap5-dark.scss CHANGED Viewed

@@ -140,7 +140,7 @@ $fab-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0
   .e-fab.e-btn {
     box-shadow: $fab-box-shadow;
-    &:hover,
+    &:hover:not(:focus),
     &:active,
     &.e-active,
     &:disabled {

package/SCSS-Themes/buttons/floating-action-button/bootstrap5.scss CHANGED Viewed

@@ -140,7 +140,7 @@ $fab-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0
   .e-fab.e-btn {
     box-shadow: $fab-box-shadow;
-    &:hover,
+    &:hover:not(:focus),
     &:active,
     &.e-active,
     &:disabled {

package/SCSS-Themes/buttons/floating-action-button/fabric-dark.scss CHANGED Viewed

@@ -140,7 +140,7 @@ $fab-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0
   .e-fab.e-btn {
     box-shadow: $fab-box-shadow;
-    &:hover,
+    &:hover:not(:focus),
     &:active,
     &.e-active,
     &:disabled {

package/SCSS-Themes/buttons/floating-action-button/fabric.scss CHANGED Viewed

@@ -140,7 +140,7 @@ $fab-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0
   .e-fab.e-btn {
     box-shadow: $fab-box-shadow;
-    &:hover,
+    &:hover:not(:focus),
     &:active,
     &.e-active,
     &:disabled {

package/SCSS-Themes/buttons/floating-action-button/fluent-dark.scss CHANGED Viewed

@@ -140,7 +140,7 @@ $fab-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0
   .e-fab.e-btn {
     box-shadow: $fab-box-shadow;
-    &:hover,
+    &:hover:not(:focus),
     &:active,
     &.e-active,
     &:disabled {

package/SCSS-Themes/buttons/floating-action-button/fluent.scss CHANGED Viewed

@@ -140,7 +140,7 @@ $fab-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0
   .e-fab.e-btn {
     box-shadow: $fab-box-shadow;
-    &:hover,
+    &:hover:not(:focus),
     &:active,
     &.e-active,
     &:disabled {

package/SCSS-Themes/buttons/floating-action-button/highcontrast.scss CHANGED Viewed

@@ -140,7 +140,7 @@ $fab-box-shadow: none;
   .e-fab.e-btn {
     box-shadow: $fab-box-shadow;
-    &:hover,
+    &:hover:not(:focus),
     &:active,
     &.e-active,
     &:disabled {

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

@@ -140,7 +140,7 @@ $fab-box-shadow:  0 4px 6px -1px rgba(0, 0, 0, .05), 0 10px 15px -3px rgba(0, 0,
   .e-fab.e-btn {
     box-shadow: $fab-box-shadow;
-    &:hover,
+    &:hover:not(:focus),
     &:active,
     &.e-active,
     &:disabled {

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

@@ -140,7 +140,7 @@ $fab-box-shadow:  0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px rgba(0, 0, 0, .14
   .e-fab.e-btn {
     box-shadow: $fab-box-shadow;
-    &:hover,
+    &:hover:not(:focus),
     &:active,
     &.e-active,
     &:disabled {

package/SCSS-Themes/buttons/floating-action-button/tailwind-dark.scss CHANGED Viewed

@@ -141,7 +141,7 @@ $fab-focus-box-shadow: $fab-box-shadow, $shadow-focus-ring2 !default;
   .e-fab.e-btn {
     box-shadow: $fab-box-shadow;
-    &:hover,
+    &:hover:not(:focus),
     &:active,
     &.e-active,
     &:disabled {

package/SCSS-Themes/buttons/floating-action-button/tailwind.scss CHANGED Viewed

@@ -141,7 +141,7 @@ $fab-focus-box-shadow: $fab-box-shadow, $shadow-focus-ring2 !default;
   .e-fab.e-btn {
     box-shadow: $fab-box-shadow;
-    &:hover,
+    &:hover:not(:focus),
     &:active,
     &.e-active,
     &:disabled {

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

@@ -1008,7 +1008,7 @@ $calendar-small-font-size: 12px !default;
         }
         #{if(&, '&', '*')}.e-year td:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td:hover span.e-day {
-          background-color: $calendar-yeardecade-hover-bg;
+          background-color: $calendar-hover-color;
         }
         #{if(&, '&', '*')}.e-year td.e-selected:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td.e-selected:hover span.e-day {

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

@@ -1008,7 +1008,7 @@ $calendar-small-font-size: 12px !default;
         }
         #{if(&, '&', '*')}.e-year td:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td:hover span.e-day {
-          background-color: $calendar-yeardecade-hover-bg;
+          background-color: $calendar-hover-color;
         }
         #{if(&, '&', '*')}.e-year td.e-selected:hover span.e-day,
         #{if(&, '&', '*')}.e-decade td.e-selected:hover span.e-day {