bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-17 16:53:34 +00:00
Code Issues Releases Wiki Activity

[CL-18] toast component and service (#6490)

Browse Source 
Update toast styles and new service to CL.
This commit is contained in:
Will Martin
2024-04-18 13:23:35 -04:00
committed by GitHub
parent 9277465951
commit d5f503a0d6
32 changed files with 440 additions and 534 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/web/src/scss/styles.scss
View File

@@ -43,8 +43,6 @@
@import "~bootstrap/scss/_utilities";
@import "~bootstrap/scss/_print";
@import "~ngx-toastr/toastr";
@import "./base";
@import "./buttons";
@import "./callouts";
@@ -54,5 +52,4 @@
@import "./pages";
@import "./plugins";
@import "./tables";
@import "./toasts";
@import "./vault-filters";

117
apps/web/src/scss/toasts.scss
View File

@@ -1,117 +0,0 @@
.toast-container {
.toast-close-button {
font-size: 18px;
margin-right: 4px;
}
.ngx-toastr {
align-items: center;
background-image: none !important;
border-radius: $border-radius;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
display: flex;
padding: 15px;
.toast-close-button {
position: absolute;
right: 5px;
top: 0;
}
&:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}
.icon i::before {
float: left;
font-style: normal;
font-family: $icomoon-font-family;
font-size: 25px;
line-height: 20px;
padding-right: 15px;
}
.toast-message {
p {
margin-bottom: 0.5rem;
&:last-child {
margin-bottom: 0;
}
}
}
&.toast-danger,
&.toast-error {
@include themify($themes) {
background-color: themed("danger");
}
&,
&:before,
& .toast-close-button {
@include themify($themes) {
color: themed("textDangerColor") !important;
}
}
.icon i::before {
content: map_get($icons, "error");
}
}
&.toast-warning {
@include themify($themes) {
background-color: themed("warning");
}
&,
&:before,
& .toast-close-button {
@include themify($themes) {
color: themed("textWarningColor") !important;
}
}
.icon i::before {
content: map_get($icons, "exclamation-triangle");
}
}
&.toast-info {
@include themify($themes) {
background-color: themed("info");
}
&,
&:before,
& .toast-close-button {
@include themify($themes) {
color: themed("textInfoColor") !important;
}
}
.icon i:before {
content: map_get($icons, "info-circle");
}
}
&.toast-success {
@include themify($themes) {
background-color: themed("success");
}
&,
&:before,
& .toast-close-button {
@include themify($themes) {
color: themed("textSuccessColor") !important;
}
}
.icon i:before {
content: map_get($icons, "check");
}
}
}
}