mirror of
https://github.com/nasa/openmct.git
synced 2024-12-20 21:53:08 +00:00
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;
This commit is contained in:
Charles Hacskaylo
Pete Richards
parent
8c739e9fd9
commit
f4271c96a3
@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 */
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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%);
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
margin-bottom: $interiorMargin;
|
||||
}
|
||||
.l-image-main-controlbar {
|
||||
&.l-flex-row { @include align-items(center); }
|
||||
&.l-flex-row { align-items: center; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -101,7 +101,7 @@
|
||||
line-height: inherit;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@include transform(translateY(-50%));
|
||||
transform: translateY(-50%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
width: $d;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@include transform(translateX(-50%));
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
&:before {
|
||||
// Icon blocker
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user