TyBs Patterns

Default, Animated 

<div class="event-date-hex hexagon make-inview">
    <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"
}
  • 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.