alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Review and integrate UI enhancements (#2078)

Browse Source 
* [Frontend] WIP New local-controls classes

Fixes #2000
- h-local-controls
- Markup in plots changed
- Changed reset plot button's icon

* [Frontend] WIP local-controls classes

Fixes #2000
- Refactoring to use and apply local-control classes consistently;
- Plots and imagery done in main view and Display Layout contexts;

* [Frontend] WIP local-controls classes

Fixes #2000
- Use local-control classes in Timelines;
- Group Timeline buttons in l-btn-set;
- Use reset icon glyph;

* [Frontend] WIP local-controls classes

Fixes #2000
- Slight increase in size to buttons in frame context;

* [Frontend] local-controls classes

Fixes #2000
- Code cleanup;
- Update Style Guide content;
- Provisionally done, needs unit testing and double-checking;

* [Frontend] Better selecting in browse mode

Fixes #2000
- Better colors and approach to selecting in browse mode;

* [Frontend] Tweaks to pane collapse mini-tabs

Fixes #1758
Fixes #2000
- Enlarged mini-tabs and moved to screen top;
- Removed duplicative theme-based constants;

* [Frontend] Tweaks to "nav up" arrow button

Fixes #1758
Fixes #2000
- Increased hit area of .l-back "nav up" arrow in object-browse-bar;

* [Frontend] Glyph improvements

Fixes #1758
Fixes #2000
- New arrow glyph for view controls;
- Increased hit area of view controls in tree for mobile and desktop;
- Better "hamburger" menu glyph;

* [Frontend] Inspector refactor to CSS grid WIP

Fixes #1758
Fixes #2000
- WIP!!!;
- Good progress on Properties section;

* [Frontend] Inspector refactor to CSS grid WIP

Fixes #2000
- Significant mods to CSS and markup;
- New grid archetypes classes;
- Added title attribs to plot options edit and browse props;
- Added value, alarm markers to plot series browse props;
- Nearly done (?) but needs unit testing and cleanups;

* [Frontend] Minor tweaks to form and form-row

Fixes #2000
- Fixing margin problem with .form-row;
- h2 instead of div.section-header;

* [Frontend] Fixed H2 in Elements pool

Fixes #2000

* Refinements to Time Conductor

Fixes #2000
- Tweaks size of fixed position grab ticks;
- Positioning refinements to ticks and text;
- Hide major tick marks;

* Hide View Large button for nested hidden-frame Layouts

Fixes #2000
- When a layout is nested and has its frame hidden, hide the
View Large button;

* Better hiding of Time Conductor "Submit" button

Fixes #2000

* Re-added new icon-arrow-right-equilateral glyph;

Fixes #2000
Fixes #2078

* Remove commented styles/markup

Fixes #2000
Fixes #2078

* Repaired approach to hiding Time Conductor Submit button

Fixes #2000
Fixes #2078
- Renamed .off to .invisible and added refinements;

* Fixed wrong conflict resolutions; polish search

Fixes #2000
Fixes #2078
- .invisible instead of .off in search.html;
- Minor polishing to search;

fixes #1758
fixes #1763 
fixes #2011
This commit is contained in:
Charles Hacskaylo
2018-06-29 11:18:50 -07:00
committed by Pete Richards
parent 07fb20c32f
commit 9d2c7a6de5
43 changed files with 873 additions and 784 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
platform/commonUI/general/res/sass/_archetypes.scss
View File

@@ -157,3 +157,57 @@
.t-popup {
z-index: 75;
}
/********************************************* GRID STYLES */
.grid-two-column {
display: grid;
grid-row-gap: 0;
grid-template-columns: 1fr 2fr;
align-items: top;
}
.grid-two-column-span-cols {
grid-column: 1 / 3;
}
.grid-elem {
&:not(:first-child) {
border-top: 1px solid $colorInteriorBorder;
}
&.label {
background-color: rgba(0,0,128,0.2);
}
&.value {
background-color: rgba(0,128,0,0.2);
}
}
// Properties grids
.grid-properties {
@extend .grid-two-column;
}
.grid-row {
display: contents;
}
.grid-span-all {
@extend .grid-two-column-span-cols;
}
.grid-row {
.grid-cell {
padding: 3px $interiorMarginLg 3px 0;
&[title] {
// When a cell has a title, assume it's helpful text
cursor: help;
}
}
&.force-border,
&:not(:first-of-type) {
// Row borders, effected via border-top on child elements of the row
.grid-cell {
border-top: 1px solid $colorInspectorSectionHeaderBg;
}
}
}

16
platform/commonUI/general/res/sass/_badges.scss
View File

@@ -37,25 +37,9 @@
vertical-align: middle;
}
//.top-bar .btn-browse .badge {
// Moved to _controls.scss .btn.browse-btn
// border-radius: $controlCr * 1.5;
// $d: 20px;
// display: block;
// font-size: 1em;
// line-height: $d;
//// margin-top: -4px;
//
// position: absolute;
// top: 5px; left: 5px; bottom: 5px; right: auto;
// width: $d; height: auto;
//}
.super-menu .badge {
@include background-image(linear-gradient(lighten($colorCreateBtn, 10%), $colorCreateBtn));
border-radius: $controlCr;
@include boxShdwSubtle();
// display: inline-block;
// margin-right: 10px !important;
padding: 2px 7px;
}

