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

Add classes for generic usages of (status) field borders

Browse Source
This commit is contained in:
Frankie Robertson
2024-08-07 14:02:06 +03:00
parent ffa29f4cd9
commit 4674ef949f
2 changed files with 81 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
docs/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>
@@ -1073,6 +1074,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>