forked from fixin.me/fixin.me
Update and format comments
This commit is contained in:
@@ -18,10 +18,14 @@
|
||||
/* Strive for simplicity:
|
||||
* * style elements/tags only - if possible,
|
||||
* * replace element/tag name with class name - if element has to be styled
|
||||
* differently depending on context (e.g. form)
|
||||
* differently depending on context (e.g. <form>; <a> as link/button),
|
||||
* * styles with multiple selectors should have all selectors with same
|
||||
* specificity, to allow proper rule specificity vs order management.
|
||||
*
|
||||
* NOTE: Style in a modular way, similar to how CSS @scope would be used,
|
||||
* to make transition easier once @scope is widely available */
|
||||
* NOTE: style in a modular way, similar to how CSS @scope would be used,
|
||||
* to make transition easier once @scope is widely available. */
|
||||
/* TODO: review styles with multiple selectors and try to convert them to the same
|
||||
* specificity. */
|
||||
:root {
|
||||
--color-focus-gray: #f3f3f3;
|
||||
--color-border-gray: #dddddd;
|
||||
@@ -58,7 +62,7 @@
|
||||
border-color: var(--color-border-gray) !important;
|
||||
color: var(--color-border-gray) !important;
|
||||
/* NOTE: cannot set cursor with `pointer-events: none`; can be fixed by setting
|
||||
* cursor on wrapping element.
|
||||
* `cursor` on wrapping element.
|
||||
cursor: not-allowed; */
|
||||
fill: var(--color-border-gray) !important;
|
||||
pointer-events: none !important;
|
||||
@@ -70,9 +74,9 @@
|
||||
|
||||
|
||||
/* Color coding of input controls' background:
|
||||
* blue - target for interaction with pointer
|
||||
* gray - target for interaction with keyboard
|
||||
* red - destructive, non-undoable action
|
||||
* blue - target for interaction with pointer,
|
||||
* gray - target for interaction with keyboard,
|
||||
* red - destructive, non-undoable action.
|
||||
*/
|
||||
button,
|
||||
details,
|
||||
@@ -149,8 +153,8 @@ input[type=checkbox]:checked {
|
||||
appearance: checkbox;
|
||||
-webkit-appearance: checkbox;
|
||||
}
|
||||
/* Hide spin buttons in input number fields */
|
||||
/* TODO: add spin buttons inside input[number]: before (-) and after (+) input */
|
||||
/* Hide spin buttons of <input type=number>. */
|
||||
/* TODO: add spin buttons inside <input type=number>: before (-) and after (+) input. */
|
||||
input[type=number] {
|
||||
appearance: textfield;
|
||||
-moz-appearance: textfield;
|
||||
@@ -173,9 +177,9 @@ button > svg {
|
||||
button > svg:not(:last-child) {
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
/* TODO: move normal non-button links (<a>:hover/:focus) styling here (i.e.
|
||||
* page-wide, top-level) and remove from table.items - as the style should be
|
||||
* same everywhere */
|
||||
/* TODO: move normal, non-button links (<a>:hover/:focus) styling here (i.e.
|
||||
* page-wide, top-level) and remove from `table.items` - as the style should be
|
||||
* same everywhere. */
|
||||
.button:focus-visible,
|
||||
button:focus-visible,
|
||||
input[type=submit]:focus-visible {
|
||||
@@ -184,7 +188,7 @@ input[type=submit]:focus-visible {
|
||||
input:focus-visible,
|
||||
select:focus-visible,
|
||||
select:focus-within,
|
||||
/* TODO: how to achieve summary:focus-within for ::details-content? */
|
||||
/* TODO: how to achieve `summary:focus-within` for `::details-content`? */
|
||||
summary:focus-visible,
|
||||
textarea:focus-visible {
|
||||
accent-color: var(--color-dark-blue);
|
||||
@@ -226,8 +230,8 @@ textarea:read-only {
|
||||
}
|
||||
|
||||
|
||||
/* NOTE: collapse gaps around empty rows (`topside`) once possible
|
||||
* with grid-collapse property and remove alternative grid-template
|
||||
/* NOTE: collapse gaps around empty rows (`topside`) once possible with
|
||||
* `grid-collapse` property and remove alternative `grid-template-areas`.
|
||||
* https://github.com/w3c/csswg-drafts/issues/5813 */
|
||||
body {
|
||||
display: grid;
|
||||
@@ -344,8 +348,8 @@ header {
|
||||
.flash > div {
|
||||
grid-column: 2;
|
||||
}
|
||||
/* NOTE: currently flash button inherits some unnecessary styles from generic
|
||||
* button. */
|
||||
/* NOTE: currently flash <button> inherits some unnecessary styles from generic
|
||||
* <button>. */
|
||||
.flash > button {
|
||||
border: none;
|
||||
color: inherit;
|
||||
@@ -361,7 +365,8 @@ header {
|
||||
}
|
||||
|
||||
|
||||
/* TODO: Hover over invalid should work like in measurements (thin vs thick border) */
|
||||
/* TODO: hover over `:invalid` should work like in measurements
|
||||
* (thin vs thick border). */
|
||||
.labeled-form {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
@@ -378,7 +383,7 @@ header {
|
||||
.labeled-form label.required {
|
||||
font-weight: bold;
|
||||
}
|
||||
/* Don't style `label.error + input` if case already covered by input:invalid */
|
||||
/* Don't style `label.error + input` if case already covered by `input:invalid`. */
|
||||
.labeled-form label.error {
|
||||
color: var(--color-red);
|
||||
}
|
||||
@@ -398,14 +403,14 @@ header {
|
||||
.labeled-form .auxiliary {
|
||||
grid-column: 3;
|
||||
/* If more buttons are needed, `grid-row` can be replaced with
|
||||
* `reading-flow: grid-columns` to ensure proper tabindex order */
|
||||
* `reading-flow: grid-columns` to ensure proper [tabindex] order. */
|
||||
grid-row: 1;
|
||||
height: 100%;
|
||||
padding-block: 0;
|
||||
}
|
||||
|
||||
|
||||
/* TODO: remove .items class (?) and make 'form table' work properly */
|
||||
/* TODO: remove `.items` class (?) and make `form table` work properly. */
|
||||
table.items {
|
||||
border-spacing: 0;
|
||||
border: solid 1px var(--color-border-gray);
|
||||
@@ -431,7 +436,7 @@ table.items th,
|
||||
table.items td {
|
||||
padding-inline: 1em 0;
|
||||
}
|
||||
/* For <a> to fill <td> completely, we use an ::after pseudoelement. */
|
||||
/* For <a> to fill <td> completely, we use an `::after` pseudoelement. */
|
||||
table.items td.link {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
@@ -491,8 +496,8 @@ table.items tr.form td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* TODO: replace :hover:focus-visible combos with proper LOVE stye order */
|
||||
/* TODO: Update table styling: simplify selectors, deduplicate, remove non-font rem. */
|
||||
/* TODO: replace `:hover:focus-visible` combos with proper LOVE style order. */
|
||||
/* TODO: update table styling: simplify selectors, deduplicate, remove non-font rem. */
|
||||
table.items td.link a:hover,
|
||||
table.items td.link a:focus-visible,
|
||||
table.items td.link a:hover:focus-visible {
|
||||
@@ -542,8 +547,8 @@ table.items select,
|
||||
table.items textarea {
|
||||
padding-block: 0.375em;
|
||||
}
|
||||
/* TODO: find a way (layers?) to style inputs differently while making sure
|
||||
* hover works properly without using :not(:hover) selectors here. */
|
||||
/* TODO: find a way (layers?) to style <input>s differently while making sure
|
||||
* hover works properly without using `:not(:hover)` selectors here. */
|
||||
table.items .button:not(:hover),
|
||||
table.items button:not(:hover),
|
||||
table.items input:not(:hover),
|
||||
@@ -647,7 +652,7 @@ details[open] summary::before {
|
||||
summary::marker {
|
||||
padding-left: 0.25em;
|
||||
}
|
||||
/* NOTE: use details[open]::details-content once widely available */
|
||||
/* NOTE: use `details[open]::details-content` once widely available. */
|
||||
details[open] ul {
|
||||
background: white;
|
||||
border: solid 1px var(--color-border-gray);
|
||||
@@ -672,3 +677,10 @@ li input[type=checkbox] {
|
||||
li::marker {
|
||||
content: '';
|
||||
}
|
||||
/*
|
||||
* TODO:
|
||||
* * disable <label> containing disabled checkbox: `label:has(input[disabled])`,
|
||||
* * disabled label styling,
|
||||
* * focused label styling (currently only checkbox has focus),
|
||||
* * disabled checkbox blue square focus removal.
|
||||
* */
|
||||
|
||||
Reference in New Issue
Block a user