2d237b8d14
Fix/book 115 hidden focus indicators * added focus ring to "how it works" text and close button in modal * fix(BOOK-115): added focus ring to Hotel Sidepeek close button * fix(BOOK-115): enabled selecting ancillaries with keyboard nav * fix(BOOK-115): added focus indicator to "View and print receipt" in Manage Stay * fix(BOOK-105 & BOOK-115): combined the two radio groups in payment selection to one, fixes focus indicator issue * fix(BOOK-115): added focus indicator to shortcut links * fix(BOOK-115): updated ancillaries keyboard selection * fix(BOOK-115): removed tabIndex from Link component * fix(BOOK-115): fixed single payment radio button not focusable * fix(BOOK-115): updated to onKeyDown * added id to "credit card" * removed toUpperCase() on lables * removed brackets * moved the focus indicator to the DS Button component * removed !important from ButtonLink css * changed <label> to <fieldset> and <legend> and added aria-label to PaymentOptionGroup * removed css class from sidepeek that was previously removed * reverted changes and synced Guarantee radiogroup with Payment radiogroup to use same semantics * removed duplicate label * removed old sub heading Approved-by: Erik Tiekstra
77 lines
1.2 KiB
CSS
77 lines
1.2 KiB
CSS
.root {
|
|
position: relative;
|
|
}
|
|
|
|
.viewport {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.container {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: 85%;
|
|
gap: var(--Spacing-x2);
|
|
}
|
|
|
|
.item {
|
|
min-width: 0;
|
|
}
|
|
|
|
.item:focus-visible {
|
|
outline: 2px auto -webkit-focus-ring-color;
|
|
outline-offset: 1px;
|
|
}
|
|
.buttonWrapper {
|
|
position: absolute;
|
|
top: 50%;
|
|
z-index: 1;
|
|
|
|
&.previous {
|
|
left: 0;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
&.next {
|
|
right: 0;
|
|
transform: translate(50%, -50%);
|
|
}
|
|
}
|
|
|
|
.dots {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: var(--Spacing-x1);
|
|
margin-top: var(--Spacing-x3);
|
|
}
|
|
|
|
.dot {
|
|
height: 8px;
|
|
width: 8px;
|
|
border-radius: var(--Corner-radius-lg);
|
|
background: var(--UI-Grey-40);
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.dot[data-active="true"] {
|
|
width: 22px;
|
|
background: var(--UI-Text-Medium-contrast);
|
|
}
|
|
|
|
@media screen and (max-width: 767px) {
|
|
.buttonWrapper {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
.container {
|
|
grid-auto-columns: calc(50% - var(--Spacing-x2) / 2);
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1024px) {
|
|
.container {
|
|
grid-auto-columns: calc(33.33% - var(--Spacing-x2) * 2 / 3);
|
|
}
|
|
}
|