Merge pull request #5 from teamleadercrm/component/loading-molecule

Component/loading molecule
teamleadercrm · Mar 7, 2017 · 1fbc7a4 · 1fbc7a4
2 parents c01a579 + c5fbca2
commit 1fbc7a4
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 26 deletions.
diff --git a/components/loadingMolecule/config.css b/components/loadingMolecule/config.css
@@ -1,18 +1,6 @@
 :root {
-  --menu-expand-duration: 0.3s;
-  --menu-fade-duration: 0.2s;
-  --menu-ripple-delay: 0.3s;
-  --menu-background-color: var(--color-white);
-  --menu-padding: calc(0.8 * var(--unit)) 0;
-  --menu-outline-border-radius: calc(0.2 * var(--unit));
-  --menu-item-hover-background: var(--palette-grey-200);
-  --menu-item-selected-background: transparent;
-  --menu-item-icon-font-size: calc(1.4 * var(--unit));
-  --menu-item-icon-size: calc(1.6 * var(--menu-item-icon-font-size));
-  --menu-item-height: calc(2.8 * var(--unit));
-  --menu-item-padding: calc(1.6 * var(--unit));
-  --menu-item-font-size: calc(1.6 * var(--unit));
-  --menu-divider-height: calc((2.8 / 4) * var(--unit));
-  --menu-icon-size: calc(2.3 * var(--unit));
-  --menu-icon-ripple-duration: 650ms;
+  --loading-molecule-animation-delay: .15s;
+  --loading-molecule-animation-duration: 2s;
+  --loading-moledule-scale-small: .5;
+  --loading-moledule-scale-large: 1.5;
 }
diff --git a/components/loadingMolecule/theme.css b/components/loadingMolecule/theme.css
@@ -15,31 +15,31 @@
 }
 
 .left-solid {
-  animation: pulse 2s ease infinite;
-  animation-delay: 0.15s;
+  animation: pulse var(--loading-molecule-animation-duration) ease infinite;
+  animation-delay: var(--loading-molecule-animation-delay);
 }
 
 .left-gradient {
-  animation: pulse 2s ease infinite;
-  animation-delay: 0.3s;
+  animation: pulse var(--loading-molecule-animation-duration) ease infinite;
+  animation-delay: calc(2 * var(--loading-molecule-animation-delay));
 }
 
 .right-solid {
-  animation: pulse 2s ease infinite;
-  animation-delay: 0.45s;
+  animation: pulse var(--loading-molecule-animation-duration) ease infinite;
+  animation-delay: calc(3 * var(--loading-molecule-animation-delay));
 }
 
 .right-gradient {
-  animation: pulse 2s ease infinite;
-  animation-delay: 0.6s;
+  animation: pulse var(--loading-molecule-animation-duration) ease infinite;
+  animation-delay: calc(4 * var(--loading-molecule-animation-delay));
 }
 
 .small svg {
-  transform: scale(.5);
+  transform: scale(var(--loading-moledule-scale-small));
 }
 
 .large svg {
-  transform: scale(1.5);
+  transform: scale(var(--loading-moledule-scale-large));
 }
 
 @keyframes pulse {