signal-desktop/stylesheets/components/Modal.scss

226 lines
4.1 KiB
SCSS

// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.module-Modal {
@include popper-shadow();
border-radius: 8px;
overflow: hidden;
// We need this to be a number not divisible by 5 so that if we have sticky
// buttons the bottom doesn't bleed through by 1px.
max-height: 89vh;
display: flex;
flex-direction: column;
@include light-theme() {
background: $color-white;
color: $color-gray-90;
}
@include dark-theme() {
background: $color-gray-80;
color: $color-gray-05;
}
&__header {
align-items: center;
display: flex;
justify-content: space-between;
padding: 16px 16px 1em 16px;
&--with-back-button .module-Modal__title {
text-align: center;
}
}
&__title {
@include font-body-1-bold;
margin: 0;
padding: 0;
flex: 1;
}
&__back-button {
@include button-reset;
border-radius: 4px;
height: 24px;
width: 24px;
&::before {
content: '';
display: block;
width: 100%;
height: 100%;
@include light-theme {
@include color-svg(
'../images/icons/v2/chevron-left-24.svg',
$color-gray-75
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v2/chevron-left-24.svg',
$color-gray-15
);
}
}
@include light-theme {
&:hover,
&:focus {
background: $color-gray-02;
}
&:active {
background: $color-gray-05;
}
}
@include dark-theme {
&:hover,
&:focus {
background: $color-gray-80;
}
&:active {
background: $color-gray-75;
}
}
}
&__close-button {
@include button-reset;
border-radius: 4px;
height: 24px;
width: 24px;
&::before {
content: '';
display: block;
width: 100%;
height: 100%;
@include light-theme {
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-75);
}
@include dark-theme {
@include color-svg('../images/icons/v2/x-24.svg', $color-gray-15);
}
}
@include light-theme {
&:hover,
&:focus {
background: $color-gray-02;
}
&:active {
background: $color-gray-05;
}
}
@include dark-theme {
&:hover,
&:focus {
background: $color-gray-80;
}
&:active {
background: $color-gray-75;
}
}
}
&__body {
@include scrollbar;
@include font-body-1;
margin: 0;
overflow-y: overlay;
overflow-x: auto;
}
&--padded {
.module-Modal__body {
padding: 16px;
}
}
&--has-header {
.module-Modal__body {
padding-top: 0;
border-top: 1px solid transparent;
&--scrolled {
@include light-theme {
border-top-color: $color-gray-05;
}
@include dark-theme {
border-top-color: $color-gray-80;
}
}
}
}
&__button-footer {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
padding: 1em 16px 16px 16px;
gap: 8px;
.module-Button {
margin-left: 8px;
}
&--one-button-per-line {
flex-direction: column;
align-items: flex-end;
}
}
// Overrides for a modal with important message
&--important {
padding: 10px 12px 16px 12px;
.module-Modal__header {
// Necessary because of the larger top margins for the title
align-items: start;
padding: 0;
}
.module-Modal__body {
padding: 0 12px 4px 12px !important;
}
.module-Modal__body p {
margin: 0 0 20px 0;
}
.module-Modal__title {
@include font-title-2;
text-align: center;
margin: 10px 0 22px 0;
flex-shrink: 0;
&--with-x-button {
margin-top: 31px;
}
}
.module-Modal__button-footer {
justify-content: center;
margin-top: 27px;
flex-grow: 0;
flex-shrink: 0;
padding: 0 12px 4px 12px;
.module-Button {
flex-grow: 1;
max-width: 152px;
&:not(:first-child) {
margin-left: 16px;
}
}
}
}
}