{"version":3,"sources":["webpack:///./src/views/ui-elements/colors/Colors.vue?bb8a","webpack:///./src/views/ui-elements/colors/Colors.vue?03a7","webpack:///./src/views/ui-elements/colors/ColorsDefault.vue?4a7c","webpack:///src/views/ui-elements/colors/ColorsDefault.vue","webpack:///./src/views/ui-elements/colors/ColorsDefault.vue?e9d6","webpack:///./src/views/ui-elements/colors/ColorsDefault.vue","webpack:///./src/views/ui-elements/colors/ColorsGradient.vue?8047","webpack:///src/views/ui-elements/colors/ColorsGradient.vue","webpack:///./src/views/ui-elements/colors/ColorsGradient.vue?09ac","webpack:///./src/views/ui-elements/colors/ColorsGradient.vue","webpack:///./src/views/ui-elements/colors/ColorsCustomization.vue?9793","webpack:///./src/views/ui-elements/colors/ColorsCustomization.vue","webpack:///./src/views/ui-elements/colors/ColorsChangeColor.vue?46a1","webpack:///src/views/ui-elements/colors/ColorsChangeColor.vue","webpack:///./src/views/ui-elements/colors/ColorsChangeColor.vue?120d","webpack:///./src/views/ui-elements/colors/ColorsChangeColor.vue?0eba","webpack:///./src/views/ui-elements/colors/ColorsChangeColorSSR.vue?0453","webpack:///src/views/ui-elements/colors/ColorsChangeColorSSR.vue","webpack:///./src/views/ui-elements/colors/ColorsChangeColorSSR.vue?afaf","webpack:///./src/views/ui-elements/colors/ColorsChangeColorSSR.vue","webpack:///./src/views/ui-elements/colors/ColorsTailwind.vue?7710","webpack:///./src/views/ui-elements/colors/tailwind/TailwindTextClasses.vue?4c44","webpack:///./src/views/ui-elements/colors/tailwind/TailwindTextClasses.vue","webpack:///./src/views/ui-elements/colors/tailwind/TailwindBackgroundClasses.vue?7dea","webpack:///./src/views/ui-elements/colors/tailwind/TailwindBackgroundClasses.vue","webpack:///./src/views/ui-elements/colors/tailwind/TailwindAddMoreColors.vue?f534","webpack:///src/views/ui-elements/colors/tailwind/TailwindAddMoreColors.vue","webpack:///./src/views/ui-elements/colors/tailwind/TailwindAddMoreColors.vue?2ab5","webpack:///./src/views/ui-elements/colors/tailwind/TailwindAddMoreColors.vue","webpack:///src/views/ui-elements/colors/ColorsTailwind.vue","webpack:///./src/views/ui-elements/colors/ColorsTailwind.vue?1e27","webpack:///./src/views/ui-elements/colors/ColorsTailwind.vue?85dc","webpack:///src/views/ui-elements/colors/Colors.vue","webpack:///./src/views/ui-elements/colors/Colors.vue?8a76","webpack:///./src/views/ui-elements/colors/Colors.vue?7a48","webpack:///./src/views/ui-elements/colors/ColorsTailwind.vue?d894","webpack:///./src/views/ui-elements/colors/ColorsChangeColor.vue?ad07"],"names":["render","_vm","this","_h","$createElement","_c","_self","attrs","staticRenderFns","_v","defaultColors","staticClass","slot","component","staticStyle","script","on","$event","changeColor","target","value","components","Prism"],"mappings":"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","file":"js/chunk-6677ab45.efa05be4.js","sourcesContent":["import mod from \"-!../../../../node_modules/@vue/cli-service/node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/lib/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!./Colors.vue?vue&type=style&index=0&lang=scss&\"; export default mod; export * from \"-!../../../../node_modules/@vue/cli-service/node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/lib/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!./Colors.vue?vue&type=style&index=0&lang=scss&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{\"id\":\"colors-demo\"}},[_c('colors-default'),_c('colors-gradient'),_c('colors-customization'),_c('colors-change-color'),_c('colors-change-color-SSR'),_c('colors-tailwind')],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('vx-card',{attrs:{\"title\":\"Default Colors\",\"code-toggler\":\"\"}},[_c('p',[_vm._v(\"We have a series of colors that are used by default. They include:\")]),_c('vx-list',{attrs:{\"list\":_vm.defaultColors}}),_c('p',{staticClass:\"mb-5\"},[_vm._v(\"For each color, we think has its functionality in the application as alerts of errors (\"),_c('strong',[_vm._v(\"danger\")]),_vm._v(\"), warnings to the user (\"),_c('strong',[_vm._v(\"warning\")]),_vm._v(\"), communications of approval (\"),_c('strong',[_vm._v(\"success\")]),_vm._v(\"), or main color of the application (\"),_c('strong',[_vm._v(\"primary\")]),_vm._v(\").\")]),_c('ul',{staticClass:\"demo-alignment text-white\"},[_c('li',{staticClass:\"bg-primary\"},[_vm._v(\"\\n                primary\\n            \")]),_c('li',{staticClass:\"bg-success\"},[_vm._v(\"\\n                success\\n            \")]),_c('li',{staticClass:\"bg-danger\"},[_vm._v(\"\\n                danger\\n            \")]),_c('li',{staticClass:\"bg-warning\"},[_vm._v(\"\\n                warning\\n            \")]),_c('li',{staticClass:\"bg-dark\"},[_vm._v(\"\\n                dark\\n            \")])]),_c('template',{slot:\"codeContainer\"},[_vm._v(\"\\n<ul class=\\\"demo-alignment text-white\\\">\\n  <li class=\\\"bg-primary\\\">primary</li>\\n  <li class=\\\"bg-success\\\">success</li>\\n  <li class=\\\"bg-danger\\\">danger</li>\\n  <li class=\\\"bg-warning\\\">warning</li>\\n  <li class=\\\"bg-dark\\\">dark</li>\\n</ul>\\n        \")])],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n    File Name: ColorDefault.vue\r\n    Description: Theme's main colors(primary, success etc.)\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuesax Admin - VueJS Dashboard Admin Template\r\n      Author: Pixinvent\r\n    Author URL: http://www.themeforest.net/user/pixinvent\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n    <vx-card title=\"Default Colors\" code-toggler>\r\n        \r\n        <p>We have a series of colors that are used by default. They include:</p>\r\n\r\n        <vx-list :list=\"defaultColors\"></vx-list>\r\n\r\n        <p class=\"mb-5\">For each color, we think has its functionality in the application as alerts of errors (<strong>danger</strong>), warnings to the user (<strong>warning</strong>), communications of approval (<strong>success</strong>), or main color of the application (<strong>primary</strong>).</p>\r\n\r\n        <ul class=\"demo-alignment text-white\">\r\n            <li class=\"bg-primary\">\r\n                primary\r\n            </li>\r\n            <li class=\"bg-success\">\r\n                success\r\n            </li>\r\n            <li class=\"bg-danger\">\r\n                danger\r\n            </li>\r\n            <li class=\"bg-warning\">\r\n                warning\r\n            </li>\r\n            <li class=\"bg-dark\">\r\n                dark\r\n            </li>\r\n        </ul>\r\n\r\n        <template slot=\"codeContainer\">\r\n&lt;ul class=&quot;demo-alignment text-white&quot;&gt;\r\n  &lt;li class=&quot;bg-primary&quot;&gt;primary&lt;/li&gt;\r\n  &lt;li class=&quot;bg-success&quot;&gt;success&lt;/li&gt;\r\n  &lt;li class=&quot;bg-danger&quot;&gt;danger&lt;/li&gt;\r\n  &lt;li class=&quot;bg-warning&quot;&gt;warning&lt;/li&gt;\r\n  &lt;li class=&quot;bg-dark&quot;&gt;dark&lt;/li&gt;\r\n&lt;/ul&gt;\r\n        </template>\r\n\r\n    </vx-card>\r\n</template>\r\n\r\n<script>\r\n    export default{\r\n        data() {\r\n            return {\r\n                'defaultColors': [\r\n                    'primary',\r\n                    'success',\r\n                    'danger',\r\n                    'warning',\r\n                    'dark',\r\n                ],\r\n            }\r\n        },\r\n    }\r\n</script>","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/@vue/cli-plugin-babel/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!./ColorsDefault.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/@vue/cli-plugin-babel/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!./ColorsDefault.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ColorsDefault.vue?vue&type=template&id=6fc9866b&\"\nimport script from \"./ColorsDefault.vue?vue&type=script&lang=js&\"\nexport * from \"./ColorsDefault.vue?vue&type=script&lang=js&\"\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('vx-card',{attrs:{\"title\":\"Gradient Colors\",\"code-toggler\":\"\"}},[_c('p',[_vm._v(\"We have make gradient color based on our default color:\")]),_c('vx-list',{attrs:{\"list\":_vm.defaultColors}}),_c('p',{staticClass:\"mb-5\"},[_vm._v(\"For each color, we think has its functionality in the application as alerts of errors (\"),_c('strong',[_vm._v(\"danger\")]),_vm._v(\"), warnings to the user (\"),_c('strong',[_vm._v(\"warning\")]),_vm._v(\"), communications of approval (\"),_c('strong',[_vm._v(\"success\")]),_vm._v(\"), or main color of the application (\"),_c('strong',[_vm._v(\"primary\")]),_vm._v(\").\")]),_c('ul',{staticClass:\"demo-alignment text-white\"},[_c('li',{staticClass:\"bg-primary-gradient text-center\"},[_vm._v(\"\\n                primary gradient\\n            \")]),_c('li',{staticClass:\"bg-success-gradient text-center\"},[_vm._v(\"\\n                success gradient\\n            \")]),_c('li',{staticClass:\"bg-danger-gradient text-center\"},[_vm._v(\"\\n                danger gradient\\n            \")]),_c('li',{staticClass:\"bg-warning-gradient text-center\"},[_vm._v(\"\\n                warning gradient\\n            \")]),_c('li',{staticClass:\"bg-dark-gradient text-center\"},[_vm._v(\"\\n                dark \"),_c('br'),_vm._v(\" gradient\\n            \")])]),_c('template',{slot:\"codeContainer\"},[_vm._v(\"\\n<ul class=\\\"demo-alignment text-white\\\">\\n  <li class=\\\"bg-primary-gradient\\\">primary gradient</li>\\n  <li class=\\\"bg-success-gradient\\\">success gradient</li>\\n  <li class=\\\"bg-danger-gradient\\\">danger gradient</li>\\n  <li class=\\\"bg-warning-gradient\\\">warning gradient</li>\\n  <li class=\\\"bg-dark-gradient\\\">dark gradient</li>\\n</ul>\\n        \")])],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n    File Name: ColorsGradient.vue.vue\r\n    Description: Theme's main colors(primary, success etc.) with gradient\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuesax Admin - VueJS Dashboard Admin Template\r\n      Author: Pixinvent\r\n    Author URL: http://www.themeforest.net/user/pixinvent\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n    <vx-card title=\"Gradient Colors\" code-toggler>\r\n        \r\n        <p>We have make gradient color based on our default color:</p>\r\n\r\n        <vx-list :list=\"defaultColors\"></vx-list>\r\n\r\n        <p class=\"mb-5\">For each color, we think has its functionality in the application as alerts of errors (<strong>danger</strong>), warnings to the user (<strong>warning</strong>), communications of approval (<strong>success</strong>), or main color of the application (<strong>primary</strong>).</p>\r\n\r\n        <ul class=\"demo-alignment text-white\">\r\n            <li class=\"bg-primary-gradient text-center\">\r\n                primary gradient\r\n            </li>\r\n            <li class=\"bg-success-gradient text-center\">\r\n                success gradient\r\n            </li>\r\n            <li class=\"bg-danger-gradient text-center\">\r\n                danger gradient\r\n            </li>\r\n            <li class=\"bg-warning-gradient text-center\">\r\n                warning gradient\r\n            </li>\r\n            <li class=\"bg-dark-gradient text-center\">\r\n                dark <br> gradient\r\n            </li>\r\n        </ul>\r\n\r\n        <template slot=\"codeContainer\">\r\n&lt;ul class=&quot;demo-alignment text-white&quot;&gt;\r\n  &lt;li class=&quot;bg-primary-gradient&quot;&gt;primary gradient&lt;/li&gt;\r\n  &lt;li class=&quot;bg-success-gradient&quot;&gt;success gradient&lt;/li&gt;\r\n  &lt;li class=&quot;bg-danger-gradient&quot;&gt;danger gradient&lt;/li&gt;\r\n  &lt;li class=&quot;bg-warning-gradient&quot;&gt;warning gradient&lt;/li&gt;\r\n  &lt;li class=&quot;bg-dark-gradient&quot;&gt;dark gradient&lt;/li&gt;\r\n&lt;/ul&gt;\r\n        </template>\r\n\r\n    </vx-card>\r\n</template>\r\n\r\n<script>\r\n    export default{\r\n        data() {\r\n            return {\r\n                'defaultColors': [\r\n                    'primary gradient',\r\n                    'success gradient',\r\n                    'danger gradient',\r\n                    'warning gradient',\r\n                    'dark gradient',\r\n                ],\r\n            }\r\n        },\r\n    }\r\n</script>","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/@vue/cli-plugin-babel/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!./ColorsGradient.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/@vue/cli-plugin-babel/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!./ColorsGradient.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ColorsGradient.vue?vue&type=template&id=8bd21acc&\"\nimport script from \"./ColorsGradient.vue?vue&type=script&lang=js&\"\nexport * from \"./ColorsGradient.vue?vue&type=script&lang=js&\"\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('vx-card',{attrs:{\"title\":\"Customize Theme Colors\",\"code-toggler\":\"\",\"code-language\":\"js\"}},[_c('p',[_vm._v(\"We almost always need a personalized application with own colors. In Vuesax, you can change the main colors to those that you need and the branding that your application has.\")]),_c('p',[_vm._v(\"You can change default colors using \"),_c('code',[_vm._v(\"themeColors.js\")]),_vm._v(\" file. You can find this file in src folder.\")]),_c('vs-alert',{staticClass:\"mt-5\",attrs:{\"icon\":\"warning\",\"active\":\"true\",\"color\":\"warning\"}},[_c('span',[_vm._v(\"Only \"),_c('strong',[_vm._v(\"RGB\")]),_vm._v(\" and \"),_c('strong',[_vm._v(\"HEX\")]),_vm._v(\" colors are supported.\")])]),_c('br'),_c('ul',{staticClass:\"demo-alignment text-white\"},[_c('li',{staticStyle:{\"background-color\":\"#5b3cc4\"}},[_vm._v(\"\\n                primary\\n            \")]),_c('li',{staticStyle:{\"background-color\":\"rgb(23, 201, 100)\"}},[_vm._v(\"\\n                success\\n            \")]),_c('li',{staticStyle:{\"background-color\":\"rgb(242, 19, 93)\"}},[_vm._v(\"\\n                danger\\n            \")]),_c('li',{staticStyle:{\"background-color\":\"rgb(255, 130, 0)\"}},[_vm._v(\"\\n                warning\\n            \")]),_c('li',{staticStyle:{\"background-color\":\"rgb(36, 33, 69)\"}},[_vm._v(\"\\n                dark\\n            \")])]),_c('template',{slot:\"codeContainer\"},[_vm._v(\"\\nVue.use(Vuesax, {\\n  theme: {\\n    colors: {\\n      primary: '#5b3cc4',\\n      success: 'rgb(23, 201, 100)',\\n      danger: 'rgb(242, 19, 93)',\\n      warning: 'rgb(255, 130, 0)',\\n      dark: 'rgb(36, 33, 69)'\\n    }\\n  }\\n})\\n        \")])],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","import { render, staticRenderFns } from \"./ColorsCustomization.vue?vue&type=template&id=7aa4b830&\"\nvar script = {}\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('vx-card',{attrs:{\"title\":\"Change Color\",\"code-toggler\":\"\"}},[_c('p',[_vm._v(\"You can change the color of the application in process of execution with the function $vs.theme which as a parameter requires a json with the colors to change\")]),_c('p',[_vm._v(\"Imagine that in the middle of the application we want the primary color change would be something like this:\")]),_c('prism',{staticClass:\"rounded-lg\",attrs:{\"language\":\"js\"}},[_vm._v(\"\\nthis.$vs.theme({\\n  primary:'rgb(5, 173, 88)' // my new color\\n})\\n        \")]),_c('p',{staticClass:\"mt-5\"},[_vm._v(\"By doing this, all \"),_c('strong',[_vm._v(\"Vuesax\")]),_vm._v(\" components in the application that use a primary color with change. Select one of the colors to change it and that all the components of this documentation have that color.\")]),_c('ul',{staticClass:\"demo-alignment text-white\"},[_c('li',{staticClass:\"bg-primary\"},[_c('input',{staticClass:\"absolute w-full h-full cursor-pointer opacity-0\",attrs:{\"type\":\"color\",\"name\":\"\",\"value\":\"\"},on:{\"change\":function($event){return _vm.changeColor($event.target.value,'primary')}}}),_vm._v(\"\\n                primary\\n            \")]),_c('li',{staticClass:\"bg-success\"},[_c('input',{staticClass:\"absolute w-full h-full cursor-pointer opacity-0\",attrs:{\"type\":\"color\",\"name\":\"\",\"value\":\"\"},on:{\"change\":function($event){return _vm.changeColor($event.target.value,'success')}}}),_vm._v(\"\\n                success\\n            \")]),_c('li',{staticClass:\"bg-danger\"},[_c('input',{staticClass:\"absolute w-full h-full cursor-pointer opacity-0\",attrs:{\"type\":\"color\",\"name\":\"\",\"value\":\"\"},on:{\"change\":function($event){return _vm.changeColor($event.target.value,'danger')}}}),_vm._v(\"\\n                danger\\n            \")]),_c('li',{staticClass:\"bg-warning\"},[_c('input',{staticClass:\"absolute w-full h-full cursor-pointer opacity-0\",attrs:{\"type\":\"color\",\"name\":\"\",\"value\":\"\"},on:{\"change\":function($event){return _vm.changeColor($event.target.value,'warning')}}}),_vm._v(\"\\n                warning\\n            \")]),_c('li',{staticClass:\"bg-dark\"},[_c('input',{staticClass:\"absolute w-full h-full cursor-pointer opacity-0\",attrs:{\"type\":\"color\",\"name\":\"\",\"value\":\"\"},on:{\"change\":function($event){return _vm.changeColor($event.target.value,'dark')}}}),_vm._v(\"\\n                dark\\n            \")])]),_c('template',{slot:\"codeContainer\"},[_vm._v(\"\\n<template>\\n  <ul class=\\\"demo-alignment text-white\\\">\\n    <li class=\\\"colorprimaryx\\\">\\n      <input @change=\\\"changeColor($event.target.value,'primary')\\\" type=\\\"color\\\" name=\\\"\\\" value=\\\"\\\">\\n      primary\\n    </li>\\n    <li class=\\\"colorsuccessx\\\">\\n      <input @change=\\\"changeColor($event.target.value,'success')\\\" type=\\\"color\\\" name=\\\"\\\" value=\\\"\\\">\\n      success\\n    </li>\\n    <li class=\\\"colordangerx\\\">\\n      <input @change=\\\"changeColor($event.target.value,'danger')\\\" type=\\\"color\\\" name=\\\"\\\" value=\\\"\\\">\\n      danger\\n    </li>\\n    <li class=\\\"colorwarningx\\\">\\n      <input @change=\\\"changeColor($event.target.value,'warning')\\\" type=\\\"color\\\" name=\\\"\\\" value=\\\"\\\">\\n      warning\\n    </li>\\n    <li class=\\\"colordarkx\\\">\\n      <input @change=\\\"changeColor($event.target.value,'dark')\\\" type=\\\"color\\\" name=\\\"\\\" value=\\\"\\\">\\n      dark\\n    </li>\\n  </ul>\\n</template>\\n\\n<script>\\nexport default {\\n  methods: {\\n    changeColor(colorx, whatColor) {\\n      this.$vs.theme({\\n        [whatColor]: colorx\\n      })\\n    }\\n  }\\n}\\n</script>\\n\\n<style lang=\\\"css\\\" scoped>\\n.colorprimaryx {\\n  background: rgb(var(--vs-primary)) !important;\\n}\\n\\n.colorsuccessx {\\n  background: rgb(var(--vs-success)) !important;\\n}\\n\\n.colordangerx {\\n  background: rgb(var(--vs-danger)) !important;\\n}\\n\\n.colorwarningx {\\n  background: rgb(var(--vs-warning)) !important;\\n}\\n\\n.colordarkx {\\n  background: rgb(var(--vs-dark)) !important;\\n}\\n</style>\\n        \")])],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n    File Name: ColorsChangeColor.vue\r\n    Description: Change theme's main colors - During execution\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuesax Admin - VueJS Dashboard Admin Template\r\n      Author: Pixinvent\r\n    Author URL: http://www.themeforest.net/user/pixinvent\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n    <vx-card title=\"Change Color\" code-toggler>\r\n        \r\n        <p>You can change the color of the application in process of execution with the function $vs.theme which as a parameter requires a json with the colors to change</p>\r\n\r\n        <p>Imagine that in the middle of the application we want the primary color change would be something like this:</p>\r\n\r\n        <prism language=\"js\" class=\"rounded-lg\">\r\nthis.$vs.theme({\r\n  primary:'rgb(5, 173, 88)' // my new color\r\n})\r\n        </prism>\r\n\r\n        <p class=\"mt-5\">By doing this, all <strong>Vuesax</strong> components in the application that use a primary color with change. Select one of the colors to change it and that all the components of this documentation have that color.</p>\r\n\r\n        <ul class=\"demo-alignment text-white\">\r\n            <li class=\"bg-primary\">\r\n                <input class=\"absolute w-full h-full cursor-pointer opacity-0\" @change=\"changeColor($event.target.value,'primary')\" type=\"color\" name=\"\" value=\"\">\r\n                primary\r\n            </li>\r\n            <li class=\"bg-success\">\r\n                <input class=\"absolute w-full h-full cursor-pointer opacity-0\" @change=\"changeColor($event.target.value,'success')\" type=\"color\" name=\"\" value=\"\">\r\n                success\r\n            </li>\r\n            <li class=\"bg-danger\">\r\n                <input class=\"absolute w-full h-full cursor-pointer opacity-0\" @change=\"changeColor($event.target.value,'danger')\" type=\"color\" name=\"\" value=\"\">\r\n                danger\r\n            </li>\r\n            <li class=\"bg-warning\">\r\n                <input class=\"absolute w-full h-full cursor-pointer opacity-0\" @change=\"changeColor($event.target.value,'warning')\" type=\"color\" name=\"\" value=\"\">\r\n                warning\r\n            </li>\r\n            <li class=\"bg-dark\">\r\n                <input class=\"absolute w-full h-full cursor-pointer opacity-0\" @change=\"changeColor($event.target.value,'dark')\" type=\"color\" name=\"\" value=\"\">\r\n                dark\r\n            </li>\r\n        </ul>\r\n\r\n        <template slot=\"codeContainer\">\r\n&lt;template&gt;\r\n  &lt;ul class=&quot;demo-alignment text-white&quot;&gt;\r\n    &lt;li class=&quot;colorprimaryx&quot;&gt;\r\n      &lt;input @change=&quot;changeColor($event.target.value,&apos;primary&apos;)&quot; type=&quot;color&quot; name=&quot;&quot; value=&quot;&quot;&gt;\r\n      primary\r\n    &lt;/li&gt;\r\n    &lt;li class=&quot;colorsuccessx&quot;&gt;\r\n      &lt;input @change=&quot;changeColor($event.target.value,&apos;success&apos;)&quot; type=&quot;color&quot; name=&quot;&quot; value=&quot;&quot;&gt;\r\n      success\r\n    &lt;/li&gt;\r\n    &lt;li class=&quot;colordangerx&quot;&gt;\r\n      &lt;input @change=&quot;changeColor($event.target.value,&apos;danger&apos;)&quot; type=&quot;color&quot; name=&quot;&quot; value=&quot;&quot;&gt;\r\n      danger\r\n    &lt;/li&gt;\r\n    &lt;li class=&quot;colorwarningx&quot;&gt;\r\n      &lt;input @change=&quot;changeColor($event.target.value,&apos;warning&apos;)&quot; type=&quot;color&quot; name=&quot;&quot; value=&quot;&quot;&gt;\r\n      warning\r\n    &lt;/li&gt;\r\n    &lt;li class=&quot;colordarkx&quot;&gt;\r\n      &lt;input @change=&quot;changeColor($event.target.value,&apos;dark&apos;)&quot; type=&quot;color&quot; name=&quot;&quot; value=&quot;&quot;&gt;\r\n      dark\r\n    &lt;/li&gt;\r\n  &lt;/ul&gt;\r\n&lt;/template&gt;\r\n\r\n&lt;script&gt;\r\nexport default {\r\n  methods: {\r\n    changeColor(colorx, whatColor) {\r\n      this.$vs.theme({\r\n        [whatColor]: colorx\r\n      })\r\n    }\r\n  }\r\n}\r\n&lt;/script&gt;\r\n\r\n&lt;style lang=&quot;css&quot; scoped&gt;\r\n.colorprimaryx {\r\n  background: rgb(var(--vs-primary)) !important;\r\n}\r\n\r\n.colorsuccessx {\r\n  background: rgb(var(--vs-success)) !important;\r\n}\r\n\r\n.colordangerx {\r\n  background: rgb(var(--vs-danger)) !important;\r\n}\r\n\r\n.colorwarningx {\r\n  background: rgb(var(--vs-warning)) !important;\r\n}\r\n\r\n.colordarkx {\r\n  background: rgb(var(--vs-dark)) !important;\r\n}\r\n&lt;/style&gt;\r\n        </template>\r\n\r\n    </vx-card>\r\n</template>\r\n\r\n<script>\r\nimport Prism from 'vue-prism-component'\r\n\r\nexport default {\r\n    components: {\r\n        Prism\r\n    },\r\n    methods: {\r\n        changeColor(colorx, whatColor) {\r\n            this.$vs.theme({\r\n                [whatColor]: colorx\r\n            })\r\n        }\r\n    }\r\n}\r\n</script>\r\n\r\n<style scoped>\r\n.demo-alignment li:hover {\r\n    transform: translate(0, 8px);\r\n    box-shadow: 0px 0px 40px -10px rgba(255, 255, 255, 0) !important;\r\n}\r\n</style>","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/@vue/cli-plugin-babel/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!./ColorsChangeColor.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/@vue/cli-plugin-babel/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!./ColorsChangeColor.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ColorsChangeColor.vue?vue&type=template&id=46df1052&scoped=true&\"\nimport script from \"./ColorsChangeColor.vue?vue&type=script&lang=js&\"\nexport * from \"./ColorsChangeColor.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ColorsChangeColor.vue?vue&type=style&index=0&id=46df1052&scoped=true&lang=css&\"\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  \"46df1052\",\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('vx-card',{attrs:{\"title\":\"Change Color SSR\"}},[_c('p',[_vm._v(\"To change the main colors in SSR (Server-Side Rendering) for example if you are using nuxt.js the main variables of stylus and those of css\")]),_c('p',[_vm._v(\"To change the variables we must first import them into a .styl file and change the values of the variables by the colors required\")]),_c('vs-alert',{staticClass:\"my-5\",attrs:{\"icon\":\"warning\",\"active\":\"true\",\"color\":\"warning\"}},[_c('p',{staticClass:\"mb-2\"},[_vm._v(\"In order to change the variables and use them you have to have implemented the stylus loaders, to implement them by npm would be something like this\")]),_c('code',[_vm._v(\"npm i stylus stylus-loader --save-dev\")])]),_c('vs-alert',{staticClass:\"mt-5\",attrs:{\"icon\":\"warning\",\"active\":\"true\",\"color\":\"warning\"}},[_c('p',[_vm._v(\"\\n      The value of the colors can only be\\n      \"),_c('code',[_vm._v(\"RGB\")]),_vm._v(\" and nothing else is added to the number without the letters\\n      \"),_c('code',[_vm._v(\"rgb\")]),_vm._v(\" or the parentheses\\n    \")]),_c('p',[_vm._v(\"\\n      For example if the color is\\n      \"),_c('code',[_vm._v(\"rgb(50,100,200)\")]),_vm._v(\" the value to be implemented is only:\\n      \"),_c('code',[_vm._v(\"50,100,A\")])])]),_c('br'),_c('prism',{staticClass:\"rounded-lg\",attrs:{\"language\":\"js\"}},[_vm._v(\"\\n    // main.styl\\n    @import '~vuesax/dist/styles/index.styl'\\n    \"),_vm._v(\"\\n    $vs-primary = 71, 22, 186\\n    :root {\\n    --vs-primary: $vs-primary\\n    }\\n  \")]),_c('div',{staticClass:\"mt-base\"},[_c('p',[_vm._v(\"The stylus variables of the main colors are:\")]),_c('prism',{staticClass:\"rounded-lg\"},[_vm._v(\"\\n      $vs-primary\\n      $vs-success\\n      $vs-danger\\n      $vs-warning\\n      $vs-dark\\n    \")]),_c('p',{staticClass:\"mt-base\"},[_vm._v(\"And the css variables are:\")]),_c('prism',{staticClass:\"rounded-lg\",attrs:{\"language\":\"css\"}},[_vm._v(\"\\n      --vs-primary\\n      --vs-success\\n      --vs-danger\\n      --vs-warning\\n      --vs-dark\\n    \")])],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n    File Name: ColorsChangeColorSSR.vue\r\n    Description: Change theme's main colors - Server Side Rendering\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuesax Admin - VueJS Dashboard Admin Template\r\n      Author: Pixinvent\r\n    Author URL: http://www.themeforest.net/user/pixinvent\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n  <vx-card title=\"Change Color SSR\">\r\n    <p>To change the main colors in SSR (Server-Side Rendering) for example if you are using nuxt.js the main variables of stylus and those of css</p>\r\n\r\n    <p>To change the variables we must first import them into a .styl file and change the values of the variables by the colors required</p>\r\n\r\n    <vs-alert icon=\"warning\" active=\"true\" color=\"warning\" class=\"my-5\">\r\n      <p\r\n        class=\"mb-2\"\r\n      >In order to change the variables and use them you have to have implemented the stylus loaders, to implement them by npm would be something like this</p>\r\n      <code>npm i stylus stylus-loader --save-dev</code>\r\n    </vs-alert>\r\n\r\n    <vs-alert icon=\"warning\" active=\"true\" color=\"warning\" class=\"mt-5\">\r\n      <p>\r\n        The value of the colors can only be\r\n        <code>RGB</code> and nothing else is added to the number without the letters\r\n        <code>rgb</code> or the parentheses\r\n      </p>\r\n      <p>\r\n        For example if the color is\r\n        <code>rgb(50,100,200)</code> the value to be implemented is only:\r\n        <code>50,100,A</code>\r\n      </p>\r\n    </vs-alert>\r\n    <br />\r\n\r\n    <prism language=\"js\" class=\"rounded-lg\">\r\n      // main.styl\r\n      @import &apos;~vuesax/dist/styles/index.styl&apos;\r\n      <!-- $vs-primary = 50,100,200 -->\r\n      $vs-primary = 71, 22, 186\r\n      :root {\r\n      --vs-primary: $vs-primary\r\n      }\r\n    </prism>\r\n\r\n    <div class=\"mt-base\">\r\n      <p>The stylus variables of the main colors are:</p>\r\n\r\n      <prism class=\"rounded-lg\">\r\n        $vs-primary\r\n        $vs-success\r\n        $vs-danger\r\n        $vs-warning\r\n        $vs-dark\r\n      </prism>\r\n\r\n      <p class=\"mt-base\">And the css variables are:</p>\r\n      <prism class=\"rounded-lg\" language=\"css\">\r\n        --vs-primary\r\n        --vs-success\r\n        --vs-danger\r\n        --vs-warning\r\n        --vs-dark\r\n      </prism>\r\n    </div>\r\n  </vx-card>\r\n</template>\r\n\r\n<script>\r\nimport Prism from \"vue-prism-component\";\r\n\r\nexport default {\r\n  components: {\r\n    Prism\r\n  }\r\n};\r\n</script>","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/@vue/cli-plugin-babel/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!./ColorsChangeColorSSR.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/@vue/cli-plugin-babel/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!./ColorsChangeColorSSR.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ColorsChangeColorSSR.vue?vue&type=template&id=60ca9200&\"\nimport script from \"./ColorsChangeColorSSR.vue?vue&type=script&lang=js&\"\nexport * from \"./ColorsChangeColorSSR.vue?vue&type=script&lang=js&\"\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('vx-card',{attrs:{\"title\":\"Tailwind Colors\"}},[_c('span',[_vm._v(\"Tailwind creates \"),_c('code',[_vm._v(\"text-{color}\")]),_vm._v(\" and \"),_c('code',[_vm._v(\"bg-{color}\")]),_vm._v(\" for text color and background color.\")]),_c('div',{staticClass:\"mt-5\"},[_c('tailwind-text-classes'),_c('tailwind-background-classes'),_c('tailwind-add-more-colors')],1)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('vx-card',{attrs:{\"title\":\"Text Classes\",\"code-toggler\":\"\",\"no-shadow\":\"\",\"card-border\":\"\"}},[_c('span',[_vm._v(\"You can use \"),_c('code',[_vm._v(\"text-{color}\")]),_vm._v(\" for applying default colors to text.\")]),_c('br'),_c('span',[_vm._v(\"There is also other tailwind classes like \"),_c('code',[_vm._v(\"text-white\")]),_vm._v(\", \"),_c('code',[_vm._v(\"text-black\")]),_vm._v(\", \"),_c('code',[_vm._v(\"text-transparent\")])]),_c('div',{staticClass:\"demo-alignment\"},[_c('span',{staticClass:\"text-primary\"},[_vm._v(\"primary\")]),_c('span',{staticClass:\"text-success\"},[_vm._v(\"success\")]),_c('span',{staticClass:\"text-danger\"},[_vm._v(\"danger\")]),_c('span',{staticClass:\"text-warning\"},[_vm._v(\"warning\")]),_c('span',{staticClass:\"text-dark\"},[_vm._v(\"dark\")]),_c('span',{staticClass:\"text-white bg-primary p-2 rounded\"},[_vm._v(\"white\")]),_c('span',{staticClass:\"text-black\"},[_vm._v(\"black\")]),_c('span',{staticClass:\"text-transparent\"},[_vm._v(\"transparent\")])]),_c('template',{slot:\"codeContainer\"},[_vm._v(\"\\n\\n<div class=\\\"demo-alignment\\\">\\n  <span class=\\\"text-primary\\\">primary</span>\\n  <span class=\\\"text-success\\\">success</span>\\n  <span class=\\\"text-danger\\\">danger</span>\\n  <span class=\\\"text-warning\\\">warning</span>\\n  <span class=\\\"text-dark\\\">dark</span>\\n  <span class=\\\"text-white op-block\\\">white</span>\\n  <span class=\\\"text-black\\\">black</span>\\n  <span class=\\\"text-transparent op-block\\\">transparent</span>\\n</div>\\n\\n        \")])],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","import { render, staticRenderFns } from \"./TailwindTextClasses.vue?vue&type=template&id=dbc05c9a&\"\nvar script = {}\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('vx-card',{attrs:{\"title\":\"Background Classes\",\"code-toggler\":\"\",\"no-shadow\":\"\",\"card-border\":\"\"}},[_c('span',[_vm._v(\"You can use \"),_c('code',[_vm._v(\"bg-{color}\")]),_vm._v(\" for applying default colors to background.\")]),_c('br'),_c('span',[_vm._v(\"There is also other tailwind classes like \"),_c('code',[_vm._v(\"bg-white\")]),_vm._v(\", \"),_c('code',[_vm._v(\"bg-black\")]),_vm._v(\", \"),_c('code',[_vm._v(\"bg-transparent\")])]),_c('ul',{staticClass:\"demo-alignment text-white mt-5\"},[_c('li',{staticClass:\"bg-primary\"},[_vm._v(\"primary\")]),_c('li',{staticClass:\"bg-success\"},[_vm._v(\"success\")]),_c('li',{staticClass:\"bg-danger\"},[_vm._v(\"danger\")]),_c('li',{staticClass:\"bg-warning\"},[_vm._v(\"warning\")]),_c('li',{staticClass:\"bg-dark\"},[_vm._v(\"dark\")]),_c('li',{staticClass:\"bg-white text-dark\"},[_vm._v(\"white\")]),_c('li',{staticClass:\"bg-black\"},[_vm._v(\"black\")]),_c('li',{staticClass:\"bg-transparent text-dark\"},[_vm._v(\"transparent\")])]),_c('template',{slot:\"codeContainer\"},[_vm._v(\"\\n\\n<ul class=\\\"demo-alignment text-white\\\">\\n  <li class=\\\"bg-primary\\\">primary</li>\\n  <li class=\\\"bg-success\\\">success</li>\\n  <li class=\\\"bg-danger\\\">danger</li>\\n  <li class=\\\"bg-warning\\\">warning</li>\\n  <li class=\\\"bg-dark\\\">dark</li>\\n  <li class=\\\"bg-white text-dark\\\">white</li>\\n  <li class=\\\"bg-black\\\">black</li>\\n  <li class=\\\"bg-transparent text-dark\\\">transparent</li>\\n</ul>\\n\\n        \")])],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","import { render, staticRenderFns } from \"./TailwindBackgroundClasses.vue?vue&type=template&id=0f00a2e9&\"\nvar script = {}\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('vx-card',{attrs:{\"title\":\"Add more colors\",\"no-shadow\":\"\",\"card-border\":\"\"}},[_c('p',[_vm._v(\"You can add more colors in \"),_c('code',[_vm._v(\"tailwind.js\")]),_vm._v(\" file. You can find this file in root folder.\")]),_c('span',{staticClass:\"mb-5\"},[_vm._v(\"Checkout Color Customization in \"),_c('a',{attrs:{\"href\":\"https://tailwindcss.com/docs/text-color#customizing\",\"target\":\"_blank\"}},[_vm._v(\"Tailwind\")])]),_c('prism',{staticClass:\"rounded-lg\",attrs:{\"language\":\"js\"}},[_vm._v(\"\\ncolors: {\\n\\n  ....\\n  'secondary': '#767c82',\\n  ....\\n\\n}\\n        \")]),_c('template',{slot:\"codeContainer\"}),_c('vs-alert',{staticClass:\"mt-5\",attrs:{\"color\":\"primary\",\"icon\":\"new_releases\",\"active\":\"true\"}},[_c('span',[_vm._v(\"After registering color you can use \"),_c('code',[_vm._v(\"text-secondary\")]),_vm._v(\" and \"),_c('code',[_vm._v(\"bg-secondary\")]),_vm._v(\" in theme\")])])],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n    File Name: TailwindAddMoreColors.vue\r\n    Description: Add more colors to theme using tailwind\r\n    Note: You can't use this colors in props\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuesax Admin - VueJS Dashboard Admin Template\r\n      Author: Pixinvent\r\n    Author URL: http://www.themeforest.net/user/pixinvent\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n    <vx-card title=\"Add more colors\" no-shadow card-border>\r\n\r\n        <p>You can add more colors in <code>tailwind.js</code> file. You can find this file in root folder.</p>\r\n        <span class=\"mb-5\">Checkout Color Customization in <a href=\"https://tailwindcss.com/docs/text-color#customizing\" target=\"_blank\">Tailwind</a></span>\r\n\r\n        <prism language=\"js\" class=\"rounded-lg\">\r\ncolors: {\r\n\r\n  ....\r\n  'secondary': '#767c82',\r\n  ....\r\n\r\n}\r\n        </prism>\r\n\r\n        <template slot=\"codeContainer\">\r\n\r\n        </template>\r\n\r\n        <vs-alert color=\"primary\" icon=\"new_releases\" active=\"true\" class=\"mt-5\">\r\n            <span>After registering color you can use <code>text-secondary</code> and <code>bg-secondary</code> in theme</span>\r\n        </vs-alert>\r\n    </vx-card>\r\n</template>\r\n\r\n<script>\r\nimport Prism from 'vue-prism-component'\r\n\r\n    export default{\r\n        components: {\r\n            Prism\r\n        }\r\n    }\r\n</script>\r\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/@vue/cli-plugin-babel/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!./TailwindAddMoreColors.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/@vue/cli-plugin-babel/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!./TailwindAddMoreColors.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./TailwindAddMoreColors.vue?vue&type=template&id=6a67f333&\"\nimport script from \"./TailwindAddMoreColors.vue?vue&type=script&lang=js&\"\nexport * from \"./TailwindAddMoreColors.vue?vue&type=script&lang=js&\"\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","<!-- =========================================================================================\r\n    File Name: ColorTailwind.vue\r\n    Description: Tailwind Colors - Imports all page portions\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuesax Admin - VueJS Dashboard Admin Template\r\n      Author: Pixinvent\r\n    Author URL: http://www.themeforest.net/user/pixinvent\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n    <vx-card title=\"Tailwind Colors\">\r\n        <span>Tailwind creates <code>text-{color}</code> and <code>bg-{color}</code> for text color and background color.</span>\r\n\r\n        <div class=\"mt-5\">\r\n            <tailwind-text-classes></tailwind-text-classes>\r\n            <tailwind-background-classes></tailwind-background-classes>\r\n            <tailwind-add-more-colors></tailwind-add-more-colors>\r\n        </div>\r\n\r\n    </vx-card>\r\n</template>\r\n\r\n<script>\r\nimport TailwindTextClasses from './tailwind/TailwindTextClasses.vue'\r\nimport TailwindBackgroundClasses from './tailwind/TailwindBackgroundClasses.vue'\r\nimport TailwindAddMoreColors from './tailwind/TailwindAddMoreColors.vue'\r\n\r\nexport default{\r\n    components: {\r\n        TailwindTextClasses,\r\n        TailwindBackgroundClasses,\r\n        TailwindAddMoreColors,\r\n    }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n#colors-demo {\r\n    .demo-alignment li {\r\n        width: 100px;\r\n        height: 100px;\r\n        margin: 10px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        border-radius: 10px;\r\n        cursor: default;\r\n        box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);\r\n    }\r\n}\r\n</style>","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/@vue/cli-plugin-babel/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!./ColorsTailwind.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/@vue/cli-plugin-babel/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!./ColorsTailwind.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ColorsTailwind.vue?vue&type=template&id=53530a7a&\"\nimport script from \"./ColorsTailwind.vue?vue&type=script&lang=js&\"\nexport * from \"./ColorsTailwind.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ColorsTailwind.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","<!-- =========================================================================================\r\n    File Name: Colors.vue\r\n    Description: Color Pallet - Imports all page portions\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuesax Admin - VueJS Dashboard Admin Template\r\n      Author: Pixinvent\r\n    Author URL: http://www.themeforest.net/user/pixinvent\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n    <div id=\"colors-demo\">\r\n        <colors-default></colors-default>\r\n        <colors-gradient></colors-gradient>\r\n        <colors-customization></colors-customization>\r\n        <colors-change-color></colors-change-color>\r\n        <colors-change-color-SSR></colors-change-color-SSR>\r\n        <colors-tailwind></colors-tailwind>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nimport ColorsDefault from './ColorsDefault.vue'\r\nimport ColorsGradient from './ColorsGradient.vue'\r\nimport ColorsCustomization from './ColorsCustomization.vue'\r\nimport ColorsChangeColor from './ColorsChangeColor.vue'\r\nimport ColorsChangeColorSSR from './ColorsChangeColorSSR.vue'\r\nimport ColorsTailwind from './ColorsTailwind.vue'\r\n\r\nexport default{\r\n    components: {\r\n        ColorsDefault,\r\n        ColorsGradient,\r\n        ColorsCustomization,\r\n        ColorsChangeColor,\r\n        ColorsChangeColorSSR,\r\n        ColorsTailwind\r\n    }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n@import \"@/assets/scss/vuesax/pages/colors.scss\";\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/@vue/cli-plugin-babel/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!./Colors.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/@vue/cli-plugin-babel/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!./Colors.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Colors.vue?vue&type=template&id=11303993&\"\nimport script from \"./Colors.vue?vue&type=script&lang=js&\"\nexport * from \"./Colors.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Colors.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","import mod from \"-!../../../../node_modules/@vue/cli-service/node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/lib/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!./ColorsTailwind.vue?vue&type=style&index=0&lang=scss&\"; export default mod; export * from \"-!../../../../node_modules/@vue/cli-service/node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/lib/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!./ColorsTailwind.vue?vue&type=style&index=0&lang=scss&\"","import mod from \"-!../../../../node_modules/@vue/cli-service/node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/lib/index.js??ref--6-oneOf-1-2!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ColorsChangeColor.vue?vue&type=style&index=0&id=46df1052&scoped=true&lang=css&\"; export default mod; export * from \"-!../../../../node_modules/@vue/cli-service/node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/lib/index.js??ref--6-oneOf-1-2!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ColorsChangeColor.vue?vue&type=style&index=0&id=46df1052&scoped=true&lang=css&\""],"sourceRoot":""}