@syncfusion/ej2-splitbuttons 20.4.50 → 21.1.37

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.4.50
+*  version : 21.1.37
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-splitbuttons@*",
-  "_id": "@syncfusion/ej2-splitbuttons@20.4.48",
+  "_id": "@syncfusion/ej2-splitbuttons@21.1.35",
   "_inBundle": false,
-  "_integrity": "sha512-GopDCpguhkscBfgaDrL1tsxlbNFwQHWZwzosBeswNc8AIW7aj1KNBIV2XwAWpvoDYrzD/canCrO6acmth0yv5Q==",
+  "_integrity": "sha512-ffB4IQP3uN/m+H60Y6s02tLn531qAdXlZu3KWKYHl3DrfKcvE5Xe70cxDk821KVHGZ6WUAmB4ZZUwgzjw+uuVQ==",
   "_location": "/@syncfusion/ej2-splitbuttons",
   "_phantomChildren": {},
   "_requested": {
@@ -29,13 +29,14 @@
     "/@syncfusion/ej2-pivotview",
     "/@syncfusion/ej2-querybuilder",
     "/@syncfusion/ej2-react-splitbuttons",
+    "/@syncfusion/ej2-ribbon",
     "/@syncfusion/ej2-richtexteditor",
     "/@syncfusion/ej2-vue-splitbuttons"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-splitbuttons/-/ej2-splitbuttons-20.4.48.tgz",
-  "_shasum": "a5a613d2a38d84e5ab555f50c7404a07ec8d7336",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-splitbuttons/-/ej2-splitbuttons-21.1.35.tgz",
+  "_shasum": "3cf796604a3ce3b55ff23e982c1bcb3dc46f9f53",
   "_spec": "@syncfusion/ej2-splitbuttons@*",
-  "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -44,8 +45,8 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.4.48",
-    "@syncfusion/ej2-popups": "~20.4.49"
+    "@syncfusion/ej2-base": "~21.1.37",
+    "@syncfusion/ej2-popups": "~21.1.37"
   },
   "deprecated": false,
   "description": "A package of feature-rich Essential JS 2 components such as DropDownButton, SplitButton, ProgressButton and ButtonGroup.",
@@ -88,6 +89,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "20.4.50",
+  "version": "21.1.37",
   "sideEffects": false
 }

package/src/drop-down-button/drop-down-button.js

@@ -173,7 +173,7 @@ var DropDownButton = /** @class */ (function (_super) {
             _a['aria-label'] = this.element.textContent ? this.element.textContent : 'dropdownbutton',
             _a));
         if (this.cssClass) {
-            addClass([div], this.cssClass.split(' '));
+            addClass([div], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
         }
         this.isPopupCreated = true;
     };
