/scss/partials/_glow.scss

https://github.com/ajanthanm/Buttons · Sass · 61 lines · 53 code · 3 blank · 5 comment · 0 complexity · 5af423a09e5679396b2345fa2912293a MD5 · raw file

  1. @import 'options';
  2. // Only include all this junk if $unicorn-btn-build-types list had 'glow'
  3. // We looked in to conditional imports but no go in Sass today
  4. @if $unicorn-btn-build-glow {
  5. //////////////////////////////////////////////////////////
  6. // GLOWING BUTTON STYLES ////////////////////////////////////////
  7. //////////////////////////////////////////////////////////
  8. @-webkit-keyframes glowing,
  9. {
  10. from { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
  11. 50% { @include box-shadow(0px 0px 16px rgba($unicorn-btn-glow-color, 0.8), 0px 1px 2px rgba(0, 0, 0, .20));}
  12. to { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
  13. }
  14. @-moz-keyframes glowing,
  15. {
  16. from { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
  17. 50% { @include box-shadow(0px 0px 16px rgba($unicorn-btn-glow-color, 0.8), 0px 1px 2px rgba(0, 0, 0, .20));}
  18. to { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
  19. }
  20. @-o-keyframes glowing,
  21. {
  22. from { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
  23. 50% { @include box-shadow(0px 0px 16px rgba($unicorn-btn-glow-color, 0.8), 0px 1px 2px rgba(0, 0, 0, .20));}
  24. to { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
  25. }
  26. @keyframes glowing,
  27. {
  28. from { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
  29. 50% { @include box-shadow(0px 0px 16px rgba($unicorn-btn-glow-color, 0.8), 0px 1px 2px rgba(0, 0, 0, .20));}
  30. to { @include box-shadow(0px 0px 0px rgba($unicorn-btn-glow-color, 0.3), 0px 1px 2px rgba(0, 0, 0, .20));}
  31. }
  32. }
  33. @mixin glow {
  34. -webkit-animation-duration: 3s;
  35. -moz-animation-duration: 3s;
  36. -ms-animation-duration: 3s;
  37. -o-animation-duration: 3s;
  38. animation-duration: 3s;
  39. -webkit-animation-iteration-count: infinite;
  40. -khtml-animation-iteration-count: infinite;
  41. -moz-animation-iteration-count: infinite;
  42. -ms-animation-iteration-count: infinite;
  43. -o-animation-iteration-count: infinite;
  44. animation-iteration-count: infinite;
  45. -webkit-animation-name: glowing;
  46. -khtml-animation-name: glowing;
  47. -moz-animation-name: glowing;
  48. -ms-animation-name: glowing;
  49. -o-animation-name: glowing;
  50. animation-name: glowing;
  51. }
  52. @mixin no_animation {
  53. -webkit-animation-name: none;
  54. -moz-animation-name: none;
  55. -ms-animation-name: none;
  56. -o-animation-name: none;
  57. animation-name: none;
  58. }