sass-zero 1.2.2 → 1.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1a26aefa62e61441b5d4fee85a87cb5f84f46cabca144bf8f23f40005c20e9e3
-  data.tar.gz: caafc10d6e32d80c05a1e9aac2cb39925d080d254a3b672e1be5cf3c71d5d333
+  metadata.gz: b7ebc6d459fe63526c843f3d2d0fd1b9623ae8a483f8d34d4c5f48ffba0a07ee
+  data.tar.gz: 94aeedd8ddbfaae27157f6b22810d54e70f811c64f42934a4d35139b4989587b
 SHA512:
-  metadata.gz: dc6970b49c3917c35673b82496b8a962502dac89ae655c9e1e41a28198067c8989b8fc6c50209036cfedc1e85b3dee90e0d178111fa2e0f32e1750a5076fa0d7
-  data.tar.gz: 0752702cc2605c8c830eb58065e096a0043bc0139e76af7c11101f575bf93a622bd3f80e9a0a5a04f552d68894eae2d346d459f14db37a8b2766637995dafc52
+  metadata.gz: '009d8b25d79f018878e725bdcf66006c48967b57074ccdd0081fb715dbca30a27224c8b2ef5ce51f06ade5ed02da864460818a6c363c2bce09faa54a67014e29'
+  data.tar.gz: aa6d4b392b5f08cdd47d92452f8a09ad13f6885bec2a7401caaaa0e6a216aa2b058ddbde685dd55ecb58615ded6c0d346d507f3645280cc4a36652a708e492fc

data/.sass-zero-references.scss

@@ -720,9 +720,12 @@ $z-50:   50;
 // Mixins
 // *******************************************************************
 
+@mixin make-container($padding-x: $size-4) {}
+@mixin ellipsis {}
 @mixin antialiased {}
 @mixin subpixel-antialiased {}
-@mixin ellipsis {}
-@mixin outline-none {}
 @mixin progress-bar {}
-@mixin make-container($padding-x: $size-4) {}
+@mixin animate-spin {}
+@mixin animate-ping {}
+@mixin animate-pulse {}
+@mixin animate-bounce {}

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    sass-zero (1.2.2)
+    sass-zero (1.3.0)
 
 GEM
   remote: https://rubygems.org/

data/README.md

@@ -25,55 +25,60 @@ Instead of hand-picking values from a limitless pool any time you need to make a
 
 #### Essential
 
-- [Border](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_border.scss)
-- [Colors](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_colors.scss)
-- [Effects](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_effects.scss)
-- [Height](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_height.scss)
-- [Sizing](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_sizing.scss)
-- [Typography](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_typography.scss)
-- [Width](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_width.scss)
-- [Z-Index](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_zindex.scss)
+- [Border](app/assets/stylesheets/sass-zero/variables/_border.scss)
+- [Colors](app/assets/stylesheets/sass-zero/variables/_colors.scss)
+- [Effects](app/assets/stylesheets/sass-zero/variables/_effects.scss)
+- [Height](app/assets/stylesheets/sass-zero/variables/_height.scss)
+- [Sizing](app/assets/stylesheets/sass-zero/variables/_sizing.scss)
+- [Typography](app/assets/stylesheets/sass-zero/variables/_typography.scss)
+- [Width](app/assets/stylesheets/sass-zero/variables/_width.scss)
+- [Z-Index](app/assets/stylesheets/sass-zero/variables/_zindex.scss)
 
 #### Others
 
