diff --git a/app/assets/stylesheets/buttons.css b/app/assets/stylesheets/buttons.css index e61b57fa9..b31080b88 100644 --- a/app/assets/stylesheets/buttons.css +++ b/app/assets/stylesheets/buttons.css @@ -203,71 +203,3 @@ margin-top: var(--btn-size); } } - -/* NEW THING -/* -------------------------------------------------------------------------- */ - -.expandable-btn { - --btn-height: calc(1em + 1lh); - - background: gold; - position: relative; - - &[open] { - z-index: 1; - } - - &::details-content { - inline-size: 0; - transition: inline-size 1s, content-visibility 1s; - transition-behavior: allow-discrete; - } - - &:open::details-content { - inline-size: auto; - } -} - -.expandable-btn__trigger { - .icon--caret-down { - font-size: 1ch; - } - - [open] & { - box-shadow: none; - position: relative; - z-index: 1; - } -} - -.expandable-btn__content { - --btn-border-radius: calc(var(--btn-height) / 2); - - align-items: stretch; - flex-direction: column; - gap: 4px; - inset: 0 auto auto 0; - padding-block-start: var(--btn-height); - position: absolute; - text-wrap: nowrap; - transition: inline-size: 2s; - - .expandable-btn:has(:hover) & { - box-shadow: 0 0 0 var(--hover-size) var(--hover-color); - } -} - -.expandable-btn__item { - --btn-background: var(--color-subtle-light); - --btn-border-radius: 0.3em; - --btn-border-size: 0; - --btn-font-weight: 500; - --btn-padding: var(--inline-space-half) var(--inline-space-half) var(--inline-space-half) var(--inline-space); - --hover-size: 0; - --outline-color: transparent; - - justify-content: start; - margin-inline: -1ch; - padding-inline: 1ch; -} - diff --git a/app/assets/stylesheets/expander.css b/app/assets/stylesheets/expander.css new file mode 100644 index 000000000..941dc2044 --- /dev/null +++ b/app/assets/stylesheets/expander.css @@ -0,0 +1,60 @@ +.expander { + --btn-height: calc(1em + 1lh); + + position: relative; + + &[open] { + z-index: 1; + } +} + +.expander__trigger { + position: relative; + z-index: 1; + + .icon--caret-down { + font-size: 1ch; + } + + [open] & { + box-shadow: none; + } +} + +.expander__content { + --btn-border-radius: calc(var(--btn-height) / 2); + + align-items: stretch; + flex-direction: column; + gap: 4px; + inset: 0 auto auto 0; + padding-block-start: var(--btn-height); + position: absolute; + text-wrap: nowrap; + + .expander:has(:hover) & { + box-shadow: 0 0 0 var(--hover-size) var(--hover-color); + } + + [open] & { + inline-size: auto; + } +} + +.expander__item { + --btn-background: transparent; + --btn-border-radius: 0.3em; + --btn-border-size: 0; + --btn-font-weight: 500; + --btn-padding: var(--inline-space-half) 1ch; + --hover-size: 0; + --outline-color: transparent; + + margin-inline: -1ch; + justify-content: flex-start; + + &:hover, + &:focus-visible { + background-color: oklch(var(--lch-white) / 10%); + } +} diff --git a/app/views/bubbles/_pop_toggle.html.erb b/app/views/bubbles/_pop_toggle.html.erb index 016c65167..9f033dc2e 100644 --- a/app/views/bubbles/_pop_toggle.html.erb +++ b/app/views/bubbles/_pop_toggle.html.erb @@ -7,19 +7,17 @@ <% else %>