fix: fix dot-loader size

ipfs-shipyard · Jul 2, 2018 · aa87fbe · aa87fbe
1 parent 68a6f92
commit aa87fbe
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/src/components/avatar/README.md b/src/components/avatar/README.md
@@ -1,6 +1,6 @@
 # Avatar
 
-Avatar to render the user's image, fallbacking to the user's initials.
+Avatar to render the user's image, fallbacks to the user's initials.
 
 ## Usage
 

diff --git a/src/components/dot-loader/DotLoader.css b/src/components/dot-loader/DotLoader.css
@@ -1,7 +1,7 @@
 @import "variables";
 
 :root {
- --size: 2em;
+ --size: 1.6em;
 }
 
 .dot-loader {
@@ -16,12 +16,10 @@
  position: absolute;
  top: 50%;
  width: calc(var(--size) / 4);
- height: 100%;
- margin-top: calc(var(--size) / -2);
- transform: scaleY(0.25);
- transform-origin: 0;
+ height: calc(var(--size) / 4);
+ margin-top: calc(var(--size) / -8);
  background: currentColor;
- border-radius: 50%;
+ border-radius: calc(var(--size) / 4);
  animation: bounce 1.75s infinite;
 
  &:nth-child(2) {
@@ -39,20 +37,22 @@
 
 @keyframes bounce {
  10% {
- transform: translate3d(0, calc(var(--size) / 4), 0) scaleY(0.25);
+ height: calc(var(--size) / 4);
+ transform: translate3d(0, calc(var(--size) / 4), 0);
  animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
  }
 
  14% {
- transform: translate3d(0, calc(var(--size) / 4), 0) scaleY(0.65);
+ height: calc(var(--size) * 3 / 4);
  }
 
  15% {
- transform: translate3d(0, calc(var(--size) / -2), 0) scaleY(0.25);
+ height: calc(var(--size) / 4);
+ transform: translate3d(0, calc(var(--size) / -2), 0);
  animation-timing-function: cubic-bezier(0.8, 0, 0.8, 1);
  }
 
  35% {
- transform: translate3d(0, 0, 0) scaleY(0.25);
+ transform: translate3d(0, 0, 0);
  }
 }