@skyscanner/backpack-web 42.24.0 → 42.25.0-dev-v27590992098.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +58 -58
- package/bpk-component-layout/src/BpkProvider.js +28 -4
- package/bpk-component-price/index.d.ts +5 -0
- package/bpk-component-price/index.js +3 -1
- package/bpk-component-price/src/BpkPrice.d.ts +21 -0
- package/bpk-component-price/src/BpkPrice.js +3 -15
- package/bpk-component-price/src/common-types.d.ts +10 -0
- package/bpk-component-price/src/common-types.js +3 -1
- package/bpk-component-star-rating/index.d.ts +9 -0
- package/bpk-component-star-rating/index.js +3 -1
- package/bpk-component-star-rating/src/BpkInteractiveStar.d.ts +17 -0
- package/bpk-component-star-rating/src/BpkInteractiveStar.js +4 -13
- package/bpk-component-star-rating/src/BpkInteractiveStarRating.d.ts +20 -0
- package/bpk-component-star-rating/src/BpkInteractiveStarRating.js +2 -14
- package/bpk-component-star-rating/src/BpkStar.d.ts +21 -0
- package/bpk-component-star-rating/src/BpkStar.js +9 -22
- package/bpk-component-star-rating/src/BpkStarRating.d.ts +21 -0
- package/bpk-component-star-rating/src/BpkStarRating.js +2 -10
- package/bpk-component-star-rating/src/themeAttributes.d.ts +2 -0
- package/bpk-component-star-rating/src/themeAttributes.js +3 -1
- package/bpk-component-star-rating/src/withInteractiveStarRatingState.d.ts +42 -0
- package/bpk-component-star-rating/src/withInteractiveStarRatingState.js +9 -10
- package/bpk-stylesheets/base.css +1 -1
- package/bpk-stylesheets/primitives.css +9 -1
- package/bpk-stylesheets/theme-backpack-dark.css +39 -11
- package/bpk-stylesheets/theme-backpack-light.css +39 -11
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -25,65 +25,65 @@ To contribute please see [contributing.md](CONTRIBUTING.md).
|
|
|
25
25
|
## List of packages
|
|
26
26
|
|
|
27
27
|
[`bpk-animate-height`](/packages/bpk-animate-height)
|
|
28
|
-
[`bpk-component-accordion`](/packages/bpk-component-accordion)
|
|
29
|
-
[`bpk-component-autosuggest`](/packages/bpk-component-autosuggest)
|
|
30
|
-
[`bpk-component-badge`](/packages/bpk-component-badge)
|
|
31
|
-
[`bpk-component-banner-alert`](/packages/bpk-component-banner-alert)
|
|
32
|
-
[`bpk-component-barchart`](/packages/bpk-component-barchart)
|
|
33
|
-
[`bpk-component-blockquote`](/packages/bpk-component-blockquote)
|
|
34
|
-
[`bpk-component-bottom-sheet`](/packages/bpk-component-bottom-sheet)
|
|
35
|
-
[`bpk-component-breadcrumb`](/packages/bpk-component-breadcrumb)
|
|
36
|
-
[`bpk-component-breakpoint`](/packages/bpk-component-breakpoint)
|
|
37
|
-
[`bpk-component-button`](/packages/bpk-component-button)
|
|
38
|
-
[`bpk-component-calendar`](/packages/bpk-component-calendar)
|
|
39
|
-
[`bpk-component-card`](/packages/bpk-component-card)
|
|
40
|
-
[`bpk-component-checkbox`](/packages/bpk-component-checkbox)
|
|
41
|
-
[`bpk-component-chip`](/packages/bpk-component-chip)
|
|
42
|
-
[`bpk-component-close-button`](/packages/bpk-component-close-button)
|
|
43
|
-
[`bpk-component-code`](/packages/bpk-component-code)
|
|
44
|
-
[`bpk-component-datatable`](/packages/bpk-component-datatable)
|
|
45
|
-
[`bpk-component-datepicker`](/packages/bpk-component-datepicker)
|
|
46
|
-
[`bpk-component-description-list`](/packages/bpk-component-description-list)
|
|
47
|
-
[`bpk-component-dialog`](/packages/bpk-component-dialog)
|
|
48
|
-
[`bpk-component-drawer`](/packages/bpk-component-drawer)
|
|
49
|
-
[`bpk-component-fieldset`](/packages/bpk-component-fieldset)
|
|
50
|
-
[`bpk-component-form-validation`](/packages/bpk-component-form-validation)
|
|
51
|
-
[`bpk-component-graphic-promotion`](/packages/bpk-component-graphic-promotion)
|
|
52
|
-
[`bpk-component-grid-toggle`](/packages/bpk-component-grid-toggle)
|
|
53
|
-
[`bpk-component-horizontal-nav`](/packages/bpk-component-horizontal-nav)
|
|
54
|
-
[`bpk-component-icon`](/packages/bpk-component-icon)
|
|
55
|
-
[`bpk-component-image`](/packages/bpk-component-image)
|
|
56
|
-
[`bpk-component-infinite-scroll`](/packages/bpk-component-infinite-scroll)
|
|
57
|
-
[`bpk-component-input`](/packages/bpk-component-input)
|
|
58
|
-
[`bpk-component-label`](/packages/bpk-component-label)
|
|
59
|
-
[`bpk-component-link`](/packages/bpk-component-link)
|
|
60
|
-
[`bpk-component-list`](/packages/bpk-component-list)
|
|
61
|
-
[`bpk-component-loading-button`](/packages/bpk-component-loading-button)
|
|
62
|
-
[`bpk-component-mobile-scroll-container`](/packages/bpk-component-mobile-scroll-container)
|
|
63
|
-
[`bpk-component-modal`](/packages/bpk-component-modal)
|
|
64
|
-
[`bpk-component-navigation-bar`](/packages/bpk-component-navigation-bar)
|
|
65
|
-
[`bpk-component-nudger`](/packages/bpk-component-nudger)
|
|
66
|
-
[`bpk-component-page-indicator`](/packages/bpk-component-page-indicator)
|
|
67
|
-
[`bpk-component-pagination`](/packages/bpk-component-pagination)
|
|
68
|
-
[`bpk-component-panel`](/packages/bpk-component-panel)
|
|
69
|
-
[`bpk-component-phone-input`](/packages/bpk-component-phone-input)
|
|
70
|
-
[`bpk-component-popover`](/packages/bpk-component-popover)
|
|
71
|
-
[`bpk-component-price-range`](/packages/bpk-component-price-range)
|
|
72
|
-
[`bpk-component-progress`](/packages/bpk-component-progress)
|
|
73
|
-
[`bpk-component-radio`](/packages/bpk-component-radio)
|
|
74
|
-
[`bpk-component-rtl-toggle`](/packages/bpk-component-rtl-toggle)
|
|
75
|
-
[`bpk-component-section-list`](/packages/bpk-component-section-list)
|
|
76
|
-
[`bpk-component-select`](/packages/bpk-component-select)
|
|
77
|
-
[`bpk-component-slider`](/packages/bpk-component-slider)
|
|
78
|
-
[`bpk-component-spinner`](/packages/bpk-component-spinner)
|
|
79
|
-
[`bpk-component-star-rating`](/packages/bpk-component-star-rating)
|
|
80
|
-
[`bpk-component-switch`](/packages/bpk-component-switch)
|
|
81
|
-
[`bpk-component-table`](/packages/bpk-component-table)
|
|
82
|
-
[`bpk-component-text`](/packages/bpk-component-text)
|
|
83
|
-
[`bpk-component-textarea`](/packages/bpk-component-textarea)
|
|
28
|
+
[`bpk-component-accordion`](/packages/backpack-web/src/bpk-component-accordion)
|
|
29
|
+
[`bpk-component-autosuggest`](/packages/backpack-web/src/bpk-component-autosuggest)
|
|
30
|
+
[`bpk-component-badge`](/packages/backpack-web/src/bpk-component-badge)
|
|
31
|
+
[`bpk-component-banner-alert`](/packages/backpack-web/src/bpk-component-banner-alert)
|
|
32
|
+
[`bpk-component-barchart`](/packages/backpack-web/src/bpk-component-barchart)
|
|
33
|
+
[`bpk-component-blockquote`](/packages/backpack-web/src/bpk-component-blockquote)
|
|
34
|
+
[`bpk-component-bottom-sheet`](/packages/backpack-web/src/bpk-component-bottom-sheet)
|
|
35
|
+
[`bpk-component-breadcrumb`](/packages/backpack-web/src/bpk-component-breadcrumb)
|
|
36
|
+
[`bpk-component-breakpoint`](/packages/backpack-web/src/bpk-component-breakpoint)
|
|
37
|
+
[`bpk-component-button`](/packages/backpack-web/src/bpk-component-button)
|
|
38
|
+
[`bpk-component-calendar`](/packages/backpack-web/src/bpk-component-calendar)
|
|
39
|
+
[`bpk-component-card`](/packages/backpack-web/src/bpk-component-card)
|
|
40
|
+
[`bpk-component-checkbox`](/packages/backpack-web/src/bpk-component-checkbox)
|
|
41
|
+
[`bpk-component-chip`](/packages/backpack-web/src/bpk-component-chip)
|
|
42
|
+
[`bpk-component-close-button`](/packages/backpack-web/src/bpk-component-close-button)
|
|
43
|
+
[`bpk-component-code`](/packages/backpack-web/src/bpk-component-code)
|
|
44
|
+
[`bpk-component-datatable`](/packages/backpack-web/src/bpk-component-datatable)
|
|
45
|
+
[`bpk-component-datepicker`](/packages/backpack-web/src/bpk-component-datepicker)
|
|
46
|
+
[`bpk-component-description-list`](/packages/backpack-web/src/bpk-component-description-list)
|
|
47
|
+
[`bpk-component-dialog`](/packages/backpack-web/src/bpk-component-dialog)
|
|
48
|
+
[`bpk-component-drawer`](/packages/backpack-web/src/bpk-component-drawer)
|
|
49
|
+
[`bpk-component-fieldset`](/packages/backpack-web/src/bpk-component-fieldset)
|
|
50
|
+
[`bpk-component-form-validation`](/packages/backpack-web/src/bpk-component-form-validation)
|
|
51
|
+
[`bpk-component-graphic-promotion`](/packages/backpack-web/src/bpk-component-graphic-promotion)
|
|
52
|
+
[`bpk-component-grid-toggle`](/packages/backpack-web/src/bpk-component-grid-toggle)
|
|
53
|
+
[`bpk-component-horizontal-nav`](/packages/backpack-web/src/bpk-component-horizontal-nav)
|
|
54
|
+
[`bpk-component-icon`](/packages/backpack-web/src/bpk-component-icon)
|
|
55
|
+
[`bpk-component-image`](/packages/backpack-web/src/bpk-component-image)
|
|
56
|
+
[`bpk-component-infinite-scroll`](/packages/backpack-web/src/bpk-component-infinite-scroll)
|
|
57
|
+
[`bpk-component-input`](/packages/backpack-web/src/bpk-component-input)
|
|
58
|
+
[`bpk-component-label`](/packages/backpack-web/src/bpk-component-label)
|
|
59
|
+
[`bpk-component-link`](/packages/backpack-web/src/bpk-component-link)
|
|
60
|
+
[`bpk-component-list`](/packages/backpack-web/src/bpk-component-list)
|
|
61
|
+
[`bpk-component-loading-button`](/packages/backpack-web/src/bpk-component-loading-button)
|
|
62
|
+
[`bpk-component-mobile-scroll-container`](/packages/backpack-web/src/bpk-component-mobile-scroll-container)
|
|
63
|
+
[`bpk-component-modal`](/packages/backpack-web/src/bpk-component-modal)
|
|
64
|
+
[`bpk-component-navigation-bar`](/packages/backpack-web/src/bpk-component-navigation-bar)
|
|
65
|
+
[`bpk-component-nudger`](/packages/backpack-web/src/bpk-component-nudger)
|
|
66
|
+
[`bpk-component-page-indicator`](/packages/backpack-web/src/bpk-component-page-indicator)
|
|
67
|
+
[`bpk-component-pagination`](/packages/backpack-web/src/bpk-component-pagination)
|
|
68
|
+
[`bpk-component-panel`](/packages/backpack-web/src/bpk-component-panel)
|
|
69
|
+
[`bpk-component-phone-input`](/packages/backpack-web/src/bpk-component-phone-input)
|
|
70
|
+
[`bpk-component-popover`](/packages/backpack-web/src/bpk-component-popover)
|
|
71
|
+
[`bpk-component-price-range`](/packages/backpack-web/src/bpk-component-price-range)
|
|
72
|
+
[`bpk-component-progress`](/packages/backpack-web/src/bpk-component-progress)
|
|
73
|
+
[`bpk-component-radio`](/packages/backpack-web/src/bpk-component-radio)
|
|
74
|
+
[`bpk-component-rtl-toggle`](/packages/backpack-web/src/bpk-component-rtl-toggle)
|
|
75
|
+
[`bpk-component-section-list`](/packages/backpack-web/src/bpk-component-section-list)
|
|
76
|
+
[`bpk-component-select`](/packages/backpack-web/src/bpk-component-select)
|
|
77
|
+
[`bpk-component-slider`](/packages/backpack-web/src/bpk-component-slider)
|
|
78
|
+
[`bpk-component-spinner`](/packages/backpack-web/src/bpk-component-spinner)
|
|
79
|
+
[`bpk-component-star-rating`](/packages/backpack-web/src/bpk-component-star-rating)
|
|
80
|
+
[`bpk-component-switch`](/packages/backpack-web/src/bpk-component-switch)
|
|
81
|
+
[`bpk-component-table`](/packages/backpack-web/src/bpk-component-table)
|
|
82
|
+
[`bpk-component-text`](/packages/backpack-web/src/bpk-component-text)
|
|
83
|
+
[`bpk-component-textarea`](/packages/backpack-web/src/bpk-component-textarea)
|
|
84
84
|
[`bpk-theming`](/packages/bpk-theming)
|
|
85
|
-
[`bpk-component-ticket`](/packages/bpk-component-ticket)
|
|
86
|
-
[`bpk-component-tooltip`](/packages/bpk-component-tooltip)
|
|
85
|
+
[`bpk-component-ticket`](/packages/backpack-web/src/bpk-component-ticket)
|
|
86
|
+
[`bpk-component-tooltip`](/packages/backpack-web/src/bpk-component-tooltip)
|
|
87
87
|
[`bpk-react-utils`](/packages/bpk-react-utils)
|
|
88
88
|
[`bpk-mixins`](/packages/bpk-mixins)
|
|
89
89
|
[`bpk-stylesheets`](/packages/bpk-stylesheets)
|
|
@@ -41,6 +41,20 @@ const FALLBACK_LOCALE_BY_DIRECTION = {
|
|
|
41
41
|
// Intl.Locale.textInfo is unavailable (Node < 22, older browsers).
|
|
42
42
|
const RTL_LANGUAGE_SUBTAGS = new Set(['ar', 'he', 'fa', 'ur', 'yi', 'iw', 'ps', 'sd', 'ug', 'ku']);
|
|
43
43
|
|
|
44
|
+
// Returns true when `locale` is a BCP 47 string that Intl.Locale accepts.
|
|
45
|
+
// Ark's LocaleProvider calls `new Intl.Locale(locale)` without a try/catch,
|
|
46
|
+
// so any value we hand it must be validated here first or it throws
|
|
47
|
+
// "Incorrect locale information provided".
|
|
48
|
+
const isValidLocale = locale => {
|
|
49
|
+
try {
|
|
50
|
+
// Assigning the result (rather than bare `new`) satisfies the no-new lint rule.
|
|
51
|
+
const parsed = new Intl.Locale(locale);
|
|
52
|
+
return Boolean(parsed);
|
|
53
|
+
} catch {
|
|
54
|
+
return false;
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
|
|
44
58
|
// Returns the text direction implied by a BCP 47 locale string.
|
|
45
59
|
// Uses Intl.Locale.textInfo when available (Chrome 99+, Safari 15.4+, Firefox 126+, Node 22+);
|
|
46
60
|
// falls back to a known-RTL-subtag lookup.
|
|
@@ -58,11 +72,18 @@ const getLangDir = locale => {
|
|
|
58
72
|
//
|
|
59
73
|
// Priority rules:
|
|
60
74
|
// 1. If html[dir] is explicitly set:
|
|
61
|
-
// - Use html[lang] only when its direction is
|
|
75
|
+
// - Use html[lang] only when it is a valid locale AND its direction is
|
|
76
|
+
// consistent with html[dir].
|
|
62
77
|
// - Otherwise fall back to FALLBACK_LOCALE_BY_DIRECTION[dir].
|
|
63
78
|
// This prevents an LTR html[lang] (e.g. 'en' from a page template) from
|
|
64
79
|
// overriding an explicit html[dir]="rtl" signal (e.g. from a dev RTL toggle).
|
|
65
|
-
// 2. If html[dir] is not set: use html[lang] if
|
|
80
|
+
// 2. If html[dir] is not set: use html[lang] if it is a valid locale, else 'en-US'.
|
|
81
|
+
//
|
|
82
|
+
// Every value returned here is validated with isValidLocale() because Ark's
|
|
83
|
+
// LocaleProvider passes it straight to `new Intl.Locale()`, which throws on
|
|
84
|
+
// malformed input (e.g. '', '123', 'en_US'). An unvalidated value crashes the
|
|
85
|
+
// provider, and when the ErrorBoundary fallback also mounts BpkProvider the same
|
|
86
|
+
// bad value is re-read on every remount, producing an indefinite crash loop.
|
|
66
87
|
//
|
|
67
88
|
// SSR-safe: returns 'en-US' when document is unavailable.
|
|
68
89
|
const getArkLocale = () => {
|
|
@@ -70,10 +91,13 @@ const getArkLocale = () => {
|
|
|
70
91
|
const explicitDir = document.documentElement.getAttribute('dir');
|
|
71
92
|
const lang = document.documentElement.getAttribute('lang');
|
|
72
93
|
if (explicitDir === 'rtl' || explicitDir === 'ltr') {
|
|
73
|
-
if (lang && getLangDir(lang) === explicitDir)
|
|
94
|
+
if (lang && isValidLocale(lang) && getLangDir(lang) === explicitDir) {
|
|
95
|
+
return lang;
|
|
96
|
+
}
|
|
74
97
|
return FALLBACK_LOCALE_BY_DIRECTION[explicitDir];
|
|
75
98
|
}
|
|
76
|
-
|
|
99
|
+
if (lang && isValidLocale(lang)) return lang;
|
|
100
|
+
return 'en-US';
|
|
77
101
|
};
|
|
78
102
|
|
|
79
103
|
// Reactive hook: subscribes to document.documentElement[dir] and [lang] changes
|
|
@@ -14,7 +14,9 @@
|
|
|
14
14
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
|
-
*/
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
import BpkPrice from "./src/BpkPrice";
|
|
18
20
|
import { SIZES, ALIGNS } from "./src/common-types";
|
|
19
21
|
export default BpkPrice;
|
|
20
22
|
export { SIZES, ALIGNS };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
import { SIZES, ALIGNS } from './common-types';
|
|
3
|
+
type NativeDivProps = HTMLAttributes<HTMLDivElement>;
|
|
4
|
+
export type Props = Omit<NativeDivProps, 'className'> & {
|
|
5
|
+
price: string;
|
|
6
|
+
size?: (typeof SIZES)[keyof typeof SIZES];
|
|
7
|
+
align?: (typeof ALIGNS)[keyof typeof ALIGNS];
|
|
8
|
+
className?: string | null;
|
|
9
|
+
leadingText?: string | null;
|
|
10
|
+
/**
|
|
11
|
+
* **Experimental** This prop is experimental and subject to change.
|
|
12
|
+
* Use with caution.
|
|
13
|
+
*/
|
|
14
|
+
leadingClassName?: string | null;
|
|
15
|
+
trailingText?: string | null;
|
|
16
|
+
previousPrice?: string | null;
|
|
17
|
+
icon?: ReactNode;
|
|
18
|
+
dataAttributes?: Record<string, string>;
|
|
19
|
+
};
|
|
20
|
+
declare const BpkPrice: ({ align, className, dataAttributes, icon, leadingClassName, leadingText, previousPrice, price, size, trailingText, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
export default BpkPrice;
|
|
@@ -14,7 +14,8 @@
|
|
|
14
14
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
|
-
*/
|
|
17
|
+
*/
|
|
18
|
+
|
|
18
19
|
import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
|
|
19
20
|
import { cssModules } from "../../bpk-react-utils";
|
|
20
21
|
import { SIZES, ALIGNS } from "./common-types";
|
|
@@ -75,9 +76,7 @@ const BpkPrice = ({
|
|
|
75
76
|
});
|
|
76
77
|
};
|
|
77
78
|
return /*#__PURE__*/_jsxs("div", {
|
|
78
|
-
className: getClassName('bpk-price', isAlignRight && 'bpk-price--right', className)
|
|
79
|
-
// $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
|
|
80
|
-
,
|
|
79
|
+
className: getClassName('bpk-price', isAlignRight && 'bpk-price--right', className),
|
|
81
80
|
...rest,
|
|
82
81
|
children: [/*#__PURE__*/_jsxs("div", {
|
|
83
82
|
className: getClassName(previousPrice && 'bpk-price__leading', isAlignRight && 'bpk-price__leading--right', leadingClassName),
|
|
@@ -120,15 +119,4 @@ const BpkPrice = ({
|
|
|
120
119
|
}), isAlignRight && getTrailingTextNode()]
|
|
121
120
|
});
|
|
122
121
|
};
|
|
123
|
-
BpkPrice.propTypes = {
|
|
124
|
-
price: PropTypes.string.isRequired,
|
|
125
|
-
size: PropTypes.oneOf(Object.keys(SIZES)),
|
|
126
|
-
align: PropTypes.oneOf(Object.keys(ALIGNS)),
|
|
127
|
-
className: PropTypes.string,
|
|
128
|
-
leadingText: PropTypes.string,
|
|
129
|
-
trailingText: PropTypes.string,
|
|
130
|
-
previousPrice: PropTypes.string,
|
|
131
|
-
leadingClassName: PropTypes.string,
|
|
132
|
-
dataAttributes: PropTypes.objectOf(PropTypes.string)
|
|
133
|
-
};
|
|
134
122
|
export default BpkPrice;
|
|
@@ -14,7 +14,9 @@
|
|
|
14
14
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
|
-
*/
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
export const SIZES = {
|
|
18
20
|
xsmall: 'xsmall',
|
|
19
21
|
small: 'small',
|
|
20
22
|
medium: 'medium',
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import BpkInteractiveStar, { type Props as BpkInteractiveStarProps } from './src/BpkInteractiveStar';
|
|
2
|
+
import BpkInteractiveStarRating, { type Props as BpkInteractiveStarRatingProps } from './src/BpkInteractiveStarRating';
|
|
3
|
+
import BpkStar, { BpkStarNonRtl, STAR_TYPES, type Props as BpkStarProps } from './src/BpkStar';
|
|
4
|
+
import BpkStarRating, { ROUNDING_TYPES, type Props as BpkStarRatingProps } from './src/BpkStarRating';
|
|
5
|
+
import themeAttributes from './src/themeAttributes';
|
|
6
|
+
import withInteractiveStarRatingState from './src/withInteractiveStarRatingState';
|
|
7
|
+
export { BpkStar, BpkStarNonRtl, STAR_TYPES, ROUNDING_TYPES, BpkInteractiveStar, BpkInteractiveStarRating, withInteractiveStarRatingState, themeAttributes, };
|
|
8
|
+
export type { BpkStarProps, BpkStarRatingProps, BpkInteractiveStarProps, BpkInteractiveStarRatingProps, };
|
|
9
|
+
export default BpkStarRating;
|
|
@@ -14,7 +14,9 @@
|
|
|
14
14
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
|
-
*/
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
import BpkInteractiveStar from "./src/BpkInteractiveStar";
|
|
18
20
|
import BpkInteractiveStarRating from "./src/BpkInteractiveStarRating";
|
|
19
21
|
import BpkStar, { BpkStarNonRtl, STAR_TYPES } from "./src/BpkStar";
|
|
20
22
|
import BpkStarRating, { ROUNDING_TYPES } from "./src/BpkStarRating";
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { ButtonHTMLAttributes, MouseEventHandler } from 'react';
|
|
2
|
+
import { type STAR_TYPES } from './BpkStar';
|
|
3
|
+
type InteractiveStarType = typeof STAR_TYPES.EMPTY | typeof STAR_TYPES.FULL;
|
|
4
|
+
type NativeButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
|
|
5
|
+
export type Props = Omit<NativeButtonProps, 'className' | 'type' | 'onClick' | 'onMouseEnter' | 'name' | 'value' | 'aria-label' | 'aria-pressed'> & {
|
|
6
|
+
label: string;
|
|
7
|
+
name: string;
|
|
8
|
+
onClick: MouseEventHandler<HTMLButtonElement>;
|
|
9
|
+
onMouseEnter: MouseEventHandler<HTMLButtonElement>;
|
|
10
|
+
type: InteractiveStarType;
|
|
11
|
+
value: number;
|
|
12
|
+
selected?: boolean;
|
|
13
|
+
large?: boolean;
|
|
14
|
+
extraLarge?: boolean;
|
|
15
|
+
};
|
|
16
|
+
declare const BpkInteractiveStar: ({ label, name, onClick, onMouseEnter, selected, type, value, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export default BpkInteractiveStar;
|
|
@@ -14,9 +14,10 @@
|
|
|
14
14
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
|
-
*/
|
|
17
|
+
*/
|
|
18
|
+
|
|
18
19
|
import { cssModules } from "../../bpk-react-utils";
|
|
19
|
-
import { BpkStarNonRtl
|
|
20
|
+
import { BpkStarNonRtl } from "./BpkStar";
|
|
20
21
|
import STYLES from "./BpkInteractiveStar.module.css";
|
|
21
22
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
22
23
|
const getClassName = cssModules(STYLES);
|
|
@@ -46,20 +47,10 @@ const BpkInteractiveStar = ({
|
|
|
46
47
|
children: /*#__PURE__*/_jsx("div", {
|
|
47
48
|
className: iconClassNames,
|
|
48
49
|
children: /*#__PURE__*/_jsx(BpkStarNonRtl, {
|
|
49
|
-
type: type
|
|
50
|
-
/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md */,
|
|
50
|
+
type: type,
|
|
51
51
|
...rest
|
|
52
52
|
})
|
|
53
53
|
})
|
|
54
54
|
});
|
|
55
55
|
};
|
|
56
|
-
BpkInteractiveStar.propTypes = {
|
|
57
|
-
label: PropTypes.string.isRequired,
|
|
58
|
-
name: PropTypes.string.isRequired,
|
|
59
|
-
onClick: PropTypes.func.isRequired,
|
|
60
|
-
onMouseEnter: PropTypes.func.isRequired,
|
|
61
|
-
type: PropTypes.oneOf([STAR_TYPES.EMPTY, STAR_TYPES.FULL]).isRequired,
|
|
62
|
-
value: PropTypes.number.isRequired,
|
|
63
|
-
selected: PropTypes.bool
|
|
64
|
-
};
|
|
65
56
|
export default BpkInteractiveStar;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { HTMLAttributes, MouseEvent } from 'react';
|
|
2
|
+
export declare const getTypeByRating: (starNumber: number, rating: number) => "full" | "empty";
|
|
3
|
+
type StarLabel = (rating: number, maxRating: number) => string;
|
|
4
|
+
type RatingHandler = (rating: number, event: MouseEvent<HTMLButtonElement>) => unknown;
|
|
5
|
+
type NativeDivProps = HTMLAttributes<HTMLDivElement>;
|
|
6
|
+
export type Props = Omit<NativeDivProps, 'className' | 'id' | 'onMouseLeave'> & {
|
|
7
|
+
getStarLabel: StarLabel;
|
|
8
|
+
id: string;
|
|
9
|
+
className?: string | null;
|
|
10
|
+
hoverRating?: number;
|
|
11
|
+
large?: boolean;
|
|
12
|
+
extraLarge?: boolean;
|
|
13
|
+
maxRating?: number;
|
|
14
|
+
onMouseLeave?: () => unknown;
|
|
15
|
+
onRatingHover?: RatingHandler;
|
|
16
|
+
onRatingSelect?: RatingHandler;
|
|
17
|
+
rating?: number;
|
|
18
|
+
};
|
|
19
|
+
declare const BpkInteractiveStarRating: ({ className, extraLarge, getStarLabel, hoverRating, id, large, maxRating, onMouseLeave, onRatingHover, onRatingSelect, rating, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
export default BpkInteractiveStarRating;
|
|
@@ -14,7 +14,8 @@
|
|
|
14
14
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
|
-
*/
|
|
17
|
+
*/
|
|
18
|
+
|
|
18
19
|
import { cssModules } from "../../bpk-react-utils";
|
|
19
20
|
import BpkInteractiveStar from "./BpkInteractiveStar";
|
|
20
21
|
import { STAR_TYPES } from "./BpkStar";
|
|
@@ -70,17 +71,4 @@ const BpkInteractiveStarRating = ({
|
|
|
70
71
|
children: stars
|
|
71
72
|
});
|
|
72
73
|
};
|
|
73
|
-
BpkInteractiveStarRating.propTypes = {
|
|
74
|
-
getStarLabel: PropTypes.func.isRequired,
|
|
75
|
-
id: PropTypes.string.isRequired,
|
|
76
|
-
className: PropTypes.string,
|
|
77
|
-
hoverRating: PropTypes.number,
|
|
78
|
-
large: PropTypes.bool,
|
|
79
|
-
extraLarge: PropTypes.bool,
|
|
80
|
-
maxRating: PropTypes.number,
|
|
81
|
-
onMouseLeave: PropTypes.func,
|
|
82
|
-
onRatingHover: PropTypes.func,
|
|
83
|
-
onRatingSelect: PropTypes.func,
|
|
84
|
-
rating: PropTypes.number
|
|
85
|
-
};
|
|
86
74
|
export default BpkInteractiveStarRating;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export declare const STAR_TYPES: {
|
|
2
|
+
readonly EMPTY: "empty";
|
|
3
|
+
readonly HALF: "half";
|
|
4
|
+
readonly FULL: "full";
|
|
5
|
+
};
|
|
6
|
+
export type StarType = (typeof STAR_TYPES)[keyof typeof STAR_TYPES];
|
|
7
|
+
export type Props = {
|
|
8
|
+
type: StarType;
|
|
9
|
+
className?: string | null;
|
|
10
|
+
large?: boolean;
|
|
11
|
+
extraLarge?: boolean;
|
|
12
|
+
};
|
|
13
|
+
export declare const BpkStarNonRtl: ({ className, extraLarge, large, type, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
declare const _default: {
|
|
15
|
+
(props: {
|
|
16
|
+
className?: string | null;
|
|
17
|
+
[rest: string]: any;
|
|
18
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
displayName: string;
|
|
20
|
+
};
|
|
21
|
+
export default _default;
|
|
@@ -14,7 +14,8 @@
|
|
|
14
14
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
|
-
*/
|
|
17
|
+
*/
|
|
18
|
+
|
|
18
19
|
import { withRtlSupport } from "../../bpk-component-icon";
|
|
19
20
|
import LargeIcon from "../../bpk-component-icon/lg/star";
|
|
20
21
|
import HalfLargeIcon from "../../bpk-component-icon/lg/star-half";
|
|
@@ -60,37 +61,23 @@ const BpkStar = ({
|
|
|
60
61
|
HalfIcon = withRtlSupport(HalfExtraLargeIcon);
|
|
61
62
|
}
|
|
62
63
|
if (type === STAR_TYPES.HALF) {
|
|
63
|
-
return (
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
_jsx(
|
|
67
|
-
|
|
68
|
-
...rest,
|
|
69
|
-
children: /*#__PURE__*/_jsx(HalfIcon, {})
|
|
70
|
-
})
|
|
71
|
-
);
|
|
64
|
+
return /*#__PURE__*/_jsx("span", {
|
|
65
|
+
className: [containerClassNames, halfIconClassNames].join(' '),
|
|
66
|
+
...rest,
|
|
67
|
+
children: /*#__PURE__*/_jsx(HalfIcon, {})
|
|
68
|
+
});
|
|
72
69
|
}
|
|
73
70
|
return type === STAR_TYPES.FULL ? /*#__PURE__*/_jsx("span", {
|
|
74
71
|
className: iconClassNames,
|
|
75
|
-
children: /*#__PURE__*/_jsx(Icon
|
|
76
|
-
// $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
|
|
77
|
-
, {
|
|
72
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
|
78
73
|
...rest
|
|
79
74
|
})
|
|
80
75
|
}) : /*#__PURE__*/_jsx("span", {
|
|
81
76
|
className: iconClassNames,
|
|
82
|
-
children: /*#__PURE__*/_jsx(OutlineIcon
|
|
83
|
-
// $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
|
|
84
|
-
, {
|
|
77
|
+
children: /*#__PURE__*/_jsx(OutlineIcon, {
|
|
85
78
|
...rest
|
|
86
79
|
})
|
|
87
80
|
});
|
|
88
81
|
};
|
|
89
|
-
BpkStar.propTypes = {
|
|
90
|
-
type: PropTypes.oneOf([STAR_TYPES.EMPTY, STAR_TYPES.HALF, STAR_TYPES.FULL]).isRequired,
|
|
91
|
-
className: PropTypes.string,
|
|
92
|
-
large: PropTypes.bool,
|
|
93
|
-
extraLarge: PropTypes.bool
|
|
94
|
-
};
|
|
95
82
|
export const BpkStarNonRtl = BpkStar;
|
|
96
83
|
export default withRtlSupport(BpkStar);
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'react';
|
|
2
|
+
export declare const getTypeByRating: (starNumber: number, rating: number) => "full" | "empty" | "half";
|
|
3
|
+
export declare const ROUNDING_TYPES: {
|
|
4
|
+
down: (n: number) => number;
|
|
5
|
+
up: (n: number) => number;
|
|
6
|
+
nearest: (n: number) => number;
|
|
7
|
+
};
|
|
8
|
+
type RatingLabel = string | ((rating: number, maxRating: number) => string);
|
|
9
|
+
type Rounding = typeof ROUNDING_TYPES.down | typeof ROUNDING_TYPES.up | typeof ROUNDING_TYPES.nearest;
|
|
10
|
+
type NativeDivProps = HTMLAttributes<HTMLDivElement>;
|
|
11
|
+
export type Props = Omit<NativeDivProps, 'className' | 'aria-label'> & {
|
|
12
|
+
ratingLabel: RatingLabel;
|
|
13
|
+
className?: string | null;
|
|
14
|
+
large?: boolean;
|
|
15
|
+
extraLarge?: boolean;
|
|
16
|
+
maxRating?: number;
|
|
17
|
+
rating?: number;
|
|
18
|
+
rounding?: Rounding;
|
|
19
|
+
};
|
|
20
|
+
declare const BpkStarRating: ({ className, extraLarge, large, maxRating, rating, ratingLabel, rounding, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
export default BpkStarRating;
|
|
@@ -14,7 +14,8 @@
|
|
|
14
14
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
|
-
*/
|
|
17
|
+
*/
|
|
18
|
+
|
|
18
19
|
import { cssModules } from "../../bpk-react-utils";
|
|
19
20
|
import BpkStar, { STAR_TYPES } from "./BpkStar";
|
|
20
21
|
import STYLES from "./BpkStarRating.module.css";
|
|
@@ -68,13 +69,4 @@ const BpkStarRating = ({
|
|
|
68
69
|
children: stars
|
|
69
70
|
});
|
|
70
71
|
};
|
|
71
|
-
BpkStarRating.propTypes = {
|
|
72
|
-
ratingLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
|
|
73
|
-
className: PropTypes.string,
|
|
74
|
-
large: PropTypes.bool,
|
|
75
|
-
extraLarge: PropTypes.bool,
|
|
76
|
-
maxRating: PropTypes.number,
|
|
77
|
-
rating: PropTypes.number,
|
|
78
|
-
rounding: PropTypes.oneOf([ROUNDING_TYPES.down, ROUNDING_TYPES.up, ROUNDING_TYPES.nearest])
|
|
79
|
-
};
|
|
80
72
|
export default BpkStarRating;
|
|
@@ -14,4 +14,6 @@
|
|
|
14
14
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
|
-
*/
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
export default ['starRatingFilledColor'];
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import type { ComponentType, MouseEvent } from 'react';
|
|
2
|
+
type WithInteractiveStarRatingStateProps = {
|
|
3
|
+
onRatingSelect?: (rating: number, event?: MouseEvent<HTMLButtonElement> | null) => unknown;
|
|
4
|
+
};
|
|
5
|
+
type State = {
|
|
6
|
+
rating: number;
|
|
7
|
+
hoverRating: number;
|
|
8
|
+
};
|
|
9
|
+
declare const withInteractiveStarRatingState: <P extends object>(InteractiveStarRating: ComponentType<P>) => {
|
|
10
|
+
new (props: P & WithInteractiveStarRatingStateProps): {
|
|
11
|
+
onRatingSelect: (rating: number, event?: MouseEvent<HTMLButtonElement> | null) => void;
|
|
12
|
+
onMouseLeave: () => void;
|
|
13
|
+
onRatingHover: (hoverRating: number) => void;
|
|
14
|
+
render(): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
context: unknown;
|
|
16
|
+
setState<K extends keyof State>(state: State | ((prevState: Readonly<State>, props: Readonly<P & WithInteractiveStarRatingStateProps>) => State | Pick<State, K> | null) | Pick<State, K> | null, callback?: (() => void) | undefined): void;
|
|
17
|
+
forceUpdate(callback?: (() => void) | undefined): void;
|
|
18
|
+
readonly props: Readonly<P & WithInteractiveStarRatingStateProps>;
|
|
19
|
+
state: Readonly<State>;
|
|
20
|
+
refs: {
|
|
21
|
+
[key: string]: import("react").ReactInstance;
|
|
22
|
+
};
|
|
23
|
+
componentDidMount?(): void;
|
|
24
|
+
shouldComponentUpdate?(nextProps: Readonly<P & WithInteractiveStarRatingStateProps>, nextState: Readonly<State>, nextContext: any): boolean;
|
|
25
|
+
componentWillUnmount?(): void;
|
|
26
|
+
componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
|
|
27
|
+
getSnapshotBeforeUpdate?(prevProps: Readonly<P & WithInteractiveStarRatingStateProps>, prevState: Readonly<State>): any;
|
|
28
|
+
componentDidUpdate?(prevProps: Readonly<P & WithInteractiveStarRatingStateProps>, prevState: Readonly<State>, snapshot?: any): void;
|
|
29
|
+
componentWillMount?(): void;
|
|
30
|
+
UNSAFE_componentWillMount?(): void;
|
|
31
|
+
componentWillReceiveProps?(nextProps: Readonly<P & WithInteractiveStarRatingStateProps>, nextContext: any): void;
|
|
32
|
+
UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P & WithInteractiveStarRatingStateProps>, nextContext: any): void;
|
|
33
|
+
componentWillUpdate?(nextProps: Readonly<P & WithInteractiveStarRatingStateProps>, nextState: Readonly<State>, nextContext: any): void;
|
|
34
|
+
UNSAFE_componentWillUpdate?(nextProps: Readonly<P & WithInteractiveStarRatingStateProps>, nextState: Readonly<State>, nextContext: any): void;
|
|
35
|
+
};
|
|
36
|
+
displayName: string;
|
|
37
|
+
defaultProps: {
|
|
38
|
+
onRatingSelect: () => null;
|
|
39
|
+
};
|
|
40
|
+
contextType?: import("react").Context<any> | undefined;
|
|
41
|
+
};
|
|
42
|
+
export default withInteractiveStarRatingState;
|
|
@@ -14,29 +14,24 @@
|
|
|
14
14
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
|
-
*/
|
|
17
|
+
*/
|
|
18
|
+
|
|
18
19
|
import { Component } from 'react';
|
|
19
20
|
import { wrapDisplayName } from "../../bpk-react-utils";
|
|
20
21
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
21
22
|
const withInteractiveStarRatingState = InteractiveStarRating => {
|
|
22
23
|
class EnhancedComponent extends Component {
|
|
23
|
-
static propTypes = {
|
|
24
|
-
onRatingSelect: PropTypes.func
|
|
25
|
-
};
|
|
26
24
|
static defaultProps = {
|
|
27
25
|
onRatingSelect: () => null
|
|
28
26
|
};
|
|
29
|
-
constructor() {
|
|
30
|
-
super();
|
|
27
|
+
constructor(props) {
|
|
28
|
+
super(props);
|
|
31
29
|
this.state = {
|
|
32
30
|
rating: 0,
|
|
33
31
|
hoverRating: 0
|
|
34
32
|
};
|
|
35
33
|
}
|
|
36
34
|
onRatingSelect = (rating, event) => {
|
|
37
|
-
if (event) {
|
|
38
|
-
event.persist();
|
|
39
|
-
}
|
|
40
35
|
const callback = () => {
|
|
41
36
|
if (this.props.onRatingSelect) {
|
|
42
37
|
this.props.onRatingSelect(rating, event);
|
|
@@ -57,8 +52,12 @@ const withInteractiveStarRatingState = InteractiveStarRating => {
|
|
|
57
52
|
}));
|
|
58
53
|
};
|
|
59
54
|
render() {
|
|
55
|
+
const {
|
|
56
|
+
onRatingSelect,
|
|
57
|
+
...rest
|
|
58
|
+
} = this.props;
|
|
60
59
|
return /*#__PURE__*/_jsx(InteractiveStarRating, {
|
|
61
|
-
...
|
|
60
|
+
...rest,
|
|
62
61
|
rating: this.state.rating,
|
|
63
62
|
hoverRating: this.state.hoverRating,
|
|
64
63
|
onRatingHover: this.onRatingHover,
|
package/bpk-stylesheets/base.css
CHANGED
|
@@ -16,4 +16,4 @@
|
|
|
16
16
|
* See the License for the specific language governing permissions and
|
|
17
17
|
* limitations under the License.
|
|
18
18
|
*
|
|
19
|
-
*//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:initial}[hidden],template{display:none}a{background-color:#0000;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:initial;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}html{box-sizing:border-box;font-size:100%}*,:after,:before{box-sizing:inherit}body{color:#161616;font-family:var(--bpk-base-font-stack,"Skyscanner Relative",-apple-system,BlinkMacSystemFont,"Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif);font-size:1rem;line-height:1.3rem}body.scaffold-font-size{font-size:13px}body.enable-font-smoothing{-webkit-font-smoothing:antialiased}:focus-visible,[type=button]:focus-visible,[type=reset]:focus-visible,[type=submit]:focus-visible,button:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.hidden,.hide{display:none!important}.visually-hidden,.visuallyhidden{border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;clip:rect(0 0 0 0)}.visually-hidden.focusable:active,.visually-hidden.focusable:focus,.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{height:auto;margin:0;overflow:visible;position:static;width:auto;clip:auto}.invisible{visibility:hidden}.clearfix:after,.clearfix:before{content:"";display:table}.clearfix:after{clear:both}:root{--bpk-radius-none:0;--bpk-radius-full:6.25rem;--bpk-radius-lg:1.5rem;--bpk-radius-md:0.75rem;--bpk-radius-nav-tabs:1.125rem;--bpk-radius-sm:0.5rem;--bpk-radius-xs:0.25rem;--bpk-spacing-base:1rem;--bpk-spacing-lg:1.5rem;--bpk-spacing-md:0.5rem;--bpk-spacing-none:0;--bpk-spacing-sm:0.25rem;--bpk-spacing-xl:2rem;--bpk-spacing-xs:0.125rem;--bpk-spacing-xxl:2.5rem;--bpk-spacing-xxs:0.0625rem;--bpk-spacing-xxxl:4rem;--bpk-spacing-xxxxl:6rem;--bpk-canvas-contrast:#eff3f8;--bpk-canvas-default:#fff;--bpk-private-badge-colour-bg-default:#eff3f8;--bpk-private-badge-colour-bg-inverse:#fff;--bpk-private-badge-colour-bg-outline:#fff0;--bpk-private-badge-colour-bg-subtle:#eff3f8;--bpk-private-badge-colour-stroke-outline:#fff;--bpk-private-badge-dimension-padding-horizontal-default:0.5rem;--bpk-private-badge-dimension-padding-horizontal-subtle:0.5rem;--bpk-private-badge-typography-tmp-badge-label:0.875rem;--bpk-private-badge-typography-tmp-badge-line-height:0;--bpk-private-button-colour-bg-destructive:#e0e4e9;--bpk-private-button-colour-bg-destructive-pressed:#e70866;--bpk-private-button-colour-bg-disabled:#e0e4e9;--bpk-private-button-colour-bg-feature-pressed:#024daf;--bpk-private-button-colour-bg-featured:#0062e3;--bpk-private-button-colour-bg-footer:#fff0;--bpk-private-button-colour-bg-footer-pressed:#fff0;--bpk-private-button-colour-bg-primary:#05203c;--bpk-private-button-colour-bg-primary-on-dark:#fff;--bpk-private-button-colour-bg-primary-on-dark-pressed:#c1c7cf;--bpk-private-button-colour-bg-primary-on-light:#fff;--bpk-private-button-colour-bg-primary-on-light-pressed:#154679;--bpk-private-button-colour-bg-secondary:#e0e4e9;--bpk-private-button-colour-bg-secondary-pressed:#c1c7cf;--bpk-private-button-colour-bg-secondary-on-contrast:#e0e4e9;--bpk-private-button-colour-bg-secondary-on-contrast-pressed:#c1c7cf;--bpk-private-button-colour-bg-secondary-on-dark:#ffffff1a;--bpk-private-button-colour-bg-secondary-on-dark-disabled:#0b121d;--bpk-private-button-colour-bg-secondary-on-dark-pressed:#04182d;--bpk-private-button-colour-text-disruptive:#e70866;--bpk-private-button-colour-text-feature:#fff;--bpk-private-button-colour-text-footer:#fff0;--bpk-private-button-colour-text-link-on-dark:#fff;--bpk-private-button-colour-text-secondary:#161616;--bpk-private-button-dimension-radius:0.5rem;--bpk-private-button-dimension-min-height-default:2.25rem;--bpk-private-button-dimension-min-height-large:3rem;--bpk-private-button-dimension-min-weight-large:3rem;--bpk-private-button-dimension-padding-horizontal-default:1rem;--bpk-private-button-dimension-padding-horizontal-large:1rem;--bpk-private-button-typography-tmp-default-label:1rem;--bpk-private-card-button-contained-fill:#fffc;--bpk-private-carousel-trigger-bg-default:#ffffff80;--bpk-private-carousel-trigger-bg-default-hover:#fffc;--bpk-private-chip-group-filter-colour-bg-icon-hover-on-image:#eff3f8;--bpk-private-chip-group-filter-colour-bg-icon-off-on-image:#fff;--bpk-private-chip-group-filter-colour-bg-icon-on-default:#05203c;--bpk-private-chip-group-filter-colour-bg-icon-on-on-dark:#fff;--bpk-private-chip-group-filter-colour-bg-icon-on-on-image:#05203c;--bpk-private-chip-group-filter-colour-stroke-icon-hover-default:#05203c;--bpk-private-chip-group-filter-colour-stroke-icon-hover-on-dark:#fff;--bpk-private-chip-group-filter-colour-stroke-icon-off-default:#c1c7cf;--bpk-private-chip-group-filter-colour-stroke-icon-off-on-dark:#ffffff80;--bpk-private-chip-group-filter-dimensions-min-height:2.25rem;--bpk-private-chip-colour-bg-default-dismissible-hover:#05203c;--bpk-private-chip-colour-bg-default-on:#05203c;--bpk-private-chip-colour-bg-disabled:#e0e4e9;--bpk-private-chip-colour-bg-on-contrast-hover:#fff;--bpk-private-chip-colour-bg-on-contrast-on:#05203c;--bpk-private-chip-colour-bg-on-dark-dismissible-hover:#fff;--bpk-private-chip-colour-bg-on-dark-hover:#fff;--bpk-private-chip-colour-bg-on-dark-off:#fff0;--bpk-private-chip-colour-bg-on-dark-on:#fff;--bpk-private-chip-colour-bg-on-image-dismissible-hover:#05203c;--bpk-private-chip-colour-bg-on-image-on:#eff3f8;--bpk-private-chip-colour-border-default-dismissible-hover:#fff0;--bpk-private-chip-colour-border-default-hover:#05203c;--bpk-private-chip-colour-border-default-off:#c1c7cf;--bpk-private-chip-colour-border-on-contrast-off:#fff;--bpk-private-chip-colour-border-on-contrast-on:#05203c;--bpk-private-chip-colour-border-on-dark-disimissible-hover:#fff;--bpk-private-chip-colour-border-on-dark-hover:#fff;--bpk-private-chip-colour-border-on-dark-off:#ffffff80;--bpk-private-chip-colour-stroke-off-on-canvas-contrast-new:#fff0;--bpk-private-chip-colour-text-default-dismissible-hover:#fff;--bpk-private-chip-colour-text-dismissible-on-icon:#ffffff80;--bpk-private-chip-colour-text-on:#fff;--bpk-private-chip-colour-text-on-image:#fff;--bpk-private-chip-colour-text-on-image-dismissible-icon:#626971;--bpk-private-chip-colour-text-on-dark:#161616;--bpk-private-chip-colour-text-on-dark-dismisisble-hover:#161616;--bpk-private-chip-colour-text-on-dark-dismisisble-icon:#626971;--bpk-private-chip-dimension-min-height-width:2rem;--bpk-private-chip-dimension-radius:0.5rem;--bpk-private-date-selector-cheapest-month-highlight:#154679;--bpk-private-date-selector-flexible-date-card:#eff3f8;--bpk-private-dimension-padding-veritcal:0;--bpk-private-info-banner-default:#eff3f8;--bpk-private-info-banner-on-contrast:#fff;--bpk-private-map-cluster-pin:#05203c;--bpk-private-map-cluster-pin-previous-selection:#94c3ff;--bpk-private-map-marker-viewed:#fffc;--bpk-private-map-poi-pin:#8e47ba;--bpk-private-map-previous-selection:#cfe4ff;--bpk-private-navigation-tabs-hover:#154679;--bpk-private-navigation-tabs-outline:#fff3;--bpk-private-navigation-tabs-selected:#024daf;--bpk-private-rating-bar-default:#e0e4e9;--bpk-private-rating-bar-on-contrast:#fff;--bpk-private-segmented-control-canvas-default:#eff3f8;--bpk-private-segmented-control-surface-contrast:#ffffff1a;--bpk-private-segmented-control-surface-contrast-on:#024daf;--bpk-private-shadow-large-blur:0.875rem;--bpk-private-shadow-large-color:#16161640;--bpk-private-shadow-large-position-x:0;--bpk-private-shadow-large-position-y:0.25rem;--bpk-private-shadow-large-spread:0;--bpk-private-shadow-small-blur:0.1875rem;--bpk-private-shadow-small-color:#16161640;--bpk-private-shadow-small-position-x:0;--bpk-private-shadow-small-position-y:0.0625rem;--bpk-private-shadow-small-spread:0;--bpk-private-shadow-xl-blur:3.125rem;--bpk-private-shadow-xl-color:#16161640;--bpk-private-shadow-xl-position-x:0;--bpk-private-shadow-xl-position-y:0.75rem;--bpk-private-shadow-xl-spread:0;--bpk-private-skeleton-on-dark:#ffffff1a;--bpk-private-speech-bubble-colour-bg-contrast:#eff3f8;--bpk-private-speech-bubble-colour-bg-default:#fff;--bpk-private-trip-advisor:#00aa6c;--bpk-core-accent:#0062e3;--bpk-core-eco:#0fa1a9;--bpk-core-primary:#05203c;--bpk-other-line:#c1c7cf;--bpk-other-line-on-dark:#ffffff80;--bpk-other-overlay:#0003;--bpk-other-scrim:#000000b3;--bpk-other-shadow:#16161640;--bpk-status-danger-fill:#ffe9f9;--bpk-status-danger-spot:#e70866;--bpk-status-success-fill:#d4fff2;--bpk-status-success-spot:#0c838a;--bpk-status-warning-fill:#fff7cf;--bpk-status-warning-spot:#f55d42;--bpk-surface-contrast:#05203c;--bpk-surface-default:#fff;--bpk-surface-elevated:#fff;--bpk-surface-hero:#0062e3;--bpk-surface-highlight:#e0e4e9;--bpk-surface-low-contrast:#f7f9fb;--bpk-surface-subtle:#e3f0ff;--bpk-surface-tint:#ffffff1a;--bpk-surface-promo:#0062e3;--bpk-text-disabled:#0003;--bpk-text-disabled-on-dark:#ffffff80;--bpk-text-error:#e70866;--bpk-text-inverse:#fff;--bpk-text-on-dark:#fff;--bpk-text-on-light:#161616;--bpk-text-primary:#161616;--bpk-text-secondary:#626971;--bpk-text-success:#0c838a;--bpk-text-deprecated-link:#0062e3;--bpk-text-hero:#0062e3;--bpk-title:true;--bpk-typography-family-sans-serif:"Skyscanner Relative";--bpk-typography-family-serif:Larken;--bpk-typography-kerning-default:0;--bpk-typography-kerning-loose:0;--bpk-typography-kerning-tight:0;--bpk-typography-style-body:400;--bpk-typography-style-headline:700;--bpk-typography-style-hero:900;--bpk-typography-style-label:700;--bpk-typography-style-subhead:300}:root[data-theme=dark]{--bpk-canvas-contrast:#010913;--bpk-canvas-default:#010913;--bpk-private-badge-colour-bg-default:#243346;--bpk-private-badge-colour-bg-inverse:#243346;--bpk-private-badge-colour-bg-outline:#fff0;--bpk-private-badge-colour-bg-subtle:#243346;--bpk-private-badge-colour-stroke-outline:#fff;--bpk-private-badge-dimension-padding-horizontal-default:0.5rem;--bpk-private-badge-dimension-padding-horizontal-subtle:0.5rem;--bpk-private-badge-typography-tmp-badge-label:0.875rem;--bpk-private-badge-typography-tmp-badge-line-height:0;--bpk-private-button-colour-bg-destructive:#e0e4e9;--bpk-private-button-colour-bg-destructive-pressed:#ff649c;--bpk-private-button-colour-bg-disabled:#0b121d;--bpk-private-button-colour-bg-feature-pressed:#d1f7ff;--bpk-private-button-colour-bg-featured:#d1f7ff;--bpk-private-button-colour-bg-footer:#fff0;--bpk-private-button-colour-bg-footer-pressed:#fff0;--bpk-private-button-colour-bg-primary:#024daf;--bpk-private-button-colour-bg-primary-on-dark:#fff;--bpk-private-button-colour-bg-primary-on-dark-pressed:#c1c7cf;--bpk-private-button-colour-bg-primary-on-light:#fff;--bpk-private-button-colour-bg-primary-on-light-pressed:#002b4b;--bpk-private-button-colour-bg-secondary:#243346;--bpk-private-button-colour-bg-secondary-pressed:#010913;--bpk-private-button-colour-bg-secondary-on-contrast:#243346;--bpk-private-button-colour-bg-secondary-on-contrast-pressed:#010913;--bpk-private-button-colour-bg-secondary-on-dark:#ffffff1a;--bpk-private-button-colour-bg-secondary-on-dark-disabled:#0b121d;--bpk-private-button-colour-bg-secondary-on-dark-pressed:#fff3;--bpk-private-button-colour-text-disruptive:#ff649c;--bpk-private-button-colour-text-feature:#010913;--bpk-private-button-colour-text-footer:#fff0;--bpk-private-button-colour-text-link-on-dark:#fff;--bpk-private-button-colour-text-secondary:#fff;--bpk-private-button-dimension-radius:0.5rem;--bpk-private-button-dimension-min-height-default:2.25rem;--bpk-private-button-dimension-min-height-large:3rem;--bpk-private-button-dimension-min-weight-large:3rem;--bpk-private-button-dimension-padding-horizontal-default:1rem;--bpk-private-button-dimension-padding-horizontal-large:1rem;--bpk-private-button-typography-tmp-default-label:1rem;--bpk-private-card-button-contained-fill:#ffffff1a;--bpk-private-carousel-trigger-bg-default:#ffffff80;--bpk-private-carousel-trigger-bg-default-hover:#fffc;--bpk-private-chip-group-filter-colour-bg-icon-hover-on-image:#010913;--bpk-private-chip-group-filter-colour-bg-icon-off-on-image:#131d2b;--bpk-private-chip-group-filter-colour-bg-icon-on-default:#054184;--bpk-private-chip-group-filter-colour-bg-icon-on-on-dark:#131d2b;--bpk-private-chip-group-filter-colour-bg-icon-on-on-image:#054184;--bpk-private-chip-group-filter-colour-stroke-icon-hover-default:#054184;--bpk-private-chip-group-filter-colour-stroke-icon-hover-on-dark:#131d2b;--bpk-private-chip-group-filter-colour-stroke-icon-off-default:#fff3;--bpk-private-chip-group-filter-colour-stroke-icon-off-on-dark:#fff3;--bpk-private-chip-group-filter-dimensions-min-height:2.25rem;--bpk-private-chip-colour-bg-default-dismissible-hover:#054184;--bpk-private-chip-colour-bg-default-on:#054184;--bpk-private-chip-colour-bg-disabled:#0b121d;--bpk-private-chip-colour-bg-on-contrast-hover:#131d2b;--bpk-private-chip-colour-bg-on-contrast-on:#054184;--bpk-private-chip-colour-bg-on-dark-dismissible-hover:#131d2b;--bpk-private-chip-colour-bg-on-dark-hover:#fff0;--bpk-private-chip-colour-bg-on-dark-off:#fff0;--bpk-private-chip-colour-bg-on-dark-on:#131d2b;--bpk-private-chip-colour-bg-on-image-dismissible-hover:#054184;--bpk-private-chip-colour-bg-on-image-on:#010913;--bpk-private-chip-colour-border-default-dismissible-hover:#fff0;--bpk-private-chip-colour-border-default-hover:#054184;--bpk-private-chip-colour-border-default-off:#fff3;--bpk-private-chip-colour-border-on-contrast-off:#131d2b;--bpk-private-chip-colour-border-on-contrast-on:#131d2b;--bpk-private-chip-colour-border-on-dark-disimissible-hover:#131d2b;--bpk-private-chip-colour-border-on-dark-hover:#fff;--bpk-private-chip-colour-border-on-dark-off:#fff3;--bpk-private-chip-colour-stroke-off-on-canvas-contrast-new:#fff0;--bpk-private-chip-colour-text-default-dismissible-hover:#fff;--bpk-private-chip-colour-text-dismissible-on-icon:#ffffff80;--bpk-private-chip-colour-text-on:#fff;--bpk-private-chip-colour-text-on-image:#fff;--bpk-private-chip-colour-text-on-image-dismissible-icon:#bdc4cb;--bpk-private-chip-colour-text-on-dark:#fff;--bpk-private-chip-colour-text-on-dark-dismisisble-hover:#fff;--bpk-private-chip-colour-text-on-dark-dismisisble-icon:#bdc4cb;--bpk-private-chip-dimension-min-height-width:2rem;--bpk-private-chip-dimension-radius:0.5rem;--bpk-private-date-selector-cheapest-month-highlight:#fff;--bpk-private-date-selector-flexible-date-card:#243346;--bpk-private-dimension-padding-veritcal:0;--bpk-private-info-banner-default:#131d2b;--bpk-private-info-banner-on-contrast:#131d2b;--bpk-private-map-cluster-pin:#fff;--bpk-private-map-cluster-pin-previous-selection:#94c3ff;--bpk-private-map-marker-viewed:#000c;--bpk-private-map-poi-pin:#8e47ba;--bpk-private-map-previous-selection:#cfe4ff;--bpk-private-navigation-tabs-hover:#002b4b;--bpk-private-navigation-tabs-outline:#fff3;--bpk-private-navigation-tabs-selected:#054184;--bpk-private-rating-bar-default:#243346;--bpk-private-rating-bar-on-contrast:#243346;--bpk-private-segmented-control-canvas-default:#131d2b;--bpk-private-segmented-control-surface-contrast:#131d2b;--bpk-private-segmented-control-surface-contrast-on:#054184;--bpk-private-shadow-large-blur:0.875rem;--bpk-private-shadow-large-color:#16161640;--bpk-private-shadow-large-position-x:0;--bpk-private-shadow-large-position-y:0.25rem;--bpk-private-shadow-large-spread:0;--bpk-private-shadow-small-blur:0.1875rem;--bpk-private-shadow-small-color:#16161640;--bpk-private-shadow-small-position-x:0;--bpk-private-shadow-small-position-y:0.0625rem;--bpk-private-shadow-small-spread:0;--bpk-private-shadow-xl-blur:3.125rem;--bpk-private-shadow-xl-color:#16161640;--bpk-private-shadow-xl-position-x:0;--bpk-private-shadow-xl-position-y:0.75rem;--bpk-private-shadow-xl-spread:0;--bpk-private-skeleton-on-dark:#243346;--bpk-private-speech-bubble-colour-bg-contrast:#131d2b;--bpk-private-speech-bubble-colour-bg-default:#131d2b;--bpk-private-trip-advisor:#9ce6c0;--bpk-core-accent:#84e9ff;--bpk-core-eco:#0fa1a9;--bpk-core-primary:#054184;--bpk-other-line:#fff3;--bpk-other-line-on-dark:#fff3;--bpk-other-overlay:#fffc;--bpk-other-scrim:#000000b3;--bpk-other-shadow:#16161640;--bpk-status-danger-fill:#ffcadd;--bpk-status-danger-spot:#ff649c;--bpk-status-success-fill:#b1ffe7;--bpk-status-success-spot:#62f1c6;--bpk-status-warning-fill:#fbf1bb;--bpk-status-warning-spot:#feeb87;--bpk-surface-contrast:#010913;--bpk-surface-default:#131d2b;--bpk-surface-elevated:#243346;--bpk-surface-hero:#010913;--bpk-surface-highlight:#243346;--bpk-surface-low-contrast:#243346;--bpk-surface-subtle:#243346;--bpk-surface-tint:#ffffff1a;--bpk-surface-promo:#243346;--bpk-text-disabled:#fff3;--bpk-text-disabled-on-dark:#ffffff80;--bpk-text-error:#ff649c;--bpk-text-inverse:#010913;--bpk-text-on-dark:#fff;--bpk-text-on-light:#010913;--bpk-text-primary:#fff;--bpk-text-secondary:#bdc4cb;--bpk-text-success:#62f1c6;--bpk-text-deprecated-link:#84e9ff;--bpk-text-hero:#010913;--bpk-title:true;--bpk-typography-family-sans-serif:"Skyscanner Relative";--bpk-typography-family-serif:Larken;--bpk-typography-kerning-default:0;--bpk-typography-kerning-loose:0;--bpk-typography-kerning-tight:0;--bpk-typography-style-body:400;--bpk-typography-style-headline:700;--bpk-typography-style-hero:900;--bpk-typography-style-label:700;--bpk-typography-style-subhead:300}
|
|
19
|
+
*//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:initial}[hidden],template{display:none}a{background-color:#0000;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:initial;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}html{box-sizing:border-box;font-size:100%}*,:after,:before{box-sizing:inherit}body{color:#161616;font-family:var(--bpk-base-font-stack,"Skyscanner Relative",-apple-system,BlinkMacSystemFont,"Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif);font-size:1rem;line-height:1.3rem}body.scaffold-font-size{font-size:13px}body.enable-font-smoothing{-webkit-font-smoothing:antialiased}:focus-visible,[type=button]:focus-visible,[type=reset]:focus-visible,[type=submit]:focus-visible,button:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.hidden,.hide{display:none!important}.visually-hidden,.visuallyhidden{border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;clip:rect(0 0 0 0)}.visually-hidden.focusable:active,.visually-hidden.focusable:focus,.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{height:auto;margin:0;overflow:visible;position:static;width:auto;clip:auto}.invisible{visibility:hidden}.clearfix:after,.clearfix:before{content:"";display:table}.clearfix:after{clear:both}:root{--bpk-border-1:0.0625rem;--bpk-border-2:0.125rem;--bpk-border-3:0.1875rem;--bpk-modal-200:12.5rem;--bpk-modal-400:25rem;--bpk-modal-600:37.5rem;--bpk-modal-800:50rem;--bpk-modal-1000:62.5rem;--bpk-radius-none:0;--bpk-radius-full:62.4375rem;--bpk-radius-lg:1.5rem;--bpk-radius-md:0.75rem;--bpk-radius-nav-tabs:1.125rem;--bpk-radius-sm:0.5rem;--bpk-radius-xs:0.25rem;--bpk-spacing-base:1rem;--bpk-spacing-lg:1.5rem;--bpk-spacing-md:0.5rem;--bpk-spacing-none:0;--bpk-spacing-sm:0.25rem;--bpk-spacing-xl:2rem;--bpk-spacing-xs:0.125rem;--bpk-spacing-xxl:2.5rem;--bpk-spacing-xxs:0.0625rem;--bpk-spacing-xxxl:4rem;--bpk-spacing-xxxxl:6rem;--bpk-canvas-contrast:#eff3f8;--bpk-canvas-default:#fff;--bpk-private-autosuggest-colour-bg-default:#fff;--bpk-private-autosuggest-colour-bg-hover:#f7f9fb;--bpk-private-autosuggest-colour-border-default:#c1c7cf;--bpk-private-autosuggest-colour-text-close:#161616;--bpk-private-badge-colour-bg-default:#eff3f8;--bpk-private-badge-colour-bg-inverse:#fff;--bpk-private-badge-colour-bg-outline:#fff0;--bpk-private-badge-colour-bg-subtle:#eff3f8;--bpk-private-badge-colour-stroke-outline:#fff;--bpk-private-badge-dimension-padding-horizontal-default:0.5rem;--bpk-private-badge-dimension-padding-horizontal-subtle:0.5rem;--bpk-private-badge-typography-tmp-badge-label:0.875rem;--bpk-private-button-colour-bg-destructive:#e0e4e9;--bpk-private-button-colour-bg-destructive-pressed:#e70866;--bpk-private-button-colour-bg-disabled:#e0e4e9;--bpk-private-button-colour-bg-feature-pressed:#024daf;--bpk-private-button-colour-bg-featured:#0062e3;--bpk-private-button-colour-bg-footer:#fff0;--bpk-private-button-colour-bg-footer-pressed:#fff0;--bpk-private-button-colour-bg-primary:#05203c;--bpk-private-button-colour-bg-primary-on-dark:#fff;--bpk-private-button-colour-bg-primary-on-dark-pressed:#c1c7cf;--bpk-private-button-colour-bg-primary-on-light:#fff;--bpk-private-button-colour-bg-primary-on-light-pressed:#154679;--bpk-private-button-colour-bg-secondary:#e0e4e9;--bpk-private-button-colour-bg-secondary-pressed:#c1c7cf;--bpk-private-button-colour-bg-secondary-on-contrast:#e0e4e9;--bpk-private-button-colour-bg-secondary-on-contrast-pressed:#c1c7cf;--bpk-private-button-colour-bg-secondary-on-dark:#ffffff1a;--bpk-private-button-colour-bg-secondary-on-dark-disabled:#0b121d;--bpk-private-button-colour-bg-secondary-on-dark-pressed:#04182d;--bpk-private-button-colour-text-disruptive:#e70866;--bpk-private-button-colour-text-feature:#fff;--bpk-private-button-colour-text-footer:#fff0;--bpk-private-button-colour-text-link-on-dark:#fff;--bpk-private-button-colour-text-secondary:#161616;--bpk-private-button-dimension-radius:0.5rem;--bpk-private-button-dimension-min-height-default:2.25rem;--bpk-private-button-dimension-min-height-large:3rem;--bpk-private-button-dimension-min-weight-large:3rem;--bpk-private-button-dimension-padding-horizontal-default:1rem;--bpk-private-button-dimension-padding-horizontal-large:1rem;--bpk-private-button-typography-tmp-default-label:1rem;--bpk-private-card-button-contained-fill:#fffc;--bpk-private-card-button-max-height:2.5rem;--bpk-private-carousel-trigger-bg-default:#ffffff80;--bpk-private-carousel-trigger-bg-default-hover:#fffc;--bpk-private-checkbox-bg-default-checked:#0062e3;--bpk-private-checkbox-bg-default-intermediate:#0062e3;--bpk-private-checkbox-bg-on-contrast-checked:#0062e3;--bpk-private-checkbox-bg-on-contrast-intermediate:#0062e3;--bpk-private-checkbox-border-default-disabled:#e0e4e9;--bpk-private-checkbox-border-default-not-checked:#626971;--bpk-private-checkbox-border-on-contrast-disabled:#fff3;--bpk-private-checkbox-border-on-contrast-not-checked:#ffffff80;--bpk-private-checkbox-icon-on-contrast:#fff;--bpk-private-checkbox-stroke:0.1875rem;--bpk-private-chip-group-filter-colour-bg-icon-hover-on-image:#eff3f8;--bpk-private-chip-group-filter-colour-bg-icon-off-on-image:#fff;--bpk-private-chip-group-filter-colour-bg-icon-on-default:#05203c;--bpk-private-chip-group-filter-colour-bg-icon-on-on-dark:#fff;--bpk-private-chip-group-filter-colour-bg-icon-on-on-image:#05203c;--bpk-private-chip-group-filter-colour-stroke-icon-hover-default:#05203c;--bpk-private-chip-group-filter-colour-stroke-icon-hover-on-dark:#fff;--bpk-private-chip-group-filter-colour-stroke-icon-off-default:#c1c7cf;--bpk-private-chip-group-filter-colour-stroke-icon-off-on-dark:#ffffff80;--bpk-private-chip-group-filter-dimensions-min-height:2.25rem;--bpk-private-chip-colour-bg-default-dismissible-hover:#05203c;--bpk-private-chip-colour-bg-default-on:#05203c;--bpk-private-chip-colour-bg-disabled:#e0e4e9;--bpk-private-chip-colour-bg-on-contrast-hover:#fff;--bpk-private-chip-colour-bg-on-contrast-on:#05203c;--bpk-private-chip-colour-bg-on-dark-dismissible-hover:#fff;--bpk-private-chip-colour-bg-on-dark-hover:#fff;--bpk-private-chip-colour-bg-on-dark-off:#fff0;--bpk-private-chip-colour-bg-on-dark-on:#fff;--bpk-private-chip-colour-bg-on-image-dismissible-hover:#05203c;--bpk-private-chip-colour-bg-on-image-on:#eff3f8;--bpk-private-chip-colour-border-default-dismissible-hover:#fff0;--bpk-private-chip-colour-border-default-hover:#05203c;--bpk-private-chip-colour-border-default-off:#c1c7cf;--bpk-private-chip-colour-border-on-contrast-off:#fff;--bpk-private-chip-colour-border-on-contrast-on:#05203c;--bpk-private-chip-colour-border-on-dark-dismissible-hover:#fff;--bpk-private-chip-colour-border-on-dark-hover:#fff;--bpk-private-chip-colour-border-on-dark-off:#ffffff80;--bpk-private-chip-colour-stroke-off-on-canvas-contrast-new:#fff0;--bpk-private-chip-colour-text-default-dismissible-hover:#fff;--bpk-private-chip-colour-text-dismissible-on-icon:#ffffff80;--bpk-private-chip-colour-text-on:#fff;--bpk-private-chip-colour-text-on-image:#fff;--bpk-private-chip-colour-text-on-image-dismissible-icon:#626971;--bpk-private-chip-colour-text-on-dark:#161616;--bpk-private-chip-colour-text-on-dark-dismissible-hover:#161616;--bpk-private-chip-colour-text-on-dark-dismissible-icon:#626971;--bpk-private-chip-dimension-border:0.0625rem;--bpk-private-chip-dimension-min-height-width:2rem;--bpk-private-chip-dimension-radius:0.5rem;--bpk-private-date-selector-cheapest-month-highlight:#154679;--bpk-private-date-selector-flexible-date-card:#eff3f8;--bpk-private-info-banner-default:#eff3f8;--bpk-private-info-banner-on-contrast:#fff;--bpk-private-map-cluster-pin:#05203c;--bpk-private-map-cluster-pin-previous-selection:#94c3ff;--bpk-private-map-marker-viewed:#fffc;--bpk-private-map-poi-pin:#8e47ba;--bpk-private-map-previous-selection:#cfe4ff;--bpk-private-navigation-tabs-hover:#154679;--bpk-private-navigation-tabs-outline:#fff3;--bpk-private-navigation-tabs-selected:#024daf;--bpk-private-radio-bg-default-disabled:#c1c7cf;--bpk-private-radio-bg-default-on:#0062e3;--bpk-private-radio-bg-on-contrast-off:#fff;--bpk-private-radio-bg-on-contrast-on:#fff;--bpk-private-radio-border:0.1875rem;--bpk-private-radio-border-default-off:#626971;--bpk-private-rating-bar-default:#e0e4e9;--bpk-private-rating-bar-on-contrast:#fff;--bpk-private-segmented-control-colour-bg-on-canvas-default-default:#eff3f8;--bpk-private-segmented-control-colour-bg-on-surface-contrast-default:#ffffff1a;--bpk-private-segmented-control-colour-bg-on-surface-contrast-selected:#024daf;--bpk-private-segmented-control-colour-bg-selected:#05203c;--bpk-private-segmented-control-colour-divider-default:#e0e4e9;--bpk-private-segmented-control-colour-divider-on-surface-contrast:#fff3;--bpk-private-segmented-control-dimension-bg-indicator-radius:0;--bpk-private-segmented-control-dimension-bg-track-radius:0.5rem;--bpk-private-segmented-control-dimension-min-height:2rem;--bpk-private-segmented-control-dimension-track-padding:0;--bpk-private-shadow-large-blur:0.875rem;--bpk-private-shadow-large-color:#16161640;--bpk-private-shadow-large-position-x:0;--bpk-private-shadow-large-position-y:0.25rem;--bpk-private-shadow-large-spread:0;--bpk-private-shadow-small-blur:0.1875rem;--bpk-private-shadow-small-color:#16161640;--bpk-private-shadow-small-position-x:0;--bpk-private-shadow-small-position-y:0.0625rem;--bpk-private-shadow-small-spread:0;--bpk-private-shadow-xl-blur:3.125rem;--bpk-private-shadow-xl-color:#16161640;--bpk-private-shadow-xl-position-x:0;--bpk-private-shadow-xl-position-y:0.75rem;--bpk-private-shadow-xl-spread:0;--bpk-private-skeleton-on-dark:#ffffff1a;--bpk-private-speech-bubble-colour-bg-contrast:#eff3f8;--bpk-private-speech-bubble-colour-bg-default:#fff;--bpk-private-trip-advisor:#00aa6c;--bpk-core-accent:#0062e3;--bpk-core-eco:#0fa1a9;--bpk-core-primary:#05203c;--bpk-other-line:#c1c7cf;--bpk-other-line-on-dark:#ffffff80;--bpk-other-overlay:#0003;--bpk-other-scrim:#000000b3;--bpk-other-shadow:#16161640;--bpk-status-danger-spot:#e70866;--bpk-status-success-spot:#0c838a;--bpk-status-warning-spot:#f55d42;--bpk-surface-contrast:#05203c;--bpk-surface-danger-fill:#ffe9f9;--bpk-surface-default:#fff;--bpk-surface-elevated:#fff;--bpk-surface-hero:#0062e3;--bpk-surface-highlight:#e0e4e9;--bpk-surface-low-contrast:#f7f9fb;--bpk-surface-subtle:#e3f0ff;--bpk-surface-success-fill:#d4fff2;--bpk-surface-tint:#ffffff1a;--bpk-surface-warning-fill:#fff7cf;--bpk-surface-promo:#0062e3;--bpk-test:#ff1088;--bpk-text-disabled:#0003;--bpk-text-disabled-on-dark:#ffffff80;--bpk-text-error:#e70866;--bpk-text-inverse:#fff;--bpk-text-on-dark:#fff;--bpk-text-on-light:#161616;--bpk-text-primary:#161616;--bpk-text-secondary:#626971;--bpk-text-success:#0c838a;--bpk-text-deprecated-link:#0062e3;--bpk-text-hero:#0062e3;--bpk-title:true;--bpk-typography-family-sans-serif:"Skyscanner Relative";--bpk-typography-family-serif:Larken;--bpk-typography-kerning-default:0;--bpk-typography-kerning-loose:0;--bpk-typography-kerning-tight:0;--bpk-typography-style-body:400;--bpk-typography-style-headline:700;--bpk-typography-style-hero:900;--bpk-typography-style-label:700;--bpk-typography-style-subhead:300}:root[data-theme=dark]{--bpk-canvas-contrast:#010913;--bpk-canvas-default:#010913;--bpk-private-autosuggest-colour-bg-default:#fff;--bpk-private-autosuggest-colour-bg-hover:#fff;--bpk-private-autosuggest-colour-border-default:#fff;--bpk-private-autosuggest-colour-text-close:#fff;--bpk-private-badge-colour-bg-default:#243346;--bpk-private-badge-colour-bg-inverse:#243346;--bpk-private-badge-colour-bg-outline:#fff0;--bpk-private-badge-colour-bg-subtle:#243346;--bpk-private-badge-colour-stroke-outline:#fff;--bpk-private-badge-dimension-padding-horizontal-default:0.5rem;--bpk-private-badge-dimension-padding-horizontal-subtle:0.5rem;--bpk-private-badge-typography-tmp-badge-label:0.875rem;--bpk-private-button-colour-bg-destructive:#e0e4e9;--bpk-private-button-colour-bg-destructive-pressed:#ff649c;--bpk-private-button-colour-bg-disabled:#0b121d;--bpk-private-button-colour-bg-feature-pressed:#d1f7ff;--bpk-private-button-colour-bg-featured:#d1f7ff;--bpk-private-button-colour-bg-footer:#fff0;--bpk-private-button-colour-bg-footer-pressed:#fff0;--bpk-private-button-colour-bg-primary:#024daf;--bpk-private-button-colour-bg-primary-on-dark:#fff;--bpk-private-button-colour-bg-primary-on-dark-pressed:#c1c7cf;--bpk-private-button-colour-bg-primary-on-light:#fff;--bpk-private-button-colour-bg-primary-on-light-pressed:#002b4b;--bpk-private-button-colour-bg-secondary:#243346;--bpk-private-button-colour-bg-secondary-pressed:#010913;--bpk-private-button-colour-bg-secondary-on-contrast:#243346;--bpk-private-button-colour-bg-secondary-on-contrast-pressed:#010913;--bpk-private-button-colour-bg-secondary-on-dark:#ffffff1a;--bpk-private-button-colour-bg-secondary-on-dark-disabled:#0b121d;--bpk-private-button-colour-bg-secondary-on-dark-pressed:#fff3;--bpk-private-button-colour-text-disruptive:#ff649c;--bpk-private-button-colour-text-feature:#010913;--bpk-private-button-colour-text-footer:#fff0;--bpk-private-button-colour-text-link-on-dark:#fff;--bpk-private-button-colour-text-secondary:#fff;--bpk-private-button-dimension-radius:0.5rem;--bpk-private-button-dimension-min-height-default:2.25rem;--bpk-private-button-dimension-min-height-large:3rem;--bpk-private-button-dimension-min-weight-large:3rem;--bpk-private-button-dimension-padding-horizontal-default:1rem;--bpk-private-button-dimension-padding-horizontal-large:1rem;--bpk-private-button-typography-tmp-default-label:1rem;--bpk-private-card-button-contained-fill:#ffffff1a;--bpk-private-card-button-max-height:2.5rem;--bpk-private-carousel-trigger-bg-default:#ffffff80;--bpk-private-carousel-trigger-bg-default-hover:#fffc;--bpk-private-checkbox-bg-default-checked:#84e9ff;--bpk-private-checkbox-bg-default-intermediate:#84e9ff;--bpk-private-checkbox-bg-on-contrast-checked:#84e9ff;--bpk-private-checkbox-bg-on-contrast-intermediate:#84e9ff;--bpk-private-checkbox-border-default-disabled:#fff3;--bpk-private-checkbox-border-default-not-checked:#ffffff80;--bpk-private-checkbox-border-on-contrast-disabled:#fff3;--bpk-private-checkbox-border-on-contrast-not-checked:#ffffff80;--bpk-private-checkbox-icon-on-contrast:#161616;--bpk-private-checkbox-stroke:0.1875rem;--bpk-private-chip-group-filter-colour-bg-icon-hover-on-image:#010913;--bpk-private-chip-group-filter-colour-bg-icon-off-on-image:#131d2b;--bpk-private-chip-group-filter-colour-bg-icon-on-default:#054184;--bpk-private-chip-group-filter-colour-bg-icon-on-on-dark:#131d2b;--bpk-private-chip-group-filter-colour-bg-icon-on-on-image:#054184;--bpk-private-chip-group-filter-colour-stroke-icon-hover-default:#054184;--bpk-private-chip-group-filter-colour-stroke-icon-hover-on-dark:#131d2b;--bpk-private-chip-group-filter-colour-stroke-icon-off-default:#fff3;--bpk-private-chip-group-filter-colour-stroke-icon-off-on-dark:#fff3;--bpk-private-chip-group-filter-dimensions-min-height:2.25rem;--bpk-private-chip-colour-bg-default-dismissible-hover:#054184;--bpk-private-chip-colour-bg-default-on:#054184;--bpk-private-chip-colour-bg-disabled:#0b121d;--bpk-private-chip-colour-bg-on-contrast-hover:#131d2b;--bpk-private-chip-colour-bg-on-contrast-on:#054184;--bpk-private-chip-colour-bg-on-dark-dismissible-hover:#131d2b;--bpk-private-chip-colour-bg-on-dark-hover:#fff0;--bpk-private-chip-colour-bg-on-dark-off:#fff0;--bpk-private-chip-colour-bg-on-dark-on:#131d2b;--bpk-private-chip-colour-bg-on-image-dismissible-hover:#054184;--bpk-private-chip-colour-bg-on-image-on:#010913;--bpk-private-chip-colour-border-default-dismissible-hover:#fff0;--bpk-private-chip-colour-border-default-hover:#054184;--bpk-private-chip-colour-border-default-off:#fff3;--bpk-private-chip-colour-border-on-contrast-off:#131d2b;--bpk-private-chip-colour-border-on-contrast-on:#131d2b;--bpk-private-chip-colour-border-on-dark-dismissible-hover:#131d2b;--bpk-private-chip-colour-border-on-dark-hover:#fff;--bpk-private-chip-colour-border-on-dark-off:#fff3;--bpk-private-chip-colour-stroke-off-on-canvas-contrast-new:#fff0;--bpk-private-chip-colour-text-default-dismissible-hover:#fff;--bpk-private-chip-colour-text-dismissible-on-icon:#ffffff80;--bpk-private-chip-colour-text-on:#fff;--bpk-private-chip-colour-text-on-image:#fff;--bpk-private-chip-colour-text-on-image-dismissible-icon:#bdc4cb;--bpk-private-chip-colour-text-on-dark:#fff;--bpk-private-chip-colour-text-on-dark-dismissible-hover:#fff;--bpk-private-chip-colour-text-on-dark-dismissible-icon:#bdc4cb;--bpk-private-chip-dimension-border:0.0625rem;--bpk-private-chip-dimension-min-height-width:2rem;--bpk-private-chip-dimension-radius:0.5rem;--bpk-private-date-selector-cheapest-month-highlight:#fff;--bpk-private-date-selector-flexible-date-card:#243346;--bpk-private-info-banner-default:#131d2b;--bpk-private-info-banner-on-contrast:#131d2b;--bpk-private-map-cluster-pin:#fff;--bpk-private-map-cluster-pin-previous-selection:#94c3ff;--bpk-private-map-marker-viewed:#000c;--bpk-private-map-poi-pin:#8e47ba;--bpk-private-map-previous-selection:#cfe4ff;--bpk-private-navigation-tabs-hover:#002b4b;--bpk-private-navigation-tabs-outline:#fff3;--bpk-private-navigation-tabs-selected:#054184;--bpk-private-radio-bg-default-disabled:#ffffff80;--bpk-private-radio-bg-default-on:#84e9ff;--bpk-private-radio-bg-on-contrast-off:#fff0;--bpk-private-radio-bg-on-contrast-on:#84e9ff;--bpk-private-radio-border:0.1875rem;--bpk-private-radio-border-default-off:#ffffff80;--bpk-private-rating-bar-default:#243346;--bpk-private-rating-bar-on-contrast:#243346;--bpk-private-segmented-control-colour-bg-on-canvas-default-default:#131d2b;--bpk-private-segmented-control-colour-bg-on-surface-contrast-default:#131d2b;--bpk-private-segmented-control-colour-bg-on-surface-contrast-selected:#054184;--bpk-private-segmented-control-colour-bg-selected:#054184;--bpk-private-segmented-control-colour-divider-default:#e0e4e9;--bpk-private-segmented-control-colour-divider-on-surface-contrast:#fff3;--bpk-private-segmented-control-dimension-bg-indicator-radius:0;--bpk-private-segmented-control-dimension-bg-track-radius:0.5rem;--bpk-private-segmented-control-dimension-min-height:2rem;--bpk-private-segmented-control-dimension-track-padding:0;--bpk-private-shadow-large-blur:0.875rem;--bpk-private-shadow-large-color:#16161640;--bpk-private-shadow-large-position-x:0;--bpk-private-shadow-large-position-y:0.25rem;--bpk-private-shadow-large-spread:0;--bpk-private-shadow-small-blur:0.1875rem;--bpk-private-shadow-small-color:#16161640;--bpk-private-shadow-small-position-x:0;--bpk-private-shadow-small-position-y:0.0625rem;--bpk-private-shadow-small-spread:0;--bpk-private-shadow-xl-blur:3.125rem;--bpk-private-shadow-xl-color:#16161640;--bpk-private-shadow-xl-position-x:0;--bpk-private-shadow-xl-position-y:0.75rem;--bpk-private-shadow-xl-spread:0;--bpk-private-skeleton-on-dark:#243346;--bpk-private-speech-bubble-colour-bg-contrast:#131d2b;--bpk-private-speech-bubble-colour-bg-default:#131d2b;--bpk-private-trip-advisor:#9ce6c0;--bpk-core-accent:#84e9ff;--bpk-core-eco:#0fa1a9;--bpk-core-primary:#054184;--bpk-other-line:#fff3;--bpk-other-line-on-dark:#fff3;--bpk-other-overlay:#fffc;--bpk-other-scrim:#000000b3;--bpk-other-shadow:#16161640;--bpk-status-danger-spot:#ff649c;--bpk-status-success-spot:#62f1c6;--bpk-status-warning-spot:#feeb87;--bpk-surface-contrast:#010913;--bpk-surface-danger-fill:#ffcadd;--bpk-surface-default:#131d2b;--bpk-surface-elevated:#243346;--bpk-surface-hero:#010913;--bpk-surface-highlight:#243346;--bpk-surface-low-contrast:#243346;--bpk-surface-subtle:#243346;--bpk-surface-success-fill:#b1ffe7;--bpk-surface-tint:#ffffff1a;--bpk-surface-warning-fill:#fbf1bb;--bpk-surface-promo:#243346;--bpk-test:red;--bpk-text-disabled:#fff3;--bpk-text-disabled-on-dark:#ffffff80;--bpk-text-error:#ff649c;--bpk-text-inverse:#010913;--bpk-text-on-dark:#fff;--bpk-text-on-light:#010913;--bpk-text-primary:#fff;--bpk-text-secondary:#bdc4cb;--bpk-text-success:#62f1c6;--bpk-text-deprecated-link:#84e9ff;--bpk-text-hero:#010913;--bpk-title:true;--bpk-typography-family-sans-serif:"Skyscanner Relative";--bpk-typography-family-serif:Larken;--bpk-typography-kerning-default:0;--bpk-typography-kerning-loose:0;--bpk-typography-kerning-tight:0;--bpk-typography-style-body:400;--bpk-typography-style-headline:700;--bpk-typography-style-hero:900;--bpk-typography-style-label:700;--bpk-typography-style-subhead:300}
|
|
@@ -19,8 +19,16 @@
|
|
|
19
19
|
*/
|
|
20
20
|
|
|
21
21
|
:root {
|
|
22
|
+
--bpk-border-1: 0.0625rem;
|
|
23
|
+
--bpk-border-2: 0.125rem;
|
|
24
|
+
--bpk-border-3: 0.1875rem;
|
|
25
|
+
--bpk-modal-200: 12.5rem;
|
|
26
|
+
--bpk-modal-400: 25rem;
|
|
27
|
+
--bpk-modal-600: 37.5rem;
|
|
28
|
+
--bpk-modal-800: 50rem;
|
|
29
|
+
--bpk-modal-1000: 62.5rem;
|
|
22
30
|
--bpk-radius-none: 0;
|
|
23
|
-
--bpk-radius-full:
|
|
31
|
+
--bpk-radius-full: 62.4375rem;
|
|
24
32
|
--bpk-radius-lg: 1.5rem;
|
|
25
33
|
--bpk-radius-md: 0.75rem;
|
|
26
34
|
--bpk-radius-nav-tabs: 1.125rem;
|
|
@@ -21,6 +21,10 @@
|
|
|
21
21
|
:root[data-theme="dark"] {
|
|
22
22
|
--bpk-canvas-contrast: #010913;
|
|
23
23
|
--bpk-canvas-default: #010913;
|
|
24
|
+
--bpk-private-autosuggest-colour-bg-default: #ffffff;
|
|
25
|
+
--bpk-private-autosuggest-colour-bg-hover: #ffffff;
|
|
26
|
+
--bpk-private-autosuggest-colour-border-default: #ffffff;
|
|
27
|
+
--bpk-private-autosuggest-colour-text-close: #ffffff;
|
|
24
28
|
--bpk-private-badge-colour-bg-default: #243346;
|
|
25
29
|
--bpk-private-badge-colour-bg-inverse: #243346;
|
|
26
30
|
--bpk-private-badge-colour-bg-outline: rgba(255, 255, 255, 0);
|
|
@@ -29,7 +33,6 @@
|
|
|
29
33
|
--bpk-private-badge-dimension-padding-horizontal-default: 0.5rem;
|
|
30
34
|
--bpk-private-badge-dimension-padding-horizontal-subtle: 0.5rem;
|
|
31
35
|
--bpk-private-badge-typography-tmp-badge-label: 0.875rem;
|
|
32
|
-
--bpk-private-badge-typography-tmp-badge-line-height: 0;
|
|
33
36
|
--bpk-private-button-colour-bg-destructive: #e0e4e9;
|
|
34
37
|
--bpk-private-button-colour-bg-destructive-pressed: #ff649c;
|
|
35
38
|
--bpk-private-button-colour-bg-disabled: #0b121d;
|
|
@@ -62,8 +65,19 @@
|
|
|
62
65
|
--bpk-private-button-dimension-padding-horizontal-large: 1rem;
|
|
63
66
|
--bpk-private-button-typography-tmp-default-label: 1rem;
|
|
64
67
|
--bpk-private-card-button-contained-fill: rgba(255, 255, 255, 0.1);
|
|
68
|
+
--bpk-private-card-button-max-height: 2.5rem;
|
|
65
69
|
--bpk-private-carousel-trigger-bg-default: rgba(255, 255, 255, 0.5);
|
|
66
70
|
--bpk-private-carousel-trigger-bg-default-hover: rgba(255, 255, 255, 0.8);
|
|
71
|
+
--bpk-private-checkbox-bg-default-checked: #84e9ff;
|
|
72
|
+
--bpk-private-checkbox-bg-default-intermediate: #84e9ff;
|
|
73
|
+
--bpk-private-checkbox-bg-on-contrast-checked: #84e9ff;
|
|
74
|
+
--bpk-private-checkbox-bg-on-contrast-intermediate: #84e9ff;
|
|
75
|
+
--bpk-private-checkbox-border-default-disabled: rgba(255, 255, 255, 0.2);
|
|
76
|
+
--bpk-private-checkbox-border-default-not-checked: rgba(255, 255, 255, 0.5);
|
|
77
|
+
--bpk-private-checkbox-border-on-contrast-disabled: rgba(255, 255, 255, 0.2);
|
|
78
|
+
--bpk-private-checkbox-border-on-contrast-not-checked: rgba(255, 255, 255, 0.5);
|
|
79
|
+
--bpk-private-checkbox-icon-on-contrast: #161616;
|
|
80
|
+
--bpk-private-checkbox-stroke: 0.1875rem;
|
|
67
81
|
--bpk-private-chip-group-filter-colour-bg-icon-hover-on-image: #010913;
|
|
68
82
|
--bpk-private-chip-group-filter-colour-bg-icon-off-on-image: #131d2b;
|
|
69
83
|
--bpk-private-chip-group-filter-colour-bg-icon-on-default: #054184;
|
|
@@ -90,7 +104,7 @@
|
|
|
90
104
|
--bpk-private-chip-colour-border-default-off: rgba(255, 255, 255, 0.2);
|
|
91
105
|
--bpk-private-chip-colour-border-on-contrast-off: #131d2b;
|
|
92
106
|
--bpk-private-chip-colour-border-on-contrast-on: #131d2b;
|
|
93
|
-
--bpk-private-chip-colour-border-on-dark-
|
|
107
|
+
--bpk-private-chip-colour-border-on-dark-dismissible-hover: #131d2b;
|
|
94
108
|
--bpk-private-chip-colour-border-on-dark-hover: #ffffff;
|
|
95
109
|
--bpk-private-chip-colour-border-on-dark-off: rgba(255, 255, 255, 0.2);
|
|
96
110
|
--bpk-private-chip-colour-stroke-off-on-canvas-contrast-new: rgba(255, 255, 255, 0);
|
|
@@ -100,13 +114,13 @@
|
|
|
100
114
|
--bpk-private-chip-colour-text-on-image: #ffffff;
|
|
101
115
|
--bpk-private-chip-colour-text-on-image-dismissible-icon: #bdc4cb;
|
|
102
116
|
--bpk-private-chip-colour-text-on-dark: #ffffff;
|
|
103
|
-
--bpk-private-chip-colour-text-on-dark-
|
|
104
|
-
--bpk-private-chip-colour-text-on-dark-
|
|
117
|
+
--bpk-private-chip-colour-text-on-dark-dismissible-hover: #ffffff;
|
|
118
|
+
--bpk-private-chip-colour-text-on-dark-dismissible-icon: #bdc4cb;
|
|
119
|
+
--bpk-private-chip-dimension-border: 0.0625rem;
|
|
105
120
|
--bpk-private-chip-dimension-min-height-width: 2rem;
|
|
106
121
|
--bpk-private-chip-dimension-radius: 0.5rem;
|
|
107
122
|
--bpk-private-date-selector-cheapest-month-highlight: #ffffff;
|
|
108
123
|
--bpk-private-date-selector-flexible-date-card: #243346;
|
|
109
|
-
--bpk-private-dimension-padding-veritcal: 0;
|
|
110
124
|
--bpk-private-info-banner-default: #131d2b;
|
|
111
125
|
--bpk-private-info-banner-on-contrast: #131d2b;
|
|
112
126
|
--bpk-private-map-cluster-pin: #ffffff;
|
|
@@ -117,11 +131,24 @@
|
|
|
117
131
|
--bpk-private-navigation-tabs-hover: #002b4b;
|
|
118
132
|
--bpk-private-navigation-tabs-outline: rgba(255, 255, 255, 0.2);
|
|
119
133
|
--bpk-private-navigation-tabs-selected: #054184;
|
|
134
|
+
--bpk-private-radio-bg-default-disabled: rgba(255, 255, 255, 0.5);
|
|
135
|
+
--bpk-private-radio-bg-default-on: #84e9ff;
|
|
136
|
+
--bpk-private-radio-bg-on-contrast-off: rgba(255, 255, 255, 0);
|
|
137
|
+
--bpk-private-radio-bg-on-contrast-on: #84e9ff;
|
|
138
|
+
--bpk-private-radio-border: 0.1875rem;
|
|
139
|
+
--bpk-private-radio-border-default-off: rgba(255, 255, 255, 0.5);
|
|
120
140
|
--bpk-private-rating-bar-default: #243346;
|
|
121
141
|
--bpk-private-rating-bar-on-contrast: #243346;
|
|
122
|
-
--bpk-private-segmented-control-canvas-default: #131d2b;
|
|
123
|
-
--bpk-private-segmented-control-surface-contrast: #131d2b;
|
|
124
|
-
--bpk-private-segmented-control-surface-contrast-
|
|
142
|
+
--bpk-private-segmented-control-colour-bg-on-canvas-default-default: #131d2b;
|
|
143
|
+
--bpk-private-segmented-control-colour-bg-on-surface-contrast-default: #131d2b;
|
|
144
|
+
--bpk-private-segmented-control-colour-bg-on-surface-contrast-selected: #054184;
|
|
145
|
+
--bpk-private-segmented-control-colour-bg-selected: #054184;
|
|
146
|
+
--bpk-private-segmented-control-colour-divider-default: #e0e4e9;
|
|
147
|
+
--bpk-private-segmented-control-colour-divider-on-surface-contrast: rgba(255, 255, 255, 0.2);
|
|
148
|
+
--bpk-private-segmented-control-dimension-bg-indicator-radius: 0;
|
|
149
|
+
--bpk-private-segmented-control-dimension-bg-track-radius: 0.5rem;
|
|
150
|
+
--bpk-private-segmented-control-dimension-min-height: 2rem;
|
|
151
|
+
--bpk-private-segmented-control-dimension-track-padding: 0;
|
|
125
152
|
--bpk-private-shadow-large-blur: 0.875rem;
|
|
126
153
|
--bpk-private-shadow-large-color: rgba(22, 22, 22, 0.25);
|
|
127
154
|
--bpk-private-shadow-large-position-x: 0;
|
|
@@ -149,21 +176,22 @@
|
|
|
149
176
|
--bpk-other-overlay: rgba(255, 255, 255, 0.8);
|
|
150
177
|
--bpk-other-scrim: rgba(0, 0, 0, 0.7);
|
|
151
178
|
--bpk-other-shadow: rgba(22, 22, 22, 0.25);
|
|
152
|
-
--bpk-status-danger-fill: #ffcadd;
|
|
153
179
|
--bpk-status-danger-spot: #ff649c;
|
|
154
|
-
--bpk-status-success-fill: #b1ffe7;
|
|
155
180
|
--bpk-status-success-spot: #62f1c6;
|
|
156
|
-
--bpk-status-warning-fill: #fbf1bb;
|
|
157
181
|
--bpk-status-warning-spot: #feeb87;
|
|
158
182
|
--bpk-surface-contrast: #010913;
|
|
183
|
+
--bpk-surface-danger-fill: #ffcadd;
|
|
159
184
|
--bpk-surface-default: #131d2b;
|
|
160
185
|
--bpk-surface-elevated: #243346;
|
|
161
186
|
--bpk-surface-hero: #010913;
|
|
162
187
|
--bpk-surface-highlight: #243346;
|
|
163
188
|
--bpk-surface-low-contrast: #243346;
|
|
164
189
|
--bpk-surface-subtle: #243346;
|
|
190
|
+
--bpk-surface-success-fill: #b1ffe7;
|
|
165
191
|
--bpk-surface-tint: rgba(255, 255, 255, 0.1);
|
|
192
|
+
--bpk-surface-warning-fill: #fbf1bb;
|
|
166
193
|
--bpk-surface-promo: #243346;
|
|
194
|
+
--bpk-test: #ff0000;
|
|
167
195
|
--bpk-text-disabled: rgba(255, 255, 255, 0.2);
|
|
168
196
|
--bpk-text-disabled-on-dark: rgba(255, 255, 255, 0.5);
|
|
169
197
|
--bpk-text-error: #ff649c;
|
|
@@ -21,6 +21,10 @@
|
|
|
21
21
|
:root {
|
|
22
22
|
--bpk-canvas-contrast: #eff3f8;
|
|
23
23
|
--bpk-canvas-default: #ffffff;
|
|
24
|
+
--bpk-private-autosuggest-colour-bg-default: #ffffff;
|
|
25
|
+
--bpk-private-autosuggest-colour-bg-hover: #f7f9fb;
|
|
26
|
+
--bpk-private-autosuggest-colour-border-default: #c1c7cf;
|
|
27
|
+
--bpk-private-autosuggest-colour-text-close: #161616;
|
|
24
28
|
--bpk-private-badge-colour-bg-default: #eff3f8;
|
|
25
29
|
--bpk-private-badge-colour-bg-inverse: #ffffff;
|
|
26
30
|
--bpk-private-badge-colour-bg-outline: rgba(255, 255, 255, 0);
|
|
@@ -29,7 +33,6 @@
|
|
|
29
33
|
--bpk-private-badge-dimension-padding-horizontal-default: 0.5rem;
|
|
30
34
|
--bpk-private-badge-dimension-padding-horizontal-subtle: 0.5rem;
|
|
31
35
|
--bpk-private-badge-typography-tmp-badge-label: 0.875rem;
|
|
32
|
-
--bpk-private-badge-typography-tmp-badge-line-height: 0;
|
|
33
36
|
--bpk-private-button-colour-bg-destructive: #e0e4e9;
|
|
34
37
|
--bpk-private-button-colour-bg-destructive-pressed: #e70866;
|
|
35
38
|
--bpk-private-button-colour-bg-disabled: #e0e4e9;
|
|
@@ -62,8 +65,19 @@
|
|
|
62
65
|
--bpk-private-button-dimension-padding-horizontal-large: 1rem;
|
|
63
66
|
--bpk-private-button-typography-tmp-default-label: 1rem;
|
|
64
67
|
--bpk-private-card-button-contained-fill: rgba(255, 255, 255, 0.8);
|
|
68
|
+
--bpk-private-card-button-max-height: 2.5rem;
|
|
65
69
|
--bpk-private-carousel-trigger-bg-default: rgba(255, 255, 255, 0.5);
|
|
66
70
|
--bpk-private-carousel-trigger-bg-default-hover: rgba(255, 255, 255, 0.8);
|
|
71
|
+
--bpk-private-checkbox-bg-default-checked: #0062e3;
|
|
72
|
+
--bpk-private-checkbox-bg-default-intermediate: #0062e3;
|
|
73
|
+
--bpk-private-checkbox-bg-on-contrast-checked: #0062e3;
|
|
74
|
+
--bpk-private-checkbox-bg-on-contrast-intermediate: #0062e3;
|
|
75
|
+
--bpk-private-checkbox-border-default-disabled: #e0e4e9;
|
|
76
|
+
--bpk-private-checkbox-border-default-not-checked: #626971;
|
|
77
|
+
--bpk-private-checkbox-border-on-contrast-disabled: rgba(255, 255, 255, 0.2);
|
|
78
|
+
--bpk-private-checkbox-border-on-contrast-not-checked: rgba(255, 255, 255, 0.5);
|
|
79
|
+
--bpk-private-checkbox-icon-on-contrast: #ffffff;
|
|
80
|
+
--bpk-private-checkbox-stroke: 0.1875rem;
|
|
67
81
|
--bpk-private-chip-group-filter-colour-bg-icon-hover-on-image: #eff3f8;
|
|
68
82
|
--bpk-private-chip-group-filter-colour-bg-icon-off-on-image: #ffffff;
|
|
69
83
|
--bpk-private-chip-group-filter-colour-bg-icon-on-default: #05203c;
|
|
@@ -90,7 +104,7 @@
|
|
|
90
104
|
--bpk-private-chip-colour-border-default-off: #c1c7cf;
|
|
91
105
|
--bpk-private-chip-colour-border-on-contrast-off: #ffffff;
|
|
92
106
|
--bpk-private-chip-colour-border-on-contrast-on: #05203c;
|
|
93
|
-
--bpk-private-chip-colour-border-on-dark-
|
|
107
|
+
--bpk-private-chip-colour-border-on-dark-dismissible-hover: #ffffff;
|
|
94
108
|
--bpk-private-chip-colour-border-on-dark-hover: #ffffff;
|
|
95
109
|
--bpk-private-chip-colour-border-on-dark-off: rgba(255, 255, 255, 0.5);
|
|
96
110
|
--bpk-private-chip-colour-stroke-off-on-canvas-contrast-new: rgba(255, 255, 255, 0);
|
|
@@ -100,13 +114,13 @@
|
|
|
100
114
|
--bpk-private-chip-colour-text-on-image: #ffffff;
|
|
101
115
|
--bpk-private-chip-colour-text-on-image-dismissible-icon: #626971;
|
|
102
116
|
--bpk-private-chip-colour-text-on-dark: #161616;
|
|
103
|
-
--bpk-private-chip-colour-text-on-dark-
|
|
104
|
-
--bpk-private-chip-colour-text-on-dark-
|
|
117
|
+
--bpk-private-chip-colour-text-on-dark-dismissible-hover: #161616;
|
|
118
|
+
--bpk-private-chip-colour-text-on-dark-dismissible-icon: #626971;
|
|
119
|
+
--bpk-private-chip-dimension-border: 0.0625rem;
|
|
105
120
|
--bpk-private-chip-dimension-min-height-width: 2rem;
|
|
106
121
|
--bpk-private-chip-dimension-radius: 0.5rem;
|
|
107
122
|
--bpk-private-date-selector-cheapest-month-highlight: #154679;
|
|
108
123
|
--bpk-private-date-selector-flexible-date-card: #eff3f8;
|
|
109
|
-
--bpk-private-dimension-padding-veritcal: 0;
|
|
110
124
|
--bpk-private-info-banner-default: #eff3f8;
|
|
111
125
|
--bpk-private-info-banner-on-contrast: #ffffff;
|
|
112
126
|
--bpk-private-map-cluster-pin: #05203c;
|
|
@@ -117,11 +131,24 @@
|
|
|
117
131
|
--bpk-private-navigation-tabs-hover: #154679;
|
|
118
132
|
--bpk-private-navigation-tabs-outline: rgba(255, 255, 255, 0.2);
|
|
119
133
|
--bpk-private-navigation-tabs-selected: #024daf;
|
|
134
|
+
--bpk-private-radio-bg-default-disabled: #c1c7cf;
|
|
135
|
+
--bpk-private-radio-bg-default-on: #0062e3;
|
|
136
|
+
--bpk-private-radio-bg-on-contrast-off: #ffffff;
|
|
137
|
+
--bpk-private-radio-bg-on-contrast-on: #ffffff;
|
|
138
|
+
--bpk-private-radio-border: 0.1875rem;
|
|
139
|
+
--bpk-private-radio-border-default-off: #626971;
|
|
120
140
|
--bpk-private-rating-bar-default: #e0e4e9;
|
|
121
141
|
--bpk-private-rating-bar-on-contrast: #ffffff;
|
|
122
|
-
--bpk-private-segmented-control-canvas-default: #eff3f8;
|
|
123
|
-
--bpk-private-segmented-control-surface-contrast: rgba(255, 255, 255, 0.1);
|
|
124
|
-
--bpk-private-segmented-control-surface-contrast-
|
|
142
|
+
--bpk-private-segmented-control-colour-bg-on-canvas-default-default: #eff3f8;
|
|
143
|
+
--bpk-private-segmented-control-colour-bg-on-surface-contrast-default: rgba(255, 255, 255, 0.1);
|
|
144
|
+
--bpk-private-segmented-control-colour-bg-on-surface-contrast-selected: #024daf;
|
|
145
|
+
--bpk-private-segmented-control-colour-bg-selected: #05203c;
|
|
146
|
+
--bpk-private-segmented-control-colour-divider-default: #e0e4e9;
|
|
147
|
+
--bpk-private-segmented-control-colour-divider-on-surface-contrast: rgba(255, 255, 255, 0.2);
|
|
148
|
+
--bpk-private-segmented-control-dimension-bg-indicator-radius: 0;
|
|
149
|
+
--bpk-private-segmented-control-dimension-bg-track-radius: 0.5rem;
|
|
150
|
+
--bpk-private-segmented-control-dimension-min-height: 2rem;
|
|
151
|
+
--bpk-private-segmented-control-dimension-track-padding: 0;
|
|
125
152
|
--bpk-private-shadow-large-blur: 0.875rem;
|
|
126
153
|
--bpk-private-shadow-large-color: rgba(22, 22, 22, 0.25);
|
|
127
154
|
--bpk-private-shadow-large-position-x: 0;
|
|
@@ -149,21 +176,22 @@
|
|
|
149
176
|
--bpk-other-overlay: rgba(0, 0, 0, 0.2);
|
|
150
177
|
--bpk-other-scrim: rgba(0, 0, 0, 0.7);
|
|
151
178
|
--bpk-other-shadow: rgba(22, 22, 22, 0.25);
|
|
152
|
-
--bpk-status-danger-fill: #ffe9f9;
|
|
153
179
|
--bpk-status-danger-spot: #e70866;
|
|
154
|
-
--bpk-status-success-fill: #d4fff2;
|
|
155
180
|
--bpk-status-success-spot: #0c838a;
|
|
156
|
-
--bpk-status-warning-fill: #fff7cf;
|
|
157
181
|
--bpk-status-warning-spot: #f55d42;
|
|
158
182
|
--bpk-surface-contrast: #05203c;
|
|
183
|
+
--bpk-surface-danger-fill: #ffe9f9;
|
|
159
184
|
--bpk-surface-default: #ffffff;
|
|
160
185
|
--bpk-surface-elevated: #ffffff;
|
|
161
186
|
--bpk-surface-hero: #0062e3;
|
|
162
187
|
--bpk-surface-highlight: #e0e4e9;
|
|
163
188
|
--bpk-surface-low-contrast: #f7f9fb;
|
|
164
189
|
--bpk-surface-subtle: #e3f0ff;
|
|
190
|
+
--bpk-surface-success-fill: #d4fff2;
|
|
165
191
|
--bpk-surface-tint: rgba(255, 255, 255, 0.1);
|
|
192
|
+
--bpk-surface-warning-fill: #fff7cf;
|
|
166
193
|
--bpk-surface-promo: #0062e3;
|
|
194
|
+
--bpk-test: #ff1088;
|
|
167
195
|
--bpk-text-disabled: rgba(0, 0, 0, 0.2);
|
|
168
196
|
--bpk-text-disabled-on-dark: rgba(255, 255, 255, 0.5);
|
|
169
197
|
--bpk-text-error: #e70866;
|