mirror_css/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2025-08-31 01:29:58 +02:00
Code Issues Releases Wiki Activity

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
parent 1710cbecd3 ec61a0d596
commit 1f2e3db94e
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");