{"version":3,"sources":["webpack:///./src/views/ui/colors/Colors.vue?aac7","webpack:///./src/views/ui/colors/Colors.vue?5636","webpack:///src/views/ui/colors/Colors.vue","webpack:///./src/views/ui/colors/Colors.vue?5f1f","webpack:///./src/views/ui/colors/Colors.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","attrs","staticClass","_v","staticRenderFns","components","BCard","BAlert","BLink","BRow","BCol","BCardText","component"],"mappings":"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","file":"js/chunk-165a98c0.f46a5093.js","sourcesContent":["export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Colors.vue?vue&type=style&index=0&id=6b331766&prod&lang=scss&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-row',[_c('b-col',{attrs:{\"cols\":\"12\"}},[_c('b-card',{staticClass:\"background-color\",attrs:{\"title\":\"Default Colors\"}},[_c('b-alert',{attrs:{\"variant\":\"primary\",\"show\":\"\"}},[_c('div',{staticClass:\"alert-body\"},[_vm._v(\" For more color classes options please read the \"),_c('b-link',{staticClass:\"alert-link\",attrs:{\"href\":\"https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/documentation/documentation-colors.html\",\"target\":\"_blank\"}},[_vm._v(\" documentation. \")])],1)]),_c('b-card-text',{staticClass:\"mb-0\"},[_vm._v(\" We have a series of colors that are used by default. They include: \")]),_c('ul',{staticClass:\"colors-list list-unstyled mb-0\"},[_c('li',[_c('feather-icon',{attrs:{\"size\":\"15\",\"icon\":\"ChevronsRightIcon\"}}),_c('span',[_vm._v(\"Primary\")])],1),_c('li',[_c('feather-icon',{attrs:{\"size\":\"15\",\"icon\":\"ChevronsRightIcon\"}}),_c('span',[_vm._v(\"Secondary\")])],1),_c('li',[_c('feather-icon',{attrs:{\"size\":\"15\",\"icon\":\"ChevronsRightIcon\"}}),_c('span',[_vm._v(\"Success\")])],1),_c('li',[_c('feather-icon',{attrs:{\"size\":\"15\",\"icon\":\"ChevronsRightIcon\"}}),_c('span',[_vm._v(\"Warning\")])],1),_c('li',[_c('feather-icon',{attrs:{\"size\":\"15\",\"icon\":\"ChevronsRightIcon\"}}),_c('span',[_vm._v(\"Danger\")])],1),_c('li',[_c('feather-icon',{attrs:{\"size\":\"15\",\"icon\":\"ChevronsRightIcon\"}}),_c('span',[_vm._v(\"Info\")])],1)]),_c('b-card-text',[_vm._v(\" For each color, we think has its functionality in the application as alerts of errors \"),_c('b',[_vm._v(\"(danger)\")]),_vm._v(\", warnings to the user \"),_c('b',[_vm._v(\"(warning)\")]),_vm._v(\", communications of approval \"),_c('b',[_vm._v(\"(success)\")]),_vm._v(\", or main color of the application \"),_c('b',[_vm._v(\"(primary)\")]),_vm._v(\". \")]),_c('div',{staticClass:\"d-flex justify-content-start flex-wrap\"},[_c('div',{staticClass:\"text-center bg-primary colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\"},[_c('span',[_vm._v(\"primary\")])]),_c('div',{staticClass:\"text-center bg-secondary colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\"},[_c('span',[_vm._v(\"secondary\")])]),_c('div',{staticClass:\"text-center bg-success colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\"},[_c('span',[_vm._v(\"success\")])]),_c('div',{staticClass:\"text-center bg-warning colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\"},[_c('span',[_vm._v(\"warning\")])]),_c('div',{staticClass:\"text-center bg-danger colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\"},[_c('span',[_vm._v(\"danger\")])]),_c('div',{staticClass:\"text-center bg-info colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center my-1 ml-50 shadow\"},[_c('span',[_vm._v(\"info\")])])]),_c('h6',{staticClass:\"mt-1\"},[_vm._v(\" Lighten Variant \")]),_c('b-card-text',{staticClass:\"mb-0\"},[_vm._v(\" Use \"),_c('code',[_vm._v(\".bg-{color}.bg-lighten-{1 | 2 | 3 | 4 | 5}\")]),_vm._v(\" classes for lighten background color. \")]),_c('div',{staticClass:\"d-flex justify-content-start flex-wrap\"},[_c('div',{staticClass:\"text-center bg-primary bg-lighten-2 colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\"},[_c('span',[_vm._v(\"lighten-2\")])]),_c('div',{staticClass:\"text-center bg-secondary bg-lighten-2 colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\"},[_c('span',[_vm._v(\"lighten-2\")])]),_c('div',{staticClass:\"text-center bg-success bg-lighten-2 colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\"},[_c('span',[_vm._v(\"lighten-2\")])]),_c('div',{staticClass:\"text-center bg-warning bg-lighten-2 colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\"},[_c('span',[_vm._v(\"lighten-2\")])]),_c('div',{staticClass:\"text-center bg-danger bg-lighten-2 colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\"},[_c('span',[_vm._v(\"lighten-2\")])]),_c('div',{staticClass:\"text-center bg-info bg-lighten-2 colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center my-1 ml-50 shadow\"},[_c('span',[_vm._v(\"lighten-2\")])])]),_c('h6',{staticClass:\"mt-1\"},[_vm._v(\" Darken Variant \")]),_c('b-card-text',{staticClass:\"mb-0\"},[_vm._v(\" Use \"),_c('code',[_vm._v(\".bg-{color}.bg-darken-{1 | 2 | 3 | 4}\")]),_vm._v(\" classes for darken background color. \")]),_c('div',{staticClass:\"d-flex justify-content-start flex-wrap\"},[_c('div',{staticClass:\"text-center bg-primary bg-darken-2 colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\"},[_c('span',[_vm._v(\"darken-2\")])]),_c('div',{staticClass:\"text-center bg-secondary bg-darken-2 colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\"},[_c('span',[_vm._v(\"darken-2\")])]),_c('div',{staticClass:\"text-center bg-success bg-darken-2 colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\"},[_c('span',[_vm._v(\"darken-2\")])]),_c('div',{staticClass:\"text-center bg-warning bg-darken-2 colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\"},[_c('span',[_vm._v(\"darken-2\")])]),_c('div',{staticClass:\"text-center bg-danger bg-darken-2 colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\"},[_c('span',[_vm._v(\"darken-2\")])]),_c('div',{staticClass:\"text-center bg-info bg-darken-2 colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center my-1 ml-50 shadow\"},[_c('span',[_vm._v(\"darken-2\")])])])],1),_c('b-card',{attrs:{\"title\":\"Gradient Colors\"}},[_c('b-card-text',{staticClass:\"mb-0\"},[_vm._v(\" We have make gradient color based on our default color: \")]),_c('ul',{staticClass:\"colors-list list-unstyled mb-0\"},[_c('li',[_c('feather-icon',{attrs:{\"size\":\"15\",\"icon\":\"ChevronsRightIcon\"}}),_c('span',[_vm._v(\"bg-gradient-primary\")])],1),_c('li',[_c('feather-icon',{attrs:{\"size\":\"15\",\"icon\":\"ChevronsRightIcon\"}}),_c('span',[_vm._v(\"bg-gradient-secondary\")])],1),_c('li',[_c('feather-icon',{attrs:{\"size\":\"15\",\"icon\":\"ChevronsRightIcon\"}}),_c('span',[_vm._v(\"bg-gradient-success\")])],1),_c('li',[_c('feather-icon',{attrs:{\"size\":\"15\",\"icon\":\"ChevronsRightIcon\"}}),_c('span',[_vm._v(\"bg-gradient-warning\")])],1),_c('li',[_c('feather-icon',{attrs:{\"size\":\"15\",\"icon\":\"ChevronsRightIcon\"}}),_c('span',[_vm._v(\"bg-gradient-danger\")])],1),_c('li',[_c('feather-icon',{attrs:{\"size\":\"15\",\"icon\":\"ChevronsRightIcon\"}}),_c('span',[_vm._v(\"bg-gradient-info\")])],1)]),_c('b-card-text',[_vm._v(\" For each color, we think has its functionality in the application as alerts of errors \"),_c('b',[_vm._v(\"(danger)\")]),_vm._v(\", warnings to the user \"),_c('b',[_vm._v(\"(warning)\")]),_vm._v(\", communications of approval \"),_c('b',[_vm._v(\"(success)\")]),_vm._v(\", or main color of the application \"),_c('b',[_vm._v(\"(primary)\")]),_vm._v(\". \")]),_c('div',{staticClass:\"d-flex justify-content-start flex-wrap\"},[_c('div',{staticClass:\"text-center colors-container bg-gradient-primary rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\"},[_c('span',[_vm._v(\"primary gradient\")])]),_c('div',{staticClass:\"text-center colors-container bg-gradient-secondary rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\"},[_c('span',[_vm._v(\"secondary gradient\")])]),_c('div',{staticClass:\"text-center colors-container bg-gradient-success rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\"},[_c('span',[_vm._v(\"success gradient\")])]),_c('div',{staticClass:\"text-center colors-container bg-gradient-warning rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\"},[_c('span',[_vm._v(\"warning gradient\")])]),_c('div',{staticClass:\"text-center colors-container bg-gradient-danger rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\"},[_c('span',[_vm._v(\"danger gradient\")])]),_c('div',{staticClass:\"text-center colors-container bg-gradient-info rounded text-white width-100 height-100 d-flex align-items-center justify-content-center my-1 ml-50 shadow px-1\"},[_c('span',[_vm._v(\"info gradient\")])])])],1)],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <b-row>\r\n    <b-col cols=\"12\">\r\n      <!-- Default Colors -->\r\n      <b-card\r\n        title=\"Default Colors\"\r\n        class=\"background-color\"\r\n      >\r\n        <!-- alert -->\r\n        <b-alert\r\n          variant=\"primary\"\r\n          show\r\n        >\r\n          <div class=\"alert-body\">\r\n            For more color classes options please read the\r\n            <b-link\r\n              href=\"https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/documentation/documentation-colors.html\"\r\n              target=\"_blank\"\r\n              class=\"alert-link\"\r\n            >\r\n              documentation.\r\n            </b-link>\r\n          </div>\r\n        </b-alert>\r\n        <!--/ alert -->\r\n\r\n        <b-card-text class=\"mb-0\">\r\n          We have a series of colors that are used by default. They include:\r\n        </b-card-text>\r\n        <ul class=\"colors-list list-unstyled mb-0\">\r\n          <li>\r\n            <feather-icon\r\n              size=\"15\"\r\n              icon=\"ChevronsRightIcon\"\r\n            />\r\n            <span>Primary</span>\r\n          </li>\r\n          <li>\r\n            <feather-icon\r\n              size=\"15\"\r\n              icon=\"ChevronsRightIcon\"\r\n            />\r\n            <span>Secondary</span>\r\n          </li>\r\n          <li>\r\n            <feather-icon\r\n              size=\"15\"\r\n              icon=\"ChevronsRightIcon\"\r\n            />\r\n            <span>Success</span>\r\n          </li>\r\n          <li>\r\n            <feather-icon\r\n              size=\"15\"\r\n              icon=\"ChevronsRightIcon\"\r\n            />\r\n            <span>Warning</span>\r\n          </li>\r\n          <li>\r\n            <feather-icon\r\n              size=\"15\"\r\n              icon=\"ChevronsRightIcon\"\r\n            />\r\n            <span>Danger</span>\r\n          </li>\r\n          <li>\r\n            <feather-icon\r\n              size=\"15\"\r\n              icon=\"ChevronsRightIcon\"\r\n            />\r\n            <span>Info</span>\r\n          </li>\r\n        </ul>\r\n        <b-card-text>\r\n          For each color, we think has its functionality in the application as alerts of errors <b>(danger)</b>,\r\n          warnings to the user <b>(warning)</b>, communications of approval <b>(success)</b>, or main color of the\r\n          application <b>(primary)</b>.\r\n        </b-card-text>\r\n        <!-- default -->\r\n        <div class=\"d-flex justify-content-start flex-wrap\">\r\n          <div class=\"text-center bg-primary colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\">\r\n            <span>primary</span>\r\n          </div>\r\n          <div class=\"text-center bg-secondary colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\">\r\n            <span>secondary</span>\r\n          </div>\r\n          <div class=\"text-center bg-success colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\">\r\n            <span>success</span>\r\n          </div>\r\n          <div class=\"text-center bg-warning colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\">\r\n            <span>warning</span>\r\n          </div>\r\n          <div class=\"text-center bg-danger colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\">\r\n            <span>danger</span>\r\n          </div>\r\n          <div class=\"text-center bg-info colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center my-1 ml-50 shadow\">\r\n            <span>info</span>\r\n          </div>\r\n        </div>\r\n        <!--/ default -->\r\n\r\n        <!-- light colors -->\r\n        <h6 class=\"mt-1\">\r\n          Lighten Variant\r\n        </h6>\r\n        <b-card-text class=\"mb-0\">\r\n          Use <code>.bg-{color}.bg-lighten-{1 | 2 | 3 | 4 | 5}</code> classes for lighten background color.\r\n        </b-card-text>\r\n        <div class=\"d-flex justify-content-start flex-wrap\">\r\n          <div class=\"text-center bg-primary bg-lighten-2 colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\">\r\n            <span>lighten-2</span>\r\n          </div>\r\n          <div class=\"text-center bg-secondary bg-lighten-2 colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\">\r\n            <span>lighten-2</span>\r\n          </div>\r\n          <div class=\"text-center bg-success bg-lighten-2 colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\">\r\n            <span>lighten-2</span>\r\n          </div>\r\n          <div class=\"text-center bg-warning bg-lighten-2 colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\">\r\n            <span>lighten-2</span>\r\n          </div>\r\n          <div class=\"text-center bg-danger bg-lighten-2 colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\">\r\n            <span>lighten-2</span>\r\n          </div>\r\n          <div class=\"text-center bg-info bg-lighten-2 colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center my-1 ml-50 shadow\">\r\n            <span>lighten-2</span>\r\n          </div>\r\n        </div>\r\n        <!--/ light colors -->\r\n\r\n        <!-- dark colors -->\r\n        <h6 class=\"mt-1\">\r\n          Darken Variant\r\n        </h6>\r\n        <b-card-text class=\"mb-0\">\r\n          Use <code>.bg-{color}.bg-darken-{1 | 2 | 3 | 4}</code> classes for darken background color.\r\n        </b-card-text>\r\n        <div class=\"d-flex justify-content-start flex-wrap\">\r\n          <div class=\"text-center bg-primary bg-darken-2 colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\">\r\n            <span>darken-2</span>\r\n          </div>\r\n          <div class=\"text-center bg-secondary bg-darken-2 colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\">\r\n            <span>darken-2</span>\r\n          </div>\r\n          <div class=\"text-center bg-success bg-darken-2 colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\">\r\n            <span>darken-2</span>\r\n          </div>\r\n          <div class=\"text-center bg-warning bg-darken-2 colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\">\r\n            <span>darken-2</span>\r\n          </div>\r\n          <div class=\"text-center bg-danger bg-darken-2 colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\">\r\n            <span>darken-2</span>\r\n          </div>\r\n          <div class=\"text-center bg-info bg-darken-2 colors-container rounded text-white width-100 height-100 d-flex align-items-center justify-content-center my-1 ml-50 shadow\">\r\n            <span>darken-2</span>\r\n          </div>\r\n        </div>\r\n      <!--/ dark colors -->\r\n      </b-card>\r\n      <!-- Default Colors -->\r\n\r\n      <!-- Gradient color start -->\r\n      <b-card title=\"Gradient Colors\">\r\n        <b-card-text class=\"mb-0\">\r\n          We have make gradient color based on our default color:\r\n        </b-card-text>\r\n        <ul class=\"colors-list list-unstyled mb-0\">\r\n          <li>\r\n            <feather-icon\r\n              size=\"15\"\r\n              icon=\"ChevronsRightIcon\"\r\n            />\r\n            <span>bg-gradient-primary</span>\r\n          </li>\r\n          <li>\r\n            <feather-icon\r\n              size=\"15\"\r\n              icon=\"ChevronsRightIcon\"\r\n            />\r\n            <span>bg-gradient-secondary</span>\r\n          </li>\r\n          <li>\r\n            <feather-icon\r\n              size=\"15\"\r\n              icon=\"ChevronsRightIcon\"\r\n            />\r\n            <span>bg-gradient-success</span>\r\n          </li>\r\n          <li>\r\n            <feather-icon\r\n              size=\"15\"\r\n              icon=\"ChevronsRightIcon\"\r\n            />\r\n            <span>bg-gradient-warning</span>\r\n          </li>\r\n          <li>\r\n            <feather-icon\r\n              size=\"15\"\r\n              icon=\"ChevronsRightIcon\"\r\n            />\r\n            <span>bg-gradient-danger</span>\r\n          </li>\r\n          <li>\r\n            <feather-icon\r\n              size=\"15\"\r\n              icon=\"ChevronsRightIcon\"\r\n            />\r\n            <span>bg-gradient-info</span>\r\n          </li>\r\n        </ul>\r\n        <b-card-text>\r\n          For each color, we think has its functionality in the application as alerts of errors <b>(danger)</b>,\r\n          warnings to the user <b>(warning)</b>, communications of approval <b>(success)</b>, or main color of the\r\n          application <b>(primary)</b>.\r\n        </b-card-text>\r\n\r\n        <div class=\"d-flex justify-content-start flex-wrap\">\r\n          <div class=\"text-center colors-container bg-gradient-primary rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\">\r\n            <span>primary gradient</span>\r\n          </div>\r\n          <div class=\"text-center colors-container bg-gradient-secondary rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\">\r\n            <span>secondary gradient</span>\r\n          </div>\r\n          <div class=\"text-center colors-container bg-gradient-success rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\">\r\n            <span>success gradient</span>\r\n          </div>\r\n          <div class=\"text-center colors-container bg-gradient-warning rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\">\r\n            <span>warning gradient</span>\r\n          </div>\r\n          <div class=\"text-center colors-container bg-gradient-danger rounded text-white width-100 height-100 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow\">\r\n            <span>danger gradient</span>\r\n          </div>\r\n          <div class=\"text-center colors-container bg-gradient-info rounded text-white width-100 height-100 d-flex align-items-center justify-content-center my-1 ml-50 shadow px-1\">\r\n            <span>info gradient</span>\r\n          </div>\r\n        </div>\r\n      </b-card>\r\n    <!--/ Gradient color start -->\r\n    </b-col>\r\n  </b-row>\r\n</template>\r\n\r\n<script>\r\nimport {\r\n  BCard, BAlert, BLink, BCardText, BRow, BCol,\r\n} from 'bootstrap-vue'\r\n\r\nexport default {\r\n  components: {\r\n    BCard,\r\n    BAlert,\r\n    BLink,\r\n    BRow,\r\n    BCol,\r\n    BCardText,\r\n  },\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n.colors-list {\r\n  li {\r\n    padding: 0.4rem;\r\n    svg {\r\n      margin-right: 0.25rem;\r\n    }\r\n  }\r\n}\r\n</style>\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Colors.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Colors.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Colors.vue?vue&type=template&id=6b331766&\"\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&id=6b331766&prod&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"],"sourceRoot":""}