{"version":3,"sources":["webpack:///./src/components/highlighters/CodeHighlighter.vue","webpack:///./src/components/highlighters/CodeHighlighter.vue?bb79","webpack:///./src/components/highlighters/CodeHighlighter.vue?97eb","webpack:///./src/views/documentation/base/helpers/Opacity.vue","webpack:///./src/views/documentation/base/helpers/Opacity.vue?2514","webpack:///./src/views/documentation/base/helpers/Opacity.vue?66fc"],"names":["class","data-bs-toggle","title","data-bs-original-title","lang","style","getHeightInPixesls","name","props","String","fieldHeight","Number","setup","height","init","value","highlightAll","components","render","id","href","appName","CodeHighlighter"],"mappings":"2IACOA,MAAM,Q,GACJA,MAAM,a,EACT,gCAOS,UANPA,MAAM,qBACNC,iBAAe,UACfC,MAAM,GACNC,yBAAuB,aACxB,UAED,G,GACKH,MAAM,kB,+BAI0B,gB,+BACpB,c,wDAfrB,gCAmBM,MAnBN,EAmBM,CAlBJ,gCAiBM,MAjBN,EAiBM,CAhBJ,EAQA,gCAOM,MAPN,EAOM,CANJ,gCAKa,OAJVA,MAAK,wCAAc,EAAAI,MACnBC,MAAK,oCAAY,EAAAC,sB,CACnB,gCAEM,QAFCN,MAAK,wCAAc,EAAAI,O,GACzB,wBAAa,oB,qDCXR,+BAAgB,CAC7BG,KAAM,kBACNC,MAAO,CACLJ,KAAMK,OACNC,YAAaC,QAEfC,MAAK,SAACJ,GACJ,IAAMK,EAAS,iBAAIL,EAAME,aAEjBI,EAAS,iBAAkB,KAE7BR,EAAqB,uBAAS,WAClC,OAAOO,EAAOE,MAAQ,QAQxB,OALA,wBAAU,WACR,IAAMC,eACNF,OAGK,CACLR,mBAAkB,IAGtBW,WAAY,KC1Bd,EAAOC,OAASA,EAED,U,oECHRlB,MAAM,Q,GAEJA,MAAM,8D,GAEJA,MAAM,S,EAET,gCAGK,MAHDA,MAAM,wBAAwBmB,GAAG,Y,CACnC,gCAAwB,KAArBC,KAAK,c,6BAAgB,gB,MAMrBpB,MAAM,Q,EAET,gCAAkE,YAA5D,yDAAqD,G,+BAAO,gC,EAC1C,gCAA4B,YAAtB,mBAAe,G,+BAAO,e,EACpD,gCAA6D,YAAvD,oDAAgD,G,+BAAO,kF,GAS5DA,MAAM,S,i6CA0KJA,MAAM,Q,4DAGJ,kS,GAgBJA,MAAM,S,8lDAmLJA,MAAM,Q,4DAGN,wV,GAgBFA,MAAM,S,y7DAsMJA,MAAM,Q,4DAGN,iW,GAgBFA,MAAM,S,k8DAsMJA,MAAM,Q,4DAGN,wV,iHA/zBX,gCA+0BM,MA/0BN,EA+0BM,CA70BJ,gCA20BM,MA30BN,EA20BM,CAz0BJ,gCAkBM,MAlBN,EAkBM,CAhBJ,EAOA,gCAOM,MAPN,EAOM,C,0DAND,EAAAqB,SAAU,mCACb,K,EACwB,E,EACxB,E,MASJ,gCAyLM,MAzLN,EAyLM,CAvLJ,EAwKA,gCAaM,MAbN,EAaM,CAXJ,yBAUC,GAVgBjB,KAAK,QAAM,C,6BACzB,IAQqB,C,cAQ5B,gCAkMM,MAlMN,EAkMM,CAhMJ,EAiLA,gCAaM,MAbN,EAaM,CAXJ,yBAUC,GAVgBA,KAAK,QAAM,C,6BAC3B,IAQ6B,C,cAQlC,gCAqNM,MArNN,EAqNM,CAnNJ,EAoMA,gCAaM,MAbN,EAaM,CAXJ,yBAUC,GAVgBA,KAAK,QAAM,C,6BAC3B,IAQ8B,C,cAQnC,gCAqNM,MArNN,EAqNM,CAnNJ,EAoMA,gCAaM,MAbN,EAaM,CAXJ,yBAUC,GAVgBA,KAAK,QAAM,C,6BAC3B,IAQ6B,C,8CCp0BzB,+BAAgB,CAC7BG,KAAM,UACNU,WAAY,CACVK,gBAAe,QAEjBV,MAAK,WACH,MAAO,CACLS,QAAO,WCTb,EAAOH,OAASA,EAED","file":"js/chunk-6776595f.cf73770c.js","sourcesContent":["<template>\n  <div class=\"py-5\">\n    <div class=\"highlight\">\n      <button\n        class=\"highlight-copy btn\"\n        data-bs-toggle=\"tooltip\"\n        title=\"\"\n        data-bs-original-title=\"Copy code\"\n      >\n        copy\n      </button>\n      <div class=\"highlight-code\">\n        <pre\n          :class=\"`language-${lang}`\"\n          :style=\"{ height: getHeightInPixesls }\"\n        ><code :class=\"`language-${lang}`\">\n          <slot></slot>\n        </code></pre>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, onMounted } from \"vue\";\nimport { useCopyClipboard } from \"@/core/helpers/documentation\";\nimport Prism from \"prismjs\";\n\nexport default defineComponent({\n  name: \"CodeHighlighter\",\n  props: {\n    lang: String,\n    fieldHeight: Number,\n  },\n  setup(props) {\n    const height = ref(props.fieldHeight);\n\n    const { init } = useCopyClipboard();\n\n    const getHeightInPixesls = computed(() => {\n      return height.value + \"px\";\n    });\n\n    onMounted(() => {\n      Prism.highlightAll();\n      init();\n    });\n\n    return {\n      getHeightInPixesls,\n    };\n  },\n  components: {},\n});\n</script>\n","\nimport { defineComponent, computed, ref, onMounted } from \"vue\";\nimport { useCopyClipboard } from \"@/core/helpers/documentation\";\nimport Prism from \"prismjs\";\n\nexport default defineComponent({\n  name: \"CodeHighlighter\",\n  props: {\n    lang: String,\n    fieldHeight: Number,\n  },\n  setup(props) {\n    const height = ref(props.fieldHeight);\n\n    const { init } = useCopyClipboard();\n\n    const getHeightInPixesls = computed(() => {\n      return height.value + \"px\";\n    });\n\n    onMounted(() => {\n      Prism.highlightAll();\n      init();\n    });\n\n    return {\n      getHeightInPixesls,\n    };\n  },\n  components: {},\n});\n","import { render } from \"./CodeHighlighter.vue?vue&type=template&id=04d89187\"\nimport script from \"./CodeHighlighter.vue?vue&type=script&lang=ts\"\nexport * from \"./CodeHighlighter.vue?vue&type=script&lang=ts\"\nscript.render = render\n\nexport default script","<template>\n  <!--begin::Card-->\n  <div class=\"card\">\n    <!--begin::Card Body-->\n    <div class=\"card-body fs-6 py-15 px-10 py-lg-15 px-lg-15 text-gray-700\">\n      <!--begin::Section-->\n      <div class=\"pb-10\">\n        <!--begin::Heading-->\n        <h1 class=\"anchor fw-bolder mb-3\" id=\"overview\">\n          <a href=\"#overview\"></a>\n          Overview\n        </h1>\n        <!--end::Heading-->\n\n        <!--begin::Block-->\n        <div class=\"py-5\">\n          {{ appName }} sets custom opacity classes in\n          <code>src/assets/sass/core/components/helpers/_opacity.scss</code>and\n          through a SASS variable <code>$opacity-values</code>defined in\n          <code>src/assets/sass/core/components//_variables.scss</code>to\n          provide additional opacity utility classes to cover its own design\n          system.\n        </div>\n        <!--end::Block-->\n      </div>\n      <!--end::Section-->\n\n      <!--begin::Section-->\n      <div class=\"py-10\">\n        <!--begin::Heading-->\n        <h1 class=\"anchor fw-bolder mb-3\" id=\"opacity\">\n          <a href=\"#opacity\"></a>\n          Opacity\n        </h1>\n        <!--end::Heading-->\n\n        <!--begin::Block-->\n        <div class=\"py-5\">\n          Use the\n          <code>.opacity-{ 0, 5, 10, 15 ,20, 25, 50, 75, 100 }</code>class to\n          set an element's opacity style.\n        </div>\n        <!--end::Block-->\n\n        <!--begin::Block-->\n        <div class=\"py-5\">\n          <div class=\"rounded border p-10\">\n            <div class=\"d-flex flex-wrap align-items-center\">\n              <div\n                class=\"\n                  opacity-0\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n              >\n                .opacity-0\n              </div>\n              <div\n                class=\"\n                  opacity-5\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n              >\n                .opacity-5\n              </div>\n              <div\n                class=\"\n                  opacity-10\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n              >\n                .opacity-10\n              </div>\n              <div\n                class=\"\n                  opacity-15\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n              >\n                .opacity-15\n              </div>\n              <div\n                class=\"\n                  opacity-20\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n              >\n                .opacity-20\n              </div>\n              <div\n                class=\"\n                  opacity-25\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n              >\n                .opacity-25\n              </div>\n              <div\n                class=\"\n                  opacity-50\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n              >\n                .opacity-50\n              </div>\n              <div\n                class=\"\n                  opacity-75\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n              >\n                .opacity-75\n              </div>\n              <div\n                class=\"\n                  opacity-100\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n              >\n                .opacity-100\n              </div>\n            </div>\n          </div>\n        </div>\n        <!--end::Block-->\n\n        <!--begin::Code-->\n        <div class=\"py-5\">\n          <!--prettier-ignore-->\n          <CodeHighlighter lang=\"html\"\n            >{{`<div class=\"opacity-0\"></div>\n<div class=\"opacity-5\"></div>\n<div class=\"opacity-10\"></div>\n<div class=\"opacity-15\"></div>\n<div class=\"opacity-20\"></div>\n<div class=\"opacity-25\"></div>\n<div class=\"opacity-50\"></div>\n<div class=\"opacity-75\"></div>\n<div class=\"opacity-100\"></div>`}}</CodeHighlighter\n          >\n        </div>\n        <!--end::Code-->\n      </div>\n      <!--end::Section-->\n\n      <!--begin::Section-->\n      <div class=\"py-10\">\n        <!--begin::Heading-->\n        <h1 class=\"anchor fw-bolder mb-3\" id=\"opacity-hover-effects\">\n          <a href=\"#opacity-hover-effects\"></a>\n          Opacity Hover Effects\n        </h1>\n        <!--end::Heading-->\n\n        <!--begin::Block-->\n        <div class=\"py-5\">\n          Use\n          <code>.opacity-{ 0, 5, 10, 15 ,20, 25, 50, 75, 100 }-hover</code>to\n          display an element's opacity on hover.\n        </div>\n        <!--end::Block-->\n\n        <!--begin::Block-->\n        <div class=\"py-5\">\n          <div class=\"rounded border p-10\">\n            <div class=\"d-flex flex-wrap align-items-center\">\n              <div\n                class=\"\n                  opacity-0-hover\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  p-3\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n              >\n                .opacity-0-hover\n              </div>\n              <div\n                class=\"\n                  opacity-5-hover\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  p-3\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n              >\n                .opacity-5-hover\n              </div>\n              <div\n                class=\"\n                  opacity-10-hover\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  p-3\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n              >\n                .opacity-10-hover\n              </div>\n              <div\n                class=\"\n                  opacity-15-hover\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  p-3\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n              >\n                .opacity-15-hover\n              </div>\n              <div\n                class=\"\n                  opacity-20-hover\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  p-3\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n              >\n                .opacity-20-hover\n              </div>\n              <div\n                class=\"\n                  opacity-25-hover\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  p-3\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n              >\n                .opacity-25-hover\n              </div>\n              <div\n                class=\"\n                  opacity-50-hover\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  p-3\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n              >\n                .opacity-50-hover\n              </div>\n              <div\n                class=\"\n                  opacity-75-hover\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  p-3\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n              >\n                .opacity-75-hover\n              </div>\n              <div\n                class=\"\n                  opacity-100-hover\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  p-3\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n              >\n                .opacity-100-hover\n              </div>\n            </div>\n          </div>\n        </div>\n        <!--end::Block-->\n\n        <!--begin::Code-->\n        <div class=\"py-5\">\n          <!--prettier-ignore-->\n          <CodeHighlighter lang=\"html\"\n          >{{`<div class=\"opacity-0-hover\"></div>\n<div class=\"opacity-5-hover\"></div>\n<div class=\"opacity-10-hover\"></div>\n<div class=\"opacity-15-hover\"></div>\n<div class=\"opacity-20-hover\"></div>\n<div class=\"opacity-25-hover\"></div>\n<div class=\"opacity-50-hover\"></div>\n<div class=\"opacity-75-hover\"></div>\n<div class=\"opacity-100-hover\"></div>`}}</CodeHighlighter\n          >\n        </div>\n        <!--end::Code-->\n      </div>\n      <!--end::Section-->\n\n      <!--begin::Section-->\n      <div class=\"py-10\">\n        <!--begin::Heading-->\n        <h1 class=\"anchor fw-bolder mb-3\" id=\"opacity-active-state\">\n          <a href=\"#opacity-active-state\"></a>\n          Opacity Active State\n        </h1>\n        <!--end::Heading-->\n\n        <!--begin::Block-->\n        <div class=\"py-5\">\n          Use\n          <code>.opacity-active-{ 0, 5, 10, 15 ,20, 25, 50, 75, 100 }</code>to\n          set an element's opacity on active states. Click on the demo below to\n          trigger the active state.\n        </div>\n        <!--end::Block-->\n\n        <!--begin::Block-->\n        <div class=\"py-5\">\n          <div class=\"rounded border p-10\">\n            <div class=\"d-flex flex-wrap align-items-center nav\">\n              <div\n                class=\"\n                  nav-link\n                  opacity-active-0\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  p-3\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n                data-bs-toggle=\"tab\"\n              >\n                .opacity-active-0\n              </div>\n              <div\n                class=\"\n                  nav-link\n                  opacity-active-5\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  p-3\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n                data-bs-toggle=\"tab\"\n              >\n                .opacity-active-5\n              </div>\n              <div\n                class=\"\n                  nav-link\n                  opacity-active-10\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  p-3\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n                data-bs-toggle=\"tab\"\n              >\n                .opacity-active-10\n              </div>\n              <div\n                class=\"\n                  nav-link\n                  opacity-active-15\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  p-3\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n                data-bs-toggle=\"tab\"\n              >\n                .opacity-active-15\n              </div>\n              <div\n                class=\"\n                  nav-link\n                  opacity-active-20\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  p-3\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n                data-bs-toggle=\"tab\"\n              >\n                .opacity-active-20\n              </div>\n              <div\n                class=\"\n                  nav-link\n                  opacity-active-25\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  p-3\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n                data-bs-toggle=\"tab\"\n              >\n                .opacity-active-25\n              </div>\n              <div\n                class=\"\n                  nav-link\n                  opacity-active-50\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  p-3\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n                data-bs-toggle=\"tab\"\n              >\n                .opacity-active-50\n              </div>\n              <div\n                class=\"\n                  nav-link\n                  opacity-active-75\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  p-3\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n                data-bs-toggle=\"tab\"\n              >\n                .opacity-active-75\n              </div>\n              <div\n                class=\"\n                  nav-link\n                  opacity-active-100\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  p-3\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n                data-bs-toggle=\"tab\"\n              >\n                .opacity-active-100\n              </div>\n            </div>\n          </div>\n        </div>\n        <!--end::Block-->\n\n        <!--begin::Code-->\n        <div class=\"py-5\">\n          <!--prettier-ignore-->\n          <CodeHighlighter lang=\"html\"\n          >{{`<div class=\"opacity-active-0\"></div>\n<div class=\"opacity-active-5\"></div>\n<div class=\"opacity-active-10\"></div>\n<div class=\"opacity-active-15\"></div>\n<div class=\"opacity-active-20\"></div>\n<div class=\"opacity-active-25\"></div>\n<div class=\"opacity-active-50\"></div>\n<div class=\"opacity-active-75\"></div>\n<div class=\"opacity-active-100\"></div>`}}</CodeHighlighter\n          >\n        </div>\n        <!--end::Code-->\n      </div>\n      <!--end::Section-->\n\n      <!--begin::Section-->\n      <div class=\"py-10\">\n        <!--begin::Heading-->\n        <h1 class=\"anchor fw-bolder mb-3\" id=\"opacity-combined\">\n          <a href=\"#opacity-combined\"></a>\n          Opacity Combined Active & Hover State\n        </h1>\n        <!--end::Heading-->\n\n        <!--begin::Block-->\n        <div class=\"py-5\">\n          Use\n          <code>.opacity-state-{ 0, 5, 10, 15 ,20, 25, 50, 75, 100 }</code>to\n          set an element's opacity on both active and hover states. Click on the\n          demo below to trigger the active state.\n        </div>\n        <!--end::Block-->\n\n        <!--begin::Block-->\n        <div class=\"pt-5\">\n          <div class=\"rounded border p-10\">\n            <div class=\"d-flex flex-wrap align-items-center nav\">\n              <div\n                class=\"\n                  nav-link\n                  opacity-state-0\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  p-3\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n                data-bs-toggle=\"tab\"\n              >\n                .opacity-state-0\n              </div>\n              <div\n                class=\"\n                  nav-link\n                  opacity-state-5\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  p-3\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n                data-bs-toggle=\"tab\"\n              >\n                .opacity-state-5\n              </div>\n              <div\n                class=\"\n                  nav-link\n                  opacity-state-10\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  p-3\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n                data-bs-toggle=\"tab\"\n              >\n                .opacity-state-10\n              </div>\n              <div\n                class=\"\n                  nav-link\n                  opacity-state-15\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  p-3\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n                data-bs-toggle=\"tab\"\n              >\n                .opacity-state-15\n              </div>\n              <div\n                class=\"\n                  nav-link\n                  opacity-state-20\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  p-3\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n                data-bs-toggle=\"tab\"\n              >\n                .opacity-state-20\n              </div>\n              <div\n                class=\"\n                  nav-link\n                  opacity-state-25\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  p-3\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n                data-bs-toggle=\"tab\"\n              >\n                .opacity-state-25\n              </div>\n              <div\n                class=\"\n                  nav-link\n                  opacity-state-50\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  p-3\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n                data-bs-toggle=\"tab\"\n              >\n                .opacity-state-50\n              </div>\n              <div\n                class=\"\n                  nav-link\n                  opacity-state-75\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  p-3\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n                data-bs-toggle=\"tab\"\n              >\n                .opacity-state-75\n              </div>\n              <div\n                class=\"\n                  nav-link\n                  opacity-state-100\n                  bg-primary\n                  text-white\n                  w-100px\n                  h-100px\n                  d-flex\n                  flex-center\n                  p-3\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n                data-bs-toggle=\"tab\"\n              >\n                .opacity-state-100\n              </div>\n            </div>\n          </div>\n        </div>\n        <!--end::Block-->\n\n        <!--begin::Code-->\n        <div class=\"py-5\">\n          <!--prettier-ignore-->\n          <CodeHighlighter lang=\"html\"\n          >{{`<div class=\"opacity-state-0\"></div>\n<div class=\"opacity-state-5\"></div>\n<div class=\"opacity-state-10\"></div>\n<div class=\"opacity-state-15\"></div>\n<div class=\"opacity-state-20\"></div>\n<div class=\"opacity-state-25\"></div>\n<div class=\"opacity-state-50\"></div>\n<div class=\"opacity-state-75\"></div>\n<div class=\"opacity-state-100\"></div>`}}</CodeHighlighter\n          >\n        </div>\n        <!--end::Code-->\n      </div>\n      <!--end::Section-->\n    </div>\n    <!--end::Card Body-->\n  </div>\n  <!--end::Card-->\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from \"vue\";\nimport CodeHighlighter from \"@/components/highlighters/CodeHighlighter.vue\";\nimport { appName } from \"@/core/helpers/documentation\";\n\nexport default defineComponent({\n  name: \"opacity\",\n  components: {\n    CodeHighlighter,\n  },\n  setup() {\n    return {\n      appName,\n    };\n  },\n});\n</script>\n","\nimport { defineComponent } from \"vue\";\nimport CodeHighlighter from \"@/components/highlighters/CodeHighlighter.vue\";\nimport { appName } from \"@/core/helpers/documentation\";\n\nexport default defineComponent({\n  name: \"opacity\",\n  components: {\n    CodeHighlighter,\n  },\n  setup() {\n    return {\n      appName,\n    };\n  },\n});\n","import { render } from \"./Opacity.vue?vue&type=template&id=59c052d8\"\nimport script from \"./Opacity.vue?vue&type=script&lang=ts\"\nexport * from \"./Opacity.vue?vue&type=script&lang=ts\"\nscript.render = render\n\nexport default script"],"sourceRoot":""}