npm - @syncfusion/blazor-themes - Versions diffs - 20.3.50 → 20.3.56 - Mend

@syncfusion/blazor-themes 20.3.50 → 20.3.56

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

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

@@ -589,6 +589,9 @@ $cbox-border-style: solid !default;
             &:not(.e-check):not(.e-stop) {
               color: $cbox-icon-color;
+              @media (hover: none) {
+                color: $cbox-bgcolor;
+              }
             }
             &:not(.e-check),

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

@@ -586,6 +586,9 @@ $cbox-key-focussed-bgcolor: transparent !default;
             &:not(.e-check):not(.e-stop) {
               color: $cbox-icon-color;
+              @media (hover: none) {
+                color: $cbox-bgcolor;
+              }
             }
             &:not(.e-check),

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

@@ -589,6 +589,9 @@ $cbox-border-style: solid !default;
             &:not(.e-check):not(.e-stop) {
               color: $cbox-icon-color;
+              @media (hover: none) {
+                color: $cbox-bgcolor;
+              }
             }
             &:not(.e-check),

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

@@ -589,6 +589,9 @@ $cbox-border-style: solid !default;
             &:not(.e-check):not(.e-stop) {
               color: $cbox-icon-color;
+              @media (hover: none) {
+                color: $cbox-bgcolor;
+              }
             }
             &:not(.e-check),

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

@@ -589,6 +589,9 @@ $cbox-border-style: solid !default;
             &:not(.e-check):not(.e-stop) {
               color: $cbox-icon-color;
+              @media (hover: none) {
+                color: $cbox-bgcolor;
+              }
             }
             &:not(.e-check),

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

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

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

@@ -588,6 +588,9 @@ $cbox-checked-ripple-bgcolo: rgba(0, 0, 0, .3) !default;
             &:not(.e-check):not(.e-stop) {
               color: $cbox-icon-color;
+              @media (hover: none) {
+                color: $cbox-bgcolor;
+              }
             }
             &:not(.e-check),

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

@@ -593,6 +593,9 @@ $cbox-icon-color: $icon-color !default;
             &:not(.e-check):not(.e-stop) {
               color: $cbox-icon-color;
+              @media (hover: none) {
+                color: $cbox-bgcolor;
+              }
             }
             &:not(.e-check),

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

@@ -593,6 +593,9 @@ $cbox-icon-color: $icon-color !default;
             &:not(.e-check):not(.e-stop) {
               color: $cbox-icon-color;
+              @media (hover: none) {
+                color: $cbox-bgcolor;
+              }
             }
             &:not(.e-check),

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

@@ -587,6 +587,9 @@ $cbox-checked-ripple-bgcolo: rgba(0, 0, 0, .3) !default;
             &:not(.e-check):not(.e-stop) {
               color: $cbox-icon-color;
+              @media (hover: none) {
+                color: $cbox-bgcolor;
+              }
             }
             &:not(.e-check),

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

@@ -592,6 +592,9 @@ $cbox-border-style: solid !default;
             &:not(.e-check):not(.e-stop) {
               color: $cbox-icon-color;
+              @media (hover: none) {
+                color: $cbox-bgcolor;
+              }
             }
             &:not(.e-check),

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

@@ -588,6 +588,9 @@ $cbox-border-style: solid !default;
             &:not(.e-check):not(.e-stop) {
               color: $cbox-icon-color;
+              @media (hover: none) {
+                color: $cbox-bgcolor;
+              }
             }
             &:not(.e-check),

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

@@ -589,6 +589,9 @@ $cbox-border-style: solid !default;
             &:not(.e-check):not(.e-stop) {
               color: $cbox-icon-color;
+              @media (hover: none) {
+                color: $cbox-bgcolor;
+              }
             }
             &:not(.e-check),

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

