davejansen/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2026-05-05 06:01:22 +09:00
Code Issues Activity

Merge branch 'main' into add-disabled-maximize-button-styling

Browse Source
This commit is contained in:
Vincent Langlois
2024-01-27 21:06:12 -05:00
parent ab53e57a72 1710cbecd3
commit fdca6782f0
2 changed files with 51 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
docs/index.html.ejs
View File

@@ -613,6 +613,44 @@
</div> </div>
</div> </div>
`) %> `) %>
<p>
Each <code>aria-label</code> also has a corresponding styling class to render the title bar buttons,
to let the <code>aria-label</code> text be in other languages without causing rendering, accessibility, or localization issues.
</p>
<%- example(`
<div class="title-bar">
<div class="title-bar-text">A Title Bar using Button Styling Classes</div>
<div class="title-bar-controls">
<button aria-label="Any Text" class="minimize"></button>
<button aria-label="Any Text" class="maximize"></button>
<button aria-label="Any Text" class="close"></button>
</div>
</div>
<br />
<div class="title-bar">
<div class="title-bar-text">A Maximized Title Bar using Button Styling Classes</div>
<div class="title-bar-controls">
<button aria-label="Any Text" class="minimize"></button>
<button aria-label="Any Text" class="restore"></button>
<button aria-label="Any Text" class="close"></button>
</div>
</div>
<br />
<div class="title-bar">
<div class="title-bar-text">A Helpful Bar using Button Styling Classes</div>
<div class="title-bar-controls">
<button aria-label="Any Text" class="help"></button>
<button aria-label="Any Text" class="close"></button>
</div>
</div>
`) %>
<p> <p>
Maximize buttons can be disabled, useful when making a window appear as if it cannot be maximized. Maximize buttons can be disabled, useful when making a window appear as if it cannot be maximized.
</p> </p>
@@ -627,6 +665,7 @@
</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,
useful when making more than one window. useful when making more than one window.

17
style.css
View File

@@ -45,7 +45,6 @@
--checkbox-total-width: calc(var(--checkbox-total-width-precalc)); --checkbox-total-width: calc(var(--checkbox-total-width-precalc));
--checkbox-left: calc(-1 * var(--checkbox-total-width-precalc)); --checkbox-left: calc(-1 * var(--checkbox-total-width-precalc));
--checkmark-width: 7px; --checkmark-width: 7px;
--checkmark-top: 3px;
--checkmark-left: 3px; --checkmark-left: 3px;
/* Borders */ /* Borders */
@@ -254,13 +253,15 @@ input[type="reset"]:disabled,
outline: none; outline: none;
} }
.title-bar-controls button[aria-label="Minimize"] { .title-bar-controls button[aria-label="Minimize"],
.title-bar-controls button[aria-label].minimize {
background-image: svg-load("./icon/minimize.svg"); background-image: svg-load("./icon/minimize.svg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: bottom 3px left 4px; background-position: bottom 3px left 4px;
} }
.title-bar-controls button[aria-label="Maximize"] { .title-bar-controls button[aria-label="Maximize"],
.title-bar-controls button[aria-label].maximize {
background-image: svg-load("./icon/maximize.svg"); background-image: svg-load("./icon/maximize.svg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top 2px left 3px; background-position: top 2px left 3px;
@@ -272,19 +273,22 @@ input[type="reset"]:disabled,
background-position: top 2px left 3px; background-position: top 2px left 3px;
} }
.title-bar-controls button[aria-label="Restore"] { .title-bar-controls button[aria-label="Restore"],
.title-bar-controls button[aria-label].restore {
background-image: svg-load("./icon/restore.svg"); background-image: svg-load("./icon/restore.svg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top 2px left 3px; background-position: top 2px left 3px;
} }
.title-bar-controls button[aria-label="Help"] { .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;
background-position: top 2px left 5px; background-position: top 2px left 5px;
} }
.title-bar-controls button[aria-label="Close"] { .title-bar-controls button[aria-label="Close"],
.title-bar-controls button[aria-label].close {
margin-left: 2px; margin-left: 2px;
background-image: svg-load("./icon/close.svg"); background-image: svg-load("./icon/close.svg");
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -435,7 +439,6 @@ input[type="checkbox"]:checked + label::after {
width: var(--checkmark-width); width: var(--checkmark-width);
height: var(--checkmark-width); height: var(--checkmark-width);
position: absolute; position: absolute;
top: var(--checkmark-top);
left: calc( left: calc(
-1 * (var(--checkbox-total-width-precalc)) + var(--checkmark-left) -1 * (var(--checkbox-total-width-precalc)) + var(--checkmark-left)
); );