fieldset

docs/index.html

@@ -32,18 +32,25 @@
 
       <fieldset>
         <legend>I think it's</legend>
-        <input type="radio" name="answer" value="cool">
-        <label for="male">Cool</label>
-        <input type="radio" name="answer" value="meh">
-        <label for="female">Meh</label>
+        <div class="field-row">
+          <input id="cool" type="radio" name="answer" value="cool">
+          <label for="cool">Cool</label>
+        </div>
 
-        <label for="reason">Reason:</label>
-        <select>
-          <option>Nostalgia</option>
-          <option>It looks sharp</option>
-          <option>It's confusing</option>
-          <option>It looks dated</option>
-        </select>
+        <div class="field-row">
+          <input id="meh" type="radio" name="answer" value="meh">
+          <label for="meh">Meh</label>
+        </div>
+
+        <div class="field-row-stacked">
+          <label for="reason">Reason:</label>
+          <select>
+            <option>Nostalgia</option>
+            <option>It looks sharp</option>
+            <option>It's confusing</option>
+            <option>It looks dated</option>
+          </select>
+        </div>
       </fieldset>
 
       <section class="align-right">

style.css

@@ -8,7 +8,12 @@
   --dialog-blue: #000080;
   --dialog-blue-light: #1084d0;
 
+  /* Spacing */
+  --element-spacing: 8px;
+  --grouped-element-spacing: 4px;
+
   /* Borders */
+  --border-width: 1px;
   --border-raised-outer: inset -1px -1px var(--window-frame),
     inset 1px 1px var(--button-highlight);
   --border-raised-inner: inset -2px -2px var(--button-shadow),
@@ -51,10 +56,14 @@ button:focus {
   outline-offset: -4px;
 }
 
+:disabled {
+  color: var(--button-shadow);
+  text-shadow: 1px 1px 0 var(--button-highlight);
+}
+
 .dialog {
   box-shadow: var(--border-raised-outer), var(--border-raised-inner);
   background: var(--surface);
-  padding: 1px;
 }
 
 .menubar {
@@ -113,22 +122,50 @@ button:focus {
 }
 
 .dialog-body {
-  margin: 12px 8px 8px;
+  margin: var(--element-spacing);
 }
 
 .dialog-body > * + * {
-  margin-top: 8px;
+  margin-top: var(--element-spacing);
 }
 
 section.align-right {
   text-align: right;
 }
 
-section button + button {
-  margin-left: 4px;
+section * + * {
+  margin-left: var(--grouped-element-spacing);
 }
 
-:disabled {
-  color: var(--button-shadow);
-  text-shadow: 1px 1px 0 var(--button-highlight);
+fieldset {
+  border: none;
+  box-shadow: var(--border-sunken-outer), var(--border-raised-inner);
+  padding: calc(2 * var(--border-width) + var(--element-spacing));
+  padding-block-start: var(--grouped-element-spacing);
+}
+
+legend {
+  background: var(--surface);
+}
+
+.field-row {
+  display: flex;
+  align-items: center;
+}
+
+[class^="field-row"] + [class^="field-row"] {
+  margin-top: var(--grouped-element-spacing);
+}
+
+.field-row * + * {
+  margin-left: var(--grouped-element-spacing);
+}
+
+.field-row-stacked {
+  display: flex;
+  flex-direction: column;
+}
+
+.field-row-stacked * + * {
+  margin-top: var(--grouped-element-spacing);
 }