$lightgray: #ebeff1
$gray: #cdd7dc
$darkgray: #89989c
$green: #66847C
$padding: 15px
$border-radius: 2px
*
box-sizing: border-box
html
padding-top: 25px
background-color: #FDF6E3
font-family: "Signika"
font-size: 16px
font-weight: 400
color: $green
text-rendering: optimizeLegibility
-webkit-font-smoothing: antialiased
h1
text-align: center
font-weight: 400
// ---------------------------- \\
// ---------- FLASH ----------- \\
// ---------------------------- \\
.flash
display: block
position: fixed
top: 25px
right: 25px
width: 350px
padding: 20px 25px 20px 85px
font-size: 16px
font-weight: 400
color: $green
background-color: #FFF
border: 2px solid $green
border-radius: $border-radius
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25)
opacity: 0
.flash__icon
position: absolute
top: 50%
left: 0
width: 1.8em
height: 100%
padding: 0 0.4em
background-color: $green
color: #FFF
font-size: 36px
font-weight: 300
transform: translate(0,-50%)
.icon
position: absolute
top: 50%
transform: translate(0,-50%)
// ---------------------------- \\
// ---------- BUTTON ---------- \\
// ---------------------------- \\
.button
position: absolute
top: 50%
left: 50%
padding: 10px 20px
border: 2px solid $green
border-radius: 2px
color: $green
transform: translate(-50%, -50%)
transition: all 0.1s
&:hover
cursor: pointer
color: #FFF
background-color: $green
&:active
box-shadow: none
background-color: darken($green, 3%)
// ---------------------------- \\
// ----- ANIMATION MIXINS ----- \\
// ---------------------------- \\
// Mixin for vendor prefixed animations
@mixin animation($animate...)
$max: length($animate)
$animations: ''
@for $i from 1 through $max
$animations: #{$animations + nth($animate, $i)}
@if $i < $max
$animations: #{$animations + ", "}
-webkit-animation: $animations
-moz-animation: $animations
-ms-animation: $animations
-o-animation: $animations
animation: $animations
// Mixin for vendor prefixed keyframes
@mixin keyframes($animationName)
@-webkit-keyframes #{$animationName}
@content
@-moz-keyframes #{$animationName}
@content
@-o-keyframes #{$animationName}
@content
@keyframes #{$animationName}
@content
// ------------------------------- \\
// ----- ANIMATION KEYFRAMES ----- \\
// ------------------------------- \\
+keyframes(drop-in-fade-out)
0%
opacity: 0
visibility: visible
-webkit-transform: translate3d(0, -200%, 0)
-moz-transform: translate3d(0, -200%, 0)
-ms-transform: translate3d(0, -200%, 0)
-o-transform: translate3d(0, -200%, 0)
transform: translate3d(0, -200%, 0)
12%
-webkit-transform: translate3d(0, 0, 0)
-moz-transform: translate3d(0, 0, 0)
-ms-transform: translate3d(0, 0, 0)
-o-transform: translate3d(0, 0, 0)
transform: translate3d(0, 0, 0)
20%
opacity: 1
70%
opacity: 1
visibility: visible
-webkit-transform: translate3d(0, 0, 0)
-moz-transform: translate3d(0, 0, 0)
-ms-transform: translate3d(0, 0, 0)
-o-transform: translate3d(0, 0, 0)
transform: translate3d(0, 0, 0)
80%
opacity: 0
100%
visibility: hidden
-webkit-transform: translate3d(75%, 0, 0)
-moz-transform: translate3d(75%, 0, 0)
-ms-transform: translate3d(75%, 0, 0)
-o-transform: translate3d(75%, 0, 0)
transform: translate3d(25%, 0, 0)
// ----------------------------- \\
// ------ ANIMATION CLASS ------ \\
// ----------------------------- \\
.animate--drop-in-fade-out
+animation('drop-in-fade-out 3.5s 0.4s cubic-bezier(.32,1.75,.65,.91)')
View Compiled