From 44e5a55736c4ff99d404441936b055483ed9c42d Mon Sep 17 00:00:00 2001 From: kj_sh604 Date: Sat, 14 Feb 2026 12:39:43 -0500 Subject: fork: initial commit, derived from water.css (d950cbc) --- src/parts/_forms.css | 159 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 159 insertions(+) create mode 100644 src/parts/_forms.css (limited to 'src/parts/_forms.css') diff --git a/src/parts/_forms.css b/src/parts/_forms.css new file mode 100644 index 0000000..868575c --- /dev/null +++ b/src/parts/_forms.css @@ -0,0 +1,159 @@ +button, +select, +input[type='submit'], +input[type='reset'], +input[type='button'], +input[type='checkbox'], +input[type='range'], +input[type='radio'] { + cursor: pointer; +} + +input, +select { + display: block; +} + +[type='checkbox'], +[type='radio'] { + display: initial; +} + +input, +button, +textarea, +select { + color: var(--form-text); + background-color: var(--background); + font-family: inherit; + font-size: inherit; + margin-right: 6px; + margin-bottom: 6px; + padding: 10px; + border: none; + border-radius: 6px; + outline: none; +} + +button, +input[type='submit'], +input[type='reset'], +input[type='button'] { + background-color: var(--button-base); + padding-right: 30px; + padding-left: 30px; +} + +button:hover, +input[type='submit']:hover, +input[type='reset']:hover, +input[type='button']:hover { + background: var(--button-hover); +} + +input[type='color'] { + min-height: 2rem; + padding: 8px; + cursor: pointer; +} + +input[type='checkbox'], +input[type='radio'] { + height: 1em; + width: 1em; +} + +input[type='radio'] { + border-radius: 100%; +} + +input { + vertical-align: top; +} + +label { + vertical-align: middle; + margin-bottom: 4px; + display: inline-block; +} + +input:not([type='checkbox']):not([type='radio']), +input[type='range'], +select, +button, +textarea { + -webkit-appearance: none; +} + +textarea { + display: block; + margin-right: 0; + box-sizing: border-box; + resize: vertical; +} + +textarea:not([cols]) { + width: 100%; +} + +textarea:not([rows]) { + min-height: 40px; + height: 140px; +} + +select { + background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat; + padding-right: 35px; +} + +select::-ms-expand { + display: none; +} + +select[multiple] { + padding-right: 10px; + background-image: none; + overflow-y: auto; +} + +input:focus, +select:focus, +button:focus, +textarea:focus { + box-shadow: 0 0 0 2px var(--focus); +} + +input[type='checkbox']:active, +input[type='radio']:active, +input[type='submit']:active, +input[type='reset']:active, +input[type='button']:active, +input[type='range']:active, +button:active { + transform: translateY(2px); +} + +input:disabled, +select:disabled, +button:disabled, +textarea:disabled { + cursor: not-allowed; + opacity: 0.5; +} + +::placeholder { + color: var(--form-placeholder); +} + +fieldset { + border: 1px var(--focus) solid; + border-radius: 6px; + margin: 0; + margin-bottom: 12px; + padding: 10px; +} + +legend { + font-size: 0.9em; + font-weight: 600; +} -- cgit v1.2.3