12
platform/commonUI/general/res/sass/_constants.scss
View File

@@ -43,10 +43,10 @@ $ueColMargin: 1.5%;
$ueAppLogoW: 80px;
$ueEditToolBarH: 25px;
$ueCollapsedPaneEdgeM: 22px;
$uePaneMiniTabH: 22px;
$uePaneMiniTabW: 8px;
$uePaneMiniTabFontSize: 8px;
$uePaneMiniTabCollapsedW: 18px;
$uePaneMiniTabH: 36px;
$uePaneMiniTabW: 10px;
$uePaneMiniTabFontSize: 9px;
$uePaneMiniTabCollapsedW: 22px;
$ueEditLeftPaneW: 75%;
$treeSearchInputBarH: 25px;
/*************** Panes */
@@ -70,7 +70,7 @@ $ueBrowseGridItemTopBarH: 20px;
$ueBrowseGridItemBottomBarH: 30px;
$itemPadLR: 5px;
/*************** Tree */
$treeVCW: 10px;
$treeVCW: 16px;
$treeTypeIconH: 1.4em; // was 16px
$treeTypeIconHPx: 16px;
$treeTypeIconW: 18px;
@@ -132,7 +132,7 @@ $menuLineHPx: 24px;
$btnStdH: 25px;
$btnToolbarH: $btnStdH;
$controlBarH: $btnStdH;
$btnFrameH: 16px;
$btnFrameH: 18px;
/************************** PATHS */
// Paths need to be relative to /platform/commonUI/theme/<theme-name>/css/ directory

16
platform/commonUI/general/res/sass/_global.scss
View File

