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

41 lines
1.0 KiB
SCSS

.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: var(--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: rgb(var(--tone-gray-900));
--icon-size: icon-300;
content: '';
position: absolute;
top: 50%;
left: 50%;
margin-top: -8px;
margin-left: -8px;
}
%more-popover-menu-trigger > *:active {
background-color: rgb(var(--tone-gray-100));
}
%more-popover-menu-trigger > *:hover,
%more-popover-menu-trigger > *:focus {
background-color: rgb(var(--tone-gray-050));
}