@syncfusion/ej2-splitbuttons 20.4.50 → 21.1.35

package/styles/button-group/_fluent-definition.scss

@@ -3,8 +3,8 @@ $btn-grp-margin: -1px !default;
 $btn-grp-margin-left: -1px !default;
 $btn-grp-wrapper-border: 4px !default;
 $btn-grp-round-radius: 20px !default;
-$btn-grp-icon-font-size: 16px !default;
-$btn-grp-icon-font-size-bigger: 20px !default;
+$btn-grp-icon-font-size: $text-base !default;
+$btn-grp-icon-font-size-bigger: $text-xl !default;
 
 //Normal Outline GroupButton
 $btn-grp-outline-focus-border-color: $secondary-border-color !default;

package/styles/button-group/_tailwind-definition.scss

@@ -3,7 +3,7 @@ $btn-grp-margin: -1px !default;
 $btn-grp-margin-left: -1px !default;
 $btn-grp-wrapper-border: 4px !default;
 $btn-grp-round-radius: 20px !default;
-$btn-grp-icon-font-size: 18px !default;
+$btn-grp-icon-font-size: $text-lg !default;
 $btn-grp-icon-font-size-bigger: 22px !default;
 
 //Normal Outline GroupButton

package/styles/button-group/_theme.scss

