_icon.scss in active_frontend-12.4.0

- old
+ new

@@ -1,23 +1,40 @@
 /* Table of Contents
 ==================================================
-# Icon */
+# Keyframes
+# Font-face
+# Icon
+# Animation
+# Duration */
 
-/* # Icon
+/* # Keyframes
 ================================================== */
+@-webkit-keyframes icon-spin {
+  0% { @include transform(rotate(0)); }
+  100% { @include transform(rotate(359deg)); }
+}
+@keyframes icon-spin {
+  0% { @include transform(rotate(0)); }
+  100% { @include transform(rotate(359deg)); }
+}
+
+/* # Font-face
+================================================== */
 @font-face {
   font-family: "Ionicons";
   font-style: normal;
   font-weight: normal;
   src: url(font_path("ionicons/ionicons.eot?v=2.0.1"));
   src: url(font_path("ionicons/ionicons.eot?v=2.0.1#iefix")) format("embedded-opentype"),
        url(font_path("ionicons/ionicons.ttf?v=2.0.1")) format("truetype"),
        url(font_path("ionicons/ionicons.woff?v=2.0.1")) format("woff"),
        url(font_path("ionicons/ionicons.svg?v=2.0.1#Ionicons")) format("svg");
 }
+
+/* # Icon
+================================================== */
 .icon,
-.iconicons,
 .icon-alert:before,
 .icon-alert-circled:before,
 .icon-android-add:before,
 .icon-android-add-circle:before,
 .icon-android-alarm-clock:before,
@@ -762,27 +779,10 @@
   padding: 0;
   speak: none;
   text-transform: none;
   text-rendering: auto;
 }
-.icon-spin,
-.icon-loading-a,
-.icon-loading-b,
-.icon-loading-c,
-.icon-loading-d,
-.icon-looping,
-.icon-refreshing,
-.icon-ios7-reloading { @include animation(spin 1s infinite linear); }
-@-webkit-keyframes spin {
-  0% { @include transform(rotate(0)); }
-  100% { @include transform(rotate(359deg)); }
-}
-@keyframes spin {
-  0% { @include transform(rotate(0)); }
-  100% { @include transform(rotate(359deg)); }
-}
-.icon-loading-a { @include animation-timing-function(steps(8, start)); }
 .icon-alert:before { content: "\f101" }
 .icon-alert-circled:before { content: "\f100" }
 .icon-android-add:before { content: "\f2c7" }
 .icon-android-add-circle:before { content: "\f359" }
 .icon-android-alarm-clock:before { content: "\f35a" }
@@ -1511,6 +1511,20 @@
 .icon-waterdrop:before { content: "\f25b" }
 .icon-wifi:before { content: "\f25c" }
 .icon-wineglass:before { content: "\f2b9" }
 .icon-woman:before { content: "\f25d" }
 .icon-wrench:before { content: "\f2ba" }
-.icon-xbox:before { content: "\f30c" }
+.icon-xbox:before { content: "\f30c" }
+
+/* # Animation
+================================================== */
+.icon-spin:before { @include animation(icon-spin 2s infinite linear); }
+
+/* # Durations
+================================================== */
+.icon-spin.icon-spin-duration-fastest:before { @include animation-duration(0.5s); }
+.icon-spin.icon-spin-duration-faster:before { @include animation-duration(1s); }
+.icon-spin.icon-spin-duration-fast:before { @include animation-duration(1.5s); }
+.icon-spin.icon-spin-duration-default:before { @include animation-duration(2s); }
+.icon-spin.icon-spin-duration-slow:before { @include animation-duration(2.5s); }
+.icon-spin.icon-spin-duration-slower:before { @include animation-duration(3s); }
+.icon-spin.icon-spin-duration-slowest:before { @include animation-duration(3.5s); }
\ No newline at end of file