flip_cover.scss

@mixin flip-cover($name, $content, $color, $height:"") {
  .#{$name}-section, .#{$name}-section * { box-sizing: border-box; }
  .#{$name}-section, .#{$name}-section div { transition-duration: .6s; }

  .#{$name}-section {
    margin-bottom: 10px;
    display:  inline-block;
    position: relative;
    padding:  .375em .375em 0;
    min-height:   2.5em;
    background:    #A9ADB6;
    border-radius: .25em;
    perspective:   300;
    height: #{$height};
    box-shadow: 0 -1px 2px #fff,
      inset 0 1px    2px  rgba(0, 0, 0, .2),
      inset 0 .25em 1em rgba(0, 0, 0, .1);
  }

  .#{$name}-button {
    text-align: center;
    transition-timing-function: ease;
    opacity: 0;
    a {
      text-decoration: none;
      font-weight: bold;
      color: $color;
    }
  }

  .#{$name}-cover {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    transform-origin: left bottom;
    transform-style: preserve-3d;
    font: 1.25em / 2 "icon";
    color: white;
    text-align: center;
    pointer-events: none;
    z-index: 100;
  }

  .#{$name}-inner, .#{$name}-outer {
    position: absolute;
    width: 100%;
    height: 100%;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    border-radius: .25em;
    background-image: -webkit-linear-gradient(
      top, transparent 0%, rgba(0, 0, 0, .1) 100%);

    &:after { content: $content; line-height: #{$height} }
  }

  .#{$name}-outer { background-color: $color; transform: translateZ(.25em); }
  .#{$name}-inner { background-color: lighten($color, 10%); }

  .#{$name}-section:hover {
    background: #EBEFF2;
    .#{$name}-button { opacity: 1 }
    .#{$name}-cover { transform: rotateY(-120deg); }
    .#{$name}-inner { background-color: $color; }
    .#{$name}-outer { background-color: darken($color, 20%); }
    .#{$name}-cover, .#{$name}-inner, .#{$name}-outer {
      transition-timing-function: cubic-bezier(.2, .7, .1, 1.1);
    }
  }
}