code refactor

cherryDevBomb · Jul 18, 2020 · 61f50be · 61f50be
1 parent 02bb1c1
commit 61f50be
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 25 deletions.
diff --git a/public/manifest.json b/public/manifest.json
@@ -6,7 +6,7 @@
   "content_security_policy": "script-src 'self' 'sha256-GgRxrVOKNdB4LrRsVPDSbzvfdV4UqglmviH9GoBJ5jk='; object-src 'self'",
   "content_scripts" : [
     {
-      "matches": [ "<all_urls>" ],
+      "matches": ["<all_urls>"],
       "css": ["/static/css/content.css"],
       "js": ["/static/js/content.js"]
     }
@@ -18,5 +18,6 @@
     "16": "light-switch-16.png",
     "32": "light-switch-32.png",
     "48": "light-switch-64.png",
-    "128": "light-switch-128.png" }
+    "128": "light-switch-128.png"
+  }
 }
diff --git a/src/content.css b/src/content.css
diff --git a/src/content.css.map b/src/content.css.map
diff --git a/src/content.scss b/src/content.scss
@@ -1,5 +1,5 @@
-$globe-width:   11px;
-$globe-height:  25px;
+$globe-width: 11px;
+$globe-height: 25px;
 $globe-spacing: 40px;
 $globe-spread: 3px;
 
@@ -18,11 +18,6 @@ $color-3: rgba(247, 0, 76, 1);
 $color-3-lights-off: rgba($color-3, $light-off-opacity);
 $color-3-box-shadow: rgba($color-3, $box-shadow-opacity);
 
-
-//TODO add messaging to remove popup
-//TODO add icon to represent extension
-//TODO play with colors
-
 #xmas-lights-extension-root {
   width: 100%;
   height: fit-content;
@@ -44,10 +39,11 @@ $color-3-box-shadow: rgba($color-3, $box-shadow-opacity);
   padding: 0;
   pointer-events: none;
   width: 100%;
+
   li {
     position: relative;
     animation-fill-mode: both;
-    animation-iteration-count:infinite;
+    animation-iteration-count: infinite;
     list-style: none;
     margin: 0;
     padding: 0;
@@ -61,24 +57,29 @@ $color-3-box-shadow: rgba($color-3, $box-shadow-opacity);
     box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread $color-1;
     animation-name: flash-1;
     animation-duration: 2s;
+
     &:nth-child(2n+1) {
       background: $color-2;
-      box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread $color-3;
+      box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread $color-2;
       animation-name: flash-2;
       animation-duration: 0.4s;
     }
+
     &:nth-child(4n+2) {
       background: $color-3;
       box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread $color-3;
       animation-name: flash-3;
       animation-duration: 1.1s;
     }
+
     &:nth-child(odd) {
       animation-duration: 1.8s;
     }
+
     &:nth-child(3n+1) {
       animation-duration: 1.4s;
     }
+
     &:before {
       content: "";
       position: absolute;
@@ -89,6 +90,7 @@ $color-3-box-shadow: rgba($color-3, $box-shadow-opacity);
       top: (0 - ($globe-height/6));
       left: 1px;
     }
+
     &:after {
       content: "";
       top: (0 - $globe-height/2);
@@ -99,29 +101,46 @@ $color-3-box-shadow: rgba($color-3, $box-shadow-opacity);
       border-bottom: solid #222 2px;
       border-radius: 50%;
     }
+
     &:last-child:after {
       content: none;
     }
+
     &:first-child {
       margin-left: -$globe-spacing;
     }
   }
 }
+
 @keyframes flash-1 {
-  0%, 100% { background: $color-1;
-    box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread $color-1;}
-  50% { background: $color-1-lights-off;
-    box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread $color-1-box-shadow;}
+  0%, 100% {
+    background: $color-1;
+    box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread $color-1;
+  }
+  50% {
+    background: $color-1-lights-off;
+    box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread $color-1-box-shadow;
+  }
 }
+
 @keyframes flash-2 {
-  0%, 100% { background: $color-2;
-    box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread $color-2;}
-  50% { background: $color-2-lights-off;
-    box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread $color-2-box-shadow;}
+  0%, 100% {
+    background: $color-2;
+    box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread $color-2;
+  }
+  50% {
+    background: $color-2-lights-off;
+    box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread $color-2-box-shadow;
+  }
 }
+
 @keyframes flash-3 {
-  0%, 100% { background: $color-3;
-    box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread $color-3;}
-  50% { background: $color-3-lights-off;
-    box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread $color-3-box-shadow;}
+  0%, 100% {
+    background: $color-3;
+    box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread $color-3;
+  }
+  50% {
+    background: $color-3-lights-off;
+    box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread $color-3-box-shadow;
+  }
 }