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

fieldset

Browse Source
This commit is contained in:
Jordan Scales
2020-04-17 13:42:17 -04:00
parent 120c7fef40
commit b464479c37
2 changed files with 63 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
docs/index.html
View File

@@ -32,11 +32,17 @@
<fieldset> <fieldset>
<legend>I think it's</legend> <legend>I think it's</legend>
<input type="radio" name="answer" value="cool"> <div class="field-row">
<label for="male">Cool</label> <input id="cool" type="radio" name="answer" value="cool">
<input type="radio" name="answer" value="meh"> <label for="cool">Cool</label>
<label for="female">Meh</label> </div>
<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> <label for="reason">Reason:</label>
<select> <select>
<option>Nostalgia</option> <option>Nostalgia</option>
@@ -44,6 +50,7 @@
<option>It's confusing</option> <option>It's confusing</option>
<option>It looks dated</option> <option>It looks dated</option>
</select> </select>
</div>
</fieldset> </fieldset>
<section class="align-right"> <section class="align-right">

53
style.css
View File

@@ -8,7 +8,12 @@
--dialog-blue: #000080; --dialog-blue: #000080;
--dialog-blue-light: #1084d0; --dialog-blue-light: #1084d0;
/* Spacing */
--element-spacing: 8px;
--grouped-element-spacing: 4px;
/* Borders */ /* Borders */
--border-width: 1px;
--border-raised-outer: inset -1px -1px var(--window-frame), --border-raised-outer: inset -1px -1px var(--window-frame),
inset 1px 1px var(--button-highlight); inset 1px 1px var(--button-highlight);
--border-raised-inner: inset -2px -2px var(--button-shadow), --border-raised-inner: inset -2px -2px var(--button-shadow),
@@ -51,10 +56,14 @@ button:focus {
outline-offset: -4px; outline-offset: -4px;
} }
:disabled {
color: var(--button-shadow);
text-shadow: 1px 1px 0 var(--button-highlight);
}
.dialog { .dialog {
box-shadow: var(--border-raised-outer), var(--border-raised-inner); box-shadow: var(--border-raised-outer), var(--border-raised-inner);
background: var(--surface); background: var(--surface);
padding: 1px;
} }
.menubar { .menubar {
@@ -113,22 +122,50 @@ button:focus {
} }
.dialog-body { .dialog-body {
margin: 12px 8px 8px; margin: var(--element-spacing);
} }
.dialog-body > * + * { .dialog-body > * + * {
margin-top: 8px; margin-top: var(--element-spacing);
} }
section.align-right { section.align-right {
text-align: right; text-align: right;
} }
section button + button { section * + * {
margin-left: 4px; margin-left: var(--grouped-element-spacing);
} }
:disabled { fieldset {
color: var(--button-shadow); border: none;
text-shadow: 1px 1px 0 var(--button-highlight); 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);
} }