/scss/partials/_glow.scss
https://github.com/ajanthanm/Buttons · Sass · 61 lines · 53 code · 3 blank · 5 comment · 0 complexity · 5af423a09e5679396b2345fa2912293a MD5 · raw file
- @import 'options';
- // Only include all this junk if $unicorn-btn-build-types list had 'glow'
- // We looked in to conditional imports but no go in Sass today
- @if $unicorn-btn-build-glow {
- //////////////////////////////////////////////////////////
- // GLOWING BUTTON STYLES ////////////////////////////////////////
- //////////////////////////////////////////////////////////
- @-webkit-keyframes glowing,
- {
- from { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
- 50% { @include box-shadow(0px 0px 16px rgba($unicorn-btn-glow-color, 0.8), 0px 1px 2px rgba(0, 0, 0, .20));}
- to { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
- }
- @-moz-keyframes glowing,
- {
- from { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
- 50% { @include box-shadow(0px 0px 16px rgba($unicorn-btn-glow-color, 0.8), 0px 1px 2px rgba(0, 0, 0, .20));}
- to { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
- }
- @-o-keyframes glowing,
- {
- from { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
- 50% { @include box-shadow(0px 0px 16px rgba($unicorn-btn-glow-color, 0.8), 0px 1px 2px rgba(0, 0, 0, .20));}
- to { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
- }
- @keyframes glowing,
- {
- from { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
- 50% { @include box-shadow(0px 0px 16px rgba($unicorn-btn-glow-color, 0.8), 0px 1px 2px rgba(0, 0, 0, .20));}
- to { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
- }
- }
- @mixin glow {
- -webkit-animation-duration: 3s;
- -moz-animation-duration: 3s;
- -ms-animation-duration: 3s;
- -o-animation-duration: 3s;
- animation-duration: 3s;
- -webkit-animation-iteration-count: infinite;
- -khtml-animation-iteration-count: infinite;
- -moz-animation-iteration-count: infinite;
- -ms-animation-iteration-count: infinite;
- -o-animation-iteration-count: infinite;
- animation-iteration-count: infinite;
- -webkit-animation-name: glowing;
- -khtml-animation-name: glowing;
- -moz-animation-name: glowing;
- -ms-animation-name: glowing;
- -o-animation-name: glowing;
- animation-name: glowing;
- }
- @mixin no_animation {
- -webkit-animation-name: none;
- -moz-animation-name: none;
- -ms-animation-name: none;
- -o-animation-name: none;
- animation-name: none;
- }