consul/ui/packages/consul-ui/app/components/more-popover-menu/index.scss

46 lines
1.1 KiB
SCSS

/**
* 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);
}