Tool Icons : New layout

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

2 files changed, 139 insertions, 213 deletions

diff --git a/scss/imports/scss/_Tools.scss b/scss/imports/scss/_Tools.scss
index 935c4cd6..bf425666 100644
--- a/scss/imports/scss/_Tools.scss
+++ b/scss/imports/scss/_Tools.scss
@@ -14,15 +14,6 @@
 
 // Made changes to toolButton  
 
-.toolButton {
-    width:26px;
-    height:23px;
-    padding: 0px;
-    margin:1px;
-    border-width: 1px;
-    border-style: solid; 
-}
-
 .subToolButton {
     float:left;
 }
@@ -39,21 +30,6 @@
     margin-right: 10px;
 }
 
-.toolButton:active {   
-    border-top-width: 1px;
-    border-top-style: solid; 
-    border-left-width: 1px;
-    border-left-style: solid; 
-}
-
-.toolButtonSelected {
-    border-top-width: 1px;
-    border-top-style: solid; 
-    border-left-width: 1px;
-    border-left-style: solid;
-
-}
-
 .toolSeparator {
     height:1px;
     width:30px;
diff --git a/scss/imports/scss/_toolbar.scss b/scss/imports/scss/_toolbar.scss
index 048c1f88..44178b24 100644
--- a/scss/imports/scss/_toolbar.scss
+++ b/scss/imports/scss/_toolbar.scss
@@ -11,280 +11,230 @@
 // _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss
   
 
-//  New Tool List CSS  
-.SelectionToolPressed {
-    @include background-pos(12,1,26px,23px);
-    @include opacity(1.0);
+//  New Tool List CSS
+#toolsPanelContent {
+    width:40px;
 }
 
-.SelectionToolUnpressed {
-    @include background-pos(13,1,26px,23px);
-    @include opacity(0.7);
+.toolsList {
+    width:30px;
+    margin:auto;
 }
 
-.SubselectionToolPressed {
-    @include background-pos(14,1,26px,23px);
-    @include opacity(1.0);
+.toolsList hr {
+    border:0px;
+    border-top: 1px solid #232323;
+    border-bottom: 1px solid #3A3A3A;
+    margin:2px;
 }
 
-.SubselectionToolUnpressed {
-    @include background-pos(15,1,26px,23px);
-    @include opacity(0.7);
-}
-
-.RotateTool3DPressed {
-    @include background-pos(0,0,26px,23px);
-    @include opacity(1.0);
+.toolbutton {
+    width:30px;
+    height:30px;
+    background-position: center center;
+    background-repeat: no-repeat;
+    -webkit-border-radius:4px;
+    opacity: 0.6;
+    margin-bottom: 2px;
 }
 
-.RotateTool3DUnpressed {
-    @include background-pos(1,0,26px,23px);
-    @include opacity(0.7);
+.toolsList .toolbutton:hover, .toolsList .active {
+    box-shadow: inset 0px 0px 8px #999;
+    opacity: 1;
 }
 
-.Translate3DPressed {
-    @include background-pos(4,0,26px,23px);
-    @include opacity(1.0);
+.toolsList .active {
+    background-color:#555;
 }
 
-.Translate3DUnpressed {
-    @include background-pos(5,0,26px,23px);
-    @include opacity(0.7);
+.SelectionTool {
+    background-image:url("../images/tools/Tool-Selection.png");
 }
 
-.TagToolPressed {
-    @include background-pos(0,2,26px,23px);
-    @include opacity(1.0);
+.SubselectionTool {
+    background-image:url("../images/tools/Tool-Subselect.png");
 }
 
-.TagToolUnpressed {
-    @include background-pos(1,2,26px,23px);
-    @include opacity(0.7);
+.RotateTool3D {
+    background-image:url("../images/tools/Tool-3DRotate.png");
 }
 
-.PenToolPressed {
-    @include background-pos(6,1,26px,23px);
-    @include opacity(1.0);
+.Translate3D {
+    background-image:url("../images/tools/Tool-3DTranslate.png");
 }
 
-.PenToolUnpressed {
-    @include background-pos(7,1,26px,23px);
-    @include opacity(0.7);
+.TagTool {
+    background-image:url("../images/tools/Tool-Tag.png");
 }
 
-.TextToolPressed {
-    @include background-pos(2,2,26px,23px);
-    @include opacity(1.0);
+.PenTool {
+    background-image:url("../images/tools/Tool-Pen.png");
 }
 
-.TextToolUnpressed {
-    @include background-pos(3,2,26px,23px);
-    @include opacity(0.7);
+.TextTool {
+    background-image:url("../images/tools/Tool-Text.png");
 }
 
-.ShapeContainerPressed {
-    @include background-pos(4,1,26px,23px);
-    @include opacity(1.0);
-}
-.ShapeContainerUnpressed {
-    @include background-pos(5,1,26px,23px);
-    @include opacity(0.7);
+.ShapeContainer {
+    background-image:url("../images/tools/Tool-Rectangle.png");
 }
 
-.OvalToolPressed {
-    @include background-pos(4,1,26px,23px);
-    @include opacity(1.0);
+.OvalTool {
+    background-image:url("../images/tools/Tool-Oval.png");
 }
 
-.OvalToolUnpressed {
-    @include background-pos(5,1,26px,23px);
-    @include opacity(0.7);
+.RectangleTool {
+    background-image:url("../images/tools/Tool-Rectangle.png");
 }
 
-.RectangleToolPressed {
-    @include background-pos(10,1,26px,23px);
-    @include opacity(1.0);
+.LineTool {
+    background-image:url("../images/tools/Tool-Stroke.png");
 }
 
-.RectangleToolUnpressed {
-    @include background-pos(11,1,26px,23px);
-    @include opacity(0.7);
+.PencilTool {
+    background-image:url("../images/tools/Tool-Pencil.png");
 }
 
-.LineToolPressed {
-    @include background-pos(2,1,26px,23px);
-    @include opacity(1.0);
+.BrushTool {
+    background-image:url("../images/tools/Tool-PaintBrush.png");
 }
 
-.LineToolUnpressed {
-    @include background-pos(3,1,26px,23px);
-    @include opacity(0.7);
+.FillTool {
+    background-image:url("../images/tools/Tool-Fill.png");
 }
 
-.PencilToolPressed {
-    @include background-pos(8,1,26px,23px);
-    @include opacity(1.0);
+.EyedropperTool {
+    background-image:url("../images/tools/Tool-EyeDropper.png");
 }
 
-.PencilToolUnpressed {
-    @include background-pos(9,1,26px,23px);
-    @include opacity(0.7);
+.EraserTool {
+    background-image:url("../images/tools/Tool-Erase.png");
 }
 
-.BrushToolPressed {
-    @include background-pos(8,0,26px,23px);
-    @include opacity(1.0);
+.RotateStageTool3D {
+    background-image:url("../images/tools/Tool-3DRotateStage.png");
 }
 
-.BrushToolUnpressed {
-    @include background-pos(9,0,26px,23px);
-    @include opacity(0.7);
+.TranslateStageTool3D {
+    background-image:url("../images/tools/Tool-3DTranslateStage.png");