implemented proper styling for shape, inkbottle and fill tools

make all icons for fill and stroke use the proper classes/images

6 files changed, 92 insertions, 56 deletions

diff --git a/css/ninja.css b/css/ninja.css
index 24600b49..0a74acf8 100755
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -831,6 +831,34 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1
 
 .object3DToolContainer input.rotateGlobally:checked { background-position: 0px -20px; }
 
+.optionsSelectionTool { padding: 6px; }
+
+.optionsSelectionTool > * { float: left; }
+
+.topAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -240px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.rightAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -270px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.bottomAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -300px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.verticalLeftUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -330px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.verticalCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -360px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.verticalRightUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -390px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.distRightUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: 0px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.distLeftUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -420px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.distCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -60px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.distTopUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -30px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.distBottomUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -90px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
+.distVCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -450px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+
 #toolsPanelContent { width: 40px; }
 
 .toolsList { width: 29px; margin: auto; }
@@ -883,32 +911,6 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1
 
 .InkBottleTool { background-image: url("../images/tools/Tool-FillColor.png"); }
 
-.topAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -240px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
-
-.rightAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -270px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
-
-.bottomAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -300px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
-
-.verticalLeftUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -330px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
-
-.verticalCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -360px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
-
-.verticalRightUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -390px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
-
-.distRightUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: 0px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
-
-.distLeftUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -420px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
-
-.distCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -60px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
-
-.distTopUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -30px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
-
-.distBottomUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -90px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
-
-.distVCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -450px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
-
-.bucketToolUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -330px 0px; background-repeat: no-repeat; height: 23px; width: 26px; }
-
 .blueDiv { background: blue; opacity: 0.2; }
 
 ::-webkit-scrollbar { width: 11px; height: 11px; }
diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.css b/js/components/tools-properties/fill-properties.reel/fill-properties.css
index 58b1c1e8..fa2e75e6 100755
--- a/js/components/tools-properties/fill-properties.reel/fill-properties.css
+++ b/js/components/tools-properties/fill-properties.reel/fill-properties.css
@@ -7,7 +7,29 @@
 .optionsFillTool {
     padding: 6px;
 }
-
- .optionsFillTool > * {
+.optionsFillTool > * {
+    float:left;
+}
+.optionsFillTool > * > *{
     float:left;
+}
+
+.optionsFillTool label {
+    margin-right: 8px;
+} 
+.optionsFillTool .colorCtrlIcon {
+    width: 20px;
+    height: 20px;
+    margin-top: 0px;
+    margin-left: 10px;    
+    -webkit-transform: scale(0.8);
+    background-color: rgb(40, 40, 40);
+}
+
+.materialsContainerOptions select {
+    margin-top: 2px;
+}
+
+.materialsContainerOptions label {
+    margin-right: 0px;
 }
\ No newline at end of file
diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.html b/js/components/tools-properties/fill-properties.reel/fill-properties.html
index fb59e2a8..9fb84a1b 100755
--- a/js/components/tools-properties/fill-properties.reel/fill-properties.html
+++ b/js/components/tools-properties/fill-properties.reel/fill-properties.html
@@ -35,10 +35,11 @@
 
     <body>
         <div data-montage-id="fillProperties" class="subToolHolderPanel optionsFillTool">
-            <input data-montage-id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/><label class="label">Use WebGL</label>
-            <div data-montage-id="materialsContainer" class="leftLabel" style="padding-top: 3px;">
-                <label class="label"> Materials:</label>
-                <div data-montage-id="fillIcon" class="bucketToolUp" style="float: left;"></div>
+            <input data-montage-id="useWebGLCH" type="checkbox" name="useWebGLControl" class="nj-skinned"/>
+            <label class="label">Use WebGL</label>
+            <div data-montage-id="materialsContainer" class="materialsContainerOptions">
+                <label class="label">Material:</label>
+                <div data-montage-id="fillIcon" class="colorCtrlIcon FillTool"></div>
                 <select data-montage-id="fillMaterialCB" class="nj-skinned">
                 </select>
             </div>
diff --git a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.css b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.css
index a926a0b4..4136339c 100755
--- a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.css
+++ b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.css
@@ -4,27 +4,42 @@
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
 
-.inkBottleProperties input[type="checkbox"].nj-skinned {
+.toolOptionsFloatChildren > * {
     float:left;
-    margin-top:5px;
 }
 
-.inkBottleProperties select.nj-skinned {
-    float:left;
-    margin:2px 5px 0 0;
+.inkBottleOptions {    
+    padding: 6px;
+}
+
+.inkBottleOptions .nj-divider {
+    margin-left: 16px;
+    margin-right: 16px;
 }
 
-.inkBottleProperties label.disabled {
+.toolOptionsFloatChildren select.nj-skinned {
+    margin-top: 2px;
+}
+
+.inkBottleOptions label.disabled {
     color:#999999;
 }
 
-.inkBottleProperties label.disabled:hover {
+.inkBottleOptions label.disabled:hover {
     color:#999999;
     background-color: transparent;
     cursor:default;
 }
 
-.inkBottleProperties div.disabled:hover {
+.inkBottleOptions div.disabled:hover {
     background-color: transparent;
     cursor:default;
+}
+
+.inkBottleOptions .colorCtrlIcon {
+    width: 20px;
+    height: 20px;
+    margin-top: 2px;
+    -webkit-transform: scale(0.8);
+    background-color: rgb(40, 40, 40);
 }
\ No newline at end of file
diff --git a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html
index 010e77b2..148c71e3 100755
--- a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html
+++ b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html
@@ -159,9 +159,8 @@
     </head>
 
     <body>