diff --git a/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-panned-chrome-linux.png b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-panned-chrome-linux.png index c1119b8123..dde9cbf044 100644 Binary files a/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-panned-chrome-linux.png and b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-panned-chrome-linux.png differ diff --git a/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-prepan-chrome-linux.png b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-prepan-chrome-linux.png index 360f87b8f7..e97b591291 100644 Binary files a/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-prepan-chrome-linux.png and b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js-snapshots/autoscale-canvas-prepan-chrome-linux.png differ diff --git a/e2e/tests/functional/plugins/plot/stackedPlot.e2e.spec.js b/e2e/tests/functional/plugins/plot/stackedPlot.e2e.spec.js index 868372185f..4d16f74c82 100644 --- a/e2e/tests/functional/plugins/plot/stackedPlot.e2e.spec.js +++ b/e2e/tests/functional/plugins/plot/stackedPlot.e2e.spec.js @@ -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(); diff --git a/e2e/tests/functional/search.e2e.spec.js b/e2e/tests/functional/search.e2e.spec.js index 162312d4f5..656e86349b 100644 --- a/e2e/tests/functional/search.e2e.spec.js +++ b/e2e/tests/functional/search.e2e.spec.js @@ -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"] diff --git a/e2e/tests/performance/notebook.perf.spec.js b/e2e/tests/performance/notebook.perf.spec.js index 91cf6d06b7..31c82c4bce 100644 --- a/e2e/tests/performance/notebook.perf.spec.js +++ b/e2e/tests/performance/notebook.perf.spec.js @@ -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")); diff --git a/e2e/tests/functional/planning/plan.visual.spec.js b/e2e/tests/visual/plan.visual.spec.js similarity index 90% rename from e2e/tests/functional/planning/plan.visual.spec.js rename to e2e/tests/visual/plan.visual.spec.js index 74109fafb0..da3534ae5d 100644 --- a/e2e/tests/functional/planning/plan.visual.spec.js +++ b/e2e/tests/visual/plan.visual.spec.js @@ -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 }) => { diff --git a/src/api/overlays/components/overlay-component.scss b/src/api/overlays/components/overlay-component.scss index 67838d97d8..3c05795328 100644 --- a/src/api/overlays/components/overlay-component.scss +++ b/src/api/overlays/components/overlay-component.scss @@ -81,7 +81,7 @@ } .c-object-label__name { - filter: $objectLabelNameFilter; + color: $objectLabelNameColorFg; } } diff --git a/src/plugins/condition/components/inspector/conditional-styles.scss b/src/plugins/condition/components/inspector/conditional-styles.scss index c154ac49df..ca5500912e 100644 --- a/src/plugins/condition/components/inspector/conditional-styles.scss +++ b/src/plugins/condition/components/inspector/conditional-styles.scss @@ -80,11 +80,9 @@ .is-editing & { cursor: pointer; pointer-events: initial; - transition: $transOut; &:hover { background: rgba($colorBodyFg, 0.1); - transition: $transIn; } &.is-current { diff --git a/src/plugins/displayLayout/components/display-layout.scss b/src/plugins/displayLayout/components/display-layout.scss index 06c0085515..0bc0b9b9b3 100644 --- a/src/plugins/displayLayout/components/display-layout.scss +++ b/src/plugins/displayLayout/components/display-layout.scss @@ -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 diff --git a/src/plugins/displayLayout/components/layout-frame.scss b/src/plugins/displayLayout/components/layout-frame.scss index a80f587fc4..b35d4e2fa9 100644 --- a/src/plugins/displayLayout/components/layout-frame.scss +++ b/src/plugins/displayLayout/components/layout-frame.scss @@ -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; } } diff --git a/src/plugins/flexibleLayout/components/flexible-layout.scss b/src/plugins/flexibleLayout/components/flexible-layout.scss index 6fe96a446b..04789cd816 100644 --- a/src/plugins/flexibleLayout/components/flexible-layout.scss +++ b/src/plugins/flexibleLayout/components/flexible-layout.scss @@ -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; } } } diff --git a/src/plugins/folderView/components/grid-view.scss b/src/plugins/folderView/components/grid-view.scss index 27c84b957d..7ac1ea1cb0 100644 --- a/src/plugins/folderView/components/grid-view.scss +++ b/src/plugins/folderView/components/grid-view.scss @@ -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 { diff --git a/src/plugins/imagery/components/imagery-view.scss b/src/plugins/imagery/components/imagery-view.scss index 5c2146d16f..4d5f125916 100644 --- a/src/plugins/imagery/components/imagery-view.scss +++ b/src/plugins/imagery/components/imagery-view.scss @@ -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); - } } diff --git a/src/plugins/inspectorViews/annotations/tags/tags.scss b/src/plugins/inspectorViews/annotations/tags/tags.scss index 7afb7a326a..01dc73fa82 100644 --- a/src/plugins/inspectorViews/annotations/tags/tags.scss +++ b/src/plugins/inspectorViews/annotations/tags/tags.scss @@ -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 @@ } } } +} \ No newline at end of file diff --git a/src/plugins/inspectorViews/properties/location.scss b/src/plugins/inspectorViews/properties/location.scss index 58077080d4..4a74d8c2af 100644 --- a/src/plugins/inspectorViews/properties/location.scss +++ b/src/plugins/inspectorViews/properties/location.scss @@ -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; } } } diff --git a/src/plugins/notebook/components/sidebar.scss b/src/plugins/notebook/components/sidebar.scss index 63c1b2ab33..9ab0ea270f 100644 --- a/src/plugins/notebook/components/sidebar.scss +++ b/src/plugins/notebook/components/sidebar.scss @@ -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; } } } diff --git a/src/plugins/timeConductor/conductor-axis.scss b/src/plugins/timeConductor/conductor-axis.scss index c34ffadca4..8fec88e73b 100644 --- a/src/plugins/timeConductor/conductor-axis.scss +++ b/src/plugins/timeConductor/conductor-axis.scss @@ -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; } } diff --git a/src/plugins/timeConductor/conductor.scss b/src/plugins/timeConductor/conductor.scss index 7eb6eec8ee..45acbf7a56 100644 --- a/src/plugins/timeConductor/conductor.scss +++ b/src/plugins/timeConductor/conductor.scss @@ -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; diff --git a/src/styles/_constants-espresso.scss b/src/styles/_constants-espresso.scss index a6f2b3e4de..4f43d85252 100644 --- a/src/styles/_constants-espresso.scss +++ b/src/styles/_constants-espresso.scss @@ -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); diff --git a/src/styles/_constants-maelstrom.scss b/src/styles/_constants-maelstrom.scss index b40e3e2570..385c304ad5 100644 --- a/src/styles/_constants-maelstrom.scss +++ b/src/styles/_constants-maelstrom.scss @@ -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); diff --git a/src/styles/_constants-mobile.scss b/src/styles/_constants-mobile.scss index 9437f9697b..5ff8a95019 100644 --- a/src/styles/_constants-mobile.scss +++ b/src/styles/_constants-mobile.scss @@ -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; diff --git a/src/styles/_constants-snow.scss b/src/styles/_constants-snow.scss index 5ad97a2fad..b5a0bc360c 100644 --- a/src/styles/_constants-snow.scss +++ b/src/styles/_constants-snow.scss @@ -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); diff --git a/src/styles/_constants.scss b/src/styles/_constants.scss index 8055f9b35f..19d2b24263 100755 --- a/src/styles/_constants.scss +++ b/src/styles/_constants.scss @@ -47,6 +47,9 @@ $overlayOuterMarginDialog: (5%, 20%); $overlayInnerMargin: 25px; $mainViewPad: 0px; $treeNavArrowD: 20px; +$shellMainBrowseBarH: 22px; +$shellTimeConductorH: 55px; +$shellToolBarH: 29px; /*************** Items */ $itemPadLR: 5px; $gridItemDesk: 175px; diff --git a/src/styles/_controls.scss b/src/styles/_controls.scss index 1948852350..5e321aa5ee 100644 --- a/src/styles/_controls.scss +++ b/src/styles/_controls.scss @@ -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; } diff --git a/src/styles/_legacy.scss b/src/styles/_legacy.scss index 4a94702130..0820c0f371 100644 --- a/src/styles/_legacy.scss +++ b/src/styles/_legacy.scss @@ -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); } } } diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index 6fe456de14..62b3ce4405 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -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); diff --git a/src/ui/components/List/list-view.scss b/src/ui/components/List/list-view.scss index ab1484814f..289359de8b 100644 --- a/src/ui/components/List/list-view.scss +++ b/src/ui/components/List/list-view.scss @@ -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; } } } diff --git a/src/ui/components/object-frame.scss b/src/ui/components/object-frame.scss index 5c65f095d0..81b9f1adfb 100644 --- a/src/ui/components/object-frame.scss +++ b/src/ui/components/object-frame.scss @@ -20,7 +20,7 @@ } &__name { - filter: $objectLabelNameFilter; + color: $objectLabelNameColorFg; } } } diff --git a/src/ui/components/object-label.scss b/src/ui/components/object-label.scss index c71a75b48b..a6b56d155b 100644 --- a/src/ui/components/object-label.scss +++ b/src/ui/components/object-label.scss @@ -22,6 +22,7 @@ &__name { @include ellipsize(); + color: $objectLabelNameColorFg; display: inline; padding: 1px 0; } diff --git a/src/ui/components/search.scss b/src/ui/components/search.scss index fe615c6e8a..4f2b2dc090 100644 --- a/src/ui/components/search.scss +++ b/src/ui/components/search.scss @@ -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; } } } diff --git a/src/ui/inspector/inspector.scss b/src/ui/inspector/inspector.scss index 4ba65a6fdf..2a3095d8e3 100644 --- a/src/ui/inspector/inspector.scss +++ b/src/ui/inspector/inspector.scss @@ -25,10 +25,6 @@ } &__selected { - .c-object-label__name { - filter: $objectLabelNameFilter; - } - .c-object-label__type-icon { opacity: $objectLabelTypeIconOpacity; } diff --git a/src/ui/layout/create-button.scss b/src/ui/layout/create-button.scss index 0a0bd1e53f..9b04cfb5e7 100644 --- a/src/ui/layout/create-button.scss +++ b/src/ui/layout/create-button.scss @@ -20,7 +20,7 @@ z-index: 70; [class*="__icon"] { - filter: $colorKeyFilter; + filter: $colorKeyFilter; } [class*="__item-description"] { diff --git a/src/ui/layout/layout.scss b/src/ui/layout/layout.scss index a34edb0ffb..b1d30d1ae8 100644 --- a/src/ui/layout/layout.scss +++ b/src/ui/layout/layout.scss @@ -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 { diff --git a/src/ui/layout/mct-tree.scss b/src/ui/layout/mct-tree.scss index f782898203..031e9c1f6a 100644 --- a/src/ui/layout/mct-tree.scss +++ b/src/ui/layout/mct-tree.scss @@ -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 { diff --git a/src/ui/layout/pane.scss b/src/ui/layout/pane.scss index 1a1c900e26..ae23fd0df6 100644 --- a/src/ui/layout/pane.scss +++ b/src/ui/layout/pane.scss @@ -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; } } } diff --git a/src/ui/layout/status-bar/indicators.scss b/src/ui/layout/status-bar/indicators.scss index ce334d3c24..ea51401bc1 100644 --- a/src/ui/layout/status-bar/indicators.scss +++ b/src/ui/layout/status-bar/indicators.scss @@ -43,8 +43,8 @@ .s-button, .c-button { // Make 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; }