diff --git a/docs/index.html.ejs b/docs/index.html.ejs index bcc8872..96bd805 100644 --- a/docs/index.html.ejs +++ b/docs/index.html.ejs @@ -532,9 +532,9 @@

We make use of aria-label to render the Close button, to let assistive technologies know the intent of this button. You may also use - "Minimize" and "Maximize" like so: + "Minimize", "Maximize", "Restore" and "Help" like so:

- + <%- example(`
A Title Bar
@@ -545,7 +545,18 @@
-
+
+ +
+
A Maximized Title Bar
+
+ + + +
+
+ +
A Helpful Bar
@@ -553,7 +564,7 @@
- + `) %>

You can make a title bar "inactive" by adding inactive class, diff --git a/icon/restore.svg b/icon/restore.svg new file mode 100644 index 0000000..9d17f27 --- /dev/null +++ b/icon/restore.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/style.css b/style.css index 0efb4dc..cd0adbd 100644 --- a/style.css +++ b/style.css @@ -231,6 +231,12 @@ button::-moz-focus-inner { background-position: top 2px left 3px; } +.title-bar-controls button[aria-label="Restore"] { + background-image: svg-load("./icon/restore.svg"); + background-repeat: no-repeat; + background-position: top 2px left 3px; +} + .title-bar-controls button[aria-label="Help"] { background-image: svg-load("./icon/help.svg"); background-repeat: no-repeat;