ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-30 09:58:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Review SCSS refactoring for to-be-deprecated Bourbon functions (#1959)

Browse Source 
* [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;
This commit is contained in:
Charles Hacskaylo 2018-04-20 10:18:29 -07:00 committed by Pete Richards
parent 8c739e9fd9
commit f4271c96a3
27 changed files with 147 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
example/styleguide/res/sass/_style-guide-base.scss
View File

@ -101,11 +101,11 @@
padding-top: 1em; padding-top: 1em;
.cols { .cols {
@include display(flex); display: flex;
@include flex-direction(row); flex-direction: row;
.col { .col {
@include flex(1 1 auto); flex: 1 1 auto;
&:not(:last-child) { &:not(:last-child) {
$v: $interiorMargin * 4; $v: $interiorMargin * 4;
border-right: 1px solid $colorInteriorBorder; border-right: 1px solid $colorInteriorBorder;
@ -199,7 +199,7 @@
border-radius: 15%; border-radius: 15%;
position: absolute; position: absolute;
left: 50%; left: 50%;
@include transform(translateX(-50%)); transform: translateX(-50%);
} }
} }
} }

60
platform/commonUI/general/res/sass/_animations.scss
View File

@ -1,91 +1,91 @@
@include keyframes(rotation) { @include keyframes(rotation) {
100% { @include transform(rotate(360deg)); } 100% { transform: rotate(360deg); }
} }
@include keyframes(rotation-centered) { @include keyframes(rotation-centered) {
0% { @include transform(translate(-50%, -50%) rotate(0deg)); } 0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { @include transform(translate(-50%, -50%) rotate(360deg)); } 100% { transform: translate(-50%, -50%) rotate(360deg); }
} }
@include keyframes(clock-hands) { @include keyframes(clock-hands) {
0% { @include transform(translate(-50%, -50%) rotate(0deg)); } 0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { @include transform(translate(-50%, -50%) rotate(360deg)); } 100% { transform: translate(-50%, -50%) rotate(360deg); }
} }
@include keyframes(clock-hands-sticky) { @include keyframes(clock-hands-sticky) {
0% { 0% {
@include transform(translate(-50%, -50%) rotate(0deg)); transform: translate(-50%, -50%) rotate(0deg);
} }
7% { 7% {
@include transform(translate(-50%, -50%) rotate(0deg)); transform: translate(-50%, -50%) rotate(0deg);
} }
8% { 8% {
@include transform(translate(-50%, -50%) rotate(30deg)); transform: translate(-50%, -50%) rotate(30deg);
} }
15% { 15% {
@include transform(translate(-50%, -50%) rotate(30deg)); transform: translate(-50%, -50%) rotate(30deg);
} }
16% { 16% {
@include transform(translate(-50%, -50%) rotate(60deg)); transform: translate(-50%, -50%) rotate(60deg);
} }
24% { 24% {
@include transform(translate(-50%, -50%) rotate(60deg)); transform: translate(-50%, -50%) rotate(60deg);
} }
25% { 25% {
@include transform(translate(-50%, -50%) rotate(90deg)); transform: translate(-50%, -50%) rotate(90deg);
} }
32% { 32% {
@include transform(translate(-50%, -50%) rotate(90deg)); transform: translate(-50%, -50%) rotate(90deg);
} }
33% { 33% {
@include transform(translate(-50%, -50%) rotate(120deg)); transform: translate(-50%, -50%) rotate(120deg);
} }
40% { 40% {
@include transform(translate(-50%, -50%) rotate(120deg)); transform: translate(-50%, -50%) rotate(120deg);
} }
41% { 41% {
@include transform(translate(-50%, -50%) rotate(150deg)); transform: translate(-50%, -50%) rotate(150deg);
} }
49% { 49% {
@include transform(translate(-50%, -50%) rotate(150deg)); transform: translate(-50%, -50%) rotate(150deg);
} }
50% { 50% {
@include transform(translate(-50%, -50%) rotate(180deg)); transform: translate(-50%, -50%) rotate(180deg);
} }
57% { 57% {
@include transform(translate(-50%, -50%) rotate(180deg)); transform: translate(-50%, -50%) rotate(180deg);
} }
58% { 58% {
@include transform(translate(-50%, -50%) rotate(210deg)); transform: translate(-50%, -50%) rotate(210deg);
} }
65% { 65% {
@include transform(translate(-50%, -50%) rotate(210deg)); transform: translate(-50%, -50%) rotate(210deg);
} }
66% { 66% {
@include transform(translate(-50%, -50%) rotate(240deg)); transform: translate(-50%, -50%) rotate(240deg);
} }
74% { 74% {
@include transform(translate(-50%, -50%) rotate(240deg)); transform: translate(-50%, -50%) rotate(240deg);
} }
75% { 75% {
@include transform(translate(-50%, -50%) rotate(270deg)); transform: translate(-50%, -50%) rotate(270deg);
} }
82% { 82% {
@include transform(translate(-50%, -50%) rotate(270deg)); transform: translate(-50%, -50%) rotate(270deg);
} }
83% { 83% {
@include transform(translate(-50%, -50%) rotate(300deg)); transform: translate(-50%, -50%) rotate(300deg);
} }
90% { 90% {
@include transform(translate(-50%, -50%) rotate(300deg)); transform: translate(-50%, -50%) rotate(300deg);
} }
91% { 91% {
@include transform(translate(-50%, -50%) rotate(330deg)); transform: translate(-50%, -50%) rotate(330deg);
} }
99% { 99% {
@include transform(translate(-50%, -50%) rotate(330deg)); transform: translate(-50%, -50%) rotate(330deg);
} }
100% { 100% {
@include transform(translate(-50%, -50%) rotate(360deg)); transform: translate(-50%, -50%) rotate(360deg);
} }
} }

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

@ -94,19 +94,19 @@
/********************************************* FLEX STYLES */ /********************************************* FLEX STYLES */
.l-flex-row, .l-flex-row,
.l-flex-col { .l-flex-col {
@include display(flex); display: flex;
@include flex-wrap(nowrap); flex-wrap: nowrap;
.flex-elem { .flex-elem {
min-height: 0; // Needed to allow element to shrink within parent min-height: 0; // Needed to allow element to shrink within parent
position: relative; position: relative;
&:not(.grows) { &:not(.grows) {
@include flex(0 0 auto); flex: 0 0 auto;
&.flex-can-shrink { &.flex-can-shrink {
@include flex(0 1 auto); flex: 0 1 auto;
} }
} }
&.grows { &.grows {
@include flex(1 1 auto); flex: 1 1 auto;
} }
&.contents-align-right { &.contents-align-right {
text-align: right; text-align: right;
@ -114,25 +114,25 @@
} }
.flex-container { .flex-container {
// Apply to wrapping elements, mct-includes, etc. // Apply to wrapping elements, mct-includes, etc.
@include display(flex); display: flex;
@include flex-wrap(nowrap); flex-wrap: nowrap;
@include flex(1 1 auto); flex: 1 1 auto;
min-height:0; min-height:0;
} }
} }
.l-flex-row { .l-flex-row {
@include flex-direction(row); flex-direction: row;
&.flex-elem { @include flex(1 1 auto); } &.flex-elem { flex: 1 1 auto; }
> .flex-elem { > .flex-elem {
min-width: 0; min-width: 0;
&.holder:not(:last-child) { margin-right: $interiorMargin; } &.holder:not(:last-child) { margin-right: $interiorMargin; }
} }
.flex-container { @include flex-direction(row); } .flex-container { flex-direction: row; }
} }
.l-flex-col { .l-flex-col {
@include flex-direction(column); flex-direction: column;
> .flex-elem { > .flex-elem {
min-height: 0; min-height: 0;
&.holder:not(:last-child) { margin-bottom: $interiorMarginLg; } &.holder:not(:last-child) { margin-bottom: $interiorMarginLg; }
@ -142,15 +142,15 @@
flex-direction: column; flex-direction: column;
//overflow: hidden !important; //overflow: hidden !important;
} }
.flex-container { @include flex-direction(column); } .flex-container { flex-direction: column; }
} }
.flex-fixed { .flex-fixed {
@include flex(0 0 auto); flex: 0 0 auto;
} }
.flex-justify-end { .flex-justify-end {
@include justify-content(flex-end); justify-content: flex-end;
} }
/********************************************* POPUPS */ /********************************************* POPUPS */

4
platform/commonUI/general/res/sass/_icons.scss
View File

@ -83,8 +83,8 @@
height: auto; width: auto; height: auto; width: auto;
position: absolute; position: absolute;
left: 0; top: 0; right: 0; bottom: 20%; left: 0; top: 0; right: 0; bottom: 20%;
@include transform-origin(bottom left); transform-origin: bottom left;
@include transform(scale(0.3)); transform: scale(0.3);
z-index: 2; z-index: 2;
} }
} }

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

