2021-03-27 12:26:55 +01:00
|
|
|
{"version":3,"sources":["webpack:///./src/components/elements/ToggleSwitch.vue","webpack:///./src/components/elements/ToggleSwitch.vue?7805","webpack:///./src/components/elements/ToggleSwitch.vue?ebb3"],"names":["class","disabled","onInput","type","checked","value","name","emits","props","Boolean","default","methods","event","stopPropagation","this","$emit","render","__scopeId"],"mappings":"8MAMM,eAEM,OAFDA,MAAM,UAAQ,CACjB,eAAmB,OAAdA,MAAM,U,MAEPA,MAAM,S,wEARhB,eAYM,OAZDA,MAAK,CAAC,eAAc,UAAoB,EAAAC,WAAY,QAAK,8BAAE,EAAAC,QAAA,sB,CAE9D,eAAwC,SAAjCC,KAAK,WAAYC,QAAS,EAAAC,O,oBACjC,eAQQ,cANN,EAGA,eAEO,OAFP,EAEO,CADL,eAAQ,yB,MAOD,GACbC,KAAM,eACNC,MAAO,CAAC,SACRC,MAAO,CACLH,MAAO,CACLF,KAAMM,QACNC,SAAS,GAGXT,SAAU,CACRE,KAAMM,QACNC,SAAS,IAIbC,QAAS,CACPT,QADO,SACCU,GAEN,GADAA,EAAMC,kBACFC,KAAKb,SACP,OAAO,EAETa,KAAKC,MAAM,QAASH,M,UCjC1B,EAAOI,OAAS,EAChB,EAAOC,UAAY,kBAEJ,U,oCCRf,Y","file":"static/js/chunk-06539e5d.1a0f4e72.js","sourcesContent":["<template>\n <div class=\"power-switch\" :class=\"{disabled: disabled}\" @click=\"onInput\">\n <!--suppress HtmlFormInputWithoutLabel -->\n <input type=\"checkbox\" :checked=\"value\">\n <label>\n <!--suppress HtmlUnknownTag -->\n <div class=\"switch\">\n <div class=\"dot\" />\n </div>\n <span class=\"label\">\n <slot />\n </span>\n </label>\n </div>\n</template>\n\n<script>\nexport default {\n name: \"ToggleSwitch\",\n emits: ['input'],\n props: {\n value: {\n type: Boolean,\n default: false,\n },\n\n disabled: {\n type: Boolean,\n default: false,\n },\n },\n\n methods: {\n onInput(event) {\n event.stopPropagation()\n if (this.disabled)\n return false\n\n this.$emit('input', event)\n },\n },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.power-switch {\n position: relative;\n transition: transform .3s;\n transform: scale(var(--scale, 1)) translateZ(0);\n\n &:active {\n --scale: .96;\n }\n\n &.disabled {\n opacity: 0.6;\n }\n\n input {\n display: none;\n & + label {\n border-radius: 1em;\n display: block;\n cursor: pointer;\n position: relative;\n transition: box-shadow .4s;\n\n &:before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n border-radius: inherit;\n background: none;\n opacity: var(--gradient, 0);\n transition: opacity .4s;\n }\n\n .switch {\n position: relative;\n display: inline-block;\n vertical-align: top;\n height: 1.4em;\n width: 2.5em;\n border-radius: 1em;\n background: $toggle-bg;\n box-shadow: $toggle-shadow;\n\n &:before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n border-radius: inherit;\n background: $toggle-selected-bg;\n opacity: var(--gradient, 0);\n transition: opacity .4s;\n }\n\n .dot {\n background: $toggle-dot-bg;\n position: absolute;\n width: 1.5em;\n height: 1.5em;\n border-radius: 50%;\n box-shadow: $toggle-dot-shadow;\n left: -0.25em;\n top: -0.05em;\n transform: translateX(var(--offset, 0));\n transition: transform .4s, box-shadow .4s;\n\n &:before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n border-radius: inherit;\n background: $toggle-selected-dot-bg;\n box-shadow: $toggle-dot-shadow;\n opacity: var(--gradient, 0);\n transition: opacity .4s;\n }\n }\n }\n\n span {\n line-height: 2em;\n font-size: 1.2em;\n color: var(--text, #646B8C);\n font-weight: 500;\n display: inline-block;\n vertical-align: top;\n position: relative;\n
|