-- [Breakpoints](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_breakpoints.scss)
-- [Filters](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_filters.scss)
-- [Flex](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_flex.scss)
-- [Grid](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_grid.scss)
-- [Transform](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_transform.scss)
-- [Transition](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/_transition.scss)
-- [Mixins](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/_mixins.scss)
+- [Breakpoints](app/assets/stylesheets/sass-zero/variables/_breakpoints.scss)
+- [Filters](app/assets/stylesheets/sass-zero/variables/_filters.scss)
+- [Flex](app/assets/stylesheets/sass-zero/variables/_flex.scss)
+- [Grid](app/assets/stylesheets/sass-zero/variables/_grid.scss)
+- [Transform](app/assets/stylesheets/sass-zero/variables/_transform.scss)
+- [Transition](app/assets/stylesheets/sass-zero/variables/_transition.scss)
+- [Mixins](app/assets/stylesheets/sass-zero/_mixins.scss)
 
 ### Utility classes
 
 This can be useful for dealing with similar components, and positioning.
 
-- [Align](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_align.scss)
-- [Animation](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_animation.scss)
-- [Border](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_border.scss)
-- [Container](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_container.scss)
-- [Flex Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_flex.scss)
-- [Layout Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_layout.scss)
-- [List Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_list.scss)
-- [Margin Pull](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_pull.scss)
-- [Margin Push](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_push.scss)
-- [Margin Reset](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_flush.scss)
-- [Padding](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_pad.scss)
-- [Padding Reset](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_unpad.scss)
-- [Position Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_position.scss)
-- [Text Utilities](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/utilities/_text.scss)
+- [Align](app/assets/stylesheets/sass-zero/utilities/_align.scss)
+- [Border](app/assets/stylesheets/sass-zero/utilities/_border.scss)
+- [Container](app/assets/stylesheets/sass-zero/utilities/_container.scss)
+- [Flex Utilities](app/assets/stylesheets/sass-zero/utilities/_flex.scss)
+- [Layout Utilities](app/assets/stylesheets/sass-zero/utilities/_layout.scss)
+- [List Utilities](app/assets/stylesheets/sass-zero/utilities/_list.scss)
+- [Margin Pull](app/assets/stylesheets/sass-zero/utilities/_pull.scss)
+- [Margin Push](app/assets/stylesheets/sass-zero/utilities/_push.scss)
+- [Margin Reset](app/assets/stylesheets/sass-zero/utilities/_flush.scss)
+- [Padding](app/assets/stylesheets/sass-zero/utilities/_pad.scss)
+- [Padding Reset](app/assets/stylesheets/sass-zero/utilities/_unpad.scss)
+- [Position Utilities](app/assets/stylesheets/sass-zero/utilities/_position.scss)
+- [Text Utilities](app/assets/stylesheets/sass-zero/utilities/_text.scss)
 
 ## Breadboard
 
 These default styles ensure that even without custom styling, the content is usable and understandable, if your development process is mostly reproducing Figma designs, you might don't need it.
 
-- [Breadboard](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/breadboard.scss)
+- [Breadboard](app/assets/stylesheets/sass-zero/breadboard.scss)
 - [Screenshot](screenshot.png)
-- [Example](https://github.com/lazaronixon/sass-zero/blob/master/example.html)
+- [Example](example.html)
+
+## Animations
+
+Pre-built keyframes you can use to create your animations.
+
+- [Animations](app/assets/stylesheets/sass-zero/animations.scss)
 
 ## Using variables
 
-Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Variables](https://github.com/lazaronixon/sass-zero/blob/master/vendor/assets/stylesheets/sass-zero/_variables.scss):
+Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Variables](app/assets/stylesheets/sass-zero/_variables.scss):
 
 ```scss
 @import "sass-zero/variables";
@@ -81,11 +86,11 @@ Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Vari
 .block {
   color: $rose-500;
 
-  &__element_one {
+  &__element-one {
     color: $fuchsia-500;
   }
 
-  &__element_two {
+  &__element-two {
     color: $purple-500;
   }
 
@@ -97,13 +102,13 @@ Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Vari
 
 ```html
 <div class="block">
-  <div class="block__element_one" />
-  <div class="block__element_two" />
+  <div class="block__element-one" />
+  <div class="block__element-two" />
 </div>
 
 <div class="block block--modifier">
