1 files changed, 13 insertions, 9 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/doodle.scss b/app/javascript/flavours/glitch/styles/components/doodle.scss
index a4a1cfc84..52c7cd54a 100644
--- a/app/javascript/flavours/glitch/styles/components/doodle.scss
+++ b/app/javascript/flavours/glitch/styles/components/doodle.scss
@@ -1,15 +1,17 @@
-$doodleBg: #d9e1e8;
+$doodle-background: #d9e1e8;
+
 .doodle-modal {
   @extend .boost-modal;
+
   width: unset;
 }
 
 .doodle-modal__container {
-  background: $doodleBg;
+  background: $doodle-background;
   text-align: center;
   line-height: 0; // remove weird gap under canvas
   canvas {
-    border: 5px solid $doodleBg;
+    border: 5px solid $doodle-background;
   }
 }
 
@@ -24,7 +26,6 @@ $doodleBg: #d9e1e8;
 
   .doodle-toolbar {
     line-height: 1;
-
     display: flex;
     flex-direction: column;
     flex-grow: 0;
@@ -38,9 +39,11 @@ $doodleBg: #d9e1e8;
         margin-right: 2px;
       }
 
-      input[type="number"],input[type="text"] {
+      input[type='number'],
+      input[type='text'] {
         width: 40px;
       }
+
       span.val {
         display: inline-block;
         text-align: left;
@@ -52,7 +55,7 @@ $doodleBg: #d9e1e8;
   .doodle-palette {
     padding-right: 0 !important;
     border: 1px solid black;
-    line-height: .2rem;
+    line-height: 0.2rem;
     flex-grow: 0;
     background: white;
 
@@ -60,14 +63,15 @@ $doodleBg: #d9e1e8;
       appearance: none;
       width: 1rem;
       height: 1rem;
-      margin: 0; padding: 0;
+      margin: 0;
+      padding: 0;
       text-align: center;
       color: black;
       text-shadow: 0 0 1px white;
       cursor: pointer;
-      box-shadow: inset 0 0 1px rgba(white, .5);
+      box-shadow: inset 0 0 1px rgba(white, 0.5);
       border: 1px solid black;
-      outline-offset:-1px;
+      outline-offset: -1px;
 
       &.foreground {
         outline: 1px dashed white;