Initial quick design for right settings drawer

css/style.css

@@ -47,7 +47,7 @@ body {
   position: fixed;
   top: 0;
   bottom: 0;
-  z-index: 10;
+  z-index: 1000;
 }
 
 .sticky-section .wrap,
@@ -75,8 +75,8 @@ body {
   transition: all 200ms ease-out;
 }
 
-.right-sticky-section.expanded {
-  right: 300px;
+.right-sticky-section .tool-icon {
+  float: right;
 }
 
 .drawer {
@@ -84,13 +84,52 @@ body {
 }
 
 .drawer-content {
-  background-color: red;
-  height: 600px;
-  width: 300px;
+  overflow: hidden;
+  background-color: #444;
+  height: 550px;
+  max-height: 100%;
+  width: 280px;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
 }
 
-.right-sticky-section .tool-icon {
-  float: right;
+/** Righty sticky drawer expanded state. */
+
+.right-sticky-section.expanded {
+  right: 280px;
+}
+
+.right-sticky-section .tool-icon.has-expanded-drawer {
+  position: relative;
+  background-color: #444;
+}
+
+.right-sticky-section .tool-icon.has-expanded-drawer:before {
+  content: " ";
+  position: absolute;
+  background-color: #444;
+  top: 0;
+  bottom: 0;
+  right: -5px;
+  width: 10px;
+  z-index: -1;
+}
+
+.settings-title {
+  margin: 10px 20px;
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: bold;
+  color: #eee;
+  border-bottom: 1px #aaa solid;
+  padding-bottom: 5px;
+}
+
+.settings-item {
+  margin: 10px 20px;
+  color: #eee;
+  font-size: 13px;
+  cursor: pointer;
 }
 
 /**

css/tools.css

@@ -10,7 +10,7 @@
   width: 46px;
   height: 46px;
   margin: 1px;
-  background-color: rgba(200,200,200, .1);
+  background-color: #3a3a3a;
   background-repeat: no-repeat;
   background-position: 12px 12px;
   background-size: 24px 24px;

index.html

@@ -48,9 +48,12 @@
     </div>
     <div class="drawer">
       <div class="drawer-content">
-        <div>
-          Canvas background:
-          <select id="canvas-picker" style="width:100px;">
+        <div class="settings-title">
+          Canvas settings:
+        </div>
+        <div class="settings-item">
+          <label>Background:</label>
+          <select id="canvas-picker">
             <option value="light-canvas-background">Light</option>
             <option value="lowcont-medium-canvas-background">Medium - low contrast</option>
             <option value="medium-canvas-background" selected="selected">Medium - high contrast</option>
@@ -58,9 +61,8 @@
           </select>
         </div>
 
-       <div class="tool-grid">
-          <input id="show-grid" type="checkbox"/>
-          <label for="show-grid">Show grid</label>
+        <div class="settings-item">
+          <label for="show-grid">Show grid:</label> <input id="show-grid" type="checkbox"/>
         </div>
       </div>
     </div>