Correct layout and styling for the shape tool and its sub tools

2 files changed, 18 insertions, 4 deletions

diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.css b/js/components/tools-properties/shape-properties.reel/shape-properties.css
index 1100bc70..4dc64d66 100755
--- a/js/components/tools-properties/shape-properties.reel/shape-properties.css
+++ b/js/components/tools-properties/shape-properties.reel/shape-properties.css
@@ -5,17 +5,26 @@
  </copyright> */
  
  .optionsShapeTool {
-    padding: 4px;
+    padding: 6px;
 }
 
  .optionsShapeTool > * {
     float:left;
 }
 
+.optionsShapeTool select.nj-skinned {
+    margin-top: 2px;
+}
+
+.optionsShapeTool .shapeCustomProps {
+    margin-top: -3px;
+    margin-left: -31px;
+}
+
  .optionsShapeTool .fillColorCtrl,  .optionsShapeTool .strokeColorCtrl {
     width: 20px;
     height: 18px;
-    margin: 2px 6px;
+    margin: 1px 6px;
     border: 1px black solid;
 }
 
@@ -25,4 +34,8 @@
     margin-top: 2px;
     -webkit-transform: scale(0.8);
     background-color: rgb(40, 40, 40);
-}
\ No newline at end of file
+}
+
+.optionsShapeTool checkbox {
+    padding: 6px;
+}
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.html b/js/components/tools-properties/shape-properties.reel/shape-properties.html
index 9363365e..c54f8b25 100755
--- a/js/components/tools-properties/shape-properties.reel/shape-properties.html
+++ b/js/components/tools-properties/shape-properties.reel/shape-properties.html
@@ -136,6 +136,7 @@
             <div data-montage-id="shapeToolsList">
                 <div data-montage-id="toolbutton"></div>
             </div>
+            <div class="nj-divider divider-vertical toolOptionsSpacer">&nbsp;</div>
             <div class="colorCtrlIcon PencilTool"></div>
             <div data-montage-id="strokeColorCtrl" class="strokeColorCtrl"></div>
             <div data-montage-id="fillColorCtrlIcon" class="colorCtrlIcon FillTool"></div>
@@ -143,7 +144,7 @@
             <div class="nj-divider divider-vertical">&nbsp;</div>
             <label class="label">Stroke:</label>
             <div data-montage-id="strokeControl" class="label"></div>
-            <div id="customProperties">
+            <div id="customProperties" class="shapeCustomProps">
                 <div data-montage-id="ovalProperties" class="label"></div>
                 <div data-montage-id="rectProperties" class="label"></div>
                 <div data-montage-id="lineProperties" class="label"></div>