Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@ndla/core
Advanced tools
@ndla/core - npm Package Compare versions
Comparing version 4.5.3 to 4.5.4
@@ -18,170 +18,18 @@ /** | ||
| }, | ||
| fadeInLeftFromZero: duration => ` | ||
| animation-duration: ${duration || DURATION_DEFAULT}; | ||
| width: 0; | ||
| height: 0; | ||
| overflow: hidden; | ||
| animation-name: fadeInLeft; | ||
| animation-fill-mode: forwards; | ||
| @keyframes fadeInLeft { | ||
| 0% { | ||
| transform: translateX(-${spacing.small}); | ||
| opacity: 0; | ||
| width: inherit; | ||
| overflow: inherit; | ||
| height: inherit; | ||
| } | ||
| 100% { | ||
| transform: translateX(0); | ||
| opacity: 1; | ||
| width: inherit; | ||
| overflow: inherit; | ||
| height: inherit; | ||
| } | ||
| }`, | ||
| fadeInLeft: duration => ` | ||
| animation-duration: ${duration || DURATION_DEFAULT}; | ||
| animation-name: fadeInLeft; | ||
| @keyframes fadeInLeft { | ||
| 0% { | ||
| transform: translateX(-${spacing.small}); | ||
| opacity: 0; | ||
| } | ||
| 100% { | ||
| transform: translateX(0); | ||
| opacity: 1; | ||
| } | ||
| }`, | ||
| fadeOutLeft: duration => ` | ||
| animation-duration: ${duration || DURATION_DEFAULT}; | ||
| animation-name: fadeOutLeft; | ||
| @keyframes fadeOutLeft { | ||
| 0% { | ||
| transform: translateX(0); | ||
| opacity: 1; | ||
| } | ||
| 100% { | ||
| transform: translateX(${spacing.small}); | ||
| opacity: 0; | ||
| } | ||
| }`, | ||
| fadeInBottom: (duration, distance) => ` | ||
| animation-duration: ${duration || DURATION_DEFAULT}; | ||
| animation-name: fadeInBottom; | ||
| @keyframes fadeInBottom { | ||
| 0% { | ||
| transform: translateY(${distance || spacing.small}); | ||
| opacity: 0; | ||
| } | ||
| 100% { | ||
| transform: translateY(0); | ||
| opacity: 1; | ||
| } | ||
| }`, | ||
| fadeOutBottom: (duration, distance) => ` | ||
| animation-duration: ${duration || DURATION_DEFAULT}; | ||
| animation-name: fadeOutBottom; | ||
| @keyframes fadeOutBottom { | ||
| 0% { | ||
| transform: translateY(0); | ||
| opacity: 1; | ||
| } | ||
| 100% { | ||
| transform: translateY(${distance || spacing.small}); | ||
| opacity: 0; | ||
| } | ||
| }`, | ||
| fadeInTop: (duration, distance) => ` | ||
| animation-duration: ${duration || DURATION_DEFAULT}; | ||
| animation-name: fadeInTop; | ||
| @keyframes fadeInTop { | ||
| 0% { | ||
| transform: translateY(-${distance || spacing.small}); | ||
| opacity: 0; | ||
| } | ||
| 100% { | ||
| transform: translateY(0); | ||
| opacity: 1; | ||
| } | ||
| }`, | ||
| fadeOutTop: (duration, distance) => ` | ||
| animation-duration: ${duration || DURATION_DEFAULT}; | ||
| animation-name: fadeOutTop; | ||
| @keyframes fadeOutTop { | ||
| 0% { | ||
| transform: translateY(${distance || spacing.small}); | ||
| opacity: 1; | ||
| } | ||
| 100% { | ||
| transform: translateY(0); | ||
| opacity: 0; | ||
| } | ||
| }`, | ||
| fadeInScaled: duration => ` | ||
| animation-duration: ${duration || DURATION_DEFAULT}; | ||
| animation-name: fadeInScaled; | ||
| @keyframes fadeInScaled { | ||
| 0% { | ||
| transform: scale(0.5); | ||
| opacity: 0; | ||
| } | ||
| 100% { | ||
| transform: scale(1); | ||
| opacity: 1; | ||
| } | ||
| }`, | ||
| fadeOutScaled: duration => ` | ||
| animation-duration: ${duration || DURATION_DEFAULT}; | ||
| animation-name: fadeOutScaled; | ||
| @keyframes fadeOutScaled { | ||
| 0% { | ||
| transform: scale(1); | ||
| opacity: 1; | ||
| } | ||
| 100% { | ||
| transform: scale(0.5); | ||
| opacity: 0; | ||
| } | ||
| }`, | ||
| fadeOut: duration => ` | ||
| animation-duration: ${duration || DURATION_DEFAULT}; | ||
| animation-name: fadeOut; | ||
| @keyframes fadeOut { | ||
| 0% { | ||
| opacity: 1; | ||
| } | ||
| 100% { | ||
| opacity: 0; | ||
| } | ||
| }`, | ||
| fadeIn: duration => ` | ||
| animation-duration: ${duration || DURATION_DEFAULT}; | ||
| animation-name: fadeIn; | ||
| @keyframes fadeIn { | ||
| 0% { | ||
| opacity: 0; | ||
| } | ||
| 100% { | ||
| opacity: 1; | ||
| } | ||
| }`, | ||
| fadeInLeftFromZero: duration => "\n animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n width: 0;\n height: 0;\n overflow: hidden;\n animation-name: fadeInLeft;\n animation-fill-mode: forwards;\n @keyframes fadeInLeft {\n 0% {\n transform: translateX(-").concat(spacing.small, ");\n opacity: 0;\n width: inherit;\n overflow: inherit;\n height: inherit;\n }\n 100% {\n transform: translateX(0);\n opacity: 1;\n width: inherit;\n overflow: inherit;\n height: inherit;\n }\n }"), | ||
| fadeInLeft: duration => "\n animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n animation-name: fadeInLeft;\n @keyframes fadeInLeft {\n 0% {\n transform: translateX(-").concat(spacing.small, ");\n opacity: 0;\n }\n 100% {\n transform: translateX(0);\n opacity: 1;\n }\n }"), | ||
| fadeOutLeft: duration => "\n animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n animation-name: fadeOutLeft;\n @keyframes fadeOutLeft {\n 0% {\n transform: translateX(0);\n opacity: 1;\n }\n 100% {\n transform: translateX(").concat(spacing.small, ");\n opacity: 0;\n }\n }"), | ||
| fadeInBottom: (duration, distance) => "\n animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n animation-name: fadeInBottom;\n @keyframes fadeInBottom {\n 0% {\n transform: translateY(").concat(distance || spacing.small, ");\n opacity: 0;\n }\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n }"), | ||
| fadeOutBottom: (duration, distance) => "\n animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n animation-name: fadeOutBottom;\n @keyframes fadeOutBottom {\n 0% {\n transform: translateY(0);\n opacity: 1;\n }\n 100% {\n transform: translateY(").concat(distance || spacing.small, ");\n opacity: 0;\n }\n }"), | ||
| fadeInTop: (duration, distance) => "\n animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n animation-name: fadeInTop;\n @keyframes fadeInTop {\n 0% {\n transform: translateY(-").concat(distance || spacing.small, ");\n opacity: 0;\n }\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n }"), | ||
| fadeOutTop: (duration, distance) => "\n animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n animation-name: fadeOutTop;\n @keyframes fadeOutTop {\n 0% {\n transform: translateY(").concat(distance || spacing.small, ");\n opacity: 1;\n }\n 100% {\n transform: translateY(0);\n opacity: 0;\n }\n }"), | ||
| fadeInScaled: duration => "\n animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n animation-name: fadeInScaled;\n @keyframes fadeInScaled {\n 0% {\n transform: scale(0.5);\n opacity: 0;\n }\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n }"), | ||
| fadeOutScaled: duration => "\n animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n animation-name: fadeOutScaled;\n @keyframes fadeOutScaled {\n 0% {\n transform: scale(1);\n opacity: 1;\n }\n 100% {\n transform: scale(0.5);\n opacity: 0;\n }\n }"), | ||
| fadeOut: duration => "\n animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n animation-name: fadeOut;\n @keyframes fadeOut {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n }"), | ||
| fadeIn: duration => "\n animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n animation-name: fadeIn;\n @keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }"), | ||
| toggledContentWithSwitchAnimation: function (duration) { | ||
| let animationName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "toggledContentWithSwitchAnimation"; | ||
| return ` | ||
| animation-duration: ${duration || DURATION_DEFAULT}; | ||
| animation-name: ${animationName}; | ||
| @keyframes ${animationName} { | ||
| 0% { | ||
| opacity: 0.5; | ||
| } | ||
| 99% { | ||
| opacity: 0.5; | ||
| } | ||
| 100% { | ||
| opacity: 1; | ||
| } | ||
| } | ||
| `; | ||
| return "\n animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n animation-name: ").concat(animationName, ";\n @keyframes ").concat(animationName, " {\n 0% {\n opacity: 0.5;\n }\n 99% {\n opacity: 0.5;\n }\n 100% {\n opacity: 1;\n }\n }\n "); | ||
| } | ||
| }; | ||
| export default animations; |
@@ -18,6 +18,6 @@ /** | ||
| const fontSizeRem = parseInt(fontSize, 10) / baseFontSizeUnit; | ||
| const _lineHeight = lineHeight ?? Math.ceil(fontSizeUnit / baseLineHeightUnit) * (baseLineHeightUnit / fontSizeUnit); | ||
| const fontSizeStyling = `font-size: ${fontSize};font-size: ${fontSizeRem}rem;`; | ||
| const chineseStyling = `&:where([lang='zh'], &[lang='zh-Hans'], &[lang='zh-Hant']):not([data-pinyin]) {font-size: calc(${fontSize} * 1.11); font-size: calc(${fontSizeRem}rem * 1.11)}`; | ||
| return `${fontSizeStyling} line-height: ${_lineHeight}; ${chineseStyling}`; | ||
| const _lineHeight = lineHeight !== null && lineHeight !== void 0 ? lineHeight : Math.ceil(fontSizeUnit / baseLineHeightUnit) * (baseLineHeightUnit / fontSizeUnit); | ||
| const fontSizeStyling = "font-size: ".concat(fontSize, ";font-size: ").concat(fontSizeRem, "rem;"); | ||
| const chineseStyling = "&:where([lang='zh'], &[lang='zh-Hans'], &[lang='zh-Hant']):not([data-pinyin]) {font-size: calc(".concat(fontSize, " * 1.11); font-size: calc(").concat(fontSizeRem, "rem * 1.11)}"); | ||
| return "".concat(fontSizeStyling, " line-height: ").concat(_lineHeight, "; ").concat(chineseStyling); | ||
| } | ||
@@ -24,0 +24,0 @@ const fonts = { |
@@ -15,5 +15,5 @@ /** | ||
| } = _ref; | ||
| return `${from ? `@media (min-width: ${from})` : ""}${from && until ? " and " : ""}${!from && until ? "@media " : ""}${until ? `(max-width: ${until})` : ""}`; | ||
| return "".concat(from ? "@media (min-width: ".concat(from, ")") : "").concat(from && until ? " and " : "").concat(!from && until ? "@media " : "").concat(until ? "(max-width: ".concat(until, ")") : ""); | ||
| } | ||
| }; | ||
| export default mq; |
@@ -11,13 +11,13 @@ /** | ||
| const spacing = { | ||
| xxsmall: `${spacingUnit / 6}px`, | ||
| xsmall: `${spacingUnit / 4}px`, | ||
| small: `${spacingUnit / 2}px`, | ||
| nsmall: `${spacingUnit / 1.5}px`, | ||
| normal: `${spacingUnit}px`, | ||
| medium: `${spacingUnit * 1.25}px`, | ||
| mediumlarge: `${spacingUnit * 1.5}px`, | ||
| large: `${spacingUnit * 2}px`, | ||
| xlarge: `${spacingUnit * 3}px`, | ||
| xxlarge: `${spacingUnit * 4}px` | ||
| xxsmall: "".concat(spacingUnit / 6, "px"), | ||
| xsmall: "".concat(spacingUnit / 4, "px"), | ||
| small: "".concat(spacingUnit / 2, "px"), | ||
| nsmall: "".concat(spacingUnit / 1.5, "px"), | ||
| normal: "".concat(spacingUnit, "px"), | ||
| medium: "".concat(spacingUnit * 1.25, "px"), | ||
| mediumlarge: "".concat(spacingUnit * 1.5, "px"), | ||
| large: "".concat(spacingUnit * 2, "px"), | ||
| xlarge: "".concat(spacingUnit * 3, "px"), | ||
| xxlarge: "".concat(spacingUnit * 4, "px") | ||
| }; | ||
| export default spacing; |
@@ -12,39 +12,7 @@ /** | ||
| const utils = { | ||
| restoreOutline: ` | ||
| outline: 1px dotted #212121; | ||
| outline: -webkit-focus-ring-color auto 5px; | ||
| `, | ||
| visuallyHidden: ` | ||
| margin: -1px; | ||
| padding: 0; | ||
| width: 1px; | ||
| height: 1px; | ||
| overflow: hidden; | ||
| clip: rect(0 0 0 0); | ||
| clip: rect(0, 0, 0, 0); | ||
| position: absolute; | ||
| `, | ||
| scrollbar: ` | ||
| ::-webkit-scrollbar { | ||
| width: ${spacing.small}; | ||
| } | ||
| ::-webkit-scrollbar-thumb { | ||
| border: 4px solid transparent; | ||
| border-radius: 14px; | ||
| background-clip: padding-box; | ||
| padding: 0 4px; | ||
| background-color: ${colors.brand.neutral7}; | ||
| } | ||
| `, | ||
| labelHidden: ` | ||
| border: 0; | ||
| clip: rect(0 0 0 0); | ||
| height: 1px; | ||
| margin: -1px; | ||
| overflow: hidden; | ||
| padding: 0; | ||
| position: absolute; | ||
| width: 1px; | ||
| ` | ||
| restoreOutline: "\n outline: 1px dotted #212121;\n outline: -webkit-focus-ring-color auto 5px;\n", | ||
| visuallyHidden: "\n margin: -1px;\n padding: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip: rect(0, 0, 0, 0);\n position: absolute;\n", | ||
| scrollbar: "\n ::-webkit-scrollbar {\n width: ".concat(spacing.small, ";\n }\n ::-webkit-scrollbar-thumb {\n border: 4px solid transparent;\n border-radius: 14px;\n background-clip: padding-box;\n padding: 0 4px;\n background-color: ").concat(colors.brand.neutral7, ";\n }\n "), | ||
| labelHidden: "\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n " | ||
| }; | ||
| export default utils; |
@@ -25,170 +25,18 @@ "use strict"; | ||
| }, | ||
| fadeInLeftFromZero: duration => ` | ||
| animation-duration: ${duration || DURATION_DEFAULT}; | ||
| width: 0; | ||
| height: 0; | ||
| overflow: hidden; | ||
| animation-name: fadeInLeft; | ||
| animation-fill-mode: forwards; | ||
| @keyframes fadeInLeft { | ||
| 0% { | ||
| transform: translateX(-${_spacing.default.small}); | ||
| opacity: 0; | ||
| width: inherit; | ||
| overflow: inherit; | ||
| height: inherit; | ||
| } | ||
| 100% { | ||
| transform: translateX(0); | ||
| opacity: 1; | ||
| width: inherit; | ||
| overflow: inherit; | ||
| height: inherit; | ||
| } | ||
| }`, | ||
| fadeInLeft: duration => ` | ||
| animation-duration: ${duration || DURATION_DEFAULT}; | ||
| animation-name: fadeInLeft; | ||
| @keyframes fadeInLeft { | ||
| 0% { | ||
| transform: translateX(-${_spacing.default.small}); | ||
| opacity: 0; | ||
| } | ||
| 100% { | ||
| transform: translateX(0); | ||
| opacity: 1; | ||
| } | ||
| }`, | ||
| fadeOutLeft: duration => ` | ||
| animation-duration: ${duration || DURATION_DEFAULT}; | ||
| animation-name: fadeOutLeft; | ||
| @keyframes fadeOutLeft { | ||
| 0% { | ||
| transform: translateX(0); | ||
| opacity: 1; | ||
| } | ||
| 100% { | ||
| transform: translateX(${_spacing.default.small}); | ||
| opacity: 0; | ||
| } | ||
| }`, | ||
| fadeInBottom: (duration, distance) => ` | ||
| animation-duration: ${duration || DURATION_DEFAULT}; | ||
| animation-name: fadeInBottom; | ||
| @keyframes fadeInBottom { | ||
| 0% { | ||
| transform: translateY(${distance || _spacing.default.small}); | ||
| opacity: 0; | ||
| } | ||
| 100% { | ||
| transform: translateY(0); | ||
| opacity: 1; | ||
| } | ||
| }`, | ||
| fadeOutBottom: (duration, distance) => ` | ||
| animation-duration: ${duration || DURATION_DEFAULT}; | ||
| animation-name: fadeOutBottom; | ||
| @keyframes fadeOutBottom { | ||
| 0% { | ||
| transform: translateY(0); | ||
| opacity: 1; | ||
| } | ||
| 100% { | ||
| transform: translateY(${distance || _spacing.default.small}); | ||
| opacity: 0; | ||
| } | ||
| }`, | ||
| fadeInTop: (duration, distance) => ` | ||
| animation-duration: ${duration || DURATION_DEFAULT}; | ||
| animation-name: fadeInTop; | ||
| @keyframes fadeInTop { | ||
| 0% { | ||
| transform: translateY(-${distance || _spacing.default.small}); | ||
| opacity: 0; | ||
| } | ||
| 100% { | ||
| transform: translateY(0); | ||
| opacity: 1; | ||
| } | ||
| }`, | ||
| fadeOutTop: (duration, distance) => ` | ||
| animation-duration: ${duration || DURATION_DEFAULT}; | ||
| animation-name: fadeOutTop; | ||
| @keyframes fadeOutTop { | ||
| 0% { | ||
| transform: translateY(${distance || _spacing.default.small}); | ||
| opacity: 1; | ||
| } | ||
| 100% { | ||
| transform: translateY(0); | ||
| opacity: 0; | ||
| } | ||
| }`, | ||
| fadeInScaled: duration => ` | ||
| animation-duration: ${duration || DURATION_DEFAULT}; | ||
| animation-name: fadeInScaled; | ||
| @keyframes fadeInScaled { | ||
| 0% { | ||
| transform: scale(0.5); | ||
| opacity: 0; | ||
| } | ||
| 100% { | ||
| transform: scale(1); | ||
| opacity: 1; | ||
| } | ||
| }`, | ||
| fadeOutScaled: duration => ` | ||
| animation-duration: ${duration || DURATION_DEFAULT}; | ||
| animation-name: fadeOutScaled; | ||
| @keyframes fadeOutScaled { | ||
| 0% { | ||
| transform: scale(1); | ||
| opacity: 1; | ||
| } | ||
| 100% { | ||
| transform: scale(0.5); | ||
| opacity: 0; | ||
| } | ||
| }`, | ||
| fadeOut: duration => ` | ||
| animation-duration: ${duration || DURATION_DEFAULT}; | ||
| animation-name: fadeOut; | ||
| @keyframes fadeOut { | ||
| 0% { | ||
| opacity: 1; | ||
| } | ||
| 100% { | ||
| opacity: 0; | ||
| } | ||
| }`, | ||
| fadeIn: duration => ` | ||
| animation-duration: ${duration || DURATION_DEFAULT}; | ||
| animation-name: fadeIn; | ||
| @keyframes fadeIn { | ||
| 0% { | ||
| opacity: 0; | ||
| } | ||
| 100% { | ||
| opacity: 1; | ||
| } | ||
| }`, | ||
| fadeInLeftFromZero: duration => "\n animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n width: 0;\n height: 0;\n overflow: hidden;\n animation-name: fadeInLeft;\n animation-fill-mode: forwards;\n @keyframes fadeInLeft {\n 0% {\n transform: translateX(-").concat(_spacing.default.small, ");\n opacity: 0;\n width: inherit;\n overflow: inherit;\n height: inherit;\n }\n 100% {\n transform: translateX(0);\n opacity: 1;\n width: inherit;\n overflow: inherit;\n height: inherit;\n }\n }"), | ||
| fadeInLeft: duration => "\n animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n animation-name: fadeInLeft;\n @keyframes fadeInLeft {\n 0% {\n transform: translateX(-").concat(_spacing.default.small, ");\n opacity: 0;\n }\n 100% {\n transform: translateX(0);\n opacity: 1;\n }\n }"), | ||
| fadeOutLeft: duration => "\n animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n animation-name: fadeOutLeft;\n @keyframes fadeOutLeft {\n 0% {\n transform: translateX(0);\n opacity: 1;\n }\n 100% {\n transform: translateX(").concat(_spacing.default.small, ");\n opacity: 0;\n }\n }"), | ||
| fadeInBottom: (duration, distance) => "\n animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n animation-name: fadeInBottom;\n @keyframes fadeInBottom {\n 0% {\n transform: translateY(").concat(distance || _spacing.default.small, ");\n opacity: 0;\n }\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n }"), | ||
| fadeOutBottom: (duration, distance) => "\n animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n animation-name: fadeOutBottom;\n @keyframes fadeOutBottom {\n 0% {\n transform: translateY(0);\n opacity: 1;\n }\n 100% {\n transform: translateY(").concat(distance || _spacing.default.small, ");\n opacity: 0;\n }\n }"), | ||
| fadeInTop: (duration, distance) => "\n animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n animation-name: fadeInTop;\n @keyframes fadeInTop {\n 0% {\n transform: translateY(-").concat(distance || _spacing.default.small, ");\n opacity: 0;\n }\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n }"), | ||
| fadeOutTop: (duration, distance) => "\n animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n animation-name: fadeOutTop;\n @keyframes fadeOutTop {\n 0% {\n transform: translateY(").concat(distance || _spacing.default.small, ");\n opacity: 1;\n }\n 100% {\n transform: translateY(0);\n opacity: 0;\n }\n }"), | ||
| fadeInScaled: duration => "\n animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n animation-name: fadeInScaled;\n @keyframes fadeInScaled {\n 0% {\n transform: scale(0.5);\n opacity: 0;\n }\n 100% {\n transform: scale(1);\n opacity: 1;\n }\n }"), | ||
| fadeOutScaled: duration => "\n animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n animation-name: fadeOutScaled;\n @keyframes fadeOutScaled {\n 0% {\n transform: scale(1);\n opacity: 1;\n }\n 100% {\n transform: scale(0.5);\n opacity: 0;\n }\n }"), | ||
| fadeOut: duration => "\n animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n animation-name: fadeOut;\n @keyframes fadeOut {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n }"), | ||
| fadeIn: duration => "\n animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n animation-name: fadeIn;\n @keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }"), | ||
| toggledContentWithSwitchAnimation: function (duration) { | ||
| let animationName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "toggledContentWithSwitchAnimation"; | ||
| return ` | ||
| animation-duration: ${duration || DURATION_DEFAULT}; | ||
| animation-name: ${animationName}; | ||
| @keyframes ${animationName} { | ||
| 0% { | ||
| opacity: 0.5; | ||
| } | ||
| 99% { | ||
| opacity: 0.5; | ||
| } | ||
| 100% { | ||
| opacity: 1; | ||
| } | ||
| } | ||
| `; | ||
| return "\n animation-duration: ".concat(duration || DURATION_DEFAULT, ";\n animation-name: ").concat(animationName, ";\n @keyframes ").concat(animationName, " {\n 0% {\n opacity: 0.5;\n }\n 99% {\n opacity: 0.5;\n }\n 100% {\n opacity: 1;\n }\n }\n "); | ||
| } | ||
| }; | ||
| var _default = exports.default = animations; |
@@ -24,6 +24,6 @@ "use strict"; | ||
| const fontSizeRem = parseInt(fontSize, 10) / baseFontSizeUnit; | ||
| const _lineHeight = lineHeight ?? Math.ceil(fontSizeUnit / baseLineHeightUnit) * (baseLineHeightUnit / fontSizeUnit); | ||
| const fontSizeStyling = `font-size: ${fontSize};font-size: ${fontSizeRem}rem;`; | ||
| const chineseStyling = `&:where([lang='zh'], &[lang='zh-Hans'], &[lang='zh-Hant']):not([data-pinyin]) {font-size: calc(${fontSize} * 1.11); font-size: calc(${fontSizeRem}rem * 1.11)}`; | ||
| return `${fontSizeStyling} line-height: ${_lineHeight}; ${chineseStyling}`; | ||
| const _lineHeight = lineHeight !== null && lineHeight !== void 0 ? lineHeight : Math.ceil(fontSizeUnit / baseLineHeightUnit) * (baseLineHeightUnit / fontSizeUnit); | ||
| const fontSizeStyling = "font-size: ".concat(fontSize, ";font-size: ").concat(fontSizeRem, "rem;"); | ||
| const chineseStyling = "&:where([lang='zh'], &[lang='zh-Hans'], &[lang='zh-Hant']):not([data-pinyin]) {font-size: calc(".concat(fontSize, " * 1.11); font-size: calc(").concat(fontSizeRem, "rem * 1.11)}"); | ||
| return "".concat(fontSizeStyling, " line-height: ").concat(_lineHeight, "; ").concat(chineseStyling); | ||
| } | ||
@@ -30,0 +30,0 @@ const fonts = { |
@@ -90,3 +90,3 @@ "use strict"; | ||
| function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); } | ||
| function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } | ||
| function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } |
@@ -21,5 +21,5 @@ "use strict"; | ||
| } = _ref; | ||
| return `${from ? `@media (min-width: ${from})` : ""}${from && until ? " and " : ""}${!from && until ? "@media " : ""}${until ? `(max-width: ${until})` : ""}`; | ||
| return "".concat(from ? "@media (min-width: ".concat(from, ")") : "").concat(from && until ? " and " : "").concat(!from && until ? "@media " : "").concat(until ? "(max-width: ".concat(until, ")") : ""); | ||
| } | ||
| }; | ||
| var _default = exports.default = mq; |
@@ -17,13 +17,13 @@ "use strict"; | ||
| const spacing = { | ||
| xxsmall: `${spacingUnit / 6}px`, | ||
| xsmall: `${spacingUnit / 4}px`, | ||
| small: `${spacingUnit / 2}px`, | ||
| nsmall: `${spacingUnit / 1.5}px`, | ||
| normal: `${spacingUnit}px`, | ||
| medium: `${spacingUnit * 1.25}px`, | ||
| mediumlarge: `${spacingUnit * 1.5}px`, | ||
| large: `${spacingUnit * 2}px`, | ||
| xlarge: `${spacingUnit * 3}px`, | ||
| xxlarge: `${spacingUnit * 4}px` | ||
| xxsmall: "".concat(spacingUnit / 6, "px"), | ||
| xsmall: "".concat(spacingUnit / 4, "px"), | ||
| small: "".concat(spacingUnit / 2, "px"), | ||
| nsmall: "".concat(spacingUnit / 1.5, "px"), | ||
| normal: "".concat(spacingUnit, "px"), | ||
| medium: "".concat(spacingUnit * 1.25, "px"), | ||
| mediumlarge: "".concat(spacingUnit * 1.5, "px"), | ||
| large: "".concat(spacingUnit * 2, "px"), | ||
| xlarge: "".concat(spacingUnit * 3, "px"), | ||
| xxlarge: "".concat(spacingUnit * 4, "px") | ||
| }; | ||
| var _default = exports.default = spacing; |
@@ -19,39 +19,7 @@ "use strict"; | ||
| const utils = { | ||
| restoreOutline: ` | ||
| outline: 1px dotted #212121; | ||
| outline: -webkit-focus-ring-color auto 5px; | ||
| `, | ||
| visuallyHidden: ` | ||
| margin: -1px; | ||
| padding: 0; | ||
| width: 1px; | ||
| height: 1px; | ||
| overflow: hidden; | ||
| clip: rect(0 0 0 0); | ||
| clip: rect(0, 0, 0, 0); | ||
| position: absolute; | ||
| `, | ||
| scrollbar: ` | ||
| ::-webkit-scrollbar { | ||
| width: ${_spacing.default.small}; | ||
| } | ||
| ::-webkit-scrollbar-thumb { | ||
| border: 4px solid transparent; | ||
| border-radius: 14px; | ||
| background-clip: padding-box; | ||
| padding: 0 4px; | ||
| background-color: ${_colors.default.brand.neutral7}; | ||
| } | ||
| `, | ||
| labelHidden: ` | ||
| border: 0; | ||
| clip: rect(0 0 0 0); | ||
| height: 1px; | ||
| margin: -1px; | ||
| overflow: hidden; | ||
| padding: 0; | ||
| position: absolute; | ||
| width: 1px; | ||
| ` | ||
| restoreOutline: "\n outline: 1px dotted #212121;\n outline: -webkit-focus-ring-color auto 5px;\n", | ||
| visuallyHidden: "\n margin: -1px;\n padding: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n clip: rect(0, 0, 0, 0);\n position: absolute;\n", | ||
| scrollbar: "\n ::-webkit-scrollbar {\n width: ".concat(_spacing.default.small, ";\n }\n ::-webkit-scrollbar-thumb {\n border: 4px solid transparent;\n border-radius: 14px;\n background-clip: padding-box;\n padding: 0 4px;\n background-color: ").concat(_colors.default.brand.neutral7, ";\n }\n "), | ||
| labelHidden: "\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n " | ||
| }; | ||
| var _default = exports.default = utils; |
| { | ||
| "name": "@ndla/core", | ||
| "version": "4.5.3", | ||
| "version": "4.5.4", | ||
| "description": "UI component library for NDLA.", | ||
@@ -40,3 +40,3 @@ "license": "GPL-3.0", | ||
| }, | ||
| "gitHead": "0aa4b6c2a8032c22c7b424e69971815328af65cc" | ||
| "gitHead": "f6949c46c9b1b0876c2d5e5d5ec4f1b31db1c28b" | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-1.67%
121768
- Number of package files
- decreased by-2.78%
70
- Lines of code
- decreased by-21.64%
1278
No dependency changes