Tool Icons : New layout

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

1 files changed, 87 insertions, 92 deletions

diff --git a/css/ninja.css b/css/ninja.css
index 934bd60b..20fa85f5 100644
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -210,10 +210,6 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co
 
 #mainContent .CodeMirror-scroll { height: 100%; overflow: scroll; overflow-x: auto; overflow-y: auto; }
 
-.montage-editor-frame { position: absolute; z-index: 7; top: 0; left: 0; display: none; -webkit-user-select: initial; }
-
-.montage-editor { padding: 0px; word-wrap: normal; }
-
 .panelContainer { margin: 0px; padding: 0px 0px; position: relative; overflow: auto; }
 
 .panelDisclosureIcon { background-image: url("../images/panels/panelDisclosureIcon.png"); background-repeat: no-repeat; width: 16px; height: 16px; float: left; -webkit-transition-property: rotate; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: linear; padding-right: 2px; }
@@ -670,16 +666,10 @@ nav.menuBar ul ul, nav.menuBar ul li:hover ul ul, nav.menuBar ul ul li:hover ul
 
 nav.menuBar ul li:hover ul, nav.menuBar ul ul li:hover ul, nav.menuBar ul ul ul li:hover ul { display: block; }
 
-.toolButton { width: 26px; height: 23px; padding: 0px; margin: 1px; border-width: 1px; border-style: solid; }
-
 .subToolButton { float: left; }
 
 .subOption { float: left; margin-top: 5px; margin-left: 10px; 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; }
 
 .toolSeparatorTop { margin-top: 3px; margin-bottom: 0px; }
@@ -816,118 +806,123 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1
 
 #zoomToolOptionHolder input.zoom-option { background: none; }
 
-.SelectionToolPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -360px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; }
-
-.SelectionToolUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -390px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; }
-
-.SubselectionToolPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -420px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; }
-
-.SubselectionToolUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -450px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; }
-
-.RotateTool3DPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: 0px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; }
-
-.RotateTool3DUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -30px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; }
-
-.Translate3DPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -120px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; }
-
-.Translate3DUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -150px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; }
-
-.TagToolPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: 0px -54px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; }
-
-.TagToolUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -30px -54px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; }
-
-.PenToolPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -180px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; }
-
-.PenToolUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -210px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; }
-
-.TextToolPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -60px -54px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; }
-
-.TextToolUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -90px -54px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; }
-
-.ShapeContainerPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -120px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; }
-
-.ShapeContainerUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -150px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; }
-
-.OvalToolPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -120px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; }
-
-.OvalToolUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -150px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; }
-
-.RectangleToolPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -300px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; }
-
-.RectangleToolUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -330px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; }
-
-.LineToolPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -60px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; }
-
-.LineToolUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -90px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; }
-
-.PencilToolPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -240px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; }
-
-.PencilToolUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -270px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; }
-
-.BrushToolPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -240px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; }
-
-.BrushToolUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -270px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; }
-
-.FillToolPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -300px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; }
+#toolsPanelContent { width: 40px; }
 
-.FillToolUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -330px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; }
+.toolsList { width: 30px; margin: auto; }
 
-.EyedropperToolPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -420px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; }
+.toolsList hr { border: 0px; border-top: 1px solid #232323; border-bottom: 1px solid #3A3A3A; margin: 2px; }
 
-.EyedropperToolUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -450px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; }
+.toolbutton { width: 30px; height: 30px; background-position: center center; background-repeat: no-repeat; -webkit-border-radius: 4px; opacity: 0.6; margin-bottom: 2px; }
 
-.EraserToolPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -360px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; }
+.toolsList .toolbutton:hover, .toolsList .active { box-shadow: inset 0px 0px 8px #999; opacity: 1; }
 
-.EraserToolUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -390px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; }
+.toolsList .active { background-color: #555; }
 
-.RotateStageTool3DPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -60px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; }
+.SelectionTool { background-image: url("../images/tools/Tool-Selection.png"); }
 
-.RotateStageTool3DUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -90px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; }
+.SubselectionTool { background-image: url("../images/tools/Tool-Subselect.png"); }
 
-.TranslateStageTool3DPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -180px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; }
+.RotateTool3D { background-image: url("../images/tools/Tool-3DRotate.png"); }
 
-.TranslateStageTool3DUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -210px 0px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; }
+.Translate3D { background-image: url("../images/tools/Tool-3DTranslate.png"); }
 