@@ -141,7 +141,6 @@ a.disabled {
.s-status-missing {
// Labels. Expects .s-status-missing to be applied to mct-representation that contains
// .t-object-label
.t-object-label .t-item-icon:before {
content: $glyph-icon-object-unknown;
}
@@ -201,6 +200,9 @@ a.disabled {
.vscroll {
overflow-y: auto;
&.scroll-pad {
padding-right: $interiorMargin;
}
}
.slidable {
@@ -224,6 +226,10 @@ a.disabled {
box-shadow: rgba(#000, 0.7) 0 4px 10px 2px;
}
.capitalize {
text-transform: capitalize;
}
.hide,
.hidden,
.t-main-view .hide-in-t-main-view {
@@ -235,14 +241,16 @@ a.disabled {
pointer-events: none;
}
.off {
.invisible {
display: block;
visibility: hidden;
opacity: 0;
height: 0;
margin: 0;
padding: 0;
border: 0;
margin: 0 !important;
transform: scale(0);
pointer-events: none;
position: absolute;
}
.sep {

2
platform/commonUI/general/res/sass/_glyphs.scss
View File

@@ -75,6 +75,7 @@ $glyph-icon-x: '\e928';
$glyph-icon-brackets: '\e929';
$glyph-icon-crosshair: '\e930';
$glyph-icon-grippy: '\e931';
$glyph-icon-arrow-right-equilateral: '\e932';
$glyph-icon-arrows-out: '\e1000';
$glyph-icon-arrows-right-left: '\e1001';
$glyph-icon-arrows-up-down: '\e1002';
@@ -190,6 +191,7 @@ $glyph-icon-notebook: '\e1131';
.icon-brackets { @include glyphBefore($glyph-icon-brackets); }
.icon-crosshair { @include glyphBefore($glyph-icon-crosshair); }
.icon-grippy { @include glyphBefore($glyph-icon-grippy); }
.icon-arrow-right-equilateral { @include glyphBefore($glyph-icon-arrow-right-equilateral); }
.icon-arrows-out { @include glyphBefore($glyph-icon-arrows-out); }
.icon-arrows-right-left { @include glyphBefore($glyph-icon-arrows-right-left); }
.icon-arrows-up-down { @include glyphBefore($glyph-icon-arrows-up-down); }

134
platform/commonUI/general/res/sass/_inspector.scss
View File

@@ -19,23 +19,15 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/* Styles for the Inspector pane */
.l-inspect,
.l-inspect table tr td {
font-size: 0.75rem;
}
/* New grid layout for the Inspector pane */
.l-inspect {
// Overall layout
@extend .abs;
background: $colorInspectorBg;
color: $colorInspectorFg;
line-height: 140%;
.flex-elem.holder:not(:last-child) {
margin-bottom: $interiorMargin;
}
.pane-header {
color: pushBack($colorInspectorFg, 20%);
font-size: 0.8rem;
@@ -50,80 +42,48 @@
}
}
}
.l-inspector-part {
box-sizing: border-box;
padding-right: $interiorMargin;
.tree .form {
display: contents;
}
.tree {
.grid-properties {
margin-left: $treeVCW + $interiorMarginLg;
}
.section-header {
background: none;
color: $colorInspectorPropName;
border-radius: unset;
font-size: inherit;
padding: $interiorMarginSm 0;
}
mct-form:not(:last-child) .form {
border-bottom: 1px solid $colorInspectorSectionHeaderBg;
}
.form {
margin-bottom: $interiorMarginSm;
padding-bottom: $interiorMarginLg;
.l-section-body {
margin-bottom: 0;
&:not(.first) {
border-top: 1px solid $colorFormLines;
}
}
.form-row {
align-items: center;
border: none !important;
margin-bottom: 0 !important;
padding: $interiorMarginSm 0;
.label {
min-width: 80px;
}
input[type='text'],
input[type='search'] {
width: 100%;
}
}
}
}
ul li,
em.t-inspector-part-header {
display: block;
position: relative;
}
ul li {
margin-bottom: $interiorMarginLg;
}
em.t-inspector-part-header {
border-radius: $basicCr;
background-color: $colorInspectorSectionHeaderBg;
color: $colorInspectorSectionHeaderFg;
margin-bottom: $interiorMargin;
padding: floor($formTBPad * .75) $formLRPad;
text-transform: uppercase;
}
.inspector-properties {
&:not(.first) {
border-top: 1px solid $colorInspectorSectionHeaderBg;
}
padding: $interiorMarginSm 0;
.grid-properties {
.label {
color: $colorInspectorPropName;
text-transform: uppercase;
}
.value {
color: $colorInspectorPropVal;
word-break: break-all;
&:first-child {
// If there is no preceding .label element, make value span columns
@extend .grid-two-column-span-cols;
}
}
}
.inspector-location {
display: inline-block;
}
h2 {
// Headers for .l-inspector-part elements
@extend .grid-two-column-span-cols;
border-radius: $controlCr;
background-color: $colorInspectorSectionHeaderBg;
color: $colorInspectorSectionHeaderFg;
font-size: 0.8rem;
font-weight: normal;
margin: $interiorMarginLg 0 $interiorMarginSm 0;
padding: floor($formTBPad * .75) $formLRPad;
text-transform: uppercase;
&.first {
margin-top: 0;
}
}
@@ -162,6 +122,34 @@
width: 4px;
}
}
// Elements pool
.holder-elements {
.current-elements {
position: relative;
.tree-item {
.t-object-label {
// Elements pool is a flat list, so don't indent items.
font-size: 0.75rem;
left: 0;
}
}
}
}
}
/* Styles for the Inspector pane */
.l-inspect,
.l-inspect table tr td {
font-size: 0.75rem;
}
.l-inspect {
.flex-elem.holder:not(:last-child) {
margin-bottom: $interiorMargin;
}
.holder-elements {
.current-elements {
position: relative;

3
platform/commonUI/general/res/sass/controls/_buttons.scss
View File

@@ -113,10 +113,11 @@ body.desktop .mini-tab-icon {
.l-btn-set {
// Buttons that have a very tight conceptual grouping - no internal space between them.
font-size: 0; // Remove space between s-button elements due to white space in markup
white-space: nowrap;
.s-button {
border-radius: 0;
margin-left: 1px;
margin-left: 1px !important;
}
> .s-button {

96
platform/commonUI/general/res/sass/controls/_controls.scss
View File

@@ -128,40 +128,80 @@
}
}
.l-local-controls {
// Control shown when hovering over an object, like plots and imagery
// Default position is upper right
$p: $interiorMargin;
position: absolute;
top: $p; right: $p; bottom: auto;
text-align: right;
z-index: 5;
/******************************************************** LOCAL CONTROLS */
// Controls placed in proximity to or overlaid on components and views
.local-controls-persist {
}
.s-local-controls {
font-size: 0.7rem;
&.s-wrapper-transluc {
// Semi-opaque wrapper to visually distinguish a control
// from the background
background: rgba($colorTransLucBg, 0.7);
box-sizing: border-box;
border-radius: $controlCr;
.local-controls-hidden {
// Used within .has-local-controls, hidden by default
}
.local-controls-flyout {
}
body.desktop .has-local-controls {
// Helper class, provides hover ability to show local controls
&:hover .local-controls-hidden {
@include trans-prop-nice($props: opacity, $dur: 50ms);
opacity: 1;
pointer-events: inherit;
}
}
.has-local-controls {
.local-control {
@include trans-prop-nice($props: opacity, $dur: 250ms);
.local-controls-hidden {
@include trans-prop-nice($props: opacity, $dur: 1000ms);
opacity: 0;
pointer-events: none;
}
&:hover {
.local-control {
@include trans-prop-nice($props: opacity, $dur: 10ms);
opacity: 1;
}
.h-local-controls {
// An explicit outer holder for controls. Typically placed in upper right.
align-items: center;
font-size: 0.7rem;
display: flex;
flex-direction: row;
justify-content: flex-end;
&.h-local-controls-overlay-content {
$p: $interiorMargin;
position: absolute;
top: $p; right: $p;
z-index: 2;
}
.l-btn-set,
.s-button {
&:not(:first-child) {
margin-left: $interiorMargin;
}
}
}
.h-local-controls-overlay-content {
background: $colorBodyBg;
border-radius: $controlCr + 1;
box-sizing: border-box;
border-radius: $controlCr;
padding: 1px;
.s-button {
background: $colorBtnBg;
}
}
.h-local-controls-trans {
background: rgba($colorTransLucBg, 0.5);
padding: $interiorMargin;
}
/******************************************************** VIEW CONTROLS */
// Expand/collapse > and v arrows, used in tree and plot legend
// Moved this over from a tree-only context 5/18/17
@@ -174,7 +214,7 @@
&:before {
position: absolute;
@include trans-prop-nice(transform, 100ms);
content: $glyph-icon-arrow-right;
content: $glyph-icon-arrow-right-equilateral;
@include transform-origin(center);
}
&.expanded:before {
@@ -773,13 +813,17 @@ textarea {
@extend .icon-arrow-right;
cursor: pointer;
font-size: 0.75em;
width: $treeVCW;
&:before {
// Arrow glyph
left: 50%;
position: absolute;
@include trans-prop-nice(transform, 100ms);
transform: translateX(-50%);
transform-origin: center;
}
&.expanded:before {
transform: rotate(90deg);
transform: translateX(-50%) rotate(90deg);
}
}

87
platform/commonUI/general/res/sass/features/_imagery.scss
View File

@@ -138,54 +138,51 @@
}
/*************************************** LOCAL CONTROLS */
.l-local-controls {
max-width: 200px;
min-width: 100px;
width: 35%;
input[type="range"] {
display: block;
width: 100%;
&:not(:first-child) {
margin-top: $interiorMarginLg;
}
&:before {
margin-right: $interiorMarginSm;
}
}
.t-reset-btn-holder {
$bc: $scrollbarTrackColorBg;
&:before,
&:after {
border-right: 1px solid $bc;
content:'';
display: block;
width: 5px;
height: 4px;
}
&:before {
border-top: 1px solid $bc;
margin-bottom: 2px;
}
&:after {
border-bottom: 1px solid $bc;
margin-top: 2px;
}
}
&.s-wrapper-transluc {
left: auto;
padding: $interiorMargin $interiorMarginLg;
}
&.l-flex-row {
.t-imagery {
.h-local-controls.h-local-controls-overlay-content {
max-width: 200px;
min-width: 100px;
width: 35%;
align-items: center;
}
padding: $interiorMargin $interiorMarginLg;
input[type="range"] {
display: block;
width: 100%;
&:not(:first-child) {
margin-top: $interiorMarginLg;
}
&:before {
margin-right: $interiorMarginSm;
}
}
.t-reset-btn-holder {
$bc: $scrollbarTrackColorBg;
&:before,
&:after {
border-right: 1px solid $bc;
content:'';
display: block;
width: 5px;
height: 4px;
}
&:before {
border-top: 1px solid $bc;
margin-bottom: 2px;
}
&:after {
border-bottom: 1px solid $bc;
margin-top: 2px;
}
}
}
}
/*************************************** WHEN IN FRAME */
.frame .t-imagery {
.l-image-main-wrapper {

29
platform/commonUI/general/res/sass/forms/_elems.scss
View File

@@ -41,6 +41,7 @@
width: 100%;
.l-form-section {
margin-bottom: $interiorMarginLg * 2;
position: relative;
&.grows {
.l-section-body,
@@ -57,7 +58,6 @@
$m: $interiorMargin;
box-sizing: border-box;
border-top: 1px solid $colorFormLines;
margin-bottom: $interiorMarginLg * 2;
padding: $formTBPad 0;
position: relative;
@@ -132,6 +132,7 @@
width: auto;
order: 2;
}
>.control,
>.controls {
flex: 0 0 auto;
margin-right: $interiorMargin;
@@ -258,19 +259,19 @@
}
}
}
}
.form-error {
// Block element that visually flags an error and contains a message
background-color: $colorFormFieldErrorBg;
color: $colorFormFieldErrorFg;
border-radius: $basicCr;
display: block;
padding: 1px 6px;
&:before {
content: $glyph-icon-alert-triangle;
display: inline;
font-family: symbolsfont;
margin-right: $interiorMarginSm;
}
.form-error {
// Block element that visually flags an error and contains a message
background-color: $colorFormFieldErrorBg;
color: $colorFormFieldErrorFg;
border-radius: $basicCr;
display: block;
padding: 1px 6px;
&:before {
content: $glyph-icon-alert-triangle;
display: inline-block;
font-family: symbolsfont;
margin-right: $interiorMarginSm;
}
}

2
platform/commonUI/general/res/sass/mobile/_layout.scss
View File

@@ -91,7 +91,7 @@ body.mobile {
.object-browse-bar {
&.t-primary {
margin-left: 45px;
margin-left: 30px;
.title-label {
// Prevent inline editing of the object title in the main view in mobile

11
platform/commonUI/general/res/sass/mobile/_tree.scss
View File

@@ -34,18 +34,7 @@ body.touch {
line-height: $mobileTreeItemH !important;
.view-control {
font-size: 1em;
margin-right: $interiorMargin;
width: ceil($mobileTreeItemH * 0.75);
&.has-children {
&:before {
content: $glyph-icon-arrow-down;
left: 50%;
transform: translateX(-50%) rotate(-90deg);
}
&.expanded:before {
transform: translateX(-50%) rotate(0deg);
}
}
}
.t-object-label {
line-height: inherit;

15
platform/commonUI/general/res/sass/plots/_plots-main.scss
View File

@@ -246,21 +246,6 @@
}
}
.gl-plot-display-area,
.plot-display-area,
.gl-plot-axis-area {
.gl-plot-local-controls,
.l-local-controls {
@include trans-prop-nice(opacity, 150ms);
opacity: 0;
pointer-events: none;
}
&:hover .gl-plot-local-controls,
&:hover .l-local-controls {
opacity: 1;
pointer-events: inherit;
}
}
.gl-plot-display-area,
.plot-display-area {

5
platform/commonUI/general/res/sass/search/_search.scss
View File

@@ -111,14 +111,15 @@ input.c-search__search-input {
.results-msg {
font-size: 0.8rem;
opacity: 0.6;
}
.active-filter-display {
$s: 0.7em;
$s: 0.7rem;
$p: $interiorMargin;
box-sizing: border-box;
line-height: 130%;
padding-left: $s * 2;
padding-left: $s * 1.5;
font-size: $s;
.clear-filters {

37
platform/commonUI/general/res/sass/user-environ/_frame.scss
View File

@@ -64,14 +64,16 @@
left: $m;
}
&.frame-template {
.s-button,
.s-menu-button {
height: $ohH;
line-height: $ohH;
padding: 0 $interiorMargin;
> span,
&:before {
font-size: 0.65rem;
.h-local-controls {
.s-button,
.s-menu-button {
height: $btnFrameH;
line-height: $btnFrameH;
padding: 0 $interiorMargin;
> span,
&:before {
font-size: 0.65rem;
}
}
}
@@ -96,8 +98,6 @@
border-color: transparent;
.object-browse-bar .right {
$m: 0;
background: rgba(black, 0.3);
border-radius: $basicCr;
padding: $interiorMarginSm;
position: absolute;
top: $m; right: $m;
@@ -111,10 +111,23 @@
bottom: $m;
left: $m;
}
> .t-frame-inner {
> .object-browse-bar .left {
display: none;
&.t-object-type-layout {
> .object-browse-bar {
.t-btn-view-large {
// When a nested layout has its frame hidden, don't display a view large button
display: none;
}
}
}
> .object-browse-bar {
.left {
display: none;
}
}
> .object-holder.abs {
overflow: hidden;
top: 0 !important;

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

@@ -145,20 +145,18 @@
body.desktop .pane .mini-tab-icon.toggle-pane {
$hi: splitterHandleInset($splitterD, $splitterHandleD);
$paneExpandedOffset: $hi + $splitterHandleD + $uePaneMiniTabW;
top: $bodyMargin + ($ueTopBarH - $uePaneMiniTabH)/2;
top: 0;
&.toggle-tree.anchor-left.collapsed,
&.toggle-inspect.anchor-right:not(.collapsed) {
@extend .icon-arrow-right;
border-bottom-right-radius: $controlCr;
border-top-right-radius: $controlCr;
}
&.toggle-tree.anchor-left:not(.collapsed),
&.toggle-inspect.anchor-right.collapsed {
@extend .icon-arrow-left;
border-bottom-left-radius: $controlCr;
border-top-left-radius: $controlCr;
}
&.toggle-tree.anchor-left {
@@ -240,7 +238,6 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
}
}
.object-browse-bar .s-button,
.top-bar .buttons-main .s-button,
.top-bar .s-menu-button,
.tool-bar .s-button,
@@ -268,7 +265,12 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
.left {
.l-back {
margin-right: $interiorMarginLg;
a {
display: inline-block;
text-align: center;
width: 24px;
}
margin-right: $interiorMargin;
&.s-status-editing { display: none; }
}
}

77
platform/commonUI/general/res/sass/user-environ/_selecting.scss
View File

@@ -19,51 +19,62 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
.s-hover-border {
border: 1px solid transparent;
&:hover {
border-color: rgba($colorSelectableSelectedPrimary, 0.5) !important;
}
}
.s-status-editing {
// Limit to editing mode
$o: 0.5;
$oHover: 0.8;
$bc: $colorSelectableSelectedPrimary;
body.desktop {
.s-hover-border {
// Show a border by default so user can see object bounds and empty objects
border-color: rgba($bc, $o) !important;
border-style: dotted !important;
&:hover {
border-color: rgba($bc, $oHover) !important;
}
&.t-object-type-layout {
border-style: dashed !important;
border-color: rgba($colorBodyFg, 0.3) !important;
}
}
.s-selected {
&.s-moveable {
&:not(.s-drilled-in) {
cursor: move;
.s-status-editing {
// Limit to editing mode
$o: 0.5;
$oHover: 0.8;
$bc: $colorSelectableSelectedPrimary;
.s-hover-border {
// Show a border by default so user can see object bounds and empty objects
border-color: rgba($bc, $o) !important;
border-style: dotted !important;
&:hover {
border-color: rgba($bc, $oHover) !important;
}
&.t-object-type-layout {
border-style: dashed !important;
}
}
.s-selected {
> .s-hover-border,
&.s-hover-border {
// Styles for a selected object. Also used by legacy Fixed Position/Panel objects.
@include boxShdwLarge();
// Show edit-corners if you got 'em
.edit-corner {
display: block;
&:hover {
background-color: rgba($colorKey, 1);
}
}
}
&.s-moveable {
&:not(.s-drilled-in) {
cursor: move;
}
}
}
}
}
.s-selected > .s-hover-border,
.s-selected.s-hover-border {
// Styles for a selected object. Also used by legacy Fixed Position/Panel objects.
border-color: $colorSelectableSelectedPrimary !important;
@include boxShdwLarge();
// Show edit-corners if you got 'em
.edit-corner {
display: block;
&:hover {
background-color: rgba($colorKey, 1);
}
.s-selected > .s-hover-border,
.s-selected.s-hover-border {
border-color: $colorSelectableSelectedPrimary !important;
//z-index: 1; // Bring selected item from beneath others. BUT, this breaks editing in Fixed Position.
}
}