@syncfusion/ej2-splitbuttons 19.2.62 → 19.3.47

package/helpers/e2e/dropdownbuttonHelper.d.ts

@@ -0,0 +1,42 @@
+import { TestHelper } from '@syncfusion/ej2-base/helpers/e2e';
+/**
+ * E2E test helpers for DropDownButton to easily interact and the test the component
+ */
+export declare class DropDownButtonHelper extends TestHelper {
+    id: string;
+    wrapperFn: Function;
+    /**
+     * Initialize the DropDownButton E2E helpers
+     * @param id Element id of the DropDownButton element
+     * @param wrapperFn Pass the wrapper function
+     * @return DropDownButton any
+     */
+    constructor(id: string, wrapperFn: Function);
+    /**
+     * Used to get the root element of the DropDownButton component.
+     * @return Element
+     */
+    getElement(): any;
+    /**
+     * Used to get the popup element of the DropDownButton component.
+     * @return Element
+     */
+    getPopupElement(): any;
+    /**
+     * The setModel method is used to set values for the property. It will accepts two arguments.
+     * @param property - Specifies the name of the property whose value has to be updated.
+     * @param value - Specifies the corresponding value to the property.
+     */
+    setModel(property: any, value: any): any;
+    /**
+     * The getModel method is used to return value for the property.
+     * @param property - Specifies the name of the property.
+     */
+    getModel(property: any): any;
+    /**
+     * The invoke method is used to access the public methods available in DropDownButton control.
+     * @param fName - Specifies the method name of the DropDownButton control.
+     * @param args - Specifies the arguments. This is optional.
+     */
+    invoke(fName: any, args?: any): any;
+}

package/helpers/e2e/dropdownbuttonHelper.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const e2e_1 = require("@syncfusion/ej2-base/helpers/e2e");
+class DropDownButtonHelper extends e2e_1.TestHelper {
+    constructor(id, wrapperFn) {
+        super();
+        this.id = id;
+        if (wrapperFn !== undefined) {
+            this.wrapperFn = wrapperFn;
+        }
+        return this;
+    }
+    getElement() {
+        return this.selector('#' + this.id);
+    }
+    getPopupElement() {
+        return this.selector('#' + this.id + '_popup');
+    }
+    setModel(property, value) {
+        let cy;
+        return cy.get('#' + this.id).then((ele) => {
+            return ele[0].ej2_instances[0][property] = value;
+        });
+    }
+    getModel(property) {
+        let cy;
+        return cy.get('#' + this.id).then((ele) => {
+            return ele[0].ej2_instances[0][property];
+        });
+    }
+    invoke(fName, args = []) {
+        let cy;
+        return cy.get('#' + this.id).then((ele) => {
+            var inst = ele[0].ej2_instances[0];
+            return inst[fName].apply(inst, args);
+        });
+    }
+}
+exports.DropDownButtonHelper = DropDownButtonHelper;

package/helpers/e2e/index.d.ts

@@ -0,0 +1,3 @@
+export * from './dropdownbuttonHelper';
+export * from './progressbuttonHelper';
+export * from './splitbuttonHelper';

package/helpers/e2e/index.js

@@ -0,0 +1,8 @@
+"use strict";
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", { value: true });
+__export(require("./dropdownbuttonHelper"));
+__export(require("./progressbuttonHelper"));
+__export(require("./splitbuttonHelper"));

package/helpers/e2e/progressbuttonHelper.d.ts

@@ -0,0 +1,37 @@
+import { TestHelper } from '@syncfusion/ej2-base/helpers/e2e';
+/**
+ * E2E test helpers for ProgressButton to easily interact and the test the component
+ */
+export declare class ProgressButtonHelper extends TestHelper {
+    id: string;
+    wrapperFn: Function;
+    /**
+     * Initialize the ProgressButton E2E helpers
+     * @param id Element id of the ProgressButton element
+     * @param wrapperFn Pass the wrapper function
+     * @return ProgressButton any
+     */
+    constructor(id: string, wrapperFn: Function);
+    /**
+     * Used to get the root element of the ProgressButton component.
+     * @return Element
+     */
+    getElement(): any;
+    /**
+     * The setModel method is used to set values for the property. It will accepts two arguments.
+     * @param property - Specifies the name of the property whose value has to be updated.
+     * @param value - Specifies the corresponding value to the property.
+     */
+    setModel(property: any, value: any): any;
+    /**
+     * The getModel method is used to return value for the property.
+     * @param property - Specifies the name of the property.
+     */
+    getModel(property: any): any;
+    /**
+     * The invoke method is used to access the public methods available in ProgressButton control.
+     * @param fName - Specifies the method name of the ProgressButton control.
+     * @param args - Specifies the arguments. This is optional.
+     */
+    invoke(fName: any, args?: any): any;
+}

