.t-fixed-position { &.l-fixed-position { // @include test(red); position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; .l-grid-holder { position: relative; height: 100%; width: 100%; .l-grid { // @include test(orange); position: absolute; height: 100%; width: 100%; pointer-events: none; z-index: 0; } } } .l-fixed-position-item { position: absolute; border: 1px solid transparent; &.s-selected { @include boxShdwLarge(); border-color: $colorKey; cursor: move; } &.s-not-selected { opacity: 0.8; } .l-fixed-position-box, .l-fixed-position-image, .l-fixed-position-text { @include box-sizing(border-box); height: 100%; width: 100%; } .l-fixed-position-box { } .l-fixed-position-image { background-size: cover; background-repeat: no-repeat; background-position: center; } .l-fixed-position-text { @include txtShdwSubtle(); border:1px solid transparent; font-size: 0.8rem; $p: $interiorMarginSm; &.l-static-text { // overflow: auto; padding: $p; } &.l-telemetry { .l-elem { @include absPosDefault($p); @include box-sizing(border-box); width: 50%; &.l-title { right: auto; left: $p; } &.l-value { // @include test(blue); right: $p; left: auto; text-align: right; &.telem-only { // @include test(red); left: $p; width: auto; } } } } } } .l-fixed-position-item-handle { $brd: 1px solid $colorKey; // @include border-radius($controlCr); background: rgba($colorKey, 0.5); cursor: crosshair; border: $brd; position: absolute; } } .edit-mode .t-fixed-position { &.l-fixed-position { .l-grid-holder { .l-grid { &.l-grid-x { @include bgTicks($colorGridLines, 'x'); } &.l-grid-y { @include bgTicks($colorGridLines, 'y'); } } } } .l-fixed-position-item { &:not(.s-selected):hover { border: 1px dotted rgba($colorKey, 0.5); } } }