lbry.com/web/scss/components/_alert.scss
ポール ウェッブ 3094dda001 Redesign
2019-03-19 08:55:04 -05:00

100 lines
1.6 KiB
SCSS

.alert {
@include font-sans;
bottom: 0; left: 0;
cursor: default;
line-height: 1.33;
padding-top: 3rem;
padding-right: env(safe-area-inset-right);
padding-bottom: 3rem;
padding-left: env(safe-area-inset-left);
position: fixed;
text-align: left;
width: 100%;
z-index: 30;
&::after {
top: 0; left: 0;
bottom: 0; right: 0;
background-color: var(--lbry-yellow-1);
content: "";
opacity: 0.9;
position: absolute;
z-index: -1;
}
> div:first-of-type {
position: relative;
}
@media (min-width: 901px) {
font-size: 1rem;
}
@media (max-width: 900px) {
font-size: 0.8rem;
}
p,
button {
display: inline-block;
}
p {
padding-right: 1rem;
width: calc(100% - 2.25rem);
}
a {
font-weight: 600;
text-decoration: underline;
}
button {
width: 1.25rem; height: 1.25rem;
top: 0; right: 0;
background-color: white;
border: none;
border-radius: 50%;
cursor: pointer;
display: block;
font-size: 1rem;
line-height: 1;
margin-right: 1rem;
margin-left: 1rem;
position: absolute;
text-align: center;
@media (min-resolution: 1.1dppx) {
padding: 0 0 3px 0;
}
@media (max-resolution: 1dppx) {
padding: 1px 0 0 0;
}
}
.inner-wrap {
margin-right: auto;
margin-left: auto;
max-width: 1200px;
@media (min-width: 901px) {
padding-right: 1rem;
padding-left: 1rem;
}
@media (max-width: 900px) {
padding-right: 2rem;
padding-left: 2rem;
}
&::after {
clear: both;
content: "";
display: block;
}
}
}