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,
-#toggleDraw {
-  display: inline;
+#controls {
+  display: block;
+  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 {
-  z-index: 100;
-  background: white;
-  display: flex;
-  justify-content: space-between;
+#controls #clear,
+#controls #toggleDraw {
+  display: inline;
+  vertical-align: middle;
 }
-.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 {
-  padding-left: 75px;
+/* Colors */
+#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,59 +19,74 @@ 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 {
+
+// contains user tools
+#controls {
+    display: block;
+    position: relative;
+    border-top: 1px solid black;
+    background: white;
+    height: 100px;
+    line-height: 100px;
+    padding-bottom: 5px;
+
+    #width {
+        .middle;
+    }
+    #clear, #toggleDraw {
         display: inline;
         vertical-align: middle;
-}
-#colors {
-    z-index: 100;
-    background: white;
-    display: flex;
-    justify-content: space-between;
-}
-.selected {
+    }
+    .selected {
         margin-left: 20px;
         display: inline-block;
-    height: 100px;
+        height: 135px;
+        width: 135px;
+        z-index: 9001;
+        text-align: center;
         img {
             vertical-align: middle;
         }
+    }
 }
-#copy {
-    padding-left: 75px;
-}
-span.palette-color {
+
+/* Colors */
+#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;
+    }
 }
-#controls {
-    display: block;
-    position: relative;
-    border-top: 1px solid black;
-    background: white;
-    height: 100px;
-    line-height: 100px;
-}
-#width, #colors {
-    position: relative;
-    vertical-align: middle;
-}
+
+// 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;
-}