@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.
- package/SCSS-Themes/bootstrap-dark.scss +89 -9
- package/SCSS-Themes/bootstrap.scss +89 -9
- package/SCSS-Themes/bootstrap4.scss +89 -9
- package/SCSS-Themes/bootstrap5-dark.scss +89 -9
- package/SCSS-Themes/bootstrap5.scss +89 -9
- package/SCSS-Themes/buttons/button/bootstrap-dark.scss +52 -0
- package/SCSS-Themes/buttons/button/bootstrap.scss +52 -0
- package/SCSS-Themes/buttons/button/bootstrap4.scss +52 -0
- package/SCSS-Themes/buttons/button/bootstrap5-dark.scss +52 -0
- package/SCSS-Themes/buttons/button/bootstrap5.scss +52 -0
- package/SCSS-Themes/buttons/button/fabric-dark.scss +52 -0
- package/SCSS-Themes/buttons/button/fabric.scss +52 -0
- package/SCSS-Themes/buttons/button/fluent-dark.scss +52 -0
- package/SCSS-Themes/buttons/button/fluent.scss +52 -0
- package/SCSS-Themes/buttons/button/highcontrast.scss +52 -0
- package/SCSS-Themes/buttons/button/material-dark.scss +52 -0
- package/SCSS-Themes/buttons/button/material.scss +52 -0
- package/SCSS-Themes/buttons/button/material3-dark.scss +52 -0
- package/SCSS-Themes/buttons/button/material3.scss +52 -0
- package/SCSS-Themes/buttons/button/tailwind-dark.scss +52 -0
- package/SCSS-Themes/buttons/button/tailwind.scss +52 -0
- package/SCSS-Themes/dropdowns/drop-down-base/bootstrap-dark.scss +0 -3
- package/SCSS-Themes/dropdowns/drop-down-base/bootstrap.scss +0 -3
- package/SCSS-Themes/dropdowns/drop-down-base/bootstrap4.scss +0 -3
- package/SCSS-Themes/dropdowns/drop-down-base/bootstrap5-dark.scss +0 -3
- package/SCSS-Themes/dropdowns/drop-down-base/bootstrap5.scss +0 -3
- package/SCSS-Themes/dropdowns/drop-down-base/fabric-dark.scss +0 -3
- package/SCSS-Themes/dropdowns/drop-down-base/fabric.scss +0 -3
- package/SCSS-Themes/dropdowns/drop-down-base/fluent-dark.scss +0 -3
- package/SCSS-Themes/dropdowns/drop-down-base/fluent.scss +0 -3
- package/SCSS-Themes/dropdowns/drop-down-base/highcontrast.scss +0 -3
- package/SCSS-Themes/dropdowns/drop-down-base/material-dark.scss +0 -3
- package/SCSS-Themes/dropdowns/drop-down-base/material.scss +0 -3
- package/SCSS-Themes/dropdowns/drop-down-base/material3-dark.scss +0 -3
- package/SCSS-Themes/dropdowns/drop-down-base/material3.scss +0 -3
- package/SCSS-Themes/dropdowns/drop-down-base/tailwind-dark.scss +0 -3
- package/SCSS-Themes/dropdowns/drop-down-base/tailwind.scss +0 -3
- package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap-dark.scss +5 -0
- package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap.scss +5 -0
- package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap4.scss +5 -0
- package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap5-dark.scss +5 -0
- package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap5.scss +5 -0
- package/SCSS-Themes/dropdowns/drop-down-tree/fabric-dark.scss +5 -0
- package/SCSS-Themes/dropdowns/drop-down-tree/fabric.scss +5 -0
- package/SCSS-Themes/dropdowns/drop-down-tree/fluent-dark.scss +5 -0
- package/SCSS-Themes/dropdowns/drop-down-tree/fluent.scss +5 -0
- package/SCSS-Themes/dropdowns/drop-down-tree/highcontrast.scss +5 -0
- package/SCSS-Themes/dropdowns/drop-down-tree/material-dark.scss +5 -0
- package/SCSS-Themes/dropdowns/drop-down-tree/material.scss +5 -0
- package/SCSS-Themes/dropdowns/drop-down-tree/material3-dark.scss +5 -0
- package/SCSS-Themes/dropdowns/drop-down-tree/material3.scss +5 -0
- package/SCSS-Themes/dropdowns/drop-down-tree/tailwind-dark.scss +5 -0
- package/SCSS-Themes/dropdowns/drop-down-tree/tailwind.scss +5 -0
- package/SCSS-Themes/fabric-dark.scss +89 -9
- package/SCSS-Themes/fabric.scss +89 -9
- package/SCSS-Themes/fluent-dark.scss +90 -10
- package/SCSS-Themes/fluent.scss +90 -10
- package/SCSS-Themes/grids/grid/bootstrap-dark.scss +9 -0
- package/SCSS-Themes/grids/grid/bootstrap.scss +9 -0
- package/SCSS-Themes/grids/grid/bootstrap4.scss +9 -0
- package/SCSS-Themes/grids/grid/bootstrap5-dark.scss +9 -0
- package/SCSS-Themes/grids/grid/bootstrap5.scss +9 -0
- package/SCSS-Themes/grids/grid/fabric-dark.scss +9 -0
- package/SCSS-Themes/grids/grid/fabric.scss +9 -0
- package/SCSS-Themes/grids/grid/fluent-dark.scss +9 -0
- package/SCSS-Themes/grids/grid/fluent.scss +9 -0
- package/SCSS-Themes/grids/grid/highcontrast.scss +9 -0
- package/SCSS-Themes/grids/grid/material-dark.scss +10 -1
- package/SCSS-Themes/grids/grid/material.scss +9 -0
- package/SCSS-Themes/grids/grid/material3-dark.scss +9 -0
- package/SCSS-Themes/grids/grid/material3.scss +9 -0
- package/SCSS-Themes/grids/grid/tailwind-dark.scss +9 -0
- package/SCSS-Themes/grids/grid/tailwind.scss +9 -0
- package/SCSS-Themes/highcontrast.scss +89 -9
- package/SCSS-Themes/image-editor/image-editor/bootstrap-dark.scss +9 -6
- package/SCSS-Themes/image-editor/image-editor/bootstrap.scss +9 -6
- package/SCSS-Themes/image-editor/image-editor/bootstrap4.scss +9 -6
- package/SCSS-Themes/image-editor/image-editor/bootstrap5-dark.scss +9 -6
- package/SCSS-Themes/image-editor/image-editor/bootstrap5.scss +9 -6
- package/SCSS-Themes/image-editor/image-editor/fabric-dark.scss +9 -6
- package/SCSS-Themes/image-editor/image-editor/fabric.scss +9 -6
- package/SCSS-Themes/image-editor/image-editor/fluent-dark.scss +9 -6
- package/SCSS-Themes/image-editor/image-editor/fluent.scss +9 -6
- package/SCSS-Themes/image-editor/image-editor/highcontrast.scss +9 -6
- package/SCSS-Themes/image-editor/image-editor/material-dark.scss +9 -6
- package/SCSS-Themes/image-editor/image-editor/material.scss +9 -6
- package/SCSS-Themes/image-editor/image-editor/material3-dark.scss +9 -6
- package/SCSS-Themes/image-editor/image-editor/material3.scss +9 -6
- package/SCSS-Themes/image-editor/image-editor/tailwind-dark.scss +9 -6
- package/SCSS-Themes/image-editor/image-editor/tailwind.scss +9 -6
- package/SCSS-Themes/inputs/data-form/material3-dark.scss +1 -1
- package/SCSS-Themes/inputs/data-form/material3.scss +1 -1
- package/SCSS-Themes/material-dark.scss +90 -10
- package/SCSS-Themes/material.scss +89 -9
- package/SCSS-Themes/material3-dark.scss +90 -10
- package/SCSS-Themes/material3.scss +90 -10
- package/SCSS-Themes/pdfviewer/pdfviewer/fluent-dark.scss +1 -1
- package/SCSS-Themes/pdfviewer/pdfviewer/fluent.scss +1 -1
- package/SCSS-Themes/splitbuttons/progress-button/bootstrap-dark.scss +14 -0
- package/SCSS-Themes/splitbuttons/progress-button/bootstrap.scss +14 -0
- package/SCSS-Themes/splitbuttons/progress-button/bootstrap4.scss +14 -0
- package/SCSS-Themes/splitbuttons/progress-button/bootstrap5-dark.scss +14 -0
- package/SCSS-Themes/splitbuttons/progress-button/bootstrap5.scss +14 -0
- package/SCSS-Themes/splitbuttons/progress-button/fabric-dark.scss +14 -0
- package/SCSS-Themes/splitbuttons/progress-button/fabric.scss +14 -0
- package/SCSS-Themes/splitbuttons/progress-button/fluent-dark.scss +14 -0
- package/SCSS-Themes/splitbuttons/progress-button/fluent.scss +14 -0
- package/SCSS-Themes/splitbuttons/progress-button/highcontrast.scss +14 -0
- package/SCSS-Themes/splitbuttons/progress-button/material-dark.scss +14 -0
- package/SCSS-Themes/splitbuttons/progress-button/material.scss +14 -0
- package/SCSS-Themes/splitbuttons/progress-button/material3-dark.scss +14 -0
- package/SCSS-Themes/splitbuttons/progress-button/material3.scss +14 -0
- package/SCSS-Themes/splitbuttons/progress-button/tailwind-dark.scss +14 -0
- package/SCSS-Themes/splitbuttons/progress-button/tailwind.scss +14 -0
- package/SCSS-Themes/tailwind-dark.scss +89 -9
- package/SCSS-Themes/tailwind.scss +89 -9
- 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;
|