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 From 92873714dd6ffb259e6c5a27da2ade773d7b00f9 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Wed, 15 Feb 2012 15:04:37 -0800 Subject: New Icons: Last set had imperfections Signed-off-by: Armen Kesablyan --- scss/imports/scss/_MontageOverrides.scss | 4 ++++ scss/imports/scss/_toolbar.scss | 8 ++++++++ 2 files changed, 12 insertions(+) (limited to 'scss/imports') diff --git a/scss/imports/scss/_MontageOverrides.scss b/scss/imports/scss/_MontageOverrides.scss index 65b9ede0..6e728863 100644 --- a/scss/imports/scss/_MontageOverrides.scss +++ b/scss/imports/scss/_MontageOverrides.scss @@ -16,4 +16,8 @@ } .montage-popup-container { background: none; +} + +.montage-invisible { + display: none; } \ No newline at end of file diff --git a/scss/imports/scss/_toolbar.scss b/scss/imports/scss/_toolbar.scss index 44178b24..4d460bad 100644 --- a/scss/imports/scss/_toolbar.scss +++ b/scss/imports/scss/_toolbar.scss @@ -131,6 +131,11 @@ background-image:url("../images/tools/Tool-FillColor.png"); } +.toolsList .colortoolbar { + padding-left: 1px; + padding-top:4px; +} + .toolsList .colortoolbar button { width: 27px; @@ -146,6 +151,7 @@ width: 27px; height: 27px; margin: 0; + margin-top:3px; } .toolsList .colortoolbar div.cpe_colortoolbar_container @@ -153,6 +159,8 @@ margin: 0; } + + /*.InkBottleToolPressed {*/ /*background-image: url("../images/tools/inkbottle_down.png");*/ /*background-repeat: no-repeat;*/ -- cgit v1.2.3 From ed18ea232174cceaa95b57315a4f993ea4d6c6ec Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Thu, 16 Feb 2012 10:33:18 -0800 Subject: Tool Icons Signed-off-by: Armen Kesablyan --- scss/imports/scss/_toolbar.scss | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) (limited to 'scss/imports') 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 { -- cgit v1.2.3 From 7e08bdbd9db21880783b56a31b480ba33f3b5327 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Thu, 16 Feb 2012 11:33:18 -0800 Subject: Tool Button Fixes Signed-off-by: Armen Kesablyan --- scss/imports/scss/_Tools.scss | 9 +++++---- scss/imports/scss/_toolbar.scss | 6 +++--- 2 files changed, 8 insertions(+), 7 deletions(-) (limited to 'scss/imports') diff --git a/scss/imports/scss/_Tools.scss b/scss/imports/scss/_Tools.scss index bf425666..19ede70a 100644 --- a/scss/imports/scss/_Tools.scss +++ b/scss/imports/scss/_Tools.scss @@ -12,14 +12,15 @@ // -// Made changes to toolButton +// Made changes to toolButton } -.subToolButton { +.subToolHolderPanel .toolbutton { float:left; + -webkit-transform: scale(0.6); } -#topPanelContainer .subToolButton { - +.subToolHolderPanel .toolbutton:hover, .subToolHolderPanel .toolbutton.active { + -webkit-transform: scale(0.75); } .subOption{ diff --git a/scss/imports/scss/_toolbar.scss b/scss/imports/scss/_toolbar.scss index 429fe427..317fde23 100644 --- a/scss/imports/scss/_toolbar.scss +++ b/scss/imports/scss/_toolbar.scss @@ -40,18 +40,18 @@ -webkit-transition: 0.15s all cubic-bezier(.44,.19,0,.99); } -.toolsList .toolbutton:hover, .toolsList .active { +.toolbutton:hover, .toolbutton.active { box-shadow: 0px 0px 2px 2px #999; -webkit-transform: scale(1); opacity: 1; } -.toolsList .toolbutton:active { +.toolbutton:active { background-color: #8c8c8c; } -.toolsList .active { +.toolbutton.active { box-shadow: inset 0px 0px 2px 2px #555; background-color:#363636; } -- cgit v1.2.3 From 695bc5082f48dddf66ce31480a4faefc067b38bd Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Wed, 22 Feb 2012 16:23:26 -0800 Subject: Added Shape Panel Icons Signed-off-by: Armen Kesablyan --- scss/imports/scss/_toolbar.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'scss/imports') diff --git a/scss/imports/scss/_toolbar.scss b/scss/imports/scss/_toolbar.scss index 317fde23..00d8b5f0 100644 --- a/scss/imports/scss/_toolbar.scss +++ b/scss/imports/scss/_toolbar.scss @@ -93,11 +93,11 @@ } .RectangleTool { - background-image:url("../images/tools/Tool-Rectangle.png"); + background-image:url("../images/tools/Tool-Square.png"); } .LineTool { - background-image:url("../images/tools/Tool-Stroke.png"); + background-image:url("../images/tools/Tool-Line.png"); } .PencilTool { -- cgit v1.2.3