angular-flip-clock/dist/angular-flip-clock.css

Port of FlipClock.js to Angular without any dependencies

/* Main */
.dy-flip-clock {
  font: normal 11px 'Helvetica Neue', Helvetica, sans-serif;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-align: center;
  position: relative;
  width: 100%;
  margin: 1em;
}

.dy-flip-clock * {
    box-sizing: border-box;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

.dy-flip-clock:before,
.dy-flip-clock:after {
    content: ' '; /* 1 */
    display: table; /* 2 */
}
.dy-flip-clock:after {
    clear: both;
}

/* Skeleton */
.dy-flip-clock-number {
  position: relative;
  list-style: none;
  float: left;
  margin: 5px;
  width: 60px;
  height: 90px;
  font-size: 80px;
  font-weight: bold;
  line-height: 87px;
  border-radius: 6px;
  background: #000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}

.dy-flip-clock-number-digit {
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  line-height: 87px;
  text-decoration: none !important;
}

.dy-flip-clock-number-digit:first-child {
  z-index: 2;
}

.dy-flip-clock-card {
  display: block;
  height: 100%;
  -webkit-perspective: 200px;
          perspective: 200px;
  margin: 0 !important;
  overflow: visible !important;
  cursor: default !important;
}

.dy-flip-clock-card-up,
.dy-flip-clock-card-down {
  z-index: 1;
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  font-size: 80px;
  overflow: hidden;
  outline: 1px solid transparent;
}

.dy-flip-clock-card-shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.dy-flip-clock-card-up {
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  top: 0;
}

.dy-flip-clock-card-up:after {
  content: '';
  position: absolute;
  top: 44px;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 3px;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.4);
}

.dy-flip-clock-card-down {
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
  bottom: 0;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.dy-flip-clock-card-value {
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 200%;
  color: #ccc;
  text-shadow: 0 1px 2px #000;
  text-align: center;
  background-color: #333;
  border-radius: 6px;
  font-size: 70px;
}

.dy-flip-clock-card-value-up {
  top: 0;
}

.dy-flip-clock-card-value-down {
  bottom: 0;
}

/* PLAY */
.dy-flip-clock-number-animated .dy-flip-clock-number-digit-before {
  z-index: 3;
}

.dy-flip-clock-number-animated .dy-flip-clock-number-digit-active {
  -webkit-animation: dyFlipClockDigitZIndex 0.5s 0.5s linear both;
          animation: dyFlipClockDigitZIndex 0.5s 0.5s linear both;
  z-index: 5;
}

.dy-flip-clock-divider {
  float: left;
  display: inline-block;
  position: relative;
  width: 20px;
  height: 100px;
}

.dy-flip-clock-divider-hidden {
  width: 0;
}

.dy-flip-clock-label {
  position: absolute;
  top: -1.5em;
  right: -86px;
  color: black;
  text-shadow: none;
}

.dy-flip-clock-dot {
  display: block;
  background: #323434;
  width: 10px;
  height: 10px;
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  left: 5px;
}

.dy-flip-clock-dot-top {
  top: 30px;
}

.dy-flip-clock-dot-bottom {
  bottom: 30px;
}

@-webkit-keyframes dyFlipClockDigitZIndex {
  0% {
    z-index: 2;
  }

  20% {
    z-index: 4;
  }

  100% {
    z-index: 4;
  }
}

@keyframes dyFlipClockDigitZIndex {
  0% {
    z-index: 2;
  }

  20% {
    z-index: 4;
  }

  100% {
    z-index: 4;
  }
}

.dy-flip-clock-number-animated .dy-flip-clock-number-digit-active .dy-flip-clock-card-down {
  z-index: 2;
  -webkit-animation: dyFlipClockTurnDown 0.5s 0.5s linear both;
          animation: dyFlipClockTurnDown 0.5s 0.5s linear both;
}

@-webkit-keyframes dyFlipClockTurnDown {
  0% {
    -webkit-transform: rotateX(90deg);
            transform: rotateX(90deg);
  }

  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
}

@keyframes dyFlipClockTurnDown {
  0% {
    -webkit-transform: rotateX(90deg);
            transform: rotateX(90deg);
  }

  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
}

.dy-flip-clock-number-animated .dy-flip-clock-number-digit-before .dy-flip-clock-card-up {
  z-index: 2;
  -webkit-animation: dyFlipClockTurnUp 0.5s linear both;
          animation: dyFlipClockTurnUp 0.5s linear both;
}

@-webkit-keyframes dyFlipClockTurnUp {
  0% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }

  100% {
    -webkit-transform: rotateX(-90deg);
            transform: rotateX(-90deg);
  }
}

@keyframes dyFlipClockTurnUp {
  0% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }

  100% {
    -webkit-transform: rotateX(-90deg);
            transform: rotateX(-90deg);
  }
}

.dy-flip-clock-number-digit-active {
  z-index: 3;
}

/* SHADOW */
.dy-flip-clock-number-animated .dy-flip-clock-number-digit-before .dy-flip-clock-card-up .dy-flip-clock-card-shadow {
  background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
  background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
  -webkit-animation: dyFlipClockShowShadow 0.5s linear both;
          animation: dyFlipClockShowShadow 0.5s linear both;
}

.dy-flip-clock-number-animated .dy-flip-clock-number-digit-active .dy-flip-clock-card-up .dy-flip-clock-card-shadow {
  background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
  background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
  -webkit-animation: dyFlipClockHideShadow 0.5s 0.3s linear both;
          animation: dyFlipClockHideShadow 0.5s 0.3s linear both;
}

/*DOWN*/
.dy-flip-clock-number-animated .dy-flip-clock-number-digit-before .dy-flip-clock-card-down .dy-flip-clock-card-shadow {
  background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
  background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
  -webkit-animation: dyFlipClockShowShadow 0.5s linear both;
          animation: dyFlipClockShowShadow 0.5s linear both;
}

.dy-flip-clock-number-animated .dy-flip-clock-number-digit-active .dy-flip-clock-card-down .dy-flip-clock-card-shadow {
  background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
  background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
  -webkit-animation: dyFlipClockHideShadow 0.5s 0.2s linear both;
          animation: dyFlipClockHideShadow 0.5s 0.2s linear both;
}

@-webkit-keyframes dyFlipClockShowShadow {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes dyFlipClockShowShadow {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes dyFlipClockHideShadow {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes dyFlipClockHideShadow {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}