Tool Icons

Signed-off-by: Armen Kesablyan <armen@motorola.com>

3 files changed, 22 insertions, 11 deletions

diff --git a/css/ninja.css b/css/ninja.css
index 62642787..179a67da 100644
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -808,15 +808,17 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1
 
 #toolsPanelContent { width: 40px; }
 
-.toolsList { width: 30px; margin: auto; }
+.toolsList { width: 29px; margin: auto; }
 
 .toolsList hr { border: 0px; border-top: 1px solid #232323; border-bottom: 1px solid #3A3A3A; margin: 2px; }
 
-.toolbutton { width: 30px; height: 30px; background-position: center center; background-repeat: no-repeat; -webkit-border-radius: 4px; opacity: 0.6; margin-bottom: 2px; }
+.toolbutton { width: 29px; height: 29px; background-position: center center; background-repeat: no-repeat; border-radius: 3px; opacity: 1; margin-bottom: 2px; -webkit-transform: scale(0.8); -webkit-transition: 0.15s all cubic-bezier(0.44, 0.19, 0, 0.99); }
 
-.toolsList .toolbutton:hover, .toolsList .active { box-shadow: inset 0px 0px 8px #999; opacity: 1; }
+.toolsList .toolbutton:hover, .toolsList .active { box-shadow: 0px 0px 2px 2px #999; -webkit-transform: scale(1); opacity: 1; }
 
-.toolsList .active { background-color: #555; }
+.toolsList .toolbutton:active { background-color: #8c8c8c; }
+
+.toolsList .active { box-shadow: inset 0px 0px 2px 2px #555; background-color: #363636; }
 
 .SelectionTool { background-image: url("../images/tools/Tool-Selection.png"); }
 
diff --git a/scss/.sass-cache/bf7669b9251ffa007260472c0d41aebd1dfdcf8a/_toolbar.scssc b/scss/.sass-cache/bf7669b9251ffa007260472c0d41aebd1dfdcf8a/_toolbar.scssc
index 6fc7c8bd..91213519 100644
--- a/scss/.sass-cache/bf7669b9251ffa007260472c0d41aebd1dfdcf8a/_toolbar.scssc
+++ b/scss/.sass-cache/bf7669b9251ffa007260472c0d41aebd1dfdcf8a/_toolbar.scssc
diff --git a/scss/imports/scss/_toolbar.scss b/scss/imports/scss/_toolbar.scss
index 4d460bad..429fe427 100644
--- a/scss/imports/scss/_toolbar.scss
+++ b/scss/imports/scss/_toolbar.scss
@@ -17,7 +17,7 @@
 }
 
 .toolsList {
-    width:30px;
+    width:29px;
     margin:auto;
 }
 
@@ -29,22 +29,31 @@
 }
 
 .toolbutton {
-    width:30px;
-    height:30px;
+    width:29px;
+    height:29px;
     background-position: center center;
     background-repeat: no-repeat;
-    -webkit-border-radius:4px;
-    opacity: 0.6;
+    border-radius:3px;
+    opacity: 1;
     margin-bottom: 2px;
+    -webkit-transform: scale(0.8);
+    -webkit-transition: 0.15s all cubic-bezier(.44,.19,0,.99);
 }
 
 .toolsList .toolbutton:hover, .toolsList .active {
-    box-shadow: inset 0px 0px 8px #999;
+    box-shadow:  0px 0px 2px 2px #999;
+
+    -webkit-transform: scale(1);
     opacity: 1;
 }
 
+.toolsList .toolbutton:active {
+    background-color: #8c8c8c;
+}
+
 .toolsList .active {
-    background-color:#555;
+    box-shadow: inset 0px 0px 2px 2px #555;
+    background-color:#363636;
 }
 
 .SelectionTool {