package/helpers/e2e/progressbuttonHelper.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const e2e_1 = require("@syncfusion/ej2-base/helpers/e2e");
+class ProgressButtonHelper extends e2e_1.TestHelper {
+    constructor(id, wrapperFn) {
+        super();
+        this.id = id;
+        if (wrapperFn !== undefined) {
+            this.wrapperFn = wrapperFn;
+        }
+        return this;
+    }
+    getElement() {
+        return this.selector('#' + this.id);
+    }
+    setModel(property, value) {
+        let cy;
+        return cy.get('#' + this.id).then((ele) => {
+            return ele[0].ej2_instances[0][property] = value;
+        });
+    }
+    getModel(property) {
+        let cy;
+        return cy.get('#' + this.id).then((ele) => {
+            return ele[0].ej2_instances[0][property];
+        });
+    }
+    invoke(fName, args = []) {
+        let cy;
+        return cy.get('#' + this.id).then((ele) => {
+            var inst = ele[0].ej2_instances[0];
+            return inst[fName].apply(inst, args);
+        });
+    }
+}
+exports.ProgressButtonHelper = ProgressButtonHelper;

package/helpers/e2e/splitbuttonHelper.d.ts

@@ -0,0 +1,45 @@
+import { TestHelper } from '@syncfusion/ej2-base/helpers/e2e';
+/**
+ * E2E test helpers for SplitButton to easily interact and the test the component
+ */
+export declare class SplitButtonHelper extends TestHelper {
+    id: string;
+    wrapperFn: Function;
+    /**
+     * Initialize the SplitButton E2E helpers
+     * @param id Element id of the SplitButton element
+     * @param wrapperFn Pass the wrapper function
+     * @return SplitButton any
+     */
+    constructor(id: string, wrapperFn: Function);
+    /**
+     * Used to get the root element of the SplitButton component.
+     * @return Element
+     */
+    getElement(): any;
+    /**
+    * Used to get the dropdown button element of the SplitButton component
+    */
+    getDropDownElement(): any;
+    /**
+    * Used to get the dropdown popup element of the SplitButton component
+    */
+    getPopupElement(): any;
+    /**
+     * The setModel method is used to set values for the property. It will accepts two arguments.
+     * @param property - Specifies the name of the property whose value has to be updated.
+     * @param value - Specifies the corresponding value to the property.
+     */
+    setModel(property: any, value: any): any;
+    /**
+     * The getModel method is used to return value for the property.
+     * @param property - Specifies the name of the property.
+     */
+    getModel(property: any): any;
+    /**
+     * The invoke method is used to access the public methods available in SplitButton control.
+     * @param fName - Specifies the method name of the SplitButton control.
+     * @param args - Specifies the arguments. This is optional.
+     */
+    invoke(fName: any, args?: any): any;
+}

package/helpers/e2e/splitbuttonHelper.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const e2e_1 = require("@syncfusion/ej2-base/helpers/e2e");
+class SplitButtonHelper extends e2e_1.TestHelper {
+    constructor(id, wrapperFn) {
+        super();
+        this.id = id;
+        if (wrapperFn !== undefined) {
+            this.wrapperFn = wrapperFn;
+        }
+        return this;
+    }
+    getElement() {
+        return this.selector('#' + this.id);
+    }
+    getDropDownElement() {
+        return this.selector('#' + this.id + '_dropdownbtn');
+    }
+    getPopupElement() {
+        return this.selector('#' + this.id + '_dropdownbtn_popup');
+    }
+    setModel(property, value) {
+        let cy;
+        return cy.get('#' + this.id).then((ele) => {
+            return ele[0].ej2_instances[0][property] = value;
+        });
+    }
+    getModel(property) {
+        let cy;
+        return cy.get('#' + this.id).then((ele) => {
+            return ele[0].ej2_instances[0][property];
+        });
+    }
+    invoke(fName, args = []) {
+        let cy;
+        return cy.get('#' + this.id).then((ele) => {
+            var inst = ele[0].ej2_instances[0];
+            return inst[fName].apply(inst, args);
+        });
+    }
+}
+exports.SplitButtonHelper = SplitButtonHelper;

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-splitbuttons@*",
-  "_id": "@syncfusion/ej2-splitbuttons@19.2.60",
+  "_id": "@syncfusion/ej2-splitbuttons@19.3.45",
   "_inBundle": false,
