@barnardos/customisable-consent-banner
Version:
Customisable version of Barnardo's consent banner.
81 lines (80 loc) • 1.65 kB
CSS
._barnardos-cookie-overlay {
z-index: 3;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
}
._barnardos-consent-banner {
background-color: #fff;
padding: 0.5rem 1rem 1rem;
position: fixed;
top: 10%;
right: 5%;
bottom: 10%;
left: 5%;
z-index: 4;
overflow-y: scroll;
}
@media screen and (min-width: 360px) and (min-height: 600px) {
._barnardos-consent-banner {
top: 50%;
left: 50%;
bottom: 30%;
width: 90%;
max-width: 36rem;
transform: translate(-50%, -50%);
bottom: auto;
}
}
._barnardos-consent-banner:focus {
outline: none;
}
._barnardos-consent-banner h2 {
margin-right: 2rem;
}
._barnardos-consent-banner p {
display: inline-block;
margin: 0.5rem 0 1.5rem;
vertical-align: middle;
}
._barnardos-consent-banner div {
display: inline-block;
white-space: nowrap;
}
._barnardos-consent-banner button {
appearance: none;
background-color: #558200;
border: 1px solid #558200;
border-radius: 0;
color: #fff;
display: inline-block;
font-size: 1.125rem;
font-weight: 800;
letter-spacing: 0;
line-height: 1.5rem;
padding: 0.5rem 2rem;
text-align: center;
user-select: none;
vertical-align: middle;
white-space: nowrap;
margin: 0 1em 0 0;
}
._barnardos-consent-banner button:hover,
._barnardos-consent-banner button:focus {
background-color: #192700;
border-color: #192700;
}
._barnardos-consent-banner a {
text-decoration: underline;
}
._barnardos-consent-banner ._barnardos-cookie-close {
position: absolute;
right: 0;
top: 0;
margin: 0;
line-height: 1;
padding: 0.5rem;
}