You've already forked 98.css
mirror of
https://github.com/jdan/98.css.git
synced 2026-05-05 06:01:22 +09:00
Updates
This commit is contained in:
Jordan Scales
File diff suppressed because one or more lines are too long
51
index.html
51
index.html
@@ -712,9 +712,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>
|
||||
|
||||
|
||||
<div class="example">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">A Title Bar</div>
|
||||
@@ -725,7 +725,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>
|
||||
@@ -745,7 +756,18 @@
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">br</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">br</span> /></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-text"</span>></span>A Maximized Title Bar<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-controls"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Minimize"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Restore"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">br</span> /></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-text"</span>></span>A Helpful Bar<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
@@ -753,6 +775,27 @@
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Help"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
||||
</details>
|
||||
</div>
|
||||
<p>
|
||||
You can make a title bar "inactive" by adding <code>inactive</code> class,
|
||||
useful when making more than one window.
|
||||
</p>
|
||||
<div class="example">
|
||||
<div class="title-bar inactive">
|
||||
<div class="title-bar-text">An inactive title bar</div>
|
||||
<div class="title-bar-controls">
|
||||
<button aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<details>
|
||||
<summary>Show code</summary>
|
||||
<pre><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar inactive"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-text"</span>></span>An inactive title bar<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"title-bar-controls"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
@@ -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,6 +564,18 @@
|
||||
<button aria-label="Help"></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.
|
||||
</p>
|
||||
<%- example(`
|
||||
<div class="title-bar inactive">
|
||||
<div class="title-bar-text">An inactive title bar</div>
|
||||
<div class="title-bar-controls">
|
||||
<button aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
`) %>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user