{"version":3,"sources":["webpack:///./src/views/Services.vue?a444","webpack:///./src/views/Services.vue","webpack:///src/views/Services.vue","webpack:///./src/views/Services.vue?77c4","webpack:///./src/views/Services.vue?6b51"],"names":["render","_vm","this","_c","_self","attrs","staticClass","CMS","class","scaleYAnim","playAnimText","_v","_s","heading","_e","subheading1","subheading2","_l","services","item","index","key","directives","name","rawName","value","expression","style","backgroundColor","servicesFromStore","img","title","subtitle","contentSmall","on","$event","$emit","routeName","staticRenderFns","data","metaInfo","meta","content","computed","watch","beforeCreate","then","mounted","document","window","setTimeout","destroyed","component"],"mappings":"kHAAA,W,gECAA,IAAIA,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,MAAM,CAACE,MAAM,CAAC,GAAK,sBAAsB,CAACF,EAAG,MAAM,CAACG,YAAY,mBAAmBH,EAAG,MAAM,CAACG,YAAY,mBAAmB,CAACH,EAAG,MAAM,CAACG,YAAY,yBAAyB,CAAEL,EAAIM,IAAKJ,EAAG,KAAK,CAACK,MAAM,CAACC,WAAYR,EAAIS,eAAe,CAACT,EAAIU,GAAGV,EAAIW,GAAGX,EAAIY,YAAYZ,EAAIa,OAAOX,EAAG,MAAM,CAACG,YAAY,yBAAyB,CAAEL,EAAIM,IAAKJ,EAAG,OAAO,CAACK,MAAM,CAACC,WAAYR,EAAIS,eAAe,CAACT,EAAIU,GAAGV,EAAIW,GAAGX,EAAIc,gBAAgBd,EAAIa,OAAOX,EAAG,MAAM,CAACG,YAAY,yBAAyB,CAAEL,EAAIM,IAAKJ,EAAG,OAAO,CAACK,MAAM,CAACC,WAAYR,EAAIS,eAAe,CAACT,EAAIU,GAAGV,EAAIW,GAAGX,EAAIe,gBAAgBf,EAAIa,SAASX,EAAG,MAAM,CAACG,YAAY,YAAYL,EAAIgB,GAAIhB,EAAIiB,UAAU,SAASC,EAAKC,GAAO,OAAOjB,EAAG,MAAM,CAACkB,IAAID,EAAMd,YAAY,QAAQ,CAACH,EAAG,MAAM,CAACmB,WAAW,CAAC,CAACC,KAAK,OAAOC,QAAQ,SAASC,MAAOxB,EAAIS,aAAcgB,WAAW,iBAAiBpB,YAAY,2CAA2C,CAACH,EAAG,MAAM,CAACG,YAAY,aAAaqB,MAAO,CAACC,gBAAiB3B,EAAI4B,kBAAkBT,GAAOQ,kBAAmB,CAACzB,EAAG,MAAM,CAACE,MAAM,CAAC,IAAMJ,EAAI4B,kBAAkBT,GAAOU,OAAO3B,EAAG,MAAM,CAACG,YAAY,+BAA+B,CAACH,EAAG,MAAM,CAACG,YAAY,uBAAuB,CAACH,EAAG,MAAM,CAACG,YAAY,6BAA6B,CAACH,EAAG,KAAK,CAACF,EAAIU,GAAGV,EAAIW,GAAGO,EAAKY,UAAU5B,EAAG,MAAM,CAACG,YAAY,YAAY,CAACL,EAAIU,GAAGV,EAAIW,GAAGO,EAAKa,iBAAiB7B,EAAG,MAAM,CAACG,YAAY,4BAA4B,CAACL,EAAIU,GAAGV,EAAIW,GAAGO,EAAKc,iBAAiB9B,EAAG,MAAM,CAACG,YAAY,MAAM4B,GAAG,CAAC,MAAQ,SAASC,GAAQlC,EAAImC,MAAM,cAAgB,CAACb,KAAMtB,EAAI4B,kBAAkBT,GAAOiB,eAAgB,CAAClC,EAAG,OAAOA,EAAG,OAAO,CAACF,EAAIU,GAAG,sBAAsBR,EAAG,MAAM,CAACG,YAAY,wBAAwB,CAACH,EAAG,MAAM,CAACG,YAAY,gBAAgB,CAACH,EAAG,KAAK,CAACmB,WAAW,CAAC,CAACC,KAAK,OAAOC,QAAQ,SAASC,MAAOxB,EAAIS,aAAcgB,WAAW,iBAAiBpB,YAAY,4BAA4B,CAACL,EAAIU,GAAGV,EAAIW,GAAGO,EAAKY,UAAU5B,EAAG,QAAQ,CAACmB,WAAW,CAAC,CAACC,KAAK,OAAOC,QAAQ,SAASC,MAAOxB,EAAIS,aAAcgB,WAAW,iBAAiBpB,YAAY,4BAA4B,CAACL,EAAIU,GAAGV,EAAIW,GAAGO,EAAKa,wBAAuB,GAAG7B,EAAG,eAAe,IAEzjEmC,EAAkB,GC6CP,G,kDAAA,CACfC,gBACA,OACA7B,gBACAH,SACAW,YACAL,WACAE,eACAC,iBAIAwB,UACAT,4BACAU,MACA,CAEAlB,mBACAmB,QACA,yTAKAC,UACAd,6BACA,oCAIAe,OACArC,eAAA,WACA,+CACA,4EACA,4EAEA,4CACA,iBACAwB,kDACAC,wDACAC,wEAMAY,wBAAA,WAEA,2CACAC,kBACA,iBAIAC,mBAAA,WACAC,kCACAC,qBAEAC,uBACA,oBACA,OAGAC,qBACAH,uCC/GkV,I,wBCQ9UI,EAAY,eACd,EACApD,EACAsC,GACA,EACA,KACA,KACA,MAIa,aAAAc,E","file":"js/chunk-7c6f499c.b4844d48.js","sourcesContent":["export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--10-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Services.vue?vue&type=style&index=0&id=dc2f3748&prod&lang=sass&\"","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{attrs:{\"id\":\"servicesContainer\"}},[_c('div',{staticClass:\"navbarServices\"}),_c('div',{staticClass:\"servicesTextTop\"},[_c('div',{staticClass:\"overflow-service-page\"},[(_vm.CMS)?_c('h1',{class:{scaleYAnim: _vm.playAnimText}},[_vm._v(_vm._s(_vm.heading))]):_vm._e()]),_c('div',{staticClass:\"overflow-service-page\"},[(_vm.CMS)?_c('span',{class:{scaleYAnim: _vm.playAnimText}},[_vm._v(_vm._s(_vm.subheading1))]):_vm._e()]),_c('div',{staticClass:\"overflow-service-page\"},[(_vm.CMS)?_c('span',{class:{scaleYAnim: _vm.playAnimText}},[_vm._v(_vm._s(_vm.subheading2))]):_vm._e()])]),_c('div',{staticClass:\"services\"},_vm._l((_vm.services),function(item,index){return _c('div',{key:index,staticClass:\"item\"},[_c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.playAnimText),expression:\"playAnimText\"}],staticClass:\"anotherWrapper animated zoomIn delay-1s\"},[_c('div',{staticClass:\"imgWrapper\",style:({backgroundColor: _vm.servicesFromStore[index].backgroundColor})},[_c('img',{attrs:{\"src\":_vm.servicesFromStore[index].img}}),_c('div',{staticClass:\"inside-service-text-wrapper\"},[_c('div',{staticClass:\"inside-service-text\"},[_c('div',{staticClass:\"inside-service-text-child\"},[_c('h3',[_vm._v(_vm._s(item.title))]),_c('div',{staticClass:\"subtitle\"},[_vm._v(_vm._s(item.subtitle))])])]),_c('div',{staticClass:\"inside-service-text-main\"},[_vm._v(_vm._s(item.contentSmall))]),_c('div',{staticClass:\"btn\",on:{\"click\":function($event){_vm.$emit('changeRoute', ({name: _vm.servicesFromStore[index].routeName}))}}},[_c('div'),_c('span',[_vm._v(\"LEARN MORE\")])])])]),_c('div',{staticClass:\"text-service-wrapper\"},[_c('div',{staticClass:\"text-service\"},[_c('h1',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.playAnimText),expression:\"playAnimText\"}],staticClass:\"animated delay-1s zoomIn\"},[_vm._v(_vm._s(item.title))]),_c('small',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.playAnimText),expression:\"playAnimText\"}],staticClass:\"animated delay-1s zoomIn\"},[_vm._v(_vm._s(item.subtitle))])])])])])}),0),_c('footerComp')],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div id=\"servicesContainer\">\n    <div class=\"navbarServices\"></div>\n      <div class=\"servicesTextTop\">\n        <div class=\"overflow-service-page\">\n          <h1 v-if=\"CMS\" :class=\"{scaleYAnim: playAnimText}\">{{heading}}</h1>\n        </div>\n        <div class=\"overflow-service-page\">\n          <span v-if=\"CMS\" :class=\"{scaleYAnim: playAnimText}\">{{subheading1}}</span>\n        </div>\n        <div class=\"overflow-service-page\">\n          <span v-if=\"CMS\" :class=\"{scaleYAnim: playAnimText}\">{{subheading2}}</span>\n        </div>\n      </div>\n      <div class=\"services\">\n        <div class=\"item\" v-for=\"(item, index) in services\" :key=\"index\">\n          <div class=\"anotherWrapper animated zoomIn delay-1s\" v-show=\"playAnimText\">\n            <div class=\"imgWrapper\" :style=\"{backgroundColor: servicesFromStore[index].backgroundColor}\">\n              <img :src=\"servicesFromStore[index].img\">\n               <div class=\"inside-service-text-wrapper\">\n                 <div class=\"inside-service-text\">\n                   <div class=\"inside-service-text-child\">\n                     <h3>{{item.title}}</h3>\n                    <div class=\"subtitle\">{{item.subtitle}}</div>\n                   </div>\n                 </div>\n                 <div class=\"inside-service-text-main\">{{item.contentSmall}}</div>\n                 <div class=\"btn\" @click=\"$emit('changeRoute', ({name: servicesFromStore[index].routeName}))\">\n                  <div></div>\n                  <span>LEARN MORE</span>\n                </div>\n               </div>\n            </div>\n            <div class=\"text-service-wrapper\">\n              <div class=\"text-service\">\n                <h1 class=\"animated delay-1s zoomIn\" v-show=\"playAnimText\">{{item.title}}</h1>\n                <small class=\"animated delay-1s zoomIn\" v-show=\"playAnimText\">{{item.subtitle}}</small>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    <footerComp/>\n  </div>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      playAnimText: false,\n      CMS: null,\n      services: [],\n      heading: '',\n      subheading1: '',\n      subheading2: ''\n    }\n  },\n  //VueMeta\n  metaInfo: {\n    title: 'Products & Services',\n    meta: [\n      {\n        //vmid: 'description',\n        name: 'description',\n        content:\n                'Clement Labs collaborates, designs, develops, builds and runs amazing websites as well as public and private Shopify, Android and iOS Apps. We specialize in eCommerce Data Migration, Shopify On-boarding, Shopify Retail POS integration, Mobile Apps as well as Marketing and eCommerce consulting and services.'\n      }\n    ]\n  },\n\n  computed: {\n    servicesFromStore() {\n      return this.$store.state.services\n    }\n  },\n\n  watch: {\n    CMS() {\n      this.heading = this.CMS.services_heading[0].text\n      this.subheading1 = this.CMS.services_subheading_1[0].text.replace(/\\s+/g, ' ')\n      this.subheading2 = this.CMS.services_subheading_2[0].text.replace(/\\s+/g, ' ')\n\n      this.CMS.body[0].items.forEach(item => {\n        this.services.push({\n          title: item.service_title[0].text.replace(/\\s+/g, ' '),\n          subtitle: item.service_subtitle[0].text.replace(/\\s+/g, ' '),\n          contentSmall: item.service_content_small[0].text.replace(/\\s+/g, ' ')\n        })\n      })\n    }\n  },\n\n  beforeCreate() {\n    // CMS DEMONSTRATION\n    this.$prismic.client.getSingle('services')\n    .then(doc => {\n      this.CMS = doc.data\n    })\n  },\n\n  mounted() {\n    document.body.style.height = \"auto\"\n    window.scrollTo(0, 0)\n\n    setTimeout(() => {\n      this.playAnimText = true\n    }, 1200)\n  },\n\n  destroyed() {\n    document.body.style.height = \"1000vh\"\n  }\n}\n</script>\n\n<style lang=\"sass\">\n\n$color1: rgba(38, 70, 83, 1)\n$color2: rgba(42, 157, 143, 1)\n$color3: rgba(233, 196, 106, 1)\n$color4: rgba(244, 162, 97, 1)\n$color5: rgba(231, 111, 81, 1)\n\n#servicesContainer\n  background-color: $color5\n  width: 100vw\n  position: absolute\n  left: 0\n  top: 0\n  .servicesTextTop\n    margin: 14vw 13vw 0 13vw\n    display: flex\n    flex-direction: column\n    align-items: flex-start\n    .overflow-service-page\n      overflow: hidden\n      text-align: left\n      margin-bottom: 15px\n      &:nth-child(2), &:nth-child(3)\n        width: 500px\n        @media (max-width: 600px)\n          width: 80vw\n      h1\n        font-size: 45px\n        margin: 0\n        @media (max-width: 600px)\n          font-size: 25px\n        @media (min-width: 600px) and (max-width: 1100px)\n          font-size: 35px\n        @media (orientation: landscape) and (max-width: 1320px)\n          font-size: 30px\n        transition: transform 1.2s cubic-bezier(.165,.84,.44,1) .2s\n        transform: translateY(100%)\n      span\n        display: block\n        font-size: 19px\n        letter-spacing: 2px\n        @media (max-width: 600px)\n          font-size: 17px\n        @media (min-width: 600px) and (max-width: 1100px)\n          font-size: 24px\n        @media (orientation: landscape) and (max-width: 1320px)\n          font-size: 19px\n        transition: transform 1.2s cubic-bezier(.165,.84,.44,1) 0.6s\n        transform: translateY(100%)\n  .navbarServices\n    background-color:#E76F51\n  .services\n    width: auto\n    height: auto\n    margin: 7vw 15vw\n    @media (max-width: 600px)\n      flex-direction: column\n      align-items: center\n    @media (max-width: 600px)\n      margin: 20vw 5vw\n    @media (min-width: 600px) and (max-width: 1400px)\n      margin: 15vw 5vw\n    display: flex\n    flex-wrap: wrap\n    justify-content: center\n    .item\n      margin: 30px 0\n      width: 20vw\n      height: 20vw\n      @media (max-width: 600px)\n        margin: 10vw 0\n        width: 80vw\n        height: 80vw\n      @media (min-width: 600px) and (max-width: 1100px)\n        width: 60vw\n        height: 60vw\n      @media (max-width: 1400px)\n        width: 45vw\n        height: 45vw\n      @media (orientation: landscape) and (max-width: 600px)\n        width: 60vw\n        height: 60vw\n        margin: 50px 0\n      &:hover\n        .anotherWrapper\n          .imgWrapper\n            transform: scale(1.8) !important\n            .inside-service-text-wrapper\n              opacity: 1\n              /*.inside-service-text-main*/\n              .inside-service-text\n                .inside-service-text-child\n                  transform: translate(0)\n            img\n              transform: scale(0.2) translate(0, 245%)\n        .text-service-wrapper\n          transform: scaleY(0)\n          .text-service\n            transform: translate(0, -200%)\n            opacity: 0\n      /* Important for adding new services! */\n      &:nth-child(3), &:nth-child(4)\n        .anotherWrapper\n          .imgWrapper\n            transform: scale(1.1)\n      &:nth-child(5)\n        .anotherWrapper\n          .imgWrapper\n            .inside-service-text-wrapper\n              .btn\n                &:hover\n                  span\n                    /*color: #fff*/\n                    color: #333\n                /*box-shadow: inset 0px 0px 0px 2px #333*/\n                box-shadow: inset 0px 0px 0px 2px #fff\n                @media (max-width: 600px)\n                  /*box-shadow: inset 0px 0px 0px 1px #333*/\n                box-shadow: inset 0px 0px 0px 1px #fff\n                div\n                  /*background-color: #333*/\n                  background-color: #fff\n            *\n              //color: #333\n              color: #fff\n      /* */\n      .anotherWrapper\n        width: 60%\n        height: 60%\n        @media (min-width: 1700px)\n          width: 50%\n          height: 50%\n        margin: 0 auto\n        border-radius: 50%\n        .imgWrapper\n          border-radius: 50%\n          transition: all 0.65s ease\n          position: relative\n          .inside-service-text-wrapper\n              position: absolute\n              display: flex\n              flex-direction: column\n              justify-content: center\n              align-items: center\n              opacity: 0\n              transition: all 0.75s ease-in-out 0.35s\n              left: 0\n              right: 0\n              top: 0\n              bottom: 0\n              margin: auto\n              height: 100%\n              width: 80%\n              z-index: 10\n              .btn\n                bottom: 0\n                margin: 0\n                width: 90px\n                height: 31px\n                font-size: 10px\n                @media (max-width: 600px)\n                  height: 25px\n                  width: 50%\n                  box-shadow: inset 0px 0px 0px 1px #fff\n                  span\n                    font-size: 8px\n                div\n                  background-color: #fff\n                &:hover\n                  span\n                    color: #333\n              .inside-service-text-main\n                font-size: 8px\n                margin: 5% 0\n                transition: all 0.65s cubic-bezier(1,.005,.37,1)\n                @media (max-width: 600px)\n                  font-size: 9px\n                @media (min-width: 600px) and (max-width: 1100px)\n                  font-size: 11px\n                @media (min-width: 1100px) and (max-width: 1400px)\n                  font-size: 16px\n              .inside-service-text\n                width: auto\n                height: auto\n                overflow: hidden\n                .inside-service-text-child\n                  transform: translate(0, 100%)\n                  transition: all 0.6s ease 0.25s\n                  h3\n                    font-size: 15px\n                    width: 90%\n                    margin: 0 auto -2% auto\n                    @media (max-width: 600px)\n                      font-size: 12px\n                    @media (min-width: 600px) and (max-width: 1100px)\n                      font-size: 15px\n                      margin-bottom: 5px\n                    @media (min-width: 1100px) and (max-width: 1400px)\n                      font-size: 27px\n                      margin-bottom: 5px\n                  .subtitle\n                    margin-top: 3%\n                    line-height: default\n                    font-size: 9px\n                    @media (max-width: 600px)\n                      font-size: 8px\n                    @media (min-width: 600px) and (max-width: 1100px)\n                      font-size: 12px\n                    @media (min-width: 1100px) and (max-width: 1400px)\n                      font-size: 20px\n          img\n            width: 100%\n            height: 100%\n            transform: scale(1.1)\n            transition: all 0.65s cubic-bezier(1,.005,.37,1)\n            position: relative\n            z-index: 100\n      .text-service-wrapper\n        width: 150%\n        position: relative\n        right: 25%\n        height: auto\n        transition: all 0.65s ease\n        .text-service\n          transition: all 0.65s ease\n          h1\n            margin: 10% 0 0 0\n            font-size: 25px\n            @media (max-width: 1600px) and (min-width: 1100px)\n              font-size: 20px\n            @media (min-width: 600px) and (max-width: 1100px)\n              font-size: 27px\n            @media (max-width: 600px)\n              font-size: 22px\n          small\n            @media (min-width: 600px) and (max-width: 1100px)\n              font-size: 20px\n</style>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Services.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Services.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Services.vue?vue&type=template&id=dc2f3748&\"\nimport script from \"./Services.vue?vue&type=script&lang=js&\"\nexport * from \"./Services.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Services.vue?vue&type=style&index=0&id=dc2f3748&prod&lang=sass&\"\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"],"sourceRoot":""}