FileMaster

Edit File: EmptyState.vue

<template>
  <div class="am-ces" :style="cssVars">
    <div class="am-ces__img-holder">
      <svg width="240" height="195" viewBox="0 0 240 195" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g clip-path="url(#clip0_1811_81872)">
          <path d="M10.0934 144.996C11.624 145.051 13.0595 145.879 14.0693 147.034C15.0791 148.184 15.6995 149.633 16.0934 151.114C16.8587 153.976 16.3878 157.359 15.5727 160.207C12.4708 159.097 10.5599 155.792 9.69496 154.053C8.32741 151.304 7.5259 145.513 10.0889 144.996" :fill="amColors.colorMainText"/>
          <path d="M20.033 163.676C19.0549 162.272 19.0322 160.32 19.8066 158.79C20.5809 157.264 22.0662 156.163 23.7009 155.661C24.4571 155.43 25.3356 155.33 25.9922 155.769C26.6081 156.181 26.8752 156.987 26.7937 157.721C26.7122 158.455 26.3409 159.129 25.9017 159.723C24.3937 161.765 22.5598 163.463 20.033 163.671" :fill="amColors.colorMainText"/>
          <path d="M20.3771 173.244C20.3771 173.244 20.3137 173.036 20.2367 172.651C20.1552 172.225 20.0465 171.677 19.9198 171.021C19.6752 169.649 19.2858 167.697 19.5801 165.541C19.8609 163.395 20.7167 161.557 21.6133 160.461C22.0526 159.908 22.4782 159.514 22.7907 159.274C22.9401 159.148 23.076 159.071 23.1575 159.007C23.2435 158.948 23.2933 158.921 23.2979 158.93C23.3296 158.966 22.5733 159.437 21.7356 160.556C20.8888 161.656 20.0737 163.458 19.793 165.573C19.5032 167.688 19.8609 169.621 20.0692 170.998C20.1779 171.691 20.2684 172.252 20.3228 172.642C20.3726 173.031 20.3952 173.249 20.3771 173.249V173.244Z" :fill="amColors.colorMainText"/>
          <path d="M11.0894 149.357C11.0894 149.357 11.1392 149.434 11.2161 149.593C11.2977 149.769 11.4063 150 11.5377 150.281C11.8094 150.883 12.1988 151.757 12.6652 152.839C13.598 155.009 14.8478 158.024 16.152 161.38C17.4561 164.74 18.5656 167.81 19.3354 170.038C19.7203 171.152 20.0282 172.058 20.232 172.687C20.3271 172.986 20.4041 173.226 20.4629 173.412C20.5128 173.579 20.5354 173.665 20.5309 173.67C20.5263 173.674 20.4856 173.588 20.4222 173.425C20.3543 173.239 20.2637 173.004 20.155 172.714C19.9195 172.071 19.5935 171.179 19.195 170.088C18.3845 167.869 17.2524 164.812 15.9528 161.452C14.6486 158.097 13.426 155.076 12.5294 152.894C12.0901 151.821 11.7278 150.942 11.4652 150.308C11.3475 150.018 11.2569 149.783 11.1844 149.602C11.1211 149.439 11.0939 149.353 11.0984 149.348L11.0894 149.357Z" :fill="amColors.colorMainText"/>
          <path d="M16.6956 166.913C14.8662 163.802 11.4564 161.683 7.85639 161.421C6.94167 161.353 5.83676 161.507 5.42922 162.331C5.02167 163.155 5.56507 164.128 6.18997 164.808C8.78922 167.62 13.1817 168.602 16.7273 167.162" :fill="amColors.colorMainText"/>
          <path d="M9.25113 163.875C9.25113 163.875 9.4549 163.87 9.82622 163.897C10.0119 163.911 10.2383 163.925 10.4964 163.974C10.7545 164.024 11.0534 164.051 11.3749 164.137C11.6964 164.214 12.0541 164.296 12.4209 164.427C12.7968 164.536 13.1817 164.699 13.5847 164.871C14.3817 165.233 15.233 165.709 16.0391 166.325C16.8406 166.95 17.5153 167.647 18.0677 168.331C18.3304 168.679 18.584 169.014 18.7832 169.354C19.0006 169.68 19.1636 170.006 19.313 170.3C19.476 170.59 19.5711 170.876 19.6798 171.116C19.7885 171.356 19.8519 171.573 19.9062 171.75C20.0149 172.103 20.0692 172.297 20.0557 172.302C20.0104 172.32 19.7885 171.528 19.1772 170.368C19.0187 170.083 18.8511 169.766 18.6292 169.449C18.43 169.119 18.1764 168.797 17.9092 168.457C17.3613 167.792 16.6911 167.113 15.9032 166.497C15.1108 165.89 14.2821 165.419 13.4987 165.052C13.1047 164.88 12.7243 164.713 12.3575 164.599C11.9998 164.463 11.6511 164.377 11.3341 164.287C10.0617 163.965 9.24207 163.92 9.2466 163.875H9.25113Z" :fill="amColors.colorMainText"/>
          <path d="M91.9065 80.3956L75.8945 162.72L73.7979 173.497L180.693 172.972C185.488 172.95 189.74 168.688 191.285 162.362L210.24 84.6386C211.413 79.8341 208.841 74.8394 205.2 74.8394L97.0099 74.9526C94.619 74.9526 92.5314 77.185 91.9065 80.3956Z" :fill="amColors.colorMainBgr"/>
          <g opacity="0.5">
            <path d="M91.9065 80.3951L75.8945 162.72L73.7979 173.497L180.693 172.972C185.488 172.949 189.74 168.688 191.285 162.362L210.24 84.6381C211.413 79.8336 208.841 74.8389 205.2 74.8389L97.0099 74.9521C94.619 74.9521 92.5314 77.1845 91.9065 80.3951Z" :fill="amColors.colorMainText"/>
          </g>
          <path d="M170.441 157.146L159.125 65.9412C158.663 62.2053 155.683 59.4159 152.169 59.4295L127.35 59.511C125.511 59.5155 123.75 60.2989 122.445 61.6846L110.663 74.2099L41.6378 74.5721C37.422 74.5948 34.1797 78.5842 34.7367 83.0718L45.2469 167.366C45.7133 171.097 48.6839 173.882 52.1933 173.873L172.488 173.638C185.887 173.914 187.164 169.961 187.164 169.961C171.808 173.362 170.441 157.159 170.441 157.15V157.146Z" :fill="amColors.colorMainText"/>
          <rect x="130.984" y="80.0801" width="5.5062" height="25.0888" rx="2.7531" transform="rotate(-45 130.984 80.0801)" :fill="amColors.colorMainBgr"/>
          <path d="M147.845 104.347C142.496 98.9978 142.496 90.3249 147.845 84.9756C148.737 84.084 150.182 84.084 151.074 84.9756L178.063 111.965C181.183 115.085 181.183 120.144 178.063 123.265C174.942 126.385 169.883 126.385 166.763 123.265L147.845 104.347Z" :fill="amColors.colorMainBgr"/>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M151.42 91.7928C151.138 91.5115 150.682 91.5115 150.401 91.7928C150.12 92.0741 150.12 92.5303 150.401 92.8116L161.801 104.212C162.083 104.493 162.539 104.493 162.82 104.212C163.101 103.931 163.101 103.474 162.82 103.193L151.42 91.7928ZM165.702 105.806C165.42 105.524 164.964 105.524 164.683 105.806C164.402 106.087 164.402 106.543 164.683 106.825L165.11 107.252C165.391 107.533 165.847 107.533 166.129 107.252C166.41 106.97 166.41 106.514 166.129 106.233L165.702 105.806Z" :fill="amColors.colorMainText"/>
          <circle cx="109.964" cy="55.167" r="37.6805" transform="rotate(-45 109.964 55.167)" :stroke="amColors.colorMainText" stroke-width="8"/>
          <g opacity="0.5">
            <circle cx="109.964" cy="55.167" r="37.6805" transform="rotate(-45 109.964 55.167)" :stroke="amColors.colorMainBgr" stroke-width="8"/>
          </g>
          <circle cx="109.964" cy="55.167" r="34.0723" transform="rotate(-45 109.964 55.167)" fill="url(#paint0_linear_1811_81872)" fill-opacity="0.7"/>
          <mask id="mask0_1811_81872" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="75" y="21" width="69" height="69">
            <circle cx="109.714" cy="55.167" r="34.0723" transform="rotate(-45 109.714 55.167)" fill="url(#paint1_linear_1811_81872)"/>
          </mask>
          <g mask="url(#mask0_1811_81872)">
            <rect x="111.095" y="4.51782" width="10.0968" height="107.245" transform="rotate(30 111.095 4.51782)" fill="url(#paint2_linear_1811_81872)" fill-opacity="0.6"/>
            <rect x="125.427" y="2.67041" width="3.39099" height="107.245" transform="rotate(30 125.427 2.67041)" fill="url(#paint3_linear_1811_81872)" fill-opacity="0.6"/>
          </g>
        </g>
        <defs>
          <linearGradient id="paint0_linear_1811_81872" x1="144.037" y1="91.6409" x2="83.5731" y2="31.1781" gradientUnits="userSpaceOnUse">
            <stop :stop-color="amColors.colorMainBgr"/>
            <stop offset="1" :stop-color="amColors.colorMainBgr"/>
          </linearGradient>
          <linearGradient id="paint1_linear_1811_81872" x1="143.786" y1="91.6409" x2="83.3226" y2="31.1781" gradientUnits="userSpaceOnUse">
            <stop :stop-color="amColors.colorMainBgr"/>
            <stop offset="1" :stop-color="amColors.colorMainBgr"/>
          </linearGradient>
          <linearGradient id="paint2_linear_1811_81872" x1="116.144" y1="4.51782" x2="116.144" y2="111.763" gradientUnits="userSpaceOnUse">
            <stop :stop-color="amColors.colorMainText"/>
            <stop offset="1" :stop-color="amColors.colorMainText" stop-opacity="0"/>
          </linearGradient>
          <linearGradient id="paint3_linear_1811_81872" x1="127.122" y1="2.67041" x2="127.122" y2="109.915" gradientUnits="userSpaceOnUse">
            <stop :stop-color="amColors.colorMainText"/>
            <stop offset="1" :stop-color="amColors.colorMainText" stop-opacity="0"/>
          </linearGradient>
          <clipPath id="clip0_1811_81872">
            <rect width="240" height="194.717" :fill="amColors.colorMainText"/>
          </clipPath>
        </defs>
      </svg>
    </div>
    <div class="am-ces__content">
      <div class="am-ces__heading">
        {{ props.heading }}
      </div>
      <div class="am-ces__text">
        {{ props.text }}
      </div>
    </div>
  </div>
</template>

// * Composables
import { useColorTransparency } from "../../../../../assets/js/common/colorManipulation";

// * Props
let props = defineProps({
  heading: {
    type: String,
    default: ''
  },
  text: {
    type: String,
    default: ''
  }
})

// * Colors
let amColors = inject('amColors')

let cssVars = computed(() => {
  return {
    '--am-c-ces-text': amColors.value.colorMainText,
    '--am-c-ces-text-op70': useColorTransparency(amColors.value.colorMainText, 0.7),
  }
})
</script>

&__content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

&__heading {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      line-height: 1.555555;
      font-weight: 400;
      color: var(--am-c-ces-text);
      margin: 0 0 4px;
    }

&__text {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      line-height: 1.6;
      font-width: 400;
      color: var(--am-c-ces-text-op70);
    }
  }
}

.amelia-v2-booking #amelia-container {
  @include am-cabinet-empty;
}
</style>

Back