@skyscanner/backpack-web 43.1.0 → 43.2.0
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/bpk-component-badge/index.d.ts +2 -2
- package/bpk-component-badge/index.js +2 -2
- package/bpk-component-badge/src/BpkBadge.d.ts +1 -0
- package/bpk-component-badge/src/BpkBadge.js +4 -2
- package/bpk-component-badge/src/BpkBadge.module.css +1 -1
- package/bpk-component-badge/src/themeAttributes.d.ts +3 -12
- package/bpk-component-badge/src/themeAttributes.js +5 -14
- package/bpk-component-icon/lg/checkbox-minus.js +14 -0
- package/bpk-component-icon/lg/checkbox-tick.js +14 -0
- package/bpk-component-icon/lg/hotels--swimming-pool.js +14 -0
- package/bpk-component-icon/sm/hotels--swimming-pool.js +16 -0
- package/bpk-mixins/_badges.scss +74 -164
- package/bpk-stylesheets/base.css +1 -1
- package/bpk-stylesheets/theme-backpack-dark.css +29 -0
- package/bpk-stylesheets/theme-backpack-light.css +29 -0
- package/package.json +2 -2
- package/bpk-mixins/_badges-v2.scss +0 -241
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import component, { BADGE_TYPES, type Props } from './src/BpkBadge';
|
|
2
|
-
import themeAttributes, { allBadgeThemeAttributes, badgeThemeAttributes
|
|
2
|
+
import themeAttributes, { allBadgeThemeAttributes, badgeThemeAttributes } from './src/themeAttributes';
|
|
3
3
|
export type BpkBadgeProps = Props;
|
|
4
4
|
export default component;
|
|
5
|
-
export { BADGE_TYPES, themeAttributes, allBadgeThemeAttributes, badgeThemeAttributes
|
|
5
|
+
export { BADGE_TYPES, themeAttributes, allBadgeThemeAttributes, badgeThemeAttributes };
|
|
@@ -17,6 +17,6 @@
|
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
19
|
import component, { BADGE_TYPES } from "./src/BpkBadge";
|
|
20
|
-
import themeAttributes, { allBadgeThemeAttributes, badgeThemeAttributes
|
|
20
|
+
import themeAttributes, { allBadgeThemeAttributes, badgeThemeAttributes } from "./src/themeAttributes";
|
|
21
21
|
export default component;
|
|
22
|
-
export { BADGE_TYPES, themeAttributes, allBadgeThemeAttributes, badgeThemeAttributes
|
|
22
|
+
export { BADGE_TYPES, themeAttributes, allBadgeThemeAttributes, badgeThemeAttributes };
|
|
@@ -27,7 +27,8 @@ export const BADGE_TYPES = {
|
|
|
27
27
|
inverse: 'inverse',
|
|
28
28
|
outline: 'outline',
|
|
29
29
|
strong: 'strong',
|
|
30
|
-
brand: 'brand'
|
|
30
|
+
brand: 'brand',
|
|
31
|
+
subtle: 'subtle'
|
|
31
32
|
};
|
|
32
33
|
const getClassName = cssModules(STYLES);
|
|
33
34
|
const badgeTypeClassNames = {
|
|
@@ -38,7 +39,8 @@ const badgeTypeClassNames = {
|
|
|
38
39
|
[BADGE_TYPES.inverse]: getClassName('bpk-badge--inverse'),
|
|
39
40
|
[BADGE_TYPES.outline]: getClassName('bpk-badge--outline'),
|
|
40
41
|
[BADGE_TYPES.strong]: getClassName('bpk-badge--strong'),
|
|
41
|
-
[BADGE_TYPES.brand]: getClassName('bpk-badge--brand')
|
|
42
|
+
[BADGE_TYPES.brand]: getClassName('bpk-badge--brand'),
|
|
43
|
+
[BADGE_TYPES.subtle]: getClassName('bpk-badge--subtle')
|
|
42
44
|
};
|
|
43
45
|
const BpkBadge = ({
|
|
44
46
|
centered = false,
|
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
|
-
.bpk-badge{display:inline-flex;
|
|
18
|
+
.bpk-badge{display:inline-flex;margin:0;padding:var(--bpk-spacing-sm, 0.25rem) var(--bpk-private-badge-dimension-padding-horizontal-default, 0.5rem);align-items:center;border-radius:var(--bpk-radius-xs, 0.25rem);font-size:.75rem;font-weight:400;line-height:1rem}.bpk-badge--centered{vertical-align:text-bottom}.bpk-badge--docked-right{position:absolute;top:0;border-end-end-radius:0;border-start-end-radius:0;border-start-start-radius:0;inset-inline-end:0}.bpk-badge--docked-left{position:absolute;top:0;border-end-start-radius:0;border-start-end-radius:0;border-start-start-radius:0;inset-inline-start:0}.bpk-badge--warning{background-color:var(--bpk-private-badge-colour-bg-default, rgb(239, 243, 248));color:var(--bpk-text-primary, rgb(22, 22, 22));fill:var(--bpk-status-warning-spot, rgb(245, 93, 66))}.bpk-badge--success{background-color:var(--bpk-private-badge-colour-bg-default, rgb(239, 243, 248));color:var(--bpk-text-primary, rgb(22, 22, 22));fill:var(--bpk-status-success-spot, rgb(12, 131, 138))}.bpk-badge--critical{background-color:var(--bpk-private-badge-colour-bg-default, rgb(239, 243, 248));color:var(--bpk-text-primary, rgb(22, 22, 22));fill:var(--bpk-status-danger-spot, rgb(231, 8, 102))}.bpk-badge--normal{background-color:var(--bpk-private-badge-colour-bg-default, rgb(239, 243, 248));color:var(--bpk-text-primary, rgb(22, 22, 22));fill:var(--bpk-text-primary, rgb(22, 22, 22))}.bpk-badge--inverse{background-color:var(--bpk-private-badge-colour-bg-inverse, rgb(255, 255, 255));color:var(--bpk-text-primary, rgb(22, 22, 22));fill:var(--bpk-text-primary, rgb(22, 22, 22));padding-inline:var(--bpk-spacing-md, 0.5rem)}.bpk-badge--outline{background-color:var(--bpk-private-badge-colour-bg-outline, transparent);color:var(--bpk-text-on-dark, rgb(255, 255, 255));box-shadow:inset 0 0 0 1px #fff;box-shadow:inset 0 0 0 var(--bpk-border-1, 1px) var(--bpk-private-badge-colour-stroke-outline, rgb(255, 255, 255));fill:var(--bpk-text-on-dark, rgb(255, 255, 255));padding-inline:var(--bpk-spacing-md, 0.5rem)}.bpk-badge--strong{background-color:var(--bpk-core-primary, rgb(5, 32, 60));color:var(--bpk-text-on-dark, rgb(255, 255, 255));fill:var(--bpk-text-on-dark, rgb(255, 255, 255));padding-inline:var(--bpk-spacing-md, 0.5rem)}.bpk-badge--brand{background-color:var(--bpk-core-accent, rgb(0, 98, 227));color:var(--bpk-text-inverse, rgb(255, 255, 255));fill:var(--bpk-text-inverse, rgb(255, 255, 255));padding-inline:var(--bpk-spacing-md, 0.5rem)}.bpk-badge--subtle{background-color:var(--bpk-private-badge-colour-bg-subtle, rgb(239, 243, 248));color:var(--bpk-text-primary, rgb(22, 22, 22));fill:var(--bpk-text-primary, rgb(22, 22, 22));padding-inline:var(--bpk-private-badge-dimension-padding-horizontal-subtle, 0.25rem)}
|
|
@@ -1,17 +1,8 @@
|
|
|
1
1
|
export declare const badgeThemeAttributes: string[];
|
|
2
|
-
export declare const badgeNormalThemeAttributes: string[];
|
|
3
|
-
export declare const badgeWarningThemeAttributes: string[];
|
|
4
|
-
export declare const badgeSuccessThemeAttributes: string[];
|
|
5
|
-
export declare const badgeCriticalThemeAttributes: string[];
|
|
6
|
-
export declare const badgeInverseThemeAttributes: string[];
|
|
7
|
-
export declare const badgeOutlineThemeAttributes: string[];
|
|
8
|
-
export declare const badgeStrongThemeAttributes: string[];
|
|
9
|
-
export declare const badgeBrandThemeAttributes: string[];
|
|
10
2
|
/**
|
|
11
|
-
* Combined array of all badge theme attributes
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
* targeted theming.
|
|
3
|
+
* Combined deduplicated array of all badge private theme attributes.
|
|
4
|
+
* Only exposes component-scoped (private) badge tokens — global semantic vars
|
|
5
|
+
* (text, status, core colours) can be overridden at the theme level independently.
|
|
15
6
|
*/
|
|
16
7
|
export declare const allBadgeThemeAttributes: string[];
|
|
17
8
|
/**
|
|
@@ -16,23 +16,14 @@
|
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
|
-
export const badgeThemeAttributes = [
|
|
20
|
-
export const badgeNormalThemeAttributes = ['badgeNormalBackgroundColor', 'badgeNormalTextColor', 'badgeNormalIconColor'];
|
|
21
|
-
export const badgeWarningThemeAttributes = ['badgeWarningBackgroundColor', 'badgeWarningTextColor', 'badgeWarningIconColor'];
|
|
22
|
-
export const badgeSuccessThemeAttributes = ['badgeSuccessBackgroundColor', 'badgeSuccessTextColor', 'badgeSuccessIconColor'];
|
|
23
|
-
export const badgeCriticalThemeAttributes = ['badgeCriticalBackgroundColor', 'badgeCriticalTextColor', 'badgeCriticalIconColor'];
|
|
24
|
-
export const badgeInverseThemeAttributes = ['badgeInverseBackgroundColor', 'badgeInverseTextColor', 'badgeInverseIconColor'];
|
|
25
|
-
export const badgeOutlineThemeAttributes = ['badgeOutlineBackgroundColor', 'badgeOutlineTextColor', 'badgeOutlineIconColor'];
|
|
26
|
-
export const badgeStrongThemeAttributes = ['badgeStrongBackgroundColor', 'badgeStrongTextColor', 'badgeStrongIconColor'];
|
|
27
|
-
export const badgeBrandThemeAttributes = ['badgeBrandBackgroundColor', 'badgeBrandTextColor', 'badgeBrandIconColor'];
|
|
19
|
+
export const badgeThemeAttributes = [];
|
|
28
20
|
|
|
29
21
|
/**
|
|
30
|
-
* Combined array of all badge theme attributes
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
* targeted theming.
|
|
22
|
+
* Combined deduplicated array of all badge private theme attributes.
|
|
23
|
+
* Only exposes component-scoped (private) badge tokens — global semantic vars
|
|
24
|
+
* (text, status, core colours) can be overridden at the theme level independently.
|
|
34
25
|
*/
|
|
35
|
-
export const allBadgeThemeAttributes = [
|
|
26
|
+
export const allBadgeThemeAttributes = ['privateBadgeColourBgDefault', 'privateBadgeDimensionPaddingHorizontalDefault', 'privateBadgeColourBgInverse', 'privateBadgeColourBgOutline', 'privateBadgeColourStrokeOutline', 'privateBadgeColourBgSubtle', 'privateBadgeDimensionPaddingHorizontalSubtle'];
|
|
36
27
|
|
|
37
28
|
/**
|
|
38
29
|
* @deprecated The keys in this array pre-date full badge theming support and map to CSS variables
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
const CheckboxMinusIcon = props => /*#__PURE__*/_jsx("svg", {
|
|
4
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
5
|
+
viewBox: "0 0 24 24",
|
|
6
|
+
"aria-hidden": "true",
|
|
7
|
+
width: "1.5rem",
|
|
8
|
+
height: "1.5rem",
|
|
9
|
+
...props,
|
|
10
|
+
children: /*#__PURE__*/_jsx("path", {
|
|
11
|
+
d: "M7.7 10.2h8.4a1.8 1.8 0 0 1 0 3.6H7.7a1.8 1.8 0 0 1 0-3.6"
|
|
12
|
+
})
|
|
13
|
+
});
|
|
14
|
+
export default CheckboxMinusIcon;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
const CheckboxTickIcon = props => /*#__PURE__*/_jsx("svg", {
|
|
4
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
5
|
+
viewBox: "0 0 24 24",
|
|
6
|
+
"aria-hidden": "true",
|
|
7
|
+
width: "1.5rem",
|
|
8
|
+
height: "1.5rem",
|
|
9
|
+
...props,
|
|
10
|
+
children: /*#__PURE__*/_jsx("path", {
|
|
11
|
+
d: "M10.2 17.73a1.8 1.8 0 0 1-1.273-.527L5.89 14.164a1.8 1.8 0 1 1 2.546-2.546l1.764 1.764 5.837-5.837a1.8 1.8 0 1 1 2.546 2.546l-7.11 7.11a1.8 1.8 0 0 1-1.273.527Z"
|
|
12
|
+
})
|
|
13
|
+
});
|
|
14
|
+
export default CheckboxTickIcon;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
const HotelsSwimmingPoolIcon = props => /*#__PURE__*/_jsx("svg", {
|
|
4
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
5
|
+
viewBox: "0 0 24 24",
|
|
6
|
+
"aria-hidden": "true",
|
|
7
|
+
width: "1.5rem",
|
|
8
|
+
height: "1.5rem",
|
|
9
|
+
...props,
|
|
10
|
+
children: /*#__PURE__*/_jsx("path", {
|
|
11
|
+
d: "M16 15c.123 0 .225.043.37.178.076.072.156.163.251.277l.085.103c.07.086.15.181.23.273.237.27.538.571.959.8.425.23.946.374 1.605.374q.404-.001.741-.067c.363-.071.759.18.759.55v.502c0 2.215-1.79 4.01-4 4.01H7c-2.21 0-4-1.795-4-4.01v-.502c0-.37.396-.621.759-.55q.338.066.741.067c.66 0 1.18-.143 1.605-.374.421-.229.722-.53.958-.8a13 13 0 0 0 .316-.376c.095-.114.175-.205.252-.277.144-.135.246-.178.369-.178.186 0 .328.063.496.2.09.074.182.165.291.28l.098.103c.08.086.17.181.261.272.271.272.61.566 1.078.789.47.223 1.044.36 1.776.36s1.306-.137 1.776-.36a3.8 3.8 0 0 0 1.078-.788c.09-.092.18-.187.261-.273l.098-.104c.109-.114.201-.205.29-.279.169-.137.31-.2.497-.2M15 2a3 3 0 0 0-3 3v2H6V5a1 1 0 0 1 1.928-.375 1 1 0 0 0 1.853-.75A3 3 0 0 0 4 5v9.969q.236.03.5.031c.606 0 1.094-.122 1.5-.32V13h6v2c.732 0 1.306-.138 1.776-.36q.118-.056.224-.119V5a1 1 0 0 1 1.928-.375 1 1 0 0 0 1.853-.75A3 3 0 0 0 15 2m-9 9V9h6v2z"
|
|
12
|
+
})
|
|
13
|
+
});
|
|
14
|
+
export default HotelsSwimmingPoolIcon;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
const HotelsSwimmingPoolIcon = props => /*#__PURE__*/_jsxs("svg", {
|
|
4
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
5
|
+
viewBox: "0 0 24 24",
|
|
6
|
+
"aria-hidden": "true",
|
|
7
|
+
width: "1rem",
|
|
8
|
+
height: "1rem",
|
|
9
|
+
...props,
|
|
10
|
+
children: [/*#__PURE__*/_jsx("path", {
|
|
11
|
+
d: "M16.667 14.722c-.217 0-.383.074-.579.238a4 4 0 0 0-.34.334l-.114.125c-.094.103-.198.218-.304.327-.316.324-.711.675-1.257.941-.549.268-1.219.434-2.073.434s-1.524-.166-2.073-.433c-.546-.267-.941-.618-1.257-.942-.106-.11-.21-.224-.304-.327l-.115-.125a4 4 0 0 0-.34-.334c-.195-.164-.36-.238-.578-.238-.143 0-.263.05-.43.212-.09.086-.184.194-.295.331l-.098.123c-.083.103-.175.219-.268.328-.276.325-.628.685-1.12.958-.496.277-1.103.447-1.872.447a4.4 4.4 0 0 1-.865-.08c-.424-.085-.885.215-.885.659 0 2.65 2.09 4.8 4.667 4.8h11.666c2.577 0 4.667-2.15 4.667-4.8 0-.444-.461-.744-.885-.66a4.4 4.4 0 0 1-.865.081c-.77 0-1.376-.17-1.873-.447-.49-.273-.843-.633-1.119-.958-.093-.11-.185-.225-.268-.328l-.098-.123a4 4 0 0 0-.294-.33c-.168-.162-.288-.213-.431-.213"
|
|
12
|
+
}), /*#__PURE__*/_jsx("path", {
|
|
13
|
+
d: "M15.002 1.5A3.6 3.6 0 0 0 11.4 5.1v2.4H6V5.1a.601.601 0 0 1 1.157-.225 1.5 1.5 0 1 0 2.78-1.125A3.6 3.6 0 0 0 3 5.1v9.888c.081.004.165.012.25.012.77 0 1.376-.17 1.873-.447.359-.2.642-.448.877-.693V12h5.4v2.97q.285.028.6.03c.854 0 1.524-.166 2.073-.434q.174-.085.328-.181V5.1a.601.601 0 0 1 1.157-.226 1.5 1.5 0 1 0 2.78-1.125 3.6 3.6 0 0 0-3.337-2.25M6 10.5V9h5.4v1.5z"
|
|
14
|
+
})]
|
|
15
|
+
});
|
|
16
|
+
export default HotelsSwimmingPoolIcon;
|
package/bpk-mixins/_badges.scss
CHANGED
|
@@ -19,9 +19,6 @@
|
|
|
19
19
|
/* stylelint-disable at-rule-disallowed-list */
|
|
20
20
|
|
|
21
21
|
@use 'tokens';
|
|
22
|
-
@use 'radii';
|
|
23
|
-
@use 'typography';
|
|
24
|
-
@use 'utils';
|
|
25
22
|
|
|
26
23
|
////
|
|
27
24
|
/// @group badges
|
|
@@ -36,31 +33,17 @@
|
|
|
36
33
|
|
|
37
34
|
@mixin bpk-badge {
|
|
38
35
|
display: inline-flex;
|
|
39
|
-
|
|
36
|
+
margin: 0;
|
|
37
|
+
padding: var(--bpk-spacing-sm, tokens.bpk-spacing-sm())
|
|
38
|
+
var(
|
|
39
|
+
--bpk-private-badge-dimension-padding-horizontal-default,
|
|
40
|
+
tokens.bpk-spacing-md()
|
|
41
|
+
);
|
|
40
42
|
align-items: center;
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
tokens.$bpk-border-radius-xs
|
|
46
|
-
);
|
|
47
|
-
@include typography.bpk-text;
|
|
48
|
-
@include typography.bpk-caption;
|
|
49
|
-
@include utils.bpk-themeable-property(
|
|
50
|
-
font-size,
|
|
51
|
-
--bpk-badge-font-size,
|
|
52
|
-
tokens.$bpk-font-size-xs
|
|
53
|
-
);
|
|
54
|
-
@include utils.bpk-themeable-property(
|
|
55
|
-
font-weight,
|
|
56
|
-
--bpk-badge-font-weight,
|
|
57
|
-
tokens.$bpk-font-weight-book
|
|
58
|
-
);
|
|
59
|
-
@include utils.bpk-themeable-property(
|
|
60
|
-
line-height,
|
|
61
|
-
--bpk-badge-line-height,
|
|
62
|
-
tokens.$bpk-line-height-xs
|
|
63
|
-
);
|
|
43
|
+
border-radius: var(--bpk-radius-xs, tokens.$bpk-border-radius-xs);
|
|
44
|
+
font-size: tokens.$bpk-font-size-xs;
|
|
45
|
+
font-weight: tokens.$bpk-font-weight-book;
|
|
46
|
+
line-height: tokens.$bpk-line-height-xs;
|
|
64
47
|
}
|
|
65
48
|
|
|
66
49
|
/// Centered badge. Modifies the bpk-badge mixin.
|
|
@@ -90,17 +73,10 @@
|
|
|
90
73
|
@mixin bpk-badge--docked-right {
|
|
91
74
|
position: absolute;
|
|
92
75
|
top: 0;
|
|
93
|
-
|
|
94
|
-
border-
|
|
95
|
-
border-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
@include utils.bpk-rtl {
|
|
99
|
-
right: inherit;
|
|
100
|
-
left: 0;
|
|
101
|
-
border-bottom-left-radius: 0;
|
|
102
|
-
border-bottom-right-radius: tokens.$bpk-border-radius-xs;
|
|
103
|
-
}
|
|
76
|
+
border-end-end-radius: 0;
|
|
77
|
+
border-start-end-radius: 0;
|
|
78
|
+
border-start-start-radius: 0;
|
|
79
|
+
inset-inline-end: 0;
|
|
104
80
|
}
|
|
105
81
|
|
|
106
82
|
/// Left-docked badge. Modifies the bpk-badge mixin.
|
|
@@ -116,17 +92,10 @@
|
|
|
116
92
|
@mixin bpk-badge--docked-left {
|
|
117
93
|
position: absolute;
|
|
118
94
|
top: 0;
|
|
119
|
-
|
|
120
|
-
border-
|
|
121
|
-
border-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
@include utils.bpk-rtl {
|
|
125
|
-
right: 0;
|
|
126
|
-
left: inherit;
|
|
127
|
-
border-bottom-left-radius: tokens.$bpk-border-radius-xs;
|
|
128
|
-
border-bottom-right-radius: 0;
|
|
129
|
-
}
|
|
95
|
+
border-end-start-radius: 0;
|
|
96
|
+
border-start-end-radius: 0;
|
|
97
|
+
border-start-start-radius: 0;
|
|
98
|
+
inset-inline-start: 0;
|
|
130
99
|
}
|
|
131
100
|
|
|
132
101
|
/// Normal badge. Modifies the bpk-badge mixin.
|
|
@@ -140,21 +109,12 @@
|
|
|
140
109
|
/// }
|
|
141
110
|
|
|
142
111
|
@mixin bpk-badge--normal {
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
--bpk-badge-normal-background-color,
|
|
112
|
+
background-color: var(
|
|
113
|
+
--bpk-private-badge-colour-bg-default,
|
|
146
114
|
tokens.$bpk-private-badge-background-normal-day
|
|
147
115
|
);
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
--bpk-badge-normal-text-color,
|
|
151
|
-
tokens.$bpk-text-primary-day
|
|
152
|
-
);
|
|
153
|
-
@include utils.bpk-themeable-property(
|
|
154
|
-
fill,
|
|
155
|
-
--bpk-badge-normal-icon-color,
|
|
156
|
-
tokens.$bpk-text-primary-day
|
|
157
|
-
);
|
|
116
|
+
color: var(--bpk-text-primary, tokens.$bpk-text-primary-day);
|
|
117
|
+
fill: var(--bpk-text-primary, tokens.$bpk-text-primary-day);
|
|
158
118
|
}
|
|
159
119
|
|
|
160
120
|
/// Warning badge. Modifies the bpk-badge mixin.
|
|
@@ -168,21 +128,12 @@
|
|
|
168
128
|
/// }
|
|
169
129
|
|
|
170
130
|
@mixin bpk-badge--warning {
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
--bpk-badge-warning-background-color,
|
|
131
|
+
background-color: var(
|
|
132
|
+
--bpk-private-badge-colour-bg-default,
|
|
174
133
|
tokens.$bpk-private-badge-background-normal-day
|
|
175
134
|
);
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
--bpk-badge-warning-text-color,
|
|
179
|
-
tokens.$bpk-text-on-light-day
|
|
180
|
-
);
|
|
181
|
-
@include utils.bpk-themeable-property(
|
|
182
|
-
fill,
|
|
183
|
-
--bpk-badge-warning-icon-color,
|
|
184
|
-
tokens.$bpk-status-warning-spot-day
|
|
185
|
-
);
|
|
135
|
+
color: var(--bpk-text-primary, tokens.$bpk-text-primary-day);
|
|
136
|
+
fill: var(--bpk-status-warning-spot, tokens.$bpk-status-warning-spot-day);
|
|
186
137
|
}
|
|
187
138
|
|
|
188
139
|
/// Success badge. Modifies the bpk-badge mixin.
|
|
@@ -196,21 +147,12 @@
|
|
|
196
147
|
/// }
|
|
197
148
|
|
|
198
149
|
@mixin bpk-badge--success {
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
--bpk-badge-success-background-color,
|
|
150
|
+
background-color: var(
|
|
151
|
+
--bpk-private-badge-colour-bg-default,
|
|
202
152
|
tokens.$bpk-private-badge-background-normal-day
|
|
203
153
|
);
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
--bpk-badge-success-text-color,
|
|
207
|
-
tokens.$bpk-text-on-light-day
|
|
208
|
-
);
|
|
209
|
-
@include utils.bpk-themeable-property(
|
|
210
|
-
fill,
|
|
211
|
-
--bpk-badge-success-icon-color,
|
|
212
|
-
tokens.$bpk-status-success-spot-day
|
|
213
|
-
);
|
|
154
|
+
color: var(--bpk-text-primary, tokens.$bpk-text-primary-day);
|
|
155
|
+
fill: var(--bpk-status-success-spot, tokens.$bpk-status-success-spot-day);
|
|
214
156
|
}
|
|
215
157
|
|
|
216
158
|
/// Critical badge. Modifies the bpk-badge mixin.
|
|
@@ -224,21 +166,12 @@
|
|
|
224
166
|
/// }
|
|
225
167
|
|
|
226
168
|
@mixin bpk-badge--critical {
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
--bpk-badge-critical-background-color,
|
|
169
|
+
background-color: var(
|
|
170
|
+
--bpk-private-badge-colour-bg-default,
|
|
230
171
|
tokens.$bpk-private-badge-background-normal-day
|
|
231
172
|
);
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
--bpk-badge-critical-text-color,
|
|
235
|
-
tokens.$bpk-text-on-light-day
|
|
236
|
-
);
|
|
237
|
-
@include utils.bpk-themeable-property(
|
|
238
|
-
fill,
|
|
239
|
-
--bpk-badge-critical-icon-color,
|
|
240
|
-
tokens.$bpk-status-danger-spot-day
|
|
241
|
-
);
|
|
173
|
+
color: var(--bpk-text-primary, tokens.$bpk-text-primary-day);
|
|
174
|
+
fill: var(--bpk-status-danger-spot, tokens.$bpk-status-danger-spot-day);
|
|
242
175
|
}
|
|
243
176
|
|
|
244
177
|
/// Inverse badge. Modifies the bpk-badge mixin.
|
|
@@ -252,21 +185,13 @@
|
|
|
252
185
|
/// }
|
|
253
186
|
|
|
254
187
|
@mixin bpk-badge--inverse {
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
--bpk-badge-inverse-background-color,
|
|
188
|
+
background-color: var(
|
|
189
|
+
--bpk-private-badge-colour-bg-inverse,
|
|
258
190
|
tokens.$bpk-surface-default-day
|
|
259
191
|
);
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
tokens.$bpk-text-primary-day
|
|
264
|
-
);
|
|
265
|
-
@include utils.bpk-themeable-property(
|
|
266
|
-
fill,
|
|
267
|
-
--bpk-badge-inverse-icon-color,
|
|
268
|
-
tokens.$bpk-text-primary-day
|
|
269
|
-
);
|
|
192
|
+
color: var(--bpk-text-primary, tokens.$bpk-text-primary-day);
|
|
193
|
+
fill: var(--bpk-text-primary, tokens.$bpk-text-primary-day);
|
|
194
|
+
padding-inline: var(--bpk-spacing-md, tokens.bpk-spacing-md());
|
|
270
195
|
}
|
|
271
196
|
|
|
272
197
|
/// Outline badge. Modifies the bpk-badge mixin.
|
|
@@ -280,30 +205,14 @@
|
|
|
280
205
|
/// }
|
|
281
206
|
|
|
282
207
|
@mixin bpk-badge--outline {
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
// There is no separate badgeOutlineBorderColor attribute by design — if independent colours are
|
|
286
|
-
// ever needed, a dedicated CSS variable and theme attribute should be introduced at that point.
|
|
208
|
+
background-color: var(--bpk-private-badge-colour-bg-outline, transparent);
|
|
209
|
+
color: var(--bpk-text-on-dark, tokens.$bpk-text-on-dark-day);
|
|
287
210
|
box-shadow: inset 0 0 0 tokens.$bpk-border-size-sm
|
|
288
211
|
tokens.$bpk-text-on-dark-day;
|
|
289
|
-
box-shadow: inset 0 0 0 tokens.$bpk-border-size-sm
|
|
290
|
-
var(--bpk-badge-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
background-color,
|
|
294
|
-
--bpk-badge-outline-background-color,
|
|
295
|
-
transparent
|
|
296
|
-
);
|
|
297
|
-
@include utils.bpk-themeable-property(
|
|
298
|
-
color,
|
|
299
|
-
--bpk-badge-outline-text-color,
|
|
300
|
-
tokens.$bpk-text-on-dark-day
|
|
301
|
-
);
|
|
302
|
-
@include utils.bpk-themeable-property(
|
|
303
|
-
fill,
|
|
304
|
-
--bpk-badge-outline-icon-color,
|
|
305
|
-
tokens.$bpk-text-on-dark-day
|
|
306
|
-
);
|
|
212
|
+
box-shadow: inset 0 0 0 var(--bpk-border-1, tokens.$bpk-border-size-sm)
|
|
213
|
+
var(--bpk-private-badge-colour-stroke-outline, tokens.$bpk-text-on-dark-day);
|
|
214
|
+
fill: var(--bpk-text-on-dark, tokens.$bpk-text-on-dark-day);
|
|
215
|
+
padding-inline: var(--bpk-spacing-md, tokens.bpk-spacing-md());
|
|
307
216
|
}
|
|
308
217
|
|
|
309
218
|
/// Strong badge. Modifies the bpk-badge mixin.
|
|
@@ -317,21 +226,10 @@
|
|
|
317
226
|
/// }
|
|
318
227
|
|
|
319
228
|
@mixin bpk-badge--strong {
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
);
|
|
325
|
-
@include utils.bpk-themeable-property(
|
|
326
|
-
color,
|
|
327
|
-
--bpk-badge-strong-text-color,
|
|
328
|
-
tokens.$bpk-text-on-dark-day
|
|
329
|
-
);
|
|
330
|
-
@include utils.bpk-themeable-property(
|
|
331
|
-
fill,
|
|
332
|
-
--bpk-badge-strong-icon-color,
|
|
333
|
-
tokens.$bpk-text-on-dark-day
|
|
334
|
-
);
|
|
229
|
+
background-color: var(--bpk-core-primary, tokens.$bpk-core-primary-day);
|
|
230
|
+
color: var(--bpk-text-on-dark, tokens.$bpk-text-on-dark-day);
|
|
231
|
+
fill: var(--bpk-text-on-dark, tokens.$bpk-text-on-dark-day);
|
|
232
|
+
padding-inline: var(--bpk-spacing-md, tokens.bpk-spacing-md());
|
|
335
233
|
}
|
|
336
234
|
|
|
337
235
|
/// Brand badge. Modifies the bpk-badge mixin.
|
|
@@ -345,19 +243,31 @@
|
|
|
345
243
|
/// }
|
|
346
244
|
|
|
347
245
|
@mixin bpk-badge--brand {
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
246
|
+
background-color: var(--bpk-core-accent, tokens.$bpk-core-accent-day);
|
|
247
|
+
color: var(--bpk-text-inverse, tokens.$bpk-text-primary-inverse-day);
|
|
248
|
+
fill: var(--bpk-text-inverse, tokens.$bpk-text-primary-inverse-day);
|
|
249
|
+
padding-inline: var(--bpk-spacing-md, tokens.bpk-spacing-md());
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
/// Subtle badge. Modifies the bpk-badge mixin.
|
|
253
|
+
///
|
|
254
|
+
/// @require {mixin} bpk-badge
|
|
255
|
+
///
|
|
256
|
+
/// @example scss
|
|
257
|
+
/// .selector {
|
|
258
|
+
/// @include bpk-badge();
|
|
259
|
+
/// @include bpk-badge--subtle();
|
|
260
|
+
/// }
|
|
261
|
+
|
|
262
|
+
@mixin bpk-badge--subtle {
|
|
263
|
+
background-color: var(
|
|
264
|
+
--bpk-private-badge-colour-bg-subtle,
|
|
265
|
+
tokens.$bpk-private-badge-background-normal-day
|
|
357
266
|
);
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
267
|
+
color: var(--bpk-text-primary, tokens.$bpk-text-primary-day);
|
|
268
|
+
fill: var(--bpk-text-primary, tokens.$bpk-text-primary-day);
|
|
269
|
+
padding-inline: var(
|
|
270
|
+
--bpk-private-badge-dimension-padding-horizontal-subtle,
|
|
271
|
+
tokens.bpk-spacing-sm()
|
|
362
272
|
);
|
|
363
273
|
}
|
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-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-512:32rem;--bpk-modal-600:37.5rem;--bpk-modal-800:50rem;--bpk-modal-1000:62.5rem;--bpk-modal-1024:64rem;--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:#f5f7fa;--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:#fff3;--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-hover:#fff0;--bpk-private-chip-colour-bg-default-off:#fff0;--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:#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:#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:#0062e3;--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-slider-bg-knob:#0062e3;--bpk-private-slider-bg-track:#0062e3;--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-overlay:#0003;--bpk-other-scrim:#000000b3;--bpk-other-shadow:#16161640;--bpk-other-line-default:#c1c7cf;--bpk-other-line-on-contrast:#fff3;--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:#f5f7fa;--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-secondary-on-contrast:#ffffff80;--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-hover:#fff0;--bpk-private-chip-colour-bg-default-off:#fff0;--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-slider-bg-knob:#84e9ff;--bpk-private-slider-bg-track:#84e9ff;--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-overlay:#fffc;--bpk-other-scrim:#000000b3;--bpk-other-shadow:#16161640;--bpk-other-line-default:#fff3;--bpk-other-line-on-contrast:#fff3;--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-secondary-on-contrast:#ffffff80;--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-512:32rem;--bpk-modal-600:37.5rem;--bpk-modal-800:50rem;--bpk-modal-1000:62.5rem;--bpk-modal-1024:64rem;--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:#f5f7fa;--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:#fff3;--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-hover:#fff0;--bpk-private-chip-colour-bg-default-off:#fff0;--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:#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:#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:#0062e3;--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-slider-bg-knob:#0062e3;--bpk-private-slider-bg-track:#0062e3;--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-overlay:#0003;--bpk-other-scrim:#000000b3;--bpk-other-shadow:#16161640;--bpk-other-line-default:#c1c7cf;--bpk-other-line-on-contrast:#fff3;--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:#f5f7fa;--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-secondary-on-contrast:#ffffff80;--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-line-heights-16:1rem;--bpk-typography-line-heights-20:1.25rem;--bpk-typography-line-heights-24:1.5rem;--bpk-typography-line-heights-28:1.75rem;--bpk-typography-line-heights-40:2.5rem;--bpk-typography-line-heights-48:3rem;--bpk-typography-line-heights-64:4rem;--bpk-typography-line-heights-76:4.75rem;--bpk-typography-line-heights-82:5.125rem;--bpk-typography-line-heights-96:6rem;--bpk-typography-line-heights-115:7.1875rem;--bpk-typography-line-heights-120:7.5rem;--bpk-typography-line-heights-153:9.625rem;--bpk-typography-line-heights-192:12rem;--bpk-typography-sizes-12:0.75rem;--bpk-typography-sizes-14:0.875rem;--bpk-typography-sizes-20:1.25rem;--bpk-typography-sizes-24:1.5rem;--bpk-typography-sizes-32:2rem;--bpk-typography-sizes-40:2.5rem;--bpk-typography-sizes-48:3rem;--bpk-typography-sizes-64:4rem;--bpk-typography-sizes-76:4.75rem;--bpk-typography-sizes-96:6rem;--bpk-typography-sizes-120:7.5rem;--bpk-typography-sizes-144:9rem;--bpk-typography-sizes-192:12rem;--bpk-typography-sizes-240:15rem;--bpk-typography-sizes-base:1rem;--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-hover:#fff0;--bpk-private-chip-colour-bg-default-off:#fff0;--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-slider-bg-knob:#84e9ff;--bpk-private-slider-bg-track:#84e9ff;--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-overlay:#fffc;--bpk-other-scrim:#000000b3;--bpk-other-shadow:#16161640;--bpk-other-line-default:#fff3;--bpk-other-line-on-contrast:#fff3;--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-secondary-on-contrast:#ffffff80;--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-line-heights-16:1rem;--bpk-typography-line-heights-20:1.25rem;--bpk-typography-line-heights-24:1.5rem;--bpk-typography-line-heights-28:1.75rem;--bpk-typography-line-heights-40:2.5rem;--bpk-typography-line-heights-48:3rem;--bpk-typography-line-heights-64:4rem;--bpk-typography-line-heights-76:4.75rem;--bpk-typography-line-heights-82:5.125rem;--bpk-typography-line-heights-96:6rem;--bpk-typography-line-heights-115:7.1875rem;--bpk-typography-line-heights-120:7.5rem;--bpk-typography-line-heights-153:9.625rem;--bpk-typography-line-heights-192:12rem;--bpk-typography-sizes-12:0.75rem;--bpk-typography-sizes-14:0.875rem;--bpk-typography-sizes-20:1.25rem;--bpk-typography-sizes-24:1.5rem;--bpk-typography-sizes-32:2rem;--bpk-typography-sizes-40:2.5rem;--bpk-typography-sizes-48:3rem;--bpk-typography-sizes-64:4rem;--bpk-typography-sizes-76:4.75rem;--bpk-typography-sizes-96:6rem;--bpk-typography-sizes-120:7.5rem;--bpk-typography-sizes-144:9rem;--bpk-typography-sizes-192:12rem;--bpk-typography-sizes-240:15rem;--bpk-typography-sizes-base:1rem;--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}
|
|
@@ -214,6 +214,35 @@
|
|
|
214
214
|
--bpk-typography-kerning-default: 0;
|
|
215
215
|
--bpk-typography-kerning-loose: 0;
|
|
216
216
|
--bpk-typography-kerning-tight: 0;
|
|
217
|
+
--bpk-typography-line-heights-16: 1rem;
|
|
218
|
+
--bpk-typography-line-heights-20: 1.25rem;
|
|
219
|
+
--bpk-typography-line-heights-24: 1.5rem;
|
|
220
|
+
--bpk-typography-line-heights-28: 1.75rem;
|
|
221
|
+
--bpk-typography-line-heights-40: 2.5rem;
|
|
222
|
+
--bpk-typography-line-heights-48: 3rem;
|
|
223
|
+
--bpk-typography-line-heights-64: 4rem;
|
|
224
|
+
--bpk-typography-line-heights-76: 4.75rem;
|
|
225
|
+
--bpk-typography-line-heights-82: 5.125rem;
|
|
226
|
+
--bpk-typography-line-heights-96: 6rem;
|
|
227
|
+
--bpk-typography-line-heights-115: 7.1875rem;
|
|
228
|
+
--bpk-typography-line-heights-120: 7.5rem;
|
|
229
|
+
--bpk-typography-line-heights-153: 9.625rem;
|
|
230
|
+
--bpk-typography-line-heights-192: 12rem;
|
|
231
|
+
--bpk-typography-sizes-12: 0.75rem;
|
|
232
|
+
--bpk-typography-sizes-14: 0.875rem;
|
|
233
|
+
--bpk-typography-sizes-20: 1.25rem;
|
|
234
|
+
--bpk-typography-sizes-24: 1.5rem;
|
|
235
|
+
--bpk-typography-sizes-32: 2rem;
|
|
236
|
+
--bpk-typography-sizes-40: 2.5rem;
|
|
237
|
+
--bpk-typography-sizes-48: 3rem;
|
|
238
|
+
--bpk-typography-sizes-64: 4rem;
|
|
239
|
+
--bpk-typography-sizes-76: 4.75rem;
|
|
240
|
+
--bpk-typography-sizes-96: 6rem;
|
|
241
|
+
--bpk-typography-sizes-120: 7.5rem;
|
|
242
|
+
--bpk-typography-sizes-144: 9rem;
|
|
243
|
+
--bpk-typography-sizes-192: 12rem;
|
|
244
|
+
--bpk-typography-sizes-240: 15rem;
|
|
245
|
+
--bpk-typography-sizes-base: 1rem;
|
|
217
246
|
--bpk-typography-style-body: 400;
|
|
218
247
|
--bpk-typography-style-headline: 700;
|
|
219
248
|
--bpk-typography-style-hero: 900;
|
|
@@ -214,6 +214,35 @@
|
|
|
214
214
|
--bpk-typography-kerning-default: 0;
|
|
215
215
|
--bpk-typography-kerning-loose: 0;
|
|
216
216
|
--bpk-typography-kerning-tight: 0;
|
|
217
|
+
--bpk-typography-line-heights-16: 1rem;
|
|
218
|
+
--bpk-typography-line-heights-20: 1.25rem;
|
|
219
|
+
--bpk-typography-line-heights-24: 1.5rem;
|
|
220
|
+
--bpk-typography-line-heights-28: 1.75rem;
|
|
221
|
+
--bpk-typography-line-heights-40: 2.5rem;
|
|
222
|
+
--bpk-typography-line-heights-48: 3rem;
|
|
223
|
+
--bpk-typography-line-heights-64: 4rem;
|
|
224
|
+
--bpk-typography-line-heights-76: 4.75rem;
|
|
225
|
+
--bpk-typography-line-heights-82: 5.125rem;
|
|
226
|
+
--bpk-typography-line-heights-96: 6rem;
|
|
227
|
+
--bpk-typography-line-heights-115: 7.1875rem;
|
|
228
|
+
--bpk-typography-line-heights-120: 7.5rem;
|
|
229
|
+
--bpk-typography-line-heights-153: 9.625rem;
|
|
230
|
+
--bpk-typography-line-heights-192: 12rem;
|
|
231
|
+
--bpk-typography-sizes-12: 0.75rem;
|
|
232
|
+
--bpk-typography-sizes-14: 0.875rem;
|
|
233
|
+
--bpk-typography-sizes-20: 1.25rem;
|
|
234
|
+
--bpk-typography-sizes-24: 1.5rem;
|
|
235
|
+
--bpk-typography-sizes-32: 2rem;
|
|
236
|
+
--bpk-typography-sizes-40: 2.5rem;
|
|
237
|
+
--bpk-typography-sizes-48: 3rem;
|
|
238
|
+
--bpk-typography-sizes-64: 4rem;
|
|
239
|
+
--bpk-typography-sizes-76: 4.75rem;
|
|
240
|
+
--bpk-typography-sizes-96: 6rem;
|
|
241
|
+
--bpk-typography-sizes-120: 7.5rem;
|
|
242
|
+
--bpk-typography-sizes-144: 9rem;
|
|
243
|
+
--bpk-typography-sizes-192: 12rem;
|
|
244
|
+
--bpk-typography-sizes-240: 15rem;
|
|
245
|
+
--bpk-typography-sizes-base: 1rem;
|
|
217
246
|
--bpk-typography-style-body: 400;
|
|
218
247
|
--bpk-typography-style-headline: 700;
|
|
219
248
|
--bpk-typography-style-hero: 900;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyscanner/backpack-web",
|
|
3
|
-
"version": "43.
|
|
3
|
+
"version": "43.2.0",
|
|
4
4
|
"description": "Backpack Design System web library",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"@radix-ui/react-slider": "1.3.5",
|
|
32
32
|
"@react-google-maps/api": "^2.19.3",
|
|
33
33
|
"@skyscanner/bpk-foundations-web": "^24.6.0",
|
|
34
|
-
"@skyscanner/bpk-svgs": "^20.
|
|
34
|
+
"@skyscanner/bpk-svgs": "^20.14.0",
|
|
35
35
|
"tabbable": "^6.4.0",
|
|
36
36
|
"d3-path": "^3.1.0",
|
|
37
37
|
"d3-scale": "^4.0.2",
|
|
@@ -1,241 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* Backpack - Skyscanner's Design System
|
|
3
|
-
*
|
|
4
|
-
* Copyright 2016 Skyscanner Ltd
|
|
5
|
-
*
|
|
6
|
-
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
7
|
-
* you may not use this file except in compliance with the License.
|
|
8
|
-
* You may obtain a copy of the License at
|
|
9
|
-
*
|
|
10
|
-
* http://www.apache.org/licenses/LICENSE-2.0
|
|
11
|
-
*
|
|
12
|
-
* Unless required by applicable law or agreed to in writing, software
|
|
13
|
-
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
14
|
-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
15
|
-
* See the License for the specific language governing permissions and
|
|
16
|
-
* limitations under the License.
|
|
17
|
-
*/
|
|
18
|
-
|
|
19
|
-
/* stylelint-disable at-rule-disallowed-list */
|
|
20
|
-
|
|
21
|
-
@use 'tokens';
|
|
22
|
-
@use 'typography';
|
|
23
|
-
@use 'radii';
|
|
24
|
-
@use 'utils';
|
|
25
|
-
|
|
26
|
-
////
|
|
27
|
-
/// @group badges
|
|
28
|
-
////
|
|
29
|
-
|
|
30
|
-
/// Standard badge.
|
|
31
|
-
///
|
|
32
|
-
/// @example scss
|
|
33
|
-
/// .selector {
|
|
34
|
-
/// @include bpk-badge();
|
|
35
|
-
/// }
|
|
36
|
-
|
|
37
|
-
@mixin bpk-badge {
|
|
38
|
-
display: inline-flex;
|
|
39
|
-
padding: tokens.bpk-spacing-sm() tokens.bpk-spacing-md();
|
|
40
|
-
align-items: center;
|
|
41
|
-
|
|
42
|
-
@include radii.bpk-border-radius-xs;
|
|
43
|
-
@include typography.bpk-text;
|
|
44
|
-
@include typography.bpk-footnote;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
/// Centered badge. Modifies the bpk-badge mixin.
|
|
48
|
-
///
|
|
49
|
-
/// @require {mixin} bpk-badge
|
|
50
|
-
///
|
|
51
|
-
/// @example scss
|
|
52
|
-
/// .selector {
|
|
53
|
-
/// @include bpk-badge();
|
|
54
|
-
/// @include bpk-badge--centered();
|
|
55
|
-
/// }
|
|
56
|
-
|
|
57
|
-
@mixin bpk-badge--centered {
|
|
58
|
-
vertical-align: text-bottom;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
/// Right-docked badge. Modifies the bpk-badge mixin.
|
|
62
|
-
///
|
|
63
|
-
/// @require {mixin} bpk-badge
|
|
64
|
-
///
|
|
65
|
-
/// @example scss
|
|
66
|
-
/// .selector {
|
|
67
|
-
/// @include bpk-badge();
|
|
68
|
-
/// @include bpk-badge--docked-right();
|
|
69
|
-
/// }
|
|
70
|
-
|
|
71
|
-
@mixin bpk-badge--docked-right {
|
|
72
|
-
position: absolute;
|
|
73
|
-
top: 0;
|
|
74
|
-
right: 0;
|
|
75
|
-
border-top-left-radius: 0;
|
|
76
|
-
border-top-right-radius: 0;
|
|
77
|
-
border-bottom-right-radius: 0;
|
|
78
|
-
|
|
79
|
-
@include utils.bpk-rtl {
|
|
80
|
-
right: inherit;
|
|
81
|
-
left: 0;
|
|
82
|
-
border-bottom-left-radius: 0;
|
|
83
|
-
border-bottom-right-radius: tokens.$bpk-border-radius-xs;
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
/// Left-docked badge. Modifies the bpk-badge mixin.
|
|
88
|
-
///
|
|
89
|
-
/// @require {mixin} bpk-badge
|
|
90
|
-
///
|
|
91
|
-
/// @example scss
|
|
92
|
-
/// .selector {
|
|
93
|
-
/// @include bpk-badge();
|
|
94
|
-
/// @include bpk-badge--docked-left();
|
|
95
|
-
/// }
|
|
96
|
-
|
|
97
|
-
@mixin bpk-badge--docked-left {
|
|
98
|
-
position: absolute;
|
|
99
|
-
top: 0;
|
|
100
|
-
left: 0;
|
|
101
|
-
border-top-left-radius: 0;
|
|
102
|
-
border-top-right-radius: 0;
|
|
103
|
-
border-bottom-left-radius: 0;
|
|
104
|
-
|
|
105
|
-
@include utils.bpk-rtl {
|
|
106
|
-
right: 0;
|
|
107
|
-
left: inherit;
|
|
108
|
-
border-bottom-left-radius: tokens.$bpk-border-radius-xs;
|
|
109
|
-
border-bottom-right-radius: 0;
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
/// Normal badge. Modifies the bpk-badge mixin.
|
|
114
|
-
///
|
|
115
|
-
/// @require {mixin} bpk-badge
|
|
116
|
-
///
|
|
117
|
-
/// @example scss
|
|
118
|
-
/// .selector {
|
|
119
|
-
/// @include bpk-badge();
|
|
120
|
-
/// @include bpk-badge--normal();
|
|
121
|
-
/// }
|
|
122
|
-
|
|
123
|
-
@mixin bpk-badge--normal {
|
|
124
|
-
background-color: tokens.$bpk-private-badge-background-normal-day;
|
|
125
|
-
color: tokens.$bpk-text-primary-day;
|
|
126
|
-
fill: tokens.$bpk-text-primary-day;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
/// Warning badge. Modifies the bpk-badge mixin.
|
|
130
|
-
///
|
|
131
|
-
/// @require {mixin} bpk-badge
|
|
132
|
-
///
|
|
133
|
-
/// @example scss
|
|
134
|
-
/// .selector {
|
|
135
|
-
/// @include bpk-badge();
|
|
136
|
-
/// @include bpk-badge--warning();
|
|
137
|
-
/// }
|
|
138
|
-
|
|
139
|
-
@mixin bpk-badge--warning {
|
|
140
|
-
background-color: tokens.$bpk-private-badge-background-normal-day;
|
|
141
|
-
color: tokens.$bpk-text-on-light-day;
|
|
142
|
-
fill: tokens.$bpk-status-warning-spot-day;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
/// Success badge. Modifies the bpk-badge mixin.
|
|
146
|
-
///
|
|
147
|
-
/// @require {mixin} bpk-badge
|
|
148
|
-
///
|
|
149
|
-
/// @example scss
|
|
150
|
-
/// .selector {
|
|
151
|
-
/// @include bpk-badge();
|
|
152
|
-
/// @include bpk-badge--success();
|
|
153
|
-
/// }
|
|
154
|
-
|
|
155
|
-
@mixin bpk-badge--success {
|
|
156
|
-
background-color: tokens.$bpk-private-badge-background-normal-day;
|
|
157
|
-
color: tokens.$bpk-text-on-light-day;
|
|
158
|
-
fill: tokens.$bpk-status-success-spot-day;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
/// Critical badge. Modifies the bpk-badge mixin.
|
|
162
|
-
///
|
|
163
|
-
/// @require {mixin} bpk-badge
|
|
164
|
-
///
|
|
165
|
-
/// @example scss
|
|
166
|
-
/// .selector {
|
|
167
|
-
/// @include bpk-badge();
|
|
168
|
-
/// @include bpk-badge--critical();
|
|
169
|
-
/// }
|
|
170
|
-
|
|
171
|
-
@mixin bpk-badge--critical {
|
|
172
|
-
background-color: tokens.$bpk-private-badge-background-normal-day;
|
|
173
|
-
color: tokens.$bpk-text-on-light-day;
|
|
174
|
-
fill: tokens.$bpk-status-danger-spot-day;
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
/// Inverse badge. Modifies the bpk-badge mixin.
|
|
178
|
-
///
|
|
179
|
-
/// @require {mixin} bpk-badge
|
|
180
|
-
///
|
|
181
|
-
/// @example scss
|
|
182
|
-
/// .selector {
|
|
183
|
-
/// @include bpk-badge();
|
|
184
|
-
/// @include bpk-badge--inverse();
|
|
185
|
-
/// }
|
|
186
|
-
|
|
187
|
-
@mixin bpk-badge--inverse {
|
|
188
|
-
background-color: tokens.$bpk-surface-default-day;
|
|
189
|
-
color: tokens.$bpk-text-primary-day;
|
|
190
|
-
fill: tokens.$bpk-text-primary-day;
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
/// Outline badge. Modifies the bpk-badge mixin.
|
|
194
|
-
///
|
|
195
|
-
/// @require {mixin} bpk-badge
|
|
196
|
-
///
|
|
197
|
-
/// @example scss
|
|
198
|
-
/// .selector {
|
|
199
|
-
/// @include bpk-badge();
|
|
200
|
-
/// @include bpk-badge--outline();
|
|
201
|
-
/// }
|
|
202
|
-
|
|
203
|
-
@mixin bpk-badge--outline {
|
|
204
|
-
background-color: transparent;
|
|
205
|
-
color: tokens.$bpk-text-on-dark-day;
|
|
206
|
-
box-shadow: inset 0 0 0 tokens.$bpk-border-size-sm
|
|
207
|
-
tokens.$bpk-text-on-dark-day;
|
|
208
|
-
fill: tokens.$bpk-text-on-dark-day;
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
/// Strong badge. Modifies the bpk-badge mixin.
|
|
212
|
-
///
|
|
213
|
-
/// @require {mixin} bpk-badge
|
|
214
|
-
///
|
|
215
|
-
/// @example scss
|
|
216
|
-
/// .selector {
|
|
217
|
-
/// @include bpk-badge();
|
|
218
|
-
/// @include bpk-badge--strong();
|
|
219
|
-
/// }
|
|
220
|
-
|
|
221
|
-
@mixin bpk-badge--strong {
|
|
222
|
-
background-color: tokens.$bpk-core-primary-day;
|
|
223
|
-
color: tokens.$bpk-text-on-dark-day;
|
|
224
|
-
fill: tokens.$bpk-text-on-dark-day;
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
/// Brand badge. Modifies the bpk-badge mixin.
|
|
228
|
-
///
|
|
229
|
-
/// @require {mixin} bpk-badge
|
|
230
|
-
///
|
|
231
|
-
/// @example scss
|
|
232
|
-
/// .selector {
|
|
233
|
-
/// @include bpk-badge();
|
|
234
|
-
/// @include bpk-badge--brand();
|
|
235
|
-
/// }
|
|
236
|
-
|
|
237
|
-
@mixin bpk-badge--brand {
|
|
238
|
-
background-color: tokens.$bpk-core-accent-day;
|
|
239
|
-
color: tokens.$bpk-text-primary-inverse-day;
|
|
240
|
-
fill: tokens.$bpk-text-primary-inverse-day;
|
|
241
|
-
}
|