From ec4c5864dc110906f48277e244412a0f81a3f35f Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 17 Nov 2015 12:35:44 -0800 Subject: [PATCH] [Frontend] Style tweaks for edit mode open #199 Added bg color in edit area when edit mode is active; --- .../res/sass/user-environ/_layout.scss | 1 + .../espresso/res/css/theme-espresso.css | 45 ++++++++++--------- .../themes/espresso/res/sass/_constants.scss | 1 + .../themes/snow/res/css/theme-snow.css | 45 ++++++++++--------- .../themes/snow/res/sass/_constants.scss | 1 + 5 files changed, 49 insertions(+), 44 deletions(-) diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss index b008b51255..67925f3e44 100644 --- a/platform/commonUI/general/res/sass/user-environ/_layout.scss +++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss @@ -237,6 +237,7 @@ &.active { @include pulseBorder($colorKey, 150ms, 8, 0.5s); @include border-radius($controlCr); + background-color: $colorEditAreaBg; border-color: $colorKey; border-width: 2px; border-style: dotted; diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css index ea676a1cbb..a785777449 100644 --- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css +++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css @@ -4718,6 +4718,7 @@ span.req { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; + background-color: rgba(31, 79, 162, 0.1); border-color: #0099cc; border-width: 2px; border-style: dotted; } @@ -4736,7 +4737,7 @@ span.req { border-color: transparent; } 100% { border-color: #0099cc; } } - /* line 243, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 244, ../../../../general/res/sass/user-environ/_layout.scss */ .l-object-wrapper.active .l-object-wrapper-inner { overflow: hidden; position: absolute; @@ -4747,7 +4748,7 @@ span.req { width: auto; height: auto; } -/* line 249, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 250, ../../../../general/res/sass/user-environ/_layout.scss */ .l-object-wrapper-inner { -moz-transition-property: height, width, top, right, bottom, left, opacity; -o-transition-property: height, width, top, right, bottom, left, opacity; @@ -4762,7 +4763,7 @@ span.req { -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } -/* line 253, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 254, ../../../../general/res/sass/user-environ/_layout.scss */ .l-edit-controls { -moz-transition-property: height, width, top, right, bottom, left, opacity; -o-transition-property: height, width, top, right, bottom, left, opacity; @@ -4779,14 +4780,14 @@ span.req { height: 0; opacity: 0; overflow: hidden; } - /* line 258, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 259, ../../../../general/res/sass/user-environ/_layout.scss */ .l-edit-controls.active { border-bottom: 1px solid rgba(153, 153, 153, 0.1); height: 30px; line-height: 25px; opacity: 1; } -/* line 266, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 267, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .s-btn, .object-browse-bar .s-menu-btn, .top-bar .buttons-main .s-btn, .top-bar .buttons-main .s-menu-btn, @@ -4798,13 +4799,13 @@ span.req { line-height: 25px; vertical-align: top; } -/* line 279, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 280, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .view-switcher, .top-bar .view-switcher { margin-right: 20px; } /***************************************************** OBJECT BROWSE BAR */ -/* line 285, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 286, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -4812,20 +4813,20 @@ span.req { height: 24px; line-height: 24px; white-space: nowrap; } - /* line 292, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 293, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .left { padding-right: 10px; } - /* line 294, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 295, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .left .l-back { margin-right: 10px; } -/* line 303, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 304, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-tree-hidden .tree-holder, .pane-tree-hidden .splitter-treeview, .pane-tree-hidden .holder-treeview-elements { opacity: 0; } -/* line 312, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 313, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-tree-showing .tree-holder, .pane-tree-showing .splitter-treeview { -moz-transition-property: opacity; @@ -4845,7 +4846,7 @@ span.req { -webkit-transition-delay: 250ms; transition-delay: 250ms; opacity: 1; } -/* line 318, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 319, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-tree-showing .holder-treeview-elements { -moz-transition-property: opacity; -o-transition-property: opacity; @@ -4864,7 +4865,7 @@ span.req { -webkit-transition-delay: 200ms; transition-delay: 200ms; } -/* line 325, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 326, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-inspect-showing .l-object-and-inspector .l-inspect, .pane-inspect-showing .l-object-and-inspector .splitter-inspect { -moz-transition-property: opacity; @@ -4885,41 +4886,41 @@ span.req { transition-delay: 250ms; opacity: 1; } -/* line 335, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 336, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-inspect-hidden .l-object-and-inspector .l-inspect, .pane-inspect-hidden .l-object-and-inspector .splitter-inspect { opacity: 0; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 343, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 344, ../../../../general/res/sass/user-environ/_layout.scss */ .holder-all { min-width: 600px; } - /* line 348, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 349, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout .split-pane-component.pane.treeview.left { min-width: 150px; max-width: 35%; width: 25%; } - /* line 353, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 354, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout .split-pane-component.pane.t-inspect.right { min-width: 200px; max-width: 35%; width: 20%; z-index: 3; } - /* line 361, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 362, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.treeview.left .tree-holder { padding-right: 5px; } - /* line 365, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 366, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-tree-hidden .pane.right.primary-pane { left: 22px !important; } - /* line 368, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 369, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-inspect-hidden .l-object-and-inspector .pane.left { right: 22px !important; } - /* line 370, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 371, ../../../../general/res/sass/user-environ/_layout.scss */ .pane:not(.resizing) { -moz-transition-property: width, left, right; -o-transition-property: width, left, right; @@ -4938,7 +4939,7 @@ span.req { -webkit-transition-delay: 0; transition-delay: 0; } - /* line 373, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 374, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.primary-pane .object-browse-bar { min-width: 200px; } } /***************************************************************************** diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss index 60e0a2d1bf..ce9edd4d22 100644 --- a/platform/commonUI/themes/espresso/res/sass/_constants.scss +++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss @@ -6,6 +6,7 @@ $colorFooterBg: #000; $colorKey: #0099cc; $colorKeySelectedBg: #005177; $colorKeyFg: #fff; +$colorEditAreaBg: rgba(#1f4fa2, 0.1); $colorInteriorBorder: rgba($colorBodyFg, 0.1); $colorA: #ccc; $colorAHov: #fff; diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css index 178a070c9d..f8c7879ef8 100644 --- a/platform/commonUI/themes/snow/res/css/theme-snow.css +++ b/platform/commonUI/themes/snow/res/css/theme-snow.css @@ -4640,6 +4640,7 @@ span.req { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; + background-color: rgba(0, 153, 204, 0.075); border-color: #0099cc; border-width: 2px; border-style: dotted; } @@ -4658,7 +4659,7 @@ span.req { border-color: transparent; } 100% { border-color: #0099cc; } } - /* line 243, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 244, ../../../../general/res/sass/user-environ/_layout.scss */ .l-object-wrapper.active .l-object-wrapper-inner { overflow: hidden; position: absolute; @@ -4669,7 +4670,7 @@ span.req { width: auto; height: auto; } -/* line 249, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 250, ../../../../general/res/sass/user-environ/_layout.scss */ .l-object-wrapper-inner { -moz-transition-property: height, width, top, right, bottom, left, opacity; -o-transition-property: height, width, top, right, bottom, left, opacity; @@ -4684,7 +4685,7 @@ span.req { -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } -/* line 253, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 254, ../../../../general/res/sass/user-environ/_layout.scss */ .l-edit-controls { -moz-transition-property: height, width, top, right, bottom, left, opacity; -o-transition-property: height, width, top, right, bottom, left, opacity; @@ -4701,14 +4702,14 @@ span.req { height: 0; opacity: 0; overflow: hidden; } - /* line 258, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 259, ../../../../general/res/sass/user-environ/_layout.scss */ .l-edit-controls.active { border-bottom: 1px solid rgba(102, 102, 102, 0.2); height: 30px; line-height: 25px; opacity: 1; } -/* line 266, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 267, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .s-btn, .object-browse-bar .s-menu-btn, .top-bar .buttons-main .s-btn, .top-bar .buttons-main .s-menu-btn, @@ -4720,13 +4721,13 @@ span.req { line-height: 25px; vertical-align: top; } -/* line 279, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 280, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .view-switcher, .top-bar .view-switcher { margin-right: 20px; } /***************************************************** OBJECT BROWSE BAR */ -/* line 285, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 286, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -4734,20 +4735,20 @@ span.req { height: 24px; line-height: 24px; white-space: nowrap; } - /* line 292, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 293, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .left { padding-right: 10px; } - /* line 294, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 295, ../../../../general/res/sass/user-environ/_layout.scss */ .object-browse-bar .left .l-back { margin-right: 10px; } -/* line 303, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 304, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-tree-hidden .tree-holder, .pane-tree-hidden .splitter-treeview, .pane-tree-hidden .holder-treeview-elements { opacity: 0; } -/* line 312, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 313, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-tree-showing .tree-holder, .pane-tree-showing .splitter-treeview { -moz-transition-property: opacity; @@ -4767,7 +4768,7 @@ span.req { -webkit-transition-delay: 250ms; transition-delay: 250ms; opacity: 1; } -/* line 318, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 319, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-tree-showing .holder-treeview-elements { -moz-transition-property: opacity; -o-transition-property: opacity; @@ -4786,7 +4787,7 @@ span.req { -webkit-transition-delay: 200ms; transition-delay: 200ms; } -/* line 325, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 326, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-inspect-showing .l-object-and-inspector .l-inspect, .pane-inspect-showing .l-object-and-inspector .splitter-inspect { -moz-transition-property: opacity; @@ -4807,41 +4808,41 @@ span.req { transition-delay: 250ms; opacity: 1; } -/* line 335, ../../../../general/res/sass/user-environ/_layout.scss */ +/* line 336, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-inspect-hidden .l-object-and-inspector .l-inspect, .pane-inspect-hidden .l-object-and-inspector .splitter-inspect { opacity: 0; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 343, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 344, ../../../../general/res/sass/user-environ/_layout.scss */ .holder-all { min-width: 600px; } - /* line 348, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 349, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout .split-pane-component.pane.treeview.left { min-width: 150px; max-width: 35%; width: 25%; } - /* line 353, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 354, ../../../../general/res/sass/user-environ/_layout.scss */ .split-layout .split-pane-component.pane.t-inspect.right { min-width: 200px; max-width: 35%; width: 20%; z-index: 3; } - /* line 361, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 362, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.treeview.left .tree-holder { padding-right: 5px; } - /* line 365, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 366, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-tree-hidden .pane.right.primary-pane { left: 22px !important; } - /* line 368, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 369, ../../../../general/res/sass/user-environ/_layout.scss */ .pane-inspect-hidden .l-object-and-inspector .pane.left { right: 22px !important; } - /* line 370, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 371, ../../../../general/res/sass/user-environ/_layout.scss */ .pane:not(.resizing) { -moz-transition-property: width, left, right; -o-transition-property: width, left, right; @@ -4860,7 +4861,7 @@ span.req { -webkit-transition-delay: 0; transition-delay: 0; } - /* line 373, ../../../../general/res/sass/user-environ/_layout.scss */ + /* line 374, ../../../../general/res/sass/user-environ/_layout.scss */ .pane.primary-pane .object-browse-bar { min-width: 200px; } } /***************************************************************************** diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss index e69f60c17b..654fde05a6 100644 --- a/platform/commonUI/themes/snow/res/sass/_constants.scss +++ b/platform/commonUI/themes/snow/res/sass/_constants.scss @@ -6,6 +6,7 @@ $colorFooterBg: #000; $colorKey: #0099cc; $colorKeySelectedBg: $colorKey; $colorKeyFg: #fff; +$colorEditAreaBg: rgba($colorKey, 0.075); $colorInteriorBorder: rgba($colorBodyFg, 0.2); $colorA: #999; $colorAHov: $colorKey;