mirror of
https://github.com/nasa/openmct.git
synced 2025-02-20 17:33:23 +00:00
Improvements to reduce repainting (#5876)
This commit is contained in:
Charles Hacskaylo
GitHub
parent
8831b75c5d
commit
a3c5450205
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 19 KiB |
@ -115,6 +115,9 @@ test.describe('Stacked Plot', () => {
|
||||
await expect(stackedPlotItem2).toHaveAttribute('aria-label', `Stacked Plot Item ${swgC.name}`);
|
||||
await expect(stackedPlotItem3).toHaveAttribute('aria-label', `Stacked Plot Item ${swgA.name}`);
|
||||
|
||||
// collapse inspector
|
||||
await page.locator('.l-shell__pane-inspector .l-pane__collapse-button').click();
|
||||
|
||||
// Save (exit edit mode)
|
||||
await page.locator('button[title="Save"]').click();
|
||||
await page.locator('li[title="Save and Finish Editing"]').click();
|
||||
|
||||
@ -63,7 +63,7 @@ test.describe('Grand Search', () => {
|
||||
await expect(page.locator('[aria-label="Search Result"] >> nth=0')).toContainText(`Clock A ${myItemsFolderName} Red Folder Blue Folder`);
|
||||
|
||||
// Click [aria-label="OpenMCT Search"] a >> nth=0
|
||||
await page.locator('[aria-label="OpenMCT Search"] a').first().click();
|
||||
await page.locator('[aria-label="Search Result"] >> nth=0').click();
|
||||
await expect(page.locator('[aria-label="Search Result"] >> nth=0')).toBeHidden();
|
||||
|
||||
// Fill [aria-label="OpenMCT Search"] input[type="search"]
|
||||
|
||||
@ -138,6 +138,7 @@ test.describe('Performance tests', () => {
|
||||
await page.evaluate(() => window.performance.mark("notebook-search-processed"));
|
||||
|
||||
//Clear Search
|
||||
await page.locator('.c-search.c-notebook__search .c-search__input').hover();
|
||||
await page.locator('.c-search.c-notebook__search .c-search__clear-input').click();
|
||||
await page.evaluate(() => window.performance.mark("notebook-search-processed"));
|
||||
|
||||
|
||||
@ -20,11 +20,11 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
const { test } = require('../../../pluginFixtures');
|
||||
const { setBoundsToSpanAllActivities } = require('../../../helper/planningUtils');
|
||||
const { createDomainObjectWithDefaults, createPlanFromJSON } = require('../../../appActions');
|
||||
const { test } = require('../../pluginFixtures');
|
||||
const { setBoundsToSpanAllActivities } = require('../../helper/planningUtils');
|
||||
const { createDomainObjectWithDefaults, createPlanFromJSON } = require('../../appActions');
|
||||
const percySnapshot = require('@percy/playwright');
|
||||
const examplePlanLarge = require('../../../test-data/ExamplePlan_Large.json');
|
||||
const examplePlanLarge = require('../../test-data/examplePlans/ExamplePlan_Large.json');
|
||||
|
||||
test.describe('Visual - Planning', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
@ -81,7 +81,7 @@
|
||||
}
|
||||
|
||||
.c-object-label__name {
|
||||
filter: $objectLabelNameFilter;
|
||||
color: $objectLabelNameColorFg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -80,11 +80,9 @@
|
||||
.is-editing & {
|
||||
cursor: pointer;
|
||||
pointer-events: initial;
|
||||
transition: $transOut;
|
||||
|
||||
&:hover {
|
||||
background: rgba($colorBodyFg, 0.1);
|
||||
transition: $transIn;
|
||||
}
|
||||
|
||||
&.is-current {
|
||||
|
||||
@ -86,7 +86,7 @@
|
||||
*[s-selected-parent] {
|
||||
> .l-layout {
|
||||
// When main shell layout is the parent
|
||||
@include displayMarquee(deeppink);
|
||||
@include displayMarquee(deeppink); // TEMP
|
||||
}
|
||||
> * > * > * {
|
||||
// When a sub-layout is the parent
|
||||
|
||||
@ -45,18 +45,15 @@
|
||||
|
||||
// Has-complex-content objects
|
||||
.c-so-view.has-complex-content {
|
||||
transition: $transOut;
|
||||
transition-delay: $moveBarOutDelay;
|
||||
@include transition($prop: transform, $dur: $transOutTime, $delay: $moveBarOutDelay);
|
||||
|
||||
> .c-so-view__local-controls {
|
||||
transition: transform 250ms ease-in-out;
|
||||
transition-delay: $moveBarOutDelay;
|
||||
@include transition($prop: transform, $dur: 250ms, $delay: $moveBarOutDelay);
|
||||
}
|
||||
|
||||
+ .c-frame__move-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.l-layout {
|
||||
@ -65,13 +62,11 @@
|
||||
> .l-layout__frame {
|
||||
> .c-so-view.has-complex-content {
|
||||
> .c-so-view__local-controls {
|
||||
transition: transform $transOutTime ease-in-out;
|
||||
transition-delay: $moveBarOutDelay;
|
||||
@include transition($prop: transform, $dur: $transOutTime, $delay: $moveBarOutDelay);
|
||||
}
|
||||
|
||||
+ .c-frame__move-bar {
|
||||
transition: $transOut;
|
||||
transition-delay: $moveBarOutDelay;
|
||||
@include transition($prop: height, $delay: $moveBarOutDelay);
|
||||
@include userSelectNone();
|
||||
background: $editFrameMovebarColorBg;
|
||||
box-shadow: rgba(black, 0.3) 0 2px;
|
||||
@ -103,18 +98,17 @@
|
||||
|
||||
&:hover {
|
||||
> .c-so-view.has-complex-content {
|
||||
transition: $transIn;
|
||||
transition: $transInTransform;
|
||||
transition-delay: 0s;
|
||||
|
||||
> .c-so-view__local-controls {
|
||||
transform: translateY($editFrameMovebarH);
|
||||
transition: transform $transInTime ease-in-out;
|
||||
@include transition(height, $transOutTime);
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
+ .c-frame__move-bar {
|
||||
transition: $transIn;
|
||||
transition-delay: 0s;
|
||||
@include transition(height);
|
||||
height: $editFrameMovebarH;
|
||||
}
|
||||
}
|
||||
|
||||
@ -244,11 +244,10 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 0 ($margin * 2) + $size;
|
||||
transition: $transOut;
|
||||
|
||||
&:before {
|
||||
// The visible resize line
|
||||
background: $editUIColor;
|
||||
background-color: $editUIColor;
|
||||
content: '';
|
||||
display: block;
|
||||
flex: 1 1 auto;
|
||||
@ -270,10 +269,9 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transition: $transOut;
|
||||
&:before {
|
||||
// The visible resize line
|
||||
background: $editUIColorHov;
|
||||
background-color: $editUIColorHov;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -37,6 +37,7 @@
|
||||
.c-grid-item {
|
||||
// Mobile-first
|
||||
@include button($bg: $colorItemBg, $fg: $colorItemFg);
|
||||
@include cControlHov();
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding: $interiorMarginLg;
|
||||
@ -142,15 +143,10 @@
|
||||
body.desktop & {
|
||||
$transOutMs: 300ms;
|
||||
flex-flow: column nowrap;
|
||||
transition: $transOutMs ease-in-out;
|
||||
|
||||
&:hover {
|
||||
filter: $filterItemHoverFg;
|
||||
transition: $transIn;
|
||||
|
||||
.c-grid-item__type-icon {
|
||||
transform: scale(1.1);
|
||||
transition: $transInBounce;
|
||||
}
|
||||
}
|
||||
|
||||
@ -171,8 +167,6 @@
|
||||
font-size: floor(math.div($gridItemDesk, 3));
|
||||
margin: $interiorMargin 22.5% $interiorMargin * 3 22.5%;
|
||||
order: 2;
|
||||
transform-origin: center;
|
||||
transition: all $transOutMs ease-in-out;
|
||||
}
|
||||
|
||||
&__details {
|
||||
|
||||
@ -495,7 +495,6 @@
|
||||
&:hover {
|
||||
z-index: 2;
|
||||
|
||||
filter: brightness(1) contrast(1) !important;
|
||||
[class*='__image-handle'] {
|
||||
background-color: $colorBodyFg;
|
||||
}
|
||||
@ -519,9 +518,4 @@
|
||||
display: block;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
&:hover div.c-imagery-tsv__image-wrapper {
|
||||
// TODO CH: convert to theme constants
|
||||
filter: brightness(0.5) contrast(0.7);
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,6 +13,24 @@
|
||||
|
||||
/******************************* TAGS */
|
||||
.c-tag {
|
||||
/* merge conflict in 5247
|
||||
border-radius: 10px; //TODO: convert to theme constant
|
||||
display: inline-flex;
|
||||
padding: 1px 10px; //TODO: convert to theme constant
|
||||
|
||||
> * + * {
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
|
||||
&__remove-btn {
|
||||
color: inherit !important;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
padding: 1px !important;
|
||||
@include transition(opacity);
|
||||
width: 0;
|
||||
*/
|
||||
border-radius: $tagBorderRadius;
|
||||
display: inline-flex;
|
||||
overflow: hidden;
|
||||
@ -28,15 +46,15 @@
|
||||
transition: $transIn;
|
||||
width: 0;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* SEARCH RESULTS */
|
||||
&.--is-not-search-match {
|
||||
opacity: 0.5;
|
||||
}
|
||||
/* SEARCH RESULTS */
|
||||
&.--is-not-search-match {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.c-tag-holder {
|
||||
@ -51,6 +69,31 @@
|
||||
|
||||
/******************************* TAGS IN INSPECTOR / TAG SELECTION & APPLICATION */
|
||||
.c-tag-applier {
|
||||
/* merge conflict in fix-repaint-5247
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
|
||||
> * + * {
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
|
||||
&__add-btn {
|
||||
&:before {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
.c-tag {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-right: 3px !important;
|
||||
|
||||
&__remove-btn {
|
||||
display: block;
|
||||
}
|
||||
*/
|
||||
$tagApplierPadding: 3px 6px;
|
||||
@include tagHolder;
|
||||
grid-column: 1 / 3;
|
||||
@ -81,7 +124,6 @@
|
||||
min-height: auto !important;
|
||||
padding: $tagApplierPadding;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-tag-btn__label {
|
||||
@ -90,6 +132,21 @@
|
||||
|
||||
/******************************* HOVERS */
|
||||
.has-tag-applier {
|
||||
/* merge conflict in fix-repaint-5247
|
||||
$p: opacity, width;
|
||||
// Apply this class to all components that should trigger tag removal btn on hover
|
||||
.c-tag__remove-btn {
|
||||
@include transition($prop: $p, $dur: $transOutTime);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.c-tag__remove-btn {
|
||||
width: 1.1em;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
// Apply this class to all components that should trigger tag removal btn on hover
|
||||
&:hover {
|
||||
.c-tag {
|
||||
@ -120,3 +177,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -26,12 +26,13 @@
|
||||
flex-wrap: wrap;
|
||||
|
||||
&__item {
|
||||
$m: 1px;
|
||||
cursor: pointer;
|
||||
margin: 0 $interiorMarginSm $interiorMarginSm 0;
|
||||
margin: 0 $m $m 0;
|
||||
|
||||
.c-object-label {
|
||||
padding: 0;
|
||||
transition: $transOut;
|
||||
border-radius: $smallCr;
|
||||
padding: 2px 3px;
|
||||
|
||||
&__type-icon {
|
||||
width: auto;
|
||||
@ -39,9 +40,8 @@
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transition: $transIn;
|
||||
filter: $filterHov;
|
||||
@include hover() {
|
||||
background: $colorItemTreeHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -76,13 +76,6 @@
|
||||
}
|
||||
|
||||
.c-list__item {
|
||||
@include hover() {
|
||||
[class*="__menu-indicator"] {
|
||||
opacity: 0.7;
|
||||
transition: $transIn;
|
||||
}
|
||||
}
|
||||
|
||||
> * + * {
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
@ -92,10 +85,10 @@
|
||||
}
|
||||
|
||||
&__menu-indicator {
|
||||
// Not sure this is being used
|
||||
flex: 0 0 auto;
|
||||
font-size: 0.8em;
|
||||
opacity: 0;
|
||||
transition: $transOut;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -49,12 +49,10 @@
|
||||
background-size: 3px 30%;
|
||||
background-color: $colorBodyBgSubtle;
|
||||
box-shadow: inset rgba(black, 0.4) 0 1px 1px;
|
||||
transition: $transOut;
|
||||
|
||||
svg text {
|
||||
fill: $colorBodyFg;
|
||||
stroke: $colorBodyBgSubtle;
|
||||
transition: $transOut;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -68,7 +68,6 @@
|
||||
&:hover,
|
||||
&:active {
|
||||
cursor: col-resize;
|
||||
filter: $timeConductorAxisHoverFilter;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -269,7 +268,6 @@
|
||||
grid-column-gap: 3px;
|
||||
grid-row-gap: 4px;
|
||||
align-items: start;
|
||||
filter: $filterMenu;
|
||||
box-shadow: $shdwMenu;
|
||||
padding: $interiorMargin;
|
||||
position: absolute;
|
||||
|
||||
@ -72,7 +72,7 @@ $colorHeadBg: #262626;
|
||||
$colorHeadFg: $colorBodyFg;
|
||||
$colorKey: #0099cc;
|
||||
$colorKeyFg: #fff;
|
||||
$colorKeyHov: #26d8ff;
|
||||
$colorKeyHov: lighten($colorKey, 10%);
|
||||
$colorKeyFilter: invert(36%) sepia(76%) saturate(2514%) hue-rotate(170deg) brightness(99%) contrast(101%);
|
||||
$colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%) contrast(100%);
|
||||
$colorKeySelectedBg: $colorKey;
|
||||
@ -86,7 +86,7 @@ $colorSelectedFg: pullForward($colorBodyFg, 20%);
|
||||
|
||||
// Object labels
|
||||
$objectLabelTypeIconOpacity: 0.7;
|
||||
$objectLabelNameFilter: brightness(1.3);
|
||||
$objectLabelNameColorFg: lighten($colorBodyFg, 10%);
|
||||
|
||||
// Layout
|
||||
$shellMainPad: 4px 0;
|
||||
@ -135,7 +135,7 @@ $colorPausedFg: #333;
|
||||
|
||||
// Base variations
|
||||
$colorBodyBgSubtle: pullForward($colorBodyBg, 5%);
|
||||
$colorBodyBgSubtleHov: pushBack($colorKey, 50%);
|
||||
$colorBodyBgSubtleHov: pullForward($colorBodyBg, 10%);
|
||||
$colorKeySubtle: pushBack($colorKey, 10%);
|
||||
|
||||
// Time Colors
|
||||
@ -202,6 +202,7 @@ $colorTabsHolderBg: rgba(black, 0.2);
|
||||
// Buttons and Controls
|
||||
$colorBtnBg: pullForward($colorBodyBg, 10%);
|
||||
$colorBtnBgHov: pullForward($colorBtnBg, 10%);
|
||||
$shdwBtnHov: inset rgba(white, 10%) 0 0 0 100px;
|
||||
$colorBtnFg: pullForward($colorBodyFg, 10%);
|
||||
$colorBtnReverseFg: pullForward($colorBtnFg, 10%);
|
||||
$colorBtnReverseBg: pullForward($colorBtnBg, 10%);
|
||||
@ -470,6 +471,8 @@ $transInTime: 50ms;
|
||||
$transOutTime: 250ms;
|
||||
$transIn: all $transInTime ease-in-out;
|
||||
$transOut: all $transOutTime ease-in-out;
|
||||
$transInTransform: transform $transInTime ease-in-out;
|
||||
$transOutTransform: transform $transOutTime ease-in-out;
|
||||
$transInBounce: all 200ms cubic-bezier(.47,.01,.25,1.5);
|
||||
$transInBounceBig: all 300ms cubic-bezier(.2,1.6,.6,3);
|
||||
|
||||
|
||||
@ -474,6 +474,8 @@ $transInTime: 50ms;
|
||||
$transOutTime: 250ms;
|
||||
$transIn: all $transInTime ease-in-out;
|
||||
$transOut: all $transOutTime ease-in-out;
|
||||
$transInTransform: transform $transInTime ease-in-out;
|
||||
$transOutTransform: transform $transOutTime ease-in-out;
|
||||
$transInBounce: all 200ms cubic-bezier(.47,.01,.25,1.5);
|
||||
$transInBounceBig: all 300ms cubic-bezier(.2,1.6,.6,3);
|
||||
|
||||
|
||||
@ -30,6 +30,7 @@ $mobileOverlayMargin: 20px;
|
||||
$mobileMenuIconD: 25px;
|
||||
$phoneItemH: floor(math.div($gridItemMobile, 4));
|
||||
$tabletItemH: floor(math.div($gridItemMobile, 3));
|
||||
$shellTimeConductorMobileH: 90px;
|
||||
|
||||
/************************** MOBILE TREE MENU DIMENSIONS */
|
||||
$mobileTreeItemH: 35px;
|
||||
|
||||
@ -86,7 +86,7 @@ $colorSelectedFg: pullForward($colorBodyFg, 10%);
|
||||
|
||||
// Object labels
|
||||
$objectLabelTypeIconOpacity: 0.5;
|
||||
$objectLabelNameFilter: brightness(0.9);
|
||||
$objectLabelNameColorFg: darken($colorBodyFg, 10%);
|
||||
|
||||
// Layout
|
||||
$shellMainPad: 4px 0;
|
||||
@ -135,7 +135,7 @@ $colorPausedFg: #fff;
|
||||
|
||||
// Base variations
|
||||
$colorBodyBgSubtle: pullForward($colorBodyBg, 5%);
|
||||
$colorBodyBgSubtleHov: pushBack($colorKey, 50%);
|
||||
$colorBodyBgSubtleHov: pullForward($colorBodyBg, 10%);
|
||||
$colorKeySubtle: pushBack($colorKey, 20%);
|
||||
|
||||
// Time Colors
|
||||
@ -202,6 +202,7 @@ $colorTabsHolderBg: rgba($colorBodyFg, 0.2);
|
||||
// Buttons and Controls
|
||||
$colorBtnBg: #aaa;
|
||||
$colorBtnBgHov: pullForward($colorBtnBg, 10%);
|
||||
$shdwBtnHov: inset rgba(white, 10%) 0 0 0 20px;
|
||||
$colorBtnFg: #fff;
|
||||
$colorBtnReverseFg: $colorBodyBg;
|
||||
$colorBtnReverseBg: $colorBodyFg;
|
||||
@ -470,6 +471,8 @@ $transInTime: 50ms;
|
||||
$transOutTime: 250ms;
|
||||
$transIn: all $transInTime ease-in-out;
|
||||
$transOut: all $transOutTime ease-in-out;
|
||||
$transInTransform: transform $transInTime ease-in-out;
|
||||
$transOutTransform: transform $transOutTime ease-in-out;
|
||||
$transInBounce: all 200ms cubic-bezier(.47,.01,.25,1.5);
|
||||
$transInBounceBig: all 300ms cubic-bezier(.2,1.6,.6,3);
|
||||
|
||||
|
||||
@ -47,6 +47,9 @@ $overlayOuterMarginDialog: (5%, 20%);
|
||||
$overlayInnerMargin: 25px;
|
||||
$mainViewPad: 0px;
|
||||
$treeNavArrowD: 20px;
|
||||
$shellMainBrowseBarH: 22px;
|
||||
$shellTimeConductorH: 55px;
|
||||
$shellToolBarH: 29px;
|
||||
/*************** Items */
|
||||
$itemPadLR: 5px;
|
||||
$gridItemDesk: 175px;
|
||||
|
||||
@ -565,7 +565,7 @@ select {
|
||||
}
|
||||
|
||||
@include hover() {
|
||||
filter: $filterHov;
|
||||
box-shadow: $shdwBtnHov;
|
||||
}
|
||||
|
||||
&.is-current {
|
||||
@ -725,11 +725,6 @@ select {
|
||||
width: $d;
|
||||
height: $d;
|
||||
text-align: center;
|
||||
transition: $transOut;
|
||||
|
||||
&:hover {
|
||||
transition: $transIn;
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
border-width: 1px;
|
||||
@ -1084,7 +1079,7 @@ input[type="range"] {
|
||||
// Controls that are in close proximity to an element they effect
|
||||
&--show-on-hover {
|
||||
// Hidden by default; requires a hover 1 - 3 levels above to display
|
||||
transition: $transOut;
|
||||
@include transition(opacity, $transOutTime);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -1096,7 +1091,7 @@ input[type="range"] {
|
||||
> * > * > .c-local-controls--show-on-hover,
|
||||
> * > * > * > .c-local-controls--show-on-hover
|
||||
{
|
||||
transition: $transIn;
|
||||
@include transition(opacity);
|
||||
opacity: 1;
|
||||
pointer-events: inherit;
|
||||
|
||||
@ -1109,6 +1104,7 @@ input[type="range"] {
|
||||
.c-drop-hint {
|
||||
// Used in Tabs View, Flexible Grid Layouts
|
||||
@include abs();
|
||||
@include transition($prop: background-color, $dur: $transOutTime);
|
||||
background-color: $colorDropHintBg;
|
||||
color: $colorDropHintFg;
|
||||
border-radius: $basicCr;
|
||||
@ -1117,7 +1113,6 @@ input[type="range"] {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: $transOut;
|
||||
z-index: 50;
|
||||
|
||||
&:not(.c-drop-hint--always-show) {
|
||||
@ -1142,13 +1137,11 @@ input[type="range"] {
|
||||
.is-dragging &,
|
||||
&.is-dragging {
|
||||
pointer-events: inherit;
|
||||
transition: $transIn;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.is-mouse-over &,
|
||||
&.is-mouse-over {
|
||||
transition: $transIn;
|
||||
background-color: $colorDropHintBgHov;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
@ -60,7 +60,7 @@
|
||||
margin-right: 0;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
transition: $transOut;
|
||||
@include transition($prop: width, $dur: $transOutTime);
|
||||
width: 0;
|
||||
|
||||
.c-icon-button:before { font-size: 1em; }
|
||||
@ -78,7 +78,7 @@
|
||||
|
||||
&:hover {
|
||||
.c-timer__controls {
|
||||
transition: $transOut; // On purpose: want this to take a bit longer
|
||||
@include transition($prop: width, $dur: $transOutTime); // On purpose: want this to take a bit longer
|
||||
margin-right: $interiorMargin;
|
||||
width: $ctrlW * 2;
|
||||
}
|
||||
@ -168,7 +168,6 @@
|
||||
.widget-rules-wrapper,
|
||||
.widget-rule-content,
|
||||
.w-widget-test-data-content {
|
||||
transition: $transIn;
|
||||
min-height: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
@ -430,7 +429,6 @@
|
||||
|
||||
&:hover {
|
||||
.l-autoflow-header .s-button.change-column-width {
|
||||
transition: $transIn;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -444,7 +442,7 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
.s-button.change-column-width {
|
||||
transition: $transOut;
|
||||
@include transition($prop: opacity, $dur: $transOutTime);
|
||||
opacity: 0;
|
||||
}
|
||||
.l-filter {
|
||||
@ -737,7 +735,7 @@ body.desktop {
|
||||
&:hover {
|
||||
&:after {
|
||||
background-color: $colorSplitterHover !important;
|
||||
transiiton: background-color, 150ms;
|
||||
@include transition($prop: background-color, $dur: 150ms);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -96,6 +96,13 @@
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
@mixin transition($prop: all, $dur: $transInTime, $timing: ease-in-out, $delay: 0ms) {
|
||||
transition-property: $prop;
|
||||
transition-duration: $dur;
|
||||
transition-timing-function: $timing;
|
||||
transition-delay: $delay;
|
||||
}
|
||||
|
||||
/************************** VISUALS */
|
||||
@mixin ancillaryIcon($d, $c) {
|
||||
// Used for small icons used in combination with larger icons,
|
||||
@ -463,22 +470,12 @@
|
||||
}
|
||||
|
||||
@mixin button($bg: $colorBtnBg, $fg: $colorBtnFg, $radius: $controlCr, $shdw: none) {
|
||||
// Is this being used? Remove if not.
|
||||
background: $bg;
|
||||
color: $fg;
|
||||
border-radius: $radius;
|
||||
box-shadow: $shdw;
|
||||
}
|
||||
|
||||
@mixin buttonBehavior() {
|
||||
// Assign transition timings
|
||||
transition: $transOut;
|
||||
|
||||
@include hover() {
|
||||
transition: $transIn;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin cControl() {
|
||||
$fs: 1em;
|
||||
@include userSelectNone();
|
||||
@ -515,8 +512,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin cControlHov($styleConst: $shdwBtnHov) {
|
||||
transition: box-shadow $transOutTime;
|
||||
|
||||
@include hover() {
|
||||
transition: box-shadow $transInTime;
|
||||
box-shadow: $styleConst !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin cButton() {
|
||||
@include cControl();
|
||||
@include cControlHov();
|
||||
@include themedButton();
|
||||
border-radius: $controlCr;
|
||||
color: $colorBtnFg;
|
||||
@ -528,10 +535,6 @@
|
||||
margin-left: $interiorMarginSm;
|
||||
}
|
||||
|
||||
@include hover() {
|
||||
filter: $filterHov;
|
||||
}
|
||||
|
||||
&[class*="--major"],
|
||||
&[class*='is-active']{
|
||||
background: $colorBtnMajorBg;
|
||||
@ -546,11 +549,11 @@
|
||||
|
||||
@mixin cClickIcon() {
|
||||
@include cControl();
|
||||
@include cControlHov();
|
||||
color: $colorBodyFg;
|
||||
cursor: pointer;
|
||||
padding: 4px; // Bigger hit area
|
||||
opacity: 0.7;
|
||||
transition: $transOut;
|
||||
transform-origin: center;
|
||||
|
||||
&[class*="--major"] {
|
||||
@ -560,7 +563,6 @@
|
||||
|
||||
@include hover() {
|
||||
transform: scale(1.1);
|
||||
transition: $transIn;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -584,21 +586,14 @@
|
||||
// Padding is included to facilitate a bigger hit area
|
||||
// Make the icon bigger relative to its container
|
||||
@include cControl();
|
||||
@include cControlHov();
|
||||
@include cClickIconButtonLayout();
|
||||
background: none;
|
||||
color: $colorClickIconButton;
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
transition: $transOut;
|
||||
border-radius: $controlCr;
|
||||
|
||||
@include hover() {
|
||||
transition: $transIn;
|
||||
background: $colorClickIconButtonBgHov;
|
||||
//color: $colorClickIconButtonFgHov;
|
||||
filter: $filterHov;
|
||||
}
|
||||
|
||||
&[class*="--major"] {
|
||||
color: $colorBtnMajorBg !important;
|
||||
}
|
||||
@ -654,10 +649,6 @@
|
||||
border-color: $colorFg;
|
||||
}
|
||||
|
||||
@include hover {
|
||||
filter: $filterHov;
|
||||
}
|
||||
|
||||
&--up, &--prev {
|
||||
&:before {
|
||||
transform: translate(-30%, -50%) rotate(135deg);
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
.c-list-view {
|
||||
tbody tr {
|
||||
background: $colorListItemBg;
|
||||
transition: $transOut;
|
||||
}
|
||||
|
||||
td {
|
||||
@ -22,8 +21,6 @@
|
||||
|
||||
&:hover {
|
||||
background: $colorListItemBgHov;
|
||||
filter: $filterHov;
|
||||
transition: $transIn;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
}
|
||||
|
||||
&__name {
|
||||
filter: $objectLabelNameFilter;
|
||||
color: $objectLabelNameColorFg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
|
||||
&__name {
|
||||
@include ellipsize();
|
||||
color: $objectLabelNameColorFg;
|
||||
display: inline;
|
||||
padding: 1px 0;
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@mixin visibleRegexButton {
|
||||
opacity: 1;
|
||||
padding: 1px 3px;
|
||||
width: 24px;
|
||||
min-width: 24px;
|
||||
}
|
||||
|
||||
.c-search {
|
||||
@ -31,7 +31,7 @@
|
||||
overflow: hidden;
|
||||
padding: 1px 0;
|
||||
transform-origin: left;
|
||||
transition: $transOut;
|
||||
@include transition($prop: min-width, $dur: $transOutTime);
|
||||
width: 0;
|
||||
|
||||
&.is-active {
|
||||
@ -54,8 +54,19 @@
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.c-search__clear-input {
|
||||
display: block;
|
||||
&:before {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
input[type='search'] {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@include hover {
|
||||
.c-search__clear-input {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -66,10 +77,9 @@
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include hover {
|
||||
.c-search__use-regex {
|
||||
@include visibleRegexButton();
|
||||
transition: $transIn;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,10 +25,6 @@
|
||||
}
|
||||
|
||||
&__selected {
|
||||
.c-object-label__name {
|
||||
filter: $objectLabelNameFilter;
|
||||
}
|
||||
|
||||
.c-object-label__type-icon {
|
||||
opacity: $objectLabelTypeIconOpacity;
|
||||
}
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
z-index: 70;
|
||||
|
||||
[class*="__icon"] {
|
||||
filter: $colorKeyFilter;
|
||||
filter: $colorKeyFilter;
|
||||
}
|
||||
|
||||
[class*="__item-description"] {
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
min-height: 0;
|
||||
max-height: 15%;
|
||||
overflow: hidden;
|
||||
transition: $transIn;
|
||||
@include transition(min-height);
|
||||
|
||||
&.is-expanded {
|
||||
min-height: 100px;
|
||||
@ -65,8 +65,7 @@
|
||||
}
|
||||
|
||||
&__pane-tree,
|
||||
&__pane-inspector,
|
||||
&__pane-main {
|
||||
&__pane-inspector {
|
||||
.l-pane__contents {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
@ -74,8 +73,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__pane-tree,
|
||||
&__pane-main {
|
||||
&__pane-tree {
|
||||
.l-pane__contents {
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
@ -89,6 +87,37 @@
|
||||
|
||||
&__pane-main {
|
||||
.l-pane__header { display: none; }
|
||||
|
||||
.l-pane__contents {
|
||||
.l-shell__main-.l-shell__main-view-browse-bar {
|
||||
position: relative;
|
||||
}
|
||||
// Using `position: absolute` due to flex having repaint issues with the Time Conductor, #5247
|
||||
.l-shell__time-conductor,
|
||||
.l-shell__main-container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: auto;
|
||||
width: auto;
|
||||
|
||||
}
|
||||
|
||||
.l-shell__main-container {
|
||||
top: $shellMainBrowseBarH + $interiorMarginLg;
|
||||
bottom: $shellTimeConductorH + $interiorMargin;
|
||||
}
|
||||
|
||||
@include phonePortrait() {
|
||||
.l-shell__main-container {
|
||||
bottom: $shellTimeConductorMobileH + $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
.l-shell__time-conductor {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.mobile & {
|
||||
@ -307,6 +336,7 @@
|
||||
height: $p + 24px; // Need to standardize the height
|
||||
justify-content: space-between;
|
||||
padding: $p;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&__resizing {
|
||||
@ -332,6 +362,7 @@
|
||||
box-shadow: $colorBodyBg 0 0 0 1px, $editUIAreaShdw;
|
||||
margin-left: $m;
|
||||
margin-right: $m;
|
||||
top: $shellToolBarH + $shellMainBrowseBarH + $interiorMarginLg !important;
|
||||
|
||||
&[s-selected] {
|
||||
// Provide a clearer selection context articulation for the main edit area
|
||||
@ -408,10 +439,6 @@
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
.c-object-label__name {
|
||||
filter: $objectLabelNameFilter;
|
||||
}
|
||||
|
||||
.c-object-label__type-icon {
|
||||
opacity: $objectLabelTypeIconOpacity;
|
||||
}
|
||||
@ -433,7 +460,7 @@
|
||||
|
||||
/************************** DRAWER */
|
||||
.c-drawer {
|
||||
/* New sliding overlay or push element to contain things
|
||||
/* Sliding overlay or push element to contain things
|
||||
* Designed for mobile and compact desktop scenarios
|
||||
* Variations:
|
||||
* --overlays: position absolute, overlays neighboring elements
|
||||
@ -442,7 +469,8 @@
|
||||
* &.is-expanded: applied when expanded.
|
||||
*/
|
||||
|
||||
transition: $transOut;
|
||||
$transProps: width, min-width, height, min-height;
|
||||
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
@ -455,11 +483,12 @@
|
||||
}
|
||||
|
||||
&.c-drawer--align-left {
|
||||
@include transition($prop: $transProps, $dur: $transOutTime);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.c-drawer--align-top {
|
||||
// Need anything here?
|
||||
@include transition($prop: $transProps, $dur: $transOutTime);
|
||||
}
|
||||
|
||||
&.c-drawer--overlays {
|
||||
|
||||
@ -97,7 +97,7 @@
|
||||
|
||||
@include hover {
|
||||
background: $colorItemTreeHoverBg;
|
||||
filter: $filterHov;
|
||||
//filter: $filterHov; // FILTER REMOVAL, CONVERT TO THEME CONSTANT
|
||||
}
|
||||
|
||||
&.is-navigated-object,
|
||||
@ -192,14 +192,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__item__label {
|
||||
@include desktop {
|
||||
&:hover {
|
||||
filter: $filterHov;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-editing .is-navigated-object {
|
||||
|
||||
@ -107,10 +107,10 @@
|
||||
/************************************************ DESKTOP STYLES */
|
||||
body.desktop & {
|
||||
&__handle {
|
||||
background: $colorSplitterBg;
|
||||
background-color: $colorSplitterBg;
|
||||
display: block;
|
||||
position: absolute;
|
||||
transition: $transOut;
|
||||
@include transition(background-color, $transOutTime);
|
||||
|
||||
&:before {
|
||||
// Extended hit area
|
||||
@ -121,8 +121,8 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $colorSplitterHover;
|
||||
transition: $transIn;
|
||||
background-color: $colorSplitterHover;
|
||||
@include transition(background-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -142,14 +142,14 @@
|
||||
|
||||
[class*="expand-button"] {
|
||||
display: none; // Hidden by default
|
||||
background: $splitterCollapsedBtnColorBg;
|
||||
background-color: $splitterCollapsedBtnColorBg;
|
||||
color: $splitterCollapsedBtnColorFg;
|
||||
font-size: 0.9em;
|
||||
|
||||
&:hover {
|
||||
background: $splitterCollapsedBtnColorBgHov;
|
||||
background-color: $splitterCollapsedBtnColorBgHov;
|
||||
color: inherit;
|
||||
transition: $transIn;
|
||||
@include transition(background-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -163,7 +163,7 @@
|
||||
|
||||
.l-pane {
|
||||
&__handle {
|
||||
background: $colorSplitterHover;
|
||||
background-color: $colorSplitterHover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -43,8 +43,8 @@
|
||||
.s-button,
|
||||
.c-button {
|
||||
// Make <a> in label look like buttons
|
||||
transition: $transIn;
|
||||
background: transparent;
|
||||
@include transition(background-color);
|
||||
background-color: transparent;
|
||||
border: 1px solid rgba($colorIndicatorMenuFg, 0.5);
|
||||
border-radius: $controlCr;
|
||||
box-sizing: border-box;
|
||||
@ -53,8 +53,8 @@
|
||||
height: auto;
|
||||
line-height: normal;
|
||||
padding: 0 2px;
|
||||
&:hover {
|
||||
background: rgba($colorIndicatorMenuFg, 0.1);
|
||||
@include hover {
|
||||
background-color: rgba($colorIndicatorMenuFg, 0.1);
|
||||
border-color: rgba($colorIndicatorMenuFg, 0.75);
|
||||
color: $colorIndicatorMenuFgHov;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user