cleaner less file

www/whiteboard/whiteboard.css

@@ -1,3 +1,6 @@
+.hidden {
+  display: none;
+}
 html,
 body {
   padding: 0px;
@@ -21,29 +24,45 @@ body {
   margin: auto;
   background: white;
 }
-#clear,
+#controls {
-#toggleDraw {
+  display: block;
-  display: inline;
+  position: relative;
+  border-top: 1px solid black;
+  background: white;
+  height: 100px;
+  line-height: 100px;
+  padding-bottom: 5px;
+}
+#controls #width {
+  position: relative;
   vertical-align: middle;
 }
-#colors {
+#controls #clear,
-  z-index: 100;
+#controls #toggleDraw {
-  background: white;
+  display: inline;
-  display: flex;
+  vertical-align: middle;
-  justify-content: space-between;
 }
-.selected {
+#controls .selected {
   margin-left: 20px;
   display: inline-block;
-  height: 100px;
+  height: 135px;
+  width: 135px;
+  z-index: 9001;
+  text-align: center;
 }
-.selected img {
+#controls .selected img {
   vertical-align: middle;
 }
-#copy {
+/* Colors */
-  padding-left: 75px;
+#colors {
+  position: relative;
+  vertical-align: middle;
+  z-index: 100;
+  background: white;
+  display: flex;
+  justify-content: space-between;
 }
-span.palette-color {
+#colors span.palette-color {
   height: 4vw;
   width: 4vw;
   display: inline-block;
@@ -51,19 +70,6 @@ span.palette-color {
   border: 1px solid black;
   vertical-align: top;
 }
-#controls {
-  display: block;
-  position: relative;
-  border-top: 1px solid black;
-  background: white;
-  height: 100px;
-  line-height: 100px;
-}
-#width,
-#colors {
-  position: relative;
-  vertical-align: middle;
-}
 #color-picker {
   display: block;
 }
@@ -74,6 +80,3 @@ span.palette-color {
   height: 0;
   z-index: -5;
 }
-.hidden {
-  display: none;
-}

www/whiteboard/whiteboard.less

@@ -1,3 +1,11 @@
+.middle () {
+    position: relative;
+    vertical-align: middle;
+}
+.hidden {
+    display: none;
+}
+
 html, body{
     padding: 0px;
     margin: 0px;
@@ -11,44 +19,20 @@ body {
     background-size: cover;
     background-position: center;
 }
+
+// created in the html
 #canvas-area {
     flex: 1;
     display: flex;
 }
+// created by fabricjs. styled so defaults don't break anything
 .canvas-container {
     border: 1px solid black;
     margin: auto;
     background: white;
 }
-#clear, #toggleDraw {
+
-    display: inline;
+// contains user tools
-    vertical-align: middle;
-}
-#colors {
-    z-index: 100;
-    background: white;
-    display: flex;
-    justify-content: space-between;
-}
-.selected {
-    margin-left: 20px;
-    display: inline-block;
-    height: 100px;
-    img {
-        vertical-align: middle;
-    }
-}
-#copy {
-    padding-left: 75px;
-}
-span.palette-color {
-    height: 4vw;
-    width: 4vw;
-    display: inline-block;
-    margin: 5px;
-    border: 1px solid black;
-    vertical-align: top;
-}
 #controls {
     display: block;
     position: relative;
@@ -56,14 +40,53 @@ span.palette-color {
     background: white;
     height: 100px;
     line-height: 100px;
+    padding-bottom: 5px;
+
+    #width {
+        .middle;
+    }
+    #clear, #toggleDraw {
+        display: inline;
+        vertical-align: middle;
+    }
+    .selected {
+        margin-left: 20px;
+        display: inline-block;
+        height: 135px;
+        width: 135px;
+        z-index: 9001;
+        text-align: center;
+        img {
+            vertical-align: middle;
+        }
+    }
 }
-#width, #colors {
+
-    position: relative;
+/* Colors */
-    vertical-align: middle;
+#colors {
+    .middle;
+    z-index: 100;
+    background: white;
+    display: flex;
+    justify-content: space-between;
+
+    span.palette-color {
+        height: 4vw;
+        width: 4vw;
+        display: inline-block;
+        margin: 5px;
+        border: 1px solid black;
+        vertical-align: top;
+    }
 }
+
+// used in the toolbar if supported
 #color-picker {
     display: block;
 }
+
+// input[type=color] must exist in the dom to work correctly
+// styled so that they don't break layouts
 #pickers {
     visibility: hidden;
     position: absolute;
@@ -71,7 +94,4 @@ span.palette-color {
     height: 0;
     z-index: -5;
 }
-.hidden {
-    display: none;
-}