<h1>Pulsing Notification Badge</h1>

<div class="notifications">
  <div class="notification">
    Marketing
  </div>
  <div class="notification notify">
    Redesign Conf
  </div>
  <div class="notification">
    Developers
  </div>
</div>

@import "bourbon";

$border-size: 0.25em;
$border-color: hsl(0, 90, 40);

.notifications {
  position: absolute;
  top: calc(50% + 1em);
  left: calc(50%);
  box-shadow: 0 0 0 0.5em hsla(0, 0, 0, 0.1);
  transform: translate(-50%, -50%);
}

.notification {
  position: relative;
  width: 20em;
  padding: 0 1em;
  font-size: 0.8em;
  line-height: 3.125;
  color: white;
  cursor: pointer;
  @include linear-gradient(hsl(0, 0, 17), hsl(0, 0, 15));
}

.notification:hover {
   @include linear-gradient(tomato, darken(tomato, 20%));
}

.notification.notify:after {
  content: '1';
  display: block;
  position: absolute;
  top: 0;
  right: 1.3333em;
  width: 2em;
  margin: 1.0833em 0;
  border-radius: 50%;
  font-size: 0.75em;
  line-height: 2;
  text-align: center;
  background: hsl(0, 90, 60);
  box-shadow: 0 0 0 $border-size $border-color;
  animation: pulse 0.75s infinite;
}

@include keyframes (pulse) {
  0%   { box-shadow: 0 0 0 #{$border-size * 0.8} $border-color; }
  25%  { box-shadow: 0 0 0 #{$border-size * 0.2} $border-color; }
  50%  { box-shadow: 0 0 0 #{$border-size * 1.5} $border-color; }
  75%  { box-shadow: 0 0 0 #{$border-size * 0.8} $border-color; }
  100% { box-shadow: 0 0 0 #{$border-size * 1.2} $border-color; }
}

/** PAGE STYLES **/
@import url(https://fonts.googleapis.com/css?family=Lato:300|Oswald);

* { @include box-sizing(border-box); }

html, body { width: 100%; height: 100%; }

html { font-size: 62.5%; }

body {
  background: hsl(120, 70, 70);
  font-family: 'Lato', sans-serif;
  font-size: 2em; 
}

h1 {
  margin: 0;
  padding: 1em;
  font-family: 'Oswald', sans-serif;
  font-size: 2em;
  text-transform: uppercase;
  text-align: center;
  color: lighten(hsl(120, 70, 70), 30%);
}