let box-shadow inherit colour instead of defining it

andreasonny83 · Apr 3, 2016 · 3b07cf6 · 3b07cf6
1 parent 6de80e3
commit 3b07cf6
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 99 deletions.
diff --git a/less/load1.less b/less/load1.less
@@ -18,6 +18,7 @@
   animation-delay:-0.32s;
 }
 .load1 .loader {
+  color:@foreground;
   text-indent:-9999em;
   margin:88px auto;
   position:relative;
@@ -37,11 +38,11 @@
 
 .load1-frames() {
   0%,80%,100% {
-    box-shadow:0 0 @foreground;
+    box-shadow:0 0;
     height:4em;
   }
   40% {
-    box-shadow:0 -2em @foreground;
+    box-shadow:0 -2em;
     height:5em;
   }
 }
diff --git a/less/load2.less b/less/load2.less
@@ -21,13 +21,14 @@
   animation:load2 2s infinite ease 1.5s;
 }
 .load2 .loader {
+  color:@foreground;
   font-size:11px;
   text-indent:-99999em;
   margin:55px auto;
   position:relative;
   width:10em;
   height:10em;
-  box-shadow: inset 0 0 0 1em @foreground;
+  box-shadow: inset 0 0 0 1em;
   -webkit-transform: translateZ(0);
   -ms-transform: translateZ(0);
   transform: translateZ(0);

diff --git a/less/load4.less b/less/load4.less
@@ -1,6 +1,7 @@
 @foreground: #FFF;
 
 .load4 .loader {
+  color:@foreground;
   font-size:20px;
   margin:100px auto;
   width:1em;
@@ -19,83 +20,83 @@
 
 .load4-frames() {
   0%,100% {
-    box-shadow:0 -3em 0 0.2em @foreground,
-    2em -2em 0 0em @foreground,
-    3em 0 0 -1em @foreground,
-    2em 2em 0 -1em @foreground,
-    0 3em 0 -1em @foreground,
-    -2em 2em 0 -1em @foreground,
-    -3em 0 0 -1em @foreground,
-    -2em -2em 0 0 @foreground;
+    box-shadow:0 -3em 0 0.2em,
+    2em -2em 0 0em,
+    3em 0 0 -1em,
+    2em 2em 0 -1em,
+    0 3em 0 -1em,
+    -2em 2em 0 -1em,
+    -3em 0 0 -1em,
+    -2em -2em 0 0;
   }
   12.5% {
-    box-shadow:0 -3em 0 0 @foreground,
-    2em -2em 0 0.2em @foreground,
-    3em 0 0 0 @foreground,
-    2em 2em 0 -1em @foreground,
-    0 3em 0 -1em @foreground,
-    -2em 2em 0 -1em @foreground,
-    -3em 0 0 -1em @foreground,
-    -2em -2em 0 -1em @foreground;
+    box-shadow:0 -3em 0 0,
+    2em -2em 0 0.2em,
+    3em 0 0 0,
+    2em 2em 0 -1em,
+    0 3em 0 -1em,
+    -2em 2em 0 -1em,
+    -3em 0 0 -1em,
+    -2em -2em 0 -1em;
   }
   25% {
-    box-shadow:0 -3em 0 -0.5em @foreground,
-    2em -2em 0 0 @foreground,
-    3em 0 0 0.2em @foreground,
-    2em 2em 0 0 @foreground,
-    0 3em 0 -1em @foreground,
-    -2em 2em 0 -1em @foreground,
-    -3em 0 0 -1em @foreground,
-    -2em -2em 0 -1em @foreground;
+    box-shadow:0 -3em 0 -0.5em,
+    2em -2em 0 0,
+    3em 0 0 0.2em,
+    2em 2em 0 0,
+    0 3em 0 -1em,
+    -2em 2em 0 -1em,
+    -3em 0 0 -1em,
+    -2em -2em 0 -1em;
   }
   37.5% {
-    box-shadow:0 -3em 0 -1em @foreground,
-    2em -2em 0 -1em @foreground,
-    3em 0em 0 0 @foreground,
-    2em 2em 0 0.2em @foreground,
-    0 3em 0 0em @foreground,
-    -2em 2em 0 -1em @foreground,
-    -3em 0em 0 -1em @foreground,
-    -2em -2em 0 -1em @foreground;
+    box-shadow:0 -3em 0 -1em,
+    2em -2em 0 -1em,
+    3em 0em 0 0,
+    2em 2em 0 0.2em,
+    0 3em 0 0em,
+    -2em 2em 0 -1em,
+    -3em 0em 0 -1em,
+    -2em -2em 0 -1em;
   }
   50% {
-    box-shadow:0 -3em 0 -1em @foreground,
-    2em -2em 0 -1em @foreground,
-    3em 0 0 -1em @foreground,
-    2em 2em 0 0em @foreground,
-    0 3em 0 0.2em @foreground,
-    -2em 2em 0 0 @foreground,
-    -3em 0em 0 -1em @foreground,
-    -2em -2em 0 -1em @foreground;
+    box-shadow:0 -3em 0 -1em,
+    2em -2em 0 -1em,
+    3em 0 0 -1em,
+    2em 2em 0 0em,
+    0 3em 0 0.2em,
+    -2em 2em 0 0,
+    -3em 0em 0 -1em,
+    -2em -2em 0 -1em;
   }
   62.5% {
-    box-shadow:0 -3em 0 -1em @foreground,
-    2em -2em 0 -1em @foreground,
-    3em 0 0 -1em @foreground,
-    2em 2em 0 -1em @foreground,
-    0 3em 0 0 @foreground,
-    -2em 2em 0 0.2em @foreground,
-    -3em 0 0 0 @foreground,
-    -2em -2em 0 -1em @foreground;
+    box-shadow:0 -3em 0 -1em,
+    2em -2em 0 -1em,
+    3em 0 0 -1em,
+    2em 2em 0 -1em,
+    0 3em 0 0,
+    -2em 2em 0 0.2em,
+    -3em 0 0 0,
+    -2em -2em 0 -1em;
   }
   75% {
-    box-shadow:0em -3em 0 -1em @foreground,
-    2em -2em 0 -1em @foreground,
-    3em 0em 0 -1em @foreground,
-    2em 2em 0 -1em @foreground,
-    0 3em 0 -1em @foreground,
-    -2em 2em 0 0 @foreground,
-    -3em 0em 0 0.2em @foreground,
-    -2em -2em 0 0 @foreground;
+    box-shadow:0em -3em 0 -1em,
+    2em -2em 0 -1em,
+    3em 0em 0 -1em,
+    2em 2em 0 -1em,
+    0 3em 0 -1em,
+    -2em 2em 0 0,
+    -3em 0em 0 0.2em,
+    -2em -2em 0 0;
   }
   87.5% {
-    box-shadow:0em -3em 0 0 @foreground,
-    2em -2em 0 -1em @foreground,
-    3em 0 0 -1em @foreground,
-    2em 2em 0 -1em @foreground,
-    0 3em 0 -1em @foreground,
-    -2em 2em 0 0 @foreground,
-    -3em 0em 0 0 @foreground,
-    -2em -2em 0 0.2em @foreground;
+    box-shadow:0em -3em 0 0,
+    2em -2em 0 -1em,
+    3em 0 0 -1em,
+    2em 2em 0 -1em,
+    0 3em 0 -1em,
+    -2em 2em 0 0,
+    -3em 0em 0 0,
+    -2em -2em 0 0.2em;
   }
 }
diff --git a/less/load6.less b/less/load6.less
@@ -1,6 +1,7 @@
 @foreground: #fff;
 
 .load6 .loader {
+  color:@foreground;
   font-size:90px;
   text-indent:-9999em;
   overflow: hidden;
@@ -23,53 +24,53 @@
   -webkit-transform:rotate(0deg);
   transform:rotate(0deg);
   box-shadow:
-  0 -0.83em 0 -0.4em @foreground,
-  0 -0.83em 0 -0.42em @foreground,
-  0 -0.83em 0 -0.44em @foreground,
-  0 -0.83em 0 -0.46em @foreground,
-  0 -0.83em 0 -0.477em @foreground;
+  0 -0.83em 0 -0.4em,
+  0 -0.83em 0 -0.42em,
+  0 -0.83em 0 -0.44em,
+  0 -0.83em 0 -0.46em,
+  0 -0.83em 0 -0.477em;
   }
   5%, 95% {
     box-shadow:
-    0 -0.83em 0 -0.4em @foreground,
-    0 -0.83em 0 -0.42em @foreground,
-    0 -0.83em 0 -0.44em @foreground,
-    0 -0.83em 0 -0.46em @foreground,
-    0 -0.83em 0 -0.477em @foreground;
+    0 -0.83em 0 -0.4em,
+    0 -0.83em 0 -0.42em,
+    0 -0.83em 0 -0.44em,
+    0 -0.83em 0 -0.46em,
+    0 -0.83em 0 -0.477em;
   }
   10%,
   59% {
     box-shadow:
-    0 -0.83em 0 -0.4em @foreground,
-    -0.087em -0.825em 0 -0.42em @foreground,
-    -0.173em -0.812em 0 -0.44em @foreground,
-    -0.256em -0.789em 0 -0.46em @foreground,
-    -0.297em -0.775em 0 -0.477em @foreground;
+    0 -0.83em 0 -0.4em,
+    -0.087em -0.825em 0 -0.42em,
+    -0.173em -0.812em 0 -0.44em,
+    -0.256em -0.789em 0 -0.46em,
+    -0.297em -0.775em 0 -0.477em;
   }
   20% {
     box-shadow:
-    0 -0.83em 0 -0.4em @foreground,
-    -0.338em -0.758em 0 -0.42em @foreground,
-    -0.555em -0.617em 0 -0.44em @foreground,
-    -0.671em -0.488em 0 -0.46em @foreground,
-    -0.749em -0.34em 0 -0.477em @foreground;
+    0 -0.83em 0 -0.4em,
+    -0.338em -0.758em 0 -0.42em,
+    -0.555em -0.617em 0 -0.44em,
+    -0.671em -0.488em 0 -0.46em,
+    -0.749em -0.34em 0 -0.477em;
   }
   38% {
     box-shadow:
-    0 -0.83em 0 -0.4em @foreground,
-    -0.377em -0.74em 0 -0.42em @foreground,
-    -0.645em -0.522em 0 -0.44em @foreground,
-    -0.775em -0.297em 0 -0.46em @foreground,
-    -0.82em -0.09em 0 -0.477em @foreground;
+    0 -0.83em 0 -0.4em,
+    -0.377em -0.74em 0 -0.42em,
+    -0.645em -0.522em 0 -0.44em,
+    -0.775em -0.297em 0 -0.46em,
+    -0.82em -0.09em 0 -0.477em;
   }
   100% {
     -webkit-transform:rotate(360deg);
     transform:rotate(360deg);
     box-shadow:
-    0 -0.83em 0 -0.4em @foreground,
-    0 -0.83em 0 -0.42em @foreground,
-    0 -0.83em 0 -0.44em @foreground,
-    0 -0.83em 0 -0.46em @foreground,
-    0 -0.83em 0 -0.477em @foreground;
+    0 -0.83em 0 -0.4em,
+    0 -0.83em 0 -0.42em,
+    0 -0.83em 0 -0.44em,
+    0 -0.83em 0 -0.46em,
+    0 -0.83em 0 -0.477em;
   }
 }
diff --git a/less/load7.less b/less/load7.less
@@ -10,6 +10,7 @@
   animation:load7 1.8s infinite ease-in-out;
 }
 .load7 .loader {
+  color:@foreground;
   font-size:10px;
   margin:80px auto;
   position:relative;
@@ -39,9 +40,9 @@
 
 .load7-frames() {
   0%,80%,100% {
-    box-shadow:0 2.5em 0 -1.3em @foreground;
+    box-shadow:0 2.5em 0 -1.3em;
   }
   40% {
-    box-shadow:0 2.5em 0 0 @foreground;
+    box-shadow:0 2.5em 0 0;
   }
 }