JSFiddle - React, Tailwind, and code Playground

split dates CSS angular

by Andrew Pougher

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<div class="event-holder">
  <div class="dates">{{clname}}
    <strong class="title animated" ng-class="classname">{{dates.ttl1}}</strong>
    <p>
      <time datetime="2016-11-25">{{dates.d1 | date : "MMMM d" | dateSuffix}}</time> -
      <time datetime="2016-11-30">{{dates.d2 | date : "d" | dateSuffix}}</time>
    </p>
  </div>
  <div class="dates animated" ng-class="col">
    <strong class="title">{{dates.ttl2}}</strong>
    <p>
      <time datetime="2016-11-27">{{dates.d3 | date : "MMMM d" | ordinal}}</time> -
      <time datetime="2016-11-30">{{dates.d4 | date : "d" | ordinal}}</time>
    </p>
  </div>
</div>

CSS

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  color: #424242;
  background: #fff;
  font: 15px/28px "Open Sans", "Arial", "Helvetica", sans-serif;
  min-width: 320px;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: none;
}

.event-holder {
  overflow: hidden;
  color: #fff;
  text-transform: capitalize;
  max-height: 62px;
  font-size: 17px;
  font-weight: 300;
}

.event-holder .dates {
  background: #5d227d;
  padding: 6px 15px 6px 16px;
  float: left;
  width: 51.8%;
}

.event-holder .dates.green {
  background: #95c049;
  position: relative;
  z-index: 2;
  width: 48.2%;
  padding-left: 11px;
}


.event-holder .dates.green:before {
  position: absolute;
  top: -15px;
  bottom: -15px;
  left: -9px;
  right: auto;
  background: #95c049;
  content: "";
  width: 30px;
  transform: rotate(-17deg);
  -moz-transform: rotate(-17deg);
  -ms-transform: rotate(-17deg);
  -o-transform: rotate(-17deg);
  -webkit-transform: rotate(-17deg);
  z-index: -1;
}

.event-holder .dates.red {
  background: #cc1100;
  position: relative;
  z-index: 2;
  width: 48.2%;
  padding-left: 11px;
}


.event-holder .dates.red:before {
  position: absolute;
  top: -15px;
  bottom: -15px;
  left: -9px;
  right: auto;
  background: #cc1100;
  content: "";
  width: 30px;
  transform: rotate(-17deg);
  -moz-transform: rotate(-17deg);
  -ms-transform: rotate(-17deg);
  -o-transform: rotate(-17deg);
  -webkit-transform: rotate(-17deg);
  z-index: -1;
}

.event-holder .title {
  display: block;
  line-height: 22px;
  max-height: 22px;
  overflow: hidden;
  font-size: 18px;
  font-weight: 700;
}

.event-holder p {
  margin: 0;
}

JavaScript

var app = angular.module("app", []);

app.run(function($rootScope, $timeout,$interval) {
  $rootScope.dates = {
    'ttl1': 'Meeting Dates',
		'ttl2': 'Exhibit Dates',
    'd1': '2016-11-05',
    'd2': '2016-11-30',
    'd3': '2016-11-27',
    'd4': '2016-11-30'
  };

  $rootScope.number = 100;

  $rootScope.testTimer = function() {
    $rootScope.col = 'green';
    $interval(function() {
      if (  $rootScope.number === 50) {
       
          $rootScope.classname = 'fadeInUp';
          $rootScope.col = 'red slideInRight';
      } else if (  $rootScope.number === 0) {
         $rootScope.number = 100;
          $rootScope.classname = 'flipInX';
              $rootScope.col = 'green fadeInDown';
      }
        $rootScope.number--;
    }, 100);
  }; // end timer 
    $rootScope.testTimer();

})

app.filter('ordinal', function() {
  return function(input) {
    var s = ["th", "st", "nd", "rd"],
      v = input % 100;
    return input + (s[(v - 20) % 10] || s[v] || s[0]);
  }
});

app.filter('dateSuffix', function($filter) {
  var suffixes = ["th", "st", "nd", "rd"];
  return function(input) {
    var dtfilter = $filter('date')(input, 'MMMM dd');
    var day = parseInt(dtfilter.slice(-2));
    var relevantDigits = (day < 30) ? day % 20 : day % 30;
    var suffix = (relevantDigits <= 3) ? suffixes[relevantDigits] : suffixes[0];
    return dtfilter + suffix;
  };
});