@@ -589,6 +589,9 @@ $cbox-border-style: solid !default;
             &:not(.e-check):not(.e-stop) {
               color: $cbox-icon-color;
+              @media (hover: none) {
+                color: $cbox-bgcolor;
+              }
             }
             &:not(.e-check),

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

@@ -141,12 +141,20 @@ $fab-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0
     box-shadow: $fab-box-shadow;
     &:hover,
-    &:focus,
     &:active,
     &.e-active,
     &:disabled {
       box-shadow: $fab-box-shadow;
     }
+    &:focus {
+      @if ($skin-name != 'tailwind' and $skin-name != 'tailwind-dark' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5-dark') {
+        box-shadow: $fab-box-shadow;
+      }
+      @if ($skin-name == 'tailwind') {
+        box-shadow: $fab-focus-box-shadow;
+      }
+    }
   }
 }

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

@@ -141,12 +141,20 @@ $fab-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0
     box-shadow: $fab-box-shadow;
     &:hover,
-    &:focus,
     &:active,
     &.e-active,
     &:disabled {
       box-shadow: $fab-box-shadow;
     }
+    &:focus {
+      @if ($skin-name != 'tailwind' and $skin-name != 'tailwind-dark' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5-dark') {
+        box-shadow: $fab-box-shadow;
+      }
+      @if ($skin-name == 'tailwind') {
+        box-shadow: $fab-focus-box-shadow;
+      }
+    }
   }
 }

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

@@ -141,12 +141,20 @@ $fab-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0
     box-shadow: $fab-box-shadow;
     &:hover,
-    &:focus,
     &:active,
     &.e-active,
     &:disabled {
       box-shadow: $fab-box-shadow;
     }
+    &:focus {
+      @if ($skin-name != 'tailwind' and $skin-name != 'tailwind-dark' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5-dark') {
+        box-shadow: $fab-box-shadow;
+      }
+      @if ($skin-name == 'tailwind') {
+        box-shadow: $fab-focus-box-shadow;
+      }
+    }
   }
 }

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

@@ -141,12 +141,20 @@ $fab-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0
     box-shadow: $fab-box-shadow;
     &:hover,
-    &:focus,
     &:active,
     &.e-active,
     &:disabled {
       box-shadow: $fab-box-shadow;
     }
+    &:focus {
+      @if ($skin-name != 'tailwind' and $skin-name != 'tailwind-dark' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5-dark') {
+        box-shadow: $fab-box-shadow;
+      }
+      @if ($skin-name == 'tailwind') {
+        box-shadow: $fab-focus-box-shadow;
+      }
+    }
   }
 }

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

@@ -141,12 +141,20 @@ $fab-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0
     box-shadow: $fab-box-shadow;
     &:hover,
-    &:focus,
     &:active,
     &.e-active,
     &:disabled {
       box-shadow: $fab-box-shadow;
     }
+    &:focus {
+      @if ($skin-name != 'tailwind' and $skin-name != 'tailwind-dark' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5-dark') {
+        box-shadow: $fab-box-shadow;
+      }
+      @if ($skin-name == 'tailwind') {
+        box-shadow: $fab-focus-box-shadow;
+      }
+    }
   }
 }

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

@@ -141,12 +141,20 @@ $fab-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0
     box-shadow: $fab-box-shadow;
     &:hover,
-    &:focus,
     &:active,
     &.e-active,
     &:disabled {
       box-shadow: $fab-box-shadow;
     }
+    &:focus {
+      @if ($skin-name != 'tailwind' and $skin-name != 'tailwind-dark' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5-dark') {
+        box-shadow: $fab-box-shadow;
+      }
+      @if ($skin-name == 'tailwind') {
+        box-shadow: $fab-focus-box-shadow;
+      }
+    }
   }
 }

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

@@ -141,12 +141,20 @@ $fab-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0
     box-shadow: $fab-box-shadow;
     &:hover,
-    &:focus,
     &:active,
     &.e-active,
     &:disabled {
       box-shadow: $fab-box-shadow;
     }
