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

65 lines
1.3 KiB
SCSS
Raw Normal View History

2017-04-10 14:32:40 +02:00
.snack-bar {
bottom: 2rem;
2020-07-23 16:22:57 +02:00
right: 2rem;
max-width: 20rem;
2019-11-22 22:13:00 +01:00
background-color: var(--color-snack-bg);
color: var(--color-snack);
border-radius: 0.5rem;
2020-06-01 19:03:19 +02:00
padding: var(--spacing-s) var(--spacing-l) var(--spacing-s) var(--spacing-m);
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
display: flex;
flex-direction: column;
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);
}
2020-07-23 16:22:57 +02:00
.snack-bar--notification {
@extend .card;
background-color: var(--color-card-background);
color: var(--color-text);
}
2017-04-10 14:32:40 +02:00
.snack-bar__action {
display: inline-block;
2020-06-01 19:03:19 +02:00
margin: var(--spacing-s) 0;
margin-left: auto;
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
2020-09-18 05:49:45 +02:00
.credit-amount {
color: inherit;
}
.icon--CheckCircle,
.icon--AlertCircle {
margin-right: var(--spacing-m);
min-width: 1rem;
2017-04-10 14:32:40 +02:00
}
}