ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Convert to css style comments, part 2.

Browse source
This commit is contained in:
Fredrik Jonsson 2025-09-18 10:55:39 +02:00
commit 9f8b1eaf18
1 changed files with 234 additions and 201 deletions
Download patch file Download diff file Expand all files Collapse all files

30
assets/sass/base/forms/_forms.scss
View file

@ -1,7 +1,7 @@
// Form defaults.
/* Form defaults. */
form {
// Add vertical rhythm margins.
/* Add vertical rhythm margins. */
margin-block: 0 var(--spacing-m);
}
@ -14,13 +14,13 @@ select {
label {
font-weight: var(--fw-bold);
// Display as block if before input.
/* Display as block if before input. */
&:has(+ input),
&:has(+ textarea){
display: block;
}
// Mark field as required if needed.
/* Mark field as required if needed. */
&:has(+ :required) {
&::after {
content: '*';
@ -29,7 +29,7 @@ label {
}
}
// Valid and invalid state.
/* Valid and invalid state. */
input,
textarea {
&:user-valid {
@ -54,7 +54,7 @@ textarea {
}
}
// Set max text line width for readability.
/* Set max text line width for readability. */
input,
label,
textarea,
@ -66,31 +66,31 @@ fieldset {
border: 1px solid var(--color-border);
}
// Make field where you enter more info a bit wider.
/* Make field where you enter more info a bit wider. */
[type='email'],
[type='password'],
[type='range'],
[type='search'],
[type='url'] {
// Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()".
// stylelint-disable-next-line function-name-case
/* Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()". */
/* stylelint-disable-next-line function-name-case */
width: Min(20em, 100%);
}
// Make field where you enter more info a bit wider.
/* Make field where you enter more info a bit wider. */
[type='text'],
textarea {
// Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()".
// stylelint-disable-next-line function-name-case
/* Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()". */
/* stylelint-disable-next-line function-name-case */
width: Min(30em, 100%);
}
// Make sure textareas without a rows attribute are not tiny.
/* Make sure textareas without a rows attribute are not tiny. */
textarea:not([rows]) {
min-height: 7lh;
}
// For forms with multibple fields show submit button below the form.
/* For forms with multibple fields show submit button below the form. */
input:not(:only-of-type),
textarea {
& + [type='submit'] {
@ -98,7 +98,7 @@ textarea {
}
}
// For forms on mobile with single field add space between it and the submit button.
/* For forms on mobile with single field add space between it and the submit button. */
@media (min-width: 666px) {
input:only-of-type {
&:has(+ [type='submit']) {