lbry-desktop/ui/scss/component/nag.scss

109 lines
1.9 KiB
SCSS
Raw Normal View History

2020-07-09 20:18:56 +02:00
$nag-z-index: 997;
$nag-helpful-z-index: 998;
$nag-error-z-index: 999;
2019-12-06 22:12:48 +01:00
.nag {
z-index: $nag-z-index;
2019-12-06 22:12:48 +01:00
position: fixed;
2020-02-26 19:39:03 +01:00
left: 0;
2019-12-06 22:12:48 +01:00
bottom: 0;
width: 100%;
2020-06-01 19:03:19 +02:00
padding: var(--spacing-s);
2019-12-06 22:12:48 +01:00
background-color: var(--color-nag);
color: var(--color-white);
font-weight: var(--font-weight-bold);
text-align: center;
2020-02-21 22:05:20 +01:00
.button--link {
font-weight: var(--font-weight-bold);
color: var(--color-white);
text-decoration: underline;
}
2020-03-26 16:18:05 +01:00
@media (max-width: $breakpoint-small) {
text-align: left;
}
2019-12-06 22:12:48 +01:00
}
.nag--inline {
position: absolute;
top: 0;
bottom: auto;
z-index: 1 !important; /* booooooo */
}
.nag--relative {
position: relative;
}
2020-02-26 19:39:03 +01:00
.nag--helpful {
2021-04-26 21:19:17 +02:00
background-color: var(--color-primary);
2020-02-26 19:39:03 +01:00
color: var(--color-white);
z-index: $nag-helpful-z-index;
}
.nag--error {
background-color: var(--color-error);
color: var(--color-text-error);
z-index: $nag-error-z-index;
2020-02-26 19:39:03 +01:00
}
2020-03-26 16:18:05 +01:00
.nag__message {
display: inline;
@media (max-width: $breakpoint-small) {
&::after {
content: '';
display: block;
}
}
}
2019-12-06 22:12:48 +01:00
.nag__button {
line-height: 1;
2020-06-01 19:03:19 +02:00
margin-left: var(--spacing-s);
margin-right: var(--spacing-s);
2019-12-06 22:12:48 +01:00
border-radius: var(--border-radius);
border: 1px solid var(--color-white);
2020-06-01 19:03:19 +02:00
padding: var(--spacing-xxs);
2019-12-06 22:12:48 +01:00
color: var(--color-white);
font-weight: var(--font-weight-bold);
&:hover {
background-color: var(--color-white);
2020-02-27 19:28:44 +01:00
color: var(--color-nag);
2020-02-26 19:39:03 +01:00
}
2020-03-26 16:18:05 +01:00
@media (max-width: $breakpoint-small) {
margin-left: 0;
2020-06-01 19:03:19 +02:00
margin-top: var(--spacing-s);
2020-03-26 16:18:05 +01:00
}
2020-02-26 19:39:03 +01:00
}
.nag__button--helpful {
&:hover {
color: var(--color-secondary);
2019-12-06 22:12:48 +01:00
}
}
.nag__button--error {
color: var(--color-text-error);
border-color: var(--color-text-error);
&:hover {
background-color: var(--color-text-error);
color: var(--color-white);
}
}
2019-12-06 22:12:48 +01:00
.nag__close {
margin-left: auto;
2020-06-01 19:03:19 +02:00
right: var(--spacing-m);
2019-12-06 22:12:48 +01:00
position: absolute;
border: none;
svg {
stroke-width: 4px;
}
}