mirror_css/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2025-09-08 21:20:50 +02:00
Code Issues Releases Wiki Activity

Merge pull request #204 from frankier/add-field-borders

Browse Source 
Add classes for generic usages of (status) field borders
This commit is contained in:
Juani Garay
2024-11-30 12:42:48 -03:00
committed by GitHub
parent 880ac4ffa0 4674ef949f
commit dc3b4488d6
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>
@@ -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>

21
style.css
View File

@@ -73,6 +73,7 @@
--border-field: inset -1px -1px var(--button-highlight),
inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face),
inset 2px 2px var(--window-frame);
--border-status-field: inset -1px -1px var(--button-face), inset 1px 1px var(--button-shadow);
/* Tabs */
--border-tab: inset -1px 0 var(--window-frame),
@@ -320,7 +321,7 @@ input[type="reset"]:disabled,
}
.status-bar-field {
box-shadow: inset -1px -1px #dfdfdf, inset 1px 1px #808080;
box-shadow: var(--border-status-field);
flex-grow: 1;
padding: 2px 3px;
margin: 0;
@@ -973,3 +974,21 @@ table > tbody > tr > * {
background-repeat: repeat;
background-size: 18px 100%;
}
.field-border {
background: var(--button-highlight);
box-shadow: var(--border-field);
padding: 2px;
}
.field-border-disabled {
background: var(--surface);
box-shadow: var(--border-field);
padding: 2px;
}
.status-field-border {
background: var(--surface);
box-shadow: var(--border-status-field);
padding: 1px;
}