@@ -5,10 +5,12 @@
   .e-btn-group,
   .e-css.e-btn-group {
     &:not(.e-outline) {
-      box-shadow: $btn-box-shadow;
+      @if $theme-name != 'Material3' {
+        box-shadow: $btn-box-shadow;
+      }
     }
 
-    @if $skin-name == 'material' or $skin-name == 'bootstrap4' {
+    @if $skin-name == 'material' or $skin-name == 'bootstrap4' or $skin-name == 'Material3' {
       .e-btn {
         box-shadow: none;
       }

package/styles/button-group/bootstrap-dark.css

@@ -248,7 +248,7 @@
 .e-btn-group input:focus + label.e-btn,
 .e-css.e-btn-group .e-btn:focus,
 .e-css.e-btn-group input:focus + label.e-btn {
-  background-color: #2a2a2a;
+  background: #2a2a2a;
   border-color: #585858;
   color: #fff;
   outline: #393939 0 solid;
@@ -261,7 +261,7 @@
 .e-btn-group input:focus + label.e-btn.e-primary,
 .e-css.e-btn-group .e-btn:focus.e-primary,
 .e-css.e-btn-group input:focus + label.e-btn.e-primary {
-  background-color: #0058bd;
+  background: #0058bd;
   border-color: #0058bd;
   color: #fff;
   outline: #393939 0 solid;
@@ -273,7 +273,7 @@
 .e-btn-group input:focus + label.e-btn.e-success,
 .e-css.e-btn-group .e-btn:focus.e-success,
 .e-css.e-btn-group input:focus + label.e-btn.e-success {
-  background-color: #265e28;
+  background: #265e28;
   border-color: #265e28;
   color: #fff;
   box-shadow: none;
@@ -284,7 +284,7 @@
 .e-btn-group input:focus + label.e-btn.e-info,
 .e-css.e-btn-group .e-btn:focus.e-info,
 .e-css.e-btn-group input:focus + label.e-btn.e-info {
-  background-color: #175b66;
+  background: #175b66;
   border-color: #175b66;
   color: #fff;
   box-shadow: none;
@@ -295,7 +295,7 @@
 .e-btn-group input:focus + label.e-btn.e-warning,
 .e-css.e-btn-group .e-btn:focus.e-warning,
 .e-css.e-btn-group input:focus + label.e-btn.e-warning {
-  background-color: #f69807;
+  background: #f69807;
   border-color: #7a4c04;
   color: #000;
   box-shadow: none;
@@ -306,7 +306,7 @@
 .e-btn-group input:focus + label.e-btn.e-danger,
 .e-css.e-btn-group .e-btn:focus.e-danger,
 .e-css.e-btn-group input:focus + label.e-btn.e-danger {
-  background-color: #982525;
+  background: #982525;
   border-color: #982525;
   color: #fff;
   box-shadow: none;
@@ -368,7 +368,7 @@
 .e-css.e-btn-group .e-btn:active,
 .e-css.e-btn-group input:active + label.e-btn,
 .e-css.e-btn-group input:checked + label.e-btn {
-  background-color: #2a2a2a;
+  background: #2a2a2a;
   border-color: #585858;
   color: #fff;
   outline: #393939 0 solid;
@@ -381,7 +381,7 @@
 .e-css.e-btn-group .e-btn:active.e-primary,
 .e-css.e-btn-group input:active + label.e-btn.e-primary,
 .e-css.e-btn-group input:checked + label.e-btn.e-primary {
-  background-color: #0058bd;
+  background: #0058bd;
   border-color: #0058bd;
   color: #fff;
   outline: #393939 0 solid;
@@ -393,7 +393,7 @@
 .e-css.e-btn-group .e-btn:active.e-success,
 .e-css.e-btn-group input:active + label.e-btn.e-success,
 .e-css.e-btn-group input:checked + label.e-btn.e-success {
-  background-color: #1f4c21;
+  background: #1f4c21;
   border-color: #265e28;
   color: #fff;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
@@ -404,7 +404,7 @@
 .e-css.e-btn-group .e-btn:active.e-info,
 .e-css.e-btn-group input:active + label.e-btn.e-info,
 .e-css.e-btn-group input:checked + label.e-btn.e-info {
-  background-color: #124851;
+  background: #124851;
   color: #fff;
   border-color: #175b66;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
@@ -415,7 +415,7 @@
 .e-css.e-btn-group .e-btn:active.e-warning,
 .e-css.e-btn-group input:active + label.e-btn.e-warning,
 .e-css.e-btn-group input:checked + label.e-btn.e-warning {
-  background-color: #dd8907;
+  background: #dd8907;
   border-color: #ab6a05;
   color: #000;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
@@ -426,7 +426,7 @@
 .e-css.e-btn-group .e-btn:active.e-danger,
 .e-css.e-btn-group input:active + label.e-btn.e-danger,
 .e-css.e-btn-group input:checked + label.e-btn.e-danger {
-  background-color: #832020;
+  background: #832020;
   border-color: #982525;
   color: #fff;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
@@ -437,7 +437,7 @@
 .e-css.e-btn-group .e-btn:active.e-outline,
 .e-css.e-btn-group input:active + label.e-btn.e-outline,
 .e-css.e-btn-group input:checked + label.e-btn.e-outline {
-  background-color: #2a2a2a;
+  background: #2a2a2a;
   border-color: #585858;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
   color: #fff;
@@ -448,7 +448,7 @@
 .e-css.e-btn-group .e-btn:active.e-outline.e-primary,
 .e-css.e-btn-group input:active + label.e-btn.e-outline.e-primary,
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-primary {
-  background-color: #0058bd;
+  background: #0058bd;
   border-color: #0058bd;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
   color: #fff;
@@ -459,7 +459,7 @@
 .e-css.e-btn-group .e-btn:active.e-outline.e-success,
 .e-css.e-btn-group input:active + label.e-btn.e-outline.e-success,
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-success {
-  background-color: #1f4c21;
+  background: #1f4c21;
   border-color: #265e28;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
   color: #fff;
@@ -470,7 +470,7 @@
 .e-css.e-btn-group .e-btn:active.e-outline.e-info,
 .e-css.e-btn-group input:active + label.e-btn.e-outline.e-info,
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-info {
-  background-color: #124851;
+  background: #124851;
   border-color: #175b66;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
   color: #fff;
@@ -481,7 +481,7 @@
 .e-css.e-btn-group .e-btn:active.e-outline.e-warning,
 .e-css.e-btn-group input:active + label.e-btn.e-outline.e-warning,
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-warning {
-  background-color: #dd8907;
+  background: #dd8907;
   border-color: #ab6a05;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
   color: #000;
@@ -492,7 +492,7 @@
 .e-css.e-btn-group .e-btn:active.e-outline.e-danger,
 .e-css.e-btn-group input:active + label.e-btn.e-outline.e-danger,
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-danger {
-  background-color: #832020;
+  background: #832020;
   border-color: #982525;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
   color: #fff;
@@ -511,7 +511,7 @@
 .e-btn-group input:disabled + label.e-btn.e-primary,
 .e-css.e-btn-group .e-btn:disabled.e-primary,
 .e-css.e-btn-group input:disabled + label.e-btn.e-primary {
-  background-color: rgba(0, 112, 240, 0.4);
+  background: rgba(0, 112, 240, 0.4);
   border-color: rgba(0, 112, 240, 0.4);
   box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
   color: rgba(255, 255, 255, 0.4);
@@ -521,7 +521,7 @@
 .e-btn-group input:disabled + label.e-btn.e-success,
 .e-css.e-btn-group .e-btn:disabled.e-success,
 .e-css.e-btn-group input:disabled + label.e-btn.e-success {
-  background-color: rgba(72, 177, 76, 0.4);
+  background: rgba(72, 177, 76, 0.4);
   border-color: rgba(88, 88, 88, 0.4);
   box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
   color: rgba(240, 240, 240, 0.4);
@@ -531,7 +531,7 @@
 .e-btn-group input:disabled + label.e-btn.e-info,
 .e-css.e-btn-group .e-btn:disabled.e-info,
 .e-css.e-btn-group input:disabled + label.e-btn.e-info {
-  background-color: rgba(42, 170, 192, 0.4);
+  background: rgba(42, 170, 192, 0.4);
   border-color: rgba(88, 88, 88, 0.4);
   box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
   color: rgba(240, 240, 240, 0.4);
@@ -541,7 +541,7 @@
 .e-btn-group input:disabled + label.e-btn.e-warning,
 .e-css.e-btn-group .e-btn:disabled.e-warning,
 .e-css.e-btn-group input:disabled + label.e-btn.e-warning {
-  background-color: rgba(250, 193, 104, 0.4);
+  background: rgba(250, 193, 104, 0.4);
   border-color: rgba(88, 88, 88, 0.4);
   box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
   color: rgba(240, 240, 240, 0.4);
@@ -551,7 +551,7 @@
 .e-btn-group input:disabled + label.e-btn.e-danger,
 .e-css.e-btn-group .e-btn:disabled.e-danger,
 .e-css.e-btn-group input:disabled + label.e-btn.e-danger {
-  background-color: rgba(212, 79, 79, 0.4);
+  background: rgba(212, 79, 79, 0.4);
   border-color: rgba(88, 88, 88, 0.4);
   box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
   color: rgba(240, 240, 240, 0.4);
@@ -562,7 +562,7 @@
 .e-css.e-btn-group .e-btn:disabled.e-link,
 .e-css.e-btn-group input:disabled + label.e-btn.e-link {
   color: rgba(240, 240, 240, 0.3);
-  background-color: transparent;
+  background: transparent;
   box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
   text-decoration: none;
   border-color: transparent;
@@ -571,7 +571,7 @@
 .e-btn-group input:disabled + label.e-btn.e-outline,
 .e-css.e-btn-group .e-btn:disabled.e-outline,
 .e-css.e-btn-group input:disabled + label.e-btn.e-outline {
-  background-color: transparent;
+  background: transparent;
   border-color: rgba(88, 88, 88, 0.4);
   box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
   color: rgba(240, 240, 240, 0.4);
@@ -581,7 +581,7 @@
 .e-btn-group input:disabled + label.e-btn.e-outline.e-primary,
 .e-css.e-btn-group .e-btn:disabled.e-outline.e-primary,
 .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-primary {
-  background-color: transparent;
+  background: transparent;
   border-color: rgba(88, 88, 88, 0.4);
   box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
   color: rgba(240, 240, 240, 0.4);
@@ -591,7 +591,7 @@
 .e-btn-group input:disabled + label.e-btn.e-outline.e-success,
 .e-css.e-btn-group .e-btn:disabled.e-outline.e-success,
 .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-success {
-  background-color: transparent;
+  background: transparent;
   border-color: rgba(53, 130, 56, 0.4);
   box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
   color: rgba(53, 130, 56, 0.4);
@@ -601,7 +601,7 @@
 .e-btn-group input:disabled + label.e-btn.e-outline.e-info,
 .e-css.e-btn-group .e-btn:disabled.e-outline.e-info,
 .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-info {
-  background-color: transparent;
+  background: transparent;
   border-color: rgba(32, 128, 144, 0.4);
   box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
   color: rgba(32, 128, 144, 0.4);
@@ -611,7 +611,7 @@
 .e-btn-group input:disabled + label.e-btn.e-outline.e-warning,
 .e-css.e-btn-group .e-btn:disabled.e-outline.e-warning,
 .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-warning {
-  background-color: transparent;
+  background: transparent;
   border-color: rgba(249, 173, 55, 0.4);
   box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
   color: rgba(249, 173, 55, 0.4);
@@ -621,7 +621,7 @@
 .e-btn-group input:disabled + label.e-btn.e-outline.e-danger,
 .e-css.e-btn-group .e-btn:disabled.e-outline.e-danger,
 .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-danger {
-  background-color: transparent;
+  background: transparent;
   border-color: rgba(193, 47, 47, 0.4);
   box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
   color: rgba(193, 47, 47, 0.4);

package/styles/button-group/bootstrap.css

@@ -248,7 +248,7 @@
 .e-btn-group input:focus + label.e-btn,
 .e-css.e-btn-group .e-btn:focus,
 .e-css.e-btn-group input:focus + label.e-btn {
-  background-color: #e6e6e6;
+  background: #e6e6e6;
   border-color: #8c8c8c;
   color: #333;
   outline: #fff 0 solid;
@@ -261,7 +261,7 @@
 .e-btn-group input:focus + label.e-btn.e-primary,
 .e-css.e-btn-group .e-btn:focus.e-primary,
 .e-css.e-btn-group input:focus + label.e-btn.e-primary {
-  background-color: #21527d;
+  background: #21527d;
   border-color: #0c1d2c;
   color: #fff;
   outline: #fff 0 solid;
@@ -273,7 +273,7 @@
 .e-btn-group input:focus + label.e-btn.e-success,
 .e-css.e-btn-group .e-btn:focus.e-success,
 .e-css.e-btn-group input:focus + label.e-btn.e-success {
-  background-color: #124a1f;
+  background: #124a1f;
   border-color: black;
   color: #fff;
   box-shadow: none;
@@ -284,7 +284,7 @@
 .e-btn-group input:focus + label.e-btn.e-info,
 .e-css.e-btn-group .e-btn:focus.e-info,
 .e-css.e-btn-group input:focus + label.e-btn.e-info {
-  background-color: #104b5d;
+  background: #104b5d;
   border-color: #010406;
   color: #fff;
   box-shadow: none;
@@ -295,7 +295,7 @@
 .e-btn-group input:focus + label.e-btn.e-warning,
 .e-css.e-btn-group .e-btn:focus.e-warning,
 .e-css.e-btn-group input:focus + label.e-btn.e-warning {
-  background-color: #613b05;
+  background: #613b05;
   border-color: black;
   color: #fff;
   box-shadow: none;
@@ -306,7 +306,7 @@
 .e-btn-group input:focus + label.e-btn.e-danger,
 .e-css.e-btn-group .e-btn:focus.e-danger,
 .e-css.e-btn-group input:focus + label.e-btn.e-danger {
-  background-color: #a51c2a;
+  background: #a51c2a;
   border-color: #4e0d14;
   color: #fff;
   box-shadow: none;
@@ -368,7 +368,7 @@
 .e-css.e-btn-group .e-btn:active,
 .e-css.e-btn-group input:active + label.e-btn,
 .e-css.e-btn-group input:checked + label.e-btn {
-  background-color: #e6e6e6;
+  background: #e6e6e6;
   border-color: #adadad;
   color: #333;
   outline: #fff 0 solid;
@@ -381,7 +381,7 @@
 .e-css.e-btn-group .e-btn:active.e-primary,
 .e-css.e-btn-group input:active + label.e-btn.e-primary,
 .e-css.e-btn-group input:checked + label.e-btn.e-primary {
-  background-color: #21527d;
+  background: #21527d;
   border-color: #163854;
   color: #fff;
   outline: #fff 0 solid;
@@ -393,7 +393,7 @@
 .e-css.e-btn-group .e-btn:active.e-success,
 .e-css.e-btn-group input:active + label.e-btn.e-success,
 .e-css.e-btn-group input:checked + label.e-btn.e-success {
-  background-color: #124a1f;
+  background: #124a1f;
   border-color: #08210e;
   color: #fff;
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
@@ -404,7 +404,7 @@
 .e-css.e-btn-group .e-btn:active.e-info,
 .e-css.e-btn-group input:active + label.e-btn.e-info,
 .e-css.e-btn-group input:checked + label.e-btn.e-info {
-  background-color: #104b5d;
+  background: #104b5d;
   color: #fff;
   border-color: #082831;
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
@@ -415,7 +415,7 @@
 .e-css.e-btn-group .e-btn:active.e-warning,
 .e-css.e-btn-group input:active + label.e-btn.e-warning,
 .e-css.e-btn-group input:checked + label.e-btn.e-warning {
-  background-color: #613b05;
+  background: #613b05;
   border-color: #301d02;
   color: #fff;
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
@@ -426,7 +426,7 @@
 .e-css.e-btn-group .e-btn:active.e-danger,
 .e-css.e-btn-group input:active + label.e-btn.e-danger,
 .e-css.e-btn-group input:checked + label.e-btn.e-danger {
-  background-color: #a51c2a;
+  background: #a51c2a;
   border-color: #7a151f;
   color: #fff;
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
@@ -437,7 +437,7 @@
 .e-css.e-btn-group .e-btn:active.e-outline,
 .e-css.e-btn-group input:active + label.e-btn.e-outline,
 .e-css.e-btn-group input:checked + label.e-btn.e-outline {
-  background-color: #e6e6e6;
+  background: #e6e6e6;
   border-color: #adadad;
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   color: #333;
@@ -448,7 +448,7 @@
 .e-css.e-btn-group .e-btn:active.e-outline.e-primary,
 .e-css.e-btn-group input:active + label.e-btn.e-outline.e-primary,
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-primary {
-  background-color: #21527d;
+  background: #21527d;
   border-color: #265f91;
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   color: #fff;
@@ -459,7 +459,7 @@
 .e-css.e-btn-group .e-btn:active.e-outline.e-success,
 .e-css.e-btn-group input:active + label.e-btn.e-outline.e-success,
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-success {
-  background-color: #124a1f;
+  background: #124a1f;
   border-color: #08210e;
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   color: #fff;
@@ -470,7 +470,7 @@
 .e-css.e-btn-group .e-btn:active.e-outline.e-info,
 .e-css.e-btn-group input:active + label.e-btn.e-outline.e-info,
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-info {
-  background-color: #104b5d;
+  background: #104b5d;
   border-color: #082831;
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   color: #fff;
@@ -481,7 +481,7 @@
 .e-css.e-btn-group .e-btn:active.e-outline.e-warning,
 .e-css.e-btn-group input:active + label.e-btn.e-outline.e-warning,
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-warning {
-  background-color: #613b05;
+  background: #613b05;
   border-color: #301d02;
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   color: #fff;
@@ -492,7 +492,7 @@
 .e-css.e-btn-group .e-btn:active.e-outline.e-danger,
 .e-css.e-btn-group input:active + label.e-btn.e-outline.e-danger,
 .e-css.e-btn-group input:checked + label.e-btn.e-outline.e-danger {
-  background-color: #a51c2a;
+  background: #a51c2a;
   border-color: #7a151f;
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   color: #fff;
@@ -511,7 +511,7 @@
 .e-btn-group input:disabled + label.e-btn.e-primary,
 .e-css.e-btn-group .e-btn:disabled.e-primary,
 .e-css.e-btn-group input:disabled + label.e-btn.e-primary {
-  background-color: rgba(49, 122, 185, 0.65);
+  background: rgba(49, 122, 185, 0.65);
   border-color: rgba(204, 204, 204, 0.65);
   box-shadow: none;
   color: rgba(255, 255, 255, 0.65);
@@ -521,7 +521,7 @@
 .e-btn-group input:disabled + label.e-btn.e-success,
 .e-css.e-btn-group .e-btn:disabled.e-success,
 .e-css.e-btn-group input:disabled + label.e-btn.e-success {
-  background-color: rgba(92, 184, 92, 0.65);
+  background: rgba(92, 184, 92, 0.65);
   border-color: rgba(204, 204, 204, 0.65);
   box-shadow: none;
   color: rgba(255, 255, 255, 0.65);
@@ -531,7 +531,7 @@
 .e-btn-group input:disabled + label.e-btn.e-info,
 .e-css.e-btn-group .e-btn:disabled.e-info,
 .e-css.e-btn-group input:disabled + label.e-btn.e-info {
-  background-color: rgba(91, 192, 222, 0.65);
+  background: rgba(91, 192, 222, 0.65);
   border-color: rgba(204, 204, 204, 0.65);
   box-shadow: none;
   color: rgba(255, 255, 255, 0.65);
@@ -541,7 +541,7 @@
 .e-btn-group input:disabled + label.e-btn.e-warning,
 .e-css.e-btn-group .e-btn:disabled.e-warning,
 .e-css.e-btn-group input:disabled + label.e-btn.e-warning {
-  background-color: rgba(240, 173, 78, 0.65);
+  background: rgba(240, 173, 78, 0.65);
   border-color: rgba(204, 204, 204, 0.65);
   box-shadow: none;
   color: rgba(255, 255, 255, 0.65);
@@ -551,7 +551,7 @@
 .e-btn-group input:disabled + label.e-btn.e-danger,
 .e-css.e-btn-group .e-btn:disabled.e-danger,
 .e-css.e-btn-group input:disabled + label.e-btn.e-danger {
-  background-color: rgba(217, 83, 79, 0.65);
+  background: rgba(217, 83, 79, 0.65);
   border-color: rgba(204, 204, 204, 0.65);
   box-shadow: none;
   color: rgba(255, 255, 255, 0.65);
@@ -562,7 +562,7 @@
 .e-css.e-btn-group .e-btn:disabled.e-link,
 .e-css.e-btn-group input:disabled + label.e-btn.e-link {
   color: rgba(51, 51, 51, 0.65);
-  background-color: transparent;
+  background: transparent;
   box-shadow: none;
   text-decoration: none;
   border-color: transparent;
@@ -571,7 +571,7 @@
 .e-btn-group input:disabled + label.e-btn.e-outline,
 .e-css.e-btn-group .e-btn:disabled.e-outline,
 .e-css.e-btn-group input:disabled + label.e-btn.e-outline {
-  background-color: transparent;
+  background: transparent;
   border-color: rgba(204, 204, 204, 0.65);
   box-shadow: none;
   color: rgba(51, 51, 51, 0.65);
@@ -581,7 +581,7 @@
 .e-btn-group input:disabled + label.e-btn.e-outline.e-primary,
 .e-css.e-btn-group .e-btn:disabled.e-outline.e-primary,
 .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-primary {
-  background-color: transparent;
+  background: transparent;
   border-color: rgba(204, 204, 204, 0.65);
   box-shadow: none;
   color: rgba(51, 51, 51, 0.65);
@@ -591,7 +591,7 @@
 .e-btn-group input:disabled + label.e-btn.e-outline.e-success,
 .e-css.e-btn-group .e-btn:disabled.e-outline.e-success,
 .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-success {
-  background-color: transparent;
+  background: transparent;
   border-color: rgba(33, 135, 57, 0.65);
   box-shadow: none;
   color: rgba(33, 135, 57, 0.65);
@@ -601,7 +601,7 @@
 .e-btn-group input:disabled + label.e-btn.e-outline.e-info,
 .e-css.e-btn-group .e-btn:disabled.e-outline.e-info,
 .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-info {
-  background-color: transparent;
+  background: transparent;
   border-color: rgba(27, 128, 158, 0.65);
   box-shadow: none;
   color: rgba(27, 128, 158, 0.65);
@@ -611,7 +611,7 @@
 .e-btn-group input:disabled + label.e-btn.e-outline.e-warning,
 .e-css.e-btn-group .e-btn:disabled.e-outline.e-warning,
 .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-warning {
-  background-color: transparent;
+  background: transparent;
   border-color: rgba(170, 103, 8, 0.65);
   box-shadow: none;
   color: rgba(170, 103, 8, 0.65);
@@ -621,7 +621,7 @@
 .e-btn-group input:disabled + label.e-btn.e-outline.e-danger,
 .e-css.e-btn-group .e-btn:disabled.e-outline.e-danger,
 .e-css.e-btn-group input:disabled + label.e-btn.e-outline.e-danger {
-  background-color: transparent;
+  background: transparent;
   border-color: rgba(220, 50, 67, 0.65);
   box-shadow: none;
   color: rgba(220, 50, 67, 0.65);