signal-desktop/stylesheets/components/EditUsernameModalBody.scss

144 lines
2.7 KiB
SCSS
Raw Normal View History

2022-10-18 17:12:02 +00:00
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.EditUsernameModalBody {
&__header {
display: flex;
flex-direction: column;
align-items: center;
&__large-at {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 32px;
margin-top: 21px;
margin-bottom: 16px;
@include light-theme {
background-color: $color-gray-04;
}
@include dark-theme {
background-color: $color-gray-65;
}
&::after {
display: block;
width: 36px;
height: 36px;
content: '';
@include light-theme {
2023-05-04 18:04:22 +00:00
@include color-svg('../images/icons/v3/at/at.svg', $color-gray-75);
2022-10-18 17:12:02 +00:00
}
@include dark-theme {
2023-05-04 18:04:22 +00:00
@include color-svg('../images/icons/v3/at/at.svg', $color-gray-15);
2022-10-18 17:12:02 +00:00
}
}
}
&__preview {
margin-bottom: 2px;
}
}
&__divider {
width: 2px;
height: 20px;
2023-04-20 17:03:43 +00:00
margin-block: 0;
margin-inline: 12px;
2022-10-18 17:12:02 +00:00
@include light-theme {
background-color: $color-gray-20;
}
@include dark-theme {
background-color: $color-gray-45;
}
}
&__discriminator__input {
text-align: end;
2022-10-18 17:12:02 +00:00
}
&__error {
@include font-body-2;
margin-block: 8px 12px;
margin-inline: 6px;
font-size: 12px;
line-height: 17px;
2022-10-18 17:12:02 +00:00
color: $color-accent-red;
}
&__info {
@include font-body-2;
font-size: 12px;
line-height: 17px;
margin-block: 12px;
margin-inline: 6px;
2022-10-18 17:12:02 +00:00
@include light-theme {
color: $color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
}
// To account for missing error section: 8px top margin, 17px line height,
// 12px bottom margin.
2022-10-18 17:12:02 +00:00
&--no-error {
margin-bottom: 37px;
2022-10-18 17:12:02 +00:00
}
}
&__learn-more-button {
@include button-reset;
color: $color-accent-blue;
}
&__learn-more {
&__title.module-Modal__title {
display: flex;
align-items: center;
}
&__hashtag {
display: inline-block;
width: 20px;
height: 20px;
2023-04-20 17:03:43 +00:00
margin-inline-end: 12px;
2022-10-18 17:12:02 +00:00
-webkit-mask-size: 100%;
content: '';
@include light-theme {
background-color: $color-gray-75;
}
@include dark-theme {
background-color: $color-gray-15;
}
-webkit-mask: url(../images/icons/v2/hashtag-24.svg) no-repeat center;
}
}
&__input__container.Input__container {
/**
* Discriminator should always be to the right of the nickname.
* This overrides the default direction of the page.
*/
/* stylelint-disable-next-line declaration-property-value-disallowed-list */
direction: ltr;
margin-block-end: 8px;
}
2022-10-18 17:12:02 +00:00
}