errilaz/98se.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add title-bar restore icon (#83)

Browse source
This commit is contained in:
Juan Garay 2020-05-17 16:15:53 -03:00 • committed by GitHub
parent 5803325c95
commit 5fcf41146e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

19
docs/index.html.ejs
View file

@ -532,9 +532,9 @@
<p> <p>
We make use of <code>aria-label</code> to render the Close button, to let We make use of <code>aria-label</code> to render the Close button, to let
assistive technologies know the intent of this button. You may also use assistive technologies know the intent of this button. You may also use
"Minimize" and "Maximize" like so: "Minimize", "Maximize", "Restore" and "Help" like so:
</p> </p>
<%- example(` <%- example(`
<div class="title-bar"> <div class="title-bar">
<div class="title-bar-text">A Title Bar</div> <div class="title-bar-text">A Title Bar</div>
@ -545,7 +545,18 @@
</div> </div>
</div> </div>
<br> <br />
<div class="title-bar">
<div class="title-bar-text">A Maximized Title Bar</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Restore"></button>
<button aria-label="Close"></button>
</div>
</div>
<br />
<div class="title-bar"> <div class="title-bar">
<div class="title-bar-text">A Helpful Bar</div> <div class="title-bar-text">A Helpful Bar</div>
@ -553,7 +564,7 @@
<button aria-label="Help"></button> <button aria-label="Help"></button>
<button aria-label="Close"></button> <button aria-label="Close"></button>
</div> </div>
</div> </div>
`) %> `) %>
<p> <p>
You can make a title bar "inactive" by adding <code>inactive</code> class, You can make a title bar "inactive" by adding <code>inactive</code> class,

10
icon/restore.svg Normal file
View file

@ -0,0 +1,10 @@
<svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="2" width="6" height="2" fill="black"/>
<rect x="7" y="2" width="1" height="4" fill="black"/>
<rect x="2" y="2" width="1" height="1" fill="black"/>
<rect x="6" y="5" width="1" height="1" fill="black"/>
<rect y="3" width="6" height="2" fill="black"/>
<rect x="5" y="5" width="1" height="4" fill="black"/>
<rect y="5" width="1" height="4" fill="black"/>
<rect x="1" y="8" width="4" height="1" fill="black"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 513 B

6
style.css
View file

@ -231,6 +231,12 @@ button::-moz-focus-inner {
background-position: top 2px left 3px; 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"] { .title-bar-controls button[aria-label="Help"] {
background-image: svg-load("./icon/help.svg"); background-image: svg-load("./icon/help.svg");
background-repeat: no-repeat; background-repeat: no-repeat;