+    &:focus {
+      @if ($skin-name != 'tailwind' and $skin-name != 'tailwind-dark' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5-dark') {
+        box-shadow: $fab-box-shadow;
+      }
+      @if ($skin-name == 'tailwind') {
+        box-shadow: $fab-focus-box-shadow;
+      }
+    }
   }
 }

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

@@ -141,12 +141,20 @@ $fab-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0
     box-shadow: $fab-box-shadow;
     &:hover,
-    &:focus,
     &:active,
     &.e-active,
     &:disabled {
       box-shadow: $fab-box-shadow;
     }
+    &:focus {
+      @if ($skin-name != 'tailwind' and $skin-name != 'tailwind-dark' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5-dark') {
+        box-shadow: $fab-box-shadow;
+      }
+      @if ($skin-name == 'tailwind') {
+        box-shadow: $fab-focus-box-shadow;
+      }
+    }
   }
 }

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

@@ -141,12 +141,20 @@ $fab-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0
     box-shadow: $fab-box-shadow;
     &:hover,
-    &:focus,
     &:active,
     &.e-active,
     &:disabled {
       box-shadow: $fab-box-shadow;
     }
+    &:focus {
+      @if ($skin-name != 'tailwind' and $skin-name != 'tailwind-dark' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5-dark') {
+        box-shadow: $fab-box-shadow;
+      }
+      @if ($skin-name == 'tailwind') {
+        box-shadow: $fab-focus-box-shadow;
+      }
+    }
   }
 }

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

@@ -141,12 +141,20 @@ $fab-box-shadow: none;
     box-shadow: $fab-box-shadow;
     &:hover,
-    &:focus,
     &:active,
     &.e-active,
     &:disabled {
       box-shadow: $fab-box-shadow;
     }
+    &:focus {
+      @if ($skin-name != 'tailwind' and $skin-name != 'tailwind-dark' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5-dark') {
+        box-shadow: $fab-box-shadow;
+      }
+      @if ($skin-name == 'tailwind') {
+        box-shadow: $fab-focus-box-shadow;
+      }
+    }
   }
 }

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

@@ -141,12 +141,20 @@ $fab-box-shadow:  0 4px 6px -1px rgba(0, 0, 0, .05), 0 10px 15px -3px rgba(0, 0,
     box-shadow: $fab-box-shadow;
     &:hover,
-    &:focus,
     &:active,
     &.e-active,
     &:disabled {
       box-shadow: $fab-box-shadow;
     }
+    &:focus {
+      @if ($skin-name != 'tailwind' and $skin-name != 'tailwind-dark' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5-dark') {
+        box-shadow: $fab-box-shadow;
+      }
+      @if ($skin-name == 'tailwind') {
+        box-shadow: $fab-focus-box-shadow;
+      }
+    }
   }
 }

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

@@ -141,12 +141,20 @@ $fab-box-shadow:  0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px rgba(0, 0, 0, .14
     box-shadow: $fab-box-shadow;
     &:hover,
-    &:focus,
     &:active,
     &.e-active,
     &:disabled {
       box-shadow: $fab-box-shadow;
     }
+    &:focus {
+      @if ($skin-name != 'tailwind' and $skin-name != 'tailwind-dark' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5-dark') {
+        box-shadow: $fab-box-shadow;
+      }
+      @if ($skin-name == 'tailwind') {
+        box-shadow: $fab-focus-box-shadow;
+      }
+    }
   }
 }

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

@@ -27,6 +27,7 @@ $fab-bigger-small-padding: 0 17px !default;
 $fab-bigger-small-icon-font-size: 14px !default;
 $fab-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0, .1), 0 6px 10px rgba(0, 0, 0, .14) !default;
