npm - @syncfusion/blazor-themes - Versions diffs - 24.1.46 → 24.2.3 - Mend

@syncfusion/blazor-themes 24.1.46 → 24.2.3

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

package/SCSS-Themes/richtexteditor/rich-text-editor/material3-dark.scss CHANGED Viewed

@@ -113,7 +113,8 @@ $rte-insert-dialog-label-padding-top: 20px !default;
 $rte-insert-dialog-label-padding-bottom: 0 !default;
 $rte-big-quick-tbar-item-min-height: 40px !default;
 $rte-big-quick-tbar-item-min-width: 40px !default;
-$rte-content-font-size: $text-sm !default;
+$rte-content-font-size: 14px !default;
+$rte-big-content-font-size: 16px !default;
 $rte-dropdown-caret-icon-size: $text-xs !default;
 $rte-big-dropdown-caret-icon-size: $text-sm !default;
 $font-weight: $font-weight-normal !default;
@@ -137,13 +138,13 @@ $rte-inline-dropdown-line-height: 14px !default;
 $rte-big-inline-dropdown-line-height: 14px !default;
 $rte-insert-dialog-font-size: 10px;
 $rte-big-insert-dialog-font-size: 10px;
-$rte-table-popup-tablecell-height: 20px;
-$rte-table-popup-tablecell-width: 20px;
-$rte-table-popup-tablecell-margin: 2px;
-$rte-table-popup-row-height : 24px;
-$rte-big-table-row-height : 28px;
-$rte-big-tablecell-height : 24px;
-$rte-big-tablecell-width : 24px;
+$rte-table-popup-tablecell-height: 14px;
+$rte-table-popup-tablecell-width: 14px;
+$rte-table-popup-tablecell-margin: 1px;
+$rte-table-popup-row-height : 16px;
+$rte-big-table-row-height : 18px;
+$rte-big-tablecell-height : 16px;
+$rte-big-tablecell-width : 16px;
 $rte-toolbar-item-frist-last-child-margin: 0;
 $rte-big-toolbar-item-frist-last-child-margin: 0;
 $rte-toolbar-expaned-padding: 0 7px;
@@ -444,6 +445,9 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         min-height: 350px;
       }
     }
+    .e-rte-content .e-content {
+      font-size: $rte-big-content-font-size;
+    }
   }
   .e-richtexteditor {
@@ -750,10 +754,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         position: relative;
         text-align: inherit;
         z-index: 2;
-        @media screen and (min-width: 992px) {
-          font-size: $rte-content-font-size;
-        }
+        font-size: $rte-content-font-size;
       }
       .e-content p {
@@ -939,6 +940,34 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     .e-toolbar.e-extended-toolbar .e-toolbar-extended.e-toolbar-pop .e-toolbar-item .e-tbar-btn{
       font-size: $rte-tbar-icon-size;
     }
+    .e-clickelem::after,
+    .e-video-clickelem::after {
+      left: 0;
+      right: 0;
+      z-index: 1;
+    }
+    .e-clickelem::before,
+    .e-video-clickelem::before {
+      left: 0;
+      right: 0;
+      z-index: 1;
+    }
+    .e-clickelem::before {
+      bottom: 70%;
+      top: 0;
+    }
+    .e-clickelem::after {
+      bottom: 0;
+      top: 70%;
+    }
+    .e-video-clickelem::before {
+      bottom: 85%;
+      top: 0;
+    }
+    .e-video-clickelem::after {
+      bottom: 0;
+      top: 90%;
+    }
   }
   .e-rte-linkcontent .e-rte-label {
@@ -1234,7 +1263,6 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     height: 20px;
     min-width: 20px;
     padding: 2px 5px;
-    vertical-align: middle;
   }
   .e-rte-table.e-dashed-border td,
@@ -1277,6 +1305,14 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     padding-top: 0;
   }
