🚀 Improve app window button functionality

tterb · Oct 28, 2017 · 9070c8b · 9070c8b
1 parent 17670ed
commit 9070c8b
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 20 deletions.
diff --git a/css/style.css b/css/style.css
@@ -81,22 +81,38 @@ label {
     float: right; }
     #metacity .window-button img {
       display: inline-block;
-      width: 13px;
-      height: 13px;
-      margin: 2px 3px 2px 4px;
+      width: 20px;
+      height: auto;
+      padding: 2px 3px 2px 4px;
       opacity: 1;
       overflow: visible;
       background-size: cover;
-      transition: opacity 100ms ease-in-out; }
+      transition: opacity 200ms ease-in-out; }
+    #metacity .window-button .hover {
+      position: fixed;
+      top: 5px;
+      width: 20px;
+      height: auto;
+      padding: 2px 3px 2px 4px;
+      overflow: visible;
+      background-size: cover;
+      transition: opacity 200ms ease-in-out;
+      z-index: -1; }
     #metacity .window-button .active {
       position: fixed;
       top: 5px;
-      width: 13.25px;
-      height: 13.25px;
-      margin: 1px 3px 2px 4px;
+      width: 20px;
+      height: auto;
+      padding: 2px 3px 2px 4px;
       overflow: visible;
+      background-size: cover;
+      transition: opacity 200ms ease-in-out;
       z-index: -1; }
-    #metacity .window-button .inactive:hover {
+    #metacity .window-button:hover .inactive {
+      opacity: 0; }
+    #metacity .window-button:active .inactive {
+      opacity: 0; }
+    #metacity .window-button:active .hover {
       opacity: 0; }
   #metacity #close {
     margin-right: 9px;

diff --git a/css/style.scss b/css/style.scss
@@ -105,25 +105,48 @@ label {
     float: right;
     img {
       display: inline-block;
-      width: 13px;
-      height: 13px;
-      margin: 2px 3px 2px 4px;
+      width: 20px;
+      height: auto;
+      padding: 2px 3px 2px 4px;
       opacity: 1;
       overflow: visible;
       background-size: cover;
-      transition: opacity 100ms ease-in-out;
+      transition: opacity 200ms ease-in-out;
+    }
+    .hover {
+      position: fixed;
+      top: 5px;
+      width: 20px;
+      height: auto;
+      padding: 2px 3px 2px 4px;
+      overflow: visible;
+      background-size: cover;
+      transition: opacity 200ms ease-in-out;
+      z-index: -1;
     }
     .active {
       position: fixed;
       top: 5px;
-      width: 13.25px;
-      height: 13.25px;
-      margin: 1px 3px 2px 4px;
+      width: 20px;
+      height: auto;
+      padding: 2px 3px 2px 4px;
       overflow: visible;
+      background-size: cover;
+      transition: opacity 200ms ease-in-out;
       z-index: -1;
     }
-    .inactive:hover {
-      opacity: 0;
+    &:hover {
+      .inactive {
+        opacity: 0;
+      }
+    }
+    &:active {
+      .inactive {
+        opacity: 0;
+      }
+      .hover {
+        opacity: 0;
+      }
     }
   }
   #close {

diff --git a/index.html b/index.html
@@ -60,9 +60,9 @@
     <button id="menuButton" onclick="toggleToolbar()"><span class="mif-menu"></span></button>
   </div>
   <div id="metacity">
-    <button id="close" class="window-button" style="cursor: pointer;"><img class="active" src="img/buttons/close_active.png" alt="Close"/><img class="inactive" src="img/buttons/close.png" alt="Close"/></button>
-    <button id="maximize" class="window-button" style="cursor: pointer;"><img class="active" src="img/buttons/max_active.png" alt="Maximize" onclick="toggleMaximize();"/><img class="inactive" src="img/buttons/max.png" alt="Maximize" onclick="toggleMaximize();"/></button>
-    <button id="minimize" class="window-button" style="cursor: pointer;"><img class="active" src="img/buttons/min_active.png" alt="Minimize"/><img class="inactive" src="img/buttons/min.png" alt="Minimize"/></button>
+    <button id="close" class="window-button" style="cursor: pointer;"><img class="active" src="img/buttons/close_active.png" alt="Close"/><img class="hover" src="img/buttons/close_hover.png" alt="Close"/><img class="inactive" src="img/buttons/close.png" alt="Close"/></button>
+    <button id="maximize" class="window-button" style="cursor: pointer;"><img class="active" src="img/buttons/max_active.png" alt="Maximize" onclick="toggleMaximize();"/><img class="hover" src="img/buttons/max_hover.png" alt="Maximize"/><img class="inactive" src="img/buttons/max.png" alt="Maximize" onclick="toggleMaximize();"/></button>
+    <button id="minimize" class="window-button" style="cursor: pointer;"><img class="active" src="img/buttons/min_active.png" alt="Minimize"/><img class="hover" src="img/buttons/min_hover.png" alt="Minimize"/><img class="inactive" src="img/buttons/min.png" alt="Minimize"/></button>
   </div>
   <div id="appMenu" class="hidden slideDownIn animated">
     <!-- File -->