-  "_integrity": "sha512-68e+sfKjKkywiSwjytsff6ZtwYcdT4Ie25cODaRO8paZGPfPlEQ4Bd+jrtMl2+0n/cYkklEhG0N/cMqDZeJcuA==",
+  "_integrity": "sha512-Z3Q1DDHHbC/SsJoAtUtsvXlo32ZOBX9WTHME3TllG8mRctCiO9RZ1n4YggH7I6y+eqwEBD/x6v1neqWpg7Ft8Q==",
   "_location": "/@syncfusion/ej2-splitbuttons",
   "_phantomChildren": {},
   "_requested": {
@@ -31,8 +31,8 @@
     "/@syncfusion/ej2-richtexteditor",
     "/@syncfusion/ej2-vue-splitbuttons"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix/@syncfusion/ej2-splitbuttons/-/ej2-splitbuttons-19.2.60.tgz",
-  "_shasum": "0877b4523bb67bc7cb4ee28c8e35bccd43b77800",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix/@syncfusion/ej2-splitbuttons/-/ej2-splitbuttons-19.3.45.tgz",
+  "_shasum": "9a444ab3598387de82f877d5685f77698f2a5e56",
   "_spec": "@syncfusion/ej2-splitbuttons@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -43,8 +43,8 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.2.60",
-    "@syncfusion/ej2-popups": "~19.2.62"
+    "@syncfusion/ej2-base": "~19.3.47",
+    "@syncfusion/ej2-popups": "~19.3.47"
   },
   "deprecated": false,
   "description": "A package of feature-rich Essential JS 2 components such as DropDownButton, SplitButton, ProgressButton and ButtonGroup.",
@@ -87,6 +87,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "19.2.62",
+  "version": "19.3.47",
   "sideEffects": false
 }

package/src/drop-down-button/drop-down-button.d.ts

@@ -180,6 +180,7 @@ export declare class DropDownButton extends Component<HTMLButtonElement> impleme
     private hasIcon;
     private createAnchor;
     private initialize;