+  .e-rte-video-dialog .e-rte-label {
+    padding-top: $rte-insert-dialog-label-padding-top;
+  }
+  .e-rte-video-dialog .e-rte-label:first-child {
+    padding-top: 0;
+  }
   .e-rte-table-resize.e-row-resize,
   .e-rte-table-resize.e-column-resize {
     background-color: transparent;
@@ -2817,15 +2853,19 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     .e-clickelem::after,
     .e-video-clickelem::after {
       background: transparent;
-      bottom: 0;
       content: '';
       cursor: default;
       display: block;
-      left: 0;
       position: absolute;
-      right: 0;
-      top: 0;
-      z-index: 1;
+    }
+    .e-clickelem::before,
+    .e-video-clickelem::before {
+      background: transparent;
+      content: '';
+      cursor: default;
+      display: block;
+      position: absolute;
     }
     .e-videoheader,

package/SCSS-Themes/richtexteditor/rich-text-editor/material3.scss CHANGED Viewed

@@ -113,7 +113,8 @@ $rte-insert-dialog-label-padding-top: 20px !default;
 $rte-insert-dialog-label-padding-bottom: 0 !default;
 $rte-big-quick-tbar-item-min-height: 40px !default;
 $rte-big-quick-tbar-item-min-width: 40px !default;
-$rte-content-font-size: $text-sm !default;
+$rte-content-font-size: 14px !default;
+$rte-big-content-font-size: 16px !default;
 $rte-dropdown-caret-icon-size: $text-xs !default;
 $rte-big-dropdown-caret-icon-size: $text-sm !default;
 $font-weight: $font-weight-normal !default;
@@ -137,13 +138,13 @@ $rte-inline-dropdown-line-height: 14px !default;
 $rte-big-inline-dropdown-line-height: 14px !default;
 $rte-insert-dialog-font-size: 10px;
 $rte-big-insert-dialog-font-size: 10px;
-$rte-table-popup-tablecell-height: 20px;
-$rte-table-popup-tablecell-width: 20px;
-$rte-table-popup-tablecell-margin: 2px;
-$rte-table-popup-row-height : 24px;
-$rte-big-table-row-height : 28px;
-$rte-big-tablecell-height : 24px;
-$rte-big-tablecell-width : 24px;
+$rte-table-popup-tablecell-height: 14px;
+$rte-table-popup-tablecell-width: 14px;
+$rte-table-popup-tablecell-margin: 1px;
+$rte-table-popup-row-height : 16px;
+$rte-big-table-row-height : 18px;
+$rte-big-tablecell-height : 16px;
+$rte-big-tablecell-width : 16px;
 $rte-toolbar-item-frist-last-child-margin: 0;
 $rte-big-toolbar-item-frist-last-child-margin: 0;
 $rte-toolbar-expaned-padding: 0 7px;
@@ -444,6 +445,9 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         min-height: 350px;
       }
     }
+    .e-rte-content .e-content {
+      font-size: $rte-big-content-font-size;
+    }
   }
   .e-richtexteditor {
@@ -750,10 +754,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         position: relative;
         text-align: inherit;
         z-index: 2;
-        @media screen and (min-width: 992px) {
-          font-size: $rte-content-font-size;
-        }
+        font-size: $rte-content-font-size;
       }
       .e-content p {
@@ -939,6 +940,34 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     .e-toolbar.e-extended-toolbar .e-toolbar-extended.e-toolbar-pop .e-toolbar-item .e-tbar-btn{
       font-size: $rte-tbar-icon-size;
     }
+    .e-clickelem::after,
+    .e-video-clickelem::after {
+      left: 0;
+      right: 0;
+      z-index: 1;
+    }
+    .e-clickelem::before,
+    .e-video-clickelem::before {
+      left: 0;
+      right: 0;
+      z-index: 1;
+    }
+    .e-clickelem::before {
+      bottom: 70%;
+      top: 0;
+    }
+    .e-clickelem::after {
+      bottom: 0;
+      top: 70%;
+    }
+    .e-video-clickelem::before {
+      bottom: 85%;
+      top: 0;
+    }
+    .e-video-clickelem::after {
+      bottom: 0;
+      top: 90%;
+    }
   }
   .e-rte-linkcontent .e-rte-label {
@@ -1234,7 +1263,6 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     height: 20px;
     min-width: 20px;
     padding: 2px 5px;
-    vertical-align: middle;
   }
   .e-rte-table.e-dashed-border td,
