Skip to content

Instantly share code, notes, and snippets.

@daphotron

daphotron/SassMeister-input-HTML.html

Last active April 21, 2018 12:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save daphotron/11455265 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save daphotron/11455265 to your computer and use it in GitHub Desktop.
Download ZIP
CSS key animations, slide in and out message http://sassmeister.com/gist/11455265
Raw
SassMeister-input-HTML.html
<!-- div class="flash-message">
Content was created.
</div -->
<div class="flash-message sticky">
Content was created.
</div>
<!-- div class="flash-message sticky-permanent">
Content was created.
</div -->
<!-- div class="flash-message refresh">
Content was created.
</div -->
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.14)
// Compass (vundefined)
// ----
//http://joshbroton.com/quick-fix-sass-mixins-for-css-keyframe-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;
-o-animation: $animations;
animation: $animations;
}
@mixin keyframes($animationName) {
@-webkit-keyframes #{$animationName} {
@content;
}
@-moz-keyframes #{$animationName} {
@content;
}
@-o-keyframes #{$animationName} {
@content;
}
@keyframes #{$animationName} {
@content;
}
}
@include keyframes(slide-in-out) {
0% { top: -5rem; }
10% { top: -0.5rem; }
14% { top: -1.5rem; }
18% { top: -1rem; }
40% { top: -1rem; }
60% { top: -1rem; }
80% { top: -1rem; }
94% { top: 0; }
100% { top: -5rem; }
}
@include keyframes(slide-in) {
0% { top: -5rem; }
10% { top: -0.5rem; }
14% { top: -1.5rem; }
18% { top: -1rem; }
100% { top: -1rem; }
}
.flash-message {
background: #fff;
border-color: #eee;
border-style: solid;
border-width: 1px;
margin: 0 0 1.5rem;
padding: 0.8em 0.8em 1em 0.8rem;
position: relative;
a {
font-weight: 400;
}
}
.flash-item {
font-weight: 400;
}
%flash-message-sticky {
box-shadow: rgba(0,0,0,0.2) 0 1px 10px 0;
left: 0;
margin: 0;
position: fixed;
text-align: center;
width: 100%;
z-index: 100;
}
.flash-message.sticky {
background-color: #ffffee;
@include animation('slide-in-out 3s linear 0s 1');
padding: 1.8em 0.8em 1em 0.8rem;
top: -5rem;
@extend %flash-message-sticky;
}
.flash-message.refresh {
background-color: #ffffee;
padding: 0;
&:hover {
background-color: #eee;
span {
border-bottom: 0;
}
}
a {
border: 0;
display: block;
padding: 0.8em 0.8em 1em 0.8rem;
}
}
.flash-message.sticky-permanent {
@include animation('slide-in 2s linear 0s 1');
padding: 1.8em 0.8em 1em 0.8rem;
top: -1rem;
@extend %flash-message-sticky;
&:hover {
background-color: #eee;
span {
border-bottom: 0;
}
}
a {
border: 0;
display: block;
padding: 1.8em 0.8em 1em 0.8rem;
}
}
Raw
SassMeister-output.css
@-webkit-keyframes slide-in-out {
0% {
top: -5rem;
}
10% {
top: -0.5rem;
}
14% {
top: -1.5rem;
}
18% {
top: -1rem;
}
40% {
top: -1rem;
}
60% {
top: -1rem;
}
80% {
top: -1rem;
}
94% {
top: 0;
}
100% {
top: -5rem;
}
}
@-moz-keyframes slide-in-out {
0% {
top: -5rem;
}
10% {
top: -0.5rem;
}
14% {
top: -1.5rem;
}
18% {
top: -1rem;
}
40% {
top: -1rem;
}
60% {
top: -1rem;
}
80% {
top: -1rem;
}
94% {
top: 0;
}
100% {
top: -5rem;
}
}
@-o-keyframes slide-in-out {
0% {
top: -5rem;
}
10% {
top: -0.5rem;
}
14% {
top: -1.5rem;
}
18% {
top: -1rem;
}
40% {
top: -1rem;
}
60% {
top: -1rem;
}
80% {
top: -1rem;
}
94% {
top: 0;
}
100% {
top: -5rem;
}
}
@keyframes slide-in-out {
0% {
top: -5rem;
}
10% {
top: -0.5rem;
}
14% {
top: -1.5rem;
}
18% {
top: -1rem;
}
40% {
top: -1rem;
}
60% {
top: -1rem;
}
80% {
top: -1rem;
}
94% {
top: 0;
}
100% {
top: -5rem;
}
}
@-webkit-keyframes slide-in {
0% {
top: -5rem;
}
10% {
top: -0.5rem;
}
14% {
top: -1.5rem;
}
18% {
top: -1rem;
}
100% {
top: -1rem;
}
}
@-moz-keyframes slide-in {
0% {
top: -5rem;
}
10% {
top: -0.5rem;
}
14% {
top: -1.5rem;
}
18% {
top: -1rem;
}
100% {
top: -1rem;
}
}
@-o-keyframes slide-in {
0% {
top: -5rem;
}
10% {
top: -0.5rem;
}
14% {
top: -1.5rem;
}
18% {
top: -1rem;
}
100% {
top: -1rem;
}
}
@keyframes slide-in {
0% {
top: -5rem;
}
10% {
top: -0.5rem;
}
14% {
top: -1.5rem;
}
18% {
top: -1rem;
}
100% {
top: -1rem;
}
}
.flash-message {
background: #fff;
border-color: #eee;
border-style: solid;
border-width: 1px;
margin: 0 0 1.5rem;
padding: 0.8em 0.8em 1em 0.8rem;
position: relative;
}
.flash-message a {
font-weight: 400;
}
.flash-item {
font-weight: 400;
}
.flash-message.sticky, .flash-message.sticky-permanent {
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 10px 0;
left: 0;
margin: 0;
position: fixed;
text-align: center;
width: 100%;
z-index: 100;
}
.flash-message.sticky {
background-color: #ffffee;
-webkit-animation: slide-in-out 3s linear 0s 1;
-moz-animation: slide-in-out 3s linear 0s 1;
-o-animation: slide-in-out 3s linear 0s 1;
animation: slide-in-out 3s linear 0s 1;
padding: 1.8em 0.8em 1em 0.8rem;
top: -5rem;
}
.flash-message.refresh {
background-color: #ffffee;
padding: 0;
}
.flash-message.refresh:hover {
background-color: #eee;
}
.flash-message.refresh:hover span {
border-bottom: 0;
}
.flash-message.refresh a {
border: 0;
display: block;
padding: 0.8em 0.8em 1em 0.8rem;
}
.flash-message.sticky-permanent {
-webkit-animation: slide-in 2s linear 0s 1;
-moz-animation: slide-in 2s linear 0s 1;
-o-animation: slide-in 2s linear 0s 1;
animation: slide-in 2s linear 0s 1;
padding: 1.8em 0.8em 1em 0.8rem;
top: -1rem;
}
.flash-message.sticky-permanent:hover {
background-color: #eee;
}
.flash-message.sticky-permanent:hover span {
border-bottom: 0;
}
.flash-message.sticky-permanent a {
border: 0;
display: block;
padding: 1.8em 0.8em 1em 0.8rem;
}
Raw
SassMeister-rendered.html
<!-- div class="flash-message">
Content was created.
</div -->
<div class="flash-message sticky">
Content was created.
</div>
<!-- div class="flash-message sticky-permanent">
Content was created.
</div -->
<!-- div class="flash-message refresh">
Content was created.
</div -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment