|
@import "compass/css3"; |
|
|
|
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); |
|
@import url(http://fonts.googleapis.com/css?family=Noto+Serif:400,400italic); |
|
|
|
$device-width: 264px * 1.5; |
|
$device-height: 544px * 1.5; |
|
|
|
$header-height: 3rem; |
|
|
|
$color-bg: #515866; |
|
$color-app: #3b3b3b; |
|
$color-header: #e34a36; |
|
$color-device: #dcdfe6; |
|
$color-device-border: white; |
|
$color-device-part: #a1a5b3; |
|
|
|
$color-text-dark: #333; |
|
$color-text-light: white; |
|
|
|
$color-cup: $color-text-light; |
|
$color-accent: #e34a36; |
|
|
|
$animation-easing: cubic-bezier(0.645, 0.045, 0.355, 1); |
|
|
|
$coffee-types: ( |
|
'doppio': ('espresso': 2, 'crema': 0.3), |
|
'macchiatto': ('espresso': 2, 'crema': 0.3, 'foam': 0.5), |
|
'cortado': ('espresso': 2, 'crema': 0.3, 'foam': 1), |
|
'cappuccino': ('espresso': 2, 'crema': 0.3, 'foam': 2, 'steam': 2), |
|
'americano': ('espresso': 2, 'crema': 0.3, 'water': 3), |
|
'mocha': ('espresso': 2, 'crema': 0.3, 'chocolate': 2, 'steam': 1), |
|
'latte': ('espresso': 2, 'crema': 0.3, 'steam': 3, 'foam': 0.1), |
|
'breve': ('espresso': 2, 'crema': 0.3, 'half': 3), |
|
'mochabreve': ('espresso': 2, 'crema': 0.3, 'half': 2, 'chocolate': 2), |
|
'flatwhite': ('espresso': 2, 'crema': 0.3, 'steam': 4), |
|
'bombon': ('condensed': 2, 'espresso': 2, 'crema': 0.3), |
|
); |
|
|
|
$ingredients: ( |
|
'foam': ('color': #fdfdfd), |
|
'steam': ('color': #f0eada), |
|
'half': ('color': #f0eada), |
|
'water': ('color': #c7dfdf), |
|
'espresso': ('color': #4d211d), |
|
'chocolate': ('color': #71471c), |
|
'crema': ('color': #ac6d44), |
|
'condensed': ('color': #f0eada) |
|
); |
|
|
|
$coffee-type-height: 3rem; |
|
$coffee-cup-height: 200px; |
|
$coffee-cup-width: $coffee-cup-height; |
|
$coffee-info-height: $coffee-cup-height * 2; |
|
$rule-width: $coffee-cup-height / 2; |
|
$recipe-cup-offset: 0.4 * $device-width; |
|
|
|
@mixin clearfix { |
|
&:before, &:after { |
|
content: " "; |
|
display: table; |
|
} |
|
&:after { clear: both; } |
|
} |
|
|
|
.coffee-title { |
|
height: 3rem; |
|
overflow: visible; |
|
z-index: 20; |
|
} |
|
|
|
.coffee-info { |
|
outline: none; |
|
padding: 1rem; |
|
transition: transform 0.5s $animation-easing; |
|
|
|
&, + .info-overlay { |
|
display: block; |
|
height: calc(#{$coffee-cup-height} + 2rem); |
|
width: 100%; |
|
position: absolute; |
|
top: 35%; |
|
} |
|
|
|
+ .info-overlay { |
|
pointer-events: none; |
|
} |
|
|
|
&:focus { |
|
transform: translateX($recipe-cup-offset); |
|
|
|
.coffee-recipe { |
|
opacity: 1; |
|
transform: translateX(-$recipe-cup-offset); |
|
} |
|
|
|
+ .info-overlay { |
|
pointer-events: auto; |
|
} |
|
} |
|
} |
|
|
|
.coffee-cup { |
|
width: $coffee-cup-height; |
|
height: $coffee-cup-height; |
|
border-style: solid; |
|
border-color: $color-cup; |
|
border-width: 0.5rem; |
|
// border-top-width: 0; |
|
margin: auto; |
|
animation: cup-inactive 0.5s $animation-easing both; |
|
transition: opacity 0.5s $animation-easing; |
|
opacity: 0; |
|
|
|
&:after { |
|
content: ''; |
|
display: block; |
|
position: absolute; |
|
height: $coffee-cup-height / 3; |
|
width: $coffee-cup-height / 4; |
|
border-width: 0.6rem; |
|
border-color: white; |
|
border-style: solid; |
|
left: 100%; |
|
border-radius: 0 50% 50% 0; |
|
top: $coffee-cup-height / 5; |
|
transform: skewY(-15deg); |
|
border-left-width: 0; |
|
} |
|
|
|
border-bottom-left-radius: $coffee-cup-width * .375; |
|
border-bottom-right-radius: $coffee-cup-width * .375; |
|
border-top-left-radius: 0.5rem; |
|
border-top-right-radius: 0.5rem; |
|
} |
|
|
|
.coffee-ingredients { |
|
position: absolute; |
|
left: 0; |
|
height: auto; |
|
width: calc(100% - 1rem); |
|
margin: 0.5rem; |
|
bottom: 0; |
|
overflow: hidden; |
|
|
|
transition-duration: 1s; |
|
transition-delay: 0.5s; |
|
transition-timing-function: $animation-easing; |
|
transition-property: opacity, transform; |
|
transform: scaleY(0); |
|
opacity: 0; |
|
transform-origin: bottom; |
|
|
|
border-bottom-left-radius: calc(#{$coffee-cup-width} * .375 - 1rem); |
|
border-bottom-right-radius: calc(#{$coffee-cup-width} * .375 - 1rem); |
|
|
|
border-left: 1px solid rgba($color-cup, 0.5); |
|
border-right: 1px solid rgba($color-cup, 0.5); |
|
background-color: rgba($color-cup, 0.5); |
|
} |
|
|
|
.coffee-recipe { |
|
position: absolute; |
|
left: 0; |
|
bottom: 2rem; |
|
height: auto; |
|
width: 100%; |
|
color: white; |
|
padding: 0 calc(#{$recipe-cup-offset} - 1rem) 0 1rem; |
|
opacity: 0; |
|
transition-duration: 0.5s; |
|
transition-property: transform, opacity; |
|
transition-timing-function: $animation-easing; |
|
transform: translateX($recipe-cup-offset); |
|
} |
|
|
|
[class^="recipe-"] { |
|
white-space: nowrap; |
|
overflow-x: hidden; |
|
opacity: 0; |
|
top: 0.5rem; |
|
transition-property: height; |
|
transition-delay: 1s; |
|
|
|
&:not(.recipe-crema) { min-height: 2.5rem; } |
|
|
|
&.recipe-crema { overflow: hidden; } |
|
|
|
&:before { |
|
position: absolute; |
|
top: 1rem; |
|
font-weight: 700; |
|
font-size: small; |
|
font-variant: small-caps; |
|
line-height: 1.4; |
|
} |
|
|
|
&:after { |
|
content: ''; |
|
display: inline-block; |
|
border-bottom: 1px dotted $color-text-light; |
|
width: 100%; |
|
transform: scaleX(2); |
|
transform-origin: left bottom; |
|
margin: 0 0.5rem; |
|
} |
|
} |
|
|
|
[class^="ingredient-"] { |
|
width: 100%; |
|
margin-bottom: 1px; |
|
height: 0; |
|
transition-property: height; |
|
transition-delay: 1s; |
|
|
|
&:after { |
|
margin-top: 1rem; |
|
} |
|
} |
|
|
|
@each $ingredient-key, $ingredient-info in $ingredients { |
|
$ingredient-color: map-get($ingredient-info, 'color'); |
|
|
|
.ingredient-#{$ingredient-key} { |
|
background-color: $ingredient-color; |
|
color: $ingredient-color; |
|
} |
|
} |
|
|
|
@for $ingredient-index from 1 through length($ingredients) { |
|
[class^="ingredient-"]:nth-child(#{$ingredient-index}n) { |
|
z-index: (length($ingredients) - $ingredient-index + 1) * 10; |
|
} |
|
} |
|
|
|
.coffee-labels { |
|
animation: coffee-labels-active 0.5s 0.5s $animation-easing both; |
|
|
|
label { |
|
display: block; |
|
height: $coffee-type-height; |
|
line-height: $coffee-type-height; |
|
text-align: center; |
|
text-transform: uppercase; |
|
font-weight: 700; |
|
padding: 0 1rem; |
|
animation: coffee-type-active 1s $animation-easing both; |
|
transition-property: opacity; |
|
transition-duration: 0.5s; |
|
transition-timing-function: $animation-easing; |
|
transition-delay: 0.5s; |
|
opacity: 1; |
|
pointer-events: auto; |
|
|
|
p { |
|
font-family: 'Noto Serif', sans-serif; |
|
font-style: italic; |
|
transition: all 0.5s $animation-easing; |
|
transition-property: transform, opacity; |
|
transition-duration: 0.5s; |
|
transition-timing-function: $animation-easing; |
|
transition-delay: 0; |
|
line-height: 1.4; |
|
font-size: 1rem; |
|
font-weight: normal; |
|
color: $color-text-light; |
|
opacity: 0; |
|
text-transform: none; |
|
transform: translateY(50%); |
|
} |
|
|
|
span { |
|
display: inline-block; |
|
font-size: 2rem; |
|
color: $color-text-light; |
|
|
|
&:after { |
|
content: ''; |
|
position: absolute; |
|
display: block; |
|
top: 100%; |
|
left: calc(50% - #{$rule-width / 2}); |
|
width: $rule-width; |
|
height: 1px; |
|
background: $color-accent; |
|
opacity: 0; |
|
} |
|
} |
|
} |
|
} |
|
|
|
[name="coffeeType"]:checked { |
|
~ .coffee-info { |
|
[class^="ingredient-"], [class^="recipe-"] { |
|
transition-delay: 0; |
|
display: none; |
|
} |
|
|
|
.coffee-cup { |
|
opacity: 1; |
|
} |
|
} |
|
|
|
~ .coffee-title label { |
|
animation: coffee-type-inactive 1s $animation-easing both; |
|
transition-delay: 0s; |
|
opacity: 0; |
|
pointer-events: none; |
|
} |
|
|
|
~ .coffee-controls { |
|
transition-delay: 0.5s; |
|
transform: translateY(0); |
|
opacity: 1; |
|
|
|
[type="reset"] { |
|
opacity: 1; |
|
} |
|
} |
|
} |
|
|
|
@each $coffee-type, $coffee-recipe in $coffee-types { |
|
##{$coffee-type}:checked { |
|
~ .coffee-title label { |
|
&[for="#{$coffee-type}"] { |
|
animation: none; |
|
opacity: 1; |
|
|
|
p { |
|
opacity: 1; |
|
transform: translateY(0); |
|
transition-delay: 0.5s; |
|
} |
|
|
|
span:after { |
|
animation: coffee-rule-active 1s 0.5s $animation-easing both; |
|
} |
|
} |
|
} |
|
|
|
~ .coffee-info { |
|
.coffee-cup { |
|
animation: cup-active 2s $animation-easing; |
|
} |
|
|
|
.coffee-ingredients { |
|
animation: ingredients-active 2s $animation-easing; |
|
transform: scaleY(1); |
|
opacity: 1; |
|
} |
|
|
|
@each $ingredient, $amount in $coffee-recipe { |
|
.ingredient-#{$ingredient}, .recipe-#{$ingredient} { |
|
display: block; |
|
height: calc(1/6.3 * (#{$coffee-cup-height} - 2rem) * #{$amount}); |
|
} |
|
|
|
.recipe-#{$ingredient} { |
|
transition-delay: 0; |
|
transition-duration: 0.5s; |
|
transition-timing-function: $animation-easing; |
|
transition-property: opacity; |
|
opacity: 1; |
|
&:before { content: '#{$amount * 30}ml'; } |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.coffee-steam { |
|
position: absolute; |
|
height: 10rem; |
|
width: 100%; |
|
bottom: 100%; |
|
left: 0; |
|
} |
|
.steam { |
|
width: 1rem; |
|
height: 1rem; |
|
color: rgba($color-text-light, 0.3); |
|
position: absolute; |
|
bottom: 0; |
|
animation: steam-active 3s ease-out infinite; |
|
filter: blur(0.5rem); |
|
|
|
@for $index from 1 through 3 { |
|
&:nth-child(#{$index}n) { |
|
left: calc(50% - #{($index - 2) * 1.5rem}); |
|
} |
|
} |
|
|
|
&:before { content: "~"; transform: rotate(90deg) scaleX(15) scaleY(10); display: block; } |
|
|
|
&.large { |
|
animation-delay: 0.5s; |
|
|
|
&:before { transform: rotate(90deg) scaleX(20) scaleY(15); } |
|
} |
|
} |
|
|
|
form { |
|
height: 100%; |
|
width: 100%; |
|
} |
|
|
|
@keyframes steam-active { |
|
0% { |
|
transform: translateY(1rem); |
|
opacity: 0; |
|
} |
|
16% { |
|
opacity: 1; |
|
} |
|
100% { |
|
transform: translateY(-5rem); |
|
opacity: 0; |
|
} |
|
} |
|
|
|
@keyframes coffee-type-inactive { |
|
0% { |
|
height: $coffee-type-height; |
|
} |
|
50% { |
|
height: $coffee-type-height; |
|
} |
|
100% { |
|
height: 0; |
|
} |
|
} |
|
|
|
@keyframes coffee-type-active { |
|
0% { |
|
height: 0; |
|
} |
|
50% { |
|
height: $coffee-type-height; |
|
} |
|
100% { |
|
height: $coffee-type-height; |
|
} |
|
} |
|
|
|
@keyframes coffee-rule-active { |
|
50% { |
|
opacity: 0; |
|
transform: scaleX(0); |
|
} |
|
100% { |
|
opacity: 1; |
|
transform: scaleX(1); |
|
} |
|
} |
|
|
|
@keyframes cup-active { |
|
0% { |
|
transform: translateX(-2 * $coffee-cup-width); |
|
} |
|
100% { |
|
transform: translateX(0); |
|
} |
|
} |
|
|
|
@keyframes cup-inactive { |
|
0% { |
|
transform: translateX(0); |
|
} |
|
100% { |
|
transform: translateX(2 * $coffee-cup-width); |
|
} |
|
} |
|
|
|
@keyframes coffee-labels-active { |
|
0% { |
|
opacity: 0; |
|
} |
|
100% { |
|
opacity: 1; |
|
} |
|
} |
|
|
|
.coffee-controls { |
|
transition: all 0.5s 0 $animation-easing; |
|
display: block; |
|
position: absolute; |
|
bottom: 0; |
|
left: 0; |
|
width: 100%; |
|
height: auto; |
|
padding: 2rem; |
|
text-align: center; |
|
font-size: 1rem; |
|
transform: translateY(100%); |
|
opacity: 0; |
|
} |
|
|
|
[type="reset"] { |
|
transition: all 0.5s $animation-easing; |
|
display: block; |
|
position: relative; |
|
bottom: 0; |
|
margin-left: auto; |
|
margin-right: auto; |
|
appearance: none; |
|
-moz-appearance: none; |
|
background: transparent; |
|
color: $color-text-light; |
|
border: 1px solid currentColor; |
|
padding: 1rem 2rem; |
|
font-size: 0.8rem; |
|
text-transform: uppercase; |
|
font-weight: 700; |
|
opacity: 0; |
|
|
|
&:hover { |
|
color: $color-app; |
|
background: $color-text-light; |
|
} |
|
} |
|
|
|
// Global Styles |
|
*, *:before, *:after { |
|
box-sizing: border-box; |
|
position: relative; |
|
} |
|
|
|
input[type="radio"] { |
|
height: 0; |
|
visibility: hidden; |
|
} |
|
|
|
html, body { |
|
font-family: Lato, sans-serif; |
|
font-weight: 300; |
|
line-height: 1; |
|
background-color: $color-bg; |
|
width: 100%; |
|
height: 100%; |
|
margin: 0; |
|
} |
|
|
|
aside, main { |
|
width: 50%; |
|
height: $device-height; |
|
float: left; |
|
padding: 0 2rem; |
|
margin: 2rem 0; |
|
} |
|
|
|
.meta { |
|
top: 50%; |
|
transform: translateY(-50%); |
|
font-size: 1.2rem; |
|
p, a { color: rgba(255, 255, 255, 0.5); } |
|
h1 { |
|
font-size: 3rem; |
|
line-height: 1.2; |
|
font-weight: 300; |
|
color: $color-text-light; |
|
} |
|
p { line-height: 1.4; } |
|
|
|
a:hover { |
|
color: rgba(255, 255, 255, 0.7); |
|
} |
|
} |
|
|
|
.device { |
|
position: absolute; |
|
right: 2rem; |
|
height: $device-height; |
|
width: $device-width; |
|
padding: 90px 10px; |
|
border: 5px solid $color-device-border; |
|
border-radius: 60px; |
|
background-color: $color-device; |
|
box-shadow: 0 0 50px 10px rgba(0,0,0,0.1); |
|
|
|
&, * { user-select: none; } |
|
|
|
&:before, &:after { |
|
content: ''; |
|
position: absolute; |
|
z-index: 2; |
|
} |
|
|
|
&:before { |
|
width: 20%; |
|
height: 10px; |
|
top: 40px; |
|
left: 40%; |
|
border-radius: 10px; |
|
background-color: $color-device-part; |
|
} |
|
|
|
&:after { |
|
width: 50px; |
|
height: 50px; |
|
border-radius: 50%; |
|
border: solid 5px lighten($color-device-part, 10%); |
|
left: calc(50% - 25px); |
|
bottom: 15px; |
|
} |
|
|
|
header { |
|
height: $header-height; |
|
background-color: $color-header; |
|
|
|
h1 { |
|
margin: 0; |
|
line-height: $header-height; |
|
text-align: center; |
|
font-size: 1.3rem; |
|
font-weight: 300; |
|
color: $color-text-light; |
|
letter-spacing: 1px; |
|
text-transform: uppercase; |
|
} |
|
} |
|
|
|
section { |
|
height: calc(100% - #{$header-height}); |
|
width: 100%; |
|
overflow: hidden; |
|
background-color: $color-app; |
|
} |
|
} |