@@ -1277,6 +1305,14 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     padding-top: 0;
   }
+  .e-rte-video-dialog .e-rte-label {
+    padding-top: $rte-insert-dialog-label-padding-top;
+  }
+  .e-rte-video-dialog .e-rte-label:first-child {
+    padding-top: 0;
+  }
   .e-rte-table-resize.e-row-resize,
   .e-rte-table-resize.e-column-resize {
     background-color: transparent;
@@ -2817,15 +2853,19 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     .e-clickelem::after,
     .e-video-clickelem::after {
       background: transparent;
-      bottom: 0;
       content: '';
       cursor: default;
       display: block;
-      left: 0;
       position: absolute;
-      right: 0;
-      top: 0;
-      z-index: 1;
+    }
+    .e-clickelem::before,
+    .e-video-clickelem::before {
+      background: transparent;
+      content: '';
+      cursor: default;
+      display: block;
+      position: absolute;
     }
     .e-videoheader,

package/SCSS-Themes/richtexteditor/rich-text-editor/tailwind-dark.scss CHANGED Viewed

@@ -113,7 +113,8 @@ $rte-insert-dialog-label-padding-top: 12px !default;
 $rte-insert-dialog-label-padding-bottom: 3px !default;
 $rte-big-quick-tbar-item-min-height: 38px !default;
 $rte-big-quick-tbar-item-min-width: 38px !default;
-$rte-content-font-size:  $text-sm !default;
+$rte-content-font-size: 14px !default;
+$rte-big-content-font-size: 16px !default;
 $rte-dropdown-caret-icon-size: $text-xs !default;
 $rte-big-dropdown-caret-icon-size: $text-sm !default;
 $rte-inline-dropdown-line-height: 30px !default;
@@ -439,6 +440,9 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         min-height: 350px;
       }
     }
+    .e-rte-content .e-content {
+      font-size: $rte-big-content-font-size;
+    }
   }
   .e-richtexteditor {
@@ -745,10 +749,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         position: relative;
         text-align: inherit;
         z-index: 2;
-        @media screen and (min-width: 992px) {
-          font-size: $rte-content-font-size;
-        }
+        font-size: $rte-content-font-size;
       }
       .e-content p {
@@ -934,6 +935,34 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     .e-toolbar.e-extended-toolbar .e-toolbar-extended.e-toolbar-pop .e-toolbar-item .e-tbar-btn{
       font-size: $rte-tbar-icon-size;
     }
+    .e-clickelem::after,
+    .e-video-clickelem::after {
+      left: 0;
+      right: 0;
+      z-index: 1;
+    }
+    .e-clickelem::before,
+    .e-video-clickelem::before {
+      left: 0;
+      right: 0;
+      z-index: 1;
+    }
+    .e-clickelem::before {
+      bottom: 70%;
+      top: 0;
+    }
+    .e-clickelem::after {
+      bottom: 0;
+      top: 70%;
+    }
+    .e-video-clickelem::before {
+      bottom: 85%;
+      top: 0;
+    }
+    .e-video-clickelem::after {
+      bottom: 0;
+      top: 90%;
+    }
   }
   .e-rte-linkcontent .e-rte-label {
@@ -1229,7 +1258,6 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     height: 20px;
     min-width: 20px;
     padding: 2px 5px;
-    vertical-align: middle;
   }
   .e-rte-table.e-dashed-border td,
