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

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

Browse source 
Add `disabled` styling for Maximize title bar buttons
This commit is contained in:
Vincent Langlois 2024-01-27 21:16:40 -05:00 • committed by GitHub
commit 1f2e3db94e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 27 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

16
docs/index.html.ejs
View file

@ -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.

4
icon/maximize-disabled.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 319 B

7
style.css
View file

@ -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");