components/banner/banner.module.scss
@use 'sass:map';
@use 'sass:color';
@use 'styles/typography';
$message-width: 800px;
.wrapper {
width: 100%;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(
to right,
#{color.adjust(var(--primary), $hue: 10%, $lightness: -10%)} 9.38%,
#{color.adjust(var(--primary), $hue: -15%)} 88.54%
);
transform-origin: top center;
transition: transform 0.2s ease, height 0.3s ease;
z-index: 102;
font-size: 14px;
text-align: center;
color: var(--background);
}
.hidden {
height: 0;
transform: scaleY(0);
}
.content {
color: inherit;
text-decoration: none;
cursor: pointer;
font-size: 14px;
text-align: center;
}
.mobileTitle,
.desktopTitle {
@include typography.typography('body1');
font-weight: 600;
font-size: 14px;
}
.close {
display: inline-flex;
color: var(--accents-2);
position: absolute;
right: 20px;
cursor: pointer;
}
@media only screen and (max-width: $message-width) {
.desktopTitle {
display: none;
}
}
@media only screen and (min-width: $message-width + 1px) {
.mobileTitle {
display: none;
}
}