@@ -1272,6 +1300,14 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     padding-top: 0;
   }
+  .e-rte-video-dialog .e-rte-label {
+    padding-top: $rte-insert-dialog-label-padding-top;
+  }
+  .e-rte-video-dialog .e-rte-label:first-child {
+    padding-top: 0;
+  }
   .e-rte-table-resize.e-row-resize,
   .e-rte-table-resize.e-column-resize {
     background-color: transparent;
@@ -2812,15 +2848,19 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     .e-clickelem::after,
     .e-video-clickelem::after {
       background: transparent;
-      bottom: 0;
       content: '';
       cursor: default;
       display: block;
-      left: 0;
       position: absolute;
-      right: 0;
-      top: 0;
-      z-index: 1;
+    }
+    .e-clickelem::before,
+    .e-video-clickelem::before {
+      background: transparent;
+      content: '';
+      cursor: default;
+      display: block;
+      position: absolute;
     }
     .e-videoheader,

package/SCSS-Themes/richtexteditor/rich-text-editor/tailwind.scss CHANGED Viewed

@@ -113,7 +113,8 @@ $rte-insert-dialog-label-padding-top: 12px !default;
 $rte-insert-dialog-label-padding-bottom: 3px !default;
 $rte-big-quick-tbar-item-min-height: 38px !default;
 $rte-big-quick-tbar-item-min-width: 38px !default;
-$rte-content-font-size:  $text-sm !default;
+$rte-content-font-size: 14px !default;
+$rte-big-content-font-size: 16px !default;
 $rte-dropdown-caret-icon-size: $text-xs !default;
 $rte-big-dropdown-caret-icon-size: $text-sm !default;
 $rte-inline-dropdown-line-height: 30px !default;
@@ -439,6 +440,9 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         min-height: 350px;
       }
     }
+    .e-rte-content .e-content {
+      font-size: $rte-big-content-font-size;
+    }
   }
   .e-richtexteditor {
@@ -745,10 +749,7 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
         position: relative;
         text-align: inherit;
         z-index: 2;
-        @media screen and (min-width: 992px) {
-          font-size: $rte-content-font-size;
-        }
+        font-size: $rte-content-font-size;
       }
       .e-content p {
@@ -934,6 +935,34 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     .e-toolbar.e-extended-toolbar .e-toolbar-extended.e-toolbar-pop .e-toolbar-item .e-tbar-btn{
       font-size: $rte-tbar-icon-size;
     }
+    .e-clickelem::after,
+    .e-video-clickelem::after {
+      left: 0;
+      right: 0;
+      z-index: 1;
+    }
+    .e-clickelem::before,
+    .e-video-clickelem::before {
+      left: 0;
+      right: 0;
+      z-index: 1;
+    }
+    .e-clickelem::before {
+      bottom: 70%;
+      top: 0;
+    }
+    .e-clickelem::after {
+      bottom: 0;
+      top: 70%;
+    }
+    .e-video-clickelem::before {
+      bottom: 85%;
+      top: 0;
+    }
+    .e-video-clickelem::after {
+      bottom: 0;
+      top: 90%;
+    }
   }
   .e-rte-linkcontent .e-rte-label {
@@ -1229,7 +1258,6 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     height: 20px;
     min-width: 20px;
     padding: 2px 5px;
-    vertical-align: middle;
   }
   .e-rte-table.e-dashed-border td,
@@ -1272,6 +1300,14 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     padding-top: 0;
   }
