put stuff in config variables

teamleadercrm · Mar 3, 2017 · c5fbca2 · c5fbca2
1 parent c33800e
commit c5fbca2
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 11 deletions.
diff --git a/components/loadingMolecule/config.css b/components/loadingMolecule/config.css
@@ -1,3 +1,6 @@
 :root {
-
+  --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 {