LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Update snackbar design

Browse source
This commit is contained in:
Raphael Wickihalder 2022-06-21 10:11:28 +02:00
parent b53fc3732e
commit 3e0f1c63c9
No known key found for this signature in database
GPG key ID: 05179BB92383243D
1 changed files with 6 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
ui/scss/component/_snack-bar.scss
View file

@ -2,15 +2,18 @@
bottom: 2rem; bottom: 2rem;
right: 2rem; right: 2rem;
max-width: 20rem; max-width: 20rem;
background-color: var(--color-primary); background-color: rgba(var(--color-primary-static), 0.9);
color: var(--color-primary-contrast); color: var(--color-primary-contrast);
border-radius: var(--border-radius); border-radius: var(--border-radius);
border: 2px solid var(--color-primary);
padding: var(--spacing-s) var(--spacing-m) var(--spacing-s) var(--spacing-m); padding: var(--spacing-s) var(--spacing-m) var(--spacing-s) var(--spacing-m);
position: fixed; position: fixed;
transition: all var(--transition-duration) var(--transition-type); transition: all var(--transition-duration) var(--transition-type);
z-index: 10000; // hack to get it over react modal z-index: 10000; // hack to get it over react modal
display: flex; display: flex;
flex-direction: column; flex-direction: column;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
.button__label { .button__label {
color: var(--color-primary-contrast); color: var(--color-primary-contrast);
@ -38,6 +41,7 @@
} }
.snack-bar--stacked-non-error { .snack-bar--stacked-non-error {
/*
box-shadow: // The top layer shadow box-shadow: // The top layer shadow
0 1px 1px var(--color-border), 0 1px 1px var(--color-border),
// The second layer // The second layer
@ -48,6 +52,7 @@
//0 20px 0 -10px var(--color-primary), //0 20px 0 -10px var(--color-primary),
//// The third layer shadow //// The third layer shadow
//0 20px 1px -9px var(--color-border); //0 20px 1px -9px var(--color-border);
*/
} }
.snack-bar--stacked-error { .snack-bar--stacked-error {