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
203 lines
5.8 KiB
CSS
203 lines
5.8 KiB
CSS
.button {
|
|
border-radius: var(--Corner-radius-rounded);
|
|
border-width: 2px;
|
|
border-style: solid;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--Space-x05);
|
|
|
|
&:disabled,
|
|
&[data-disabled] {
|
|
cursor: unset;
|
|
}
|
|
|
|
&[data-pending] {
|
|
cursor: progress;
|
|
}
|
|
}
|
|
.button:focus-visible {
|
|
outline: 2px auto -webkit-focus-ring-color; /*color should probably be cutomized for each variant later on*/
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
.size-large {
|
|
padding: var(--Space-x2) var(--Space-x3);
|
|
}
|
|
|
|
.size-medium {
|
|
padding: var(--Space-x15) var(--Space-x2);
|
|
}
|
|
|
|
.size-small {
|
|
padding: 10px var(--Space-x2);
|
|
}
|
|
|
|
.variant-primary {
|
|
background-color: var(--Component-Button-Brand-Primary-Fill-Default);
|
|
border-color: var(--Component-Button-Brand-Primary-Border-Default);
|
|
color: var(--Component-Button-Brand-Primary-On-fill-Default);
|
|
|
|
@media (hover: hover) {
|
|
&:not(:disabled):hover {
|
|
background-color: var(--Component-Button-Brand-Primary-Fill-Hover);
|
|
border-color: var(--Component-Button-Brand-Primary-Border-Hover);
|
|
color: var(--Component-Button-Brand-Primary-On-fill-Hover);
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
background-color: var(--Component-Button-Brand-Primary-Fill-Disabled);
|
|
border-color: var(--Component-Button-Brand-Primary-Border-Disabled);
|
|
color: var(--Component-Button-Brand-Primary-On-fill-Disabled);
|
|
}
|
|
}
|
|
|
|
.variant-primary.color-inverted {
|
|
background-color: var(--Component-Button-Inverted-Fill-Default);
|
|
border-color: var(--Component-Button-Inverted-Border-Default);
|
|
color: var(--Component-Button-Inverted-On-fill-Default);
|
|
|
|
@media (hover: hover) {
|
|
&:not(:disabled):hover {
|
|
background-color: var(--Component-Button-Inverted-Fill-Hover);
|
|
border-color: var(--Component-Button-Inverted-Border-Hover);
|
|
color: var(--Component-Button-Inverted-On-fill-Hover);
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
background-color: var(--Component-Button-Inverted-Fill-Disabled);
|
|
border-color: var(--Component-Button-Inverted-Border-Disabled);
|
|
color: var(--Component-Button-Inverted-On-fill-Disabled);
|
|
}
|
|
}
|
|
|
|
.variant-secondary {
|
|
background-color: var(--Component-Button-Brand-Secondary-Fill-Default);
|
|
border-color: var(--Component-Button-Brand-Secondary-Border-Default);
|
|
color: var(--Component-Button-Brand-Secondary-On-fill-Default);
|
|
|
|
@media (hover: hover) {
|
|
&:not(:disabled):hover {
|
|
background-color: var(--Component-Button-Brand-Secondary-Fill-Hover);
|
|
border-color: var(--Component-Button-Brand-Secondary-Border-Hover);
|
|
color: var(--Component-Button-Brand-Secondary-On-fill-Hover);
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
background-color: var(--Component-Button-Brand-Secondary-Fill-Disabled);
|
|
border-color: var(--Component-Button-Brand-Secondary-Border-Disabled);
|
|
color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
|
|
}
|
|
}
|
|
|
|
.variant-secondary.color-inverted {
|
|
background-color: var(--Component-Button-Brand-Secondary-Fill-Default);
|
|
border-color: var(--Component-Button-Brand-Secondary-Border-Inverted);
|
|
color: var(--Component-Button-Brand-Secondary-On-fill-Inverted);
|
|
|
|
@media (hover: hover) {
|
|
&:not(:disabled):hover {
|
|
background-color: var(--Component-Button-Brand-Secondary-Fill-Hover);
|
|
border-color: var(
|
|
--Component-Button-Brand-Secondary-Border-Hover-inverted
|
|
);
|
|
color: var(--Component-Button-Brand-Secondary-On-fill-Hover-inverted);
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
background-color: var(--Component-Button-Brand-Secondary-Fill-Disabled);
|
|
border-color: var(--Component-Button-Brand-Secondary-Border-Disabled);
|
|
color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
|
|
}
|
|
}
|
|
|
|
.variant-tertiary {
|
|
background-color: var(--Component-Button-Brand-Tertiary-Fill-Default);
|
|
border-color: var(--Component-Button-Brand-Tertiary-Border-Default);
|
|
color: var(--Component-Button-Brand-Tertiary-On-fill-Default);
|
|
|
|
@media (hover: hover) {
|
|
&:not(:disabled):hover {
|
|
background-color: var(--Component-Button-Brand-Tertiary-Fill-Hover);
|
|
border-color: var(--Component-Button-Brand-Tertiary-Border-Hover);
|
|
color: var(--Component-Button-Brand-Tertiary-On-fill-Hover);
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
background-color: var(--Component-Button-Brand-Tertiary-Fill-Disabled);
|
|
border-color: var(--Component-Button-Brand-Tertiary-Border-Disabled);
|
|
color: var(--Component-Button-Brand-Tertiary-On-fill-Disabled);
|
|
}
|
|
}
|
|
|
|
.variant-inverted {
|
|
background-color: var(--Component-Button-Inverted-Default);
|
|
border-color: transparent;
|
|
color: var(--Component-Button-Inverted-On-fill-Default);
|
|
|
|
@media (hover: hover) {
|
|
&:not(:disabled):hover {
|
|
background-color: var(--Component-Button-Inverted-Hover);
|
|
border-color: transparent;
|
|
color: var(--Component-Button-Inverted-On-fill-Hover);
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
background-color: var(--Component-Button-Inverted-Disabled);
|
|
border-color: transparent;
|
|
color: var(--Component-Button-Inverted-On-fill-Disabled);
|
|
}
|
|
}
|
|
|
|
.variant-text {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
color: var(--Component-Button-Brand-Secondary-On-fill-Default);
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
|
|
@media (hover: hover) {
|
|
&:not(:disabled):hover {
|
|
color: var(--Component-Button-Brand-Secondary-On-fill-Hover);
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.variant-text.no-wrapping {
|
|
padding: var(--Space-x025) 0;
|
|
border-width: 0;
|
|
}
|
|
|
|
.variant-text.color-inverted {
|
|
color: var(--Component-Button-Brand-Secondary-On-fill-Inverted);
|
|
|
|
@media (hover: hover) {
|
|
&:not(:disabled):hover {
|
|
color: var(--Component-Button-Brand-Secondary-On-fill-Hover-inverted);
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
color: var(--Component-Button-Brand-Secondary-On-fill-Disabled);
|
|
}
|
|
}
|
|
|
|
.spinnerWrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: var(--Space-x1);
|
|
}
|