{"version":3,"sources":["webpack:///./src/views/ui-elements/colors/ColorsChangeColor.vue?da5a","webpack:///./src/views/ui-elements/colors/Colors.vue?43a2","webpack:///./src/views/ui-elements/colors/Colors.vue?1a48","webpack:///./src/views/ui-elements/colors/ColorsDefault.vue?bd25","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?b85d","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?f7d8","webpack:///./src/views/ui-elements/colors/ColorsCustomization.vue","webpack:///./src/views/ui-elements/colors/ColorsChangeColor.vue?49e2","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?1392","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?7b1f","webpack:///./src/views/ui-elements/colors/tailwind/TailwindTextClasses.vue?bfc6","webpack:///./src/views/ui-elements/colors/tailwind/TailwindTextClasses.vue","webpack:///./src/views/ui-elements/colors/tailwind/TailwindBackgroundClasses.vue?8a7a","webpack:///./src/views/ui-elements/colors/tailwind/TailwindBackgroundClasses.vue","webpack:///./src/views/ui-elements/colors/tailwind/TailwindAddMoreColors.vue?125c","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?159b"],"names":["_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_271ba21e_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__","__webpack_require__","_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_271ba21e_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0___default","n","_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_lib_loader_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___WEBPACK_IMPORTED_MODULE_0__","_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_lib_loader_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___WEBPACK_IMPORTED_MODULE_0___default","render","_vm","this","_h","$createElement","_c","_self","attrs","id","staticRenderFns","ColorsDefaultvue_type_template_id_6fc9866b_render","title","code-toggler","_v","list","defaultColors","staticClass","slot","ColorsDefaultvue_type_template_id_6fc9866b_staticRenderFns","ColorsDefaultvue_type_script_lang_js_","data","colors_ColorsDefaultvue_type_script_lang_js_","component","Object","componentNormalizer","ColorsDefault","ColorsGradientvue_type_template_id_8bd21acc_render","ColorsGradientvue_type_template_id_8bd21acc_staticRenderFns","ColorsGradientvue_type_script_lang_js_","colors_ColorsGradientvue_type_script_lang_js_","ColorsGradient_component","ColorsGradient","ColorsCustomizationvue_type_template_id_7aa4b830_render","code-language","icon","active","color","staticStyle","background-color","ColorsCustomizationvue_type_template_id_7aa4b830_staticRenderFns","script","ColorsCustomization_component","ColorsCustomization","ColorsChangeColorvue_type_template_id_271ba21e_scoped_true_render","language","type","name","value","on","change","$event","changeColor","target","ColorsChangeColorvue_type_template_id_271ba21e_scoped_true_staticRenderFns","ColorsChangeColorvue_type_script_lang_js_","components","Prism","vue_prism_component_common_default","a","methods","colorx","whatColor","$vs","theme","defineProperty","colors_ColorsChangeColorvue_type_script_lang_js_","ColorsChangeColor_component","ColorsChangeColor","ColorsChangeColorSSRvue_type_template_id_27ea6706_render","ColorsChangeColorSSRvue_type_template_id_27ea6706_staticRenderFns","ColorsChangeColorSSRvue_type_script_lang_js_","colors_ColorsChangeColorSSRvue_type_script_lang_js_","ColorsChangeColorSSR_component","ColorsChangeColorSSR","ColorsTailwindvue_type_template_id_53530a7a_render","ColorsTailwindvue_type_template_id_53530a7a_staticRenderFns","TailwindTextClassesvue_type_template_id_dbc05c9a_render","no-shadow","card-border","TailwindTextClassesvue_type_template_id_dbc05c9a_staticRenderFns","TailwindTextClasses_script","TailwindTextClasses_component","TailwindTextClasses","TailwindBackgroundClassesvue_type_template_id_0f00a2e9_render","TailwindBackgroundClassesvue_type_template_id_0f00a2e9_staticRenderFns","TailwindBackgroundClasses_script","TailwindBackgroundClasses_component","TailwindBackgroundClasses","TailwindAddMoreColorsvue_type_template_id_6a67f333_render","href","TailwindAddMoreColorsvue_type_template_id_6a67f333_staticRenderFns","TailwindAddMoreColorsvue_type_script_lang_js_","tailwind_TailwindAddMoreColorsvue_type_script_lang_js_","TailwindAddMoreColors_component","TailwindAddMoreColors","ColorsTailwindvue_type_script_lang_js_","colors_ColorsTailwindvue_type_script_lang_js_","ColorsTailwind_component","ColorsTailwind","Colorsvue_type_script_lang_js_","colors_Colorsvue_type_script_lang_js_","Colors_component","__webpack_exports__","_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_lib_loader_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___WEBPACK_IMPORTED_MODULE_0__","_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_lib_loader_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___WEBPACK_IMPORTED_MODULE_0___default"],"mappings":"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","file":"js/chunk-f91fa32e.8cc4578d.js","sourcesContent":["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=271ba21e&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=271ba21e&scoped=true&lang=css&\"","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/lib/loader.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/lib/loader.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: var(--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: var(--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=271ba21e&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=271ba21e&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  \"271ba21e\",\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(\"The value of the colors can only be \"),_c('code',[_vm._v(\"RGB\")]),_vm._v(\" and nothing else is added to the number without the letters \"),_c('code',[_vm._v(\"rgb\")]),_vm._v(\" or the parentheses\")]),_c('p',[_vm._v(\"For example if the color is \"),_c('code',[_vm._v(\"rgb(50,100,200)\")]),_vm._v(\" the value to be implemented is only: \"),_c('code',[_vm._v(\"50,100,A\")])])]),_c('br'),_c('prism',{staticClass:\"rounded-lg\",attrs:{\"language\":\"js\"}},[_vm._v(\"            \\n// main.styl\\n\\n@import '~vuesax/dist/styles/index.styl'\\n\\n$vs-primary = 20,20,20\\n\\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--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        \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 class=\"mb-2\">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            \r\n            \r\n        </vs-alert>\r\n\r\n        <vs-alert icon=\"warning\" active=\"true\" color=\"warning\" class=\"mt-5\">\r\n            <p>The value of the colors can only be <code>RGB</code> and nothing else is added to the number without the letters <code>rgb</code> or the parentheses</p>\r\n            <p>For example if the color is <code>rgb(50,100,200)</code> the value to be implemented is only: <code>50,100,A</code></p>\r\n        </vs-alert><br>\r\n\r\n        <prism language=\"js\" class=\"rounded-lg\">            \r\n// main.styl\r\n\r\n@import &apos;~vuesax/dist/styles/index.styl&apos;\r\n\r\n$vs-primary = 20,20,20\r\n\r\n:root {\r\n  --vs-primary: $vs-primary\r\n}\r\n        </prism>\r\n\r\n        <div class=\"mt-base\">\r\n            \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--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\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=27ea6706&\"\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/lib/loader.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/lib/loader.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&\""],"sourceRoot":""}