signal-desktop/stylesheets/components/SendStoryModal.scss

284 lines
5.3 KiB
SCSS
Raw Normal View History

2022-08-02 19:31:55 +00:00
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.SendStoryModal {
&__body {
// force
.module-Modal & {
padding-bottom: 0;
}
}
// Used to ensure that a set of spans reverse order under RTL
&__rtl-span {
display: inline-block;
}
// don't re-layout buttons on wrap,
// since we have things beyond same-sized-rectangles in the footer
.module-Modal__button-footer {
&--one-button-per-line {
flex-direction: row;
align-items: center;
}
}
.module-SearchInput__container {
2023-04-20 17:03:43 +00:00
margin-inline: 0;
}
&__story-preview {
height: 140px;
width: 80px;
border-radius: 12px;
2023-04-20 17:03:43 +00:00
margin-block: 0 16px;
margin-inline: auto;
background-size: cover;
}
&__item--contact-or-conversation {
height: 52px;
2023-04-20 17:03:43 +00:00
padding-block: 0;
padding-inline: 6px;
}
2022-08-10 18:37:19 +00:00
&__top-bar {
align-items: center;
display: flex;
min-height: 40px;
justify-content: space-between;
user-select: none;
}
2023-08-21 20:36:28 +00:00
&__top-bar-title {
flex: 1;
}
2022-08-10 18:37:19 +00:00
&__new-story {
&__button {
font-weight: 500;
2023-04-20 17:03:43 +00:00
padding-block: 5px;
padding-inline: 10px;
2022-08-10 18:37:19 +00:00
&::before {
2023-05-04 18:04:22 +00:00
@include color-svg('../images/icons/v3/plus/plus.svg', $color-white);
2022-08-10 18:37:19 +00:00
content: '';
height: 16px;
width: 16px;
2023-04-20 17:03:43 +00:00
margin-inline-end: 8px;
display: inline-block;
vertical-align: text-bottom;
2022-08-10 18:37:19 +00:00
}
}
&__option {
padding: 10px;
&--icon {
2023-04-20 17:03:43 +00:00
margin-inline-end: 15px;
}
&--container {
align-items: center;
}
&--description {
color: $color-gray-25;
}
2022-08-10 18:37:19 +00:00
}
}
&__icon {
2022-08-30 19:13:32 +00:00
&--delete {
2023-05-04 18:04:22 +00:00
@include color-svg('../images/icons/v3/trash/trash.svg', $color-white);
2022-08-30 19:13:32 +00:00
height: 14px;
width: 14px;
}
&--custom {
2022-08-10 18:37:19 +00:00
@include color-svg(
2023-05-04 18:04:22 +00:00
'../images/icons/v3/stories/stories.svg',
2022-08-10 18:37:19 +00:00
$color-white
);
height: 16px;
width: 16px;
2022-08-10 18:37:19 +00:00
}
&--group {
2023-05-04 18:04:22 +00:00
@include color-svg('../images/icons/v3/group/group.svg', $color-white);
height: 16px;
width: 16px;
2022-08-10 18:37:19 +00:00
}
2022-08-30 19:13:32 +00:00
&--settings {
@include color-svg(
2023-05-04 18:04:22 +00:00
'../images/icons/v3/settings/settings.svg',
2022-08-30 19:13:32 +00:00
$color-white
);
height: 14px;
width: 14px;
}
}
&__distribution-list-context {
&__container {
width: 100%;
}
&__button {
align-items: center;
display: flex;
width: 100%;
}
2022-08-10 18:37:19 +00:00
}
2022-08-02 19:31:55 +00:00
&__distribution-list {
height: 52px;
2022-08-02 19:31:55 +00:00
&__container {
justify-content: space-between;
2023-04-20 17:03:43 +00:00
padding-block: 8px;
padding-inline: 0;
2022-08-02 19:31:55 +00:00
user-select: none;
}
&__info {
2023-04-20 17:03:43 +00:00
margin-inline-start: 8px;
2022-08-02 19:31:55 +00:00
}
&__label {
align-items: center;
display: flex;
justify-content: flex-start;
flex: 1;
}
&__name {
@include font-body-1-bold;
font-weight: 400;
2022-08-02 19:31:55 +00:00
}
&__description {
@include font-body-2;
font-size: 12px;
color: $color-gray-25;
2022-08-02 19:31:55 +00:00
}
2022-08-10 18:37:19 +00:00
&__checkbox {
2023-04-20 17:03:43 +00:00
margin-inline-end: 0;
2022-08-10 18:37:19 +00:00
position: relative;
}
&__checkbox input[type='checkbox'] {
cursor: pointer;
height: 0;
position: absolute;
width: 0;
@include keyboard-mode {
&:focus {
&::before {
border-color: $color-ultramarine;
}
outline: none;
}
}
&::before {
@include rounded-corners;
background: inherit;
border: 1.5px solid $color-gray-60;
content: '';
display: block;
height: 20px;
position: absolute;
width: 20px;
}
&:checked {
&::before {
background: $color-ultramarine;
border: 1.5px solid $color-ultramarine;
}
&::after {
border: solid $color-white;
border-width: 0 2px 2px 0;
content: '';
display: block;
height: 11px;
inset-inline-start: 7px;
2022-08-10 18:37:19 +00:00
position: absolute;
top: 3px;
transform: rotate(45deg);
width: 6px;
}
}
}
2022-08-02 19:31:55 +00:00
}
&__selected-lists {
@include font-body-2;
2022-08-10 18:37:19 +00:00
color: $color-gray-15;
2023-04-20 17:03:43 +00:00
padding-inline-end: 16px;
2022-08-02 19:31:55 +00:00
user-select: none;
flex: 1;
display: flex;
align-items: center;
min-height: 32px;
2022-08-02 19:31:55 +00:00
}
2022-08-10 18:37:19 +00:00
&__ok {
@include button-reset;
@include rounded-corners;
align-items: center;
background: $color-ultramarine;
display: flex;
height: 32px;
justify-content: center;
width: 32px;
&::disabled {
background: $color-gray-60;
}
&::after {
2023-05-04 18:04:22 +00:00
@include color-svg('../images/icons/v3/check/check.svg', $color-white);
2022-08-10 18:37:19 +00:00
content: '';
height: 18px;
width: 18px;
}
}
2022-08-02 19:31:55 +00:00
&__send {
@include button-reset;
@include rounded-corners;
align-items: center;
background: $color-ultramarine;
display: flex;
2022-08-10 18:37:19 +00:00
height: 32px;
2022-08-02 19:31:55 +00:00
justify-content: center;
2022-08-10 18:37:19 +00:00
width: 32px;
2022-08-02 19:31:55 +00:00
&::disabled {
background: $color-gray-60;
}
&::after {
2023-05-04 18:04:22 +00:00
@include color-svg('../images/icons/v3/send/send-fill.svg', $color-white);
2022-08-02 19:31:55 +00:00
content: '';
2022-08-10 18:37:19 +00:00
height: 18px;
width: 18px;
2022-08-02 19:31:55 +00:00
}
}
// more specific to override StoryImage
.SendStoryModal {
&__story {
border-radius: 12px;
backdrop-filter: blur(90px);
&__image {
object-fit: contain;
}
}
}
2022-08-02 19:31:55 +00:00
}