Signal-Desktop/stylesheets/components/ContextMenu.scss

102 lines
1.7 KiB
SCSS

// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.ContextMenu {
&__container {
align-items: center;
display: flex;
justify-content: center;
}
&__popper {
@extend %module-composition-popper;
margin: 0;
padding: 6px 2px;
width: auto;
&--single-item {
padding: 0;
}
}
&__title {
@include font-body-1-bold;
margin-bottom: 12px;
}
&__button {
@include button-reset();
}
&__option {
@include button-reset();
@include font-body-2;
@include dark-theme {
color: $color-gray-05;
}
align-items: center;
border-radius: 6px;
display: flex;
justify-content: space-between;
padding: 6px;
min-width: 150px;
width: 100%;
&--container {
display: flex;
}
&--icon {
height: 16px;
margin-right: 8px;
width: 16px;
}
&--selected {
height: 12px;
margin: 0 6px;
width: 16px;
@include light-theme {
@include color-svg('../images/icons/v2/check-24.svg', $color-black);
}
@include dark-theme {
@include color-svg('../images/icons/v2/check-24.svg', $color-white);
}
}
&--title {
@include font-body-2;
}
&--description {
@include font-subtitle;
}
&:hover {
@include light-theme() {
background-color: $color-gray-05;
}
@include dark-theme() {
background-color: $color-gray-65;
}
}
&--focused,
&:focus,
&:active {
@include keyboard-mode {
border-radius: 6px;
box-shadow: 0 0 1px 1px $color-ultramarine;
outline: none;
}
}
}
&__popper--single-item &__option {
padding: 12px 6px;
}
}