diff --git a/src/components/utils/popover/popover-item.ts b/src/components/utils/popover/popover-item.ts index 23e9a32c..e6fda189 100644 --- a/src/components/utils/popover/popover-item.ts +++ b/src/components/utils/popover/popover-item.ts @@ -78,7 +78,8 @@ export class PopoverItem { title: 'ce-popover-item__title', secondaryTitle: 'ce-popover-item__secondary-title', icon: 'ce-popover-item__icon', - iconChevronRight: 'ce-popover-item__icon-chevron-right', + iconTool: 'ce-popover-item__icon--tool', + iconChevronRight: 'ce-popover-item__icon--chevron-right', active: 'ce-popover-item--active', disabled: 'ce-popover-item--disabled', focused: 'ce-popover-item--focused', @@ -173,7 +174,7 @@ export class PopoverItem { el.dataset.itemName = params.name; } - this.nodes.icon = Dom.make('div', PopoverItem.CSS.icon, { + this.nodes.icon = Dom.make('div', [PopoverItem.CSS.icon, PopoverItem.CSS.iconTool], { innerHTML: params.icon || IconDotCircle, }); @@ -190,7 +191,7 @@ export class PopoverItem { } if (this.children.length > 0) { - el.appendChild(Dom.make('div', PopoverItem.CSS.iconChevronRight, { + el.appendChild(Dom.make('div', [PopoverItem.CSS.icon, PopoverItem.CSS.iconChevronRight], { innerHTML: IconChevronRight, })); } diff --git a/src/styles/popover.css b/src/styles/popover.css index 01202187..f06239d4 100644 --- a/src/styles/popover.css +++ b/src/styles/popover.css @@ -96,16 +96,19 @@ } @media (--mobile) { - --offset: 5px; - position: fixed; - max-width: none; - min-width: calc(100% - var(--offset) * 2); - left: var(--offset); - right: var(--offset); - bottom: calc(var(--offset) + env(safe-area-inset-bottom)); - top: auto; - border-radius: 10px; + .ce-popover__container { + --offset: 5px; + + position: fixed; + max-width: none; + min-width: calc(100% - var(--offset) * 2); + left: var(--offset); + right: var(--offset); + bottom: calc(var(--offset) + env(safe-area-inset-bottom)); + top: auto; + border-radius: 10px; + } .ce-popover__search { display: none; @@ -191,15 +194,11 @@ } &__icon { - border-radius: 5px; width: 26px; height: 26px; - box-shadow: 0 0 0 1px var(--color-border-icon); - background: #fff; display: flex; align-items: center; justify-content: center; - margin-right: 10px; svg { width: var(--icon-size); @@ -218,13 +217,11 @@ } } - &__icon-chevron-right { - - svg { - width: var(--icon-size); - height: var(--icon-size); - display: block; - } + &__icon--tool { + border-radius: 5px; + box-shadow: 0 0 0 1px var(--color-border-icon); + background: #fff; + margin-right: 10px; } &__title {