@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); } } }