Remove tab.flash (use custom class instead)

demo/electron-tabs.html

@@ -13,7 +13,7 @@
       background-color: #327BB1;
     }
     .my-custom-tab {
-      color: red;
+      color: #d135d1;
       font-style: italic;
       font-weight: bold;
     }
@@ -49,15 +49,7 @@
   });
 
   tabGroup.addTab({
-    title: "Flashed Tab",
+    title: "My Custom Tab",
-    src: "page.html",
-    ready: function(tab) {
-      tab.flash();
-    }
-  });
-
-  tabGroup.addTab({
-    title: "My Custom Class",
     src: "page.html",
     ready: function(tab) {
       tab.element.classList.add("my-custom-tab");

dist/electron-tabs.d.ts

@@ -89,8 +89,6 @@ export class Tab extends EventTarget {
     activate(): this;
     show(flag?: boolean): this;
     hide(): this;
-    flash(flag?: boolean): this;
-    unflash(): this;
     hasClass(classname: string): boolean;
     close(force: boolean): void;
 }

dist/electron-tabs.js

@@ -2499,7 +2499,7 @@ var $64afbd09cd65a300$export$2e2bcd8739ae039 = $64afbd09cd65a300$export$31b3ca70
 
 
 var $0648b347057451f2$exports = {};
-$0648b347057451f2$exports = ":host {\n  --tabgroup-background: #e7eaed;\n  --tab-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  --tab-font-size: 13px;\n  --tab-background: #e7eaed;\n  --tab-color: #696a6c;\n  --tab-border-color: #dadce0;\n  --tab-transition: background-color 200ms ease-out, color 200ms ease-out;\n  --tab-cursor: pointer;\n  --tab-active-color: currentcolor;\n  --tab-active-background: #fff;\n  --tag-hover-color: currentcolor;\n  --tag-hover-background: #f1f3f4;\n  --tab-flash-color: #696a6c;\n  --tab-flash-background: #fff3aa;\n  --tab-flash-hover-color: #696a6c;\n  --tab-flash-hover-background: #ffe325;\n  --button-font-size: 15px;\n  --button-background: none;\n  --button-color: #696a6c;\n  --button-hover-background: #dadce0;\n  --button-hover-color: #383a3e;\n  --button-border-radius: 50%;\n  --button-cursor: pointer;\n  --badge-background: #383a3e;\n  --badge-color: #fff;\n}\n\nwebview {\n  visibility: hidden;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n}\n\nwebview.visible {\n  visibility: visible;\n}\n\n.etabs {\n  font-family: var(--tab-font-family);\n  text-rendering: optimizelegibility;\n  font-feature-settings: \"liga\", \"clig\", \"kern\";\n}\n\n.nav {\n  background: var(--tabgroup-background);\n  box-shadow: inset 0 -1px var(--tab-border-color);\n  border-top: 1px solid var(--tab-border-color);\n  font-size: var(--tab-font-size);\n  width: 100%;\n  height: 32px;\n  cursor: default;\n  -webkit-user-select: none;\n  user-select: none;\n  display: none;\n}\n\n.nav.visible {\n  display: flex;\n}\n\n.tabs {\n  height: 100%;\n}\n\n.tab {\n  background: var(--tab-background);\n  box-shadow: inset 0 -1px var(--tab-border-color);\n  color: var(--tab-color);\n  cursor: var(--tab-cursor);\n  font-size: var(--tab-font-size);\n  transition: var(--tab-transition);\n  box-sizing: border-box;\n  height: 100%;\n  align-items: center;\n  padding: 5px 9px;\n  display: none;\n  position: relative;\n}\n\n.tab:first-child {\n  border-left: none;\n}\n\n.tab.visible {\n  display: inline-flex;\n}\n\n.tab.active {\n  color: var(--tab-active-color);\n  background: var(--tab-active-background);\n  border-left: 1px solid var(--tab-border-color);\n  border-right: 1px solid var(--tab-border-color);\n  box-shadow: none;\n  padding-left: 8px;\n  padding-right: 8px;\n}\n\n.tab.active:last-child {\n  border-right: none;\n}\n\n.tab.flash {\n  background: var(--tab-flash-background);\n  color: var(--tab-flash-color);\n}\n\n.tab.tab.flash:hover {\n  background: var(--tab-flash-hover-background);\n  color: var(--tab-flash-hover-color);\n}\n\n.tab.visible:not(.active) + .tab.visible:not(.active) {\n  border-left: 1px solid var(--tab-border-color);\n  padding-left: 8px;\n}\n\n.tab:not(.active):hover {\n  background: var(--tab-hover-background);\n  color: var(--tab-hover-color);\n}\n\n.tab-badge {\n  background: var(--badge-background);\n  color: var(--badge-color);\n  text-align: center;\n  border-radius: 5px;\n  margin-left: 5px;\n  padding: 1px 4px;\n  font-size: 8px;\n  font-weight: bold;\n  line-height: 1.2;\n}\n\n.tab-badge.hidden {\n  display: none;\n}\n\n.tab-icon {\n  height: 16px;\n  display: inline-block;\n}\n\n.tab-icon img {\n  max-width: 16px;\n  max-height: 16px;\n}\n\n.tab-title, .tab-close {\n  margin-left: 10px;\n  display: inline-block;\n}\n\n.tab-close button {\n  background: var(--button-background);\n  border-radius: var(--button-border-radius);\n  color: var(--button-color);\n  cursor: var(--button-cursor);\n  font-size: var(--button-font-size);\n  width: 20px;\n  height: 20px;\n  text-align: center;\n  border: none;\n  padding: 1px 0 0;\n  display: inline-block;\n}\n\n.tab-close button:hover {\n  color: var(--button-hover-color);\n  background: var(--button-hover-background);\n}\n\n.buttons {\n  border-left: 1px solid var(--tab-border-color);\n  padding: 5px;\n  display: flex;\n}\n\n.buttons button {\n  color: var(--button-color);\n  background: var(--button-background);\n  border-radius: var(--button-border-radius);\n  cursor: var(--button-cursor);\n  font-size: var(--button-font-size);\n  width: 20px;\n  height: 20px;\n  text-align: center;\n  border: none;\n  margin: 0;\n  padding: 1px 0 0;\n  font-family: inherit;\n  line-height: 1;\n  display: block;\n}\n\n.buttons button:hover {\n  color: var(--button-hover-color);\n  background: var(--button-hover-background);\n}\n\n.views {\n  height: calc(100vh - 33px);\n  position: relative;\n}\n\n";
+$0648b347057451f2$exports = ":host {\n  --tabgroup-background: #e7eaed;\n  --tab-font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  --tab-font-size: 13px;\n  --tab-background: #e7eaed;\n  --tab-color: #696a6c;\n  --tab-border-color: #dadce0;\n  --tab-transition: background-color 200ms ease-out, color 200ms ease-out;\n  --tab-cursor: pointer;\n  --tab-active-color: currentcolor;\n  --tab-active-background: #fff;\n  --tag-hover-color: currentcolor;\n  --tag-hover-background: #f1f3f4;\n  --button-font-size: 15px;\n  --button-background: none;\n  --button-color: #696a6c;\n  --button-hover-background: #dadce0;\n  --button-hover-color: #383a3e;\n  --button-border-radius: 50%;\n  --button-cursor: pointer;\n  --badge-background: #383a3e;\n  --badge-color: #fff;\n}\n\nwebview {\n  visibility: hidden;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n}\n\nwebview.visible {\n  visibility: visible;\n}\n\n.etabs {\n  font-family: var(--tab-font-family);\n  text-rendering: optimizelegibility;\n  font-feature-settings: \"liga\", \"clig\", \"kern\";\n}\n\n.nav {\n  background: var(--tabgroup-background);\n  box-shadow: inset 0 -1px var(--tab-border-color);\n  border-top: 1px solid var(--tab-border-color);\n  font-size: var(--tab-font-size);\n  width: 100%;\n  height: 32px;\n  cursor: default;\n  -webkit-user-select: none;\n  user-select: none;\n  display: none;\n}\n\n.nav.visible {\n  display: flex;\n}\n\n.tabs {\n  height: 100%;\n}\n\n.tab {\n  background: var(--tab-background);\n  box-shadow: inset 0 -1px var(--tab-border-color);\n  color: var(--tab-color);\n  cursor: var(--tab-cursor);\n  font-size: var(--tab-font-size);\n  transition: var(--tab-transition);\n  box-sizing: border-box;\n  height: 100%;\n  align-items: center;\n  padding: 5px 9px;\n  display: none;\n  position: relative;\n}\n\n.tab:first-child {\n  border-left: none;\n}\n\n.tab.visible {\n  display: inline-flex;\n}\n\n.tab.active {\n  color: var(--tab-active-color);\n  background: var(--tab-active-background);\n  border-left: 1px solid var(--tab-border-color);\n  border-right: 1px solid var(--tab-border-color);\n  box-shadow: none;\n  padding-left: 8px;\n  padding-right: 8px;\n}\n\n.tab.active:last-child {\n  border-right: none;\n}\n\n.tab.visible:not(.active) + .tab.visible:not(.active) {\n  border-left: 1px solid var(--tab-border-color);\n  padding-left: 8px;\n}\n\n.tab:not(.active):hover {\n  background: var(--tab-hover-background);\n  color: var(--tab-hover-color);\n}\n\n.tab-badge {\n  background: var(--badge-background);\n  color: var(--badge-color);\n  text-align: center;\n  border-radius: 5px;\n  margin-left: 5px;\n  padding: 1px 4px;\n  font-size: 8px;\n  font-weight: bold;\n  line-height: 1.2;\n}\n\n.tab-badge.hidden {\n  display: none;\n}\n\n.tab-icon {\n  height: 16px;\n  display: inline-block;\n}\n\n.tab-icon img {\n  max-width: 16px;\n  max-height: 16px;\n}\n\n.tab-title, .tab-close {\n  margin-left: 10px;\n  display: inline-block;\n}\n\n.tab-close button {\n  background: var(--button-background);\n  border-radius: var(--button-border-radius);\n  color: var(--button-color);\n  cursor: var(--button-cursor);\n  font-size: var(--button-font-size);\n  width: 20px;\n  height: 20px;\n  text-align: center;\n  border: none;\n  padding: 1px 0 0;\n  display: inline-block;\n}\n\n.tab-close button:hover {\n  color: var(--button-hover-color);\n  background: var(--button-hover-background);\n}\n\n.buttons {\n  border-left: 1px solid var(--tab-border-color);\n  padding: 5px;\n  display: flex;\n}\n\n.buttons button {\n  color: var(--button-color);\n  background: var(--button-background);\n  border-radius: var(--button-border-radius);\n  cursor: var(--button-cursor);\n  font-size: var(--button-font-size);\n  width: 20px;\n  height: 20px;\n  text-align: center;\n  border: none;\n  margin: 0;\n  padding: 1px 0 0;\n  font-family: inherit;\n  line-height: 1;\n  display: block;\n}\n\n.buttons button:hover {\n  color: var(--button-hover-color);\n  background: var(--button-hover-background);\n}\n\n.views {\n  height: calc(100vh - 33px);\n  position: relative;\n}\n\n";
 
 
 if (!document) throw Error("electron-tabs module must be called in renderer process");
@@ -2880,20 +2880,6 @@ class $eda442ba39f881a8$var$Tab extends EventTarget {
     hide() {
         return this.show(false);
     }
-    flash(flag = true) {
-        if (this.isClosed) return;
-        if (flag !== false) {
-            this.element.classList.add("flash");
-            this.emit("flash", this);
-        } else {
-            this.element.classList.remove("flash");
-            this.emit("unflash", this);
-        }
-        return this;
-    }
-    unflash() {
-        return this.flash(false);
-    }
     hasClass(classname) {
         return this.element.classList.contains(classname);
     }

src/index.ts

@@ -534,22 +534,6 @@ class Tab extends EventTarget {
     return this.show(false);
   }
 
-  flash(flag = true) {
-    if (this.isClosed) return;
-    if (flag !== false) {
-      this.element.classList.add("flash");
-      this.emit("flash", this);
-    } else {
-      this.element.classList.remove("flash");
-      this.emit("unflash", this);
-    }
-    return this;
-  }
-
-  unflash() {
-    return this.flash(false);
-  }
-
   hasClass(classname: string) {
     return this.element.classList.contains(classname);
   }

src/style.css

@@ -14,10 +14,6 @@
   --tab-active-background: #FFF;
   --tag-hover-color: currentcolor;
   --tag-hover-background: #F1F3F4;
-  --tab-flash-color: #696A6C;
-  --tab-flash-background: #fff3aa;
-  --tab-flash-hover-color: #696A6C;
-  --tab-flash-hover-background: #ffe325;
   --button-font-size: 15px;
   --button-background: none;
   --button-color: #696A6C;
@@ -107,16 +103,6 @@ webview.visible {
   border-right: none;
 }
 
-.tab.flash {
-  background: var(--tab-flash-background);
-  color: var(--tab-flash-color);
-}
-
-.tab.tab.flash:hover {
-  background: var(--tab-flash-hover-background);
-  color: var(--tab-flash-hover-color);
-}
-
 .tab.visible:not(.active)+.tab.visible:not(.active) {
 	border-left: 1px solid var(--tab-border-color);
 	padding-left: 8px;