+    private isColorPicker;
     private appendArrowSpan;
     protected setActiveElem(elem: HTMLElement[]): void;
     /**
@@ -201,6 +202,7 @@ export declare class DropDownButton extends Component<HTMLButtonElement> impleme
     protected getULElement(): HTMLElement;
     protected wireEvents(): void;
     protected popupWireEvents(): void;
+    protected popupUnWireEvents(): void;
     /**
      * Handles the keyboard interactions.
      *

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

@@ -262,13 +262,23 @@ var DropDownButton = /** @class */ (function (_super) {
         }
         this.appendArrowSpan();
         this.setActiveElem([this.element]);
-        if (this.target || !this.createPopupOnClick) {
+        if ((this.target && !this.isColorPicker()) || !this.createPopupOnClick) {
             this.createPopup();
         }
         else {
             this.isPopupCreated = false;
         }
     };
+    DropDownButton.prototype.isColorPicker = function () {
+        if (!this.element) {
+            return false;
+        }
+        var prevElem = this.element.previousSibling;
+        if (prevElem && prevElem.classList && prevElem.classList.contains('e-split-colorpicker')) {
+            return true;
+        }
+        return false;
+    };
     DropDownButton.prototype.appendArrowSpan = function () {
         this.element.appendChild(this.createElement('span', {
             className: 'e-btn-icon e-icons ' + 'e-icon-' + (this.cssClass.indexOf(classNames.VERTICAL) > -1
@@ -320,6 +330,7 @@ var DropDownButton = /** @class */ (function (_super) {
             attrList.forEach(function (key) {
                 _this.element.removeAttribute(key);
             });
+            this.popupUnWireEvents();
             this.destroyPopup();
             this.isPopupCreated = false;
             if (!this.disabled) {
@@ -361,16 +372,33 @@ var DropDownButton = /** @class */ (function (_super) {
     };
     DropDownButton.prototype.wireEvents = function () {
         this.delegateMousedownHandler = this.mousedownHandler.bind(this);
-        EventHandler.add(document, 'mousedown touchstart', this.delegateMousedownHandler, this);
+        if (!this.createPopupOnClick) {
+            EventHandler.add(document, 'mousedown touchstart', this.delegateMousedownHandler, this);
+        }
         EventHandler.add(this.element, 'click', this.clickHandler, this);
         EventHandler.add(this.element, 'keydown', this.keyBoardHandler, this);
     };
     DropDownButton.prototype.popupWireEvents = function () {
         var popupElement = this.getPopUpElement();
-        EventHandler.add(popupElement, 'click', this.clickHandler, this);
-        EventHandler.add(popupElement, 'keydown', this.keyBoardHandler, this);
+        if (this.createPopupOnClick) {
+            EventHandler.add(document, 'mousedown touchstart', this.delegateMousedownHandler, this);
+        }
+        if (popupElement) {
+            EventHandler.add(popupElement, 'click', this.clickHandler, this);
+            EventHandler.add(popupElement, 'keydown', this.keyBoardHandler, this);
+        }
         this.rippleFn = rippleEffect(popupElement, { selector: '.' + classNames.ITEM });
     };
+    DropDownButton.prototype.popupUnWireEvents = function () {
+        var popupElement = this.getPopUpElement();
+        if (this.createPopupOnClick) {
+            EventHandler.remove(document, 'mousedown touchstart', this.delegateMousedownHandler);
+        }
+        if (popupElement && popupElement.parentElement) {
+            EventHandler.remove(popupElement, 'click', this.clickHandler);
+            EventHandler.remove(popupElement, 'keydown', this.keyBoardHandler);
+        }
+    };
     /**
      * Handles the keyboard interactions.
      *
@@ -439,7 +467,7 @@ var DropDownButton = /** @class */ (function (_super) {
     DropDownButton.prototype.clickHandler = function (e) {
         var trgt = e.target;
         if (closest(trgt, '[id="' + this.element.id + '"]')) {
-            if (!this.createPopupOnClick || this.target) {
+            if (!this.createPopupOnClick || (this.target && !this.isColorPicker())) {
                 if (this.getPopUpElement().classList.contains('e-popup-close')) {
                     this.openPopUp(e);
                 }
@@ -505,6 +533,7 @@ var DropDownButton = /** @class */ (function (_super) {
         }
         this.trigger('beforeClose', beforeCloseArgs, function (observedArgs) {
             if (!observedArgs.cancel) {
+                _this.popupUnWireEvents();
                 var ul_2 = _this.getULElement();
                 var selectedLi = ul_2.querySelector('.e-selected');
                 if (selectedLi) {
@@ -533,7 +562,9 @@ var DropDownButton = /** @class */ (function (_super) {
         });
     };
     DropDownButton.prototype.unWireEvents = function () {
-        EventHandler.remove(document, 'mousedown touchstart', this.delegateMousedownHandler);
+        if (!this.createPopupOnClick) {
+            EventHandler.remove(document, 'mousedown touchstart', this.delegateMousedownHandler);
+        }
         EventHandler.remove(this.element, 'click', this.clickHandler);
         EventHandler.remove(this.element, 'keydown', this.keyBoardHandler);
         if (this.isPopupCreated) {

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

@@ -140,7 +140,7 @@ export declare class SplitButton extends DropDownButton implements INotifyProper
      */
     protected preRender(): void;
     /**
-     * Initialize the Component rendering
+     * Initialize the Component rendering.
      *
      * @returns {void}
      * @private

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

@@ -81,7 +81,7 @@ var SplitButton = /** @class */ (function (_super) {
         }
     };
     /**
-     * Initialize the Component rendering
+     * Initialize the Component rendering.
      *
      * @returns {void}
      * @private

package/styles/bootstrap-dark.css

@@ -1017,9 +1017,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline,
 .e-css.e-btn-group .e-btn:focus.e-outline,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline {
-  background-color: #2a2a2a;
-  border-color: #585858;
-  color: #fff;
   box-shadow: none;
   box-shadow: none;
 }
@@ -1028,9 +1025,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-primary,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-primary,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-primary {
-  background-color: #0058bd;
-  border-color: #0058bd;
-  color: #fff;
   box-shadow: none;
 }
 
@@ -1038,9 +1032,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-success,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-success,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-success {
-  background-color: #265e28;
-  border-color: #265e28;
-  color: #fff;
   box-shadow: none;
 }
 
@@ -1048,9 +1039,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-info,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-info,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-info {
-  background-color: #1b6d7b;
-  border-color: #175b66;
-  color: #fff;
   box-shadow: none;
 }
 
@@ -1058,9 +1046,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-warning,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-warning,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-warning {
-  background-color: #dd8907;
-  border-color: #7a4c04;
-  color: #000;
   box-shadow: none;
 }
 
@@ -1068,9 +1053,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-danger,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-danger,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-danger {
-  background-color: #ac2a2a;
-  border-color: #982525;
-  color: #fff;
   box-shadow: none;
 }
 
@@ -1086,7 +1068,6 @@
   outline: #393939 0 solid;
   outline-offset: 0;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-primary,
@@ -1100,7 +1081,6 @@
   color: #fff;
   outline: #393939 0 solid;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-success,
@@ -1113,7 +1093,6 @@
   border-color: #265e28;
   color: #fff;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-info,
@@ -1123,10 +1102,9 @@
 .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;
-  border-color: #175b66;
   color: #fff;
+  border-color: #175b66;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-warning,
@@ -1139,7 +1117,6 @@
   border-color: #ab6a05;
   color: #000;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-danger,
@@ -1152,7 +1129,6 @@
   border-color: #982525;
   color: #fff;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline,
@@ -1165,7 +1141,6 @@
   border-color: #585858;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
   color: #fff;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline.e-primary,
@@ -1178,7 +1153,6 @@
   border-color: #0058bd;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
   color: #fff;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline.e-success,
@@ -1191,7 +1165,6 @@
   border-color: #265e28;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
   color: #fff;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline.e-info,
@@ -1204,7 +1177,6 @@
   border-color: #175b66;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
   color: #fff;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline.e-warning,
@@ -1217,7 +1189,6 @@
   border-color: #ab6a05;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
   color: #000;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:active.e-outline.e-danger,
@@ -1230,7 +1201,6 @@
   border-color: #982525;
   box-shadow: inset 0 4px 5px rgba(26, 26, 26, 0.4);
   color: #fff;
-  box-shadow: none;
 }
 
 .e-btn-group .e-btn:disabled,

package/styles/bootstrap.css

@@ -1017,9 +1017,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline,
 .e-css.e-btn-group .e-btn:focus.e-outline,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline {
-  background-color: #e6e6e6;
-  border-color: #8c8c8c;
-  color: #333;
   box-shadow: none;
   box-shadow: none;
 }
@@ -1028,9 +1025,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-primary,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-primary,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-primary {
-  background-color: #21527d;
-  border-color: #0c1d2c;
-  color: #fff;
   box-shadow: none;
 }
 
@@ -1038,9 +1032,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-success,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-success,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-success {
-  background-color: #124a1f;
-  border-color: black;
-  color: #fff;
   box-shadow: none;
 }
 
@@ -1048,9 +1039,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-info,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-info,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-info {
-  background-color: #104b5d;
-  border-color: #010406;
-  color: #fff;
   box-shadow: none;
 }
 
@@ -1058,9 +1046,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-warning,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-warning,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-warning {
-  background-color: #613b05;
-  border-color: black;
-  color: #fff;
   box-shadow: none;
 }
 
@@ -1068,9 +1053,6 @@
 .e-btn-group input:focus + label.e-btn.e-outline.e-danger,
 .e-css.e-btn-group .e-btn:focus.e-outline.e-danger,
 .e-css.e-btn-group input:focus + label.e-btn.e-outline.e-danger {
-  background-color: #a51c2a;
-  border-color: #4e0d14;
-  color: #fff;
   box-shadow: none;
 }
 
@@ -1120,8 +1102,8 @@
 .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;
-  border-color: #082831;
   color: #fff;
+  border-color: #082831;
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 }