+  .e-rte-video-dialog .e-rte-label {
+    padding-top: $rte-insert-dialog-label-padding-top;
+  }
+  .e-rte-video-dialog .e-rte-label:first-child {
+    padding-top: 0;
+  }
   .e-rte-table-resize.e-row-resize,
   .e-rte-table-resize.e-column-resize {
     background-color: transparent;
@@ -2812,15 +2848,19 @@ $rte-format-painter-cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiI
     .e-clickelem::after,
     .e-video-clickelem::after {
       background: transparent;
-      bottom: 0;
       content: '';
       cursor: default;
       display: block;
-      left: 0;
       position: absolute;
-      right: 0;
-      top: 0;
-      z-index: 1;
+    }
+    .e-clickelem::before,
+    .e-video-clickelem::before {
+      background: transparent;
+      content: '';
+      cursor: default;
+      display: block;
+      position: absolute;
     }
     .e-videoheader,

package/SCSS-Themes/splitbuttons/drop-down-button/bootstrap-dark.scss CHANGED Viewed

@@ -301,7 +301,7 @@ $drop-down-btn-bigger-popup-margin-top: 0 !default;
       background: $drop-down-btn-ul-bgcolor;
     }
     @else {
-      background-color: $drop-down-btn-ul-bgcolor;
+      background: $drop-down-btn-ul-bgcolor;
     }
     color: $drop-down-btn-color;
