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

43
docs/index.html.ejs
View File

@@ -613,11 +613,49 @@
</div>
</div>
`) %>
<p>
Maximize buttons can be disabled, useful when making a window appear as if it cannot be maximized.
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>
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">
@@ -626,7 +664,8 @@
<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.