-  <div class="block__element_one" />
-  <div class="block__element_two" />
+  <div class="block__element-one" />
+  <div class="block__element-two" />
 </div>
 ```
 

data/app/assets/stylesheets/sass-zero/_mixins.scss

@@ -1,13 +1,15 @@
 @import "variables/sizing";
 
-@mixin antialiased {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+// *******************************************************************
+// General
+// *******************************************************************
 
-@mixin subpixel-antialiased {
-  -webkit-font-smoothing: auto;
-  -moz-osx-font-smoothing: auto;
+@mixin make-container($padding-x: $size-4) {
+  width: 100%;
+  padding-right: $padding-x;
+  padding-left: $padding-x;
+  margin-right: auto;
+  margin-left: auto;
 }
 
 @mixin ellipsis {
@@ -16,9 +18,14 @@
   overflow: hidden;
 }
 
-@mixin outline-none {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
+@mixin antialiased {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@mixin subpixel-antialiased {
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
 }
 
 @mixin progress-bar {
@@ -31,10 +38,22 @@
   }
 }
 
-@mixin make-container($padding-x: $size-4) {
-  width: 100%;
-  padding-right: $padding-x;
-  padding-left: $padding-x;
-  margin-right: auto;
-  margin-left: auto;
+// *******************************************************************
+// Animations
+// *******************************************************************
+
+@mixin animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+@mixin animate-ping {
+  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
+ @mixin animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@mixin animate-bounce {
+  animation: bounce 1s infinite;
 }

data/app/assets/stylesheets/sass-zero/animations.scss

@@ -0,0 +1,454 @@
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ping {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animationTimingFunction: cubic-bezier(0.8, 0, 1, 1); // scss-lint:disable all
+  }
+  50% {
+    transform: translateY(0);
+    animationTimingFunction: cubic-bezier(0, 0, 0.2, 1); // scss-lint:disable all
+  }
+}
+
+@keyframes pop-open {
+  0% {
+    transform: scale(0.3);
+    opacity: 0;
+  }
+  75% {
+    transform: scale(1.05);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes blind-open {
+  from {
+    max-height: 0;
+  }
+  to {
+    max-height: 100rem;
+  }
+}
+
+@keyframes blind-close {
+  from {
+    max-height: 100rem;
+  }
+  to {
+    max-height: 0;
+  }
+}
+
+@keyframes appear {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes fade-in-out {
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes appear-then-fade {
+  0%, 100% {
+    opacity: 0;
+  }
+  5%, 60% {
+    opacity: 1;
+  }
+}
+
+@keyframes appear-then-fade-extended {
+  0%, 100% {
+    opacity: 0;
+  }
+  2%, 90% {
+    opacity: 1;
+  }
+}
+
+@keyframes slide-up-then-down {
+  0%, 100% {
+    transform: translateY(100px);
+    opacity: 0;
+  }
+  5%, 95% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes hide {
+  to {
+    max-height: 0;
+    max-width: 0;
+    visibility: hidden;
+  }
+}
+
+@keyframes wiggle {
+  0% {
+    transform: rotate(0deg);
+  }
+  20% {
+    transform: rotate(3deg);
+  }
+  40% {
+    transform: rotate(-3deg);
+  }
+  60% {
+    transform: rotate(3deg);
+  }
+  80% {
+    transform: rotate(-3deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+@keyframes pop-visible {
+  0% {
+    transform: scale(0.75);
+    text-indent: 0;
+  }
+  33% {
+    transform: scale(0.85);
+  }
+  67% {
+    transform: scale(1.25);
+  }
+  100% {
+    transform: scale(1);
+    text-indent: 2.3em;
+  }
+}
+
+@keyframes fade-in-up {
+  0% {
+    transform: translateY(50px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes fade-in-down {
+  0% {
+    transform: translateY(-50px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out-up {
+  0% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-50px);
+    opacity: 0;
+  }
+}
+
+@keyframes fade-out-down {
+  0% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(500px);
+    opacity: 0;
+  }
+}
+
+@keyframes flip-up {
+  0% {
+    transform: rotateX(90deg) translateY(50px);
+    opacity: 0;
+  }
+  100% {
+    transform: rotateX(0deg) translateY(0px);
+    opacity: 1;
+  }
+}
+
+@keyframes slide-right {
+  0% {
+    transform: translateX(0);
+  }
+  10% {
+    transform: translateX(0);
+  }
+  40% {
+    transform: translateX(0);
+  }
+  80% {
+    transform: translateX(116px);
+    opacity: 1;
+  }
+  90% {
+    transform: translateX(116px);
+    opacity: 0;
+  }
+  100% {
+    transform:translateX(116px);
+    opacity: 0;
+  }
+}
+
+@keyframes slide-left {
+  0% {
+    transform: translateX(0);
+  }
+  10% {
+    transform: translateX(0);
+  }
+  40% {
+    transform: translateX(0);
+  }
+  80% {
+    transform: translateX(-116px);
+    opacity: 1;
+  }
+  90% {
+    transform: translateX(-116px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(-116px);
+    opacity: 0;
+  }
+}
+
+@keyframes slide-in-from-left {
+  0% {
+    opacity: 0;
+  }
+  40% {
+    transform:translateX(320px);
+    opacity: 0;
+  }
+  80% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slide-in-from-bottom {
+  0% {
+    transform: translateY(10rem);
+    opacity: 0;
+  }
+  50% {
+    transform:translateY(-1rem);
+    opacity: .5;
+  }
+  100% {
+    transform:translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slide-in-from-bottom-no-fade {
+  0% {
+    transform: translateY(20rem);
+  }
+  50% {
+    transform: translateY(-1rem);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-in-from-bottom-no-bounce {
+  0% {
+    transform: translateY(10rem);
+    opacity: 0;
+  }
+  50% {
+    opacity: .5;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slide-in-tilt-left {
+  0% {
+    transform: translateY(100rem) rotate(0);
+    opacity: 0;
+  }
+  50% {
+    transform: translateY(-1rem) rotate(-3deg);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(0) rotate(-1deg);
+    opacity: 1;
+  }
+}
+
+@keyframes slide-in-tilt-right {
+  0% {
+    transform: translateY(100rem) rotate(0);
+    opacity: 0;
+  }
+  50% {
+    transform: translateY(-1rem) rotate(3deg);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(0) rotate(1deg);
+    opacity: 1;
+  }
+}
+
+@keyframes pop {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1);
+  }
+  80% {
+    transform: scale(1.1);
+  }
+  85% {
+    transform: scale(1.1);
+  }
+  90% {
+    transform: scale(0.95);
+  }
+  95% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes burst {
+  0% {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+  30% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+    transform: scale(1);
+  }
+  52% {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+}
+
+@keyframes bubble-burst {
+  0% {
+    opacity: 0;
+    transform: scale(0.6);
+    transform-origin: center;
+  }
+  33% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.6);
+  }
+}
+
+@keyframes bump {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+}
+
+@keyframes shake {
+  0% {
+    transform: translateX(-2rem);
+  }
+  25% {
+    transform: translateX(2rem);
+  }
+  50% {
+    transform: translateX(-1rem);
+  }
+  75% {
+    transform: translateX(1rem);
+  }
+}
+
+@keyframes dancing-ants {
+  0% {
+    background-position: left top,right bottom,left bottom,right top;
+  }
+  100% {
+    background-position: left 1.5rem top,right 1.5rem bottom,left bottom 1.5rem,right top 1.5rem;
+  }
+}

data/app/assets/stylesheets/sass-zero/utilities/_flex.scss

@@ -61,28 +61,36 @@
   align-self: end;
 }
 
-@media (min-width: $breakpoint-sm) {
-  .flex\@sm {
+@media (min-width: $breakpoint-md) {
+  .flex\@md {
     display: flex;
   }
 
-  .flex--centered\@sm {
+  .flex--row\@md {
+    flex-direction: row;
+  }
+
+  .flex--column\@md {
+    flex-direction: column;
+  }  
+
+  .flex--centered\@md {
     justify-content: center;
   }
 
-  .flex--align-center\@sm {
+  .flex--align-center\@md {
     align-items: center;
   }
 
-  .flex--space-items\@sm {
+  .flex--space-items\@md {
     justify-content: space-between;
   }
 
-  .flex--align-center\@sm {
+  .flex--align-center\@md {
     align-items: center;
   }
 
-  .flex--align-bottom\@sm {
+  .flex--align-bottom\@md {
     align-items: flex-end;
   }
 }

data/app/assets/stylesheets/sass-zero/utilities/_layout.scss

@@ -78,16 +78,16 @@
   overflow: hidden;
 }
 
-@media (min-width: $breakpoint-sm) {
-  .u-show--inline\@sm {
+@media (min-width: $breakpoint-md) {
+  .u-show--inline\@md {
     display: inline;
   }
 
-  .u-show\@sm {
+  .u-show\@md {
     display: block;
   }
 
-  .u-hide\@sm {
+  .u-hide\@md {
     display: none;
   }
 }

data/app/assets/stylesheets/sass-zero/utilities.scss

@@ -1,5 +1,4 @@
 @import "utilities/align";
-@import "utilities/animation";
 @import "utilities/border";
 @import "utilities/container";
 @import "utilities/flex";

data/lib/sass_zero/version.rb

@@ -1,5 +1,5 @@
 module Sass
   module Zero
-    VERSION = "1.2.2"
+    VERSION = "1.3.0"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sass-zero
 version: !ruby/object:Gem::Version
-  version: 1.2.2
+  version: 1.3.0
 platform: ruby
 authors:
 - lazaronixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-07-09 00:00:00.000000000 Z
+date: 2023-07-10 00:00:00.000000000 Z
 dependencies: []
 description:
 email:
@@ -27,11 +27,11 @@ files:
 - Rakefile
 - app/assets/stylesheets/sass-zero/_mixins.scss
 - app/assets/stylesheets/sass-zero/_variables.scss
+- app/assets/stylesheets/sass-zero/animations.scss
 - app/assets/stylesheets/sass-zero/base.scss
 - app/assets/stylesheets/sass-zero/breadboard.scss
 - app/assets/stylesheets/sass-zero/utilities.scss
 - app/assets/stylesheets/sass-zero/utilities/_align.scss
-- app/assets/stylesheets/sass-zero/utilities/_animation.scss
 - app/assets/stylesheets/sass-zero/utilities/_border.scss
 - app/assets/stylesheets/sass-zero/utilities/_container.scss
 - app/assets/stylesheets/sass-zero/utilities/_flex.scss

data/app/assets/stylesheets/sass-zero/utilities/_animation.scss

@@ -1,59 +0,0 @@
-.animate-none {
-  animation: none;
-}
-
-.animate-spin {
-  animation: spin 1s linear infinite;
-}
-
-.animate-ping {
-  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
-}
-
-.animate-pulse {
-  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-.animate-bounce {
-  animation: bounce 1s infinite;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes ping {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  75%, 100% {
-    transform: scale(2);
-    opacity: 0;
-  }
-}
-
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-
-@keyframes bounce {
-  0%, 100% {
-    transform: translateY(-25%);
-    animationTimingFunction: cubic-bezier(0.8, 0, 1, 1); // scss-lint:disable all
-  }
-  50% {
-    transform: translateY(0);
-    animationTimingFunction: cubic-bezier(0, 0, 0.2, 1); // scss-lint:disable all
-  }
-}