+$fab-focus-box-shadow: $fab-box-shadow, $shadow-focus-ring2 !default;
 @include export-module('floating-action-button-layout') {
   .e-fab.e-btn {
@@ -141,12 +142,20 @@ $fab-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0
     box-shadow: $fab-box-shadow;
     &:hover,
-    &:focus,
     &:active,
     &.e-active,
     &:disabled {
       box-shadow: $fab-box-shadow;
     }
+    &:focus {
+      @if ($skin-name != 'tailwind' and $skin-name != 'tailwind-dark' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5-dark') {
+        box-shadow: $fab-box-shadow;
+      }
+      @if ($skin-name == 'tailwind') {
+        box-shadow: $fab-focus-box-shadow;
+      }
+    }
   }
 }

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

@@ -27,6 +27,7 @@ $fab-bigger-small-padding: 0 17px !default;
 $fab-bigger-small-icon-font-size: 14px !default;
 $fab-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0, .1), 0 6px 10px rgba(0, 0, 0, .14) !default;
+$fab-focus-box-shadow: $fab-box-shadow, $shadow-focus-ring2 !default;
 @include export-module('floating-action-button-layout') {
   .e-fab.e-btn {
@@ -141,12 +142,20 @@ $fab-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .2), 0 -2px 15px -3px rgba(0, 0, 0
     box-shadow: $fab-box-shadow;
     &:hover,
-    &:focus,
     &:active,
     &.e-active,
     &:disabled {
       box-shadow: $fab-box-shadow;
     }
+    &:focus {
+      @if ($skin-name != 'tailwind' and $skin-name != 'tailwind-dark' and $skin-name != 'bootstrap4' and $skin-name != 'bootstrap5' and $skin-name != 'bootstrap5-dark') {
+        box-shadow: $fab-box-shadow;
+      }
+      @if ($skin-name == 'tailwind') {
+        box-shadow: $fab-focus-box-shadow;
+      }
+    }
   }
 }

package/SCSS-Themes/buttons/speed-dial/bootstrap-dark.scss CHANGED Viewed

@@ -8,8 +8,8 @@ $sd-li-text-padding: 0 5px !default;
 //Distance between vertical menu and button => Ul bottom padding + li bottom margin
 //Distance between vertical menu item =>  li bottom margin + li top margin
 //Horizontal padding for vertical menu => ((fab wdith - li icon width)/2) - 1 px (for icon border)
-$sd-horz-ul-padding: 5px 4px !default;
-$sd-vert-ul-padding: 4px 5px !default;
+$sd-horz-ul-padding: 3px 4px !default;
+$sd-vert-ul-padding: 4px 3px !default;
 $sd-horz-li-margin: 0 4px !default;
 $sd-vert-li-margin: 4px 0 !default;
 $sd-li-text-margin: 0 8px !default;
@@ -451,12 +451,7 @@ $sd-active-font-color: $grey-light-font !default;
     .e-speeddial-li {
       color: $sd-font-color;
-      .e-speeddial-li-text {
-        box-shadow: $sd-li-shadow;
-        background-color: $sd-li-bg;
-        border-color: $sd-li-border-color;
-      }
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         box-shadow: $sd-li-shadow;
         background-color: $sd-li-bg;
@@ -465,11 +460,7 @@ $sd-active-font-color: $grey-light-font !default;
     }
     .e-speeddial-li.e-disabled {
       color: $sd-disabled-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-disabled-li-bg;
-        border-color: $sd-disabled-li-border-color;
-      }
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-disabled-li-bg;
         border-color: $sd-disabled-li-border-color;
@@ -479,27 +470,19 @@ $sd-active-font-color: $grey-light-font !default;
     .e-speeddial-li.e-speeddial-li-active:not(.e-disabled),
     .e-speeddial-li:focus:not(.e-disabled) {
       color: $sd-focus-font-color;
-      .e-speeddial-li-text {
+      .e-speeddial-li-text,
+      .e-speeddial-li-icon {
         background-color: $sd-focus-li-bg;
         border-color: $sd-focus-li-border-color;
-        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
+        @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
           box-shadow: $sd-focus-box-shadow;
         }
       }
-      .e-speeddial-li-icon {
-        background-color: $sd-active-li-bg;
-        border-color: $sd-active-li-border-color;
-      }
     }
     .e-speeddial-li:not(.e-disabled):hover {
       color: $sd-hover-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-hover-li-bg;
-        border-color: $sd-hover-li-border-color;
-      }
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-hover-li-bg;
         border-color: $sd-hover-li-border-color;
