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>
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
"Minimize" and "Maximize" like so:
"Minimize", "Maximize", "Restore" and "Help" like so:
</p>
<%- example(`
<div class="title-bar">
<div class="title-bar-text">A Title Bar</div>
@ -545,7 +545,18 @@
</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-text">A Helpful Bar</div>
@ -553,7 +564,7 @@
<button aria-label="Help"></button>
<button aria-label="Close"></button>
</div>
</div>
</div>
`) %>
<p>
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;
}
.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;