/** * Copyright (c) HashiCorp, Inc. * SPDX-License-Identifier: MPL-2.0 */ .more-popover-menu { @extend %more-popover-menu; } %more-popover-menu { @extend %popover-menu; } /* using the inut in the selector here means it won't */ /* take on the default :checked chevron icon */ %more-popover-menu .popover-menu > [type='checkbox'] + label { @extend %more-popover-menu-trigger; } /* This gives the trigger a slightly larger invisible hit area */ %more-popover-menu-trigger { padding: 7px; } %more-popover-menu-trigger > * { background-color: transparent; border-radius: var(--decor-radius-100); width: 30px; height: 30px; font-size: 0; } %more-popover-menu-trigger > *::after { --icon-name: icon-more-horizontal; --icon-color: var(--token-color-foreground-strong); --icon-size: icon-300; content: ''; position: absolute; top: 50%; left: 50%; margin-top: -8px; margin-left: -8px; } %more-popover-menu-trigger > *:active { background-color: var(--token-color-surface-strong); } %more-popover-menu-trigger > *:hover, %more-popover-menu-trigger > *:focus { background-color: var(--token-color-surface-strong); }