PageRenderTime 57ms CodeModel.GetById 14ms app.highlight 39ms RepoModel.GetById 1ms app.codeStats 0ms

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