{"version":3,"sources":["Card.vue","card/src/Card.vue"],"names":[],"mappings":"AAAA;ECuDE,YAAW;EACX,wBAAY;EACZ,kBAAkB;EAClB,aAAa;EACb,sBAAa;EACb,kBAAkB;EAClB,qBAAkB;EAClB,gBAAgB;EAChB,gBAAgB;EAChB,yBAAgB;EDrDhB,WAAW;ECuDX,YAAY;ADrDd;AACA;EACE,qBCsDqB;EDrDrB,8DCsD8D;ADrDhE;AAEA;ECuDE,sBAAY;AACd;AAEA;EACE,cAAc;EAChB,iBAAA;EDrDE,kBAAkB;ECuDlB,YAAY;EACZ,WAAW;EACX,cAAc;ADrDhB;AAEA;ECuDE,gBAAc;EAChB,eAAA;EDrDE,UAAU;ECuDV,yBAAO;ADrDT;AAEA;ACuDE;IACF,gBAAA;IDrDI,UAAU;ACuDZ;ADrDF;AACA;AACE;IACE,gBCsDY;IACZ,UAAA;AACF;ADrDF","sourcesContent":[".starter-kit {\n  color: white;\n  text-decoration: inherit;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  padding: 1em 1.2em;\n  border-radius: 0.75em;\n  overflow: hidden;\n  text-align: left;\n  transition: all 0.4s ease;\n  width: 18em;\n  height: 26em;\n}\n.starter-kit:hover {\n  transform: scale(1.2);\n  filter: drop-shadow(0.2rem 0.2rem 0.25rem rgba(0, 0, 30, 0.5));\n}\n\n.starter-kit.reduced-hover:hover {\n  transform: scale(1.02);\n}\n\n.action-description {\n  font-size: 1em;\n  font-weight: bold;\n  position: absolute;\n  right: 0.5em;\n  bottom: 1em;\n  max-width: 50%;\n}\n\n.details {\n  overflow: hidden;\n  max-height: 0px;\n  opacity: 0;\n  transition: all 0.4s ease;\n}\n\n@media (hover: hover) {\n  .card:hover .details {\n    max-height: 100%;\n    opacity: 1;\n  }\n}\n@media (hover: none) {\n  .card .details {\n    max-height: 100%;\n    opacity: 1;\n  }\n}","<template>\n  <!-- in case you don't want a clickable anchor card, simply don't pass a url and it will be a div instead -->\n  <component\n    class=\"card\"\n    :is=\"url ? 'a' : 'div'\"\n    :href=\"url\"\n    v-on:click=\"(event) => $emit('click', event)\"\n    :class=\"{\n      'starter-kit': true,\n      'reduced-hover': reducedHover,\n    }\"\n    :style=\"\n      highlighted\n        ? `background-color: ${backgroundColor};`\n        : `background-color: black; border: 3px solid ${backgroundColor};`\n    \"\n  >\n    <slot></slot>\n    <div class=\"action-description details flex items-center\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        style=\"\n          width: 1.5em;\n          height: 1.5em;\n          vertical-align: middle;\n          top: 0.1em;\n          position: relative;\n          display: inline-block;\n        \"\n        aria-hidden=\"true\"\n        viewBox=\"0 0 20 20\"\n        fill=\"currentColor\"\n      >\n        <path\n          fill-rule=\"evenodd\"\n          d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\"\n          clip-rule=\"evenodd\"\n        />\n      </svg>\n    </div>\n  </component>\n</template>\n<script>\nexport default {\n  props: {\n    url: { type: String },\n    onClick: { type: Object },\n    actionDescription: { type: String },\n    reducedHover: { type: Boolean, default: false },\n    backgroundColor: { type: String },\n    highlighted: { type: Boolean, default: false },\n  },\n};\n</script>\n<style lang=\"scss\" scoped>\n.starter-kit {\n  color: white;\n  text-decoration: inherit;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  padding: 1em 1.2em;\n  border-radius: 0.75em;\n  overflow: hidden;\n  text-align: left;\n\n  transition: all 0.4s ease;\n\n  &:hover {\n    transform: scale(1.2);\n    filter: drop-shadow(0.2rem 0.2rem 0.25rem rgba(0, 0, 30, 0.5));\n  }\n\n  width: 18em;\n  height: 26em;\n}\n\n.starter-kit.reduced-hover:hover {\n  transform: scale(1.02);\n}\n\n.action-description {\n  font-size: 1em;\n  font-weight: bold;\n  position: absolute;\n  right: 0.5em;\n  bottom: 1em;\n  max-width: 50%;\n}\n\n.details {\n  overflow: hidden;\n  max-height: 0px;\n  opacity: 0;\n  transition: all 0.4s ease;\n}\n\n.card {\n  @mixin detailed-card {\n    .details {\n      max-height: 100%;\n      opacity: 1;\n    }\n  }\n\n  @media (hover: hover) {\n    &:hover {\n      @include detailed-card;\n    }\n  }\n\n  @media (hover: none) {\n    @include detailed-card;\n  }\n}\n</style>\n"],"sourceRoot":"/source_map/"}