@@ -317,24 +317,24 @@ $drop-down-btn-bigger-popup-margin-top: 0 !default;
         &.e-focused {
           @if $skin-name != 'FluentUI' {
-            background-color: $drop-down-btn-li-focus-bgcolor;
+            background: $drop-down-btn-li-focus-bgcolor;
           }
           box-shadow: $drop-down-btn-li-box-shadow;
         }
         &:hover {
           @if $skin-name == 'bootstrap5' {
-            background-color: $drop-down-btn-li-hover-bgcolor;
+            background: $drop-down-btn-li-hover-bgcolor;
           }
           @else {
-            background-color: $drop-down-btn-li-bgcolor;
+            background: $drop-down-btn-li-bgcolor;
           }
           color: $drop-down-btn-li-selection-font-color;
         }
         &:active,
         &.e-selected {
-          background-color: $drop-down-btn-li-selection-bgcolor;
+          background: $drop-down-btn-li-selection-bgcolor;
           color: $drop-down-btn-selected-color;
           & .e-menu-url {
@@ -370,7 +370,7 @@ $drop-down-btn-bigger-popup-margin-top: 0 !default;
       &:focus,
       &:active,
       &.e-active {
-        background-color: rgba(transparent, .056);
+        background: rgba(transparent, .056);
         border-color: transparent;
         box-shadow: none;
         color: inherit;

package/SCSS-Themes/splitbuttons/drop-down-button/bootstrap.scss CHANGED Viewed

@@ -298,7 +298,7 @@ $drop-down-btn-bigger-popup-margin-top: 0 !default;
       background: $drop-down-btn-ul-bgcolor;
     }
     @else {
-      background-color: $drop-down-btn-ul-bgcolor;
+      background: $drop-down-btn-ul-bgcolor;
     }
     color: $drop-down-btn-color;
@@ -314,24 +314,24 @@ $drop-down-btn-bigger-popup-margin-top: 0 !default;
         &.e-focused {
           @if $skin-name != 'FluentUI' {
-            background-color: $drop-down-btn-li-focus-bgcolor;
+            background: $drop-down-btn-li-focus-bgcolor;
           }
           box-shadow: $drop-down-btn-li-box-shadow;
         }
         &:hover {
           @if $skin-name == 'bootstrap5' {
-            background-color: $drop-down-btn-li-hover-bgcolor;
+            background: $drop-down-btn-li-hover-bgcolor;
           }
           @else {
-            background-color: $drop-down-btn-li-bgcolor;
+            background: $drop-down-btn-li-bgcolor;
           }
           color: $drop-down-btn-li-selection-font-color;
         }
         &:active,
         &.e-selected {
-          background-color: $drop-down-btn-li-selection-bgcolor;
+          background: $drop-down-btn-li-selection-bgcolor;
           color: $drop-down-btn-selected-color;
           & .e-menu-url {
@@ -367,7 +367,7 @@ $drop-down-btn-bigger-popup-margin-top: 0 !default;
       &:focus,
       &:active,
       &.e-active {
-        background-color: rgba(transparent, .056);
+        background: rgba(transparent, .056);
         border-color: transparent;
         box-shadow: none;
         color: inherit;

package/SCSS-Themes/splitbuttons/drop-down-button/bootstrap4.scss CHANGED Viewed

@@ -298,7 +298,7 @@ $drop-down-btn-bigger-popup-margin-top: 0 !default;
       background: $drop-down-btn-ul-bgcolor;
     }
     @else {
-      background-color: $drop-down-btn-ul-bgcolor;
+      background: $drop-down-btn-ul-bgcolor;
     }
     color: $drop-down-btn-color;
@@ -314,24 +314,24 @@ $drop-down-btn-bigger-popup-margin-top: 0 !default;
         &.e-focused {
           @if $skin-name != 'FluentUI' {
-            background-color: $drop-down-btn-li-focus-bgcolor;
+            background: $drop-down-btn-li-focus-bgcolor;
           }
           box-shadow: $drop-down-btn-li-box-shadow;
         }
         &:hover {
           @if $skin-name == 'bootstrap5' {
-            background-color: $drop-down-btn-li-hover-bgcolor;
+            background: $drop-down-btn-li-hover-bgcolor;
           }
           @else {
-            background-color: $drop-down-btn-li-bgcolor;
+            background: $drop-down-btn-li-bgcolor;
           }
           color: $drop-down-btn-li-selection-font-color;
         }
         &:active,
         &.e-selected {
-          background-color: $drop-down-btn-li-selection-bgcolor;
+          background: $drop-down-btn-li-selection-bgcolor;
           color: $drop-down-btn-selected-color;
           & .e-menu-url {
@@ -367,7 +367,7 @@ $drop-down-btn-bigger-popup-margin-top: 0 !default;
       &:focus,
       &:active,
       &.e-active {
-        background-color: rgba(transparent, .056);
+        background: rgba(transparent, .056);
         border-color: transparent;
         box-shadow: none;
         color: inherit;

package/SCSS-Themes/splitbuttons/drop-down-button/bootstrap5-dark.scss CHANGED Viewed

@@ -300,7 +300,7 @@ $drop-down-btn-li-hover-bgcolor: $flyout-bg-color-hover !default;
       background: $drop-down-btn-ul-bgcolor;
     }
     @else {
-      background-color: $drop-down-btn-ul-bgcolor;
+      background: $drop-down-btn-ul-bgcolor;
     }
     color: $drop-down-btn-color;
@@ -316,24 +316,24 @@ $drop-down-btn-li-hover-bgcolor: $flyout-bg-color-hover !default;
         &.e-focused {
           @if $skin-name != 'FluentUI' {
-            background-color: $drop-down-btn-li-focus-bgcolor;
+            background: $drop-down-btn-li-focus-bgcolor;
           }
           box-shadow: $drop-down-btn-li-box-shadow;
         }
         &:hover {
           @if $skin-name == 'bootstrap5' {
-            background-color: $drop-down-btn-li-hover-bgcolor;
+            background: $drop-down-btn-li-hover-bgcolor;
           }
           @else {
-            background-color: $drop-down-btn-li-bgcolor;
+            background: $drop-down-btn-li-bgcolor;
           }
           color: $drop-down-btn-li-selection-font-color;
         }
         &:active,
         &.e-selected {
-          background-color: $drop-down-btn-li-selection-bgcolor;
+          background: $drop-down-btn-li-selection-bgcolor;
           color: $drop-down-btn-selected-color;
           & .e-menu-url {
@@ -369,7 +369,7 @@ $drop-down-btn-li-hover-bgcolor: $flyout-bg-color-hover !default;
       &:focus,
       &:active,
       &.e-active {
-        background-color: rgba(transparent, .056);
+        background: rgba(transparent, .056);
         border-color: transparent;
         box-shadow: none;
         color: inherit;