-.PanToolPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: 0px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; }
+.TagTool { background-image: url("../images/tools/Tool-Tag.png"); }
 
-.PanToolUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -30px -27px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; }
+.PenTool { background-image: url("../images/tools/Tool-Pen.png"); }
 
-.ZoomToolPressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -180px -54px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; }
+.TextTool { background-image: url("../images/tools/Tool-Text.png"); }
 
-.ZoomToolUnpressed { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -210px -54px; background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; }
+.ShapeContainer { background-image: url("../images/tools/Tool-Rectangle.png"); }
 
-.InkBottleToolPressed { background-image: url("../images/tools/inkbottle_down.png"); background-repeat: no-repeat; height: 23px; width: 26px; opacity: 1; }
+.OvalTool { background-image: url("../images/tools/Tool-Oval.png"); }
 
-.InkBottleToolUnpressed { background-image: url("../images/tools/inkbottle_down.png"); background-repeat: no-repeat; height: 23px; width: 26px; opacity: 0.7; }
+.RectangleTool { background-image: url("../images/tools/Tool-Rectangle.png"); }
 
-.topAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -240px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+.LineTool { background-image: url("../images/tools/Tool-Stroke.png"); }
 
-.rightAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -270px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+.PencilTool { background-image: url("../images/tools/Tool-Pencil.png"); }
 
-.bottomAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -300px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+.BrushTool { background-image: url("../images/tools/Tool-PaintBrush.png"); }
 
-.verticalLeftUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -330px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+.FillTool { background-image: url("../images/tools/Tool-Fill.png"); }
 
-.verticalCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -360px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+.EyedropperTool { background-image: url("../images/tools/Tool-EyeDropper.png"); }
 
-.verticalRightUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -390px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+.EraserTool { background-image: url("../images/tools/Tool-Erase.png"); }
 
-.distRightUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: 0px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
+.RotateStageTool3D { background-image: url("../images/tools/Tool-3DRotateStage.png"); }
 
-.distLeftUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -420px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+.TranslateStageTool3D { background-image: url("../images/tools/Tool-3DTranslateStage.png"); }
 
-.distCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -60px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
+.PanTool { background-image: url("../images/tools/Tool-Pan.png"); }
 
-.distTopUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -30px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
+.ZoomTool { background-image: url("../images/tools/Tool-Zoom.png"); }
 
-.distBottomUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -90px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
+.InkBottleTool { background-image: url("../images/tools/Tool-FillColor.png"); }
 
-.distVCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -450px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+.toolsList .colortoolbar button { width: 27px; height: 27px; background: black; border: 1px solid #000; padding: 0; margin: 0px; }
 
-.bucketToolUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -330px 0px; background-repeat: no-repeat; height: 23px; width: 26px; }
+.toolsList .colortoolbar div { width: 27px; height: 27px; margin: 0; }
 
-.pencilToolUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -270px -27px; background-repeat: no-repeat; height: 23px; width: 26px; }
+.toolsList .colortoolbar div.cpe_colortoolbar_container { margin: 0; }
 
+/*.InkBottleToolPressed {*/
+/*background-image: url("../images/tools/inkbottle_down.png");*/
+/*background-repeat: no-repeat;*/
+/*height: 23px;*/
+/*width: 26px;*/
+/*opacity: 1;*/
+/*}*/
+/*.InkBottleToolUnpressed {*/
+/*background-image: url("../images/tools/inkbottle_down.png");*/
+/*background-repeat: no-repeat;*/
+/*height: 23px;*/
+/*width: 26px;*/
+/*opacity: 0.7;*/
+/*}*/
+/*//  Selection Tool Options  */
+/*.topAlignUp {*/
+/*@include background-pos(8,2,26px,23px);*/
+/*}*/
+/*.rightAlignUp {*/
+/*@include background-pos(9,2,26px,23px);*/
+/*}*/
+/*.bottomAlignUp {*/
+/*@include background-pos(10,2,26px,23px);*/
+/*}*/
+/*.verticalLeftUp {*/
+/*@include background-pos(11,2,26px,23px);*/
+/*}*/
+/*.verticalCenterUp {*/
+/*@include background-pos(12,2,26px,23px);*/
+/*}*/
+/*.verticalRightUp {*/
+/*@include background-pos(13,2,26px,23px);*/
+/*}*/