diff --git a/src/assets/css/src/2.blocks.dialog.css b/src/assets/css/src/2.blocks.dialog.css index 9846a83..3fb0f3a 100644 --- a/src/assets/css/src/2.blocks.dialog.css +++ b/src/assets/css/src/2.blocks.dialog.css @@ -117,6 +117,7 @@ margin-left: calc(-1 * var(--space-16)); padding: var(--space-16); overflow-x: scroll; + overflow-y: hidden; position: relative; } /* Windows fix */ diff --git a/src/components/Selector.vue b/src/components/Selector.vue index a214bdf..d925245 100644 --- a/src/components/Selector.vue +++ b/src/components/Selector.vue @@ -16,8 +16,19 @@ :maxSelectedLabels="3" class="font-serif" :class="{ active: currentValue }" + data-icon="chevron-single-down" checkmark - /> + > + + + {{ slotProps.option.title }} + + * { +[id*="select_list"] > * { font-family: var(--font-serif); padding: var(--space-8) var(--space-8) var(--space-8) var(--space-48); border-radius: var(--rounded-sm); @@ -259,10 +274,10 @@ function getFrontViewUrl(item) { height: 2.75rem; cursor: pointer; } -#selector-select_list > * + * { +[id*="select_list"] > * + * { margin-top: var(--space-4); } -#selector-select_list > *::before { +[id*="select_list"] > *::before { content: ''; position: absolute; left: var(--space-8); @@ -275,30 +290,49 @@ function getFrontViewUrl(item) { background-size: cover; background-position: center; } -#selector-select_list > *:hover { +[id*="select_list"] > *:hover { background-color: var(--color-grey-50); } -#selector-select_list > *:focus, -#selector-select_list > *:focus-visible, -#selector-select_list > [data-p-focused='true'] { +[id*="select_list"] > *:focus, +[id*="select_list"] > *:focus-visible, +[id*="select_list"] > [data-p-focused="true"] { outline: 2px solid var(--color-focus-ring); } /* Check */ -#selector-select_list > * > svg { +#selector-multiselect_list input[type="checkbox"] { + position: absolute; + left: var(--space-4); + top: calc(var(--space-4) + 1px); + width: 1.75rem; + height: 1.75rem; + border-radius: var(--rounded-sm); +} +#selector-multiselect_list input[type="checkbox"]:checked { + --icon-color: var(--color-focus-ring); +} +[id*="select_list"] > * > svg { position: absolute; left: 0.875rem; width: 1rem; height: 1rem; color: var(--color-grey-700); } -#selector-select_list img { +[id*="select_list"] img { position: absolute; left: 0.5rem; width: 1.75rem; height: 1.75rem; mix-blend-mode: multiply; } -#selector-select_list [aria-selected='true'] img { +[id*="select_list"] [aria-selected="true"] img, +#selector-multiselect_list input[type="checkbox"] + [data-pc-section="box"] { + display: none; +} +#selector-multiselect_list [aria-selected="false"] input[type="checkbox"]::before { + --icon-color: transparent; +} +/* Overlay */ +[data-pc-section="overlay"] [data-pc-section="header"] { display: none; }
{{ slotProps.option.title }}