signal-desktop/stylesheets/components/SafetyNumberChangeDialog.scss

253 lines
5.3 KiB
SCSS
Raw Normal View History

// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
2024-11-15 23:09:31 +00:00
@use '../mixins';
@use '../variables';
.module-SafetyNumberChangeDialog {
&__confirm-dialog__header {
padding-bottom: 0px;
// We've got no title, but we want the X button from ConfirmationDialog, so
// we need to bump the dialog contents up into the header area just a bit.
margin-bottom: -5px;
}
// Used to ensure that a set of spans reverse order under RTL
&__rtl-span {
display: inline-block;
}
&__shield-icon {
2023-04-20 17:03:43 +00:00
margin-inline: auto;
height: 24px;
width: 24px;
2024-11-15 23:09:31 +00:00
@include mixins.light-theme {
@include mixins.color-svg(
2023-05-04 18:04:22 +00:00
'../images/icons/v3/safety_number/safety_number.svg',
2024-11-15 23:09:31 +00:00
variables.$color-gray-90
);
}
2024-11-15 23:09:31 +00:00
@include mixins.dark-theme {
@include mixins.color-svg(
2023-05-04 18:04:22 +00:00
'../images/icons/v3/safety_number/safety_number.svg',
2024-11-15 23:09:31 +00:00
variables.$color-white
);
}
}
&__title {
2024-11-15 23:09:31 +00:00
@include mixins.font-body-1-bold;
text-align: center;
margin-top: 8px;
2024-11-15 23:09:31 +00:00
@include mixins.light-theme {
color: variables.$color-gray-90;
}
2024-11-15 23:09:31 +00:00
@include mixins.dark-theme {
color: variables.$color-white;
}
}
&__message {
2024-11-15 23:09:31 +00:00
@include mixins.font-body-2;
text-align: center;
margin-top: 8px;
margin-bottom: 24px;
2023-04-20 17:03:43 +00:00
padding-inline: 4px;
2024-11-15 23:09:31 +00:00
@include mixins.light-theme {
color: variables.$color-gray-60;
}
2024-11-15 23:09:31 +00:00
@include mixins.dark-theme {
color: variables.$color-gray-25;
}
&--narrow {
2023-04-20 17:03:43 +00:00
padding-inline: 38px;
}
}
&__contacts {
list-style-type: none;
padding: 0px;
margin-block-end: 0px;
}
&__row {
$row: &;
align-items: center;
display: flex;
flex-direction: row;
margin-bottom: 16px;
&__story-name {
2024-11-15 23:09:31 +00:00
@include mixins.font-body-1-bold;
flex-grow: 1;
2023-04-20 17:03:43 +00:00
margin-inline-end: auto;
}
&--wrapper {
flex-grow: 1;
2023-04-20 17:03:43 +00:00
margin-inline-start: 12px;
}
&--name {
2024-11-15 23:09:31 +00:00
@include mixins.font-body-1;
2024-11-15 23:09:31 +00:00
@include mixins.dark-theme {
color: variables.$color-white;
}
}
&--subtitle {
2024-11-15 23:09:31 +00:00
@include mixins.font-subtitle;
2024-11-15 23:09:31 +00:00
@include mixins.light-theme {
color: variables.$color-gray-60;
}
2024-11-15 23:09:31 +00:00
@include mixins.dark-theme {
color: variables.$color-gray-25;
}
}
&__view {
2024-11-15 23:09:31 +00:00
@include mixins.button-reset;
@include mixins.button-secondary-blue-text;
2024-11-15 23:09:31 +00:00
& {
opacity: 0;
transition: opacity 150ms cubic-bezier(0.17, 0.17, 0, 1);
}
// Using keyboard/mouse classes directly; mixins were doing weird things
.mouse-mode #{$row}:hover & {
opacity: 1;
}
.keyboard-mode #{$row}:focus-within & {
opacity: 1;
}
2024-11-15 23:09:31 +00:00
& {
border-radius: 4px;
padding-block: 8px;
padding-inline: 14px;
}
}
&__chevron__option {
2023-04-20 17:03:43 +00:00
padding-block: 10px;
padding-inline: 15px;
.ContextMenu__popper--single-item & {
2023-04-20 17:03:43 +00:00
padding-block: 10px;
padding-inline: 15px;
}
&--container {
align-items: center;
}
}
&__chevron__button {
2024-11-15 23:09:31 +00:00
@include mixins.button-reset;
2024-11-15 23:09:31 +00:00
& {
display: flex;
align-items: center;
2024-11-15 23:09:31 +00:00
flex-grow: 0;
flex-shrink: 0;
2024-11-15 23:09:31 +00:00
padding: 10px;
height: 16px;
width: 16px;
2024-11-15 23:09:31 +00:00
justify-content: center;
border-radius: 4px;
border: 2px solid transparent;
2024-11-15 23:09:31 +00:00
opacity: 0;
transition: opacity 150ms cubic-bezier(0.17, 0.17, 0, 1);
}
// Using keyboard/mouse classes directly; mixins were doing weird things
.mouse-mode #{$row}:hover & {
opacity: 1;
}
.keyboard-mode #{$row}:focus-within & {
opacity: 1;
}
2024-11-15 23:09:31 +00:00
@include mixins.keyboard-mode {
&:focus {
2024-11-15 23:09:31 +00:00
border-color: variables.$color-ultramarine;
}
}
2024-11-15 23:09:31 +00:00
@include mixins.dark-keyboard-mode {
&:focus {
2024-11-15 23:09:31 +00:00
border-color: variables.$color-ultramarine-light;
}
}
&::before {
content: '';
display: block;
height: 16px;
width: 16px;
flex-shrink: 0;
2024-11-15 23:09:31 +00:00
@include mixins.light-theme {
@include mixins.color-svg(
2023-05-04 18:04:22 +00:00
'../images/icons/v3/chevron/chevron-down.svg',
2024-11-15 23:09:31 +00:00
variables.$color-gray-60
);
}
2024-11-15 23:09:31 +00:00
@include mixins.dark-theme {
@include mixins.color-svg(
2023-05-04 18:04:22 +00:00
'../images/icons/v3/chevron/chevron-down.svg',
2024-11-15 23:09:31 +00:00
variables.$color-gray-25
);
}
}
}
}
&__menu-icon {
&--delete {
2024-11-15 23:09:31 +00:00
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/x/x-circle.svg',
variables.$color-gray-90
);
}
2024-11-15 23:09:31 +00:00
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/x/x-circle.svg',
variables.$color-gray-05
);
}
}
&--verify {
2024-11-15 23:09:31 +00:00
@include mixins.light-theme {
@include mixins.color-svg(
2023-05-04 18:04:22 +00:00
'../images/icons/v3/safety_number/safety_number.svg',
2024-11-15 23:09:31 +00:00
variables.$color-gray-90
);
}
2024-11-15 23:09:31 +00:00
@include mixins.dark-theme {
@include mixins.color-svg(
2023-05-04 18:04:22 +00:00
'../images/icons/v3/safety_number/safety_number.svg',
2024-11-15 23:09:31 +00:00
variables.$color-gray-05
);
}
}
}
}