diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css index 30236f833..e8408855d 100644 --- a/app/assets/stylesheets/buttons.css +++ b/app/assets/stylesheets/buttons.css @@ -17,6 +17,7 @@ justify-content: center; padding: var(--btn-padding, 0.5em 1.1em); pointer-events: auto; + position: relative; transition: background-color var( --transition), border var( --transition), @@ -25,44 +26,6 @@ opacity var( --transition), scale var( --transition); - /* With radios and checkboxes */ - &:has(input[type=radio]), - &:has(input[type=checkbox]) { - position: relative; - - :is(input[type=radio]), - :is(input[type=checkbox]) { - --hover-size: 0; - - appearance: none; - border-radius: var(--btn-border-radius); - cursor: pointer; - display: flex; - inset: 0; - margin: 0; - padding: 0; - position: absolute; - - &:focus-visible { - outline: none; - } - } - - .checked { - display: none; - } - } - - &:has(input:checked) { - --btn-background: var(--color-ink); - --btn-color: var(--color-ink-inverted); - --outline-color: var(--color-ink); - - .checked { - display: block; - } - } - &[disabled], &:has([disabled]), [disabled] &[type=submit], @@ -154,6 +117,42 @@ --outline-color: var(--color-ink); } + /* Toggleable buttons + /* ------------------------------------------------------------------------ */ + + .btn { + :is(input[type=radio], input[type=checkbox]) { + --hover-size: 0; + + appearance: none; + border-radius: var(--btn-border-radius); + cursor: pointer; + display: flex; + inset: 0; + margin: 0; + padding: 0; + position: absolute; + + &:focus-visible { + outline: none; + } + } + + .checked { + display: none; + } + + &:has(input:checked) { + --btn-background: var(--color-ink); + --btn-color: var(--color-ink-inverted); + --outline-color: var(--color-ink); + + .checked { + display: block; + } + } + } + /* Button groups /* ------------------------------------------------------------------------ */ diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css index 9bf4d4953..40de97e09 100644 --- a/app/assets/stylesheets/layout.css +++ b/app/assets/stylesheets/layout.css @@ -92,7 +92,9 @@ display: none; } } +} +@layer components { .skip-navigation { --left-offset: -999em;