@skyscanner/backpack-web 42.22.0 → 42.23.0-dev-v26810456218.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/bpk-component-card-list/src/BpkCardList.js +0 -3
- package/bpk-component-card-list/src/BpkCardListGridStack/BpkCardListGridStack.module.css +1 -1
- package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.js +1 -3
- package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListRowRailContainer.js +1 -14
- package/bpk-component-card-list/src/BpkCardListRowRail/utils.d.ts +1 -2
- package/bpk-component-card-list/src/BpkCardListRowRail/utils.js +0 -21
- package/bpk-component-card-list/src/common-types.d.ts +0 -3
- package/bpk-component-modal/src/BpkModalV3/BpkModalV3Content/BpkModalV3Content.module.css +1 -1
- package/bpk-stylesheets/base.css +2 -2
- package/bpk-stylesheets/index.js +3 -0
- package/bpk-stylesheets/primitives.css +40 -0
- package/bpk-stylesheets/theme-backpack-dark.css +189 -0
- package/bpk-stylesheets/theme-backpack-light.css +189 -0
- package/package.json +1 -1
|
@@ -38,7 +38,6 @@ const BpkCardList = props => {
|
|
|
38
38
|
chipGroup,
|
|
39
39
|
description,
|
|
40
40
|
expandText,
|
|
41
|
-
initiallyInViewCardIndex = 0,
|
|
42
41
|
initiallyShownCardsDesktop = DEFAULT_ITEMS_DESKTOP,
|
|
43
42
|
initiallyShownCardsMobile = DEFAULT_ITEMS_MOBILE,
|
|
44
43
|
layoutDesktop,
|
|
@@ -79,7 +78,6 @@ const BpkCardList = props => {
|
|
|
79
78
|
initiallyShownCards: initiallyShownCardsMobile,
|
|
80
79
|
layout: layoutMobile,
|
|
81
80
|
accessibilityLabels: accessibilityLabels,
|
|
82
|
-
initiallyInViewCardIndex: initiallyInViewCardIndex,
|
|
83
81
|
isMobile: true,
|
|
84
82
|
children: cardList
|
|
85
83
|
}), layoutMobile === LAYOUTS.stack && /*#__PURE__*/_jsx(BpkCardListGridStack, {
|
|
@@ -99,7 +97,6 @@ const BpkCardList = props => {
|
|
|
99
97
|
initiallyShownCards: initiallyShownCardsDesktop,
|
|
100
98
|
layout: layoutDesktop,
|
|
101
99
|
accessibilityLabels: accessibilityLabels,
|
|
102
|
-
initiallyInViewCardIndex: initiallyInViewCardIndex,
|
|
103
100
|
children: cardList
|
|
104
101
|
}), layoutDesktop === LAYOUTS.grid && accessoryDesktop !== ACCESSORY_DESKTOP_TYPES.pagination && /*#__PURE__*/_jsx(BpkCardListGridStack, {
|
|
105
102
|
accessory: accessoryDesktop,
|
|
@@ -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-card-list-grid-stack{display:grid;gap:1.5rem}.bpk-card-list-grid-stack__grid{display:grid;grid-template-columns:repeat(var(--initially-shown-cards, 3),
|
|
18
|
+
.bpk-card-list-grid-stack{display:grid;gap:1.5rem}.bpk-card-list-grid-stack__grid{display:grid;grid-template-columns:repeat(var(--initially-shown-cards, 3), minmax(0, 1fr));gap:1.5rem}.bpk-card-list-grid-stack__stack{display:grid;grid-template-columns:1;gap:1.5rem}.bpk-card-list-grid-stack__accessory__button{width:auto}
|
|
@@ -30,7 +30,6 @@ const BpkCardListCarousel = props => {
|
|
|
30
30
|
carouselLabel = (initiallyShownCards, childrenLength) => `Entering Carousel with ${initiallyShownCards} slides shown at a time, ${childrenLength} slides in total. Please use Pagination below with the Previous and Next buttons to navigate, or the slide dot buttons at the end to jump to slides.`,
|
|
31
31
|
children,
|
|
32
32
|
currentIndex,
|
|
33
|
-
initialPageIndex,
|
|
34
33
|
initiallyShownCards,
|
|
35
34
|
isMobile = false,
|
|
36
35
|
layout,
|
|
@@ -59,8 +58,7 @@ const BpkCardListCarousel = props => {
|
|
|
59
58
|
cardRefs,
|
|
60
59
|
visibilityList,
|
|
61
60
|
container: root,
|
|
62
|
-
enabled: !isMobile
|
|
63
|
-
initialPageIndex
|
|
61
|
+
enabled: !isMobile
|
|
64
62
|
});
|
|
65
63
|
|
|
66
64
|
// Similar to Virtual Scrolling to improve performance
|
|
@@ -28,7 +28,6 @@ const BpkCardListRowRailContainer = props => {
|
|
|
28
28
|
accessibilityLabels,
|
|
29
29
|
accessory,
|
|
30
30
|
children,
|
|
31
|
-
initiallyInViewCardIndex,
|
|
32
31
|
initiallyShownCards,
|
|
33
32
|
isMobile = false,
|
|
34
33
|
layout
|
|
@@ -36,18 +35,7 @@ const BpkCardListRowRailContainer = props => {
|
|
|
36
35
|
const childrenCount = Children.count(children);
|
|
37
36
|
const totalIndicators = Math.ceil(childrenCount / initiallyShownCards);
|
|
38
37
|
const showAccessory = childrenCount > initiallyShownCards;
|
|
39
|
-
|
|
40
|
-
// Calculate initial page from card index
|
|
41
|
-
const [initialPageIndex] = useState(() => {
|
|
42
|
-
if (initiallyInViewCardIndex < 0) {
|
|
43
|
-
return 0;
|
|
44
|
-
}
|
|
45
|
-
if (initiallyInViewCardIndex >= childrenCount) {
|
|
46
|
-
return Math.max(0, totalIndicators - 1);
|
|
47
|
-
}
|
|
48
|
-
return Math.floor(initiallyInViewCardIndex / initiallyShownCards);
|
|
49
|
-
});
|
|
50
|
-
const [currentIndex, setCurrentIndex] = useState(initialPageIndex);
|
|
38
|
+
const [currentIndex, setCurrentIndex] = useState(0);
|
|
51
39
|
const accessoryContent = layout === LAYOUTS.row && accessory === ACCESSORY_DESKTOP_TYPES.pagination ? /*#__PURE__*/_jsx(BpkPageIndicator, {
|
|
52
40
|
currentIndex: currentIndex,
|
|
53
41
|
totalIndicators: totalIndicators,
|
|
@@ -69,7 +57,6 @@ const BpkCardListRowRailContainer = props => {
|
|
|
69
57
|
isMobile: isMobile,
|
|
70
58
|
carouselLabel: accessibilityLabels?.carouselLabel,
|
|
71
59
|
slideLabel: accessibilityLabels?.slideLabel,
|
|
72
|
-
initialPageIndex: initialPageIndex,
|
|
73
60
|
children: children
|
|
74
61
|
}), accessoryContent && showAccessory && /*#__PURE__*/_jsx("div", {
|
|
75
62
|
role: "region",
|
|
@@ -15,7 +15,6 @@ type UsePageScrollSyncOptions = {
|
|
|
15
15
|
visibilityList: number[];
|
|
16
16
|
container: HTMLElement | null;
|
|
17
17
|
enabled: boolean;
|
|
18
|
-
initialPageIndex: number;
|
|
19
18
|
};
|
|
20
19
|
/**
|
|
21
20
|
* Provides bidirectional synchronisation between page index state and scroll position.
|
|
@@ -28,5 +27,5 @@ type UsePageScrollSyncOptions = {
|
|
|
28
27
|
* The hook uses a lock mechanism to prevent conflicts between programmatic and
|
|
29
28
|
* user-initiated scrolling.
|
|
30
29
|
*/
|
|
31
|
-
export declare const usePageScrollSync: ({ cardRefs, container, currentIndex, enabled,
|
|
30
|
+
export declare const usePageScrollSync: ({ cardRefs, container, currentIndex, enabled, initiallyShownCards, setCurrentIndex, visibilityList, }: UsePageScrollSyncOptions) => void;
|
|
32
31
|
export {};
|
|
@@ -98,7 +98,6 @@ export const usePageScrollSync = ({
|
|
|
98
98
|
container,
|
|
99
99
|
currentIndex,
|
|
100
100
|
enabled,
|
|
101
|
-
initialPageIndex,
|
|
102
101
|
initiallyShownCards,
|
|
103
102
|
setCurrentIndex,
|
|
104
103
|
visibilityList
|
|
@@ -106,26 +105,6 @@ export const usePageScrollSync = ({
|
|
|
106
105
|
const isUserScrollingRef = useRef(false);
|
|
107
106
|
const scrollEndTimeoutRef = useRef(null);
|
|
108
107
|
const lastCurrentIndexRef = useRef(currentIndex);
|
|
109
|
-
const hasInitialScrolled = useRef(false);
|
|
110
|
-
|
|
111
|
-
// Effect 0: Initial scroll (instant, runs once on mount)
|
|
112
|
-
useEffect(() => {
|
|
113
|
-
if (hasInitialScrolled.current) {
|
|
114
|
-
return;
|
|
115
|
-
}
|
|
116
|
-
hasInitialScrolled.current = true;
|
|
117
|
-
if (!enabled || initialPageIndex === 0) {
|
|
118
|
-
return;
|
|
119
|
-
}
|
|
120
|
-
const targetCard = cardRefs.current?.[initialPageIndex * initiallyShownCards];
|
|
121
|
-
if (targetCard) {
|
|
122
|
-
targetCard.scrollIntoView({
|
|
123
|
-
behavior: 'instant',
|
|
124
|
-
block: 'nearest',
|
|
125
|
-
inline: 'start'
|
|
126
|
-
});
|
|
127
|
-
}
|
|
128
|
-
}, [cardRefs, enabled, initialPageIndex, initiallyShownCards]); // Run once on mount only
|
|
129
108
|
|
|
130
109
|
// Effect 1: Programmatic scroll when currentIndex changes
|
|
131
110
|
useEffect(() => {
|
|
@@ -36,7 +36,6 @@ type CardListBaseProps = {
|
|
|
36
36
|
accessoryMobile?: (typeof ACCESSORY_MOBILE_TYPES)[keyof typeof ACCESSORY_MOBILE_TYPES];
|
|
37
37
|
initiallyShownCardsDesktop?: number;
|
|
38
38
|
initiallyShownCardsMobile?: number;
|
|
39
|
-
initiallyInViewCardIndex?: number;
|
|
40
39
|
chipGroup?: ReactElement;
|
|
41
40
|
buttonContent?: React.ReactNode;
|
|
42
41
|
onButtonClick?: () => void;
|
|
@@ -70,7 +69,6 @@ type CardListRowRailProps = {
|
|
|
70
69
|
accessory?: typeof ACCESSORY_DESKTOP_TYPES.pagination;
|
|
71
70
|
isMobile?: boolean;
|
|
72
71
|
accessibilityLabels?: AccessibilityLabels;
|
|
73
|
-
initiallyInViewCardIndex: number;
|
|
74
72
|
};
|
|
75
73
|
type CardListCarouselProps = {
|
|
76
74
|
children: Array<ReactElement<HTMLDivElement | HTMLAnchorElement>>;
|
|
@@ -81,7 +79,6 @@ type CardListCarouselProps = {
|
|
|
81
79
|
isMobile?: boolean;
|
|
82
80
|
carouselLabel?: (initiallyShownCards: number, childrenLength: number) => string;
|
|
83
81
|
slideLabel?: (index: number, childrenLength: number) => string;
|
|
84
|
-
initialPageIndex: number;
|
|
85
82
|
};
|
|
86
83
|
type CardListProps = CardListBaseProps;
|
|
87
84
|
export default CardListProps;
|
|
@@ -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-modal-v3__positioner{position:fixed;display:flex;z-index:1100;justify-content:center;align-items:center;inset:0;pointer-events:none}.bpk-modal-v3__positioner--sheet{align-items:flex-end}.bpk-modal-v3__positioner--full{align-items:stretch}.bpk-modal-v3__positioner--chatbot{align-items:stretch}.bpk-modal-v3__content{position:relative;display:flex;flex-direction:column;background-color:#fff;overflow:clip;pointer-events:none}.bpk-modal-v3__content[data-state=open]{pointer-events:auto}.bpk-modal-v3__content--default{width:100%;max-width:50rem;max-height:90vh;transform:scale(0.9);transition:transform 200ms ease-in-out;border-radius:1.5rem;opacity:0;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}@media(max-width: 32rem){.bpk-modal-v3__content--default{max-width:none;height:100%;max-height:none;transform:translateY(100%);border-radius:0;box-shadow:none}.bpk-modal-v3__content--default[data-state=open]{transform:translateY(0)}.bpk-modal-v3__content--default[data-state=closed]{transform:translateY(100%)}}.bpk-modal-v3__content--default[data-state=open]{transform:scale(1);opacity:1}.bpk-modal-v3__content--default[data-state=closed]{transform:scale(0.9);opacity:0}.bpk-modal-v3__content--sheet{width:100%;height:fit-content;max-height:100dvh;transform:translateY(100%);transition:opacity 400ms cubic-bezier(0.5, 0, 0, 1),transform 400ms cubic-bezier(0.5, 0, 0, 1);border-radius:1.5rem 1.5rem 0 0;opacity:0;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-modal-v3__content--sheet[data-state=open]{transform:translateY(0);opacity:1}.bpk-modal-v3__content--sheet[data-state=closed]{transform:translateY(100%);opacity:0}.bpk-modal-v3__content--full{width:100%;height:100%;transform:translateY(100%);transition:opacity 400ms cubic-bezier(0.5, 0, 0, 1),transform 400ms cubic-bezier(0.5, 0, 0, 1);border-radius:0;opacity:0}.bpk-modal-v3__content--full[data-state=open]{transform:translateY(0);opacity:1}.bpk-modal-v3__content--full[data-state=closed]{transform:translateY(100%);opacity:0}.bpk-modal-v3__content--chatbot{width:100%;height:100%;transform:translateX(100%);transition:transform 400ms cubic-bezier(0.5, 0, 0, 1);border-radius:0;background-color:#eff3f8}html[dir=rtl] .bpk-modal-v3__content--chatbot{transform:translateX(-100%)}.bpk-modal-v3__content--chatbot[data-state=open]{transform:translateX(0)}html[dir=rtl] .bpk-modal-v3__content--chatbot[data-state=open]{transform:translateX(0)}.bpk-modal-v3__content--chatbot[data-state=closed]{transform:translateX(100%)}html[dir=rtl] .bpk-modal-v3__content--chatbot[data-state=closed]{transform:translateX(-100%)}@media(prefers-reduced-motion: reduce){.bpk-modal-v3__content--default{transform:scale(1);transition:none;opacity:1}}@media(prefers-reduced-motion: reduce)and (max-width: 32rem){.bpk-modal-v3__content--default{transform:translateY(0)}}@media(prefers-reduced-motion: reduce){.bpk-modal-v3__content--sheet,.bpk-modal-v3__content--full{transform:translateY(0);transition:none;opacity:1}.bpk-modal-v3__content--chatbot{transform:translateX(0);transition:none;opacity:1}html[dir=rtl] .bpk-modal-v3__content--chatbot{transform:translateX(0)}}
|
|
18
|
+
.bpk-modal-v3__positioner{position:fixed;display:flex;z-index:1100;justify-content:center;align-items:center;inset:0;pointer-events:none}.bpk-modal-v3__positioner--sheet{align-items:flex-end}.bpk-modal-v3__positioner--full{align-items:stretch}.bpk-modal-v3__positioner--chatbot{align-items:stretch}.bpk-modal-v3__content{position:relative;display:flex;flex-direction:column;background-color:#fff;overflow:clip;pointer-events:none}.bpk-modal-v3__content[data-state=open]{pointer-events:auto}.bpk-modal-v3__content--default{width:100%;max-width:50rem;max-height:90vh;transform:scale(0.9);transition:transform 200ms ease-in-out,opacity 200ms ease-in-out;border-radius:1.5rem;opacity:0;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}@media(max-width: 32rem){.bpk-modal-v3__content--default{max-width:none;height:100%;max-height:none;transform:translateY(100%);border-radius:0;box-shadow:none}.bpk-modal-v3__content--default[data-state=open]{transform:translateY(0)}.bpk-modal-v3__content--default[data-state=closed]{transform:translateY(100%)}}.bpk-modal-v3__content--default[data-state=open]{transform:scale(1);opacity:1}.bpk-modal-v3__content--default[data-state=closed]{transform:scale(0.9);opacity:0}.bpk-modal-v3__content--sheet{width:100%;height:fit-content;max-height:100dvh;transform:translateY(100%);transition:opacity 400ms cubic-bezier(0.5, 0, 0, 1),transform 400ms cubic-bezier(0.5, 0, 0, 1);border-radius:1.5rem 1.5rem 0 0;opacity:0;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-modal-v3__content--sheet[data-state=open]{transform:translateY(0);opacity:1}.bpk-modal-v3__content--sheet[data-state=closed]{transform:translateY(100%);opacity:0}.bpk-modal-v3__content--full{width:100%;height:100%;transform:translateY(100%);transition:opacity 400ms cubic-bezier(0.5, 0, 0, 1),transform 400ms cubic-bezier(0.5, 0, 0, 1);border-radius:0;opacity:0}.bpk-modal-v3__content--full[data-state=open]{transform:translateY(0);opacity:1}.bpk-modal-v3__content--full[data-state=closed]{transform:translateY(100%);opacity:0}.bpk-modal-v3__content--chatbot{width:100%;height:100%;transform:translateX(100%);transition:transform 400ms cubic-bezier(0.5, 0, 0, 1);border-radius:0;background-color:#eff3f8}html[dir=rtl] .bpk-modal-v3__content--chatbot{transform:translateX(-100%)}.bpk-modal-v3__content--chatbot[data-state=open]{transform:translateX(0)}html[dir=rtl] .bpk-modal-v3__content--chatbot[data-state=open]{transform:translateX(0)}.bpk-modal-v3__content--chatbot[data-state=closed]{transform:translateX(100%)}html[dir=rtl] .bpk-modal-v3__content--chatbot[data-state=closed]{transform:translateX(-100%)}@media(prefers-reduced-motion: reduce){.bpk-modal-v3__content--default{transform:scale(1);transition:none;opacity:1}}@media(prefers-reduced-motion: reduce)and (max-width: 32rem){.bpk-modal-v3__content--default{transform:translateY(0)}}@media(prefers-reduced-motion: reduce){.bpk-modal-v3__content--sheet,.bpk-modal-v3__content--full{transform:translateY(0);transition:none;opacity:1}.bpk-modal-v3__content--chatbot{transform:translateX(0);transition:none;opacity:1}html[dir=rtl] .bpk-modal-v3__content--chatbot{transform:translateX(0)}}
|
package/bpk-stylesheets/base.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
/*!
|
|
2
2
|
*
|
|
3
3
|
* Backpack - Skyscanner's Design System
|
|
4
4
|
*
|
|
@@ -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:baseline}template,[hidden]{display:none}a{background-color:rgba(0,0,0,0);-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}b,strong{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:baseline}sub{bottom:-0.25em}sup{top:-0.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:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-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{font-size:100%;box-sizing:border-box}*{box-sizing:inherit}*::before,*::after{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,button:focus-visible,[type=button]:focus-visible,[type=reset]:focus-visible,[type=submit]:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.hidden,.hide{display:none !important}.visuallyhidden,.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus,.visually-hidden.focusable:active,.visually-hidden.focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.invisible{visibility:hidden}.clearfix::before,.clearfix::after{content:"";display:table}.clearfix::after{clear:both}
|
|
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}
|
package/bpk-stylesheets/index.js
CHANGED
|
@@ -0,0 +1,40 @@
|
|
|
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
|
+
* Do not edit directly, this file was auto-generated.
|
|
19
|
+
*/
|
|
20
|
+
|
|
21
|
+
:root {
|
|
22
|
+
--bpk-radius-none: 0;
|
|
23
|
+
--bpk-radius-full: 6.25rem;
|
|
24
|
+
--bpk-radius-lg: 1.5rem;
|
|
25
|
+
--bpk-radius-md: 0.75rem;
|
|
26
|
+
--bpk-radius-nav-tabs: 1.125rem;
|
|
27
|
+
--bpk-radius-sm: 0.5rem;
|
|
28
|
+
--bpk-radius-xs: 0.25rem;
|
|
29
|
+
--bpk-spacing-base: 1rem;
|
|
30
|
+
--bpk-spacing-lg: 1.5rem;
|
|
31
|
+
--bpk-spacing-md: 0.5rem;
|
|
32
|
+
--bpk-spacing-none: 0;
|
|
33
|
+
--bpk-spacing-sm: 0.25rem;
|
|
34
|
+
--bpk-spacing-xl: 2rem;
|
|
35
|
+
--bpk-spacing-xs: 0.125rem;
|
|
36
|
+
--bpk-spacing-xxl: 2.5rem;
|
|
37
|
+
--bpk-spacing-xxs: 0.0625rem;
|
|
38
|
+
--bpk-spacing-xxxl: 4rem;
|
|
39
|
+
--bpk-spacing-xxxxl: 6rem;
|
|
40
|
+
}
|
|
@@ -0,0 +1,189 @@
|
|
|
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
|
+
* Do not edit directly, this file was auto-generated.
|
|
19
|
+
*/
|
|
20
|
+
|
|
21
|
+
:root[data-theme="dark"] {
|
|
22
|
+
--bpk-canvas-contrast: #010913;
|
|
23
|
+
--bpk-canvas-default: #010913;
|
|
24
|
+
--bpk-private-badge-colour-bg-default: #243346;
|
|
25
|
+
--bpk-private-badge-colour-bg-inverse: #243346;
|
|
26
|
+
--bpk-private-badge-colour-bg-outline: rgba(255, 255, 255, 0);
|
|
27
|
+
--bpk-private-badge-colour-bg-subtle: #243346;
|
|
28
|
+
--bpk-private-badge-colour-stroke-outline: #ffffff;
|
|
29
|
+
--bpk-private-badge-dimension-padding-horizontal-default: 0.5rem;
|
|
30
|
+
--bpk-private-badge-dimension-padding-horizontal-subtle: 0.5rem;
|
|
31
|
+
--bpk-private-badge-typography-tmp-badge-label: 0.875rem;
|
|
32
|
+
--bpk-private-badge-typography-tmp-badge-line-height: 0;
|
|
33
|
+
--bpk-private-button-colour-bg-destructive: #e0e4e9;
|
|
34
|
+
--bpk-private-button-colour-bg-destructive-pressed: #ff649c;
|
|
35
|
+
--bpk-private-button-colour-bg-disabled: #0b121d;
|
|
36
|
+
--bpk-private-button-colour-bg-feature-pressed: #d1f7ff;
|
|
37
|
+
--bpk-private-button-colour-bg-featured: #d1f7ff;
|
|
38
|
+
--bpk-private-button-colour-bg-footer: rgba(255, 255, 255, 0);
|
|
39
|
+
--bpk-private-button-colour-bg-footer-pressed: rgba(255, 255, 255, 0);
|
|
40
|
+
--bpk-private-button-colour-bg-primary: #024daf;
|
|
41
|
+
--bpk-private-button-colour-bg-primary-on-dark: #ffffff;
|
|
42
|
+
--bpk-private-button-colour-bg-primary-on-dark-pressed: #c1c7cf;
|
|
43
|
+
--bpk-private-button-colour-bg-primary-on-light: #ffffff;
|
|
44
|
+
--bpk-private-button-colour-bg-primary-on-light-pressed: #002b4b;
|
|
45
|
+
--bpk-private-button-colour-bg-secondary: #243346;
|
|
46
|
+
--bpk-private-button-colour-bg-secondary-pressed: #010913;
|
|
47
|
+
--bpk-private-button-colour-bg-secondary-on-contrast: #243346;
|
|
48
|
+
--bpk-private-button-colour-bg-secondary-on-contrast-pressed: #010913;
|
|
49
|
+
--bpk-private-button-colour-bg-secondary-on-dark: rgba(255, 255, 255, 0.1);
|
|
50
|
+
--bpk-private-button-colour-bg-secondary-on-dark-disabled: #0b121d;
|
|
51
|
+
--bpk-private-button-colour-bg-secondary-on-dark-pressed: rgba(255, 255, 255, 0.2);
|
|
52
|
+
--bpk-private-button-colour-text-disruptive: #ff649c;
|
|
53
|
+
--bpk-private-button-colour-text-feature: #010913;
|
|
54
|
+
--bpk-private-button-colour-text-footer: rgba(255, 255, 255, 0);
|
|
55
|
+
--bpk-private-button-colour-text-link-on-dark: #ffffff;
|
|
56
|
+
--bpk-private-button-colour-text-secondary: #ffffff;
|
|
57
|
+
--bpk-private-button-dimension-radius: 0.5rem;
|
|
58
|
+
--bpk-private-button-dimension-min-height-default: 2.25rem;
|
|
59
|
+
--bpk-private-button-dimension-min-height-large: 3rem;
|
|
60
|
+
--bpk-private-button-dimension-min-weight-large: 3rem;
|
|
61
|
+
--bpk-private-button-dimension-padding-horizontal-default: 1rem;
|
|
62
|
+
--bpk-private-button-dimension-padding-horizontal-large: 1rem;
|
|
63
|
+
--bpk-private-button-typography-tmp-default-label: 1rem;
|
|
64
|
+
--bpk-private-card-button-contained-fill: rgba(255, 255, 255, 0.1);
|
|
65
|
+
--bpk-private-carousel-trigger-bg-default: rgba(255, 255, 255, 0.5);
|
|
66
|
+
--bpk-private-carousel-trigger-bg-default-hover: rgba(255, 255, 255, 0.8);
|
|
67
|
+
--bpk-private-chip-group-filter-colour-bg-icon-hover-on-image: #010913;
|
|
68
|
+
--bpk-private-chip-group-filter-colour-bg-icon-off-on-image: #131d2b;
|
|
69
|
+
--bpk-private-chip-group-filter-colour-bg-icon-on-default: #054184;
|
|
70
|
+
--bpk-private-chip-group-filter-colour-bg-icon-on-on-dark: #131d2b;
|
|
71
|
+
--bpk-private-chip-group-filter-colour-bg-icon-on-on-image: #054184;
|
|
72
|
+
--bpk-private-chip-group-filter-colour-stroke-icon-hover-default: #054184;
|
|
73
|
+
--bpk-private-chip-group-filter-colour-stroke-icon-hover-on-dark: #131d2b;
|
|
74
|
+
--bpk-private-chip-group-filter-colour-stroke-icon-off-default: rgba(255, 255, 255, 0.2);
|
|
75
|
+
--bpk-private-chip-group-filter-colour-stroke-icon-off-on-dark: rgba(255, 255, 255, 0.2);
|
|
76
|
+
--bpk-private-chip-group-filter-dimensions-min-height: 2.25rem;
|
|
77
|
+
--bpk-private-chip-colour-bg-default-dismissible-hover: #054184;
|
|
78
|
+
--bpk-private-chip-colour-bg-default-on: #054184;
|
|
79
|
+
--bpk-private-chip-colour-bg-disabled: #0b121d;
|
|
80
|
+
--bpk-private-chip-colour-bg-on-contrast-hover: #131d2b;
|
|
81
|
+
--bpk-private-chip-colour-bg-on-contrast-on: #054184;
|
|
82
|
+
--bpk-private-chip-colour-bg-on-dark-dismissible-hover: #131d2b;
|
|
83
|
+
--bpk-private-chip-colour-bg-on-dark-hover: rgba(255, 255, 255, 0);
|
|
84
|
+
--bpk-private-chip-colour-bg-on-dark-off: rgba(255, 255, 255, 0);
|
|
85
|
+
--bpk-private-chip-colour-bg-on-dark-on: #131d2b;
|
|
86
|
+
--bpk-private-chip-colour-bg-on-image-dismissible-hover: #054184;
|
|
87
|
+
--bpk-private-chip-colour-bg-on-image-on: #010913;
|
|
88
|
+
--bpk-private-chip-colour-border-default-dismissible-hover: rgba(255, 255, 255, 0);
|
|
89
|
+
--bpk-private-chip-colour-border-default-hover: #054184;
|
|
90
|
+
--bpk-private-chip-colour-border-default-off: rgba(255, 255, 255, 0.2);
|
|
91
|
+
--bpk-private-chip-colour-border-on-contrast-off: #131d2b;
|
|
92
|
+
--bpk-private-chip-colour-border-on-contrast-on: #131d2b;
|
|
93
|
+
--bpk-private-chip-colour-border-on-dark-disimissible-hover: #131d2b;
|
|
94
|
+
--bpk-private-chip-colour-border-on-dark-hover: #ffffff;
|
|
95
|
+
--bpk-private-chip-colour-border-on-dark-off: rgba(255, 255, 255, 0.2);
|
|
96
|
+
--bpk-private-chip-colour-stroke-off-on-canvas-contrast-new: rgba(255, 255, 255, 0);
|
|
97
|
+
--bpk-private-chip-colour-text-default-dismissible-hover: #ffffff;
|
|
98
|
+
--bpk-private-chip-colour-text-dismissible-on-icon: rgba(255, 255, 255, 0.5);
|
|
99
|
+
--bpk-private-chip-colour-text-on: #ffffff;
|
|
100
|
+
--bpk-private-chip-colour-text-on-image: #ffffff;
|
|
101
|
+
--bpk-private-chip-colour-text-on-image-dismissible-icon: #bdc4cb;
|
|
102
|
+
--bpk-private-chip-colour-text-on-dark: #ffffff;
|
|
103
|
+
--bpk-private-chip-colour-text-on-dark-dismisisble-hover: #ffffff;
|
|
104
|
+
--bpk-private-chip-colour-text-on-dark-dismisisble-icon: #bdc4cb;
|
|
105
|
+
--bpk-private-chip-dimension-min-height-width: 2rem;
|
|
106
|
+
--bpk-private-chip-dimension-radius: 0.5rem;
|
|
107
|
+
--bpk-private-date-selector-cheapest-month-highlight: #ffffff;
|
|
108
|
+
--bpk-private-date-selector-flexible-date-card: #243346;
|
|
109
|
+
--bpk-private-dimension-padding-veritcal: 0;
|
|
110
|
+
--bpk-private-info-banner-default: #131d2b;
|
|
111
|
+
--bpk-private-info-banner-on-contrast: #131d2b;
|
|
112
|
+
--bpk-private-map-cluster-pin: #ffffff;
|
|
113
|
+
--bpk-private-map-cluster-pin-previous-selection: #94c3ff;
|
|
114
|
+
--bpk-private-map-marker-viewed: rgba(0, 0, 0, 0.8);
|
|
115
|
+
--bpk-private-map-poi-pin: #8e47ba;
|
|
116
|
+
--bpk-private-map-previous-selection: #cfe4ff;
|
|
117
|
+
--bpk-private-navigation-tabs-hover: #002b4b;
|
|
118
|
+
--bpk-private-navigation-tabs-outline: rgba(255, 255, 255, 0.2);
|
|
119
|
+
--bpk-private-navigation-tabs-selected: #054184;
|
|
120
|
+
--bpk-private-rating-bar-default: #243346;
|
|
121
|
+
--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-on: #054184;
|
|
125
|
+
--bpk-private-shadow-large-blur: 0.875rem;
|
|
126
|
+
--bpk-private-shadow-large-color: rgba(22, 22, 22, 0.25);
|
|
127
|
+
--bpk-private-shadow-large-position-x: 0;
|
|
128
|
+
--bpk-private-shadow-large-position-y: 0.25rem;
|
|
129
|
+
--bpk-private-shadow-large-spread: 0;
|
|
130
|
+
--bpk-private-shadow-small-blur: 0.1875rem;
|
|
131
|
+
--bpk-private-shadow-small-color: rgba(22, 22, 22, 0.25);
|
|
132
|
+
--bpk-private-shadow-small-position-x: 0;
|
|
133
|
+
--bpk-private-shadow-small-position-y: 0.0625rem;
|
|
134
|
+
--bpk-private-shadow-small-spread: 0;
|
|
135
|
+
--bpk-private-shadow-xl-blur: 3.125rem;
|
|
136
|
+
--bpk-private-shadow-xl-color: rgba(22, 22, 22, 0.25);
|
|
137
|
+
--bpk-private-shadow-xl-position-x: 0;
|
|
138
|
+
--bpk-private-shadow-xl-position-y: 0.75rem;
|
|
139
|
+
--bpk-private-shadow-xl-spread: 0;
|
|
140
|
+
--bpk-private-skeleton-on-dark: #243346;
|
|
141
|
+
--bpk-private-speech-bubble-colour-bg-contrast: #131d2b;
|
|
142
|
+
--bpk-private-speech-bubble-colour-bg-default: #131d2b;
|
|
143
|
+
--bpk-private-trip-advisor: #9ce6c0;
|
|
144
|
+
--bpk-core-accent: #84e9ff;
|
|
145
|
+
--bpk-core-eco: #0fa1a9;
|
|
146
|
+
--bpk-core-primary: #054184;
|
|
147
|
+
--bpk-other-line: rgba(255, 255, 255, 0.2);
|
|
148
|
+
--bpk-other-line-on-dark: rgba(255, 255, 255, 0.2);
|
|
149
|
+
--bpk-other-overlay: rgba(255, 255, 255, 0.8);
|
|
150
|
+
--bpk-other-scrim: rgba(0, 0, 0, 0.7);
|
|
151
|
+
--bpk-other-shadow: rgba(22, 22, 22, 0.25);
|
|
152
|
+
--bpk-status-danger-fill: #ffcadd;
|
|
153
|
+
--bpk-status-danger-spot: #ff649c;
|
|
154
|
+
--bpk-status-success-fill: #b1ffe7;
|
|
155
|
+
--bpk-status-success-spot: #62f1c6;
|
|
156
|
+
--bpk-status-warning-fill: #fbf1bb;
|
|
157
|
+
--bpk-status-warning-spot: #feeb87;
|
|
158
|
+
--bpk-surface-contrast: #010913;
|
|
159
|
+
--bpk-surface-default: #131d2b;
|
|
160
|
+
--bpk-surface-elevated: #243346;
|
|
161
|
+
--bpk-surface-hero: #010913;
|
|
162
|
+
--bpk-surface-highlight: #243346;
|
|
163
|
+
--bpk-surface-low-contrast: #243346;
|
|
164
|
+
--bpk-surface-subtle: #243346;
|
|
165
|
+
--bpk-surface-tint: rgba(255, 255, 255, 0.1);
|
|
166
|
+
--bpk-surface-promo: #243346;
|
|
167
|
+
--bpk-text-disabled: rgba(255, 255, 255, 0.2);
|
|
168
|
+
--bpk-text-disabled-on-dark: rgba(255, 255, 255, 0.5);
|
|
169
|
+
--bpk-text-error: #ff649c;
|
|
170
|
+
--bpk-text-inverse: #010913;
|
|
171
|
+
--bpk-text-on-dark: #ffffff;
|
|
172
|
+
--bpk-text-on-light: #010913;
|
|
173
|
+
--bpk-text-primary: #ffffff;
|
|
174
|
+
--bpk-text-secondary: #bdc4cb;
|
|
175
|
+
--bpk-text-success: #62f1c6;
|
|
176
|
+
--bpk-text-deprecated-link: #84e9ff;
|
|
177
|
+
--bpk-text-hero: #010913;
|
|
178
|
+
--bpk-title: true;
|
|
179
|
+
--bpk-typography-family-sans-serif: 'Skyscanner Relative';
|
|
180
|
+
--bpk-typography-family-serif: Larken;
|
|
181
|
+
--bpk-typography-kerning-default: 0;
|
|
182
|
+
--bpk-typography-kerning-loose: 0;
|
|
183
|
+
--bpk-typography-kerning-tight: 0;
|
|
184
|
+
--bpk-typography-style-body: 400;
|
|
185
|
+
--bpk-typography-style-headline: 700;
|
|
186
|
+
--bpk-typography-style-hero: 900;
|
|
187
|
+
--bpk-typography-style-label: 700;
|
|
188
|
+
--bpk-typography-style-subhead: 300;
|
|
189
|
+
}
|
|
@@ -0,0 +1,189 @@
|
|
|
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
|
+
* Do not edit directly, this file was auto-generated.
|
|
19
|
+
*/
|
|
20
|
+
|
|
21
|
+
:root {
|
|
22
|
+
--bpk-canvas-contrast: #eff3f8;
|
|
23
|
+
--bpk-canvas-default: #ffffff;
|
|
24
|
+
--bpk-private-badge-colour-bg-default: #eff3f8;
|
|
25
|
+
--bpk-private-badge-colour-bg-inverse: #ffffff;
|
|
26
|
+
--bpk-private-badge-colour-bg-outline: rgba(255, 255, 255, 0);
|
|
27
|
+
--bpk-private-badge-colour-bg-subtle: #eff3f8;
|
|
28
|
+
--bpk-private-badge-colour-stroke-outline: #ffffff;
|
|
29
|
+
--bpk-private-badge-dimension-padding-horizontal-default: 0.5rem;
|
|
30
|
+
--bpk-private-badge-dimension-padding-horizontal-subtle: 0.5rem;
|
|
31
|
+
--bpk-private-badge-typography-tmp-badge-label: 0.875rem;
|
|
32
|
+
--bpk-private-badge-typography-tmp-badge-line-height: 0;
|
|
33
|
+
--bpk-private-button-colour-bg-destructive: #e0e4e9;
|
|
34
|
+
--bpk-private-button-colour-bg-destructive-pressed: #e70866;
|
|
35
|
+
--bpk-private-button-colour-bg-disabled: #e0e4e9;
|
|
36
|
+
--bpk-private-button-colour-bg-feature-pressed: #024daf;
|
|
37
|
+
--bpk-private-button-colour-bg-featured: #0062e3;
|
|
38
|
+
--bpk-private-button-colour-bg-footer: rgba(255, 255, 255, 0);
|
|
39
|
+
--bpk-private-button-colour-bg-footer-pressed: rgba(255, 255, 255, 0);
|
|
40
|
+
--bpk-private-button-colour-bg-primary: #05203c;
|
|
41
|
+
--bpk-private-button-colour-bg-primary-on-dark: #ffffff;
|
|
42
|
+
--bpk-private-button-colour-bg-primary-on-dark-pressed: #c1c7cf;
|
|
43
|
+
--bpk-private-button-colour-bg-primary-on-light: #ffffff;
|
|
44
|
+
--bpk-private-button-colour-bg-primary-on-light-pressed: #154679;
|
|
45
|
+
--bpk-private-button-colour-bg-secondary: #e0e4e9;
|
|
46
|
+
--bpk-private-button-colour-bg-secondary-pressed: #c1c7cf;
|
|
47
|
+
--bpk-private-button-colour-bg-secondary-on-contrast: #e0e4e9;
|
|
48
|
+
--bpk-private-button-colour-bg-secondary-on-contrast-pressed: #c1c7cf;
|
|
49
|
+
--bpk-private-button-colour-bg-secondary-on-dark: rgba(255, 255, 255, 0.1);
|
|
50
|
+
--bpk-private-button-colour-bg-secondary-on-dark-disabled: #0b121d;
|
|
51
|
+
--bpk-private-button-colour-bg-secondary-on-dark-pressed: #04182d;
|
|
52
|
+
--bpk-private-button-colour-text-disruptive: #e70866;
|
|
53
|
+
--bpk-private-button-colour-text-feature: #ffffff;
|
|
54
|
+
--bpk-private-button-colour-text-footer: rgba(255, 255, 255, 0);
|
|
55
|
+
--bpk-private-button-colour-text-link-on-dark: #ffffff;
|
|
56
|
+
--bpk-private-button-colour-text-secondary: #161616;
|
|
57
|
+
--bpk-private-button-dimension-radius: 0.5rem;
|
|
58
|
+
--bpk-private-button-dimension-min-height-default: 2.25rem;
|
|
59
|
+
--bpk-private-button-dimension-min-height-large: 3rem;
|
|
60
|
+
--bpk-private-button-dimension-min-weight-large: 3rem;
|
|
61
|
+
--bpk-private-button-dimension-padding-horizontal-default: 1rem;
|
|
62
|
+
--bpk-private-button-dimension-padding-horizontal-large: 1rem;
|
|
63
|
+
--bpk-private-button-typography-tmp-default-label: 1rem;
|
|
64
|
+
--bpk-private-card-button-contained-fill: rgba(255, 255, 255, 0.8);
|
|
65
|
+
--bpk-private-carousel-trigger-bg-default: rgba(255, 255, 255, 0.5);
|
|
66
|
+
--bpk-private-carousel-trigger-bg-default-hover: rgba(255, 255, 255, 0.8);
|
|
67
|
+
--bpk-private-chip-group-filter-colour-bg-icon-hover-on-image: #eff3f8;
|
|
68
|
+
--bpk-private-chip-group-filter-colour-bg-icon-off-on-image: #ffffff;
|
|
69
|
+
--bpk-private-chip-group-filter-colour-bg-icon-on-default: #05203c;
|
|
70
|
+
--bpk-private-chip-group-filter-colour-bg-icon-on-on-dark: #ffffff;
|
|
71
|
+
--bpk-private-chip-group-filter-colour-bg-icon-on-on-image: #05203c;
|
|
72
|
+
--bpk-private-chip-group-filter-colour-stroke-icon-hover-default: #05203c;
|
|
73
|
+
--bpk-private-chip-group-filter-colour-stroke-icon-hover-on-dark: #ffffff;
|
|
74
|
+
--bpk-private-chip-group-filter-colour-stroke-icon-off-default: #c1c7cf;
|
|
75
|
+
--bpk-private-chip-group-filter-colour-stroke-icon-off-on-dark: rgba(255, 255, 255, 0.5);
|
|
76
|
+
--bpk-private-chip-group-filter-dimensions-min-height: 2.25rem;
|
|
77
|
+
--bpk-private-chip-colour-bg-default-dismissible-hover: #05203c;
|
|
78
|
+
--bpk-private-chip-colour-bg-default-on: #05203c;
|
|
79
|
+
--bpk-private-chip-colour-bg-disabled: #e0e4e9;
|
|
80
|
+
--bpk-private-chip-colour-bg-on-contrast-hover: #ffffff;
|
|
81
|
+
--bpk-private-chip-colour-bg-on-contrast-on: #05203c;
|
|
82
|
+
--bpk-private-chip-colour-bg-on-dark-dismissible-hover: #ffffff;
|
|
83
|
+
--bpk-private-chip-colour-bg-on-dark-hover: #ffffff;
|
|
84
|
+
--bpk-private-chip-colour-bg-on-dark-off: rgba(255, 255, 255, 0);
|
|
85
|
+
--bpk-private-chip-colour-bg-on-dark-on: #ffffff;
|
|
86
|
+
--bpk-private-chip-colour-bg-on-image-dismissible-hover: #05203c;
|
|
87
|
+
--bpk-private-chip-colour-bg-on-image-on: #eff3f8;
|
|
88
|
+
--bpk-private-chip-colour-border-default-dismissible-hover: rgba(255, 255, 255, 0);
|
|
89
|
+
--bpk-private-chip-colour-border-default-hover: #05203c;
|
|
90
|
+
--bpk-private-chip-colour-border-default-off: #c1c7cf;
|
|
91
|
+
--bpk-private-chip-colour-border-on-contrast-off: #ffffff;
|
|
92
|
+
--bpk-private-chip-colour-border-on-contrast-on: #05203c;
|
|
93
|
+
--bpk-private-chip-colour-border-on-dark-disimissible-hover: #ffffff;
|
|
94
|
+
--bpk-private-chip-colour-border-on-dark-hover: #ffffff;
|
|
95
|
+
--bpk-private-chip-colour-border-on-dark-off: rgba(255, 255, 255, 0.5);
|
|
96
|
+
--bpk-private-chip-colour-stroke-off-on-canvas-contrast-new: rgba(255, 255, 255, 0);
|
|
97
|
+
--bpk-private-chip-colour-text-default-dismissible-hover: #ffffff;
|
|
98
|
+
--bpk-private-chip-colour-text-dismissible-on-icon: rgba(255, 255, 255, 0.5);
|
|
99
|
+
--bpk-private-chip-colour-text-on: #ffffff;
|
|
100
|
+
--bpk-private-chip-colour-text-on-image: #ffffff;
|
|
101
|
+
--bpk-private-chip-colour-text-on-image-dismissible-icon: #626971;
|
|
102
|
+
--bpk-private-chip-colour-text-on-dark: #161616;
|
|
103
|
+
--bpk-private-chip-colour-text-on-dark-dismisisble-hover: #161616;
|
|
104
|
+
--bpk-private-chip-colour-text-on-dark-dismisisble-icon: #626971;
|
|
105
|
+
--bpk-private-chip-dimension-min-height-width: 2rem;
|
|
106
|
+
--bpk-private-chip-dimension-radius: 0.5rem;
|
|
107
|
+
--bpk-private-date-selector-cheapest-month-highlight: #154679;
|
|
108
|
+
--bpk-private-date-selector-flexible-date-card: #eff3f8;
|
|
109
|
+
--bpk-private-dimension-padding-veritcal: 0;
|
|
110
|
+
--bpk-private-info-banner-default: #eff3f8;
|
|
111
|
+
--bpk-private-info-banner-on-contrast: #ffffff;
|
|
112
|
+
--bpk-private-map-cluster-pin: #05203c;
|
|
113
|
+
--bpk-private-map-cluster-pin-previous-selection: #94c3ff;
|
|
114
|
+
--bpk-private-map-marker-viewed: rgba(255, 255, 255, 0.8);
|
|
115
|
+
--bpk-private-map-poi-pin: #8e47ba;
|
|
116
|
+
--bpk-private-map-previous-selection: #cfe4ff;
|
|
117
|
+
--bpk-private-navigation-tabs-hover: #154679;
|
|
118
|
+
--bpk-private-navigation-tabs-outline: rgba(255, 255, 255, 0.2);
|
|
119
|
+
--bpk-private-navigation-tabs-selected: #024daf;
|
|
120
|
+
--bpk-private-rating-bar-default: #e0e4e9;
|
|
121
|
+
--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-on: #024daf;
|
|
125
|
+
--bpk-private-shadow-large-blur: 0.875rem;
|
|
126
|
+
--bpk-private-shadow-large-color: rgba(22, 22, 22, 0.25);
|
|
127
|
+
--bpk-private-shadow-large-position-x: 0;
|
|
128
|
+
--bpk-private-shadow-large-position-y: 0.25rem;
|
|
129
|
+
--bpk-private-shadow-large-spread: 0;
|
|
130
|
+
--bpk-private-shadow-small-blur: 0.1875rem;
|
|
131
|
+
--bpk-private-shadow-small-color: rgba(22, 22, 22, 0.25);
|
|
132
|
+
--bpk-private-shadow-small-position-x: 0;
|
|
133
|
+
--bpk-private-shadow-small-position-y: 0.0625rem;
|
|
134
|
+
--bpk-private-shadow-small-spread: 0;
|
|
135
|
+
--bpk-private-shadow-xl-blur: 3.125rem;
|
|
136
|
+
--bpk-private-shadow-xl-color: rgba(22, 22, 22, 0.25);
|
|
137
|
+
--bpk-private-shadow-xl-position-x: 0;
|
|
138
|
+
--bpk-private-shadow-xl-position-y: 0.75rem;
|
|
139
|
+
--bpk-private-shadow-xl-spread: 0;
|
|
140
|
+
--bpk-private-skeleton-on-dark: rgba(255, 255, 255, 0.1);
|
|
141
|
+
--bpk-private-speech-bubble-colour-bg-contrast: #eff3f8;
|
|
142
|
+
--bpk-private-speech-bubble-colour-bg-default: #ffffff;
|
|
143
|
+
--bpk-private-trip-advisor: #00aa6c;
|
|
144
|
+
--bpk-core-accent: #0062e3;
|
|
145
|
+
--bpk-core-eco: #0fa1a9;
|
|
146
|
+
--bpk-core-primary: #05203c;
|
|
147
|
+
--bpk-other-line: #c1c7cf;
|
|
148
|
+
--bpk-other-line-on-dark: rgba(255, 255, 255, 0.5);
|
|
149
|
+
--bpk-other-overlay: rgba(0, 0, 0, 0.2);
|
|
150
|
+
--bpk-other-scrim: rgba(0, 0, 0, 0.7);
|
|
151
|
+
--bpk-other-shadow: rgba(22, 22, 22, 0.25);
|
|
152
|
+
--bpk-status-danger-fill: #ffe9f9;
|
|
153
|
+
--bpk-status-danger-spot: #e70866;
|
|
154
|
+
--bpk-status-success-fill: #d4fff2;
|
|
155
|
+
--bpk-status-success-spot: #0c838a;
|
|
156
|
+
--bpk-status-warning-fill: #fff7cf;
|
|
157
|
+
--bpk-status-warning-spot: #f55d42;
|
|
158
|
+
--bpk-surface-contrast: #05203c;
|
|
159
|
+
--bpk-surface-default: #ffffff;
|
|
160
|
+
--bpk-surface-elevated: #ffffff;
|
|
161
|
+
--bpk-surface-hero: #0062e3;
|
|
162
|
+
--bpk-surface-highlight: #e0e4e9;
|
|
163
|
+
--bpk-surface-low-contrast: #f7f9fb;
|
|
164
|
+
--bpk-surface-subtle: #e3f0ff;
|
|
165
|
+
--bpk-surface-tint: rgba(255, 255, 255, 0.1);
|
|
166
|
+
--bpk-surface-promo: #0062e3;
|
|
167
|
+
--bpk-text-disabled: rgba(0, 0, 0, 0.2);
|
|
168
|
+
--bpk-text-disabled-on-dark: rgba(255, 255, 255, 0.5);
|
|
169
|
+
--bpk-text-error: #e70866;
|
|
170
|
+
--bpk-text-inverse: #ffffff;
|
|
171
|
+
--bpk-text-on-dark: #ffffff;
|
|
172
|
+
--bpk-text-on-light: #161616;
|
|
173
|
+
--bpk-text-primary: #161616;
|
|
174
|
+
--bpk-text-secondary: #626971;
|
|
175
|
+
--bpk-text-success: #0c838a;
|
|
176
|
+
--bpk-text-deprecated-link: #0062e3;
|
|
177
|
+
--bpk-text-hero: #0062e3;
|
|
178
|
+
--bpk-title: true;
|
|
179
|
+
--bpk-typography-family-sans-serif: 'Skyscanner Relative';
|
|
180
|
+
--bpk-typography-family-serif: Larken;
|
|
181
|
+
--bpk-typography-kerning-default: 0;
|
|
182
|
+
--bpk-typography-kerning-loose: 0;
|
|
183
|
+
--bpk-typography-kerning-tight: 0;
|
|
184
|
+
--bpk-typography-style-body: 400;
|
|
185
|
+
--bpk-typography-style-headline: 700;
|
|
186
|
+
--bpk-typography-style-hero: 900;
|
|
187
|
+
--bpk-typography-style-label: 700;
|
|
188
|
+
--bpk-typography-style-subhead: 300;
|
|
189
|
+
}
|