fleet/frontend/components/InfoBanner/_styles.scss

42 lines
917 B
SCSS

.info-banner {
display: flex;
justify-content: space-between;
padding: $pad-medium;
gap: $pad-large; // Between text and CTA
font-size: $x-small;
font-weight: $regular;
color: $core-fleet-black;
line-height: $line-height;
&__page-banner {
padding: $pad-large $pad-xlarge;
width: auto;
gap: $pad-small;
}
&__info {
// Do not use display flex as it will have adverse effects on spacing around HTML tags
align-content: center;
p {
margin: $pad-small 0 0 0; // TOFIX: this causes weird top margin noticed in #28110
}
}
&__cta {
display: flex;
align-items: center;
color: $core-fleet-black;
text-align: right;
gap: $pad-small;
min-width: max-content;
margin-left: $pad-small;
button {
margin-left: $pad-small;
}
}
&__close {
margin: -$pad-medium; // Offset clickable padding from making banner taller
}
}