signal-desktop/stylesheets/components/ProfileEditor.scss
2023-05-09 10:52:42 -04:00

162 lines
3.2 KiB
SCSS

// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.ProfileEditor {
&__icon {
&--container {
align-items: center;
display: flex;
font-size: 24px;
justify-content: center;
width: 32px;
height: 32px;
}
&::after {
-webkit-mask-size: 100%;
content: '';
display: block;
height: 24px;
width: 24px;
@include light-theme {
background-color: $color-gray-75;
}
@include dark-theme {
background-color: $color-gray-15;
}
}
&--name {
&::after {
@include light-theme {
@include color-svg(
'../images/icons/v3/person/person.svg',
$color-gray-75
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/person/person.svg',
$color-gray-15
);
}
}
}
&--username {
&::after {
@include light-theme {
@include color-svg('../images/icons/v3/at/at.svg', $color-gray-75);
}
@include dark-theme {
@include color-svg('../images/icons/v3/at/at.svg', $color-gray-15);
}
}
}
&--bio {
&::after {
@include light-theme {
@include color-svg(
'../images/icons/v3/edit/edit.svg',
$color-gray-75
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v3/edit/edit.svg',
$color-gray-15
);
}
}
}
}
&__row {
padding-inline: 0;
}
&__divider {
border-style: solid;
border-bottom: none;
@include light-theme {
border-color: $color-gray-15;
}
@include dark-theme {
border-color: $color-gray-75;
}
}
&__info {
@include font-body-2;
margin-block: 16px;
margin-inline: 0;
@include light-theme {
color: $color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
}
a {
font-weight: 600;
text-decoration: none;
}
}
&__username-menu {
&__button {
width: 20px;
height: 20px;
margin: 4px;
@include dark-theme {
@include color-svg(
'../images/icons/v3/chevron/chevron-down.svg',
$color-white
);
}
@include light-theme {
@include color-svg(
'../images/icons/v3/chevron/chevron-down.svg',
$color-black
);
}
}
&__copy-icon {
@include dark-theme {
@include color-svg('../images/icons/v3/copy/copy.svg', $color-white);
}
@include light-theme {
@include color-svg('../images/icons/v3/copy/copy.svg', $color-black);
}
}
&__copy-link-icon {
@include dark-theme {
@include color-svg('../images/icons/v3/link/link.svg', $color-white);
}
@include light-theme {
@include color-svg('../images/icons/v3/link/link.svg', $color-black);
}
}
&__trash-icon {
@include dark-theme {
@include color-svg('../images/icons/v3/trash/trash.svg', $color-white);
}
@include light-theme {
@include color-svg('../images/icons/v3/trash/trash.svg', $color-black);
}
}
}
}