From ac81968f93fbe6a39b07d5f915342d5d19be0b6f Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Fri, 1 May 2015 10:43:15 -0700 Subject: [PATCH] [Frontend] CSS in Fixed Position view Edit mode WTD-1163 WTD-1114 Added CSS to give a border to all elements in Fixed Position view when in Edit mode. Only applied to outer element, does not affect object border styling; --- .../general/res/css/theme-espresso.css | 41 ++++++++++--------- .../general/res/sass/_fixed-position.scss | 38 ++++++++++------- 2 files changed, 46 insertions(+), 33 deletions(-) diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index a6e9951bb9..be65449fd4 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -411,33 +411,33 @@ span { left: 0; width: auto; height: auto; } - /* line 8, ../sass/_fixed-position.scss */ + /* line 12, ../sass/_fixed-position.scss */ .t-fixed-position.l-fixed-position .l-grid-holder { position: relative; height: 100%; width: 100%; } - /* line 11, ../sass/_fixed-position.scss */ + /* line 16, ../sass/_fixed-position.scss */ .t-fixed-position.l-fixed-position .l-grid-holder .l-grid { position: absolute; height: 100%; width: 100%; pointer-events: none; z-index: 0; } -/* line 21, ../sass/_fixed-position.scss */ +/* line 27, ../sass/_fixed-position.scss */ .t-fixed-position .l-fixed-position-item { position: absolute; border: 1px solid transparent; } - /* line 25, ../sass/_fixed-position.scss */ + /* line 31, ../sass/_fixed-position.scss */ .t-fixed-position .l-fixed-position-item.s-selected { -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px; -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px; box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px; border-color: #0099cc; cursor: move; } - /* line 30, ../sass/_fixed-position.scss */ + /* line 36, ../sass/_fixed-position.scss */ .t-fixed-position .l-fixed-position-item.s-not-selected { opacity: 0.8; } - /* line 36, ../sass/_fixed-position.scss */ + /* line 42, ../sass/_fixed-position.scss */ .t-fixed-position .l-fixed-position-item .l-fixed-position-box, .t-fixed-position .l-fixed-position-item .l-fixed-position-image, .t-fixed-position .l-fixed-position-item .l-fixed-position-text { @@ -446,20 +446,20 @@ span { box-sizing: border-box; height: 100%; width: 100%; } - /* line 44, ../sass/_fixed-position.scss */ + /* line 51, ../sass/_fixed-position.scss */ .t-fixed-position .l-fixed-position-item .l-fixed-position-image { background-size: cover; background-repeat: no-repeat; background-position: center; } - /* line 50, ../sass/_fixed-position.scss */ + /* line 57, ../sass/_fixed-position.scss */ .t-fixed-position .l-fixed-position-item .l-fixed-position-text { text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; border: 1px solid transparent; font-size: 0.8rem; } - /* line 55, ../sass/_fixed-position.scss */ + /* line 62, ../sass/_fixed-position.scss */ .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-static-text { padding: 3px; } - /* line 60, ../sass/_fixed-position.scss */ + /* line 67, ../sass/_fixed-position.scss */ .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem { overflow: hidden; position: absolute; @@ -473,43 +473,46 @@ span { -moz-box-sizing: border-box; box-sizing: border-box; width: 50%; } - /* line 64, ../sass/_fixed-position.scss */ + /* line 71, ../sass/_fixed-position.scss */ .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-title { right: auto; left: 3px; } - /* line 68, ../sass/_fixed-position.scss */ + /* line 75, ../sass/_fixed-position.scss */ .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-value { right: 3px; left: auto; text-align: right; } - /* line 73, ../sass/_fixed-position.scss */ + /* line 80, ../sass/_fixed-position.scss */ .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-value.telem-only { left: 3px; width: auto; } -/* line 84, ../sass/_fixed-position.scss */ +/* line 91, ../sass/_fixed-position.scss */ .t-fixed-position .l-fixed-position-item-handle { background: rgba(0, 153, 204, 0.5); cursor: crosshair; border: 1px solid #0099cc; position: absolute; } -/* line 98, ../sass/_fixed-position.scss */ +/* line 105, ../sass/_fixed-position.scss */ .edit-mode .t-fixed-position.l-fixed-position .l-grid-holder .l-grid.l-grid-x { background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%); background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%); background-image: -o-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%); background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%); background-repeat: repeat-x; } -/* line 102, ../sass/_fixed-position.scss */ +/* line 109, ../sass/_fixed-position.scss */ .edit-mode .t-fixed-position.l-fixed-position .l-grid-holder .l-grid.l-grid-y { background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%); background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%); background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%); background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%); background-repeat: repeat-y; } -/* line 110, ../sass/_fixed-position.scss */ -.edit-mode .t-fixed-position .l-fixed-position-item:not(.s-selected):hover { - border: 1px dotted rgba(0, 153, 204, 0.5); } +/* line 117, ../sass/_fixed-position.scss */ +.edit-mode .t-fixed-position .l-fixed-position-item:not(.s-selected) { + border: 1px dotted rgba(0, 153, 204, 0.75); } + /* line 119, ../sass/_fixed-position.scss */ + .edit-mode .t-fixed-position .l-fixed-position-item:not(.s-selected):hover { + border: 1px dotted #0099cc; } /* line 5, ../sass/_about.scss */ .l-about.abs, .btn-menu span.l-about.l-click-area { diff --git a/platform/commonUI/general/res/sass/_fixed-position.scss b/platform/commonUI/general/res/sass/_fixed-position.scss index 577850ed61..ab81688b49 100644 --- a/platform/commonUI/general/res/sass/_fixed-position.scss +++ b/platform/commonUI/general/res/sass/_fixed-position.scss @@ -1,17 +1,23 @@ .t-fixed-position { &.l-fixed-position { -// @include test(red); + // @include test(red); position: absolute; - top: 0; right: 0; bottom: 0; left: 0; - width: auto; height: auto; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: auto; + height: auto; .l-grid-holder { position: relative; - height: 100%; width: 100%; + height: 100%; + width: 100%; .l-grid { -// @include test(orange); + // @include test(orange); position: absolute; - height: 100%; width: 100%; + height: 100%; + width: 100%; pointer-events: none; z-index: 0; } @@ -35,12 +41,13 @@ .l-fixed-position-image, .l-fixed-position-text { @include box-sizing(border-box); - height: 100%; width: 100%; + height: 100%; + width: 100%; } .l-fixed-position-box { } - + .l-fixed-position-image { background-size: cover; background-repeat: no-repeat; @@ -49,11 +56,11 @@ .l-fixed-position-text { @include txtShdwSubtle(); - border:1px solid transparent; + border: 1px solid transparent; font-size: 0.8rem; $p: $interiorMarginSm; &.l-static-text { -// overflow: auto; + // overflow: auto; padding: $p; } &.l-telemetry { @@ -66,12 +73,12 @@ left: $p; } &.l-value { -// @include test(blue); + // @include test(blue); right: $p; left: auto; text-align: right; &.telem-only { -// @include test(red); + // @include test(red); left: $p; width: auto; } @@ -107,8 +114,11 @@ } .l-fixed-position-item { - &:not(.s-selected):hover { - border: 1px dotted rgba($colorKey, 0.5); + &:not(.s-selected) { + border: 1px dotted rgba($colorKey, 0.75); + &:hover { + border: 1px dotted rgba($colorKey, 1.0); + } } } } \ No newline at end of file