TyBs Patterns

Reverse, Animated 

<abbr class="event-month reverse make-inview animate-wipe" title="November">Nov</abbr>
 
<abbr class="event-month{{event_month_style}}" title="{{event_month_full}}">{{event_month_short}}</abbr>
 
{
  "event_month_full": "November",
  "event_month_short": "Nov",
  "event_month_style": " reverse make-inview animate-wipe"
}
  • Content: 
    $color-event-month:var(--red);

.event-month[title] {
  border:1px rgba(black,0.1) solid;
  color:$color-event-month;
  display:block;
  font-size:0.875rem;
  font-weight:bold;
  line-height:1rem;
  padding:0.25rem 0;
  position:relative;
  text-align:center;
  text-decoration:none;
  text-transform:uppercase;
  &.reverse {
    background-color:$color-event-month;
    border:none;
    color:white;
  }
}
  • URL: /components/raw/month/month.scss
  • Filesystem Path: source/patterns/atoms/date/month/month.scss
  • Size: 406 Bytes

There are no notes for this item.