@syncfusion/blazor-themes 24.1.41 → 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 (117) hide show
  1. package/SCSS-Themes/bootstrap-dark.scss +89 -9
  2. package/SCSS-Themes/bootstrap.scss +89 -9
  3. package/SCSS-Themes/bootstrap4.scss +89 -9
  4. package/SCSS-Themes/bootstrap5-dark.scss +89 -9
  5. package/SCSS-Themes/bootstrap5.scss +89 -9
  6. package/SCSS-Themes/buttons/button/bootstrap-dark.scss +52 -0
  7. package/SCSS-Themes/buttons/button/bootstrap.scss +52 -0
  8. package/SCSS-Themes/buttons/button/bootstrap4.scss +52 -0
  9. package/SCSS-Themes/buttons/button/bootstrap5-dark.scss +52 -0
  10. package/SCSS-Themes/buttons/button/bootstrap5.scss +52 -0
  11. package/SCSS-Themes/buttons/button/fabric-dark.scss +52 -0
  12. package/SCSS-Themes/buttons/button/fabric.scss +52 -0
  13. package/SCSS-Themes/buttons/button/fluent-dark.scss +52 -0
  14. package/SCSS-Themes/buttons/button/fluent.scss +52 -0
  15. package/SCSS-Themes/buttons/button/highcontrast.scss +52 -0
  16. package/SCSS-Themes/buttons/button/material-dark.scss +52 -0
  17. package/SCSS-Themes/buttons/button/material.scss +52 -0
  18. package/SCSS-Themes/buttons/button/material3-dark.scss +52 -0
  19. package/SCSS-Themes/buttons/button/material3.scss +52 -0
  20. package/SCSS-Themes/buttons/button/tailwind-dark.scss +52 -0
  21. package/SCSS-Themes/buttons/button/tailwind.scss +52 -0
  22. package/SCSS-Themes/dropdowns/drop-down-base/bootstrap-dark.scss +0 -3
  23. package/SCSS-Themes/dropdowns/drop-down-base/bootstrap.scss +0 -3
  24. package/SCSS-Themes/dropdowns/drop-down-base/bootstrap4.scss +0 -3
  25. package/SCSS-Themes/dropdowns/drop-down-base/bootstrap5-dark.scss +0 -3
  26. package/SCSS-Themes/dropdowns/drop-down-base/bootstrap5.scss +0 -3
  27. package/SCSS-Themes/dropdowns/drop-down-base/fabric-dark.scss +0 -3
  28. package/SCSS-Themes/dropdowns/drop-down-base/fabric.scss +0 -3
  29. package/SCSS-Themes/dropdowns/drop-down-base/fluent-dark.scss +0 -3
  30. package/SCSS-Themes/dropdowns/drop-down-base/fluent.scss +0 -3
  31. package/SCSS-Themes/dropdowns/drop-down-base/highcontrast.scss +0 -3
  32. package/SCSS-Themes/dropdowns/drop-down-base/material-dark.scss +0 -3
  33. package/SCSS-Themes/dropdowns/drop-down-base/material.scss +0 -3
  34. package/SCSS-Themes/dropdowns/drop-down-base/material3-dark.scss +0 -3
  35. package/SCSS-Themes/dropdowns/drop-down-base/material3.scss +0 -3
  36. package/SCSS-Themes/dropdowns/drop-down-base/tailwind-dark.scss +0 -3
  37. package/SCSS-Themes/dropdowns/drop-down-base/tailwind.scss +0 -3
  38. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap-dark.scss +5 -0
  39. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap.scss +5 -0
  40. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap4.scss +5 -0
  41. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap5-dark.scss +5 -0
  42. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap5.scss +5 -0
  43. package/SCSS-Themes/dropdowns/drop-down-tree/fabric-dark.scss +5 -0
  44. package/SCSS-Themes/dropdowns/drop-down-tree/fabric.scss +5 -0
  45. package/SCSS-Themes/dropdowns/drop-down-tree/fluent-dark.scss +5 -0
  46. package/SCSS-Themes/dropdowns/drop-down-tree/fluent.scss +5 -0
  47. package/SCSS-Themes/dropdowns/drop-down-tree/highcontrast.scss +5 -0
  48. package/SCSS-Themes/dropdowns/drop-down-tree/material-dark.scss +5 -0
  49. package/SCSS-Themes/dropdowns/drop-down-tree/material.scss +5 -0
  50. package/SCSS-Themes/dropdowns/drop-down-tree/material3-dark.scss +5 -0
  51. package/SCSS-Themes/dropdowns/drop-down-tree/material3.scss +5 -0
  52. package/SCSS-Themes/dropdowns/drop-down-tree/tailwind-dark.scss +5 -0
  53. package/SCSS-Themes/dropdowns/drop-down-tree/tailwind.scss +5 -0
  54. package/SCSS-Themes/fabric-dark.scss +89 -9
  55. package/SCSS-Themes/fabric.scss +89 -9
  56. package/SCSS-Themes/fluent-dark.scss +90 -10
  57. package/SCSS-Themes/fluent.scss +90 -10
  58. package/SCSS-Themes/grids/grid/bootstrap-dark.scss +9 -0
  59. package/SCSS-Themes/grids/grid/bootstrap.scss +9 -0
  60. package/SCSS-Themes/grids/grid/bootstrap4.scss +9 -0
  61. package/SCSS-Themes/grids/grid/bootstrap5-dark.scss +9 -0
  62. package/SCSS-Themes/grids/grid/bootstrap5.scss +9 -0
  63. package/SCSS-Themes/grids/grid/fabric-dark.scss +9 -0
  64. package/SCSS-Themes/grids/grid/fabric.scss +9 -0
  65. package/SCSS-Themes/grids/grid/fluent-dark.scss +9 -0
  66. package/SCSS-Themes/grids/grid/fluent.scss +9 -0
  67. package/SCSS-Themes/grids/grid/highcontrast.scss +9 -0
  68. package/SCSS-Themes/grids/grid/material-dark.scss +10 -1
  69. package/SCSS-Themes/grids/grid/material.scss +9 -0
  70. package/SCSS-Themes/grids/grid/material3-dark.scss +9 -0
  71. package/SCSS-Themes/grids/grid/material3.scss +9 -0
  72. package/SCSS-Themes/grids/grid/tailwind-dark.scss +9 -0
  73. package/SCSS-Themes/grids/grid/tailwind.scss +9 -0
  74. package/SCSS-Themes/highcontrast.scss +89 -9
  75. package/SCSS-Themes/image-editor/image-editor/bootstrap-dark.scss +9 -6
  76. package/SCSS-Themes/image-editor/image-editor/bootstrap.scss +9 -6
  77. package/SCSS-Themes/image-editor/image-editor/bootstrap4.scss +9 -6
  78. package/SCSS-Themes/image-editor/image-editor/bootstrap5-dark.scss +9 -6
  79. package/SCSS-Themes/image-editor/image-editor/bootstrap5.scss +9 -6
  80. package/SCSS-Themes/image-editor/image-editor/fabric-dark.scss +9 -6
  81. package/SCSS-Themes/image-editor/image-editor/fabric.scss +9 -6
  82. package/SCSS-Themes/image-editor/image-editor/fluent-dark.scss +9 -6
  83. package/SCSS-Themes/image-editor/image-editor/fluent.scss +9 -6
  84. package/SCSS-Themes/image-editor/image-editor/highcontrast.scss +9 -6
  85. package/SCSS-Themes/image-editor/image-editor/material-dark.scss +9 -6
  86. package/SCSS-Themes/image-editor/image-editor/material.scss +9 -6
  87. package/SCSS-Themes/image-editor/image-editor/material3-dark.scss +9 -6
  88. package/SCSS-Themes/image-editor/image-editor/material3.scss +9 -6
  89. package/SCSS-Themes/image-editor/image-editor/tailwind-dark.scss +9 -6
  90. package/SCSS-Themes/image-editor/image-editor/tailwind.scss +9 -6
  91. package/SCSS-Themes/inputs/data-form/material3-dark.scss +1 -1
  92. package/SCSS-Themes/inputs/data-form/material3.scss +1 -1
  93. package/SCSS-Themes/material-dark.scss +90 -10
  94. package/SCSS-Themes/material.scss +89 -9
  95. package/SCSS-Themes/material3-dark.scss +90 -10
  96. package/SCSS-Themes/material3.scss +90 -10
  97. package/SCSS-Themes/pdfviewer/pdfviewer/fluent-dark.scss +1 -1
  98. package/SCSS-Themes/pdfviewer/pdfviewer/fluent.scss +1 -1
  99. package/SCSS-Themes/splitbuttons/progress-button/bootstrap-dark.scss +14 -0
  100. package/SCSS-Themes/splitbuttons/progress-button/bootstrap.scss +14 -0
  101. package/SCSS-Themes/splitbuttons/progress-button/bootstrap4.scss +14 -0
  102. package/SCSS-Themes/splitbuttons/progress-button/bootstrap5-dark.scss +14 -0
  103. package/SCSS-Themes/splitbuttons/progress-button/bootstrap5.scss +14 -0
  104. package/SCSS-Themes/splitbuttons/progress-button/fabric-dark.scss +14 -0
  105. package/SCSS-Themes/splitbuttons/progress-button/fabric.scss +14 -0
  106. package/SCSS-Themes/splitbuttons/progress-button/fluent-dark.scss +14 -0
  107. package/SCSS-Themes/splitbuttons/progress-button/fluent.scss +14 -0
  108. package/SCSS-Themes/splitbuttons/progress-button/highcontrast.scss +14 -0
  109. package/SCSS-Themes/splitbuttons/progress-button/material-dark.scss +14 -0
  110. package/SCSS-Themes/splitbuttons/progress-button/material.scss +14 -0
  111. package/SCSS-Themes/splitbuttons/progress-button/material3-dark.scss +14 -0
  112. package/SCSS-Themes/splitbuttons/progress-button/material3.scss +14 -0
  113. package/SCSS-Themes/splitbuttons/progress-button/tailwind-dark.scss +14 -0
  114. package/SCSS-Themes/splitbuttons/progress-button/tailwind.scss +14 -0
  115. package/SCSS-Themes/tailwind-dark.scss +89 -9
  116. package/SCSS-Themes/tailwind.scss +89 -9
  117. package/package.json +1 -1
