From bb4da39a73cbd6fbe83f3b7c9ed5ae60fe58dd6b Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Wed, 15 Feb 2012 14:23:19 -0800 Subject: Tool Icons : New layout Signed-off-by: Armen Kesablyan --- scss/imports/scss/_Tools.scss | 24 --- scss/imports/scss/_toolbar.scss | 328 +++++++++++++++++----------------------- 2 files changed, 139 insertions(+), 213 deletions(-) (limited to 'scss/imports') 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"); } -.FillToolPressed { - @include background-pos(10,0,26px,23px); - @include opacity(1.0); +.PanTool { + background-image:url("../images/tools/Tool-Pan.png"); } -.FillToolUnpressed { - @include background-pos(11,0,26px,23px); - @include opacity(0.7); +.ZoomTool { + background-image:url("../images/tools/Tool-Zoom.png"); } -.EyedropperToolPressed { - @include background-pos(14,0,26px,23px); - @include opacity(1.0); +.InkBottleTool { + background-image:url("../images/tools/Tool-FillColor.png"); } -.EyedropperToolUnpressed { - @include background-pos(15,0,26px,23px); - @include opacity(0.7); +.toolsList .colortoolbar button +{ + width: 27px; + height: 27px; + background: black; + border: 1px solid #000; + padding: 0; + margin: 0px; } -.EraserToolPressed { - @include background-pos(12,0,26px,23px); - @include opacity(1.0); -} -.EraserToolUnpressed { - @include background-pos(13,0,26px,23px); - @include opacity(0.7); -} -.RotateStageTool3DPressed { - @include background-pos(2,0,26px,23px); - @include opacity(1.0); -} -.RotateStageTool3DUnpressed { - @include background-pos(3,0,26px,23px); - @include opacity(0.7); -} -.TranslateStageTool3DPressed { - @include background-pos(6,0,26px,23px); - @include opacity(1.0); -} -.TranslateStageTool3DUnpressed { - @include background-pos(7,0,26px,23px); - @include opacity(0.7); -} -.PanToolPressed { - @include background-pos(0,1,26px,23px); - @include opacity(1.0); -} -.PanToolUnpressed { - @include background-pos(1,1,26px,23px); - @include opacity(0.7); -} -.ZoomToolPressed { - @include background-pos(6,2,26px,23px); - @include opacity(1.0); +.toolsList .colortoolbar div +{ + width: 27px; + height: 27px; + margin: 0; } -.ZoomToolUnpressed { - @include background-pos(7,2,26px,23px); - @include opacity(0.7); +.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; -} +/*.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; -} +/*.InkBottleToolUnpressed {*/ + /*background-image: url("../images/tools/inkbottle_down.png");*/ + /*background-repeat: no-repeat;*/ + /*height: 23px;*/ + /*width: 26px;*/ + /*opacity: 0.7;*/ +/*}*/ -// Selection Tool Options -.topAlignUp { +/*// Selection Tool Options */ +/*.topAlignUp {*/ - @include background-pos(8,2,26px,23px); -} + /*@include background-pos(8,2,26px,23px);*/ +/*}*/ -.rightAlignUp { +/*.rightAlignUp {*/ - @include background-pos(9,2,26px,23px); -} + /*@include background-pos(9,2,26px,23px);*/ +/*}*/ -.bottomAlignUp { +/*.bottomAlignUp {*/ - @include background-pos(10,2,26px,23px); -} + /*@include background-pos(10,2,26px,23px);*/ +/*}*/ -.verticalLeftUp { +/*.verticalLeftUp {*/ - @include background-pos(11,2,26px,23px); -} + /*@include background-pos(11,2,26px,23px);*/ +/*}*/ -.verticalCenterUp { +/*.verticalCenterUp {*/ - @include background-pos(12,2,26px,23px); -} + /*@include background-pos(12,2,26px,23px);*/ +/*}*/ -.verticalRightUp { +/*.verticalRightUp {*/ - @include background-pos(13,2,26px,23px); -} + /*@include background-pos(13,2,26px,23px);*/ +/*}*/ -.distRightUp { +/*.distRightUp {*/ - @include background-pos(0,3,26px,23px); -} + /*@include background-pos(0,3,26px,23px);*/ +/*}*/ -.distLeftUp { +/*.distLeftUp {*/ - @include background-pos(14,2,26px,23px); -} + /*@include background-pos(14,2,26px,23px);*/ +/*}*/ -.distCenterUp { +/*.distCenterUp {*/ - @include background-pos(2,3,26px,23px); -} + /*@include background-pos(2,3,26px,23px);*/ +/*}*/ -.distTopUp { +/*.distTopUp {*/ - @include background-pos(1,3,26px,23px); -} + /*@include background-pos(1,3,26px,23px);*/ +/*}*/ -.distBottomUp { +/*.distBottomUp {*/ - @include background-pos(3,3,26px,23px); -} + /*@include background-pos(3,3,26px,23px);*/ +/*}*/ -.distVCenterUp { +/*.distVCenterUp {*/ - @include background-pos(15,2,26px,23px); -} + /*@include background-pos(15,2,26px,23px);*/ +/*}*/ -.bucketToolUp { - @include background-pos(11,0,26px,23px); -} +/*.bucketToolUp {*/ + /*@include background-pos(11,0,26px,23px);*/ +/*}*/ -.pencilToolUp { - @include background-pos(9,1,26px,23px); -} +/*.pencilToolUp {*/ + /*@include background-pos(9,1,26px,23px);*/ +/*}*/ -- cgit v1.2.3