@royaloperahouse/chord 1.3.1-b-chord-development → 1.3.1-d-chord-development
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.
|
@@ -68,7 +68,7 @@ var devices = {
|
|
|
68
68
|
};
|
|
69
69
|
|
|
70
70
|
var _templateObject;
|
|
71
|
-
var ButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", "\n var(--button-padding-x);\n height: var(--button-height);\n font-family: var(--font-family-buttons);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: var(--base-color-
|
|
71
|
+
var ButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", "\n var(--button-padding-x);\n height: var(--button-height);\n font-family: var(--font-family-buttons);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n // prettier-ignore\n color: var(--base-color-", ");\n line-height: var(--button-line-height);\n width: fit-content;\n border-style: solid;\n border-width: 1px;\n cursor: pointer;\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n\n @media ", " {\n & {\n width: 100%;\n }\n }\n"])), function (_ref) {
|
|
72
72
|
var iconName = _ref.iconName;
|
|
73
73
|
return iconName ? 'var(--button-padding-y-icon)' : 'var(--button-padding-y)';
|
|
74
74
|
}, function (_ref2) {
|
|
@@ -571,7 +571,7 @@ var Directions = {
|
|
|
571
571
|
down: 'transform: rotate(90deg)',
|
|
572
572
|
reverse: 'transform: scaleX(-1)'
|
|
573
573
|
};
|
|
574
|
-
var Wrapper = /*#__PURE__*/styled__default.span(_templateObject$2 || (_templateObject$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n\n & svg {\n display: block;\n ", ";\n }\n\n & svg path {\n fill: var(--base-color-
|
|
574
|
+
var Wrapper = /*#__PURE__*/styled__default.span(_templateObject$2 || (_templateObject$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n\n & svg {\n display: block;\n ", ";\n }\n\n & svg path {\n // prettier-ignore\n fill: var(--base-color-", ", ", ");\n }\n"])), function (_ref) {
|
|
575
575
|
var _ref$direction = _ref.direction,
|
|
576
576
|
direction = _ref$direction === void 0 ? 'right' : _ref$direction;
|
|
577
577
|
return Directions[direction];
|
|
@@ -2158,7 +2158,7 @@ var SecondaryButton = function SecondaryButton(_ref) {
|
|
|
2158
2158
|
};
|
|
2159
2159
|
|
|
2160
2160
|
var _templateObject$5, _templateObject2;
|
|
2161
|
-
var TertiaryButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n height: var(--button-height);\n font-family: var(--font-family-buttons);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: var(--base-color-
|
|
2161
|
+
var TertiaryButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n height: var(--button-height);\n font-family: var(--font-family-buttons);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n // prettier-ignore\n color: var(--base-color-", ");\n width: fit-content;\n background: none;\n border-style: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n"])), function (_ref) {
|
|
2162
2162
|
var color = _ref.color;
|
|
2163
2163
|
return color;
|
|
2164
2164
|
});
|
|
@@ -2210,7 +2210,7 @@ var GridItem = /*#__PURE__*/styled__default.div(_templateObject$7 || (_templateO
|
|
|
2210
2210
|
});
|
|
2211
2211
|
|
|
2212
2212
|
var _templateObject$8;
|
|
2213
|
-
var BadgeWrapper = /*#__PURE__*/styled__default.svg(_templateObject$8 || (_templateObject$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: auto;\n\n g,\n path {\n fill: var(--base-color-
|
|
2213
|
+
var BadgeWrapper = /*#__PURE__*/styled__default.svg(_templateObject$8 || (_templateObject$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: auto;\n\n g,\n path {\n // prettier-ignore\n fill: var(--base-color-", ");\n }\n"])), function (_ref) {
|
|
2214
2214
|
var fillColor = _ref.fillColor;
|
|
2215
2215
|
return fillColor;
|
|
2216
2216
|
});
|
|
@@ -2259,7 +2259,7 @@ zLevels.forEach(function (name, index) {
|
|
|
2259
2259
|
|
|
2260
2260
|
var _templateObject$9, _templateObject2$1, _templateObject3;
|
|
2261
2261
|
var TabContainer = /*#__PURE__*/styled__default.div(_templateObject$9 || (_templateObject$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: column;\n position: relative;\n"])));
|
|
2262
|
-
var OptionItem = /*#__PURE__*/styled__default.a(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-black);\n text-decoration: none;\n cursor: pointer;\n text-transform: uppercase;\n\n :hover,\n :focus {\n color: var(--base-color-
|
|
2262
|
+
var OptionItem = /*#__PURE__*/styled__default.a(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-black);\n text-decoration: none;\n cursor: pointer;\n text-transform: uppercase;\n\n :hover,\n :focus {\n // prettier-ignore\n color: var(--base-color-", ");\n }\n"])), function (_ref) {
|
|
2263
2263
|
var colorPrimary = _ref.colorPrimary;
|
|
2264
2264
|
return colorPrimary;
|
|
2265
2265
|
});
|
|
@@ -2419,7 +2419,7 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
|
|
|
2419
2419
|
};
|
|
2420
2420
|
|
|
2421
2421
|
var _templateObject$b;
|
|
2422
|
-
var SecondaryLogoWrapper = /*#__PURE__*/styled__default.svg(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n path {\n fill: var(--base-color-
|
|
2422
|
+
var SecondaryLogoWrapper = /*#__PURE__*/styled__default.svg(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n path {\n // prettier-ignore\n fill: var(--base-color-", ");\n }\n"])), function (_ref) {
|
|
2423
2423
|
var fillColor = _ref.fillColor;
|
|
2424
2424
|
return fillColor;
|
|
2425
2425
|
});
|
|
@@ -2870,7 +2870,8 @@ var TabLink = function TabLink(_ref) {
|
|
|
2870
2870
|
};
|
|
2871
2871
|
|
|
2872
2872
|
var _templateObject$i, _templateObject2$6;
|
|
2873
|
-
|
|
2873
|
+
|
|
2874
|
+
var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-bottom: 1px solid;\n padding-bottom: ", ";\n font-family: var(--font-family-overline);\n font-size: var(--font-size-overline-1);\n font-weight: var(--font-weight-overline-1);\n line-height: var(--line-height-overline-1);\n letter-spacing: var(--letter-spacing-overline-1);\n text-transform: var(--text-transform-overline);\n color: var(--base-color-", ");\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n"])), function (_ref) {
|
|
2874
2875
|
var iconName = _ref.iconName;
|
|
2875
2876
|
return iconName ? 'calc(var(--text-link-underline-offset) - 4px)' : 'var(--text-link-underline-offset)';
|
|
2876
2877
|
}, function (_ref2) {
|
|
@@ -2902,7 +2903,8 @@ var TextLink = function TextLink(_ref) {
|
|
|
2902
2903
|
};
|
|
2903
2904
|
|
|
2904
2905
|
var _templateObject$j;
|
|
2905
|
-
|
|
2906
|
+
|
|
2907
|
+
var Wrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-family: var(--font-family-", ");\n font-feature-settings: var(--font-feature-settings-", ");\n font-size: var(--font-size-", "-", ");\n font-weight: var(--font-weight-", "-", ");\n letter-spacing: var(--letter-spacing-", "-", ");\n line-height: var(--line-height-", "-", ");\n text-transform: var(--text-transform-", ");\n word-break: var(--word-break-", ");\n"])), function (_ref) {
|
|
2906
2908
|
var typography = _ref.typography;
|
|
2907
2909
|
return typography;
|
|
2908
2910
|
}, function (_ref2) {
|
|
@@ -3010,15 +3012,18 @@ var Subtitle = function Subtitle(_ref6) {
|
|
|
3010
3012
|
};
|
|
3011
3013
|
|
|
3012
3014
|
var _templateObject$k, _templateObject2$7, _templateObject3$2;
|
|
3013
|
-
|
|
3015
|
+
|
|
3016
|
+
var TickboxLabel = /*#__PURE__*/styled__default.label(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: block;\n width: fit-content;\n position: relative;\n padding-left: 32px;\n color: var(--base-color-", ");\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n\n @media ", " {\n &:focus {\n outline: 0;\n }\n }\n"])), function (_ref) {
|
|
3014
3017
|
var dark = _ref.dark;
|
|
3015
3018
|
return dark ? 'white' : 'black';
|
|
3016
|
-
}, devices.mobileAndTablet);
|
|
3017
|
-
|
|
3019
|
+
}, devices.mobileAndTablet); // prettier-ignore
|
|
3020
|
+
|
|
3021
|
+
var TickboxCheckmark = /*#__PURE__*/styled__default.span(_templateObject2$7 || (_templateObject2$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 1px;\n left: 0;\n height: 20px;\n width: 20px;\n padding: 3px;\n box-sizing: border-box;\n border: 1px solid var(--base-color-", ");\n\n svg {\n display: none;\n }\n\n @media ", " {\n top: 0;\n }\n"])), function (_ref2) {
|
|
3018
3022
|
var dark = _ref2.dark;
|
|
3019
3023
|
return dark ? 'white' : 'black';
|
|
3020
|
-
}, devices.mobile);
|
|
3021
|
-
|
|
3024
|
+
}, devices.mobile); // prettier-ignore
|
|
3025
|
+
|
|
3026
|
+
var TickboxInput = /*#__PURE__*/styled__default.input(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n &:checked ~ ", " {\n background-color: var(--base-color-", ");\n & svg {\n display: block;\n path {\n // eslint-disable-next-line\n fill: var(--base-color-", ");\n }\n }\n }\n"])), TickboxCheckmark, function (_ref3) {
|
|
3022
3027
|
var dark = _ref3.dark;
|
|
3023
3028
|
return dark ? 'white' : 'black';
|
|
3024
3029
|
}, function (_ref4) {
|
|
@@ -3215,7 +3220,7 @@ var _templateObject$p;
|
|
|
3215
3220
|
var NavTopContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n column-gap: 16px;\n justify-content: flex-end;\n height: 26px;\n\n @media ", " {\n column-gap: 8px;\n }\n"])), devices.mobile);
|
|
3216
3221
|
|
|
3217
3222
|
var _templateObject$q, _templateObject2$a, _templateObject3$5, _templateObject4$2;
|
|
3218
|
-
var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid var(--base-color-transparent);\n\n ", "\n\n :hover {\n border-bottom: 1px solid var(--base-color-
|
|
3223
|
+
var BasketContainer = /*#__PURE__*/styled__default.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid var(--base-color-transparent);\n\n ", "\n \n :hover {\n // prettier-ignore\n border-bottom: 1px solid var(--base-color-", ");\n && a {\n color: var(--base-color-", ");\n }\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n"])), function (_ref) {
|
|
3219
3224
|
var selected = _ref.selected,
|
|
3220
3225
|
colorPrimary = _ref.colorPrimary;
|
|
3221
3226
|
|
|
@@ -3280,7 +3285,7 @@ var Basket$1 = function Basket(_ref) {
|
|
|
3280
3285
|
};
|
|
3281
3286
|
|
|
3282
3287
|
var _templateObject$r, _templateObject2$b;
|
|
3283
|
-
var SearchContainer = /*#__PURE__*/styled__default.div(_templateObject$r || (_templateObject$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid var(--base-color-transparent);\n ", "\n\n :hover {\n border-bottom: 1px solid var(--base-color-
|
|
3288
|
+
var SearchContainer = /*#__PURE__*/styled__default.div(_templateObject$r || (_templateObject$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n border-bottom: 1px solid var(--base-color-transparent);\n ", "\n\n :hover {\n // prettier-ignore\n border-bottom: 1px solid var(--base-color-", ");\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n"])), function (_ref) {
|
|
3284
3289
|
var selected = _ref.selected,
|
|
3285
3290
|
colorPrimary = _ref.colorPrimary;
|
|
3286
3291
|
|
|
@@ -3575,8 +3580,9 @@ var ItemsContainer = /*#__PURE__*/styled__default.div(_templateObject2$c || (_te
|
|
|
3575
3580
|
}
|
|
3576
3581
|
|
|
3577
3582
|
return "display: none;";
|
|
3578
|
-
});
|
|
3579
|
-
|
|
3583
|
+
}); // prettier-ignore
|
|
3584
|
+
|
|
3585
|
+
var MenuContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n width: 60px;\n\n & a {\n font-size: var(--font-size-navigation);\n font-family: var(--font-family-navigation);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--letter-spacing-navigation);\n color: var(--base-color-black);\n text-decoration: none;\n cursor: pointer;\n\n :hover {\n color: var(--base-color-", ");\n }\n }\n\n :hover {\n && svg path {\n fill: var(--base-color-", ");\n }\n }\n\n @media ", " {\n display: block;\n\n svg {\n width: 24px;\n height: 24px;\n margin-left: 40px;\n margin-top: -20px;\n }\n\n a {\n margin-left: 20px;\n }\n }\n"])), function (_ref) {
|
|
3580
3586
|
var colorPrimary = _ref.colorPrimary;
|
|
3581
3587
|
return colorPrimary;
|
|
3582
3588
|
}, function (_ref2) {
|
|
@@ -3937,7 +3943,7 @@ var Navigation = function Navigation(_ref) {
|
|
|
3937
3943
|
|
|
3938
3944
|
var _templateObject$u, _templateObject2$e, _templateObject3$8, _templateObject4$5, _templateObject5$2, _templateObject6$2;
|
|
3939
3945
|
var FooterSection = /*#__PURE__*/styled__default.section(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: var(--base-color-black);\n color: var(--base-color-white);\n"])));
|
|
3940
|
-
var FooterContainer = /*#__PURE__*/styled__default.div(_templateObject2$e || (_templateObject2$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--footer-height);\n padding-top: var(--footer-padding-top);\n padding-bottom: var(--footer-padding-bottom);\n display: grid;\n grid-template-rows:\n min-content var(--footer-vertical-spacing-lg) min-content var(--footer-vertical-spacing-lg)
|
|
3946
|
+
var FooterContainer = /*#__PURE__*/styled__default.div(_templateObject2$e || (_templateObject2$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--footer-height);\n padding-top: var(--footer-padding-top);\n padding-bottom: var(--footer-padding-bottom);\n display: grid;\n grid-template-rows:\n min-content var(--footer-vertical-spacing-lg) min-content var(--footer-vertical-spacing-lg)\n min-content var(--footer-vertical-spacing-sm)\n min-content;\n grid-template-areas:\n 'row1'\n '.'\n 'row2'\n '.'\n 'row3'\n '.'\n 'row4';\n"])));
|
|
3941
3947
|
var PolicyLinksRow = /*#__PURE__*/styled__default.div(_templateObject3$8 || (_templateObject3$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row1;\n justify-self: center;\n\n @media ", " {\n & {\n justify-self: start;\n grid-area: row2;\n }\n }\n"])), devices.mobile);
|
|
3942
3948
|
var ContactNewsletterRow = /*#__PURE__*/styled__default.div(_templateObject4$5 || (_templateObject4$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row2;\n\n @media ", " {\n & {\n grid-area: row1;\n }\n }\n"])), devices.mobile);
|
|
3943
3949
|
var ArtsLogoRow = /*#__PURE__*/styled__default.div(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: row3;\n justify-self: center;\n\n @media ", " {\n justify-self: start;\n }\n"])), devices.mobile);
|
|
@@ -4216,7 +4222,7 @@ var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$y || (_te
|
|
|
4216
4222
|
var numberOfColumns = type === exports.CarouselType.LargeCard ? 5 : 4;
|
|
4217
4223
|
var gapsSpace = "calc(var(--grid-column-gap) * " + numberOfGaps + ")";
|
|
4218
4224
|
var gapsInMainGraid = 'calc(11 * var(--grid-column-gap))';
|
|
4219
|
-
var calcColumns = "calc(calc(80% -" + gapsInMainGraid + ") * " + numberOfColumns + " / 12)";
|
|
4225
|
+
var calcColumns = "calc(calc(80% - " + gapsInMainGraid + ") * " + numberOfColumns + " / 12)";
|
|
4220
4226
|
return "\n & {\n .swiper-slide {\n width: calc(" + calcColumns + " + " + gapsSpace + " - 1px);\n margin-right: var(--grid-column-gap);\n -webkit-transform: translate3d(0, 0, 0);\n }\n }\n ";
|
|
4221
4227
|
} else {
|
|
4222
4228
|
return "\n & {\n .swiper-slide {\n height: fit-content;\n width: auto;\n margin-right: var(--grid-column-gap);\n -webkit-transform: translate3d(0, 0, 0);\n\n > div {\n height: calc(" + imagesHeightDesktop + "px + var(--line-height-body-2) + 12px);\n }\n }\n }\n ";
|
|
@@ -4231,7 +4237,7 @@ var CarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$y || (_te
|
|
|
4231
4237
|
var numberOfColumns = 10;
|
|
4232
4238
|
var gapsInMainGraid = 'calc(11 * var(--grid-column-gap))';
|
|
4233
4239
|
var mainGridWidth = 'calc(100% - calc(2 * var(--grid-margin)))';
|
|
4234
|
-
var columnWidth = "calc(calc(" + mainGridWidth + " -" + gapsInMainGraid + ") / 12)";
|
|
4240
|
+
var columnWidth = "calc(calc(" + mainGridWidth + " - " + gapsInMainGraid + ") / 12)";
|
|
4235
4241
|
var calcColumns = "calc(" + columnWidth + " * " + numberOfColumns + ")";
|
|
4236
4242
|
var marginRight = active ? "calc(calc(var(--grid-column-gap) * 2) + " + columnWidth + ")" : "calc(calc(" + columnWidth + " * 2) + var(--grid-column-gap))";
|
|
4237
4243
|
return "\n && {\n .swiper-slide {\n width: calc(" + calcColumns + " + " + gapsSpace + " - 1px);\n margin-right: " + marginRight + ";\n -webkit-transform: translate3d(0, 0, 0);\n }\n }";
|