{"version":3,"sources":["webpack:///./src/components/OfferTeaser.vue?31ef","webpack:///src/components/OfferTeaser.vue","webpack:///./src/components/OfferTeaser.vue?270a","webpack:///./src/components/OfferTeaser.vue?c4ef","webpack:///./src/components/ThemecardTeaser.vue?4e6c","webpack:///src/components/ThemecardTeaser.vue","webpack:///./src/components/ThemecardTeaser.vue?2904","webpack:///./src/components/ThemecardTeaser.vue?44e9","webpack:///./src/components/OffercardTeaser.vue?53b9","webpack:///src/components/OffercardTeaser.vue","webpack:///./src/components/OffercardTeaser.vue?57b0","webpack:///./src/components/OffercardTeaser.vue?cae0","webpack:///./src/components/OffercardTeaser.vue?79ae","webpack:///./src/components/ThemecardTeaser.vue?33cd","webpack:///./src/components/OfferTeaser.vue?7da8"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","style","imgSrc","on","onClick","_v","_s","imgAlt","attrs","_t","breakpoint","BREAKPOINTS","md","settings","slidesToShow","slidesToScroll","sm","adaptiveHeight","$slots","_e","ref","href","staticRenderFns","name","props","type","String","required","default","data","methods","$refs","link","dispatchEvent","MouseEvent","component","imgNone","Boolean"],"mappings":"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","file":"js/component-themecards.305018cf.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"offer-teaser\"},[_c('div',{staticClass:\"offer-img ratio ratio-1x1\"},[(_vm.imgSrc)?_c('div',{style:((\"background-image: url(\" + _vm.imgSrc + \");\")),on:{\"click\":_vm.onClick}},[_c('span',{staticClass:\"sr-only\"},[_vm._v(_vm._s(_vm.imgAlt))])]):_c('c-placeholder-image',{attrs:{\"size\":\"75\"}})],1),_c('div',{staticClass:\"offer-content\"},[_c('div',{staticClass:\"offer-header\"},[_vm._t(\"header\")],2),_c('div',{staticClass:\"offer-body\"},[_c('c-carousel',{staticClass:\"offer-products\",attrs:{\"autoplay\":false,\"adaptiveHeight\":false,\"slidesToShow\":4,\"slidesToScroll\":4,\"responsive\":[\n          {\n            breakpoint: _vm.BREAKPOINTS.md,\n            settings: {\n              slidesToShow: 3,\n              slidesToScroll: 3\n            }\n          },\n          {\n            breakpoint: _vm.BREAKPOINTS.sm,\n            settings: {\n              adaptiveHeight: true,\n              slidesToShow: 2,\n              slidesToScroll: 2\n            }\n          }\n        ]}},[_vm._t(\"default\")],2),(_vm.$slots.productcount)?_c('div',{staticClass:\"offer-product-count\"},[_c('small',[_vm._t(\"productcount\")],2)]):_vm._e()],1),_c('div',{staticClass:\"offer-footer\"},[_c('a',{ref:\"link\",staticClass:\"offer-actionbutton btn btn-document btn-sm\",attrs:{\"href\":_vm.href}},[_vm._t(\"actionbutton\")],2)])])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"offer-teaser\">\r\n    <div class=\"offer-img ratio ratio-1x1\">\r\n      <div v-if=\"imgSrc\" :style=\"`background-image: url(${imgSrc});`\" @click=\"onClick\">\r\n        <span class=\"sr-only\">{{ imgAlt }}</span>\r\n      </div>\r\n\r\n      <c-placeholder-image v-else size=\"75\"/>\r\n    </div>\r\n\r\n    <div class=\"offer-content\">\r\n      <div class=\"offer-header\">\r\n        <slot name=\"header\"/>\r\n      </div>\r\n\r\n      <div class=\"offer-body\">\r\n        <c-carousel\r\n          class=\"offer-products\"\r\n          :autoplay=\"false\"\r\n          :adaptiveHeight=\"false\"\r\n          :slidesToShow=\"4\"\r\n          :slidesToScroll=\"4\"\r\n          :responsive=\"[\r\n            {\r\n              breakpoint: BREAKPOINTS.md,\r\n              settings: {\r\n                slidesToShow: 3,\r\n                slidesToScroll: 3\r\n              }\r\n            },\r\n            {\r\n              breakpoint: BREAKPOINTS.sm,\r\n              settings: {\r\n                adaptiveHeight: true,\r\n                slidesToShow: 2,\r\n                slidesToScroll: 2\r\n              }\r\n            }\r\n          ]\"\r\n        >\r\n          <slot/>\r\n        </c-carousel>\r\n\r\n        <div v-if=\"$slots.productcount\" class=\"offer-product-count\">\r\n          <small><slot name=\"productcount\"/></small>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"offer-footer\">\r\n        <a class=\"offer-actionbutton btn btn-document btn-sm\" :href=\"href\" ref=\"link\">\r\n          <slot name=\"actionbutton\"/>\r\n        </a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { BREAKPOINTS } from '@/assets/js/modules/scss-variables'\r\n\r\nexport default {\r\n  name: 'OfferTeaser',\r\n  props: {\r\n    href: {\r\n      type: String,\r\n      required: true\r\n    },\r\n    imgSrc: {\r\n      type: String,\r\n      default: null\r\n    },\r\n    imgAlt: {\r\n      type: String,\r\n      default: null\r\n    }\r\n  },\r\n  data () {\r\n    return {\r\n      BREAKPOINTS\r\n    }\r\n  },\r\n  methods: {\r\n    onClick (e) {\r\n      this.$refs.link.dispatchEvent(new MouseEvent('click', { ctrlKey: e.ctrlKey }))\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n$offer-teaser-gap: $grid-gutter-width !default;\r\n$offer-teaser-padding-y: $component-padding-y * 0.6 !default;\r\n$offer-teaser-padding-x: $component-padding-x !default;\r\n$offer-teaser-bg: $card-bg !default;\r\n$offer-teaser-font-size: $font-size-base * 0.875 !default;\r\n\r\n$offer-teaser-img-width: 31% !default;\r\n$offer-teaser-img-transition-in: transform ease-out 200ms !default;\r\n$offer-teaser-img-transition-out: transform ease-out 200ms !default;\r\n\r\n$offer-teaser-product-padding-y: 0 !default;\r\n$offer-teaser-product-padding-x: $spacer * 0.5 !default;\r\n$offer-teaser-product-font-size: $font-size-base * 0.75 !default;\r\n$offer-teaser-product-any-gap: $spacer * 0.5 !default;\r\n\r\n$offer-teaser-product-dots-gap: $spacer * 0.5 !default;\r\n\r\n$offer-teaser-actionbutton-animation: h-bounce 400ms ease-out 1 !default;\r\n\r\n$offer-teaser-img-lg-width: 34% !default;\r\n\r\n$offer-teaser-img-md-width: 36% !default;\r\n\r\n$offer-teaser-img-sm-width: 100% !default;\r\n\r\n.offer-teaser {\r\n  @include make-leaf($leaf-border-radius-lg);\r\n  display: flex;\r\n  position: relative;\r\n  overflow: hidden;\r\n  margin-bottom: $offer-teaser-gap;\r\n  background-color: $offer-teaser-bg;\r\n  font-size: $offer-teaser-font-size;\r\n\r\n  &:last-child {\r\n    margin-bottom: 0;\r\n  }\r\n\r\n  .offer-img {\r\n    @include make-leaf($leaf-border-radius-lg, 'top');\r\n    width: $offer-teaser-img-width;\r\n    cursor: pointer;\r\n\r\n    div {\r\n      background: no-repeat center center;\r\n      background-size: cover;\r\n      transform-origin: center right;\r\n      transform: scale(1);\r\n      transition: $offer-teaser-img-transition-out;\r\n    }\r\n  }\r\n\r\n  .offer-content {\r\n    flex: 1 0 0%;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    overflow: hidden;\r\n\r\n    .offer-header {\r\n      overflow: hidden;\r\n      padding: $offer-teaser-padding-y $offer-teaser-padding-x 0;\r\n    }\r\n\r\n    .offer-body {\r\n      padding: ($offer-teaser-padding-y * 0.5) $offer-teaser-padding-x;\r\n    }\r\n\r\n    .offer-footer {\r\n      padding: 0 $offer-teaser-padding-x $offer-teaser-padding-y;\r\n    }\r\n\r\n    .offer-header,\r\n    .offer-body,\r\n    .offer-footer {\r\n      @include clearfix();\r\n\r\n      > * {\r\n        &:last-child {\r\n          margin-bottom: 0;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .offer-title {}\r\n\r\n  .offer-products {\r\n    margin: 0;\r\n\r\n    .slick-list {\r\n      @include reset-leaf();\r\n    }\r\n\r\n    .slick-slide {\r\n      [tabindex=\"-1\"] {\r\n        padding: $offer-teaser-product-padding-y $offer-teaser-product-padding-x;\r\n        font-size: $offer-teaser-product-font-size;\r\n\r\n        * {\r\n          + * {\r\n            margin-top: $offer-teaser-product-any-gap;\r\n          }\r\n        }\r\n\r\n        a {\r\n          display: block;\r\n        }\r\n\r\n        p {\r\n          overflow: hidden;\r\n          text-overflow: ellipsis;\r\n          text-align: center;\r\n          white-space: nowrap;\r\n        }\r\n      }\r\n    }\r\n\r\n    .slick-dots {\r\n      margin-top: $offer-teaser-product-dots-gap;\r\n      margin-bottom: 0;\r\n    }\r\n  }\r\n\r\n  .offer-product-count {\r\n    line-height: 1;\r\n  }\r\n\r\n  .offer-actionbutton {\r\n    display: block;\r\n    float: right;\r\n  }\r\n\r\n  &:hover {\r\n    .offer-img {\r\n      > div {\r\n        transform: scale(1.05);\r\n        transition: $offer-teaser-img-transition-in;\r\n      }\r\n    }\r\n\r\n    .offer-actionbutton {\r\n      animation: $offer-teaser-actionbutton-animation;\r\n    }\r\n  }\r\n\r\n  @include media-breakpoint-down(lg) {\r\n    .offer-img {\r\n      width: $offer-teaser-img-lg-width;\r\n    }\r\n  }\r\n\r\n  @include media-breakpoint-down(md) {\r\n    .offer-img {\r\n      width: $offer-teaser-img-md-width;\r\n    }\r\n  }\r\n\r\n  @include media-breakpoint-down(sm) {\r\n    flex-direction: column;\r\n\r\n    .offer-img {\r\n      width: $offer-teaser-img-sm-width;\r\n      transform-origin: bottom center;\r\n    }\r\n\r\n    .offer-content {\r\n      .offer-body {\r\n        padding-top: $offer-teaser-padding-y;\r\n        padding-bottom: $offer-teaser-padding-y;\r\n      }\r\n    }\r\n\r\n    .offer-products {\r\n      .slick-slide {\r\n        [tabindex=\"-1\"] {\r\n          p {\r\n            overflow: visible;\r\n            white-space: normal;\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n</style>\r\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./OfferTeaser.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./OfferTeaser.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./OfferTeaser.vue?vue&type=template&id=77eaefd7&\"\nimport script from \"./OfferTeaser.vue?vue&type=script&lang=js&\"\nexport * from \"./OfferTeaser.vue?vue&type=script&lang=js&\"\nimport style0 from \"./OfferTeaser.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"themecard-teaser\"},[_c('div',{staticClass:\"themecard-img ratio ratio-1x1\"},[(_vm.imgSrc)?_c('div',{style:((\"background-image: url(\" + _vm.imgSrc + \");\")),on:{\"click\":_vm.onClick}},[_c('span',{staticClass:\"sr-only\"},[_vm._v(_vm._s(_vm.imgAlt))])]):_c('c-placeholder-image',{attrs:{\"size\":\"75\"}})],1),_c('div',{staticClass:\"themecard-content\"},[_c('div',{staticClass:\"themecard-header\"},[_vm._t(\"header\")],2),_c('div',{staticClass:\"themecard-body\"},[_c('c-carousel',{staticClass:\"themecard-products\",attrs:{\"autoplay\":false,\"adaptiveHeight\":false,\"slidesToShow\":4,\"slidesToScroll\":4,\"responsive\":[\n          {\n            breakpoint: _vm.BREAKPOINTS.md,\n            settings: {\n              slidesToShow: 3,\n              slidesToScroll: 3\n            }\n          },\n          {\n            breakpoint: _vm.BREAKPOINTS.sm,\n            settings: {\n              adaptiveHeight: true,\n              slidesToShow: 2,\n              slidesToScroll: 2\n            }\n          }\n        ]}},[_vm._t(\"default\")],2),(_vm.$slots.productcount)?_c('div',{staticClass:\"themecard-product-count\"},[_c('small',[_vm._t(\"productcount\")],2)]):_vm._e()],1),_c('div',{staticClass:\"themecard-footer\"},[_c('a',{ref:\"link\",staticClass:\"themecard-actionbutton btn btn-document btn-sm\",attrs:{\"href\":_vm.href,\"target\":\"_blank\"}},[_vm._t(\"actionbutton\")],2)])])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"themecard-teaser\">\r\n    <div class=\"themecard-img ratio ratio-1x1\">\r\n      <div v-if=\"imgSrc\" :style=\"`background-image: url(${imgSrc});`\" @click=\"onClick\">\r\n        <span class=\"sr-only\">{{ imgAlt }}</span>\r\n      </div>\r\n\r\n      <c-placeholder-image v-else size=\"75\"/>\r\n    </div>\r\n\r\n    <div class=\"themecard-content\">\r\n      <div class=\"themecard-header\">\r\n        <slot name=\"header\"/>\r\n      </div>\r\n\r\n      <div class=\"themecard-body\">\r\n        <c-carousel\r\n          class=\"themecard-products\"\r\n          :autoplay=\"false\"\r\n          :adaptiveHeight=\"false\"\r\n          :slidesToShow=\"4\"\r\n          :slidesToScroll=\"4\"\r\n          :responsive=\"[\r\n            {\r\n              breakpoint: BREAKPOINTS.md,\r\n              settings: {\r\n                slidesToShow: 3,\r\n                slidesToScroll: 3\r\n              }\r\n            },\r\n            {\r\n              breakpoint: BREAKPOINTS.sm,\r\n              settings: {\r\n                adaptiveHeight: true,\r\n                slidesToShow: 2,\r\n                slidesToScroll: 2\r\n              }\r\n            }\r\n          ]\"\r\n        >\r\n          <slot/>\r\n        </c-carousel>\r\n\r\n        <div v-if=\"$slots.productcount\" class=\"themecard-product-count\">\r\n          <small><slot name=\"productcount\"/></small>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"themecard-footer\">\r\n        <a class=\"themecard-actionbutton btn btn-document btn-sm\" :href=\"href\" target=\"_blank\" ref=\"link\">\r\n          <slot name=\"actionbutton\"/>\r\n        </a>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { BREAKPOINTS } from '@/assets/js/modules/scss-variables'\r\n\r\nexport default {\r\n  name: 'ThemecardTeaser',\r\n  props: {\r\n    href: {\r\n      type: String,\r\n      required: true\r\n    },\r\n    imgSrc: {\r\n      type: String,\r\n      default: null\r\n    },\r\n    imgAlt: {\r\n      type: String,\r\n      default: null\r\n    }\r\n  },\r\n  data () {\r\n    return {\r\n      BREAKPOINTS\r\n    }\r\n  },\r\n  methods: {\r\n    onClick (e) {\r\n      this.$refs.link.dispatchEvent(new MouseEvent('click', { ctrlKey: e.ctrlKey }))\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n$themecard-teaser-gap: $grid-gutter-width !default;\r\n$themecard-teaser-padding-y: $component-padding-y * 0.6 !default;\r\n$themecard-teaser-padding-x: $component-padding-x !default;\r\n$themecard-teaser-bg: $card-bg !default;\r\n$themecard-teaser-font-size: $font-size-base * 0.875 !default;\r\n\r\n$themecard-teaser-img-width: 31% !default;\r\n$themecard-teaser-img-transition-in: transform ease-out 200ms !default;\r\n$themecard-teaser-img-transition-out: transform ease-out 200ms !default;\r\n\r\n$themecard-teaser-product-padding-y: 0 !default;\r\n$themecard-teaser-product-padding-x: $spacer * 0.5 !default;\r\n$themecard-teaser-product-font-size: $font-size-base * 0.75 !default;\r\n$themecard-teaser-product-any-gap: $spacer * 0.5 !default;\r\n\r\n$themecard-teaser-product-dots-gap: $spacer * 0.5 !default;\r\n\r\n$themecard-teaser-actionbutton-animation: h-bounce 400ms ease-out 1 !default;\r\n\r\n$themecard-teaser-img-lg-width: 34% !default;\r\n\r\n$themecard-teaser-img-md-width: 36% !default;\r\n\r\n$themecard-teaser-img-sm-width: 100% !default;\r\n\r\n.themecard-teaser {\r\n  @include make-leaf($leaf-border-radius-lg);\r\n  display: flex;\r\n  position: relative;\r\n  overflow: hidden;\r\n  margin-bottom: $themecard-teaser-gap;\r\n  background-color: $themecard-teaser-bg;\r\n  font-size: $themecard-teaser-font-size;\r\n\r\n  &:last-child {\r\n    margin-bottom: 0;\r\n  }\r\n\r\n  .themecard-img {\r\n    @include make-leaf($leaf-border-radius-lg, 'top');\r\n    width: $themecard-teaser-img-width;\r\n    cursor: pointer;\r\n\r\n    div {\r\n      background: no-repeat center center;\r\n      background-size: cover;\r\n      transform-origin: center right;\r\n      transform: scale(1);\r\n      transition: $themecard-teaser-img-transition-out;\r\n    }\r\n  }\r\n\r\n  .themecard-content {\r\n    flex: 1 0 0%;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    overflow: hidden;\r\n\r\n    .themecard-header {\r\n      overflow: hidden;\r\n      padding: $themecard-teaser-padding-y $themecard-teaser-padding-x 0;\r\n    }\r\n\r\n    .themecard-body {\r\n      padding: ($themecard-teaser-padding-y * 0.5) $themecard-teaser-padding-x;\r\n    }\r\n\r\n    .themecard-footer {\r\n      padding: 0 $themecard-teaser-padding-x $themecard-teaser-padding-y;\r\n    }\r\n\r\n    .themecard-header,\r\n    .themecard-body,\r\n    .themecard-footer {\r\n      @include clearfix();\r\n\r\n      > * {\r\n        &:last-child {\r\n          margin-bottom: 0;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .themecard-title {}\r\n\r\n  .themecard-products {\r\n    margin: 0;\r\n\r\n    .slick-list {\r\n      @include reset-leaf();\r\n    }\r\n\r\n    .slick-slide {\r\n      [tabindex=\"-1\"] {\r\n        padding: $themecard-teaser-product-padding-y $themecard-teaser-product-padding-x;\r\n        font-size: $themecard-teaser-product-font-size;\r\n\r\n        * {\r\n          + * {\r\n            margin-top: $themecard-teaser-product-any-gap;\r\n          }\r\n        }\r\n\r\n        a {\r\n          display: block;\r\n        }\r\n\r\n        p {\r\n          overflow: hidden;\r\n          text-overflow: ellipsis;\r\n          text-align: center;\r\n          white-space: nowrap;\r\n        }\r\n      }\r\n    }\r\n\r\n    .slick-dots {\r\n      margin-top: $themecard-teaser-product-dots-gap;\r\n      margin-bottom: 0;\r\n    }\r\n  }\r\n\r\n  .themecard-product-count {\r\n    line-height: 1;\r\n  }\r\n\r\n  .themecard-actionbutton {\r\n    display: block;\r\n    float: right;\r\n  }\r\n\r\n  &:hover {\r\n    .themecard-img {\r\n      > div {\r\n        transform: scale(1.05);\r\n        transition: $themecard-teaser-img-transition-in;\r\n      }\r\n    }\r\n\r\n    .themecard-actionbutton {\r\n      animation: $themecard-teaser-actionbutton-animation;\r\n    }\r\n  }\r\n\r\n  @include media-breakpoint-down(lg) {\r\n    .themecard-img {\r\n      width: $themecard-teaser-img-lg-width;\r\n    }\r\n  }\r\n\r\n  @include media-breakpoint-down(md) {\r\n    .themecard-img {\r\n      width: $themecard-teaser-img-md-width;\r\n    }\r\n  }\r\n\r\n  @include media-breakpoint-down(sm) {\r\n    flex-direction: column;\r\n\r\n    .themecard-img {\r\n      width: $themecard-teaser-img-sm-width;\r\n      transform-origin: bottom center;\r\n    }\r\n\r\n    .themecard-content {\r\n      .themecard-body {\r\n        padding-top: $themecard-teaser-padding-y;\r\n        padding-bottom: $themecard-teaser-padding-y;\r\n      }\r\n    }\r\n\r\n    .themecard-products {\r\n      .slick-slide {\r\n        [tabindex=\"-1\"] {\r\n          p {\r\n            overflow: visible;\r\n            white-space: normal;\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n</style>\r\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ThemecardTeaser.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ThemecardTeaser.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ThemecardTeaser.vue?vue&type=template&id=55baa330&\"\nimport script from \"./ThemecardTeaser.vue?vue&type=script&lang=js&\"\nexport * from \"./ThemecardTeaser.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ThemecardTeaser.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"offercard-teaser\"},[(!_vm.imgNone)?_c('div',{staticClass:\"offercard-img ratio ratio-1x1\"},[(_vm.imgSrc)?_c('div',[_c('img',{attrs:{\"src\":_vm.imgSrc}}),_c('span',{staticClass:\"sr-only\"},[_vm._v(_vm._s(_vm.imgAlt))])]):_c('c-placeholder-image',{attrs:{\"size\":\"75\"}}),_c('a',{staticClass:\"stretched-link\",attrs:{\"href\":_vm.href}})],1):_vm._e(),_c('div',{staticClass:\"offercard-content\"},[_c('div',{staticClass:\"offercard-header\"},[_vm._t(\"header\")],2),_c('div',{staticClass:\"offercard-body\"},[_vm._t(\"body\")],2),_c('div',{staticClass:\"offercard-prices\"},[_vm._t(\"prices\")],2),_c('div',{staticClass:\"offercard-footer\"})])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"offercard-teaser\">\r\n    <div v-if=\"!imgNone\" class=\"offercard-img ratio ratio-1x1\">\r\n      <div v-if=\"imgSrc\" >\r\n        <img :src=\"imgSrc\" />\r\n        <span class=\"sr-only\">{{ imgAlt }}</span>\r\n      </div>\r\n      <c-placeholder-image v-else size=\"75\"/>\r\n      <a class=\"stretched-link\" :href=\"href\"></a>\r\n    </div>\r\n    <div class=\"offercard-content\">\r\n      <div class=\"offercard-header\">\r\n        <slot name=\"header\"/>\r\n      </div>\r\n\r\n      <div class=\"offercard-body\">\r\n        <slot name=\"body\"/>\r\n      </div>\r\n\r\n      <div class=\"offercard-prices\">\r\n        <slot name=\"prices\"/>\r\n      </div>\r\n\r\n      <div class=\"offercard-footer\">\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { BREAKPOINTS } from '@/assets/js/modules/scss-variables'\r\n\r\nexport default {\r\n  name: 'OffercardTeaser',\r\n  props: {\r\n    href: {\r\n      type: String,\r\n      required: true\r\n    },\r\n    imgNone: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n    imgSrc: {\r\n      type: String,\r\n      default: null\r\n    },\r\n    imgAlt: {\r\n      type: String,\r\n      default: null\r\n    }\r\n  },\r\n  data () {\r\n    return {\r\n      BREAKPOINTS\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n$offercard-teaser-gap: $grid-gutter-width !default;\r\n$offercard-teaser-padding-y: $component-padding-y * 0.6 !default;\r\n$offercard-teaser-padding-x: $component-padding-x * 0.5 !default;\r\n$offercard-teaser-bg: $card-bg !default;\r\n$offercard-teaser-font-size: $font-size-base !default;\r\n\r\n$offercard-teaser-img-width: 31% !default;\r\n$offercard-teaser-img-transition-in: transform ease-out 200ms !default;\r\n$offercard-teaser-img-transition-out: transform ease-out 200ms !default;\r\n\r\n$offercard-teaser-product-padding-y: 0 !default;\r\n$offercard-teaser-product-padding-x: $spacer * 0.5 !default;\r\n$offercard-teaser-product-font-size: $font-size-base * 0.75 !default;\r\n$offercard-teaser-product-any-gap: $spacer * 0.5 !default;\r\n\r\n$offercard-teaser-product-dots-gap: $spacer * 0.5 !default;\r\n\r\n$offercard-teaser-actionbutton-animation: h-bounce 400ms ease-out 1 !default;\r\n\r\n$offercard-teaser-img-lg-width: 34% !default;\r\n\r\n$offercard-teaser-img-md-width: 36% !default;\r\n\r\n$offercard-teaser-img-sm-width: 100% !default;\r\n\r\n$offercard-teaser-img-product-padding-y: $component-padding-x / 4 * 3 !default;\r\n$offercard-teaser-img-product-padding-x: $component-padding-x !default;\r\n\r\n.offercard-teaser {\r\n  @include make-leaf($leaf-border-radius-lg);\r\n  display: flex;\r\n  position: relative;\r\n  overflow: hidden;\r\n  margin-bottom: $offercard-teaser-gap;\r\n  background-color: $offercard-teaser-bg;\r\n  font-size: $offercard-teaser-font-size;\r\n  &:last-child {\r\n    margin-bottom: 0;\r\n  }\r\n\r\n  .offercard-img {\r\n    @include make-leaf($leaf-border-radius-lg, 'top');\r\n    //width: $offercard-teaser-img-width;\r\n    margin: ($offercard-teaser-img-product-padding-y / 3 * 4) $offercard-teaser-img-product-padding-x ($offercard-teaser-img-product-padding-y / 3 * 2);\r\n    width: calc(50% - (#{$offercard-teaser-img-product-padding-x} * 2));\r\n    border-radius: 0;\r\n    cursor: pointer;\r\n    div {\r\n      background: no-repeat center center;\r\n      background-size: contain;\r\n      transform-origin: center center;\r\n      transform: scale(1);\r\n      transition: $offercard-teaser-img-transition-out;\r\n    }\r\n  }\r\n\r\n  .offercard-content {\r\n    flex: 1 0 0%;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    overflow: hidden;\r\n\r\n    .offercard-header {\r\n      overflow: hidden;\r\n      padding: $offercard-teaser-padding-y $offercard-teaser-padding-x 0;\r\n    }\r\n\r\n    .offercard-body {\r\n      padding: ($offercard-teaser-padding-y * 0.5) $offercard-teaser-padding-x;\r\n    }\r\n\r\n    .offercard-prices {\r\n      padding: ($offercard-teaser-padding-y * 0.5) $offercard-teaser-padding-x;\r\n    }\r\n\r\n    .offercard-footer {\r\n      padding: 0 $offercard-teaser-padding-x $offercard-teaser-padding-y;\r\n    }\r\n\r\n    .offercard-header,\r\n    .offercard-body,\r\n    .offercard-footer {\r\n      @include clearfix();\r\n\r\n      > * {\r\n        &:last-child {\r\n          margin-bottom: 0;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .offercard-title {}\r\n\r\n  .offercard-products {\r\n    margin: 0;\r\n\r\n    .slick-list {\r\n      @include reset-leaf();\r\n    }\r\n\r\n    .slick-slide {\r\n      [tabindex=\"-1\"] {\r\n        padding: $offercard-teaser-product-padding-y $offercard-teaser-product-padding-x;\r\n        font-size: $offercard-teaser-product-font-size;\r\n\r\n        * {\r\n          + * {\r\n            margin-top: $offercard-teaser-product-any-gap;\r\n          }\r\n        }\r\n\r\n        a {\r\n          display: block;\r\n        }\r\n\r\n        p {\r\n          overflow: hidden;\r\n          text-overflow: ellipsis;\r\n          text-align: center;\r\n          white-space: nowrap;\r\n        }\r\n      }\r\n    }\r\n\r\n    .slick-dots {\r\n      margin-top: $offercard-teaser-product-dots-gap;\r\n      margin-bottom: 0;\r\n    }\r\n  }\r\n\r\n  .offercard-product-count {\r\n    line-height: 1;\r\n  }\r\n\r\n  .offercard-actionbutton {\r\n    display: block;\r\n    float: right;\r\n  }\r\n\r\n  &:hover {\r\n    .offercard-img {\r\n      > div {\r\n        transform: scale(1.05);\r\n        transition: $offercard-teaser-img-transition-in;\r\n      }\r\n    }\r\n\r\n    .offercard-actionbutton {\r\n      animation: $offercard-teaser-actionbutton-animation;\r\n    }\r\n  }\r\n\r\n  @include media-breakpoint-down(lg) {\r\n    .offercard-img {\r\n      width: $offercard-teaser-img-lg-width;\r\n    }\r\n  }\r\n\r\n  @include media-breakpoint-down(md) {\r\n    .offercard-img {\r\n      width: $offercard-teaser-img-md-width;\r\n    }\r\n  }\r\n\r\n  @include media-breakpoint-down(sm) {\r\n    flex-direction: column;\r\n\r\n    .offercard-img {\r\n      width: $offercard-teaser-img-sm-width;\r\n      transform-origin: bottom center;\r\n    }\r\n\r\n    .offercard-content {\r\n      .offercard-body {\r\n        padding-top: $offercard-teaser-padding-y;\r\n        padding-bottom: $offercard-teaser-padding-y;\r\n      }\r\n    }\r\n\r\n    .offercard-products {\r\n      .slick-slide {\r\n        [tabindex=\"-1\"] {\r\n          p {\r\n            overflow: visible;\r\n            white-space: normal;\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n</style>\r\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./OffercardTeaser.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./OffercardTeaser.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./OffercardTeaser.vue?vue&type=template&id=732faf8b&\"\nimport script from \"./OffercardTeaser.vue?vue&type=script&lang=js&\"\nexport * from \"./OffercardTeaser.vue?vue&type=script&lang=js&\"\nimport style0 from \"./OffercardTeaser.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./OffercardTeaser.vue?vue&type=style&index=0&lang=scss&\"","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ThemecardTeaser.vue?vue&type=style&index=0&lang=scss&\"","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./OfferTeaser.vue?vue&type=style&index=0&lang=scss&\""],"sourceRoot":""}