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

sweetalert: ported to sweetalert2 and simplified code. (#465)

Browse Source 
No styling changes besides making the "primary" button-text bold (aligned with desktop app)
This commit is contained in:
MartB
2020-03-02 19:52:09 +01:00
committed by GitHub
parent c3407ac35a
commit 0b5a74aa9f
7 changed files with 64 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/scss/plugins.scss
View File

@@ -1,6 +1,7 @@
$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome.scss";
@import "~angular2-toaster/toaster";
@import "~sweetalert2/src/sweetalert2.scss";
#toast-container {
&.toast-top-right {
@@ -86,41 +87,31 @@ $fa-font-path: "~font-awesome/fonts";
}
}
// SweetAlert
// SweetAlert2
.swal-overlay {
.swal2-container {
background-color: rgba(0,0,0,.3);
}
.swal-modal {
.swal2-popup {
padding: 0;
background-color: $modal-content-bg;
color: $body-color;
border: $modal-content-border-width solid #9a9a9a;
@include border-radius($modal-content-border-radius);
width: 34em; // slightly bigger than the hardcoded 478px in v1.
.swal-icon {
.swal2-icon {
margin: 15px auto 0 auto;
width: auto;
height: auto;
border: none;
}
.swal-content {
margin: 0;
padding: 15px 0;
.swal2-content {
padding-bottom: 15px;
font-size: $font-size-base;
border-bottom: $modal-footer-border-width solid $modal-footer-border-color;
.swal-text {
&:last-child {
margin-bottom: 0;
}
&:first-child {
margin-top: 0;
}
}
.swal-title, .swal-text {
padding-left: 0;
padding-right: 0;
}
}
i.swal-custom-icon {
@@ -129,36 +120,38 @@ $fa-font-path: "~font-awesome/fonts";
font-size: 35px;
}
.swal-title {
.swal2-title {
padding: 10px 10px 15px 10px;
margin: 0;
font-size: $font-size-lg;
color: $body-color;
}
.swal-text {
.swal2-content {
font-size: $font-size-base;
color: $body-color;
}
.swal-footer {
.swal2-actions {
padding: 15px 10px 10px 10px;
margin: 0;
background-color: $input-bg;
@include border-radius($modal-content-border-radius);
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
flex-direction: row;
justify-content: flex-start;
font-size: $font-size-base;
button.swal-button {
button {
margin-left: 10px;
@extend .btn;
&.swal-button--confirm {
&.swal2-confirm {
@extend .btn-primary;
font-weight: bold;
}
&.swal-button--cancel {
&.swal2-cancel {
@extend .btn-outline-secondary;
background-color: #ffffff;
}