signal-desktop/stylesheets/components/Toast.scss

74 lines
1.5 KiB
SCSS
Raw Normal View History

2021-09-22 20:59:54 +00:00
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.Toast {
2021-10-07 21:45:38 +00:00
$border-radius-px: 8px;
2021-09-22 20:59:54 +00:00
@include font-body-2;
2021-10-06 21:00:51 +00:00
align-items: center;
2021-10-07 21:45:38 +00:00
border-radius: $border-radius-px;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.05), 0px 4px 12px rgba(0, 0, 0, 0.3);
2021-10-06 21:00:51 +00:00
display: flex;
justify-content: space-between;
2023-04-20 17:03:43 +00:00
@include position-absolute-center-x;
2021-09-22 20:59:54 +00:00
text-align: center;
2021-09-29 20:23:06 +00:00
user-select: none;
overflow: hidden;
2021-12-01 23:13:09 +00:00
z-index: $z-index-toast;
2022-09-27 00:09:50 +00:00
bottom: 62px;
2021-09-22 20:59:54 +00:00
@include light-theme {
2021-10-06 21:00:51 +00:00
background-color: $color-gray-80;
2021-09-22 20:59:54 +00:00
color: $color-white;
}
@include dark-theme {
2021-10-06 21:00:51 +00:00
background-color: $color-gray-75;
color: $color-gray-05;
2021-09-22 20:59:54 +00:00
}
&--align-left {
2023-04-20 17:03:43 +00:00
inset-inline-start: 20px;
bottom: 18px;
}
2021-10-06 21:00:51 +00:00
&__content {
2023-04-20 17:03:43 +00:00
padding-block: 8px;
padding-inline: 12px;
2021-10-06 21:00:51 +00:00
}
&__button {
@include font-body-2-bold;
2021-09-22 20:59:54 +00:00
cursor: pointer;
2023-04-20 17:03:43 +00:00
padding-block: 8px;
padding-inline: 12px;
white-space: nowrap;
2021-10-06 21:00:51 +00:00
@include light-theme {
2023-04-20 17:03:43 +00:00
border-inline-start: 1px solid $color-gray-65;
2021-10-06 21:00:51 +00:00
}
@include dark-theme {
2023-04-20 17:03:43 +00:00
border-inline-start: 1px solid $color-gray-60;
2021-10-06 21:00:51 +00:00
}
outline: none;
2021-10-06 21:00:51 +00:00
&:hover {
@include light-theme {
background-color: $color-gray-65;
}
@include dark-theme {
background-color: $color-gray-60;
}
}
&:focus {
@include keyboard-mode {
background-color: $color-gray-65;
}
@include dark-keyboard-mode {
background-color: $color-gray-60;
}
}
2021-09-22 20:59:54 +00:00
}
}