From f4271c96a316712898d2efdf4858d9ef66e86b2d Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Fri, 20 Apr 2018 10:18:29 -0700 Subject: [PATCH] Review SCSS refactoring for to-be-deprecated Bourbon functions (#1959) * [Frontend] Refactor SCSS to remove deprecated @includes Fixes #1891 - In progress * [Frontend] Refactor SCSS to remove deprecated @includes Fixes #1891 Making bourbon happy by refactoring to-be-deprecated calls to prefixing @includes: - transform and related CSS; - flex and related CSS; - Fixed double semi-colons to single; --- .../res/sass/_style-guide-base.scss | 8 +- .../general/res/sass/_animations.scss | 60 +++++----- .../general/res/sass/_archetypes.scss | 30 ++--- .../commonUI/general/res/sass/_icons.scss | 4 +- .../commonUI/general/res/sass/_inspector.scss | 110 +----------------- .../commonUI/general/res/sass/_mixins.scss | 2 +- .../general/res/sass/_object-label.scss | 4 +- .../commonUI/general/res/sass/_widgets.scss | 16 +-- .../general/res/sass/controls/_controls.scss | 14 +-- .../general/res/sass/controls/_messages.scss | 34 +++--- .../general/res/sass/features/_imagery.scss | 2 +- .../res/sass/forms/_channel-selector.scss | 3 - .../general/res/sass/forms/_elems.scss | 26 ++--- .../general/res/sass/forms/_filter.scss | 2 +- .../res/sass/helpers/_wait-spinner.scss | 2 +- .../general/res/sass/items/_item.scss | 4 +- .../general/res/sass/mobile/_layout.scss | 2 +- .../general/res/sass/mobile/_tree.scss | 13 ++- .../general/res/sass/overlay/_overlay.scss | 4 +- .../general/res/sass/plots/_plots-main.scss | 8 +- .../general/res/sass/search/_search.scss | 2 +- .../general/res/sass/user-environ/_frame.scss | 2 +- .../res/sass/user-environ/_layout.scss | 10 +- .../core/res/sass/_time-conductor-base.scss | 6 +- .../core/res/sass/_time-of-interest.scss | 12 +- .../timeline/res/sass/_timeline-thematic.scss | 2 +- .../timeline/res/sass/_timelines.scss | 2 +- 27 files changed, 147 insertions(+), 237 deletions(-) diff --git a/example/styleguide/res/sass/_style-guide-base.scss b/example/styleguide/res/sass/_style-guide-base.scss index f64681d876..a91325af02 100644 --- a/example/styleguide/res/sass/_style-guide-base.scss +++ b/example/styleguide/res/sass/_style-guide-base.scss @@ -101,11 +101,11 @@ padding-top: 1em; .cols { - @include display(flex); - @include flex-direction(row); + display: flex; + flex-direction: row; .col { - @include flex(1 1 auto); + flex: 1 1 auto; &:not(:last-child) { $v: $interiorMargin * 4; border-right: 1px solid $colorInteriorBorder; @@ -199,7 +199,7 @@ border-radius: 15%; position: absolute; left: 50%; - @include transform(translateX(-50%)); + transform: translateX(-50%); } } } diff --git a/platform/commonUI/general/res/sass/_animations.scss b/platform/commonUI/general/res/sass/_animations.scss index b0549326f5..1f0f4f3d27 100644 --- a/platform/commonUI/general/res/sass/_animations.scss +++ b/platform/commonUI/general/res/sass/_animations.scss @@ -1,91 +1,91 @@ @include keyframes(rotation) { - 100% { @include transform(rotate(360deg)); } + 100% { transform: rotate(360deg); } } @include keyframes(rotation-centered) { - 0% { @include transform(translate(-50%, -50%) rotate(0deg)); } - 100% { @include transform(translate(-50%, -50%) rotate(360deg)); } + 0% { transform: translate(-50%, -50%) rotate(0deg); } + 100% { transform: translate(-50%, -50%) rotate(360deg); } } @include keyframes(clock-hands) { - 0% { @include transform(translate(-50%, -50%) rotate(0deg)); } - 100% { @include transform(translate(-50%, -50%) rotate(360deg)); } + 0% { transform: translate(-50%, -50%) rotate(0deg); } + 100% { transform: translate(-50%, -50%) rotate(360deg); } } @include keyframes(clock-hands-sticky) { 0% { - @include transform(translate(-50%, -50%) rotate(0deg)); + transform: translate(-50%, -50%) rotate(0deg); } 7% { - @include transform(translate(-50%, -50%) rotate(0deg)); + transform: translate(-50%, -50%) rotate(0deg); } 8% { - @include transform(translate(-50%, -50%) rotate(30deg)); + transform: translate(-50%, -50%) rotate(30deg); } 15% { - @include transform(translate(-50%, -50%) rotate(30deg)); + transform: translate(-50%, -50%) rotate(30deg); } 16% { - @include transform(translate(-50%, -50%) rotate(60deg)); + transform: translate(-50%, -50%) rotate(60deg); } 24% { - @include transform(translate(-50%, -50%) rotate(60deg)); + transform: translate(-50%, -50%) rotate(60deg); } 25% { - @include transform(translate(-50%, -50%) rotate(90deg)); + transform: translate(-50%, -50%) rotate(90deg); } 32% { - @include transform(translate(-50%, -50%) rotate(90deg)); + transform: translate(-50%, -50%) rotate(90deg); } 33% { - @include transform(translate(-50%, -50%) rotate(120deg)); + transform: translate(-50%, -50%) rotate(120deg); } 40% { - @include transform(translate(-50%, -50%) rotate(120deg)); + transform: translate(-50%, -50%) rotate(120deg); } 41% { - @include transform(translate(-50%, -50%) rotate(150deg)); + transform: translate(-50%, -50%) rotate(150deg); } 49% { - @include transform(translate(-50%, -50%) rotate(150deg)); + transform: translate(-50%, -50%) rotate(150deg); } 50% { - @include transform(translate(-50%, -50%) rotate(180deg)); + transform: translate(-50%, -50%) rotate(180deg); } 57% { - @include transform(translate(-50%, -50%) rotate(180deg)); + transform: translate(-50%, -50%) rotate(180deg); } 58% { - @include transform(translate(-50%, -50%) rotate(210deg)); + transform: translate(-50%, -50%) rotate(210deg); } 65% { - @include transform(translate(-50%, -50%) rotate(210deg)); + transform: translate(-50%, -50%) rotate(210deg); } 66% { - @include transform(translate(-50%, -50%) rotate(240deg)); + transform: translate(-50%, -50%) rotate(240deg); } 74% { - @include transform(translate(-50%, -50%) rotate(240deg)); + transform: translate(-50%, -50%) rotate(240deg); } 75% { - @include transform(translate(-50%, -50%) rotate(270deg)); + transform: translate(-50%, -50%) rotate(270deg); } 82% { - @include transform(translate(-50%, -50%) rotate(270deg)); + transform: translate(-50%, -50%) rotate(270deg); } 83% { - @include transform(translate(-50%, -50%) rotate(300deg)); + transform: translate(-50%, -50%) rotate(300deg); } 90% { - @include transform(translate(-50%, -50%) rotate(300deg)); + transform: translate(-50%, -50%) rotate(300deg); } 91% { - @include transform(translate(-50%, -50%) rotate(330deg)); + transform: translate(-50%, -50%) rotate(330deg); } 99% { - @include transform(translate(-50%, -50%) rotate(330deg)); + transform: translate(-50%, -50%) rotate(330deg); } 100% { - @include transform(translate(-50%, -50%) rotate(360deg)); + transform: translate(-50%, -50%) rotate(360deg); } } diff --git a/platform/commonUI/general/res/sass/_archetypes.scss b/platform/commonUI/general/res/sass/_archetypes.scss index bd1497e7bc..2f5941fbb4 100644 --- a/platform/commonUI/general/res/sass/_archetypes.scss +++ b/platform/commonUI/general/res/sass/_archetypes.scss @@ -94,19 +94,19 @@ /********************************************* FLEX STYLES */ .l-flex-row, .l-flex-col { - @include display(flex); - @include flex-wrap(nowrap); + display: flex; + flex-wrap: nowrap; .flex-elem { min-height: 0; // Needed to allow element to shrink within parent position: relative; &:not(.grows) { - @include flex(0 0 auto); + flex: 0 0 auto; &.flex-can-shrink { - @include flex(0 1 auto); + flex: 0 1 auto; } } &.grows { - @include flex(1 1 auto); + flex: 1 1 auto; } &.contents-align-right { text-align: right; @@ -114,25 +114,25 @@ } .flex-container { // Apply to wrapping elements, mct-includes, etc. - @include display(flex); - @include flex-wrap(nowrap); - @include flex(1 1 auto); + display: flex; + flex-wrap: nowrap; + flex: 1 1 auto; min-height:0; } } .l-flex-row { - @include flex-direction(row); - &.flex-elem { @include flex(1 1 auto); } + flex-direction: row; + &.flex-elem { flex: 1 1 auto; } > .flex-elem { min-width: 0; &.holder:not(:last-child) { margin-right: $interiorMargin; } } - .flex-container { @include flex-direction(row); } + .flex-container { flex-direction: row; } } .l-flex-col { - @include flex-direction(column); + flex-direction: column; > .flex-elem { min-height: 0; &.holder:not(:last-child) { margin-bottom: $interiorMarginLg; } @@ -142,15 +142,15 @@ flex-direction: column; //overflow: hidden !important; } - .flex-container { @include flex-direction(column); } + .flex-container { flex-direction: column; } } .flex-fixed { - @include flex(0 0 auto); + flex: 0 0 auto; } .flex-justify-end { - @include justify-content(flex-end); + justify-content: flex-end; } /********************************************* POPUPS */ diff --git a/platform/commonUI/general/res/sass/_icons.scss b/platform/commonUI/general/res/sass/_icons.scss index e7326ba606..e7f9f4c5c7 100644 --- a/platform/commonUI/general/res/sass/_icons.scss +++ b/platform/commonUI/general/res/sass/_icons.scss @@ -83,8 +83,8 @@ height: auto; width: auto; position: absolute; left: 0; top: 0; right: 0; bottom: 20%; - @include transform-origin(bottom left); - @include transform(scale(0.3)); + transform-origin: bottom left; + transform: scale(0.3); z-index: 2; } } diff --git a/platform/commonUI/general/res/sass/_inspector.scss b/platform/commonUI/general/res/sass/_inspector.scss index 1e9e8d8e26..3c78c68a93 100644 --- a/platform/commonUI/general/res/sass/_inspector.scss +++ b/platform/commonUI/general/res/sass/_inspector.scss @@ -53,7 +53,6 @@ .l-inspector-part { box-sizing: border-box; padding-right: $interiorMargin; - .tree .form { margin-left: $treeVCW + $interiorMarginLg; } @@ -79,8 +78,7 @@ } } .form-row { - // To be replaced with .inspector-config, see below. - @include align-items(center); + align-items: center; border: none !important; margin-bottom: 0 !important; padding: $interiorMarginSm 0; @@ -101,12 +99,15 @@ position: relative; } + ul li { + margin-bottom: $interiorMarginLg; + } + em.t-inspector-part-header { border-radius: $basicCr; background-color: $colorInspectorSectionHeaderBg; color: $colorInspectorSectionHeaderFg; - margin-top: $interiorMarginLg; - //margin-bottom: $interiorMargin; + margin-bottom: $interiorMargin; padding: floor($formTBPad * .75) $formLRPad; text-transform: uppercase; } @@ -200,102 +201,3 @@ mct-representation:not(.s-status-editing) .l-inspect { pointer-events: inherit; } } - -// NEW COMPACT FORM, FOR USE IN INSPECTOR -// ul > li > label, control -// Make a new UL for each form section -// Allow control-first, controls-below - -.l-inspect .tree ul li, -.inspector-config ul li { - padding: 2px 0; -} - - -.inspector-config { - $labelW: 40%; - $minW: $labelW; - ul { - margin-bottom: $interiorMarginLg; - li { - @include display(flex); - @include flex-wrap(wrap); - @include align-items(center); - label, - .control { - @include display(flex); - min-width: $minW; - } - label { - line-height: inherit; - padding: $interiorMarginSm 0; - width: $labelW; - } - .control { - @include flex-grow(1); - } - - &:not(.section-header) { - &:not(.connects-to-previous) { - //border-top: 1px solid $colorFormLines; - } - } - - &.connects-to-previous { - padding-top: 0 !important; - } - - &.section-header { - margin-top: $interiorMarginLg; - border-top: 1px solid $colorFormLines; - } - - &.controls-first { - .control { - @include flex-grow(0); - margin-right: $interiorMargin; - min-width: 0; - order: 1; - width: auto; - } - label { - @include flex-grow(1); - order: 2; - width: auto; - } - } - &.controls-under { - display: block; - .control, label { - display: block; - width: auto; - } - - ul li { - border-top: none !important; - padding: 0; - } - } - } - } - - .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; - } - } -} - -.tree .inspector-config { - margin-left: $treeVCW + $interiorMarginLg; -} - diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss index 216b425fb2..83b474609d 100644 --- a/platform/commonUI/general/res/sass/_mixins.scss +++ b/platform/commonUI/general/res/sass/_mixins.scss @@ -382,7 +382,7 @@ /* This doesn't work on an element inside an element with absolute positioning that has height: auto */ //position: relative; top: 50%; - @include transform(translateY(-50%)); + transform: translateY(-50%); } @mixin verticalCenterBlock($holderH, $itemH) { diff --git a/platform/commonUI/general/res/sass/_object-label.scss b/platform/commonUI/general/res/sass/_object-label.scss index d309318f7c..9a96d09c35 100644 --- a/platform/commonUI/general/res/sass/_object-label.scss +++ b/platform/commonUI/general/res/sass/_object-label.scss @@ -22,8 +22,8 @@ // mct-representation surrounding an object-label key="'label'" .rep-object-label { - @include flex-direction(row); - @include flex(1 1 auto); + flex-direction: row; + flex: 1 1 auto; height: inherit; line-height: inherit; min-width: 0; diff --git a/platform/commonUI/general/res/sass/_widgets.scss b/platform/commonUI/general/res/sass/_widgets.scss index ae6f3da4da..b7fc288315 100644 --- a/platform/commonUI/general/res/sass/_widgets.scss +++ b/platform/commonUI/general/res/sass/_widgets.scss @@ -55,7 +55,7 @@ .widget-rule-header { @extend .l-flex-row; - @include align-items(center); + align-items: center; margin-bottom: $interiorMargin; > .flex-elem { &:not(:first-child) { @@ -103,7 +103,7 @@ .l-compact-form label { $ruleLabelW: 40%; $ruleLabelMaxW: 150px; - @include display(flex); + display: flex; max-width: $ruleLabelMaxW; width: $ruleLabelW; } @@ -177,8 +177,8 @@ ul { &:last-child { margin: 0; } li { - @include align-items(flex-start); - @include flex-wrap(nowrap); + align-items: flex-start; + flex-wrap: nowrap; line-height: 230%; // Provide enough space when controls wrap padding: 2px 0; &:not(.widget-rule-header) { @@ -233,7 +233,7 @@ .l-widget-thumb-wrapper { @extend .l-flex-row; - @include align-items(center); + align-items: center; > span { display: block; } .grippy-holder, .view-control { @@ -243,18 +243,18 @@ } .widget-thumb { - @include flex(1 1 auto); + flex: 1 1 auto; width: 100%; } } .rule-title { - @include flex(0 1 auto); + flex: 0 1 auto; color: pullForward($colorBodyFg, 50%); } .rule-description { - @include flex(1 1 auto); + flex: 1 1 auto; @include ellipsize(); color: pushBack($colorBodyFg, 20%); } diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index dbc5868868..c9c60cc088 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -356,7 +356,7 @@ input[type="text"].s-input-inline, } } &:before { - @include transform(translateY(-50%)); + transform: translateY(-50%); color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent)); display: block; pointer-events: none; @@ -434,7 +434,7 @@ input[type="text"].s-input-inline, .context-available { font-size: 0.7em; - @include flex(0 0 1); + flex: 0 0 1; } .t-object-alert { @@ -675,14 +675,14 @@ input[type="range"] { .l-calendar { $colorMuted: pushBack($colorMenuFg, 30%); ul.l-cal-row { - @include display(flex); - @include flex-flow(row nowrap); + display: flex; + flex-flow: row nowrap; margin-top: 1px; &:first-child { margin-top: 0; } li { - @include flex(1 0); + flex: 1 0; margin-left: 1px; padding: $interiorMargin; text-align: center; @@ -763,10 +763,10 @@ textarea { &:before { position: absolute; @include trans-prop-nice(transform, 100ms); - @include transform-origin(center); + transform-origin: center; } &.expanded:before { - @include transform(rotate(90deg)); + transform: rotate(90deg); } } diff --git a/platform/commonUI/general/res/sass/controls/_messages.scss b/platform/commonUI/general/res/sass/controls/_messages.scss index 6d362ffff7..c4a256f7b0 100644 --- a/platform/commonUI/general/res/sass/controls/_messages.scss +++ b/platform/commonUI/general/res/sass/controls/_messages.scss @@ -157,16 +157,16 @@ $lh: $ueFooterH - ($m*2) - 1; box-sizing: border-box; @include ellipsize(); - @include display(flex); - @include flex-direction(row); - @include align-items(center); + display: flex; + flex-direction: row; + align-items: center; position: absolute; top: $m; right: auto; bottom: $m; left: 50%; height: auto; width: auto; line-height: $lh; max-width: 300px; padding: 0 $interiorMargin 0 $interiorMargin; - @include transform(translateX(-50%)); + transform: translateX(-50%); &.minimized { @include transition-property(left, opacity); @@ -185,7 +185,7 @@ } .banner-elem { - @include flex(0 1 auto); + flex: 0 1 auto; margin-left: $interiorMargin; } a { @@ -250,14 +250,14 @@ // Archetypal message .l-message { $iconW: 32px; - @include display(flex); - @include flex-direction(row); - @include align-items(stretch); + display: flex; + flex-direction: row; + align-items: stretch; padding: $interiorMarginLg; &:before { // Icon - @include flex(0 1 auto); + flex: 0 1 auto; @include txtShdw($shdwStatusIc); @extend .icon-bell; color: $colorStatusDefault; @@ -283,9 +283,9 @@ .w-message-contents { - @include flex(1 1 auto); - @include display(flex); - @include flex-direction(column); + flex: 1 1 auto; + display: flex; + flex-direction: column; > div, > span { @@ -294,7 +294,7 @@ } .message-body { - @include flex(1 1 100%); + flex: 1 1 100%; } } @@ -331,8 +331,8 @@ // In a list .t-message-list { @include absPosDefault(); - @include display(flex); - @include flex-direction(column); + display: flex; + flex-direction: column; > div, > span { @@ -340,7 +340,7 @@ } .w-messages { - @include flex(1 1 100%); + flex: 1 1 100%; overflow-y: auto; padding-right: $interiorMargin; } @@ -360,7 +360,7 @@ @include phonePortrait { .t-message-single .l-message, .t-message-single.l-message { - @include flex-direction(column); + flex-direction: column; &:before { margin-right: 0; margin-bottom: $interiorMarginLg; diff --git a/platform/commonUI/general/res/sass/features/_imagery.scss b/platform/commonUI/general/res/sass/features/_imagery.scss index 90198aae94..21b269b3fa 100644 --- a/platform/commonUI/general/res/sass/features/_imagery.scss +++ b/platform/commonUI/general/res/sass/features/_imagery.scss @@ -15,7 +15,7 @@ margin-bottom: $interiorMargin; } .l-image-main-controlbar { - &.l-flex-row { @include align-items(center); } + &.l-flex-row { align-items: center; } } } diff --git a/platform/commonUI/general/res/sass/forms/_channel-selector.scss b/platform/commonUI/general/res/sass/forms/_channel-selector.scss index fbdfccb32e..fa7e58c716 100644 --- a/platform/commonUI/general/res/sass/forms/_channel-selector.scss +++ b/platform/commonUI/general/res/sass/forms/_channel-selector.scss @@ -34,13 +34,10 @@ } .btns-add-remove { -// background: rgba(#ff0000, 0.3);; margin-top: 150px; .s-button { display: block; - //font-size: 1.5em; margin-bottom: $interiorMargin; - //padding: 10px; text-align: center; } } diff --git a/platform/commonUI/general/res/sass/forms/_elems.scss b/platform/commonUI/general/res/sass/forms/_elems.scss index c298b45b81..d6f0063f72 100644 --- a/platform/commonUI/general/res/sass/forms/_elems.scss +++ b/platform/commonUI/general/res/sass/forms/_elems.scss @@ -45,7 +45,7 @@ &.grows { .l-section-body, .form-row { - @include flex(1 1 auto); + flex: 1 1 auto; .wrapper { height: 100%; } @@ -87,7 +87,7 @@ .controls { order: 2; position: relative; - @include flex(1 1 auto); + flex: 1 1 auto; .l-composite-control { &.l-checkbox { @@ -124,16 +124,16 @@ >.label, >.controls { line-height: inherit; - min-height: inherit;; + min-height: inherit; } >.label { - @include flex(1 1 auto); + flex: 1 1 auto; min-width: 0; width: auto; order: 2; } >.controls { - @include flex(0 0 auto); + flex: 0 0 auto; margin-right: $interiorMargin; order: 1; } @@ -141,7 +141,7 @@ .l-controls-under.l-flex-row { // Change to use column layout - @include flex-direction(column); + flex-direction: column; .flex-elem { margin-bottom: $interiorMarginLg; } @@ -190,19 +190,19 @@ ul { margin-bottom: $interiorMarginLg; li { - @include display(flex); - @include flex-wrap(wrap); - @include align-items(center); + display: flex; + flex-wrap: wrap; + align-items: center; label, .control { - @include display(flex); + display: flex; } label { line-height: inherit; width: $labelW; } .controls { - @include flex-grow(1); + flex-grow: 1; margin-left: $interiorMargin; input[type="text"], input[type="search"], @@ -232,14 +232,14 @@ &.controls-first { .control { - @include flex-grow(0); + flex-grow: 0; margin-right: $interiorMargin; min-width: 0; order: 1; width: auto; } label { - @include flex-grow(1); + flex-grow: 1; order: 2; width: auto; } diff --git a/platform/commonUI/general/res/sass/forms/_filter.scss b/platform/commonUI/general/res/sass/forms/_filter.scss index 3c0051b4dc..3c1f381f9d 100644 --- a/platform/commonUI/general/res/sass/forms/_filter.scss +++ b/platform/commonUI/general/res/sass/forms/_filter.scss @@ -101,7 +101,7 @@ line-height: inherit; position: absolute; top: 50%; - @include transform(translateY(-50%)); + transform: translateY(-50%); z-index: 1; } diff --git a/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss b/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss index 7036e9c542..b62b077aea 100644 --- a/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss +++ b/platform/commonUI/general/res/sass/helpers/_wait-spinner.scss @@ -20,7 +20,7 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ @mixin spinner($b: 5px, $c: $colorKey) { - @include transform-origin(center); + transform-origin: center; @include animation-name(rotation-centered); @include animation-duration(0.5s); @include animation-iteration-count(infinite); diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss index 7d19ed0ce4..16ea95cae6 100644 --- a/platform/commonUI/general/res/sass/items/_item.scss +++ b/platform/commonUI/general/res/sass/items/_item.scss @@ -85,14 +85,14 @@ z-index: 1; .item-type, .t-item-icon { - @include transform(translateX(-50%) translateY(-55%)); + transform: translateX(-50%) translateY(-55%); position: absolute; top: 50%; left: 50%; font-size: $iconD * 0.95; &.l-icon-link { .t-item-icon-glyph { &:after { - @include transform(scale(0.25)); + transform: scale(0.25); } } } diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss index fef5672ebc..78d6f796e8 100644 --- a/platform/commonUI/general/res/sass/mobile/_layout.scss +++ b/platform/commonUI/general/res/sass/mobile/_layout.scss @@ -138,7 +138,7 @@ body.phone.portrait { } .pane.right.items { left: 0 !important; - @include transform(translateX($proporMenuOnly)); + transform: translateX($proporMenuOnly); .holder-object-and-inspector { opacity: 0; } diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss index 891dd0a17e..7c81ae6ff5 100644 --- a/platform/commonUI/general/res/sass/mobile/_tree.scss +++ b/platform/commonUI/general/res/sass/mobile/_tree.scss @@ -34,7 +34,18 @@ body.touch { line-height: $mobileTreeItemH !important; .view-control { font-size: 1em; - width: ceil($mobileTreeItemH * 0.5); + 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; diff --git a/platform/commonUI/general/res/sass/overlay/_overlay.scss b/platform/commonUI/general/res/sass/overlay/_overlay.scss index 417b45114d..e5f657cff5 100644 --- a/platform/commonUI/general/res/sass/overlay/_overlay.scss +++ b/platform/commonUI/general/res/sass/overlay/_overlay.scss @@ -89,7 +89,7 @@ > .abs.outer-holder { @include desktopandtablet { $max: 1280px; - @include transform(translateX(-50%) translateY(-50%)); + transform: translate(-50%, -50%); border-radius: $overlayCr; top: 50%; right: auto; bottom: auto; left: 50%; width: 70%; height: 70%; @@ -101,7 +101,7 @@ .editor .form .form-row.l-flex-row { // Display elements in a columnar view - @include flex-direction(column); + flex-direction: column; > .flex-elem { &:not(:first-child) { margin-top: $interiorMargin; diff --git a/platform/commonUI/general/res/sass/plots/_plots-main.scss b/platform/commonUI/general/res/sass/plots/_plots-main.scss index 887decba17..ec1cd76786 100644 --- a/platform/commonUI/general/res/sass/plots/_plots-main.scss +++ b/platform/commonUI/general/res/sass/plots/_plots-main.scss @@ -152,8 +152,8 @@ &.l-plot-y-label { $x: -50%; $r: -90deg; - @include transform-origin(50% 0); - @include transform(translateX($x) rotate($r)); + transform-origin: 50% 0; + transform: translateX($x) rotate($r); display: inline-block; margin-left: $interiorMargin; // Kick off the left edge left: 0; @@ -172,13 +172,13 @@ } .gl-plot-x-options { - @include transform(translateX(-50%)); + transform: translateX(-50%); bottom: 0; left: 50%; } .gl-plot-y-options { - @include transform(translateY(-50%)); + transform: translateY(-50%); min-width: 150px; // Need this due to enclosure of .select top: 50%; left: $plotYLabelW + $interiorMargin * 2; diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss index e72c92ef49..8c3e3bc455 100644 --- a/platform/commonUI/general/res/sass/search/_search.scss +++ b/platform/commonUI/general/res/sass/search/_search.scss @@ -152,7 +152,7 @@ opacity: 1; } .load-more-button { - @include transform(translateX(-50%)); + transform: translateX(-50%); display: inline-block; margin-top: $interiorMargin; padding: 0 $interiorMarginLg; diff --git a/platform/commonUI/general/res/sass/user-environ/_frame.scss b/platform/commonUI/general/res/sass/user-environ/_frame.scss index 242b3a9e7e..dcf1b85e7d 100644 --- a/platform/commonUI/general/res/sass/user-environ/_frame.scss +++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss @@ -142,7 +142,7 @@ .l-hyperlink.s-button { .label { @include ellipsize(); - @include transform(translateY(-50%)); + transform: translateY(-50%); padding: 0 $interiorMargin; position: absolute; min-width: 0; diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss index 690b30b191..3ed6f4d032 100644 --- a/platform/commonUI/general/res/sass/user-environ/_layout.scss +++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss @@ -159,20 +159,20 @@ body.desktop .pane .mini-tab-icon.toggle-pane { &.toggle-tree.anchor-left { left: 0; - @include transform(translateX(-1 * $paneExpandedOffset)); + transform: translateX(-1 * $paneExpandedOffset); &.collapsed { - @include transform(translateX(-1 * $ueCollapsedPaneEdgeM)); + transform: translateX(-1 * $ueCollapsedPaneEdgeM); } } &.toggle-inspect.anchor-right { right: 0; - @include transform(translateX($paneExpandedOffset)); + transform: translateX($paneExpandedOffset); &.flush-right { - @include transform(translateX(($uePaneMiniTabW + ceil($splitterD / 2)))); + transform: translateX(($uePaneMiniTabW + ceil($splitterD / 2))); } &.collapsed { - @include transform(translateX($ueCollapsedPaneEdgeM)); + transform: translateX($ueCollapsedPaneEdgeM); } } } diff --git a/platform/features/conductor/core/res/sass/_time-conductor-base.scss b/platform/features/conductor/core/res/sass/_time-conductor-base.scss index ce0d6b8032..4222936132 100644 --- a/platform/features/conductor/core/res/sass/_time-conductor-base.scss +++ b/platform/features/conductor/core/res/sass/_time-conductor-base.scss @@ -55,7 +55,7 @@ div[class*="hand"] { $handW: 2px; $handH: $d * 0.4; - @include transform(translate(-50%, -50%)); + transform: translate(-50%, -50%); @include animation-iteration-count(infinite); @include animation-timing-function(linear); position: absolute; @@ -258,7 +258,7 @@ align-items: center; margin-top: $interiorMargin; .l-time-conductor-zoom-w { - @include justify-content(flex-end); + justify-content: flex-end; .time-conductor-zoom { height: $r3H; min-width: 100px; @@ -327,7 +327,7 @@ $i: $glyph-icon-calendar; .time-conductor-icon div[class*="hand"] { &.hand-little { - @include transform(rotate(120deg)); + transform: rotate(120deg); } } .mode-selector .s-menu-button:before { diff --git a/platform/features/conductor/core/res/sass/_time-of-interest.scss b/platform/features/conductor/core/res/sass/_time-of-interest.scss index ebe8ee0a1e..c17405114a 100644 --- a/platform/features/conductor/core/res/sass/_time-of-interest.scss +++ b/platform/features/conductor/core/res/sass/_time-of-interest.scss @@ -29,7 +29,7 @@ mct-include.l-toi-holder, mct-include.l-toi-holder { $blockerFadeW: $toiBlockerFadeW; - @include transform(translateX(-50%)); + transform: translateX(-50%); color: $toiColorBg; position: absolute; top: 0; @@ -66,7 +66,7 @@ mct-include.l-toi-holder { box-sizing: content-box; height: $toiH; left: $toiPad * -2; - @include transform(translateY(-50%)); top: 50%; + transform: translateY(-50%); top: 50%; padding: $toiPad; z-index: 1; @@ -207,7 +207,7 @@ table { border-radius: 20%; height: auto; padding: $toiPad; - @include transform(translate(-50%, -50%)); + transform: translate(-50%, -50%); left: 50%; right: auto; top: 0; .l-toi-buttons { padding: 1px; @@ -233,7 +233,7 @@ table { z-index: 3; .l-toi { - @include transform(translateY(100%)); + transform: translateY(100%); } @@ -257,13 +257,13 @@ table { } &:before { - @include transform(translate(-50%, $linesVOffset * -1)); + transform: translate(-50%, $linesVOffset * -1); top: 0px; bottom: auto; } &:after { - @include transform(translate(-50%, $linesVOffset)); + transform: translate(-50%, $linesVOffset); top: auto; bottom: 0px; } diff --git a/platform/features/timeline/res/sass/_timeline-thematic.scss b/platform/features/timeline/res/sass/_timeline-thematic.scss index 09af6251f2..e8b77da2c5 100644 --- a/platform/features/timeline/res/sass/_timeline-thematic.scss +++ b/platform/features/timeline/res/sass/_timeline-thematic.scss @@ -53,7 +53,7 @@ width: $d; position: absolute; top: 0; - @include transform(translateX(-50%)); + transform: translateX(-50%); } &:before { // Icon blocker diff --git a/platform/features/timeline/res/sass/_timelines.scss b/platform/features/timeline/res/sass/_timelines.scss index 06e3492f2c..769cf26de2 100644 --- a/platform/features/timeline/res/sass/_timelines.scss +++ b/platform/features/timeline/res/sass/_timelines.scss @@ -177,7 +177,7 @@ top: 20px; bottom: 5px; .l-labels-holder { @include absPosDefault(); - @include justify-content(space-between); + justify-content: space-between; left: $m; .t-resource-graph-tick-label { font-size: 0.9em;