@@ -453,6 +453,10 @@ var DropDownButton = /** @class */ (function (_super) {
         if (this.target && (e.keyCode === 13 || e.keyCode === 9)) {
             return;
         }
+        if (e.keyCode === 13 && this.activeElem[0].classList.contains('e-split-btn')) {
+            this.activeElem[0].focus();
+            return;
+        }
         if (e.target && e.target.className.indexOf('e-edit-template') > -1 && e.keyCode === 32) {
             return;
         }
@@ -687,7 +691,7 @@ var DropDownButton = /** @class */ (function (_super) {
                             removeClass([popupElement], oldProp.cssClass.split(' '));
                         }
                         if (newProp.cssClass) {
-                            addClass([popupElement], newProp.cssClass.split(' '));
+                            addClass([popupElement], newProp.cssClass.replace(/\s+/g, ' ').trim().split(' '));
                         }
                     }
                     break;

package/src/progress-button/progress-button-model.d.ts

@@ -94,7 +94,9 @@ export interface ProgressButtonModel {
      * * Top: The icon will be positioned at the top of the text content.
      * * Bottom: The icon will be positioned at the bottom of the text content.
      *
-     * @default "Left"
+     * @isenumeration true
+     * @default Syncfusion.EJ2.Buttons.IconPosition.Left
+     * @asptype Syncfusion.EJ2.Buttons.IconPosition
      */
     iconPosition?: string | IconPosition;
 

package/src/progress-button/progress-button.d.ts

@@ -100,7 +100,9 @@ export declare class ProgressButton extends Button implements INotifyPropertyCha
      * * Top: The icon will be positioned at the top of the text content.
      * * Bottom: The icon will be positioned at the bottom of the text content.
      *
-     * @default "Left"
+     * @isenumeration true
+     * @default Syncfusion.EJ2.Buttons.IconPosition.Left
+     * @asptype Syncfusion.EJ2.Buttons.IconPosition
      */
     iconPosition: string | IconPosition;
     /**
@@ -277,10 +279,26 @@ export declare class ProgressButton extends Button implements INotifyPropertyCha
 }
 /**
  * Defines the spin position of progress button.
+ * ```props
+ * Left :- The spinner will be positioned to the left of the text content.
+ * Right :- The spinner will be positioned to the right of the text content.
+ * Top :- The spinner will be positioned at the top of the text content.
+ * Bottom :- The spinner will be positioned at the bottom of the text content.
+ * Center :- The spinner will be positioned at the center of the progress button.
+ * ```
  */
 export declare type SpinPosition = 'Left' | 'Right' | 'Top' | 'Bottom' | 'Center';
 /**
  * Defines the animation effect of progress button.
+ * ```props
+ * None :- The button will not have any animation effect on the text content.
+ * SlideLeft :- The text content will slide to the left as an animation effect.
+ * SlideRight :- The text content will slide to the right as an animation effect.
+ * SlideUp :- The text content will slide up as an animation effect.
+ * SlideDown :- The text content will slide down as an animation effect.
+ * ZoomIn :- The text content will zoom in as an animation effect.
+ * ZoomOut :- The text content will zoom out as an animation effect.
+ * ```
  */
 export declare type AnimationEffect = 'None' | 'SlideLeft' | 'SlideRight' | 'SlideUp' | 'SlideDown' | 'ZoomIn' | 'ZoomOut';
 /**

package/src/split-button/split-button.js

@@ -131,7 +131,7 @@ var SplitButton = /** @class */ (function (_super) {
             this.wrapper.classList.add(RTL);
         }
         if (this.cssClass) {
-            addClass([this.wrapper], this.cssClass.split(' '));
+            addClass([this.wrapper], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
         }
     };
     SplitButton.prototype.createPrimaryButton = function () {
@@ -270,7 +270,8 @@ var SplitButton = /** @class */ (function (_super) {
         new KeyboardEvents(this.element, {
             keyAction: this.btnKeyBoardHandler.bind(this),
             keyConfigs: {
-                altdownarrow: 'alt+downarrow'
+                altdownarrow: 'alt+downarrow',
+                enter: 'enter'
             }
         });
     };
@@ -286,6 +287,16 @@ var SplitButton = /** @class */ (function (_super) {
             case 'altdownarrow':
                 this.clickHandler(e);
                 break;
+            case 'enter':
+                this.clickHandler(e);
+                if (!this.getPopUpElement().classList.contains('e-popup-close')) {
+                    this.element.classList.remove('e-active');
+                    this.secondaryBtnObj.element.classList.add('e-active');
+                }
+                else {
+                    this.secondaryBtnObj.element.classList.remove('e-active');
+                }
+                break;
         }
     };
     /**
@@ -312,7 +323,7 @@ var SplitButton = /** @class */ (function (_super) {
                     if (oldProp.cssClass) {
                         removeClass([this.wrapper], oldProp.cssClass.split(' '));
                     }
-                    addClass([this.wrapper], newProp.cssClass.split(' '));
+                    addClass([this.wrapper], newProp.cssClass.replace(/\s+/g, ' ').trim().split(' '));
                     break;
                 case 'enableRtl':
                     if (newProp.enableRtl) {

package/styles/bootstrap-dark.css

@@ -811,7 +811,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;
@@ -824,7 +824,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;
@@ -836,7 +836,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;
@@ -847,7 +847,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;
@@ -858,7 +858,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;
@@ -869,7 +869,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;
@@ -931,7 +931,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;
@@ -944,7 +944,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;
@@ -956,7 +956,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);
@@ -967,7 +967,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);
@@ -978,7 +978,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);
@@ -989,7 +989,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);
@@ -1000,7 +1000,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;
@@ -1011,7 +1011,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;
@@ -1022,7 +1022,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;
@@ -1033,7 +1033,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;
@@ -1044,7 +1044,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;
@@ -1055,7 +1055,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;
@@ -1074,7 +1074,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);
@@ -1084,7 +1084,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);
@@ -1094,7 +1094,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);
@@ -1104,7 +1104,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);
@@ -1114,7 +1114,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);
@@ -1125,7 +1125,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;
@@ -1134,7 +1134,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);
@@ -1144,7 +1144,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);
@@ -1154,7 +1154,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);
@@ -1164,7 +1164,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);
@@ -1174,7 +1174,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);
@@ -1184,7 +1184,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);
@@ -1711,7 +1711,7 @@
   stroke: #000;
 }
 .e-progress-btn.e-warning.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle, .e-progress-btn.e-warning.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-circle {
-  stroke: rgba(0, 0, 0, 0);
+  stroke: #000;
 }
 .e-progress-btn.e-warning.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-outline:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:hover.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc, .e-progress-btn.e-warning.e-flat:focus.e-flat .e-spinner-pane .e-spinner-inner svg .e-path-arc {
   stroke: #000;
@@ -1798,48 +1798,48 @@
 }
 
 .e-progress {
-  background-color: rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.2);
 }
 
 *.e-primary .e-progress,
 *.e-success .e-progress,
 *.e-danger .e-progress,
 *.e-info .e-progress {
-  background-color: rgba(255, 255, 255, 0.3);
+  background: rgba(255, 255, 255, 0.3);
 }
 
 *.e-warning .e-progress {
-  background-color: rgba(255, 255, 255, 0.3);
+  background: rgba(255, 255, 255, 0.3);
 }
 
 *.e-flat.e-primary .e-progress {
-  background-color: rgba(255, 64, 129, 0.2);
+  background: rgba(255, 64, 129, 0.2);
 }
 *.e-flat.e-success .e-progress {
-  background-color: rgba(77, 132, 29, 0.2);
+  background: rgba(77, 132, 29, 0.2);
 }
 *.e-flat.e-info .e-progress {
-  background-color: rgba(3, 120, 213, 0.2);
+  background: rgba(3, 120, 213, 0.2);
 }
 *.e-flat.e-warning .e-progress {
-  background-color: rgba(193, 87, 0, 0.2);
+  background: rgba(193, 87, 0, 0.2);
 }
 *.e-flat.e-danger .e-progress {
-  background-color: rgba(214, 65, 19, 0.2);
+  background: rgba(214, 65, 19, 0.2);
 }
 
 *.e-outline:not(:focus).e-primary .e-progress {
-  background-color: rgba(0, 112, 240, 0.2);
+  background: rgba(0, 112, 240, 0.2);
 }
 *.e-outline:not(:focus).e-success .e-progress {
-  background-color: rgba(53, 130, 56, 0.2);
+  background: rgba(53, 130, 56, 0.2);
 }
 *.e-outline:not(:focus).e-info .e-progress {
-  background-color: rgba(32, 128, 144, 0.2);
+  background: rgba(32, 128, 144, 0.2);
 }
 *.e-outline:not(:focus).e-warning .e-progress {
-  background-color: rgba(249, 173, 55, 0.2);
+  background: rgba(249, 173, 55, 0.2);
 }
 *.e-outline:not(:focus).e-danger .e-progress {
-  background-color: rgba(193, 47, 47, 0.2);
+  background: rgba(193, 47, 47, 0.2);
 }