4ec1e85d84
* feat(BOOK-293): Adjusted padding of the buttons to match Figma design * feat(BOOK-293): Updated variants for IconButton * feat(BOOK-113): Updated focus indicators on buttons and added default focus ring color * feat(BOOK-293): Replaced buttons inside booking widget Approved-by: Christel Westerberg
97 lines
1.6 KiB
CSS
97 lines
1.6 KiB
CSS
.campaignBanner {
|
|
width: 100%;
|
|
position: relative;
|
|
background-color: var(--Surface-Brand-Primary-3-Default);
|
|
}
|
|
|
|
.content {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: 1fr max-content;
|
|
width: 100%;
|
|
max-width: var(--max-width-navigation);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.innerContent {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
text-decoration: none;
|
|
color: var(--Text-Inverted);
|
|
padding: var(--Space-x025) 0;
|
|
gap: var(--Space-x15);
|
|
}
|
|
|
|
.text {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--Space-x1);
|
|
}
|
|
|
|
.marquee {
|
|
padding: 4px 4px 4px 0; /* Adjustment to handle overflow for link focus */
|
|
}
|
|
.marqueeText {
|
|
gap: var(--Space-x15);
|
|
}
|
|
|
|
.tag {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
|
|
&:not(.withBookingCode) {
|
|
height: 24px;
|
|
padding: 0 var(--Space-x1);
|
|
flex-shrink: 0;
|
|
border-radius: var(--Corner-radius-sm);
|
|
border: 1px solid var(--Border-Inverted);
|
|
}
|
|
}
|
|
|
|
.closeButton {
|
|
z-index: 1;
|
|
}
|
|
|
|
.fakeLink {
|
|
color: var(--Text-Inverted);
|
|
}
|
|
|
|
.innerContent:hover .fakeLink {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.bookingCode {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--Space-x05);
|
|
|
|
& > span {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 767px) {
|
|
.innerContent {
|
|
padding-left: var(--Space-x2);
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
.content {
|
|
max-width: var(--max-width-page);
|
|
gap: var(--Space-x15);
|
|
}
|
|
|
|
.marquee {
|
|
gap: var(--Space-x2);
|
|
}
|
|
|
|
.closeButton {
|
|
margin-right: -12px; /* Adjusts the position because of banners max width */
|
|
}
|
|
}
|