ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-21 03:55:31 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Frontend] Style tweaks for edit mode

Browse Source 
open #199
Added bg color in edit area when edit mode
is active;
This commit is contained in:
Charles Hacskaylo 2015-11-17 12:35:44 -08:00
parent 3ff275c853
commit ec4c5864dc
5 changed files with 49 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
platform/commonUI/general/res/sass/user-environ/_layout.scss
View File

@ -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;

45
platform/commonUI/themes/espresso/res/css/theme-espresso.css
View File

@ -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; } }
/*****************************************************************************

1
platform/commonUI/themes/espresso/res/sass/_constants.scss
View File

@ -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;

45
platform/commonUI/themes/snow/res/css/theme-snow.css
View File

@ -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; } }
/*****************************************************************************

1
platform/commonUI/themes/snow/res/sass/_constants.scss
View File

@ -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;