@@ -2661,12 +2661,22 @@ $btn-focus-box-shadow: none !default;
2661
2661
  @if $skin-name == 'FluentUI' {
2662
2662
  outline: none !important; /* stylelint-disable-line declaration-no-important */
2663
2663
  }
2664
+
2665
+ @if $skin-name == 'bootstrap5' {
2666
+ background: $btn-outline-active-bgcolor;
2667
+ color: $btn-outline-active-color;
2668
+ }
2664
2669
  }
2665
2670
 
2666
2671
  &:focus-visible { // only for keybord
2667
2672
  @if $skin-name == 'FluentUI' {
2668
2673
  background: $btn-outline-bgcolor;
2669
2674
  }
2675
+
2676
+ @if $skin-name == 'bootstrap5' {
2677
+ box-shadow: $btn-focus-box-shadow;
2678
+ }
2679
+
2670
2680
  @if $skin-name == 'Material3' {
2671
2681
  background: $btn-active-bgcolor;
2672
2682
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2717,12 +2727,22 @@ $btn-focus-box-shadow: none !default;
2717
2727
  @if $skin-name == 'FluentUI' {
2718
2728
  outline: none !important; /* stylelint-disable-line declaration-no-important */
2719
2729
  }
2730
+
2731
+ @if $skin-name == 'bootstrap5' {
2732
+ background: $btn-outline-primary-focus-bgcolor;
2733
+ color: $btn-outline-active-color;
2734
+ }
2720
2735
  }
2721
2736
 
2722
2737
  &:focus-visible { // only for keybord
2723
2738
  @if $skin-name == 'FluentUI' {
2724
2739
  background: $btn-outline-bgcolor;
2725
2740
  }
2741
+
2742
+ @if $skin-name == 'bootstrap5' {
2743
+ box-shadow: $btn-primary-focus-box-shadow;
2744
+ }
2745
+
2726
2746
  @if $skin-name == 'Material3' {
2727
2747
  background: $btn-primary-active-bgcolor;
2728
2748
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2780,12 +2800,20 @@ $btn-focus-box-shadow: none !default;
2780
2800
  @if $skin-name == 'FluentUI' {
2781
2801
  outline: none !important; /* stylelint-disable-line declaration-no-important */
2782
2802
  }
2803
+
2804
+ @if $skin-name == 'bootstrap5' {
2805
+ background: $btn-success-bgcolor;
2806
+ color: $btn-success-color;
2807
+ }
2783
2808
  }
2784
2809
 
2785
2810
  &:focus-visible { // only for keybord
2786
2811
  @if $skin-name == 'FluentUI' {
2787
2812
  background: $btn-outline-bgcolor;
2788
2813
  }
2814
+ @if $skin-name == 'bootstrap5' {
2815
+ box-shadow: $btn-success-focus-box-shadow;
2816
+ }
2789
2817
  @if $skin-name == 'Material3' {
2790
2818
  background: $btn-success-active-bgcolor;
2791
2819
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2843,12 +2871,20 @@ $btn-focus-box-shadow: none !default;
2843
2871
  @if $skin-name == 'FluentUI' {
2844
2872
  outline: none !important; /* stylelint-disable-line declaration-no-important */
2845
2873
  }
2874
+
2875
+ @if $skin-name == 'bootstrap5' {
2876
+ background: $btn-info-bgcolor;
2877
+ color: $btn-info-color;
2878
+ }
2846
2879
  }
2847
2880
 
2848
2881
  &:focus-visible { // only for keybord
2849
2882
  @if $skin-name == 'FluentUI' {
2850
2883
  background: $btn-outline-bgcolor;
2851
2884
  }
2885
+ @if $skin-name == 'bootstrap5' {
2886
+ box-shadow: $btn-info-focus-box-shadow;
2887
+ }
2852
2888
  @if $skin-name == 'Material3' {
2853
2889
  background: $btn-info-active-bgcolor;
2854
2890
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2906,12 +2942,20 @@ $btn-focus-box-shadow: none !default;
2906
2942
  @if $skin-name == 'FluentUI' {
2907
2943
  outline: none !important; /* stylelint-disable-line declaration-no-important */
2908
2944
  }
2945
+
2946
+ @if $skin-name == 'bootstrap5' {
2947
+ background: $btn-warning-bgcolor;
2948
+ color: $btn-warning-color;
2949
+ }
2909
2950
  }
2910
2951
 
2911
2952
  &:focus-visible { // only for keybord
2912
2953
  @if $skin-name == 'FluentUI' {
2913
2954
  background: $btn-outline-bgcolor;
2914
2955
  }
2956
+ @if $skin-name == 'bootstrap5' {
2957
+ box-shadow: $btn-warning-focus-box-shadow;
2958
+ }
2915
2959
  @if $skin-name == 'Material3' {
2916
2960
  background: $btn-warning-active-bgcolor;
2917
2961
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2969,12 +3013,20 @@ $btn-focus-box-shadow: none !default;
2969
3013
  @if $skin-name == 'FluentUI' {
2970
3014
  outline: none !important; /* stylelint-disable-line declaration-no-important */
2971
3015
  }
3016
+
3017
+ @if $skin-name == 'bootstrap5' {
3018
+ background: $btn-danger-bgcolor;
3019
+ color: $btn-danger-color;
3020
+ }
2972
3021
  }
2973
3022
 
2974
3023
  &:focus-visible { // only for keybord
2975
3024
  @if $skin-name == 'FluentUI' {
2976
3025
  background: $btn-outline-bgcolor;
2977
3026
  }
3027
+ @if $skin-name == 'bootstrap5' {
3028
+ box-shadow: $btn-danger-focus-box-shadow;
3029
+ }
2978
3030
  @if $skin-name == 'Material3' {
2979
3031
  background: $btn-danger-active-bgcolor;
2980
3032
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2752,12 +2752,22 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
2752
2752
  @if $skin-name == 'FluentUI' {
2753
2753
  outline: none !important; /* stylelint-disable-line declaration-no-important */
2754
2754
  }
2755
+
2756
+ @if $skin-name == 'bootstrap5' {
2757
+ background: $btn-outline-active-bgcolor;
2758
+ color: $btn-outline-active-color;
2759
+ }
2755
2760
  }
2756
2761
 
2757
2762
  &:focus-visible { // only for keybord
2758
2763
  @if $skin-name == 'FluentUI' {
2759
2764
  background: $btn-outline-bgcolor;
2760
2765
  }
2766
+
2767
+ @if $skin-name == 'bootstrap5' {
2768
+ box-shadow: $btn-focus-box-shadow;
2769
+ }
2770
+
2761
2771
  @if $skin-name == 'Material3' {
2762
2772
  background: $btn-active-bgcolor;
2763
2773
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2808,12 +2818,22 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
2808
2818
  @if $skin-name == 'FluentUI' {
2809
2819
  outline: none !important; /* stylelint-disable-line declaration-no-important */
2810
2820
  }
2821
+
2822
+ @if $skin-name == 'bootstrap5' {
2823
+ background: $btn-outline-primary-focus-bgcolor;
2824
+ color: $btn-outline-active-color;
2825
+ }
2811
2826
  }
2812
2827
 
2813
2828
  &:focus-visible { // only for keybord
2814
2829
  @if $skin-name == 'FluentUI' {
2815
2830
  background: $btn-outline-bgcolor;
2816
2831
  }
2832
+
2833
+ @if $skin-name == 'bootstrap5' {
2834
+ box-shadow: $btn-primary-focus-box-shadow;
2835
+ }
2836
+
2817
2837
  @if $skin-name == 'Material3' {
2818
2838
  background: $btn-primary-active-bgcolor;
2819
2839
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2871,12 +2891,20 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
2871
2891
  @if $skin-name == 'FluentUI' {
2872
2892
  outline: none !important; /* stylelint-disable-line declaration-no-important */
2873
2893
  }
2894
+
2895
+ @if $skin-name == 'bootstrap5' {
2896
+ background: $btn-success-bgcolor;
2897
+ color: $btn-success-color;
2898
+ }
2874
2899
  }
2875
2900
 
2876
2901
  &:focus-visible { // only for keybord
2877
2902
  @if $skin-name == 'FluentUI' {
2878
2903
  background: $btn-outline-bgcolor;
2879
2904
  }
2905
+ @if $skin-name == 'bootstrap5' {
2906
+ box-shadow: $btn-success-focus-box-shadow;
2907
+ }
2880
2908
  @if $skin-name == 'Material3' {
2881
2909
  background: $btn-success-active-bgcolor;
2882
2910
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2934,12 +2962,20 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
2934
2962
  @if $skin-name == 'FluentUI' {
2935
2963
  outline: none !important; /* stylelint-disable-line declaration-no-important */
2936
2964
  }
2965
+
2966
+ @if $skin-name == 'bootstrap5' {
2967
+ background: $btn-info-bgcolor;
2968
+ color: $btn-info-color;
2969
+ }
2937
2970
  }
2938
2971
 
2939
2972
  &:focus-visible { // only for keybord
2940
2973
  @if $skin-name == 'FluentUI' {
2941
2974
  background: $btn-outline-bgcolor;
2942
2975
  }
2976
+ @if $skin-name == 'bootstrap5' {
2977
+ box-shadow: $btn-info-focus-box-shadow;
2978
+ }
2943
2979
  @if $skin-name == 'Material3' {
2944
2980
  background: $btn-info-active-bgcolor;
2945
2981
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2997,12 +3033,20 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
2997
3033
  @if $skin-name == 'FluentUI' {
2998
3034
  outline: none !important; /* stylelint-disable-line declaration-no-important */
2999
3035
  }
3036
+
3037
+ @if $skin-name == 'bootstrap5' {
3038
+ background: $btn-warning-bgcolor;
3039
+ color: $btn-warning-color;
3040
+ }
3000
3041
  }
3001
3042
 
3002
3043
  &:focus-visible { // only for keybord
3003
3044
  @if $skin-name == 'FluentUI' {
3004
3045
  background: $btn-outline-bgcolor;
3005
3046
  }
3047
+ @if $skin-name == 'bootstrap5' {
3048
+ box-shadow: $btn-warning-focus-box-shadow;
3049
+ }
3006
3050
  @if $skin-name == 'Material3' {
3007
3051
  background: $btn-warning-active-bgcolor;
3008
3052
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -3060,12 +3104,20 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
3060
3104
  @if $skin-name == 'FluentUI' {
3061
3105
  outline: none !important; /* stylelint-disable-line declaration-no-important */
3062
3106
  }
3107
+
3108
+ @if $skin-name == 'bootstrap5' {
3109
+ background: $btn-danger-bgcolor;
3110
+ color: $btn-danger-color;
3111
+ }
3063
3112
  }
3064
3113
 
3065
3114
  &:focus-visible { // only for keybord
3066
3115
  @if $skin-name == 'FluentUI' {
3067
3116
  background: $btn-outline-bgcolor;
3068
3117
  }
3118
+ @if $skin-name == 'bootstrap5' {
3119
+ box-shadow: $btn-danger-focus-box-shadow;
3120
+ }
3069
3121
  @if $skin-name == 'Material3' {
3070
3122
  background: $btn-danger-active-bgcolor;
3071
3123
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2752,12 +2752,22 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
2752
2752
  @if $skin-name == 'FluentUI' {
2753
2753
  outline: none !important; /* stylelint-disable-line declaration-no-important */
2754
2754
  }
2755
+
2756
+ @if $skin-name == 'bootstrap5' {
2757
+ background: $btn-outline-active-bgcolor;
2758
+ color: $btn-outline-active-color;
2759
+ }
2755
2760
  }
2756
2761
 
2757
2762
  &:focus-visible { // only for keybord
2758
2763
  @if $skin-name == 'FluentUI' {
2759
2764
  background: $btn-outline-bgcolor;
2760
2765
  }
2766
+
2767
+ @if $skin-name == 'bootstrap5' {
2768
+ box-shadow: $btn-focus-box-shadow;
2769
+ }
2770
+
2761
2771
  @if $skin-name == 'Material3' {
2762
2772
  background: $btn-active-bgcolor;
2763
2773
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2808,12 +2818,22 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
2808
2818
  @if $skin-name == 'FluentUI' {
2809
2819
  outline: none !important; /* stylelint-disable-line declaration-no-important */
2810
2820
  }
2821
+
2822
+ @if $skin-name == 'bootstrap5' {
2823
+ background: $btn-outline-primary-focus-bgcolor;
2824
+ color: $btn-outline-active-color;
2825
+ }
2811
2826
  }
2812
2827
 
2813
2828
  &:focus-visible { // only for keybord
2814
2829
  @if $skin-name == 'FluentUI' {
2815
2830
  background: $btn-outline-bgcolor;
2816
2831
  }
2832
+
2833
+ @if $skin-name == 'bootstrap5' {
2834
+ box-shadow: $btn-primary-focus-box-shadow;
2835
+ }
2836
+
2817
2837
  @if $skin-name == 'Material3' {
2818
2838
  background: $btn-primary-active-bgcolor;
2819
2839
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2871,12 +2891,20 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
2871
2891
  @if $skin-name == 'FluentUI' {
2872
2892
  outline: none !important; /* stylelint-disable-line declaration-no-important */
2873
2893
  }
2894
+
2895
+ @if $skin-name == 'bootstrap5' {
2896
+ background: $btn-success-bgcolor;
2897
+ color: $btn-success-color;
2898
+ }
2874
2899
  }
2875
2900
 
2876
2901
  &:focus-visible { // only for keybord
2877
2902
  @if $skin-name == 'FluentUI' {
2878
2903
  background: $btn-outline-bgcolor;
2879
2904
  }
2905
+ @if $skin-name == 'bootstrap5' {
2906
+ box-shadow: $btn-success-focus-box-shadow;
2907
+ }
2880
2908
  @if $skin-name == 'Material3' {
2881
2909
  background: $btn-success-active-bgcolor;
2882
2910
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2934,12 +2962,20 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
2934
2962
  @if $skin-name == 'FluentUI' {
2935
2963
  outline: none !important; /* stylelint-disable-line declaration-no-important */
2936
2964
  }
2965
+
2966
+ @if $skin-name == 'bootstrap5' {
2967
+ background: $btn-info-bgcolor;
2968
+ color: $btn-info-color;
2969
+ }
2937
2970
  }
2938
2971
 
2939
2972
  &:focus-visible { // only for keybord
2940
2973
  @if $skin-name == 'FluentUI' {
2941
2974
  background: $btn-outline-bgcolor;
2942
2975
  }
2976
+ @if $skin-name == 'bootstrap5' {
2977
+ box-shadow: $btn-info-focus-box-shadow;
2978
+ }
2943
2979
  @if $skin-name == 'Material3' {
2944
2980
  background: $btn-info-active-bgcolor;
2945
2981
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2997,12 +3033,20 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
2997
3033
  @if $skin-name == 'FluentUI' {
2998
3034
  outline: none !important; /* stylelint-disable-line declaration-no-important */
2999
3035
  }
3036
+
3037
+ @if $skin-name == 'bootstrap5' {
3038
+ background: $btn-warning-bgcolor;
3039
+ color: $btn-warning-color;
3040
+ }
3000
3041
  }
3001
3042
 
3002
3043
  &:focus-visible { // only for keybord
3003
3044
  @if $skin-name == 'FluentUI' {
3004
3045
  background: $btn-outline-bgcolor;
3005
3046
  }
3047
+ @if $skin-name == 'bootstrap5' {
3048
+ box-shadow: $btn-warning-focus-box-shadow;
3049
+ }
3006
3050
  @if $skin-name == 'Material3' {
3007
3051
  background: $btn-warning-active-bgcolor;
3008
3052
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -3060,12 +3104,20 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
3060
3104
  @if $skin-name == 'FluentUI' {
3061
3105
  outline: none !important; /* stylelint-disable-line declaration-no-important */
3062
3106
  }
3107
+
3108
+ @if $skin-name == 'bootstrap5' {
3109
+ background: $btn-danger-bgcolor;
3110
+ color: $btn-danger-color;
3111
+ }
3063
3112
  }
3064
3113
 
3065
3114
  &:focus-visible { // only for keybord
3066
3115
  @if $skin-name == 'FluentUI' {
3067
3116
  background: $btn-outline-bgcolor;
3068
3117
  }
3118
+ @if $skin-name == 'bootstrap5' {
3119
+ box-shadow: $btn-danger-focus-box-shadow;
3120
+ }
3069
3121
  @if $skin-name == 'Material3' {
3070
3122
  background: $btn-danger-active-bgcolor;
3071
3123
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2729,12 +2729,22 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !default;
2729
2729
  @if $skin-name == 'FluentUI' {
2730
2730
  outline: none !important; /* stylelint-disable-line declaration-no-important */
2731
2731
  }
2732
+
2733
+ @if $skin-name == 'bootstrap5' {
2734
+ background: $btn-outline-active-bgcolor;
2735
+ color: $btn-outline-active-color;
2736
+ }
2732
2737
  }
2733
2738
 
2734
2739
  &:focus-visible { // only for keybord
2735
2740
  @if $skin-name == 'FluentUI' {
2736
2741
  background: $btn-outline-bgcolor;
2737
2742
  }
2743
+
2744
+ @if $skin-name == 'bootstrap5' {
2745
+ box-shadow: $btn-focus-box-shadow;
2746
+ }
2747
+
2738
2748
  @if $skin-name == 'Material3' {
2739
2749
  background: $btn-active-bgcolor;
2740
2750
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2785,12 +2795,22 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !default;
2785
2795
  @if $skin-name == 'FluentUI' {
2786
2796
  outline: none !important; /* stylelint-disable-line declaration-no-important */
2787
2797
  }
2798
+
2799
+ @if $skin-name == 'bootstrap5' {
2800
+ background: $btn-outline-primary-focus-bgcolor;
2801
+ color: $btn-outline-active-color;
2802
+ }
2788
2803
  }
2789
2804
 
2790
2805
  &:focus-visible { // only for keybord
2791
2806
  @if $skin-name == 'FluentUI' {
2792
2807
  background: $btn-outline-bgcolor;
2793
2808
  }
2809
+
2810
+ @if $skin-name == 'bootstrap5' {
2811
+ box-shadow: $btn-primary-focus-box-shadow;
2812
+ }
2813
+
2794
2814
  @if $skin-name == 'Material3' {
2795
2815
  background: $btn-primary-active-bgcolor;
2796
2816
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2848,12 +2868,20 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !default;
2848
2868
  @if $skin-name == 'FluentUI' {
2849
2869
  outline: none !important; /* stylelint-disable-line declaration-no-important */
2850
2870
  }
2871
+
2872
+ @if $skin-name == 'bootstrap5' {
2873
+ background: $btn-success-bgcolor;
2874
+ color: $btn-success-color;
2875
+ }
2851
2876
  }
2852
2877
 
2853
2878
  &:focus-visible { // only for keybord
2854
2879
  @if $skin-name == 'FluentUI' {
2855
2880
  background: $btn-outline-bgcolor;
2856
2881
  }
2882
+ @if $skin-name == 'bootstrap5' {
2883
+ box-shadow: $btn-success-focus-box-shadow;
2884
+ }
2857
2885
  @if $skin-name == 'Material3' {
2858
2886
  background: $btn-success-active-bgcolor;
2859
2887
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2911,12 +2939,20 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !default;
2911
2939
  @if $skin-name == 'FluentUI' {
2912
2940
  outline: none !important; /* stylelint-disable-line declaration-no-important */
2913
2941
  }
2942
+
2943
+ @if $skin-name == 'bootstrap5' {
2944
+ background: $btn-info-bgcolor;
2945
+ color: $btn-info-color;
2946
+ }
2914
2947
  }
2915
2948
 
2916
2949
  &:focus-visible { // only for keybord
2917
2950
  @if $skin-name == 'FluentUI' {
2918
2951
  background: $btn-outline-bgcolor;
2919
2952
  }
2953
+ @if $skin-name == 'bootstrap5' {
2954
+ box-shadow: $btn-info-focus-box-shadow;
2955
+ }
2920
2956
  @if $skin-name == 'Material3' {
2921
2957
  background: $btn-info-active-bgcolor;
2922
2958
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2974,12 +3010,20 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !default;
2974
3010
  @if $skin-name == 'FluentUI' {
2975
3011
  outline: none !important; /* stylelint-disable-line declaration-no-important */
2976
3012
  }
3013
+
3014
+ @if $skin-name == 'bootstrap5' {
3015
+ background: $btn-warning-bgcolor;
3016
+ color: $btn-warning-color;
3017
+ }
2977
3018
  }
2978
3019
 
2979
3020
  &:focus-visible { // only for keybord
2980
3021
  @if $skin-name == 'FluentUI' {
2981
3022
  background: $btn-outline-bgcolor;
2982
3023
  }
3024
+ @if $skin-name == 'bootstrap5' {
3025
+ box-shadow: $btn-warning-focus-box-shadow;
3026
+ }
2983
3027
  @if $skin-name == 'Material3' {
2984
3028
  background: $btn-warning-active-bgcolor;
2985
3029
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -3037,12 +3081,20 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !default;
3037
3081
  @if $skin-name == 'FluentUI' {
3038
3082
  outline: none !important; /* stylelint-disable-line declaration-no-important */
3039
3083
  }
3084
+
3085
+ @if $skin-name == 'bootstrap5' {
3086
+ background: $btn-danger-bgcolor;
3087
+ color: $btn-danger-color;
3088
+ }
3040
3089
  }
3041
3090
 
3042
3091
  &:focus-visible { // only for keybord
3043
3092
  @if $skin-name == 'FluentUI' {
3044
3093
  background: $btn-outline-bgcolor;
3045
3094
  }
3095
+ @if $skin-name == 'bootstrap5' {
3096
+ box-shadow: $btn-danger-focus-box-shadow;
3097
+ }
3046
3098
  @if $skin-name == 'Material3' {
3047
3099
  background: $btn-danger-active-bgcolor;
3048
3100
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2729,12 +2729,22 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !default;
2729
2729
  @if $skin-name == 'FluentUI' {
2730
2730
  outline: none !important; /* stylelint-disable-line declaration-no-important */
2731
2731
  }
2732
+
2733
+ @if $skin-name == 'bootstrap5' {
2734
+ background: $btn-outline-active-bgcolor;
2735
+ color: $btn-outline-active-color;
2736
+ }
2732
2737
  }
2733
2738
 
2734
2739
  &:focus-visible { // only for keybord
2735
2740
  @if $skin-name == 'FluentUI' {
2736
2741
  background: $btn-outline-bgcolor;
2737
2742
  }
2743
+
2744
+ @if $skin-name == 'bootstrap5' {
2745
+ box-shadow: $btn-focus-box-shadow;
2746
+ }
2747
+
2738
2748
  @if $skin-name == 'Material3' {
2739
2749
  background: $btn-active-bgcolor;
2740
2750
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2785,12 +2795,22 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !default;
2785
2795
  @if $skin-name == 'FluentUI' {
2786
2796
  outline: none !important; /* stylelint-disable-line declaration-no-important */
2787
2797
  }
2798
+
2799
+ @if $skin-name == 'bootstrap5' {
2800
+ background: $btn-outline-primary-focus-bgcolor;
2801
+ color: $btn-outline-active-color;
2802
+ }
2788
2803
  }
2789
2804
 
2790
2805
  &:focus-visible { // only for keybord
2791
2806
  @if $skin-name == 'FluentUI' {
2792
2807
  background: $btn-outline-bgcolor;
2793
2808
  }
2809
+
2810
+ @if $skin-name == 'bootstrap5' {
2811
+ box-shadow: $btn-primary-focus-box-shadow;
2812
+ }
2813
+
2794
2814
  @if $skin-name == 'Material3' {
2795
2815
  background: $btn-primary-active-bgcolor;
2796
2816
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2848,12 +2868,20 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !default;
2848
2868
  @if $skin-name == 'FluentUI' {
2849
2869
  outline: none !important; /* stylelint-disable-line declaration-no-important */
2850
2870
  }
2871
+
2872
+ @if $skin-name == 'bootstrap5' {
2873
+ background: $btn-success-bgcolor;
2874
+ color: $btn-success-color;
2875
+ }
2851
2876
  }
2852
2877
 
2853
2878
  &:focus-visible { // only for keybord
2854
2879
  @if $skin-name == 'FluentUI' {
2855
2880
  background: $btn-outline-bgcolor;
2856
2881
  }
2882
+ @if $skin-name == 'bootstrap5' {
2883
+ box-shadow: $btn-success-focus-box-shadow;
2884
+ }
2857
2885
  @if $skin-name == 'Material3' {
2858
2886
  background: $btn-success-active-bgcolor;
2859
2887
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2911,12 +2939,20 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !default;
2911
2939
  @if $skin-name == 'FluentUI' {
2912
2940
  outline: none !important; /* stylelint-disable-line declaration-no-important */
2913
2941
  }
2942
+
2943
+ @if $skin-name == 'bootstrap5' {
2944
+ background: $btn-info-bgcolor;
2945
+ color: $btn-info-color;
2946
+ }
2914
2947
  }
2915
2948
 
2916
2949
  &:focus-visible { // only for keybord
2917
2950
  @if $skin-name == 'FluentUI' {
2918
2951
  background: $btn-outline-bgcolor;
2919
2952
  }
2953
+ @if $skin-name == 'bootstrap5' {
2954
+ box-shadow: $btn-info-focus-box-shadow;
2955
+ }
2920
2956
  @if $skin-name == 'Material3' {
2921
2957
  background: $btn-info-active-bgcolor;
2922
2958
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2974,12 +3010,20 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !default;
2974
3010
  @if $skin-name == 'FluentUI' {
2975
3011
  outline: none !important; /* stylelint-disable-line declaration-no-important */
2976
3012
  }
3013
+
3014
+ @if $skin-name == 'bootstrap5' {
3015
+ background: $btn-warning-bgcolor;
3016
+ color: $btn-warning-color;
3017
+ }
2977
3018
  }
2978
3019
 
2979
3020
  &:focus-visible { // only for keybord
2980
3021
  @if $skin-name == 'FluentUI' {
2981
3022
  background: $btn-outline-bgcolor;
2982
3023
  }
3024
+ @if $skin-name == 'bootstrap5' {
3025
+ box-shadow: $btn-warning-focus-box-shadow;
3026
+ }
2983
3027
  @if $skin-name == 'Material3' {
2984
3028
  background: $btn-warning-active-bgcolor;
2985
3029
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -3037,12 +3081,20 @@ $btn-focus-box-shadow: $shadow-focus-ring2 !default;
3037
3081
  @if $skin-name == 'FluentUI' {
3038
3082
  outline: none !important; /* stylelint-disable-line declaration-no-important */
3039
3083
  }
3084
+
3085
+ @if $skin-name == 'bootstrap5' {
3086
+ background: $btn-danger-bgcolor;
3087
+ color: $btn-danger-color;
3088
+ }
3040
3089
  }
3041
3090
 
3042
3091
  &:focus-visible { // only for keybord
3043
3092
  @if $skin-name == 'FluentUI' {
3044
3093
  background: $btn-outline-bgcolor;
3045
3094
  }
3095
+ @if $skin-name == 'bootstrap5' {
3096
+ box-shadow: $btn-danger-focus-box-shadow;
3097
+ }
3046
3098
  @if $skin-name == 'Material3' {
3047
3099
  background: $btn-danger-active-bgcolor;
3048
3100
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -142,9 +142,6 @@ $ddl-bigger-small-list-header-font-size: 14px !default;
142
142
  #{if(&, '&', '*')} .e-fixed-head {
143
143
  position: absolute;
144
144
  top: 0;
145
- .e-rtl #{if(&, '&', '*')} {
146
- left: 33px;
147
- }
148
145
  }
149
146
  }
150
147
  }
@@ -142,9 +142,6 @@ $ddl-group-list-item-text-intent: 0 !default;
142
142
  #{if(&, '&', '*')} .e-fixed-head {
143
143
  position: absolute;
144
144
  top: 0;
145
- .e-rtl #{if(&, '&', '*')} {
146
- left: 33px;
147
- }
148
145
  }
149
146
  }
150
147
  }
@@ -149,9 +149,6 @@ $ddl-group-list-item-text-intent: 0 !default;
149
149
  #{if(&, '&', '*')} .e-fixed-head {
150
150
  position: absolute;
151
151
  top: 0;
152
- .e-rtl #{if(&, '&', '*')} {
153
- left: 33px;
154
- }
155
152
  }
156
153
  }
157
154
  }
@@ -176,9 +176,6 @@ $ddl-bigger-small-list-font-color: $content-text-color !default;
176
176
  #{if(&, '&', '*')} .e-fixed-head {
177
177
  position: absolute;
178
178
  top: 0;
179
- .e-rtl #{if(&, '&', '*')} {
180
- left: 33px;
181
- }
182
179
  }
183
180
  }
184
181
  }