{"version":3,"sources":["webpack:///./src/components/Theme.vue?9e49","webpack:///src/components/Theme.vue","webpack:///./src/components/Theme.vue?89a8","webpack:///./src/components/Theme.vue","webpack:///./src/components/Theme.vue?7f0a"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","_v","ref","on","$event","$root","$emit","directives","name","rawName","staticRenderFns","component"],"mappings":"yHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,SAAS,CAACF,EAAG,IAAI,CAACE,YAAY,SAAS,CAACN,EAAIO,GAAG,iCAAiCH,EAAG,MAAM,CAACI,IAAI,QAAQF,YAAY,UAAUF,EAAG,MAAM,CAACE,YAAY,gBAAgB,CAACF,EAAG,OAAO,CAACK,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOV,EAAIW,MAAMC,MAAM,eAAgB,aAAa,CAACZ,EAAIO,GAAG,cAAcH,EAAG,OAAO,CAACK,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOV,EAAIW,MAAMC,MAAM,eAAgB,aAAa,CAACZ,EAAIO,GAAG,cAAcH,EAAG,OAAO,CAACK,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOV,EAAIW,MAAMC,MAAM,eAAgB,aAAa,CAACZ,EAAIO,GAAG,eAAeH,EAAG,IAAI,CAACE,YAAY,QAAQG,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOV,EAAIW,MAAMC,MAAM,eAAgB,oBAAoB,CAACR,EAAG,OAAO,CAACS,WAAW,CAAC,CAACC,KAAK,oBAAoBC,QAAQ,yBAAyB,CAACf,EAAIO,GAAG,gBAC3zBS,EAAkB,GCYtB,GACE,QAAF,CACI,WADJ,WAGM,IAAN,sCAEM,IAAN,EAOQ,MAAR,iDANQ,EAAR,gBACU,SAAV,SACU,MAAV,YASE,QAlBF,WAkBI,IAAJ,OACI,KAAJ,sBACM,EAAN,uDAKE,UAzBF,WA0BI,KAAJ,2DCvC6W,I,wBCQzWC,EAAY,eACd,EACAlB,EACAiB,GACA,EACA,KACA,WACA,MAIa,aAAAC,E,6CCnBf,yBAAkmB,EAAG,G","file":"js/chunk-4d2251fa.618e8333.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"theme\"},[_c('p',{staticClass:\"check\"},[_vm._v(\"Select. Click. Check it out\")]),_c('div',{ref:\"arrow\",staticClass:\"arrow\"}),_c('div',{staticClass:\"select-theme\"},[_c('span',{on:{\"click\":function($event){return _vm.$root.$emit('change-theme', 'theme1')}}},[_vm._v(\"Click me\")]),_c('span',{on:{\"click\":function($event){return _vm.$root.$emit('change-theme', 'theme2')}}},[_vm._v(\"...or me\")]),_c('span',{on:{\"click\":function($event){return _vm.$root.$emit('change-theme', 'theme3')}}},[_vm._v(\"meeee!!\")])]),_c('p',{staticClass:\"reset\",on:{\"click\":function($event){return _vm.$root.$emit('change-theme', 'theme-default')}}},[_c('span',{directives:[{name:\"dial-mouse-target\",rawName:\"v-dial-mouse-target\"}]},[_vm._v(\"reset\")])])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n    <div class=\"theme\">\n        <p class=\"check\">Select. Click. Check it out</p>\n        <div class=\"arrow\" ref=\"arrow\"></div>\n        <div class=\"select-theme\">\n            <span @click=\"$root.$emit('change-theme', 'theme1')\">Click me</span>\n            <span @click=\"$root.$emit('change-theme', 'theme2')\">...or me</span>\n            <span @click=\"$root.$emit('change-theme', 'theme3')\">meeee!!</span>\n        </div>\n        <p class=\"reset\" @click=\"$root.$emit('change-theme', 'theme-default')\"><span v-dial-mouse-target>reset</span></p>\n    </div>\n</template>\n<script>\n    export default {\n        methods: {\n            scrollInto() {\n\n                let homepageElement = document.querySelector('.homepage');\n\n                if (homepageElement) {\n                    homepageElement.scrollIntoView({\n                        behavior: 'smooth',\n                        block: 'start'\n                    });\n\n                } else {\n                    throw  new Error(' There is no such class or element.');\n                }\n            }\n        },\n\n        mounted() {\n            this.$nextTick(() => {\n                this.$refs.arrow.addEventListener('click', this.scrollInto);\n\n            });\n        },\n\n        destroyed() {\n            this.$refs.arrow.removeEventListener('click', this.scrollInto);\n        }\n    }\n</script>\n<style lang=\"less\" scoped>\n    @import \"../assets/styles/design\";\n\n    .theme {\n        margin-top: 30px;\n\n        p {\n            color: white;\n            font-size: 1.5em;\n            font-weight: 100;\n\n            &.reset {\n                font-size: 1.2rem;\n                cursor: pointer;\n                user-select: none;\n            }\n        }\n\n\n        .arrow {\n            width: 20px;\n            height: 20px;\n            padding: 20px;\n            transform: rotate(135deg);\n            margin: auto;\n            cursor: pointer;\n            position: relative;\n            box-sizing: content-box;\n\n\n            &::before {\n                content: '';\n                width: 100%;\n                height: 100%;\n                border-top: 1.2px solid #fafafa;\n                border-right: 1.2px solid #fafafa;\n                transition: .2s ease;\n                display: block;\n                transform-origin: 100% 0;\n            }\n\n            &:after {\n                content: '';\n                float: left;\n                position: absolute;\n                top: 21px;\n                left: 20px;\n                width: 20px;\n                height: 20px;\n                border-right: 1.2px solid #fafafa;\n                transform-origin: 100% 0;\n                transition: .2s ease;\n            }\n\n            &:hover::after {\n                transform: rotate(45deg);\n                border-color: white;\n                height: 26px;\n            }\n\n            &:hover::before {\n                transform: scale(.8);\n\n            }\n\n        }\n\n        & .select-theme {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            margin: 50px 0;\n\n            & span {\n                width: 80px;\n                height: 80px;\n                border-radius: 50%;\n                margin: 15px;\n                color: white;\n                text-align: center;\n                font-size: 1em;\n                line-height: 80px;\n                cursor: pointer;\n                box-shadow: 0 3px 20px 3px #0000004d;\n                flex-shrink: 0;\n                user-select: none;\n                transition: all .3s ease-in-out;\n\n                &:first-child {\n                    background: @theme1;\n                }\n\n                &:nth-child(2) {\n                    background: @theme2;\n                }\n\n                &:last-child {\n                    background: @theme3;\n                }\n\n                &:hover {\n                    letter-spacing: 1px;\n                    transform: scale(.9);\n                }\n            }\n        }\n\n    }\n\n    .responsive(@desktop, { .theme {\n        & .select-theme {\n            margin: 2.5rem 0;\n\n            & span {\n                width: 100px;\n                height: 100px;\n                line-height: 100px;\n            }\n        }\n    } });\n</style>","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/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./Theme.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/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./Theme.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Theme.vue?vue&type=template&id=4b798536&scoped=true&\"\nimport script from \"./Theme.vue?vue&type=script&lang=js&\"\nexport * from \"./Theme.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Theme.vue?vue&type=style&index=0&id=4b798536&lang=less&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"4b798536\",\n  null\n  \n)\n\nexport default component.exports","import mod 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/cli-service/node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./Theme.vue?vue&type=style&index=0&id=4b798536&lang=less&scoped=true&\"; export default mod; 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/cli-service/node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./Theme.vue?vue&type=style&index=0&id=4b798536&lang=less&scoped=true&\""],"sourceRoot":""}