refactor(less): improve and format

nzbin · Dec 2, 2021 · 61c9a38 · 61c9a38
1 parent b448be9
commit 61c9a38
Show file tree

Hide file tree

Showing 19 changed files with 112 additions and 115 deletions.
diff --git a/less/_dot-bricks.less b/less/_dot-bricks.less
@@ -13,12 +13,11 @@
 @y2: -@spacing;
 
 .dot-bricks {
+  .dot;
+
   position: relative;
   top: @top-pos;
   left: @left-pos;
-
-  .dot;
-
   box-shadow:
     @x1 @y2 0 0 @dot-color,
     @x1 @y1 0 0 @dot-color,

diff --git a/less/_dot-carousel.less b/less/_dot-carousel.less
@@ -10,11 +10,10 @@
 @x3: -@left-pos + @dot-spacing;
 
 .dot-carousel {
-  position: relative;
-  left: @left-pos;
-
   .dot;
 
+  position: relative;
+  left: @left-pos;
   box-shadow:
     @x1 0 0 0 @dot-color,
     @x2 0 0 0 @dot-color,

diff --git a/less/_dot-collision.less b/less/_dot-collision.less
@@ -5,10 +5,10 @@
  */
 
 .dot-collision {
-  position: relative;
-
   .dot;
 
+  position: relative;
+
   &::before,
   &::after {
     content: "";
@@ -18,18 +18,16 @@
   }
 
   &::before {
-    left: - @dot-width;
-
     .dot(@bg-color: @dot-before-color);
 
+    left: - @dot-width;
     animation: dot-collision-before 2s infinite ease-in;
   }
 
   &::after {
-    left: @dot-width;
-
     .dot(@bg-color: @dot-after-color);
 
+    left: @dot-width;
     animation: dot-collision-after 2s 1s infinite ease-in;
   }
 }

diff --git a/less/_dot-elastic.less b/less/_dot-elastic.less
@@ -5,10 +5,9 @@
  */
 
 .dot-elastic {
-  position: relative;
-
   .dot;
 
+  position: relative;
   animation: dot-elastic 1s infinite linear;
 
   &::before,
@@ -20,18 +19,16 @@
   }
 
   &::before {
-    left: -@dot-spacing;
-
     .dot(@bg-color: @dot-before-color);
 
+    left: -@dot-spacing;
     animation: dot-elastic-before 1s infinite linear;
   }
 
   &::after {
-    left: @dot-spacing;
-
     .dot(@bg-color: @dot-after-color);
 
+    left: @dot-spacing;
     animation: dot-elastic-after 1s infinite linear;
   }
 }

diff --git a/less/_dot-falling.less b/less/_dot-falling.less
@@ -23,11 +23,10 @@
 @color-after-1: rgba(@dot-after-color, 100%);
 
 .dot-falling {
-  position: relative;
-  left: @left-pos;
-
   .dot;
 
+  position: relative;
+  left: @left-pos;
   box-shadow: @x2 0 0 0 @dot-color;
   animation: dot-falling 1s infinite linear;
   animation-delay: .1s;

diff --git a/less/_dot-fire.less b/less/_dot-fire.less
@@ -11,23 +11,22 @@
 @y3: 1.5 * @dot-spacing;
 
 .dot-fire {
-  position: relative;
-  left: @left-pos;
-
   .dot;
 
+  position: relative;
+  left: @left-pos;
   box-shadow: @x1 @y3 0 -5px @dot-color;
   animation: dot-fire 1.5s infinite linear;
   animation-delay: -.85s;
 
   &::before,
   &::after {
+    .dot;
+
     content: "";
     display: inline-block;
     position: absolute;
     top: 0;
-
-    .dot;
   }
 
   &::before {

diff --git a/less/_dot-flashing.less b/less/_dot-flashing.less
@@ -5,10 +5,9 @@
 */
 
 .dot-flashing {
-  position: relative;
-
   .dot;
 
+  position: relative;
   animation: dot-flashing 1s .5s infinite linear alternate;
 
   &::before,
@@ -20,18 +19,16 @@
   }
 
   &::before {
-    left: -@dot-spacing;
-
     .dot(@bg-color: @dot-before-color);
 
+    left: -@dot-spacing;
     animation: dot-flashing 1s infinite alternate;
   }
 
   &::after {
-    left: @dot-spacing;
-
     .dot(@bg-color: @dot-after-color);
 
+    left: @dot-spacing;
     animation: dot-flashing 1s 1s infinite alternate;
   }
 }

diff --git a/less/_dot-floating.less b/less/_dot-floating.less
@@ -8,10 +8,9 @@
 @d-min: 12px;
 
 .dot-floating {
-  position: relative;
-
   .dot;
 
+  position: relative;
   animation: dot-floating 3s infinite cubic-bezier(.15, .6, .9, .1);
 
   &::before,
@@ -23,18 +22,16 @@
   }
 
   &::before {
-    left: -@d-min;
-
     .dot(@bg-color: @dot-before-color);
 
+    left: -@d-min;
     animation: dot-floating-before 3s infinite ease-in-out;
   }
 
   &::after {
-    left: -@d-min*2;
-
     .dot(@bg-color: @dot-after-color);
 
+    left: -@d-min*2;
     animation: dot-floating-after 3s infinite cubic-bezier(.4, 0, 1, 1);
   }
 }

diff --git a/less/_dot-gathering.less b/less/_dot-gathering.less
@@ -10,23 +10,21 @@
 @d: 50px;
 
 .dot-gathering {
-  position: relative;
-
   .dot(@width: 12px, @height: 12px, @radius: 6px, @bg-color: @dot-color-hsl, @color: transparent);
 
+  position: relative;
   margin: -1px 0;
   filter: blur(2px);
 
   &::before,
   &::after {
+    .dot(@width: 12px, @height: 12px, @radius: 6px, @bg-color: @dot-color-hsl, @color: transparent);
+
     content: '';
     display: inline-block;
     position: absolute;
     top: 0;
     left: -@d;
-
-    .dot(@width: 12px, @height: 12px, @radius: 6px, @bg-color: @dot-color-hsl, @color: transparent);
-
     opacity: 0;
     filter: blur(2px);
     animation: dot-gathering 2s infinite ease-in;

diff --git a/less/_dot-hourglass.less b/less/_dot-hourglass.less
@@ -12,11 +12,10 @@
 @originY: @dot-height/2 + @r;
 
 .dot-hourglass {
-  position: relative;
-  top: -@r;
-
   .dot(@width: 12px, @height: 12px, @radius: 6px, @bg-color: @dot-color-hsl, @color: transparent);
 
+  position: relative;
+  top: -@r;
   margin: -1px 0;
   filter: blur(2px);
   transform-origin: @originX @originY;

diff --git a/less/_dot-overtaking.less b/less/_dot-overtaking.less
@@ -8,10 +8,9 @@
 @dot-color-hsl: hsl(0, 100%, 0%);
 
 .dot-overtaking {
-  position: relative;
-
   .dot(@width: 12px, @height: 12px, @radius: 6px, @bg-color: transparent, @color: @dot-color-hsl);
 
+  position: relative;
   margin: -1px 0;
   filter: blur(2px);
   box-shadow: 0 -20px 0 0;

diff --git a/less/_dot-pulse.less b/less/_dot-pulse.less
@@ -10,34 +10,31 @@
 @x3: -@left-pos + @dot-spacing;
 
 .dot-pulse {
-  position: relative;
-  left: @left-pos;
-
   .dot;
 
+  position: relative;
+  left: @left-pos;
   box-shadow: @x2 0 0 -5px;
   animation: dot-pulse 1.5s .25s infinite linear;
 
   &::before,
   &::after {
+    .dot;
+
     content: "";
     display: inline-block;
     position: absolute;
     top: 0;
-
-    .dot;
   }
 
   &::before {
     box-shadow: @x1 0 0 -5px;
     animation: dot-pulse-before 1.5s infinite linear;
-    animation-delay: 0s;
   }
 
   &::after {
     box-shadow: @x3 0 0 -5px;
-    animation: dot-pulse-after 1.5s infinite linear;
-    animation-delay: .5s;
+    animation: dot-pulse-after 1.5s .5s infinite linear;
   }
 }
 

diff --git a/less/_dot-revolution.less b/less/_dot-revolution.less
@@ -11,26 +11,28 @@
 
   &::before,
   &::after {
-    .dot;
-
     content: "";
     display: inline-block;
     position: absolute;
     top: 0;
   }
 
   &::before {
-    animation: dot-revolution 1.4s linear infinite;
+    .dot(@bg-color: @dot-before-color);
+
     left: 0;
     top: -@dot-spacing;
     transform-origin: @dot-width/2 (@dot-spacing + @dot-width/2);
+    animation: dot-revolution 1.4s linear infinite;
   }
 
   &::after {
-    animation: dot-revolution 1s linear infinite;
+    .dot(@bg-color: @dot-after-color);
+
     left: 0;
     top: -@dot-spacing*2;
     transform-origin: @dot-width/2 (@dot-spacing*2 + @dot-width/2);
+    animation: dot-revolution 1s linear infinite;
   }
 }