npm - @syncfusion/blazor-themes - Versions diffs - 24.1.43 → 24.1.44 - Mend

@syncfusion/blazor-themes 24.1.43 → 24.1.44

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

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

@@ -2728,12 +2728,22 @@ $btn-focus-box-shadow: none !default;
           @if $skin-name == 'FluentUI' {
             outline: none !important; /* stylelint-disable-line declaration-no-important */
           }
+          @if $skin-name == 'bootstrap5' {
+            background: $btn-outline-active-bgcolor;
+            color: $btn-outline-active-color;
+          }
         }
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
             background: $btn-outline-bgcolor;
           }
+          @if $skin-name == 'bootstrap5' {
+            box-shadow: $btn-focus-box-shadow;
+          }
           @if $skin-name == 'Material3' {
             background: $btn-active-bgcolor;
             box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2784,12 +2794,22 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-outline-primary-focus-bgcolor;
+              color: $btn-outline-active-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-primary-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-primary-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2847,12 +2867,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-success-bgcolor;
+              color: $btn-success-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-success-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-success-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2910,12 +2938,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-info-bgcolor;
+              color: $btn-info-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-info-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-info-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2973,12 +3009,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-warning-bgcolor;
+              color: $btn-warning-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-warning-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-warning-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -3036,12 +3080,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-danger-bgcolor;
+              color: $btn-danger-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-danger-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-danger-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;

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

@@ -2736,12 +2736,22 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
           @if $skin-name == 'FluentUI' {
             outline: none !important; /* stylelint-disable-line declaration-no-important */
           }
+          @if $skin-name == 'bootstrap5' {
+            background: $btn-outline-active-bgcolor;
+            color: $btn-outline-active-color;
+          }
         }
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
             background: $btn-outline-bgcolor;
           }
+          @if $skin-name == 'bootstrap5' {
+            box-shadow: $btn-focus-box-shadow;
+          }
           @if $skin-name == 'Material3' {
             background: $btn-active-bgcolor;
             box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2792,12 +2802,22 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-outline-primary-focus-bgcolor;
+              color: $btn-outline-active-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-primary-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-primary-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2855,12 +2875,20 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-success-bgcolor;
+              color: $btn-success-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-success-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-success-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2918,12 +2946,20 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-info-bgcolor;
+              color: $btn-info-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-info-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-info-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2981,12 +3017,20 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-warning-bgcolor;
+              color: $btn-warning-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-warning-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-warning-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -3044,12 +3088,20 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-danger-bgcolor;
+              color: $btn-danger-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-danger-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-danger-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;

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

@@ -2736,12 +2736,22 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
           @if $skin-name == 'FluentUI' {
             outline: none !important; /* stylelint-disable-line declaration-no-important */
           }
+          @if $skin-name == 'bootstrap5' {
+            background: $btn-outline-active-bgcolor;
+            color: $btn-outline-active-color;
+          }
         }
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
             background: $btn-outline-bgcolor;
           }
+          @if $skin-name == 'bootstrap5' {
+            box-shadow: $btn-focus-box-shadow;
+          }
           @if $skin-name == 'Material3' {
             background: $btn-active-bgcolor;
             box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2792,12 +2802,22 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-outline-primary-focus-bgcolor;
+              color: $btn-outline-active-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-primary-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-primary-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2855,12 +2875,20 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-success-bgcolor;
+              color: $btn-success-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-success-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-success-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2918,12 +2946,20 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-info-bgcolor;
+              color: $btn-info-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-info-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-info-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2981,12 +3017,20 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-warning-bgcolor;
+              color: $btn-warning-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-warning-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-warning-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -3044,12 +3088,20 @@ $btn-warning-focus-box-shadow: $warning-shadow-focus !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-danger-bgcolor;
+              color: $btn-danger-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-danger-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-danger-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;

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

@@ -2664,12 +2664,22 @@ $btn-focus-box-shadow: none !default;
           @if $skin-name == 'FluentUI' {
             outline: none !important; /* stylelint-disable-line declaration-no-important */
           }
+          @if $skin-name == 'bootstrap5' {
+            background: $btn-outline-active-bgcolor;
+            color: $btn-outline-active-color;
+          }
         }
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
             background: $btn-outline-bgcolor;
           }
+          @if $skin-name == 'bootstrap5' {
+            box-shadow: $btn-focus-box-shadow;
+          }
           @if $skin-name == 'Material3' {
             background: $btn-active-bgcolor;
             box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2720,12 +2730,22 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-outline-primary-focus-bgcolor;
+              color: $btn-outline-active-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-primary-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-primary-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2783,12 +2803,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-success-bgcolor;
+              color: $btn-success-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-success-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-success-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2846,12 +2874,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-info-bgcolor;
+              color: $btn-info-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-info-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-info-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2909,12 +2945,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-warning-bgcolor;
+              color: $btn-warning-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-warning-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-warning-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2972,12 +3016,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-danger-bgcolor;
+              color: $btn-danger-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-danger-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-danger-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;

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

@@ -2659,12 +2659,22 @@ $btn-focus-box-shadow: none !default;
           @if $skin-name == 'FluentUI' {
             outline: none !important; /* stylelint-disable-line declaration-no-important */
           }
+          @if $skin-name == 'bootstrap5' {
+            background: $btn-outline-active-bgcolor;
+            color: $btn-outline-active-color;
+          }
         }
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
             background: $btn-outline-bgcolor;
           }
+          @if $skin-name == 'bootstrap5' {
+            box-shadow: $btn-focus-box-shadow;
+          }
           @if $skin-name == 'Material3' {
             background: $btn-active-bgcolor;
             box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2715,12 +2725,22 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-outline-primary-focus-bgcolor;
+              color: $btn-outline-active-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-primary-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-primary-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2778,12 +2798,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-success-bgcolor;
+              color: $btn-success-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-success-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-success-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2841,12 +2869,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-info-bgcolor;
+              color: $btn-info-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-info-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-info-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2904,12 +2940,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-warning-bgcolor;
+              color: $btn-warning-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-warning-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-warning-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2967,12 +3011,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-danger-bgcolor;
+              color: $btn-danger-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-danger-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-danger-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;