mirror of
https://github.com/nasa/openmct.git
synced 2025-01-19 03:06:54 +00:00
[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;
This commit is contained in:
Charles Hacskaylo
parent
6aadf921e1
commit
ac81968f93
@ -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 {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user