@@ -508,11 +491,7 @@ $sd-active-font-color: $grey-light-font !default;
     .e-speeddial-li:not(.e-disabled):active {
       color: $sd-active-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-active-li-bg;
-        border-color: $sd-active-li-border-color;
-      }
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-active-li-bg;
         border-color: $sd-active-li-border-color;

package/SCSS-Themes/buttons/speed-dial/bootstrap.scss CHANGED Viewed

@@ -8,8 +8,8 @@ $sd-li-text-padding: 0 5px !default;
 //Distance between vertical menu and button => Ul bottom padding + li bottom margin
 //Distance between vertical menu item =>  li bottom margin + li top margin
 //Horizontal padding for vertical menu => ((fab wdith - li icon width)/2) - 1 px (for icon border)
-$sd-horz-ul-padding: 5px 4px !default;
-$sd-vert-ul-padding: 4px 5px !default;
+$sd-horz-ul-padding: 3px 4px !default;
+$sd-vert-ul-padding: 4px 3px !default;
 $sd-horz-li-margin: 0 4px !default;
 $sd-vert-li-margin: 4px 0 !default;
 $sd-li-text-margin: 0 8px !default;
@@ -451,12 +451,7 @@ $sd-active-font-color: #000000 !default;
     .e-speeddial-li {
       color: $sd-font-color;
-      .e-speeddial-li-text {
-        box-shadow: $sd-li-shadow;
-        background-color: $sd-li-bg;
-        border-color: $sd-li-border-color;
-      }
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         box-shadow: $sd-li-shadow;
         background-color: $sd-li-bg;
@@ -465,11 +460,7 @@ $sd-active-font-color: #000000 !default;
     }
     .e-speeddial-li.e-disabled {
       color: $sd-disabled-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-disabled-li-bg;
-        border-color: $sd-disabled-li-border-color;
-      }
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-disabled-li-bg;
         border-color: $sd-disabled-li-border-color;
@@ -479,27 +470,19 @@ $sd-active-font-color: #000000 !default;
     .e-speeddial-li.e-speeddial-li-active:not(.e-disabled),
     .e-speeddial-li:focus:not(.e-disabled) {
       color: $sd-focus-font-color;
-      .e-speeddial-li-text {
+      .e-speeddial-li-text,
+      .e-speeddial-li-icon {
         background-color: $sd-focus-li-bg;
         border-color: $sd-focus-li-border-color;
-        @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
+        @if ($skin-name == 'tailwind' or $skin-name == 'bootstrap5' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' or $skin-name == 'FluentUI') {
           box-shadow: $sd-focus-box-shadow;
         }
       }
-      .e-speeddial-li-icon {
-        background-color: $sd-active-li-bg;
-        border-color: $sd-active-li-border-color;
-      }
     }
     .e-speeddial-li:not(.e-disabled):hover {
       color: $sd-hover-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-hover-li-bg;
-        border-color: $sd-hover-li-border-color;
-      }
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-hover-li-bg;
         border-color: $sd-hover-li-border-color;
@@ -508,11 +491,7 @@ $sd-active-font-color: #000000 !default;
     .e-speeddial-li:not(.e-disabled):active {
       color: $sd-active-font-color;
-      .e-speeddial-li-text {
-        background-color: $sd-active-li-bg;
-        border-color: $sd-active-li-border-color;
-      }
+      .e-speeddial-li-text,
       .e-speeddial-li-icon {
         background-color: $sd-active-li-bg;
         border-color: $sd-active-li-border-color;