@orangesk/orange-design-system 1.11.0 → 1.11.2
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/build/app.css +1 -1
- package/build/app.css.map +1 -1
- package/build/app.js +1 -1
- package/build/asset-manifest.json +1 -1
- package/build/components/CarouselPromotions/style.css +1 -1
- package/build/components/CarouselPromotions/style.css.map +1 -1
- package/build/components/style.css +1 -1
- package/build/components/style.css.map +1 -1
- package/build/index.css +1 -1
- package/build/index.css.map +1 -1
- package/build/index.js +1 -1
- package/build/index.js.map +1 -1
- package/build/{precache-manifest.bf99fc5050abfcf4f6af584e5a612315.js → precache-manifest.394b0e413b1e8908b719f6f593e83dc0.js} +4 -4
- package/build/{precache-manifest.bcec161b6e91c0dcdd3c56db0841babe.js → precache-manifest.4308dd9eed646e61b6302a067515a80a.js} +4 -4
- package/build/service-worker.js +1 -1
- package/package.json +1 -1
- package/src/components/CarouselPromotions/styles/mixins.scss +6 -8
|
@@ -355,7 +355,7 @@
|
|
|
355
355
|
"components/static.css.map": "/components/static.css.map",
|
|
356
356
|
"components/static.js.LICENSE.txt": "/components/static.js.LICENSE.txt",
|
|
357
357
|
"components/style.css.map": "/components/style.css.map",
|
|
358
|
-
"precache-manifest.
|
|
358
|
+
"precache-manifest.4308dd9eed646e61b6302a067515a80a.js": "/precache-manifest.4308dd9eed646e61b6302a067515a80a.js",
|
|
359
359
|
"service-worker.js": "/service-worker.js"
|
|
360
360
|
},
|
|
361
361
|
"entrypoints": [
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@keyframes countdown{0%{stroke-dashoffset:31.416}to{stroke-dashoffset:0}}.carousel-promotions{position:relative;margin:0 auto 1.25rem}.carousel-promotions__viewport-wrapper{position:relative}.carousel-promotions__viewport{margin:0 auto;position:relative;overflow-y:hidden;-webkit-overflow-scrolling:touch;-ms-overflow-style:none;transform:translateZ(0);scrollbar-width:none}@media screen and (max-width:767.98px){.carousel-promotions__viewport{padding-bottom:.625rem}}@media screen and (min-width:768px){.carousel-promotions__viewport{margin-bottom:1.25rem}}.carousel-promotions__viewport::-webkit-scrollbar{opacity:0;height:0}@media screen and (max-width:767.98px){.carousel-promotions__viewport::-webkit-scrollbar{opacity:1;height:.625rem;-webkit-appearance:none;background-color:#ddd;border-radius:99px}}@media screen and (max-width:767.98px){.carousel-promotions__viewport::-webkit-scrollbar-thumb{opacity:1;border-radius:99px;background-color:#595959}}.carousel-promotions__viewport.is-draggable{-webkit-user-select:none;user-select:none;cursor:grab}.carousel-promotions__viewport.is-dragging{cursor:grabbing}.carousel-promotions__track{transform:translateZ(0);width:100%;margin:0;padding:0;display:flex;z-index:1}.carousel-promotions__slide{display:flex;
|
|
1
|
+
@keyframes countdown{0%{stroke-dashoffset:31.416}to{stroke-dashoffset:0}}.carousel-promotions{position:relative;margin:0 auto 1.25rem}.carousel-promotions__viewport-wrapper{position:relative}.carousel-promotions__viewport{margin:0 auto;position:relative;overflow-y:hidden;-webkit-overflow-scrolling:touch;-ms-overflow-style:none;transform:translateZ(0);scrollbar-width:none}@media screen and (max-width:767.98px){.carousel-promotions__viewport{padding-bottom:.625rem}}@media screen and (min-width:768px){.carousel-promotions__viewport{margin-bottom:1.25rem}}.carousel-promotions__viewport::-webkit-scrollbar{opacity:0;height:0}@media screen and (max-width:767.98px){.carousel-promotions__viewport::-webkit-scrollbar{opacity:1;height:.625rem;-webkit-appearance:none;background-color:#ddd;border-radius:99px}}@media screen and (max-width:767.98px){.carousel-promotions__viewport::-webkit-scrollbar-thumb{opacity:1;border-radius:99px;background-color:#595959}}.carousel-promotions__viewport.is-draggable{-webkit-user-select:none;user-select:none;cursor:grab}.carousel-promotions__viewport.is-dragging{cursor:grabbing}.carousel-promotions__track{transform:translateZ(0);width:100%;margin:0;padding:0;display:flex;z-index:1}.carousel-promotions__slide{display:flex;max-width:100%;flex:0 0 auto;-webkit-user-select:none;user-select:none;background-color:#fff}.carousel-promotions__slide--black{background-color:#000;color:#fff!important}.carousel-promotions__slide>:last-child{margin-bottom:0}@media screen and (min-width:768px){.carousel-promotions__slide{flex-direction:row-reverse;justify-content:space-between}}.carousel-promotions__slide:is(a){cursor:pointer}.carousel-promotions__slide:is(a),.carousel-promotions__slide:is(a):active,.carousel-promotions__slide:is(a):hover,.carousel-promotions__slide:is(a):visited{color:inherit}.bg-black .carousel-promotions__slide{color:#000!important}.bg-black .carousel-promotions__slide--black{background-color:#000;color:#fff!important}.carousel-promotions__image{width:6.25rem;height:6.25rem;display:flex;flex-shrink:0;margin:.625rem}.carousel-promotions__image img,.carousel-promotions__image picture{margin-bottom:0}.carousel-promotions__image img{-webkit-user-select:none;user-select:none;pointer-events:none;width:100%;height:100%}@media screen and (min-width:768px){.carousel-promotions__image{width:11rem;height:11rem;flex-grow:1;border-radius:0;background-color:unset;justify-content:end;position:relative;margin:0 3.125rem 0 0}.carousel-promotions__image img,.carousel-promotions__image picture{width:100%;max-width:11rem;object-fit:cover}}@media screen and (min-width:992px){.carousel-promotions__image{width:12.5rem;height:12.5rem;margin-right:6.25rem}.carousel-promotions__image img,.carousel-promotions__image picture{max-width:12.5rem}}.carousel-promotions__title{margin-bottom:0;font-size:1rem;line-height:1.125rem;max-width:26.25rem}@media screen and (min-width:768px){.carousel-promotions__title{font-size:1.5rem;line-height:1.625rem;max-width:36.25rem}}@media screen and (min-width:992px){.carousel-promotions__title{font-size:2.125rem;line-height:2.3125rem;max-width:43.75rem}}.carousel-promotions__content{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:.625rem .625rem .625rem 0}.carousel-promotions__content>:last-child{margin-bottom:0}@media screen and (min-width:768px){.carousel-promotions__content{height:100%;max-width:34.0625rem;justify-content:space-between;padding:1.25rem}}.carousel-promotions__pagination{-webkit-user-select:none;user-select:none;display:flex;flex-wrap:wrap;justify-content:center;margin:0 auto;padding:0}.carousel-promotions__pagination-item{background:none;border:0;padding:0;-webkit-user-select:none;user-select:none;display:block;cursor:pointer;border-radius:100%;width:8px;height:8px;margin:8px;background-color:#000}.carousel-promotions__pagination-item:hover{background-color:#000;outline:2px solid #000}.carousel-promotions__pagination-item.is-active:not(:hover){background-color:initial;outline:2px solid #000}.is-autoplay .carousel-promotions__pagination-item.is-active:not(:focus){outline:none}.carousel-promotions__pagination-item:active{background-color:#000}.carousel-promotions__pagination-item:focus:not(:active){background-color:#000;outline-offset:2px;outline-width:3px!important;outline-color:#000!important}.carousel-promotions__pagination-svg{position:relative;display:none;left:-2px;top:-2px;transform:rotate(-90deg) scaleY(-1)}.is-autoplay .is-active>.carousel-promotions__pagination-svg{display:block}.carousel-promotions__pagination-circle{stroke-width:2px;stroke:#000;stroke-dasharray:31.416;stroke-dashoffset:31.416;animation-name:countdown;animation-iteration-count:1;animation-timing-function:linear;animation-direction:reverse}.bg-black .carousel-promotions__pagination-item{background-color:#fff}.bg-black .carousel-promotions__pagination-item:hover{background-color:#fff;outline:2px solid #fff}.bg-black .carousel-promotions__pagination-item.is-active:not(:hover){background-color:initial;outline:2px solid #fff}.is-autoplay .bg-black .carousel-promotions__pagination-item.is-active:not(:focus){outline:none}.bg-black .carousel-promotions__pagination-item:active{background-color:#fff}.bg-black .carousel-promotions__pagination-item:focus:not(:active){background-color:#fff;outline-offset:2px;outline-width:3px!important;outline-color:#fff!important}
|
|
2
2
|
/*# sourceMappingURL=style.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["config.scss","style.scss","mixins.scss","../../../styles/tokens/breakpoint.scss","../../../styles/tokens/color.scss","../../../styles/tools/generate.scss"],"names":[],"mappings":"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","file":"style.css","sourcesContent":["@use 'sass:math';\n@use '../../../styles/tokens/breakpoint';\n@use '../../../styles/tokens/color';\n@use '../../../styles/tokens/space';\n@use '../../../styles/tools/convert';\n\n$space: space.get();\n\n$button-size: $space;\n\n$button: (\n default: (\n color: color.$white,\n background-color: color.$black,\n ),\n hover: (\n background-color: color.$orange-dark,\n ),\n active: (\n background-color: color.$black,\n ),\n);\n\n$button-inverse: (\n default: (\n color: color.$black,\n background-color: color.$white,\n ),\n hover: (\n background-color: color.$orange,\n ),\n active: (\n background-color: color.$white,\n ),\n);\n\n$dot-dimension: 8px;\n\n$dot-layout: (\n width: $dot-dimension,\n height: $dot-dimension,\n margin: 8px,\n);\n\n$outline-width-default: 2px;\n$outline-width-focus: 3px;\n$outline-offset-focus: 2px;\n\n$dot: (\n default: (\n background-color: color.$black,\n ),\n focus: (\n background-color: color.$black,\n outline-offset: $outline-offset-focus,\n outline-width: $outline-width-focus !important,\n outline-color: color.$black !important,\n ),\n hover: (\n background-color: color.$black,\n outline: $outline-width-default solid color.$black,\n ),\n active: (\n background-color: transparent,\n outline: $outline-width-default solid color.$black,\n ),\n);\n\n$dot-inverse: (\n default: (\n background-color: color.$white,\n ),\n focus: (\n background-color: color.$white,\n outline-offset: $outline-offset-focus,\n outline-width: $outline-width-focus !important,\n outline-color: color.$white !important,\n ),\n hover: (\n background-color: color.$white,\n outline: $outline-width-default solid color.$white,\n ),\n active: (\n background-color: transparent,\n outline: $outline-width-default solid color.$white,\n ),\n);\n\n$breakout-buttons-breakpoints: (\n (864px, 991px),\n (1088px, 1239px),\n (1340px, 1379px),\n (1460px)\n);\n\n$viewport-horizontal-spacing: (\n 'default': space.get('medium'),\n);\n\n$animated-dot-radius: 5;\n$pi: math.div(math.round(math.$pi * 10000), 10000);\n$animated-dot-circumference: 2 * $pi * $animated-dot-radius;\n\n@keyframes countdown {\n from {\n // stroke-dashoffset can't be negative number due to Safari issues.\n stroke-dashoffset: $animated-dot-circumference;\n }\n to {\n stroke-dashoffset: 0;\n }\n}\n","@use './mixins';\n\n.carousel-promotions {\n @include mixins.base;\n\n &__viewport-wrapper {\n @include mixins.viewport-wrapper;\n }\n\n &__viewport {\n @include mixins.viewport;\n }\n\n &__track {\n @include mixins.track;\n }\n\n &__slide {\n @include mixins.slide-base;\n }\n\n .bg-black &__slide {\n @include mixins.slide-base-inverse;\n }\n\n &__image {\n @include mixins.slide-image;\n }\n\n &__title {\n @include mixins.slide-title;\n }\n\n &__content {\n @include mixins.slide-content;\n }\n\n &__pagination {\n @include mixins.pagination;\n }\n\n &__pagination-item {\n @include mixins.pagination-item;\n }\n\n &__pagination-svg {\n @include mixins.pagination-svg;\n }\n\n &__pagination-circle {\n @include mixins.pagination-circle;\n }\n\n .bg-black &__pagination-item {\n @include mixins.pagination-item-inverse;\n }\n}\n","@use 'sass:map' as sass-map;\n@use 'sass:math';\n@use '../../../styles/tokens/base';\n@use '../../../styles/tokens/color';\n@use '../../../styles/tokens/space';\n@use '../../../styles/tools/convert';\n@use '../../../styles/tools/generate';\n@use '../../../styles/tools/map';\n@use '../../../styles/tokens/breakpoint';\n@use '../../Button/styles/config' as button-config;\n@use '../../Button/styles/mixins' as button-mixins;\n@use '../../Grid/styles/mixins' as grid-mixins;\n@use '../../Typography/styles/config' as typography-config;\n@use './config';\n\n/* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */\n\n@mixin base {\n margin: 0 auto;\n position: relative;\n margin-bottom: config.$space;\n}\n\n@mixin viewport-wrapper {\n // wraps viewport and arrows to center them vertically\n position: relative;\n}\n\n@mixin viewport {\n margin: 0 auto;\n position: relative;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n transform: translateZ(0);\n scrollbar-width: none; // hides scrollbar on FF\n\n @include breakpoint.get('sm', 'down') {\n padding-bottom: math.div(config.$space, 2);\n }\n\n @include breakpoint.get('md') {\n margin-bottom: config.$space;\n }\n\n &::-webkit-scrollbar {\n opacity: 0;\n height: 0;\n\n @include breakpoint.get('sm', 'down') {\n opacity: 1;\n height: space.get('small');\n -webkit-appearance: none;\n background-color: color.$gray-400;\n border-radius: 99px;\n }\n }\n\n &::-webkit-scrollbar-thumb {\n @include breakpoint.get('sm', 'down') {\n opacity: 1;\n border-radius: 99px;\n background-color: color.$gray-800;\n }\n }\n\n &.is-draggable {\n user-select: none;\n cursor: -webkit-grab;\n cursor: grab;\n }\n\n &.is-dragging {\n cursor: -webkit-grabbing;\n cursor: grabbing;\n }\n}\n\n@mixin track {\n transform: translateZ(0);\n width: 100%;\n margin: 0;\n padding: 0;\n display: flex;\n z-index: 1;\n}\n\n@function get-breakout-media-query($min, $max) {\n @return if(\n $max,\n '(min-width: #{$min}) and (max-width: #{$max})',\n '(min-width: #{$min})'\n );\n}\n\n@mixin slide-base {\n display: flex;\n gap: space.get('small');\n max-width: 100%;\n flex: 0 0 auto;\n padding: space.get('small');\n user-select: none;\n background-color: color.$white;\n\n &--black {\n background-color: color.$black;\n color: color.$white !important;\n }\n\n > *:last-child {\n margin-bottom: 0;\n }\n\n @include breakpoint.get('md') {\n padding: space.get('medium') convert.to-rem(50px) space.get('medium')\n space.get('medium');\n flex-direction: row-reverse;\n justify-content: space-between;\n }\n\n @include breakpoint.get('lg') {\n padding-right: convert.to-rem(100px);\n }\n\n &:is(a) {\n cursor: pointer;\n &,\n &:visited,\n &:hover,\n &:active {\n color: inherit;\n }\n }\n}\n\n@mixin slide-base-inverse {\n color: color.$black !important;\n\n &--black {\n background-color: color.$black;\n color: color.$white !important;\n }\n}\n\n@mixin slide-image {\n width: convert.to-rem(100px);\n height: convert.to-rem(100px);\n display: flex;\n flex-shrink: 0;\n\n picture,\n img {\n margin-bottom: 0;\n }\n\n img {\n user-select: none;\n pointer-events: none;\n width: 100%;\n height: 100%;\n }\n\n @include breakpoint.get('md') {\n width: convert.to-rem(176px);\n height: convert.to-rem(176px);\n flex-grow: 1;\n border-radius: 0;\n background-color: unset;\n justify-content: end;\n position: relative;\n\n img,\n picture {\n width: 100%;\n max-width: convert.to-rem(176px);\n object-fit: cover;\n }\n }\n\n @include breakpoint.get('lg') {\n width: convert.to-rem(200px);\n height: convert.to-rem(200px);\n\n img,\n picture {\n max-width: convert.to-rem(200px);\n }\n }\n}\n\n@mixin slide-title {\n margin-bottom: 0;\n @each $property,\n $value in map.map-deep-get(typography-config.$headings, 5, 'default')\n {\n #{$property}: $value;\n }\n @include breakpoint.get('md') {\n @each $property,\n $value in map.map-deep-get(typography-config.$headings, 3, md)\n {\n #{$property}: $value;\n }\n }\n @include breakpoint.get('lg') {\n @each $property,\n $value in map.map-deep-get(typography-config.$headings, 1, md)\n {\n #{$property}: $value;\n }\n }\n}\n\n@mixin slide-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n\n > *:last-child {\n margin-bottom: 0;\n }\n\n @include breakpoint.get('md') {\n height: 100%;\n max-width: convert.to-rem(545px);\n justify-content: space-between;\n }\n}\n\n@mixin pagination {\n user-select: none;\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n margin: 0 auto;\n padding: 0;\n}\n\n@mixin pagination-item {\n background: none;\n border: 0;\n padding: 0;\n user-select: none;\n display: block;\n cursor: pointer;\n border-radius: 100%;\n\n @include generate.css-map(config.$dot-layout);\n\n @include generate.css-map(sass-map.get(config.$dot, 'default'));\n\n &:hover {\n @include generate.css-map(sass-map.get(config.$dot, 'hover'));\n }\n\n &.is-active:not(:hover) {\n @include generate.css-map(sass-map.get(config.$dot, 'active'));\n }\n\n .is-autoplay &.is-active:not(:focus) {\n outline: none;\n }\n\n &:active {\n @include generate.css-map(sass-map.get(config.$dot, 'default'));\n }\n\n &:focus:not(:active) {\n @include generate.css-map(sass-map.get(config.$dot, 'focus'));\n }\n}\n\n@mixin pagination-item-inverse {\n @include generate.css-map(sass-map.get(config.$dot-inverse, 'default'));\n\n &:hover {\n @include generate.css-map(sass-map.get(config.$dot-inverse, 'hover'));\n }\n\n &.is-active:not(:hover) {\n @include generate.css-map(sass-map.get(config.$dot-inverse, 'active'));\n }\n\n .is-autoplay &.is-active:not(:focus) {\n outline: none;\n }\n\n &:active {\n @include generate.css-map(sass-map.get(config.$dot-inverse, 'default'));\n }\n\n &:focus:not(:active) {\n @include generate.css-map(sass-map.get(config.$dot-inverse, 'focus'));\n }\n}\n\n@mixin pagination-svg() {\n position: relative;\n display: none;\n left: -#{config.$outline-width-default};\n top: -#{config.$outline-width-default};\n // This transform is a workaround due to Safari not supporting negative values for stroke-dashoffset.\n // We're rotating the SVG so that the line starts to animate from the top (12o'clock).\n // The vertical flip is to make the line animate clockwise.\n transform: rotate(-90deg) scale(1, -1);\n\n .is-autoplay .is-active > & {\n display: block;\n }\n}\n\n@mixin pagination-circle() {\n stroke-width: config.$outline-width-default;\n stroke: color.$black;\n stroke-dasharray: config.$animated-dot-circumference;\n stroke-dashoffset: config.$animated-dot-circumference;\n animation-name: countdown;\n animation-iteration-count: 1;\n animation-timing-function: linear;\n animation-direction: reverse;\n}\n","@use \"sass:list\";\n@use \"sass:meta\";\n@use 'sass:map' as sassmap;\n@use '../tools/map';\n\n$map: (\n xs: 0,\n sm: 480px,\n md: 768px,\n lg: 992px,\n xl: 1240px,\n xxl: 1380px,\n);\n\n@mixin get( $breakpoint, $param: false) {\n @if (not sassmap.has-key($map, $breakpoint) and $breakpoint != 'default') {\n @warn 'Breakpoint \"#{$breakpoint}\" is not defined.';\n\n @debug 'Available breakpoints:'; // stylelint-disable-line at-rule-disallowed-list\n @debug $map; // stylelint-disable-line at-rule-disallowed-list\n }\n\n @if (\n ($breakpoint == list.nth(sassmap.keys($map), 1) and not $param) or\n ( not $breakpoint ) or\n ( $breakpoint == 'default' )\n ) {\n @content;\n } @else if not $param {\n // no param, just a standard mobile first media query\n @if sassmap.has-key( $map, $breakpoint ) {\n // breakpoint is in breakpoint map, let's use stored value\n @media screen and (min-width: sassmap.get($map, $breakpoint)) { @content; };\n } @else {\n // breakpoint is not in breakpoint map, let's use custom value\n @media screen and (min-width: $breakpoint) { @content; };\n }\n } @else if (\n $param == 'down' and\n map.next($map, $breakpoint)\n ) {\n @media screen and (max-width: map.next($map, $breakpoint) - 0.02px) {\n @content;\n }\n } @else if (\n $param == 'down' and\n not sassmap.has-key($map, $breakpoint)\n ) {\n @media screen and (max-width: $breakpoint) { @content; };\n } @else if (\n $param == 'only' and\n map.next($map, $breakpoint)\n ) {\n @media screen and\n (min-width: sassmap.get($map, $breakpoint)) and\n (max-width: map.next($map, $breakpoint) - 0.02px) { @content; };\n } @else if (\n sassmap.has-key( $map, $param) and\n sassmap.has-key( $map, $breakpoint)\n ) {\n @media screen and\n (min-width: sassmap.get($map, $breakpoint)) and\n (max-width: sassmap.get($map, $param) - 0.02px) { @content; };\n } @else if (\n $param == 'downfrom' and\n sassmap.get($map, $breakpoint) > 0 and\n $breakpoint != 'xs'\n ) {\n @media screen and (max-width: sassmap.get($map, $breakpoint) - 0.02px) {\n @content;\n } // -1\n } @else if (meta.type-of($param) == 'number') {\n @if sassmap.has-key($map, $breakpoint) {\n // breakpoint is in breakpoint map\n @media screen and\n (min-width: sassmap.get($map, $breakpoint)) and\n (max-width: $param) { @content; };\n } @else {\n // breakpoint is not in breakpoint map, let's use custom value\n @media screen and (min-width: $breakpoint) and (max-width: $param) { @content; }\n }\n } @else if (\n not ($breakpoint == list.nth(sassmap.keys($map), -1) and $param == 'down') and\n not ($breakpoint == list.nth(sassmap.keys($map), -1) and $param == 'only') and\n not ($breakpoint == list.nth(sassmap.keys($map), 1) and $param == 'downfrom')\n ) {\n // do nothing on known edge cases. we just dont generate any code.\n @warn 'Breakpoint is not configured properly #{$breakpoint}, #{$param}';\n }\n}\n\n@mixin each() {\n @each $breakpoint, $size in $map {\n @include get($breakpoint) {\n @content($breakpoint);\n }\n }\n}\n","// core (brand)\n$orange: #ff7900;\n$orange-dark: #f16e00;\n$black: #000;\n$white: #fff;\n\n// supporting color\n$blue: #4bb4e6;\n$green: #50be87;\n$pink: #ffb4e6;\n$violet: #a885d8;\n$yellow: #ffd200;\n$yellow-lighter: #fff6b6;\n$red: #ff4d4d;\n\n// functional\n$gray-300: #eee;\n$gray-400: #ddd;\n$gray-500: #ccc;\n$gray-600: #999;\n$gray-700: #666;\n$gray-800: #595959;\n$gray-900: #333;\n$success: #32c832;\n$danger: #cd3c14;\n$info: #527edb;\n$warning: #fc0;\n","@use '../tokens/breakpoint';\n@use './map' as *;\n\n/// Get css propeties from map\n///\n/// @param {Map} $map - Map\n/// @param {Arglist} $keys - Keys to fetch\n///\n/// @example\n/// $map: (\n/// background-color: #fff,\n/// color: #000\n/// );\n///\n/// .example {\n/// @include css-map($map);\n/// }\n///\n/// Output:\n/// .example {\n/// background-color: #fff;\n/// color: #000;\n/// }\n@mixin css-map($_map, $keys...) {\n $map: if($keys, map-deep-get($_map, $keys...), $_map);\n\n @each $prop, $value in $map {\n #{$prop}: #{$value};\n }\n}\n\n/// Get responsive css propeties from map\n///\n/// @param {Map} $map - Map\n/// @param {Arglist} $keys - Keys to fetch\n///\n/// @example\n/// $map: (\n/// default: (\n/// color: red,\n/// ),\n/// xl: (\n/// color: blue,\n/// ),\n/// );\n///\n/// .example {\n/// @include responsive-css-map($map);\n/// }\n///\n/// Output:\n/// .example {\n/// color: red;\n/// @media only screen and (min-width: 1240px) {\n/// color: blue;\n/// }\n/// }\n@mixin responsive-css-map($map) {\n @each $breakpoint, $props in $map {\n @include breakpoint.get($breakpoint) {\n @include css-map($props);\n }\n }\n}\n\n/// Get variants of elemnt from map\n///\n/// @param {Map} $map - map\n/// @param {Map} $className - class name of element\n/// @param {Map} $classSuffix - suffix for class name of element\n@mixin variants($map, $className: '', $classSuffix: '') {\n @each $variant, $props in $map {\n #{if(&, \"&\", \"\")}#{$className + variant-name($variant) + $classSuffix} {\n @include css-map($props);\n }\n }\n}\n\n/// Get responsive variants of elemnt from map\n///\n/// @param {Map} $map - map\n/// @param {Map} $className - class name of element\n/// @param {Map} $classSuffix - suffix for class name of element\n@mixin responsive-variants($map, $className: '', $classSuffix: '') {\n @each $breakpoint, $props in $map {\n @include breakpoint.get($breakpoint) {\n @include variants($props, $className, $classSuffix);\n }\n }\n}\n\n/// Get prefixed variant name\n/// @param {String} $name - Variant name\n/// @return {String} - Return a prefixed variant name or empty string, for default variants\n/// @example scss\n/// variant-name('primary')\n/// // -primary\n/// variant-name('default')\n///\n@function variant-name($name, $prefix: '--', $suffix: '') {\n @if not $name or $name == default or $name == xs {\n @return '';\n }\n\n @return #{$prefix + $name + $suffix};\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["config.scss","style.scss","mixins.scss","../../../styles/tokens/breakpoint.scss","../../../styles/tokens/color.scss","../../../styles/tools/generate.scss"],"names":[],"mappings":"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","file":"style.css","sourcesContent":["@use 'sass:math';\n@use '../../../styles/tokens/breakpoint';\n@use '../../../styles/tokens/color';\n@use '../../../styles/tokens/space';\n@use '../../../styles/tools/convert';\n\n$space: space.get();\n\n$button-size: $space;\n\n$button: (\n default: (\n color: color.$white,\n background-color: color.$black,\n ),\n hover: (\n background-color: color.$orange-dark,\n ),\n active: (\n background-color: color.$black,\n ),\n);\n\n$button-inverse: (\n default: (\n color: color.$black,\n background-color: color.$white,\n ),\n hover: (\n background-color: color.$orange,\n ),\n active: (\n background-color: color.$white,\n ),\n);\n\n$dot-dimension: 8px;\n\n$dot-layout: (\n width: $dot-dimension,\n height: $dot-dimension,\n margin: 8px,\n);\n\n$outline-width-default: 2px;\n$outline-width-focus: 3px;\n$outline-offset-focus: 2px;\n\n$dot: (\n default: (\n background-color: color.$black,\n ),\n focus: (\n background-color: color.$black,\n outline-offset: $outline-offset-focus,\n outline-width: $outline-width-focus !important,\n outline-color: color.$black !important,\n ),\n hover: (\n background-color: color.$black,\n outline: $outline-width-default solid color.$black,\n ),\n active: (\n background-color: transparent,\n outline: $outline-width-default solid color.$black,\n ),\n);\n\n$dot-inverse: (\n default: (\n background-color: color.$white,\n ),\n focus: (\n background-color: color.$white,\n outline-offset: $outline-offset-focus,\n outline-width: $outline-width-focus !important,\n outline-color: color.$white !important,\n ),\n hover: (\n background-color: color.$white,\n outline: $outline-width-default solid color.$white,\n ),\n active: (\n background-color: transparent,\n outline: $outline-width-default solid color.$white,\n ),\n);\n\n$breakout-buttons-breakpoints: (\n (864px, 991px),\n (1088px, 1239px),\n (1340px, 1379px),\n (1460px)\n);\n\n$viewport-horizontal-spacing: (\n 'default': space.get('medium'),\n);\n\n$animated-dot-radius: 5;\n$pi: math.div(math.round(math.$pi * 10000), 10000);\n$animated-dot-circumference: 2 * $pi * $animated-dot-radius;\n\n@keyframes countdown {\n from {\n // stroke-dashoffset can't be negative number due to Safari issues.\n stroke-dashoffset: $animated-dot-circumference;\n }\n to {\n stroke-dashoffset: 0;\n }\n}\n","@use './mixins';\n\n.carousel-promotions {\n @include mixins.base;\n\n &__viewport-wrapper {\n @include mixins.viewport-wrapper;\n }\n\n &__viewport {\n @include mixins.viewport;\n }\n\n &__track {\n @include mixins.track;\n }\n\n &__slide {\n @include mixins.slide-base;\n }\n\n .bg-black &__slide {\n @include mixins.slide-base-inverse;\n }\n\n &__image {\n @include mixins.slide-image;\n }\n\n &__title {\n @include mixins.slide-title;\n }\n\n &__content {\n @include mixins.slide-content;\n }\n\n &__pagination {\n @include mixins.pagination;\n }\n\n &__pagination-item {\n @include mixins.pagination-item;\n }\n\n &__pagination-svg {\n @include mixins.pagination-svg;\n }\n\n &__pagination-circle {\n @include mixins.pagination-circle;\n }\n\n .bg-black &__pagination-item {\n @include mixins.pagination-item-inverse;\n }\n}\n","@use 'sass:map' as sass-map;\n@use 'sass:math';\n@use '../../../styles/tokens/base';\n@use '../../../styles/tokens/color';\n@use '../../../styles/tokens/space';\n@use '../../../styles/tools/convert';\n@use '../../../styles/tools/generate';\n@use '../../../styles/tools/map';\n@use '../../../styles/tokens/breakpoint';\n@use '../../Button/styles/config' as button-config;\n@use '../../Button/styles/mixins' as button-mixins;\n@use '../../Grid/styles/mixins' as grid-mixins;\n@use '../../Typography/styles/config' as typography-config;\n@use './config';\n\n/* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */\n\n@mixin base {\n margin: 0 auto;\n position: relative;\n margin-bottom: config.$space;\n}\n\n@mixin viewport-wrapper {\n // wraps viewport and arrows to center them vertically\n position: relative;\n}\n\n@mixin viewport {\n margin: 0 auto;\n position: relative;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n transform: translateZ(0);\n scrollbar-width: none; // hides scrollbar on FF\n\n @include breakpoint.get('sm', 'down') {\n padding-bottom: math.div(config.$space, 2);\n }\n\n @include breakpoint.get('md') {\n margin-bottom: config.$space;\n }\n\n &::-webkit-scrollbar {\n opacity: 0;\n height: 0;\n\n @include breakpoint.get('sm', 'down') {\n opacity: 1;\n height: space.get('small');\n -webkit-appearance: none;\n background-color: color.$gray-400;\n border-radius: 99px;\n }\n }\n\n &::-webkit-scrollbar-thumb {\n @include breakpoint.get('sm', 'down') {\n opacity: 1;\n border-radius: 99px;\n background-color: color.$gray-800;\n }\n }\n\n &.is-draggable {\n user-select: none;\n cursor: -webkit-grab;\n cursor: grab;\n }\n\n &.is-dragging {\n cursor: -webkit-grabbing;\n cursor: grabbing;\n }\n}\n\n@mixin track {\n transform: translateZ(0);\n width: 100%;\n margin: 0;\n padding: 0;\n display: flex;\n z-index: 1;\n}\n\n@function get-breakout-media-query($min, $max) {\n @return if(\n $max,\n '(min-width: #{$min}) and (max-width: #{$max})',\n '(min-width: #{$min})'\n );\n}\n\n@mixin slide-base {\n display: flex;\n max-width: 100%;\n flex: 0 0 auto;\n user-select: none;\n background-color: color.$white;\n\n &--black {\n background-color: color.$black;\n color: color.$white !important;\n }\n\n > *:last-child {\n margin-bottom: 0;\n }\n\n @include breakpoint.get('md') {\n flex-direction: row-reverse;\n justify-content: space-between;\n }\n\n &:is(a) {\n cursor: pointer;\n &,\n &:visited,\n &:hover,\n &:active {\n color: inherit;\n }\n }\n}\n\n@mixin slide-base-inverse {\n color: color.$black !important;\n\n &--black {\n background-color: color.$black;\n color: color.$white !important;\n }\n}\n\n@mixin slide-image {\n width: convert.to-rem(100px);\n height: convert.to-rem(100px);\n display: flex;\n flex-shrink: 0;\n margin: space.get('small');\n\n picture,\n img {\n margin-bottom: 0;\n }\n\n img {\n user-select: none;\n pointer-events: none;\n width: 100%;\n height: 100%;\n }\n\n @include breakpoint.get('md') {\n width: convert.to-rem(176px);\n height: convert.to-rem(176px);\n flex-grow: 1;\n border-radius: 0;\n background-color: unset;\n justify-content: end;\n position: relative;\n margin: 0 convert.to-rem(50px) 0 0;\n\n img,\n picture {\n width: 100%;\n max-width: convert.to-rem(176px);\n object-fit: cover;\n }\n }\n\n @include breakpoint.get('lg') {\n width: convert.to-rem(200px);\n height: convert.to-rem(200px);\n margin-right: convert.to-rem(100px);\n\n img,\n picture {\n max-width: convert.to-rem(200px);\n }\n }\n}\n\n@mixin slide-title {\n margin-bottom: 0;\n @each $property,\n $value in map.map-deep-get(typography-config.$headings, 5, 'default')\n {\n #{$property}: $value;\n }\n @include breakpoint.get('md') {\n @each $property,\n $value in map.map-deep-get(typography-config.$headings, 3, md)\n {\n #{$property}: $value;\n }\n }\n @include breakpoint.get('lg') {\n @each $property,\n $value in map.map-deep-get(typography-config.$headings, 1, md)\n {\n #{$property}: $value;\n }\n }\n}\n\n@mixin slide-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n padding: space.get('small') space.get('small') space.get('small') 0;\n\n > *:last-child {\n margin-bottom: 0;\n }\n\n @include breakpoint.get('md') {\n height: 100%;\n max-width: convert.to-rem(545px);\n justify-content: space-between;\n padding: space.get('medium');\n }\n}\n\n@mixin pagination {\n user-select: none;\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n margin: 0 auto;\n padding: 0;\n}\n\n@mixin pagination-item {\n background: none;\n border: 0;\n padding: 0;\n user-select: none;\n display: block;\n cursor: pointer;\n border-radius: 100%;\n\n @include generate.css-map(config.$dot-layout);\n\n @include generate.css-map(sass-map.get(config.$dot, 'default'));\n\n &:hover {\n @include generate.css-map(sass-map.get(config.$dot, 'hover'));\n }\n\n &.is-active:not(:hover) {\n @include generate.css-map(sass-map.get(config.$dot, 'active'));\n }\n\n .is-autoplay &.is-active:not(:focus) {\n outline: none;\n }\n\n &:active {\n @include generate.css-map(sass-map.get(config.$dot, 'default'));\n }\n\n &:focus:not(:active) {\n @include generate.css-map(sass-map.get(config.$dot, 'focus'));\n }\n}\n\n@mixin pagination-item-inverse {\n @include generate.css-map(sass-map.get(config.$dot-inverse, 'default'));\n\n &:hover {\n @include generate.css-map(sass-map.get(config.$dot-inverse, 'hover'));\n }\n\n &.is-active:not(:hover) {\n @include generate.css-map(sass-map.get(config.$dot-inverse, 'active'));\n }\n\n .is-autoplay &.is-active:not(:focus) {\n outline: none;\n }\n\n &:active {\n @include generate.css-map(sass-map.get(config.$dot-inverse, 'default'));\n }\n\n &:focus:not(:active) {\n @include generate.css-map(sass-map.get(config.$dot-inverse, 'focus'));\n }\n}\n\n@mixin pagination-svg() {\n position: relative;\n display: none;\n left: -#{config.$outline-width-default};\n top: -#{config.$outline-width-default};\n // This transform is a workaround due to Safari not supporting negative values for stroke-dashoffset.\n // We're rotating the SVG so that the line starts to animate from the top (12o'clock).\n // The vertical flip is to make the line animate clockwise.\n transform: rotate(-90deg) scale(1, -1);\n\n .is-autoplay .is-active > & {\n display: block;\n }\n}\n\n@mixin pagination-circle() {\n stroke-width: config.$outline-width-default;\n stroke: color.$black;\n stroke-dasharray: config.$animated-dot-circumference;\n stroke-dashoffset: config.$animated-dot-circumference;\n animation-name: countdown;\n animation-iteration-count: 1;\n animation-timing-function: linear;\n animation-direction: reverse;\n}\n","@use \"sass:list\";\n@use \"sass:meta\";\n@use 'sass:map' as sassmap;\n@use '../tools/map';\n\n$map: (\n xs: 0,\n sm: 480px,\n md: 768px,\n lg: 992px,\n xl: 1240px,\n xxl: 1380px,\n);\n\n@mixin get( $breakpoint, $param: false) {\n @if (not sassmap.has-key($map, $breakpoint) and $breakpoint != 'default') {\n @warn 'Breakpoint \"#{$breakpoint}\" is not defined.';\n\n @debug 'Available breakpoints:'; // stylelint-disable-line at-rule-disallowed-list\n @debug $map; // stylelint-disable-line at-rule-disallowed-list\n }\n\n @if (\n ($breakpoint == list.nth(sassmap.keys($map), 1) and not $param) or\n ( not $breakpoint ) or\n ( $breakpoint == 'default' )\n ) {\n @content;\n } @else if not $param {\n // no param, just a standard mobile first media query\n @if sassmap.has-key( $map, $breakpoint ) {\n // breakpoint is in breakpoint map, let's use stored value\n @media screen and (min-width: sassmap.get($map, $breakpoint)) { @content; };\n } @else {\n // breakpoint is not in breakpoint map, let's use custom value\n @media screen and (min-width: $breakpoint) { @content; };\n }\n } @else if (\n $param == 'down' and\n map.next($map, $breakpoint)\n ) {\n @media screen and (max-width: map.next($map, $breakpoint) - 0.02px) {\n @content;\n }\n } @else if (\n $param == 'down' and\n not sassmap.has-key($map, $breakpoint)\n ) {\n @media screen and (max-width: $breakpoint) { @content; };\n } @else if (\n $param == 'only' and\n map.next($map, $breakpoint)\n ) {\n @media screen and\n (min-width: sassmap.get($map, $breakpoint)) and\n (max-width: map.next($map, $breakpoint) - 0.02px) { @content; };\n } @else if (\n sassmap.has-key( $map, $param) and\n sassmap.has-key( $map, $breakpoint)\n ) {\n @media screen and\n (min-width: sassmap.get($map, $breakpoint)) and\n (max-width: sassmap.get($map, $param) - 0.02px) { @content; };\n } @else if (\n $param == 'downfrom' and\n sassmap.get($map, $breakpoint) > 0 and\n $breakpoint != 'xs'\n ) {\n @media screen and (max-width: sassmap.get($map, $breakpoint) - 0.02px) {\n @content;\n } // -1\n } @else if (meta.type-of($param) == 'number') {\n @if sassmap.has-key($map, $breakpoint) {\n // breakpoint is in breakpoint map\n @media screen and\n (min-width: sassmap.get($map, $breakpoint)) and\n (max-width: $param) { @content; };\n } @else {\n // breakpoint is not in breakpoint map, let's use custom value\n @media screen and (min-width: $breakpoint) and (max-width: $param) { @content; }\n }\n } @else if (\n not ($breakpoint == list.nth(sassmap.keys($map), -1) and $param == 'down') and\n not ($breakpoint == list.nth(sassmap.keys($map), -1) and $param == 'only') and\n not ($breakpoint == list.nth(sassmap.keys($map), 1) and $param == 'downfrom')\n ) {\n // do nothing on known edge cases. we just dont generate any code.\n @warn 'Breakpoint is not configured properly #{$breakpoint}, #{$param}';\n }\n}\n\n@mixin each() {\n @each $breakpoint, $size in $map {\n @include get($breakpoint) {\n @content($breakpoint);\n }\n }\n}\n","// core (brand)\n$orange: #ff7900;\n$orange-dark: #f16e00;\n$black: #000;\n$white: #fff;\n\n// supporting color\n$blue: #4bb4e6;\n$green: #50be87;\n$pink: #ffb4e6;\n$violet: #a885d8;\n$yellow: #ffd200;\n$yellow-lighter: #fff6b6;\n$red: #ff4d4d;\n\n// functional\n$gray-300: #eee;\n$gray-400: #ddd;\n$gray-500: #ccc;\n$gray-600: #999;\n$gray-700: #666;\n$gray-800: #595959;\n$gray-900: #333;\n$success: #32c832;\n$danger: #cd3c14;\n$info: #527edb;\n$warning: #fc0;\n","@use '../tokens/breakpoint';\n@use './map' as *;\n\n/// Get css propeties from map\n///\n/// @param {Map} $map - Map\n/// @param {Arglist} $keys - Keys to fetch\n///\n/// @example\n/// $map: (\n/// background-color: #fff,\n/// color: #000\n/// );\n///\n/// .example {\n/// @include css-map($map);\n/// }\n///\n/// Output:\n/// .example {\n/// background-color: #fff;\n/// color: #000;\n/// }\n@mixin css-map($_map, $keys...) {\n $map: if($keys, map-deep-get($_map, $keys...), $_map);\n\n @each $prop, $value in $map {\n #{$prop}: #{$value};\n }\n}\n\n/// Get responsive css propeties from map\n///\n/// @param {Map} $map - Map\n/// @param {Arglist} $keys - Keys to fetch\n///\n/// @example\n/// $map: (\n/// default: (\n/// color: red,\n/// ),\n/// xl: (\n/// color: blue,\n/// ),\n/// );\n///\n/// .example {\n/// @include responsive-css-map($map);\n/// }\n///\n/// Output:\n/// .example {\n/// color: red;\n/// @media only screen and (min-width: 1240px) {\n/// color: blue;\n/// }\n/// }\n@mixin responsive-css-map($map) {\n @each $breakpoint, $props in $map {\n @include breakpoint.get($breakpoint) {\n @include css-map($props);\n }\n }\n}\n\n/// Get variants of elemnt from map\n///\n/// @param {Map} $map - map\n/// @param {Map} $className - class name of element\n/// @param {Map} $classSuffix - suffix for class name of element\n@mixin variants($map, $className: '', $classSuffix: '') {\n @each $variant, $props in $map {\n #{if(&, \"&\", \"\")}#{$className + variant-name($variant) + $classSuffix} {\n @include css-map($props);\n }\n }\n}\n\n/// Get responsive variants of elemnt from map\n///\n/// @param {Map} $map - map\n/// @param {Map} $className - class name of element\n/// @param {Map} $classSuffix - suffix for class name of element\n@mixin responsive-variants($map, $className: '', $classSuffix: '') {\n @each $breakpoint, $props in $map {\n @include breakpoint.get($breakpoint) {\n @include variants($props, $className, $classSuffix);\n }\n }\n}\n\n/// Get prefixed variant name\n/// @param {String} $name - Variant name\n/// @return {String} - Return a prefixed variant name or empty string, for default variants\n/// @example scss\n/// variant-name('primary')\n/// // -primary\n/// variant-name('default')\n///\n@function variant-name($name, $prefix: '--', $suffix: '') {\n @if not $name or $name == default or $name == xs {\n @return '';\n }\n\n @return #{$prefix + $name + $suffix};\n}\n"]}
|