lbry-desktop/ui/scss/component/_snack-bar.scss

51 lines
1 KiB
SCSS
Raw Normal View History

2017-04-10 14:32:40 +02:00
.snack-bar {
bottom: 2rem;
left: 2rem;
2019-11-22 22:13:00 +01:00
background-color: var(--color-snack-bg);
color: var(--color-snack);
border-radius: 0.5rem;
2019-06-11 20:10:58 +02:00
padding: var(--spacing-small) var(--spacing-large) var(--spacing-small) var(--spacing-medium);
2018-04-17 07:24:02 +02:00
position: fixed;
transition: all var(--transition-duration) var(--transition-type);
2018-10-17 19:14:24 +02:00
z-index: 10000; // hack to get it over react modal
2017-04-10 14:32:40 +02:00
}
.snack-bar--upgrade {
@extend .snack-bar;
left: auto;
right: 2rem;
2019-11-22 22:13:00 +01:00
background-color: var(--color-snack-bg-upgrade);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.snack-bar--error {
2019-11-22 22:13:00 +01:00
background-color: var(--color-snack-bg-error);
}
2017-04-10 14:32:40 +02:00
.snack-bar__action {
display: inline-block;
2019-06-11 20:10:58 +02:00
margin: var(--spacing-small) 0;
2017-04-10 14:32:40 +02:00
min-width: min-content;
2019-11-25 18:42:49 +01:00
color: var(--color-white);
2018-04-17 07:24:02 +02:00
span:hover {
text-decoration: underline;
2018-04-17 07:24:02 +02:00
}
}
.snack-bar__message {
align-items: center;
display: flex;
flex-direction: row;
2019-07-21 23:31:22 +02:00
font-size: var(--font-body);
2018-04-17 07:24:02 +02:00
div {
&:nth-of-type(1) {
2019-06-11 20:10:58 +02:00
margin-right: var(--spacing-medium);
2018-04-17 07:24:02 +02:00
}
2017-04-10 14:32:40 +02:00
}
}