ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-19 03:06:54 +00:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

[Frontend] CSS in Fixed Position view Edit mode

Browse Source 
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;
This commit is contained in:
Charles Hacskaylo 2015-05-01 10:43:15 -07:00
parent 6aadf921e1
commit ac81968f93
2 changed files with 46 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
platform/commonUI/general/res/css/theme-espresso.css
View File

@ -411,33 +411,33 @@ span {
left: 0; left: 0;
width: auto; width: auto;
height: auto; } height: auto; }
/* line 8, ../sass/_fixed-position.scss */ /* line 12, ../sass/_fixed-position.scss */
.t-fixed-position.l-fixed-position .l-grid-holder { .t-fixed-position.l-fixed-position .l-grid-holder {
position: relative; position: relative;
height: 100%; height: 100%;
width: 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 { .t-fixed-position.l-fixed-position .l-grid-holder .l-grid {
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
pointer-events: none; pointer-events: none;
z-index: 0; } z-index: 0; }
/* line 21, ../sass/_fixed-position.scss */ /* line 27, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item { .t-fixed-position .l-fixed-position-item {
position: absolute; position: absolute;
border: 1px solid transparent; } 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 { .t-fixed-position .l-fixed-position-item.s-selected {
-webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px; -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
-moz-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; box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
border-color: #0099cc; border-color: #0099cc;
cursor: move; } cursor: move; }
/* line 30, ../sass/_fixed-position.scss */ /* line 36, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item.s-not-selected { .t-fixed-position .l-fixed-position-item.s-not-selected {
opacity: 0.8; } 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-box,
.t-fixed-position .l-fixed-position-item .l-fixed-position-image, .t-fixed-position .l-fixed-position-item .l-fixed-position-image,
.t-fixed-position .l-fixed-position-item .l-fixed-position-text { .t-fixed-position .l-fixed-position-item .l-fixed-position-text {
@ -446,20 +446,20 @@ span {
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
width: 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 { .t-fixed-position .l-fixed-position-item .l-fixed-position-image {
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; } 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 { .t-fixed-position .l-fixed-position-item .l-fixed-position-text {
text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
border: 1px solid transparent; border: 1px solid transparent;
font-size: 0.8rem; } 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 { .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-static-text {
padding: 3px; } 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 { .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem {
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
@ -473,43 +473,46 @@ span {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
width: 50%; } 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 { .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-title {
right: auto; right: auto;
left: 3px; } 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 { .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-value {
right: 3px; right: 3px;
left: auto; left: auto;
text-align: right; } 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 { .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-value.telem-only {
left: 3px; left: 3px;
width: auto; } width: auto; }
/* line 84, ../sass/_fixed-position.scss */ /* line 91, ../sass/_fixed-position.scss */
.t-fixed-position .l-fixed-position-item-handle { .t-fixed-position .l-fixed-position-item-handle {
background: rgba(0, 153, 204, 0.5); background: rgba(0, 153, 204, 0.5);
cursor: crosshair; cursor: crosshair;
border: 1px solid #0099cc; border: 1px solid #0099cc;
position: absolute; } 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 { .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: -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: -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: -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-image: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-repeat: repeat-x; } 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 { .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: -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: -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: -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-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 100%);
background-repeat: repeat-y; } background-repeat: repeat-y; }
/* line 110, ../sass/_fixed-position.scss */ /* line 117, ../sass/_fixed-position.scss */
.edit-mode .t-fixed-position .l-fixed-position-item:not(.s-selected):hover { .edit-mode .t-fixed-position .l-fixed-position-item:not(.s-selected) {
border: 1px dotted rgba(0, 153, 204, 0.5); } 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 */ /* line 5, ../sass/_about.scss */
.l-about.abs, .btn-menu span.l-about.l-click-area { .l-about.abs, .btn-menu span.l-about.l-click-area {

38
platform/commonUI/general/res/sass/_fixed-position.scss
View File

@ -1,17 +1,23 @@
.t-fixed-position { .t-fixed-position {
&.l-fixed-position { &.l-fixed-position {
// @include test(red); // @include test(red);
position: absolute; position: absolute;
top: 0; right: 0; bottom: 0; left: 0; top: 0;
width: auto; height: auto; right: 0;
bottom: 0;
left: 0;
width: auto;
height: auto;
.l-grid-holder { .l-grid-holder {
position: relative; position: relative;
height: 100%; width: 100%; height: 100%;
width: 100%;
.l-grid { .l-grid {
// @include test(orange); // @include test(orange);
position: absolute; position: absolute;
height: 100%; width: 100%; height: 100%;
width: 100%;
pointer-events: none; pointer-events: none;
z-index: 0; z-index: 0;
} }
@ -35,12 +41,13 @@
.l-fixed-position-image, .l-fixed-position-image,
.l-fixed-position-text { .l-fixed-position-text {
@include box-sizing(border-box); @include box-sizing(border-box);
height: 100%; width: 100%; height: 100%;
width: 100%;
} }
.l-fixed-position-box { .l-fixed-position-box {
} }
.l-fixed-position-image { .l-fixed-position-image {
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -49,11 +56,11 @@
.l-fixed-position-text { .l-fixed-position-text {
@include txtShdwSubtle(); @include txtShdwSubtle();
border:1px solid transparent; border: 1px solid transparent;
font-size: 0.8rem; font-size: 0.8rem;
$p: $interiorMarginSm; $p: $interiorMarginSm;
&.l-static-text { &.l-static-text {
// overflow: auto; // overflow: auto;
padding: $p; padding: $p;
} }
&.l-telemetry { &.l-telemetry {
@ -66,12 +73,12 @@
left: $p; left: $p;
} }
&.l-value { &.l-value {
// @include test(blue); // @include test(blue);
right: $p; right: $p;
left: auto; left: auto;
text-align: right; text-align: right;
&.telem-only { &.telem-only {
// @include test(red); // @include test(red);
left: $p; left: $p;
width: auto; width: auto;
} }
@ -107,8 +114,11 @@
} }
.l-fixed-position-item { .l-fixed-position-item {
&:not(.s-selected):hover { &:not(.s-selected) {
border: 1px dotted rgba($colorKey, 0.5); border: 1px dotted rgba($colorKey, 0.75);
&:hover {
border: 1px dotted rgba($colorKey, 1.0);
}
} }
} }
} }