Created
February 23, 2016 18:39
-
-
Save ryan-w-moore/bc0b80e3ac34349c69fd to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.4.21) | |
// Compass (v1.0.3) | |
// Bourbon (v4.2.6) | |
// ---- | |
@import "bourbon/bourbon" | |
$color-yellow: #fffe99 | |
$color-green: #b6feb7 | |
$color-gray: #4d4d4d | |
$color-gray-light: #999 | |
$color-black: #070807 | |
$color-blue: #b1fff8 | |
$color-red: #fec6a8 | |
$color-purple: #b584ff | |
$font-primary: "proxima-nova-soft", sans-serif | |
*, *:before, *:after | |
box-sizing: border-box | |
html, body | |
height: 100% | |
margin: 0 | |
padding: 0 | |
width: 100% | |
body | |
+background(linear-gradient(-45deg, $color-yellow, $color-green)) | |
// -webkit-font-smoothing: antialiased; | |
// -moz-osx-font-smoothing: grayscale; | |
.calorie-counter | |
+background(linear-gradient(top left, $color-gray, #000)) | |
+animation(load 1s ease-out forwards) | |
+transform(translate3d(-50%, -40%, 0)) | |
background-color: $color-gray | |
border-radius: 4px | |
box-shadow: 36px 36px 76px 0px rgba(#000, 0.26), 36px 36px 136px 0px rgba(#0b2b08, 1) | |
color: #fff | |
height: 640px | |
font-family: $font-primary | |
font-weight: 500 | |
left: 50% | |
opacity: 0 | |
padding: 38px 46px | |
position: absolute | |
text-align: center | |
top: 50% | |
width: 400px | |
&__title | |
color: #666 | |
font-size: 18px | |
margin-bottom: 10px | |
&__date | |
font-size: 22px | |
margin-bottom: 50px | |
.chart | |
svg | |
height: 100% | |
width: 100% | |
&__background | |
fill: none | |
height: 100% | |
position: relative | |
stroke: #5a5a59 | |
stroke-width: 20px | |
width: 100% | |
&__foreground | |
+transform(rotate(180deg)) | |
+transition(stroke-dashoffset 1s ease-in) | |
fill: none | |
height: 100% | |
left: 0 | |
position: absolute | |
stroke-dasharray: 630px | |
stroke-dashoffset: 630px | |
stroke-linecap: round | |
stroke-width: 20px | |
stroke: $color-green | |
top: 0 | |
width: 100% | |
&__count | |
color: $color-gray-light | |
font-size: 16px | |
position: relative | |
div | |
color: #fff | |
font-size: 22px | |
.chart__container | |
display: inline-block | |
height: 100% | |
position: relative | |
width: 100% | |
&--calorie | |
.chart__container | |
height: 220px | |
width: 220px | |
.chart__count | |
top: -135px | |
&--protein, &--carbs | |
float: left | |
margin-bottom: 50px | |
text-align: left | |
width: 50% | |
.chart__container | |
height: 30px | |
width: 30px | |
.chart__foreground | |
stroke: $color-blue | |
.chart__count | |
color: $color-gray-light | |
display: inline-block | |
font-size: 14px | |
padding-left: 10px | |
position: relative | |
text-align: left | |
top: 2px | |
overflow: hidden | |
div | |
color: #fff | |
font-size: 14px | |
&--carbs | |
float: none | |
overflow: hidden | |
.chart__foreground | |
stroke: $color-red | |
.calorie__count | |
background-color: #b584ff | |
padding: 23px | |
&__consumed, &__remaining | |
font-size: 16px | |
span | |
display: block | |
font-size: 22px | |
&__consumed | |
overflow: hidden | |
&__remaining | |
background-color: #fff | |
box-shadow: 19px 19px 49px 0px rgba(#000, 0.36) | |
color: $color-gray | |
float: right | |
padding: 24px | |
position: relative | |
right: -15px | |
top: -35px | |
width: 60% | |
+keyframes(load) | |
from | |
+transform(translate3d(-50%, -40%, 0)) | |
opacity: 0 | |
to | |
+transform(translate3d(-50%, -50%, 0)) | |
opacity: 1 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
*, *:before, *:after { | |
box-sizing: border-box; | |
} | |
html, body { | |
height: 100%; | |
margin: 0; | |
padding: 0; | |
width: 100%; | |
} | |
body { | |
background: -webkit-linear-gradient(-225deg, #fffe99, #b6feb7); | |
background: linear-gradient(-45deg, #fffe99, #b6feb7); | |
} | |
.calorie-counter { | |
background: -webkit-linear-gradient(top left, #4d4d4d, #000); | |
background: linear-gradient(to bottom right, #4d4d4d, #000); | |
-webkit-animation: load 1s ease-out forwards; | |
-moz-animation: load 1s ease-out forwards; | |
animation: load 1s ease-out forwards; | |
-webkit-transform: translate3d(-50%, -40%, 0); | |
-moz-transform: translate3d(-50%, -40%, 0); | |
-ms-transform: translate3d(-50%, -40%, 0); | |
-o-transform: translate3d(-50%, -40%, 0); | |
transform: translate3d(-50%, -40%, 0); | |
background-color: #4d4d4d; | |
border-radius: 4px; | |
box-shadow: 36px 36px 76px 0px rgba(0, 0, 0, 0.26), 36px 36px 136px 0px #0b2b08; | |
color: #fff; | |
height: 640px; | |
font-family: "proxima-nova-soft", sans-serif; | |
font-weight: 500; | |
left: 50%; | |
opacity: 0; | |
padding: 38px 46px; | |
position: absolute; | |
text-align: center; | |
top: 50%; | |
width: 400px; | |
} | |
.calorie-counter__title { | |
color: #666; | |
font-size: 18px; | |
margin-bottom: 10px; | |
} | |
.calorie-counter__date { | |
font-size: 22px; | |
margin-bottom: 50px; | |
} | |
.chart svg { | |
height: 100%; | |
width: 100%; | |
} | |
.chart__background { | |
fill: none; | |
height: 100%; | |
position: relative; | |
stroke: #5a5a59; | |
stroke-width: 20px; | |
width: 100%; | |
} | |
.chart__foreground { | |
-webkit-transform: rotate(180deg); | |
-moz-transform: rotate(180deg); | |
-ms-transform: rotate(180deg); | |
-o-transform: rotate(180deg); | |
transform: rotate(180deg); | |
-webkit-transition: stroke-dashoffset 1s ease-in; | |
-moz-transition: stroke-dashoffset 1s ease-in; | |
transition: stroke-dashoffset 1s ease-in; | |
fill: none; | |
height: 100%; | |
left: 0; | |
position: absolute; | |
stroke-dasharray: 630px; | |
stroke-dashoffset: 630px; | |
stroke-linecap: round; | |
stroke-width: 20px; | |
stroke: #b6feb7; | |
top: 0; | |
width: 100%; | |
} | |
.chart__count { | |
color: #999; | |
font-size: 16px; | |
position: relative; | |
} | |
.chart__count div { | |
color: #fff; | |
font-size: 22px; | |
} | |
.chart .chart__container { | |
display: inline-block; | |
height: 100%; | |
position: relative; | |
width: 100%; | |
} | |
.chart--calorie .chart__container { | |
height: 220px; | |
width: 220px; | |
} | |
.chart--calorie .chart__count { | |
top: -135px; | |
} | |
.chart--protein, .chart--carbs { | |
float: left; | |
margin-bottom: 50px; | |
text-align: left; | |
width: 50%; | |
} | |
.chart--protein .chart__container, .chart--carbs .chart__container { | |
height: 30px; | |
width: 30px; | |
} | |
.chart--protein .chart__foreground, .chart--carbs .chart__foreground { | |
stroke: #b1fff8; | |
} | |
.chart--protein .chart__count, .chart--carbs .chart__count { | |
color: #999; | |
display: inline-block; | |
font-size: 14px; | |
padding-left: 10px; | |
position: relative; | |
text-align: left; | |
top: 2px; | |
overflow: hidden; | |
} | |
.chart--protein .chart__count div, .chart--carbs .chart__count div { | |
color: #fff; | |
font-size: 14px; | |
} | |
.chart--carbs { | |
float: none; | |
overflow: hidden; | |
} | |
.chart--carbs .chart__foreground { | |
stroke: #fec6a8; | |
} | |
.calorie__count { | |
background-color: #b584ff; | |
padding: 23px; | |
} | |
.calorie__count__consumed, .calorie__count__remaining { | |
font-size: 16px; | |
} | |
.calorie__count__consumed span, .calorie__count__remaining span { | |
display: block; | |
font-size: 22px; | |
} | |
.calorie__count__consumed { | |
overflow: hidden; | |
} | |
.calorie__count__remaining { | |
background-color: #fff; | |
box-shadow: 19px 19px 49px 0px rgba(0, 0, 0, 0.36); | |
color: #4d4d4d; | |
float: right; | |
padding: 24px; | |
position: relative; | |
right: -15px; | |
top: -35px; | |
width: 60%; | |
} | |
@-webkit-keyframes load { | |
from { | |
-webkit-transform: translate3d(-50%, -40%, 0); | |
-moz-transform: translate3d(-50%, -40%, 0); | |
-ms-transform: translate3d(-50%, -40%, 0); | |
-o-transform: translate3d(-50%, -40%, 0); | |
transform: translate3d(-50%, -40%, 0); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform: translate3d(-50%, -50%, 0); | |
-moz-transform: translate3d(-50%, -50%, 0); | |
-ms-transform: translate3d(-50%, -50%, 0); | |
-o-transform: translate3d(-50%, -50%, 0); | |
transform: translate3d(-50%, -50%, 0); | |
opacity: 1; | |
} | |
} | |
@-moz-keyframes load { | |
from { | |
-webkit-transform: translate3d(-50%, -40%, 0); | |
-moz-transform: translate3d(-50%, -40%, 0); | |
-ms-transform: translate3d(-50%, -40%, 0); | |
-o-transform: translate3d(-50%, -40%, 0); | |
transform: translate3d(-50%, -40%, 0); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform: translate3d(-50%, -50%, 0); | |
-moz-transform: translate3d(-50%, -50%, 0); | |
-ms-transform: translate3d(-50%, -50%, 0); | |
-o-transform: translate3d(-50%, -50%, 0); | |
transform: translate3d(-50%, -50%, 0); | |
opacity: 1; | |
} | |
} | |
@-o-keyframes load { | |
from { | |
-webkit-transform: translate3d(-50%, -40%, 0); | |
-moz-transform: translate3d(-50%, -40%, 0); | |
-ms-transform: translate3d(-50%, -40%, 0); | |
-o-transform: translate3d(-50%, -40%, 0); | |
transform: translate3d(-50%, -40%, 0); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform: translate3d(-50%, -50%, 0); | |
-moz-transform: translate3d(-50%, -50%, 0); | |
-ms-transform: translate3d(-50%, -50%, 0); | |
-o-transform: translate3d(-50%, -50%, 0); | |
transform: translate3d(-50%, -50%, 0); | |
opacity: 1; | |
} | |
} | |
@keyframes load { | |
from { | |
-webkit-transform: translate3d(-50%, -40%, 0); | |
-moz-transform: translate3d(-50%, -40%, 0); | |
-ms-transform: translate3d(-50%, -40%, 0); | |
-o-transform: translate3d(-50%, -40%, 0); | |
transform: translate3d(-50%, -40%, 0); | |
opacity: 0; | |
} | |
to { | |
-webkit-transform: translate3d(-50%, -50%, 0); | |
-moz-transform: translate3d(-50%, -50%, 0); | |
-ms-transform: translate3d(-50%, -50%, 0); | |
-o-transform: translate3d(-50%, -50%, 0); | |
transform: translate3d(-50%, -50%, 0); | |
opacity: 1; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment