/home/henzagold/admin_report/js/ Current File: //home/henzagold/admin_report/js/chunk-74c4ca22.7102e758.js
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-74c4ca22"],{"66a4":function(t,a,e){"use strict";e("e8c0")},"690d":function(t,a,e){},"6de0":function(t,a,e){"use strict";e.r(a);var s=function(){var t=this,a=t._self._c;return a("div",{attrs:{id:"colors-demo"}},[a("colors-default"),a("colors-gradient"),a("colors-customization"),a("colors-change-color"),a("colors-change-color-SSR"),a("colors-tailwind")],1)},n=[],r=function(){var t=this,a=t._self._c;return a("vx-card",{attrs:{title:"Default Colors","code-toggler":""}},[a("p",[t._v("We have a series of colors that are used by default. They include:")]),a("vx-list",{attrs:{list:t.defaultColors}}),a("p",{staticClass:"mb-5"},[t._v("For each color, we think has its functionality in the application as alerts of errors ("),a("strong",[t._v("danger")]),t._v("), warnings to the user ("),a("strong",[t._v("warning")]),t._v("), communications of approval ("),a("strong",[t._v("success")]),t._v("), or main color of the application ("),a("strong",[t._v("primary")]),t._v(").")]),a("ul",{staticClass:"demo-alignment text-white"},[a("li",{staticClass:"bg-primary"},[t._v("\n            primary\n        ")]),a("li",{staticClass:"bg-success"},[t._v("\n            success\n        ")]),a("li",{staticClass:"bg-danger"},[t._v("\n            danger\n        ")]),a("li",{staticClass:"bg-warning"},[t._v("\n            warning\n        ")]),a("li",{staticClass:"bg-dark"},[t._v("\n            dark\n        ")])]),a("template",{slot:"codeContainer"})],2)},o=[],l={data:function(){return{defaultColors:["primary","success","danger","warning","dark"]}}},i=l,c=e("2877"),u=Object(c["a"])(i,r,o,!1,null,null,null),d=u.exports,g=function(){var t=this,a=t._self._c;return a("vx-card",{attrs:{title:"Gradient Colors","code-toggler":""}},[a("p",[t._v("We have make gradient color based on our default color:")]),a("vx-list",{attrs:{list:t.defaultColors}}),a("p",{staticClass:"mb-5"},[t._v("For each color, we think has its functionality in the application as alerts of errors ("),a("strong",[t._v("danger")]),t._v("), warnings to the user ("),a("strong",[t._v("warning")]),t._v("), communications of approval ("),a("strong",[t._v("success")]),t._v("), or main color of the application ("),a("strong",[t._v("primary")]),t._v(").")]),a("ul",{staticClass:"demo-alignment text-white"},[a("li",{staticClass:"bg-primary-gradient text-center"},[t._v("\n            primary gradient\n        ")]),a("li",{staticClass:"bg-success-gradient text-center"},[t._v("\n            success gradient\n        ")]),a("li",{staticClass:"bg-danger-gradient text-center"},[t._v("\n            danger gradient\n        ")]),a("li",{staticClass:"bg-warning-gradient text-center"},[t._v("\n            warning gradient\n        ")]),a("li",{staticClass:"bg-dark-gradient text-center"},[t._v("\n            dark "),a("br"),t._v(" gradient\n        ")])]),a("template",{slot:"codeContainer"})],2)},v=[],p={data:function(){return{defaultColors:["primary gradient","success gradient","danger gradient","warning gradient","dark gradient"]}}},h=p,_=Object(c["a"])(h,g,v,!1,null,null,null),m=_.exports,C=function(){var t=this,a=t._self._c;return a("vx-card",{attrs:{title:"Customize Theme Colors","code-toggler":"","code-language":"js"}},[a("p",[t._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.")]),a("p",[t._v("You can change default colors using "),a("code",[t._v("themeColors.js")]),t._v(" file. You can find this file in src folder.")]),a("vs-alert",{staticClass:"mt-5",attrs:{icon:"warning",active:"true",color:"warning"}},[a("span",[t._v("Only "),a("strong",[t._v("RGB")]),t._v(" and "),a("strong",[t._v("HEX")]),t._v(" colors are supported.")])]),a("br"),a("ul",{staticClass:"demo-alignment text-white"},[a("li",{staticStyle:{"background-color":"#5b3cc4"}},[t._v("\n            primary\n        ")]),a("li",{staticStyle:{"background-color":"rgb(23, 201, 100)"}},[t._v("\n            success\n        ")]),a("li",{staticStyle:{"background-color":"rgb(242, 19, 93)"}},[t._v("\n            danger\n        ")]),a("li",{staticStyle:{"background-color":"rgb(255, 130, 0)"}},[t._v("\n            warning\n        ")]),a("li",{staticStyle:{"background-color":"rgb(36, 33, 69)"}},[t._v("\n            dark\n        ")])]),a("template",{slot:"codeContainer"})],2)},b=[],f={},w=Object(c["a"])(f,C,b,!1,null,null,null),y=w.exports,x=function(){var t=this,a=t._self._c;return a("vx-card",{attrs:{title:"Change Color","code-toggler":""}},[a("p",[t._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")]),a("p",[t._v("Imagine that in the middle of the application we want the primary color change would be something like this:")]),a("prism",{staticClass:"rounded-lg",attrs:{language:"js"}},[t._v("\nthis.$vs.theme({\n  primary:'rgb(5, 173, 88)' // my new color\n})\n        ")]),a("p",{staticClass:"mt-5"},[t._v("By doing this, all "),a("strong",[t._v("Vuesax")]),t._v(" components and other components which uses primary color in the application will change. Select one of the colors to change it and that all the components of this application will have that color.")]),a("ul",{staticClass:"demo-alignment text-white"},[a("li",{staticClass:"bg-primary"},[a("input",{staticClass:"absolute w-full h-full cursor-pointer opacity-0",attrs:{type:"color",name:"",value:""},on:{change:function(a){return t.changeColor(a.target.value,"primary")}}}),t._v("\n                primary\n            ")]),a("li",{staticClass:"bg-success"},[a("input",{staticClass:"absolute w-full h-full cursor-pointer opacity-0",attrs:{type:"color",name:"",value:""},on:{change:function(a){return t.changeColor(a.target.value,"success")}}}),t._v("\n                success\n            ")]),a("li",{staticClass:"bg-danger"},[a("input",{staticClass:"absolute w-full h-full cursor-pointer opacity-0",attrs:{type:"color",name:"",value:""},on:{change:function(a){return t.changeColor(a.target.value,"danger")}}}),t._v("\n                danger\n            ")]),a("li",{staticClass:"bg-warning"},[a("input",{staticClass:"absolute w-full h-full cursor-pointer opacity-0",attrs:{type:"color",name:"",value:""},on:{change:function(a){return t.changeColor(a.target.value,"warning")}}}),t._v("\n                warning\n            ")]),a("li",{staticClass:"bg-dark"},[a("input",{staticClass:"absolute w-full h-full cursor-pointer opacity-0",attrs:{type:"color",name:"",value:""},on:{change:function(a){return t.changeColor(a.target.value,"dark")}}}),t._v("\n                dark\n            ")])]),a("template",{slot:"codeContainer"})],2)},k=[],j=e("ade3"),T=e("8d51"),S=e.n(T),O={components:{Prism:S.a},methods:{changeColor:function(t,a){this.$vs.theme(Object(j["a"])({},a,t))}}},R=O,Y=(e("66a4"),Object(c["a"])(R,x,k,!1,null,"feebbcbe",null)),z=Y.exports,A=function(){var t=this,a=t._self._c;return a("vx-card",{attrs:{title:"Change Color SSR"}},[a("p",[t._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")]),a("p",[t._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")]),a("vs-alert",{staticClass:"my-5",attrs:{icon:"warning",active:"true",color:"warning"}},[a("p",{staticClass:"mb-2"},[t._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")]),a("code",[t._v("npm i stylus stylus-loader --save-dev")])]),a("vs-alert",{staticClass:"mt-5",attrs:{icon:"warning",active:"true",color:"warning"}},[a("p",[t._v("The value of the colors can only be "),a("code",[t._v("RGB")]),t._v(" and nothing else is added to the number without the letters "),a("code",[t._v("rgb")]),t._v(" or the parentheses")]),a("p",[t._v("For example if the color is "),a("code",[t._v("rgb(50,100,200)")]),t._v(" the value to be implemented is only: "),a("code",[t._v("50,100,A")])])]),a("br"),a("prism",{staticClass:"rounded-lg",attrs:{language:"js"}}),a("div",{staticClass:"mt-base"},[a("p",[t._v("The stylus variables of the main colors are:")]),a("prism",{staticClass:"rounded-lg"}),a("p",{staticClass:"mt-base"},[t._v("And the css variables are:")]),a("prism",{staticClass:"rounded-lg",attrs:{language:"css"}})],1)],1)},B=[],G={components:{Prism:S.a}},F=G,I=Object(c["a"])(F,A,B,!1,null,null,null),P=I.exports,W=function(){var t=this,a=t._self._c;return a("vx-card",{attrs:{title:"Tailwind Colors"}},[a("span",[t._v("Tailwind creates "),a("code",[t._v("text-{color}")]),t._v(" and "),a("code",[t._v("bg-{color}")]),t._v(" for text color and background color.")]),a("div",{staticClass:"mt-5"},[a("tailwind-text-classes"),a("tailwind-background-classes"),a("tailwind-add-more-colors")],1)])},$=[],q=function(){var t=this,a=t._self._c;return a("vx-card",{attrs:{title:"Text Classes","code-toggler":"","no-shadow":"","card-border":""}},[a("span",[t._v("You can use "),a("code",[t._v("text-{color}")]),t._v(" for applying default colors to text.")]),a("br"),a("span",[t._v("There is also other tailwind classes like "),a("code",[t._v("text-white")]),t._v(", "),a("code",[t._v("text-black")]),t._v(", "),a("code",[t._v("text-transparent")])]),a("div",{staticClass:"demo-alignment"},[a("span",{staticClass:"text-primary"},[t._v("primary")]),a("span",{staticClass:"text-success"},[t._v("success")]),a("span",{staticClass:"text-danger"},[t._v("danger")]),a("span",{staticClass:"text-warning"},[t._v("warning")]),a("span",{staticClass:"text-dark"},[t._v("dark")]),a("span",{staticClass:"text-white bg-primary p-2 rounded"},[t._v("white")]),a("span",{staticClass:"text-black"},[t._v("black")]),a("span",{staticClass:"text-transparent"},[t._v("transparent")])]),a("template",{slot:"codeContainer"})],2)},D=[],J={},V=Object(c["a"])(J,q,D,!1,null,null,null),E=V.exports,H=function(){var t=this,a=t._self._c;return a("vx-card",{attrs:{title:"Background Classes","code-toggler":"","no-shadow":"","card-border":""}},[a("span",[t._v("You can use "),a("code",[t._v("bg-{color}")]),t._v(" for applying default colors to background.")]),a("br"),a("span",[t._v("There is also other tailwind classes like "),a("code",[t._v("bg-white")]),t._v(", "),a("code",[t._v("bg-black")]),t._v(", "),a("code",[t._v("bg-transparent")])]),a("ul",{staticClass:"demo-alignment text-white mt-5"},[a("li",{staticClass:"bg-primary"},[t._v("primary")]),a("li",{staticClass:"bg-success"},[t._v("success")]),a("li",{staticClass:"bg-danger"},[t._v("danger")]),a("li",{staticClass:"bg-warning"},[t._v("warning")]),a("li",{staticClass:"bg-dark"},[t._v("dark")]),a("li",{staticClass:"bg-white text-dark"},[t._v("white")]),a("li",{staticClass:"bg-black"},[t._v("black")]),a("li",{staticClass:"bg-transparent text-dark"},[t._v("transparent")])]),a("template",{slot:"codeContainer"})],2)},M=[],X={},K=Object(c["a"])(X,H,M,!1,null,null,null),L=K.exports,N=function(){var t=this,a=t._self._c;return a("vx-card",{attrs:{title:"Add more colors","no-shadow":"","card-border":""}},[a("p",[t._v("You can add more colors in "),a("code",[t._v("tailwind.js")]),t._v(" file. You can find this file in root folder.")]),a("span",{staticClass:"mb-5"},[t._v("Checkout Color Customization in "),a("a",{attrs:{href:"https://tailwindcss.com/docs/text-color#customizing",target:"_blank"}},[t._v("Tailwind")])]),a("prism",{staticClass:"rounded-lg",attrs:{language:"js"}}),a("template",{slot:"codeContainer"}),a("vs-alert",{staticClass:"mt-5",attrs:{color:"primary",icon:"new_releases",active:"true"}},[a("span",[t._v("After registering color you can use "),a("code",[t._v("text-secondary")]),t._v(" and "),a("code",[t._v("bg-secondary")]),t._v(" in theme")])])],2)},Q=[],U={components:{Prism:S.a}},Z=U,tt=Object(c["a"])(Z,N,Q,!1,null,null,null),at=tt.exports,et={components:{TailwindTextClasses:E,TailwindBackgroundClasses:L,TailwindAddMoreColors:at}},st=et,nt=(e("e77d"),Object(c["a"])(st,W,$,!1,null,null,null)),rt=nt.exports,ot={components:{ColorsDefault:d,ColorsGradient:m,ColorsCustomization:y,ColorsChangeColor:z,ColorsChangeColorSSR:P,ColorsTailwind:rt}},lt=ot,it=(e("afc6"),Object(c["a"])(lt,s,n,!1,null,null,null));a["default"]=it.exports},"80c6":function(t,a,e){},afc6:function(t,a,e){"use strict";e("80c6")},e77d:function(t,a,e){"use strict";e("690d")},e8c0:function(t,a,e){}}]);
//# sourceMappingURL=chunk-74c4ca22.7102e758.js.map