Last active
August 29, 2015 14:10
-
-
Save AdamChristie/42e4116d0bdde752e1de 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
%h3 | |
%button | |
hi |
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.3.14) | |
// Compass (v1.0.1) | |
// ---- | |
@mixin filters { | |
$filter-list: black-white, brownie, cyan, juergen, kodachrome, light-blue, magenta, montmartre, no-filter, red, rose, sepia, technicolor, vintage-pinhole, violet, yellow; | |
@each $filter in $filter-list { | |
&.#{$filter} { | |
background: image_url("design/photo_filters/#{$filter}.jpg"); | |
} | |
} | |
} | |
h3 { | |
@include filters | |
} | |
@mixin calc($prop, $val) { | |
@each $pre in -webkit-, -moz-, -ms- { | |
#{$prop}: $pre + calc(#{$val}); | |
} | |
#{$prop}: calc(#{$val}); | |
} | |
@mixin keyframe($animation) { | |
$prelist: -webkit-, -moz-, -ms-; | |
@each $pre in $prelist { | |
#{$pre}: $pre + calc(#{$val}); | |
} | |
#{$prop}: calc(#{$val}); | |
} | |
@mixin placeholder { | |
&::-webkit-input-placeholder { @content } | |
&::-moz-placeholder { @content } | |
&:-ms-input-placeholder { @content } | |
} | |
@mixin keyframes($animation-name) { | |
@-webkit-keyframes $animation-name { | |
@content; | |
} | |
@-moz-keyframes $animation-name { | |
@content; | |
} | |
@keyframes $animation-name { | |
@content; | |
} | |
} | |
@mixin animation($str) { | |
$prelist: -webkit-, -moz-; | |
@each $pre in $prelist { | |
#{$pre}animation: #{$str}; | |
} | |
animation: #{$str}; | |
} | |
@include keyframes(slide-down) { | |
0% { opacity: 1; } | |
90% { opacity: 0; } | |
} | |
div { | |
width: 100px; | |
height: 100px; | |
background: black; | |
@include animation('slide-down 5s'); | |
} | |
@mixin keyframes($animation-name) { | |
@-webkit-keyframes $animation-name { | |
@content; | |
} | |
@-moz-keyframes $animation-name { | |
@content; | |
} | |
@keyframes $animation-name { | |
@content; | |
} | |
} | |
@mixin animation($content) { | |
$prelist: -webkit-, -moz-; | |
@each $pre in $prelist { | |
#{$pre}animation: #{$content}; | |
} | |
animation: #{$content}; | |
} | |
@include keyframes(fade-in) { | |
0% { opacity: 0; } | |
100% { opacity: 1; } | |
} | |
@include keyframes(fade-out) { | |
0% { opacity: 1; } | |
100% { opacity: 0; } | |
} | |
@include keyframes(fade-out-in) { | |
0%,100 { opacity: 1; } | |
50% { opacity: 0; } | |
} | |
@include keyframes(eventcard-in) { | |
0%, 50% { height: 130px; padding-bottom: 0px;transform-origin: left top; } | |
100% { height: 160px; padding-bottom: 20px; transform-origin: left top; } | |
} | |
@include keyframes(eventcard-out) { | |
0% { height: 160px; padding-bottom: 20px; transform-origin: left top; } | |
100%{ height: 130px; padding-bottom: 0px; transform-origin: left top; } | |
} | |
@include keyframes(collector-in) { | |
0% { height: 0px; padding-top: 0; transform-origin: left top; } | |
100%{ height: 60px; padding-top: 33px; transform-origin: left top; } | |
} | |
@include keyframes(collector-out) { | |
100% { height: 0px; padding-top: 0; transform-origin: left top; } | |
0%{ height: 60px; padding-top: 33px; transform-origin: left top; } | |
} | |
.upload-progress-text { | |
@include animation('fade-out-in cubic-bezier(0.25,0.1,0.25,1) infinite'); | |
} | |
@mixin range { | |
$prefix-list: '-web-kit-','-moz-'; | |
@each $prefix in $prefix-list { | |
&::#{$prefix}slider-thumb { | |
background-color: #fff; | |
border: solid 1px rgba(163,133,70,.4); | |
border-radius: 40px; | |
cursor: ew-resize; | |
height: 40px; | |
padding: 5px; | |
width: 40px; | |
} | |
} | |
} | |
.toolset__slider--range { | |
@include range; | |
} |
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
h3.black-white { | |
background: url('/images/design/photo_filters/black-white.jpg'); | |
} | |
h3.brownie { | |
background: url('/images/design/photo_filters/brownie.jpg'); | |
} | |
h3.cyan { | |
background: url('/images/design/photo_filters/cyan.jpg'); | |
} | |
h3.juergen { | |
background: url('/images/design/photo_filters/juergen.jpg'); | |
} | |
h3.kodachrome { | |
background: url('/images/design/photo_filters/kodachrome.jpg'); | |
} | |
h3.light-blue { | |
background: url('/images/design/photo_filters/light-blue.jpg'); | |
} | |
h3.magenta { | |
background: url('/images/design/photo_filters/magenta.jpg'); | |
} | |
h3.montmartre { | |
background: url('/images/design/photo_filters/montmartre.jpg'); | |
} | |
h3.no-filter { | |
background: url('/images/design/photo_filters/no-filter.jpg'); | |
} | |
h3.red { | |
background: url('/images/design/photo_filters/red.jpg'); | |
} | |
h3.rose { | |
background: url('/images/design/photo_filters/rose.jpg'); | |
} | |
h3.sepia { | |
background: url('/images/design/photo_filters/sepia.jpg'); | |
} | |
h3.technicolor { | |
background: url('/images/design/photo_filters/technicolor.jpg'); | |
} | |
h3.vintage-pinhole { | |
background: url('/images/design/photo_filters/vintage-pinhole.jpg'); | |
} | |
h3.violet { | |
background: url('/images/design/photo_filters/violet.jpg'); | |
} | |
h3.yellow { | |
background: url('/images/design/photo_filters/yellow.jpg'); | |
} | |
@-webkit-keyframes slide-down { | |
0% { | |
opacity: 1; | |
} | |
90% { | |
opacity: 0; | |
} | |
} | |
@-moz-keyframes slide-down { | |
0% { | |
opacity: 1; | |
} | |
90% { | |
opacity: 0; | |
} | |
} | |
@keyframes slide-down { | |
0% { | |
opacity: 1; | |
} | |
90% { | |
opacity: 0; | |
} | |
} | |
div { | |
width: 100px; | |
height: 100px; | |
background: black; | |
-webkit-animation: slide-down 5s; | |
-moz-animation: slide-down 5s; | |
animation: slide-down 5s; | |
} | |
@-webkit-keyframes fade-in { | |
0% { | |
opacity: 0; | |
} | |
100% { | |
opacity: 1; | |
} | |
} | |
@-moz-keyframes fade-in { | |
0% { | |
opacity: 0; | |
} | |
100% { | |
opacity: 1; | |
} | |
} | |
@keyframes fade-in { | |
0% { | |
opacity: 0; | |
} | |
100% { | |
opacity: 1; | |
} | |
} | |
@-webkit-keyframes fade-out { | |
0% { | |
opacity: 1; | |
} | |
100% { | |
opacity: 0; | |
} | |
} | |
@-moz-keyframes fade-out { | |
0% { | |
opacity: 1; | |
} | |
100% { | |
opacity: 0; | |
} | |
} | |
@keyframes fade-out { | |
0% { | |
opacity: 1; | |
} | |
100% { | |
opacity: 0; | |
} | |
} | |
@-webkit-keyframes fade-out-in { | |
0%,100 { | |
opacity: 1; | |
} | |
50% { | |
opacity: 0; | |
} | |
} | |
@-moz-keyframes fade-out-in { | |
0%,100 { | |
opacity: 1; | |
} | |
50% { | |
opacity: 0; | |
} | |
} | |
@keyframes fade-out-in { | |
0%,100 { | |
opacity: 1; | |
} | |
50% { | |
opacity: 0; | |
} | |
} | |
@-webkit-keyframes eventcard-in { | |
0%, 50% { | |
height: 130px; | |
padding-bottom: 0px; | |
transform-origin: left top; | |
} | |
100% { | |
height: 160px; | |
padding-bottom: 20px; | |
transform-origin: left top; | |
} | |
} | |
@-moz-keyframes eventcard-in { | |
0%, 50% { | |
height: 130px; | |
padding-bottom: 0px; | |
transform-origin: left top; | |
} | |
100% { | |
height: 160px; | |
padding-bottom: 20px; | |
transform-origin: left top; | |
} | |
} | |
@keyframes eventcard-in { | |
0%, 50% { | |
height: 130px; | |
padding-bottom: 0px; | |
transform-origin: left top; | |
} | |
100% { | |
height: 160px; | |
padding-bottom: 20px; | |
transform-origin: left top; | |
} | |
} | |
@-webkit-keyframes eventcard-out { | |
0% { | |
height: 160px; | |
padding-bottom: 20px; | |
transform-origin: left top; | |
} | |
100% { | |
height: 130px; | |
padding-bottom: 0px; | |
transform-origin: left top; | |
} | |
} | |
@-moz-keyframes eventcard-out { | |
0% { | |
height: 160px; | |
padding-bottom: 20px; | |
transform-origin: left top; | |
} | |
100% { | |
height: 130px; | |
padding-bottom: 0px; | |
transform-origin: left top; | |
} | |
} | |
@keyframes eventcard-out { | |
0% { | |
height: 160px; | |
padding-bottom: 20px; | |
transform-origin: left top; | |
} | |
100% { | |
height: 130px; | |
padding-bottom: 0px; | |
transform-origin: left top; | |
} | |
} | |
@-webkit-keyframes collector-in { | |
0% { | |
height: 0px; | |
padding-top: 0; | |
transform-origin: left top; | |
} | |
100% { | |
height: 60px; | |
padding-top: 33px; | |
transform-origin: left top; | |
} | |
} | |
@-moz-keyframes collector-in { | |
0% { | |
height: 0px; | |
padding-top: 0; | |
transform-origin: left top; | |
} | |
100% { | |
height: 60px; | |
padding-top: 33px; | |
transform-origin: left top; | |
} | |
} | |
@keyframes collector-in { | |
0% { | |
height: 0px; | |
padding-top: 0; | |
transform-origin: left top; | |
} | |
100% { | |
height: 60px; | |
padding-top: 33px; | |
transform-origin: left top; | |
} | |
} | |
@-webkit-keyframes collector-out { | |
100% { | |
height: 0px; | |
padding-top: 0; | |
transform-origin: left top; | |
} | |
0% { | |
height: 60px; | |
padding-top: 33px; | |
transform-origin: left top; | |
} | |
} | |
@-moz-keyframes collector-out { | |
100% { | |
height: 0px; | |
padding-top: 0; | |
transform-origin: left top; | |
} | |
0% { | |
height: 60px; | |
padding-top: 33px; | |
transform-origin: left top; | |
} | |
} | |
@keyframes collector-out { | |
100% { | |
height: 0px; | |
padding-top: 0; | |
transform-origin: left top; | |
} | |
0% { | |
height: 60px; | |
padding-top: 33px; | |
transform-origin: left top; | |
} | |
} | |
.upload-progress-text { | |
-webkit-animation: fade-out-in cubic-bezier(0.25,0.1,0.25,1) infinite; | |
-moz-animation: fade-out-in cubic-bezier(0.25,0.1,0.25,1) infinite; | |
animation: fade-out-in cubic-bezier(0.25,0.1,0.25,1) infinite; | |
} | |
.toolset__slider--range::-web-kit-slider-thumb { | |
background-color: #fff; | |
border: solid 1px rgba(163, 133, 70, 0.4); | |
border-radius: 40px; | |
cursor: ew-resize; | |
height: 40px; | |
padding: 5px; | |
width: 40px; | |
} | |
.toolset__slider--range::-moz-slider-thumb { | |
background-color: #fff; | |
border: solid 1px rgba(163, 133, 70, 0.4); | |
border-radius: 40px; | |
cursor: ew-resize; | |
height: 40px; | |
padding: 5px; | |
width: 40px; | |
} |
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
<h3> | |
<button></button> | |
</h3> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment