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

Add classes for generic usages of (status) field borders

docs/index.html.ejs

@@ -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>

style.css

@@ -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;
+}