<div class="event-date-hex hexagon make-inview reverse">
    <abbr class="event-month regular" title="November">Nov</abbr> <span class="event-day make-counter">25</span>
</div>
<div class="event-date-hex hexagon{{hex_classes}}">
  {{ render '@month' }} {{ render '@day--animated' }}
</div>
{
  "hex_classes": " make-inview reverse"
}
  • Content:
    $clip-hex:0 !default;
    $event-date-hex-timing:0.25s;
    .event-date-hex {
      background-color:rgba(black,0.05);
      display:flex;
      flex-direction:column;
      justify-content:center;
      height:4.6rem * 1.155; // regular hexagon appears to be 1.155 times as tall as it is wide
      width:4.6rem;
      .event-month[title] {
        border-left:none;
        border-right:none;
        border-top:none;
        margin:0 auto;
      }
      .event-day {
        font-size:1.75rem;
        line-height:2rem;
        height:2rem;
        margin-top:0;
      }
      &.reverse {
        background-color:var(--blue);
        .event-month[title] {
          border-bottom-color:rgba(white,0.4);
          color:white;
        }
        .event-day {
          color:white;
        }
      }
      &.not-inview {
        opacity:0;
      }
      &.inview {
        animation:hex-pop $event-date-hex-timing ease-in-out;
      }
    }
    
    // for accessibility, no animation and no change in opacity
    // https://www.w3.org/WAI/WCAG21/Techniques/css/C39.html
    @media (prefers-reduced-motion: reduce) {
      $event-date-hex-timing:1ms;
      .event-date-hex {
        &.not-inview {
          opacity:1;
        }
        &.inview {
          animation:none;
        }
      }
    }
    
    @keyframes hex-pop {
      0% {
        clip-path:polygon(50% 48%, 51% 49%, 51% 51%, 50% 52%, 49% 51%,49% 49%);
        transform:scale(0.5);
      }
      100% {
        clip-path:$clip-hex;
        transform:scale(1);
      }
    }
    
    
  • URL: /components/raw/event-date-hex/event-date-hex.scss
  • Filesystem Path: source/patterns/molecules/date/event-date-hex/event-date-hex.scss
  • Size: 1.3 KB

There are no notes for this item.