@ -53,7 +53,6 @@
.l-inspector-part { .l-inspector-part {
box-sizing: border-box; box-sizing: border-box;
padding-right: $interiorMargin; padding-right: $interiorMargin;
.tree .form { .tree .form {
margin-left: $treeVCW + $interiorMarginLg; margin-left: $treeVCW + $interiorMarginLg;
} }
@ -79,8 +78,7 @@
} }
} }
.form-row { .form-row {
// To be replaced with .inspector-config, see below. align-items: center;
@include align-items(center);
border: none !important; border: none !important;
margin-bottom: 0 !important; margin-bottom: 0 !important;
padding: $interiorMarginSm 0; padding: $interiorMarginSm 0;
@ -101,12 +99,15 @@
position: relative; position: relative;
} }
ul li {
margin-bottom: $interiorMarginLg;
}
em.t-inspector-part-header { em.t-inspector-part-header {
border-radius: $basicCr; border-radius: $basicCr;
background-color: $colorInspectorSectionHeaderBg; background-color: $colorInspectorSectionHeaderBg;
color: $colorInspectorSectionHeaderFg; color: $colorInspectorSectionHeaderFg;
margin-top: $interiorMarginLg; margin-bottom: $interiorMargin;
//margin-bottom: $interiorMargin;
padding: floor($formTBPad * .75) $formLRPad; padding: floor($formTBPad * .75) $formLRPad;
text-transform: uppercase; text-transform: uppercase;
} }
@ -200,102 +201,3 @@ mct-representation:not(.s-status-editing) .l-inspect {
pointer-events: inherit; 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;
}

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

