signal-desktop/stylesheets/components/TimelineWarning.scss
2021-05-28 09:15:17 -07:00

76 lines
1.4 KiB
SCSS

// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.module-TimelineWarning {
@mixin icon($icon) {
@include light-theme {
@include color-svg($icon, $color-gray-60);
}
@include dark-theme {
@include color-svg($icon, $color-gray-20);
}
}
align-items: center;
display: flex;
padding: 16px;
user-select: none;
border-top-width: 1px;
border-top-style: solid;
&:last-child {
border-bottom-width: 1px;
border-bottom-style: solid;
}
@include light-theme {
color: $color-gray-65;
background: $color-gray-02;
border-color: $color-gray-15;
}
@include dark-theme {
color: $color-gray-15;
background: $color-gray-80;
border-color: $color-gray-65;
}
&__generic-icon {
@include icon('../images/icons/v2/info-outline-24.svg');
width: 20px;
height: 20px;
}
&__text {
@include font-body-2;
flex-grow: 1;
margin-left: 12px;
margin-right: 12px;
&__link {
@include button-reset;
display: inline;
font-weight: bold;
text-decoration: none;
@include light-theme {
color: $color-ultramarine-icon;
}
@include dark-theme {
color: $color-ios-blue-tint;
}
}
}
&__close-button {
@include button-reset;
&::after {
@include icon('../images/icons/v2/x-24.svg');
content: '';
display: block;
height: 20px;
width: 20px;
}
}
}