From dcdb5c71e9931a61136fa4b161dc3e4af2be62b0 Mon Sep 17 00:00:00 2001 From: Daniel Dunn Date: Mon, 13 Nov 2023 22:53:56 -0700 Subject: [PATCH] Embetter the stacked forms --- README.md | 14 +++++- css/barrel.css | 117 +++++++++++++++++++++++++++++-------------------- index.html | 20 +++++++-- 3 files changed, 99 insertions(+), 52 deletions(-) diff --git a/README.md b/README.md index e3de4a5..73d4e18 100644 --- a/README.md +++ b/README.md @@ -49,10 +49,14 @@ Levels of badness that should make text red and such. ## Components -### .stacked-form +### form.stacked-form A form where each element is stacked vertically. All inputs should be inside a -label. To group multiple inputs, Put them in a p, div, or section. +label. To group multiple inputs in one row, Put them in a p or div. + +Each row in a stacked form likes to be as wide as possible, you may want to apply a width to the whole form like w-sm-double, center it with h-center, and use the border class for the best look. + +You can use fieldsets too. ### .window @@ -64,6 +68,8 @@ element. A horizontal bar of items that may contain p, a, button, input, label, input inside label, select, and headings. May be located anywhere. Themes will usually join all the items together. It is a flex element that reflows. +Inputs and meters should be inside of labels. + ### .card A div styled like a typical UI card. May contain a header and a footer. Should not contain text directly because it has no padding. @@ -103,6 +109,10 @@ Round the corners with the default global border-radius. ### .undecorated Remove borders, backgrounds, shadows, and backdrop filters. +### .border + +Puts a border on the element, with the usual width, color, and radius. + ### .flex-row Makes a class into a flex container. It will wrap, and have row orientation with margin between elements. The theme is allowed to do whatever else it wants here to make items look nice, it assumes you're doing something diff --git a/css/barrel.css b/css/barrel.css index 1f30595..62e3429 100644 --- a/css/barrel.css +++ b/css/barrel.css @@ -342,7 +342,7 @@ p { /*Stack labels on the form elements*/ -label>:is(input, select, button, div) { +label>:is(input:not(input[type=radio], input[type=checkbox]), select, button, div) { display: block; } @@ -352,12 +352,16 @@ label:has(*) { text-align: start; } + + label { min-width: max-content; padding-inline-start: var(--padding); - padding-inline-end: var(--padding); - /*If it ever is a flex, keep the inputs near the side*/ - place-content: space-between; + + &>input[type=checkbox]:first-child, + &>input[type=radio]:first-child { + margin-inline-end: var(--padding); + } } span { @@ -371,10 +375,10 @@ p:empty { input[type=checkbox] { - min-width: 2em; + min-width: var(--control-height); + height: var(--control-height); } - dialog { position: fixed; top: 50%; @@ -422,7 +426,7 @@ button { button:active, a:active, -input[type='submit']:active { +input:is([type='submit'], [type='button']):active { background: var(--convex-item-active-bg) !important; box-shadow: var(--concave-item-box-shadow) !important; color: var(--control-fg); @@ -483,7 +487,7 @@ select { button, .button, -input[type='submit'] { +input:is([type='submit'], [type='button']) { background: var(--convex-item-bg); text-decoration: none; border: var(--control-border-width) solid var(--control-border-color); @@ -492,7 +496,7 @@ input[type='submit'] { display: inline-block; } -input:not([type='submit']):not([type='range']), +input:not([type='submit'], [type='range'], [type='checkbox'], [type="radio"]), select { background: var(--concave-item-bg); box-shadow: var(--concave-item-box-shadow); @@ -506,7 +510,7 @@ select { -input, +input:not([type='checkbox'], [type="radio"]), textarea { border: var(--border-width) solid var(--control-border-color); box-shadow: var(--concave-item-box-shadow); @@ -519,6 +523,10 @@ textarea { font-size: var(--font-size); } +fieldset { + border: var(--border-width) solid var(--control-border-color); + border-radius: var(--border-radius); +} /*Border radius looks bad if it's smashed right up close to containing box and not the same radius*/ header>* { @@ -976,12 +984,12 @@ header:not(.undecorated) .tool-bar { & label:has(*) { display: inline-block; - width: fit-content; text-align: start; } - &>* { + &>*, + & fieldset>* { flex-basis: 90%; margin-block-end: var(--padding); margin-block-start: 0px; @@ -995,6 +1003,7 @@ header:not(.undecorated) .tool-bar { flex-wrap: wrap; width: calc(100% - calc(var(--padding) * 2)); padding: 0px; + gap: var(--padding); &>:first-child { margin-inline-start: 0px; @@ -1002,24 +1011,29 @@ header:not(.undecorated) .tool-bar { } & * { - width: fit-content; + width: auto; } & label { + width: auto; display: flex; flex-direction: column; flex-grow: 1; padding: 0px; - margin-inline-start: var(--padding); - &>:is(input, select) { + &>:is(input:not(input[type=radio], input[type=checkbox]), select) { width: 100%; + max-width: 100%; } } - & :is(input, select, label) { - max-width: calc(100% - calc(var(--padding) * 2)) + & label:has(input[type=radio], input[type=checkbox]) { + flex-direction: row; + } + + & :is(input:not([type='checkbox'], [type="radio"]), select, label) { + min-width: 6em; } } @@ -1444,29 +1458,6 @@ A little smaller in flex to allow for expansion or fitting lots on a row*/ /*Simple utilities */ -.stacked-form { - display: flex; - flex-direction: column; - -} - -.stacked-form>* { - flex: 1 1 auto; - flex-basis: fit-content; - margin-block-end: var(--gap); -} - -.stacked-form>is(p, div, section) { - display: flex; - flex-direction: row; - flex-wrap: wrap; - width: 100%; -} - -.stacked-form label { - width: fit-content; -} - .round-feathered { mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.1) 67%, rgba(0, 0, 0, 0) 71%); -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.1) 67%, rgba(0, 0, 0, 0) 71%); @@ -1861,7 +1852,7 @@ footer.padding { } } - & :is(meter, a, .button, button) { + & :is(a, .button, button) { width: fit-content; } @@ -1891,13 +1882,17 @@ footer.padding { background: var(--convex-item-bg); } - & meter { + & meter, + & input[type=range] { min-height: 100%; flex-grow: 25; + width: 4em; + flex-basis: 4em; } & input[type=range] { - flex-grow: 35; + flex-basis: 4em; + flex-grow: 20; background: var(--concave-item-bg); } @@ -1924,6 +1919,10 @@ footer.padding { flex-grow: 50; } + &:has(meter) { + flex-grow: 10; + } + &>input { background-color: var(--alt-control-bg); flex-grow: 5; @@ -1947,8 +1946,6 @@ footer.padding { border: none; } - - } @@ -1997,6 +1994,18 @@ footer.padding { border: var(--tool-bar-element-border); } + & label { + + /*Label BG should match element bg*/ + &:has(input[type="range"]) { + background: var(--concave-item-bg); + } + + &>input[type="range"] { + background: none; + } + } + } @@ -2204,7 +2213,8 @@ button, a, input, select, -tr { +tr, +label { transition: color 0.2s ease, background 0.2s ease; } @@ -2218,7 +2228,7 @@ tr { .tool-bar>:hover, .tool-bar>a:hover, input:not([type='submit']):not([type='range']):hover, - header:not(.undecorated)>:only-child :is(button, .button, input[type='submit']):hover, + header:not(.undecorated)>:only-child :is(button, .button, input:is([type='submit'], [type='button'])):hover, header:not(.undecorated)>.tool-bar:only-child :is(input, button, select, a):hover, input:hover, select:hover, @@ -2228,6 +2238,19 @@ tr { background-color: var(--hover-color) } + /*Non toolbsar things don't have a background normally*/ + .tool-bar input[type='range']:hover { + background-color: var(--hover-color); + } + + .tool-bar label:hover { + background-color: var(--hover-color); + } + + label:hover { + color: var(--accent-color); + } + } ::selection { diff --git a/index.html b/index.html index c085c06..101bcde 100644 --- a/index.html +++ b/index.html @@ -57,7 +57,8 @@

Help Text

The .stacked-form class

-
+

This form uses the stacked-form, border, h-center, and w-sm-double classes.

+ @@ -78,6 +79,19 @@

The .stacked-form class

+ +
+ Choose a side +

Fieldsets work

+ + + + + + + + +
@@ -97,8 +111,8 @@

Toolbars

Toolbar

- - + +

Cards