Merge pull request #190 from vtlanglois/add-disabled-maximize-button-styling

Add `disabled` styling for Maximize title bar buttons

docs/index.html.ejs

@@ -650,6 +650,22 @@
             </div>
           </div>
         `) %>
+
+    <p>
+        Maximize buttons can be disabled, useful when making a window appear as if it cannot be maximized.
+    </p>
+
+    <%- example(`
+          <div class="title-bar">
+            <div class="title-bar-text">A Title Bar with Maximize disabled</div>
+            <div class="title-bar-controls">
+              <button aria-label="Minimize"></button>
+              <button aria-label="Maximize" disabled></button>
+              <button aria-label="Close"></button>
+            </div>
+          </div>
+      `) %>
+
 		<p>
           You can make a title bar "inactive" by adding <code>inactive</code> class,
 		  useful when making more than one window.

icon/maximize-disabled.svg

@@ -0,0 +1,4 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M10 1H1V3V9V10H2H9H10V9V3V1ZM9 3H2V9H9V3Z" fill="white"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M9 0H0V2V8V9H1H8H9V8V2V0ZM8 2H1V8H8V2Z" fill="#808080"/>
+</svg>

style.css

@@ -267,6 +267,13 @@ input[type="reset"]:disabled,
   background-position: top 2px left 3px;
 }
 
+.title-bar-controls button[aria-label="Maximize"]:disabled,
+.title-bar-controls button[aria-label].maximize:disabled {
+  background-image: svg-load("./icon/maximize-disabled.svg");
+  background-repeat: no-repeat;
+  background-position: top 2px left 3px;
+}
+
 .title-bar-controls button[aria-label="Restore"],
 .title-bar-controls button[aria-label].restore {
   background-image: svg-load("./icon/restore.svg");