/**
* $Variables
**/
$color-bg: #CFF09E !default;
$color-btn: #FE4365 !default;
$color-btn-secondary: #C8C8A9;
$color-btn-active: #4ECDC4 !default;
/**
* $Mixins
**/
@mixin fontSize($size: 24, $base: 16) {
font-size: $size + px;
font-size: ($size / $base) * 1rem;
} /* http://www.sitepoint.com/sass-mixins-kickstart-project/ */
@mixin transition-timing-function($timing) {
-webkit-transition-timing-function: $timing;
-moz-transition-timing-function: $timing;
-o-transition-timing-function: $timing;
transition-timing-function: $timing;
}
@mixin animation($animation) {
-webkit-animation: $animation;
-moz-animation: $animation;
-o-animation: $animation;
animation: $animation;
}
@mixin transition-duration($duration) {
-webkit-transition-duration: $duration;
-moz-transition-duration: $duration;
-o-transition-duration: $duration;
transition-duration: $duration;
}
/* $Base */
body {
margin: 0 auto;
padding-top: 60px;
text-align: center;
font-family: 'Ubuntu', sans-serif;
@include fontSize(22);
font-weight: 500;
color: #333;
background-color: $color-bg;
}
h1 {
@include fontSize(38);
font-style: italic;
text-shadow: 1px 1px 0 #f2f2f2, 2px 2px 0 #f2f2f2;
}
/* $Button */
a.btn{
display: inline-block;
margin: 15px 15px 0;
padding: .6em 1.1em;
@include fontSize(26);
text-decoration: none;
outline: none;
color: #fff;
background-color: $color-btn;
border-radius: 3px;
box-shadow: 0 0 0 -2px $color-bg, 0 0 0 -1px $color-btn;
border: none;
-webkit-transition: -webkit-box-shadow .3s;
transition:box-shadow .3s;
&:hover, &:focus {
box-shadow: 0 0 0 2px $color-bg, 0 0 0 4px darken(#FF1D74, 5%);
@include transition-timing-function(cubic-bezier(.6,4,.3,.8));
@include animation (gelatine .5s 1);
}
}
a.btn-secondary {
background:$color-btn-secondary;
box-shadow: 0 0 0 -2px $color-bg, 0 0 0 -1px $color-btn-secondary;
&:hover {
box-shadow: 0 0 0 2px $color-bg, 0 0 0 4px darken($color-btn-secondary, 5%);
}
}
a.btn:active,
a.btn-secondary:active {
background: $color-btn-active;
@include transition-duration(0);
box-shadow: 0 0 0 2px $color-bg, 0 0 0 4px darken($color-btn-active, 5%);
}
/**
* $keyframes \ gelatine
**/
@keyframes gelatine{
from,to{
-webkit-transform:scale(1, 1);
transform:scale(1, 1)
}
25%{
-webkit-transform:scale(.9, 1.1);
transform:scale(.9, 1.1)
}
50%{
-webkit-transform:scale(1.1, .9);
transform:scale(1.1, .9)
}
75%{
-webkit-transform:scale(.95, 1.05);
transform:scale(.95, 1.05)
}
from,to{
-webkit-transform:scale(1, 1);
transform:scale(1, 1)
}
25%{
-webkit-transform:scale(.9, 1.1);
transform:scale(.9, 1.1)
}
50%{
-webkit-transform:scale(1.1, .9);
transform:scale(1.1, .9)
}75%{
-webkit-transform:scale(.95, 1.05);
transform:scale(.95, 1.05)
}
}
@-webkit-keyframes gelatine{
from,to{
-webkit-transform:scale(1, 1);
transform:scale(1, 1)
}
25%{
-webkit-transform:scale(.9, 1.1);
transform:scale(.9, 1.1)
}
50%{
-webkit-transform:scale(1.1, .9);
transform:scale(1.1, .9)
}
75%{
-webkit-transform:scale(.95, 1.05);
transform:scale(.95, 1.05)
}
from,to{
-webkit-transform:scale(1, 1);
transform:scale(1, 1)
}
25%{
-webkit-transform:scale(.9, 1.1);
transform:scale(.9, 1.1)
}
50%{
-webkit-transform:scale(1.1, .9);
transform:scale(1.1, .9)
}75%{
-webkit-transform:scale(.95, 1.05);
transform:scale(.95, 1.05)
}
}
View Compiled