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

Updates

Browse Source
This commit is contained in:
Jordan Scales
2025-09-07 09:29:47 -04:00
parent 92f191ce5e
commit 48cbab98ff
4 changed files with 142 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
98.css
View File

File diff suppressed because one or more lines are too long

2
98.css.map
View File

File diff suppressed because one or more lines are too long

79
index.html
View File

@@ -44,6 +44,7 @@
<li><a href="#tabs">Tabs</a></li>
<li><a href="#table-view">TableView</a></li>
<li><a href="#progress-indicator">Progress Indicator</a></li>
<li><a href="#field-borders">Field borders</a></li>
</ul>
</li>
<li><a href="#issues-contributing-etc">Issues, Contributing, etc.</a></li>
@@ -1571,6 +1572,84 @@
</div>
</section>
<section class="component">
<h3 id="field-borders">Field borders</a></li></h3>
<div>
<blockquote>
Text boxes, check boxes, drop-down list boxes, spin boxes and list
boxes use the <em>field border style</em>. You can also use the style
for define the work area within a window. It uses the sunken outer and
sunken inner basic border styles.
For most controls, the interior of the field uses the button highlight
color. For text fields, such as text boxes and combo boxes, the
interior uses the button face color when the field is read-only or
disabled.
<footer>
&mdash; Microsoft Windows User Experience p. 421
</footer>
</blockquote>
<blockquote>
Status fields use the <em>status field border style</em>. This style
uses only the sunken outer basic border style. You use the status
field style in status bars and other read-only fields where the
content of the file can change dynamically.
<footer>
&mdash; Microsoft Windows User Experience p. 422
</footer>
</blockquote>
As mentioned in these guidelines, these styles are used in other
contexts than just form elements and status fields such as to indicate
work areas and dynamic content. For that reason, we provide three
classes for these generic usages, <code>field-border</code>,
<code>field-border-disabled</code>, and
<code>status-field-border</code>. These classes only define the border
and background color and minimal padding, so you will typically need to
at least provide some extra padding yourself.
<div class="example">
<div class="field-border" style="padding: 8px">
Work area
</div>
<details>
<summary>Show code</summary>
<pre><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;field-border&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;padding: 8px&quot;</span>&gt;</span>
Work area
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
</details>
</div>
<div class="example">
<div class="field-border-disabled" style="padding: 8px">
Disabled work area
</div>
<details>
<summary>Show code</summary>
<pre><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;field-border-disabled&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;padding: 8px&quot;</span>&gt;</span>
Disabled work area
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
</details>
</div>
<div class="example">
<div class="status-field-border" style="padding: 8px">
Dynamic content
</div>
<details>
<summary>Show code</summary>
<pre><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;status-field-border&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;padding: 8px&quot;</span>&gt;</span>
Dynamic content
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
</details>
</div>
</div>
</section>
<h2 id="issues-contributing-etc">Issues, Contributing, etc.</h2>
<p>

61
index.html.ejs
View File

@@ -44,6 +44,7 @@
<li><a href="#tabs">Tabs</a></li>
<li><a href="#table-view">TableView</a></li>
<li><a href="#progress-indicator">Progress Indicator</a></li>
<li><a href="#field-borders">Field borders</a></li>
</ul>
</li>
<li><a href="#issues-contributing-etc">Issues, Contributing, etc.</a></li>
@@ -1045,6 +1046,66 @@
</div>
</section>
<section class="component">
<h3 id="field-borders">Field borders</a></li></h3>
<div>
<blockquote>
Text boxes, check boxes, drop-down list boxes, spin boxes and list
boxes use the <em>field border style</em>. You can also use the style
for define the work area within a window. It uses the sunken outer and
sunken inner basic border styles.
For most controls, the interior of the field uses the button highlight
color. For text fields, such as text boxes and combo boxes, the
interior uses the button face color when the field is read-only or
disabled.
<footer>
&mdash; Microsoft Windows User Experience p. 421
</footer>
</blockquote>
<blockquote>
Status fields use the <em>status field border style</em>. This style
uses only the sunken outer basic border style. You use the status
field style in status bars and other read-only fields where the
content of the file can change dynamically.
<footer>
&mdash; Microsoft Windows User Experience p. 422
</footer>
</blockquote>
As mentioned in these guidelines, these styles are used in other
contexts than just form elements and status fields such as to indicate
work areas and dynamic content. For that reason, we provide three
classes for these generic usages, <code>field-border</code>,
<code>field-border-disabled</code>, and
<code>status-field-border</code>. These classes only define the border
and background color and minimal padding, so you will typically need to
at least provide some extra padding yourself.
<%- example(`
<div class="field-border" style="padding: 8px">
Work area
</div>
`) %>
<%- example(`
<div class="field-border-disabled" style="padding: 8px">
Disabled work area
</div>
`) %>
<%- example(`
<div class="status-field-border" style="padding: 8px">
Dynamic content
</div>
`) %>
</div>
</section>
<h2 id="issues-contributing-etc">Issues, Contributing, etc.</h2>
<p>