diff --git a/app/assets/stylesheets/icons.css b/app/assets/stylesheets/icons.css index 8b1e2421d..b476cc73b 100644 --- a/app/assets/stylesheets/icons.css +++ b/app/assets/stylesheets/icons.css @@ -7,8 +7,9 @@ flex-shrink: 0; inline-size: var(--icon-size, 1em); mask-image: var(--svg); + mask-position: center; mask-repeat: no-repeat; - mask-size: cover; + mask-size: var(--icon-size, 1em); pointer-events: none; user-select: none; } diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css index a0db67496..989d6af99 100644 --- a/app/assets/stylesheets/popup.css +++ b/app/assets/stylesheets/popup.css @@ -5,6 +5,9 @@ --panel-size: auto; --btn-background: transparent; + --popup-icon-size: 24px; + --popup-item-padding-inline: var(--inline-space-half); + inset: 0 auto auto 50%; max-block-size: 80vh; min-inline-size: min(25ch, calc(100dvw - var(--block-space-double))); @@ -68,7 +71,7 @@ margin: 0; max-inline-size: 100%; padding: 0; - row-gap: 2px; + row-gap: 1px; /* Hide lists when all the items within are hidden */ &:has(.popup__section-title:only-child), @@ -85,10 +88,6 @@ inline-size: 100%; max-inline-size: 100%; - /* .popup__list &:has(*:first-child:not(.popup__btn)) { - padding-inline-start: var(--inline-space-half); - } */ - @media (any-hover: hover) { &:hover { background: var(--color-ink-lightest); @@ -104,6 +103,14 @@ } } } + + &:has(> :first-child:not(.popup__btn)) { + padding-inline-start: var(--popup-item-padding-inline); + } + + &:has(> :last-child:not(.popup__btn)) { + padding-inline-end: var(--popup-item-padding-inline); + } } /* The actionable thing with padding within popup__item */ @@ -111,20 +118,16 @@ --btn-background: transparent; --btn-border-radius: 0.3em; --btn-border-size: 0; - --btn-font-weight: 500; - --btn-padding: var(--inline-space-half) var(--inline-space); flex: 1 1 auto; + font-weight: 500; justify-content: start; inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; + padding: var(--inline-space-half) var(--popup-item-padding-inline); text-align: start; - .icon { - --icon-size: 1em; - } - &:has(input:checked) { --btn-background: transparent; --btn-color: var(--color-ink); @@ -141,6 +144,24 @@ } } + .popup__icon { + --icon-size: 1em; + + inline-size: var(--popup-icon-size); + } + + .popup__radio { + --icon-size: var(--text-x-small); + + block-size: var(--popup-icon-size); + inline-size: var(--popup-icon-size); + flex-shrink: 0; + + &:hover { + --btn-border-color: var(--color-ink); + } + } + .popup__footer { background-color: var(--color-canvas); border-block-start: 1px solid var(--color-ink-lighter); diff --git a/app/helpers/filters_helper.rb b/app/helpers/filters_helper.rb index 1d7646ab3..ea155ccfd 100644 --- a/app/helpers/filters_helper.rb +++ b/app/helpers/filters_helper.rb @@ -17,7 +17,7 @@ module FiltersHelper def filter_place_menu_item(path, label, icon) tag.li class: "popup__item", id: "filter-place-#{label.parameterize}", data: { filter_target: "item", navigable_list_target: "item" } do - concat icon_tag(icon) + concat icon_tag(icon, class: "popup__icon") concat(link_to(path, class: "popup__btn btn") do concat tag.span(label, class: "overflow-ellipsis") concat tag.span(" ›", class: "translucent flex-item-no-shrink flex-item-justify-end") diff --git a/app/views/filters/menu/collections/_all_option.html.erb b/app/views/filters/menu/collections/_all_option.html.erb index 1326bdbbf..00c7cf614 100644 --- a/app/views/filters/menu/collections/_all_option.html.erb +++ b/app/views/filters/menu/collections/_all_option.html.erb @@ -2,7 +2,7 @@ <% if Current.user.collections.many? %>