@ -382,7 +382,7 @@
/* This doesn't work on an element inside an element with absolute positioning that has height: auto */ /* This doesn't work on an element inside an element with absolute positioning that has height: auto */
//position: relative; //position: relative;
top: 50%; top: 50%;
@include transform(translateY(-50%)); transform: translateY(-50%);
} }
@mixin verticalCenterBlock($holderH, $itemH) { @mixin verticalCenterBlock($holderH, $itemH) {

4
platform/commonUI/general/res/sass/_object-label.scss
View File

@ -22,8 +22,8 @@
// mct-representation surrounding an object-label key="'label'" // mct-representation surrounding an object-label key="'label'"
.rep-object-label { .rep-object-label {
@include flex-direction(row); flex-direction: row;
@include flex(1 1 auto); flex: 1 1 auto;
height: inherit; height: inherit;
line-height: inherit; line-height: inherit;
min-width: 0; min-width: 0;

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

@ -55,7 +55,7 @@
.widget-rule-header { .widget-rule-header {
@extend .l-flex-row; @extend .l-flex-row;
@include align-items(center); align-items: center;
margin-bottom: $interiorMargin; margin-bottom: $interiorMargin;
> .flex-elem { > .flex-elem {
&:not(:first-child) { &:not(:first-child) {
@ -103,7 +103,7 @@
.l-compact-form label { .l-compact-form label {
$ruleLabelW: 40%; $ruleLabelW: 40%;
$ruleLabelMaxW: 150px; $ruleLabelMaxW: 150px;
@include display(flex); display: flex;
max-width: $ruleLabelMaxW; max-width: $ruleLabelMaxW;
width: $ruleLabelW; width: $ruleLabelW;
} }
@ -177,8 +177,8 @@
ul { ul {
&:last-child { margin: 0; } &:last-child { margin: 0; }
li { li {
@include align-items(flex-start); align-items: flex-start;
@include flex-wrap(nowrap); flex-wrap: nowrap;
line-height: 230%; // Provide enough space when controls wrap line-height: 230%; // Provide enough space when controls wrap
padding: 2px 0; padding: 2px 0;
&:not(.widget-rule-header) { &:not(.widget-rule-header) {
@ -233,7 +233,7 @@
.l-widget-thumb-wrapper { .l-widget-thumb-wrapper {
@extend .l-flex-row; @extend .l-flex-row;
@include align-items(center); align-items: center;
> span { display: block; } > span { display: block; }
.grippy-holder, .grippy-holder,
.view-control { .view-control {
@ -243,18 +243,18 @@
} }
.widget-thumb { .widget-thumb {
@include flex(1 1 auto); flex: 1 1 auto;
width: 100%; width: 100%;
} }
} }
.rule-title { .rule-title {
@include flex(0 1 auto); flex: 0 1 auto;
color: pullForward($colorBodyFg, 50%); color: pullForward($colorBodyFg, 50%);
} }
.rule-description { .rule-description {
@include flex(1 1 auto); flex: 1 1 auto;
@include ellipsize(); @include ellipsize();
color: pushBack($colorBodyFg, 20%); color: pushBack($colorBodyFg, 20%);
} }

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

@ -356,7 +356,7 @@ input[type="text"].s-input-inline,
} }
} }
&:before { &:before {
@include transform(translateY(-50%)); transform: translateY(-50%);
color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent)); color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent));
display: block; display: block;
pointer-events: none; pointer-events: none;
@ -434,7 +434,7 @@ input[type="text"].s-input-inline,
.context-available { .context-available {
font-size: 0.7em; font-size: 0.7em;
@include flex(0 0 1); flex: 0 0 1;
} }
.t-object-alert { .t-object-alert {
@ -675,14 +675,14 @@ input[type="range"] {
.l-calendar { .l-calendar {
$colorMuted: pushBack($colorMenuFg, 30%); $colorMuted: pushBack($colorMenuFg, 30%);
ul.l-cal-row { ul.l-cal-row {
@include display(flex); display: flex;
@include flex-flow(row nowrap); flex-flow: row nowrap;
margin-top: 1px; margin-top: 1px;
&:first-child { &:first-child {
margin-top: 0; margin-top: 0;
} }
li { li {
@include flex(1 0); flex: 1 0;
margin-left: 1px; margin-left: 1px;
padding: $interiorMargin; padding: $interiorMargin;
text-align: center; text-align: center;
@ -763,10 +763,10 @@ textarea {
&:before { &:before {
position: absolute; position: absolute;
@include trans-prop-nice(transform, 100ms); @include trans-prop-nice(transform, 100ms);
@include transform-origin(center); transform-origin: center;
} }
&.expanded:before { &.expanded:before {
@include transform(rotate(90deg)); transform: rotate(90deg);
} }
} }

34
platform/commonUI/general/res/sass/controls/_messages.scss
View File

@ -157,16 +157,16 @@
$lh: $ueFooterH - ($m*2) - 1; $lh: $ueFooterH - ($m*2) - 1;
box-sizing: border-box; box-sizing: border-box;
@include ellipsize(); @include ellipsize();
@include display(flex); display: flex;
@include flex-direction(row); flex-direction: row;
@include align-items(center); align-items: center;
position: absolute; position: absolute;
top: $m; right: auto; bottom: $m; left: 50%; top: $m; right: auto; bottom: $m; left: 50%;
height: auto; width: auto; height: auto; width: auto;
line-height: $lh; line-height: $lh;
max-width: 300px; max-width: 300px;
padding: 0 $interiorMargin 0 $interiorMargin; padding: 0 $interiorMargin 0 $interiorMargin;
@include transform(translateX(-50%)); transform: translateX(-50%);
&.minimized { &.minimized {
@include transition-property(left, opacity); @include transition-property(left, opacity);
@ -185,7 +185,7 @@
} }
.banner-elem { .banner-elem {
@include flex(0 1 auto); flex: 0 1 auto;
margin-left: $interiorMargin; margin-left: $interiorMargin;
} }
a { a {
@ -250,14 +250,14 @@
// Archetypal message // Archetypal message
.l-message { .l-message {
$iconW: 32px; $iconW: 32px;
@include display(flex); display: flex;
@include flex-direction(row); flex-direction: row;
@include align-items(stretch); align-items: stretch;
padding: $interiorMarginLg; padding: $interiorMarginLg;
&:before { &:before {
// Icon // Icon
@include flex(0 1 auto); flex: 0 1 auto;
@include txtShdw($shdwStatusIc); @include txtShdw($shdwStatusIc);
@extend .icon-bell; @extend .icon-bell;
color: $colorStatusDefault; color: $colorStatusDefault;
@ -283,9 +283,9 @@
.w-message-contents { .w-message-contents {
@include flex(1 1 auto); flex: 1 1 auto;
@include display(flex); display: flex;
@include flex-direction(column); flex-direction: column;
> div, > div,
> span { > span {
@ -294,7 +294,7 @@
} }
.message-body { .message-body {
@include flex(1 1 100%); flex: 1 1 100%;
} }
} }
@ -331,8 +331,8 @@
// In a list // In a list
.t-message-list { .t-message-list {
@include absPosDefault(); @include absPosDefault();
@include display(flex); display: flex;
@include flex-direction(column); flex-direction: column;
> div, > div,
> span { > span {
@ -340,7 +340,7 @@
} }
.w-messages { .w-messages {
@include flex(1 1 100%); flex: 1 1 100%;
overflow-y: auto; overflow-y: auto;
padding-right: $interiorMargin; padding-right: $interiorMargin;
} }
@ -360,7 +360,7 @@
@include phonePortrait { @include phonePortrait {
.t-message-single .l-message, .t-message-single .l-message,
.t-message-single.l-message { .t-message-single.l-message {
@include flex-direction(column); flex-direction: column;
&:before { &:before {
margin-right: 0; margin-right: 0;
margin-bottom: $interiorMarginLg; margin-bottom: $interiorMarginLg;

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

@ -15,7 +15,7 @@
margin-bottom: $interiorMargin; margin-bottom: $interiorMargin;
} }
.l-image-main-controlbar { .l-image-main-controlbar {
&.l-flex-row { @include align-items(center); } &.l-flex-row { align-items: center; }
} }
} }

3
platform/commonUI/general/res/sass/forms/_channel-selector.scss
View File

@ -34,13 +34,10 @@
} }
.btns-add-remove { .btns-add-remove {
// background: rgba(#ff0000, 0.3);;
margin-top: 150px; margin-top: 150px;
.s-button { .s-button {
display: block; display: block;
//font-size: 1.5em;
margin-bottom: $interiorMargin; margin-bottom: $interiorMargin;
//padding: 10px;
text-align: center; text-align: center;
} }
} }

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

@ -45,7 +45,7 @@
&.grows { &.grows {
.l-section-body, .l-section-body,
.form-row { .form-row {
@include flex(1 1 auto); flex: 1 1 auto;
.wrapper { .wrapper {
height: 100%; height: 100%;
} }
@ -87,7 +87,7 @@
.controls { .controls {
order: 2; order: 2;
position: relative; position: relative;
@include flex(1 1 auto); flex: 1 1 auto;
.l-composite-control { .l-composite-control {
&.l-checkbox { &.l-checkbox {
@ -124,16 +124,16 @@
>.label, >.label,
>.controls { >.controls {
line-height: inherit; line-height: inherit;
min-height: inherit;; min-height: inherit;
} }
>.label { >.label {
@include flex(1 1 auto); flex: 1 1 auto;
min-width: 0; min-width: 0;
width: auto; width: auto;
order: 2; order: 2;
} }
>.controls { >.controls {
@include flex(0 0 auto); flex: 0 0 auto;
margin-right: $interiorMargin; margin-right: $interiorMargin;
order: 1; order: 1;
} }
@ -141,7 +141,7 @@
.l-controls-under.l-flex-row { .l-controls-under.l-flex-row {
// Change to use column layout // Change to use column layout
@include flex-direction(column); flex-direction: column;
.flex-elem { .flex-elem {
margin-bottom: $interiorMarginLg; margin-bottom: $interiorMarginLg;
} }
@ -190,19 +190,19 @@
ul { ul {
margin-bottom: $interiorMarginLg; margin-bottom: $interiorMarginLg;
li { li {
@include display(flex); display: flex;
@include flex-wrap(wrap); flex-wrap: wrap;
@include align-items(center); align-items: center;
label, label,
.control { .control {
@include display(flex); display: flex;
} }
label { label {
line-height: inherit; line-height: inherit;
width: $labelW; width: $labelW;
} }
.controls { .controls {
@include flex-grow(1); flex-grow: 1;
margin-left: $interiorMargin; margin-left: $interiorMargin;
input[type="text"], input[type="text"],
input[type="search"], input[type="search"],
@ -232,14 +232,14 @@
&.controls-first { &.controls-first {
.control { .control {
@include flex-grow(0); flex-grow: 0;
margin-right: $interiorMargin; margin-right: $interiorMargin;
min-width: 0; min-width: 0;
order: 1; order: 1;
width: auto; width: auto;
} }
label { label {
@include flex-grow(1); flex-grow: 1;
order: 2; order: 2;
width: auto; width: auto;
} }

2
platform/commonUI/general/res/sass/forms/_filter.scss
View File

@ -101,7 +101,7 @@
line-height: inherit; line-height: inherit;
position: absolute; position: absolute;
top: 50%; top: 50%;
@include transform(translateY(-50%)); transform: translateY(-50%);
z-index: 1; z-index: 1;
} }

2
platform/commonUI/general/res/sass/helpers/_wait-spinner.scss
View File

@ -20,7 +20,7 @@
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
@mixin spinner($b: 5px, $c: $colorKey) { @mixin spinner($b: 5px, $c: $colorKey) {
@include transform-origin(center); transform-origin: center;
@include animation-name(rotation-centered); @include animation-name(rotation-centered);
@include animation-duration(0.5s); @include animation-duration(0.5s);
@include animation-iteration-count(infinite); @include animation-iteration-count(infinite);

4
platform/commonUI/general/res/sass/items/_item.scss
View File

@ -85,14 +85,14 @@
z-index: 1; z-index: 1;
.item-type, .item-type,
.t-item-icon { .t-item-icon {
@include transform(translateX(-50%) translateY(-55%)); transform: translateX(-50%) translateY(-55%);
position: absolute; position: absolute;
top: 50%; left: 50%; top: 50%; left: 50%;
font-size: $iconD * 0.95; font-size: $iconD * 0.95;
&.l-icon-link { &.l-icon-link {
.t-item-icon-glyph { .t-item-icon-glyph {
&:after { &:after {
@include transform(scale(0.25)); transform: scale(0.25);
} }
} }
} }

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

@ -138,7 +138,7 @@ body.phone.portrait {
} }
.pane.right.items { .pane.right.items {
left: 0 !important; left: 0 !important;
@include transform(translateX($proporMenuOnly)); transform: translateX($proporMenuOnly);
.holder-object-and-inspector { .holder-object-and-inspector {
opacity: 0; opacity: 0;
} }

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

@ -34,7 +34,18 @@ body.touch {
line-height: $mobileTreeItemH !important; line-height: $mobileTreeItemH !important;
.view-control { .view-control {
font-size: 1em; 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 { .t-object-label {
line-height: inherit; line-height: inherit;

4
platform/commonUI/general/res/sass/overlay/_overlay.scss
View File

@ -89,7 +89,7 @@
> .abs.outer-holder { > .abs.outer-holder {
@include desktopandtablet { @include desktopandtablet {
$max: 1280px; $max: 1280px;
@include transform(translateX(-50%) translateY(-50%)); transform: translate(-50%, -50%);
border-radius: $overlayCr; border-radius: $overlayCr;
top: 50%; right: auto; bottom: auto; left: 50%; top: 50%; right: auto; bottom: auto; left: 50%;
width: 70%; height: 70%; width: 70%; height: 70%;
@ -101,7 +101,7 @@
.editor .form .form-row.l-flex-row { .editor .form .form-row.l-flex-row {
// Display elements in a columnar view // Display elements in a columnar view
@include flex-direction(column); flex-direction: column;
> .flex-elem { > .flex-elem {
&:not(:first-child) { &:not(:first-child) {
margin-top: $interiorMargin; margin-top: $interiorMargin;

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

@ -152,8 +152,8 @@
&.l-plot-y-label { &.l-plot-y-label {
$x: -50%; $x: -50%;
$r: -90deg; $r: -90deg;
@include transform-origin(50% 0); transform-origin: 50% 0;
@include transform(translateX($x) rotate($r)); transform: translateX($x) rotate($r);
display: inline-block; display: inline-block;
margin-left: $interiorMargin; // Kick off the left edge margin-left: $interiorMargin; // Kick off the left edge
left: 0; left: 0;
@ -172,13 +172,13 @@
} }
.gl-plot-x-options { .gl-plot-x-options {
@include transform(translateX(-50%)); transform: translateX(-50%);
bottom: 0; bottom: 0;
left: 50%; left: 50%;
} }
.gl-plot-y-options { .gl-plot-y-options {
@include transform(translateY(-50%)); transform: translateY(-50%);
min-width: 150px; // Need this due to enclosure of .select min-width: 150px; // Need this due to enclosure of .select
top: 50%; top: 50%;
left: $plotYLabelW + $interiorMargin * 2; left: $plotYLabelW + $interiorMargin * 2;

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

@ -152,7 +152,7 @@
opacity: 1; opacity: 1;
} }
.load-more-button { .load-more-button {
@include transform(translateX(-50%)); transform: translateX(-50%);
display: inline-block; display: inline-block;
margin-top: $interiorMargin; margin-top: $interiorMargin;
padding: 0 $interiorMarginLg; padding: 0 $interiorMarginLg;

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

@ -142,7 +142,7 @@
.l-hyperlink.s-button { .l-hyperlink.s-button {
.label { .label {
@include ellipsize(); @include ellipsize();
@include transform(translateY(-50%)); transform: translateY(-50%);
padding: 0 $interiorMargin; padding: 0 $interiorMargin;
position: absolute; position: absolute;
min-width: 0; min-width: 0;

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

@ -159,20 +159,20 @@ body.desktop .pane .mini-tab-icon.toggle-pane {
&.toggle-tree.anchor-left { &.toggle-tree.anchor-left {
left: 0; left: 0;
@include transform(translateX(-1 * $paneExpandedOffset)); transform: translateX(-1 * $paneExpandedOffset);
&.collapsed { &.collapsed {
@include transform(translateX(-1 * $ueCollapsedPaneEdgeM)); transform: translateX(-1 * $ueCollapsedPaneEdgeM);
} }
} }
&.toggle-inspect.anchor-right { &.toggle-inspect.anchor-right {
right: 0; right: 0;
@include transform(translateX($paneExpandedOffset)); transform: translateX($paneExpandedOffset);
&.flush-right { &.flush-right {
@include transform(translateX(($uePaneMiniTabW + ceil($splitterD / 2)))); transform: translateX(($uePaneMiniTabW + ceil($splitterD / 2)));
} }
&.collapsed { &.collapsed {
@include transform(translateX($ueCollapsedPaneEdgeM)); transform: translateX($ueCollapsedPaneEdgeM);
} }
} }
} }

6
platform/features/conductor/core/res/sass/_time-conductor-base.scss
View File

@ -55,7 +55,7 @@
div[class*="hand"] { div[class*="hand"] {
$handW: 2px; $handW: 2px;
$handH: $d * 0.4; $handH: $d * 0.4;
@include transform(translate(-50%, -50%)); transform: translate(-50%, -50%);
@include animation-iteration-count(infinite); @include animation-iteration-count(infinite);
@include animation-timing-function(linear); @include animation-timing-function(linear);
position: absolute; position: absolute;
@ -258,7 +258,7 @@
align-items: center; align-items: center;
margin-top: $interiorMargin; margin-top: $interiorMargin;
.l-time-conductor-zoom-w { .l-time-conductor-zoom-w {
@include justify-content(flex-end); justify-content: flex-end;
.time-conductor-zoom { .time-conductor-zoom {
height: $r3H; height: $r3H;
min-width: 100px; min-width: 100px;
@ -327,7 +327,7 @@
$i: $glyph-icon-calendar; $i: $glyph-icon-calendar;
.time-conductor-icon div[class*="hand"] { .time-conductor-icon div[class*="hand"] {
&.hand-little { &.hand-little {
@include transform(rotate(120deg)); transform: rotate(120deg);
} }
} }
.mode-selector .s-menu-button:before { .mode-selector .s-menu-button:before {

12
platform/features/conductor/core/res/sass/_time-of-interest.scss
View File

@ -29,7 +29,7 @@ mct-include.l-toi-holder,
mct-include.l-toi-holder { mct-include.l-toi-holder {
$blockerFadeW: $toiBlockerFadeW; $blockerFadeW: $toiBlockerFadeW;
@include transform(translateX(-50%)); transform: translateX(-50%);
color: $toiColorBg; color: $toiColorBg;
position: absolute; position: absolute;
top: 0; top: 0;
@ -66,7 +66,7 @@ mct-include.l-toi-holder {
box-sizing: content-box; box-sizing: content-box;
height: $toiH; height: $toiH;
left: $toiPad * -2; left: $toiPad * -2;
@include transform(translateY(-50%)); top: 50%; transform: translateY(-50%); top: 50%;
padding: $toiPad; padding: $toiPad;
z-index: 1; z-index: 1;
@ -207,7 +207,7 @@ table {
border-radius: 20%; border-radius: 20%;
height: auto; height: auto;
padding: $toiPad; padding: $toiPad;
@include transform(translate(-50%, -50%)); transform: translate(-50%, -50%);
left: 50%; right: auto; top: 0; left: 50%; right: auto; top: 0;
.l-toi-buttons { .l-toi-buttons {
padding: 1px; padding: 1px;
@ -233,7 +233,7 @@ table {
z-index: 3; z-index: 3;
.l-toi { .l-toi {
@include transform(translateY(100%)); transform: translateY(100%);
} }
@ -257,13 +257,13 @@ table {
} }
&:before { &:before {
@include transform(translate(-50%, $linesVOffset * -1)); transform: translate(-50%, $linesVOffset * -1);
top: 0px; top: 0px;
bottom: auto; bottom: auto;
} }
&:after { &:after {
@include transform(translate(-50%, $linesVOffset)); transform: translate(-50%, $linesVOffset);
top: auto; top: auto;
bottom: 0px; bottom: 0px;
} }

2
platform/features/timeline/res/sass/_timeline-thematic.scss
View File

@ -53,7 +53,7 @@
width: $d; width: $d;
position: absolute; position: absolute;
top: 0; top: 0;
@include transform(translateX(-50%)); transform: translateX(-50%);
} }
&:before { &:before {
// Icon blocker // Icon blocker

2
platform/features/timeline/res/sass/_timelines.scss
View File

@ -177,7 +177,7 @@
top: 20px; bottom: 5px; top: 20px; bottom: 5px;
.l-labels-holder { .l-labels-holder {
@include absPosDefault(); @include absPosDefault();
@include justify-content(space-between); justify-content: space-between;
left: $m; left: $m;
.t-resource-graph-tick-label { .t-resource-graph-tick-label {
font-size: 0.9em; font-size: 0.9em;