[Build] Switch compass to bourbon
Change mixin library to bourbon. Significantly reduces sass build time. https://github.com/nasa/openmctweb/issues/698
This commit is contained in:
@@ -34,7 +34,7 @@
|
||||
.cols {
|
||||
@include clearfix;
|
||||
.col {
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
@include clearfix;
|
||||
float: left;
|
||||
margin-left: $ueColMargin;
|
||||
@@ -94,7 +94,7 @@
|
||||
/********************************************* FLEX STYLES */
|
||||
.l-flex-row,
|
||||
.l-flex-col {
|
||||
@include display-flex;
|
||||
@include display(flex);
|
||||
@include flex-wrap(nowrap);
|
||||
.flex-elem {
|
||||
min-height: 0; // Needed to allow element to shrink within parent
|
||||
@@ -111,7 +111,7 @@
|
||||
}
|
||||
.flex-container {
|
||||
// Apply to wrapping elements, mct-includes, etc.
|
||||
@include display-flex;
|
||||
@include display(flex);
|
||||
@include flex-wrap(nowrap);
|
||||
@include flex(1 1 auto);
|
||||
min-height:0;
|
||||
@@ -144,4 +144,4 @@
|
||||
|
||||
.flex-justify-end {
|
||||
@include justify-content(flex-end);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -64,7 +64,7 @@
|
||||
white-space: nowrap;
|
||||
.l-autoflow-col {
|
||||
// @include test();
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
border-left: 1px solid $colorInteriorBorder;
|
||||
display: inline-block;
|
||||
// height: 100%;
|
||||
@@ -74,7 +74,7 @@
|
||||
width: $colW;
|
||||
.l-autoflow-row {
|
||||
// @include test(red);
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid rgba(#fff,0.05);
|
||||
display: block;
|
||||
height: $rowH;
|
||||
@@ -110,7 +110,7 @@
|
||||
width: auto;
|
||||
}
|
||||
&.r {
|
||||
@include border-radius($smallCr);
|
||||
border-radius: $smallCr;
|
||||
float: right;
|
||||
margin-left: $interiorMargin;
|
||||
padding-left: $valPad;
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
}
|
||||
|
||||
.top-bar .badge {
|
||||
@include border-radius($controlCr * 1.5);
|
||||
border-radius: $controlCr * 1.5;
|
||||
$h: $btnStdH; //$ueTopBarBtnH; // - 5px;
|
||||
font-size: 1.4em;
|
||||
height: $h;
|
||||
@@ -39,7 +39,7 @@
|
||||
|
||||
//.top-bar .btn-browse .badge {
|
||||
// Moved to _controls.scss .btn.browse-btn
|
||||
// @include border-radius($controlCr * 1.5);
|
||||
// border-radius: $controlCr * 1.5;
|
||||
// $d: 20px;
|
||||
// display: block;
|
||||
// font-size: 1em;
|
||||
@@ -53,7 +53,7 @@
|
||||
|
||||
.super-menu .badge {
|
||||
@include background-image(linear-gradient(lighten($colorCreateBtn, 10%), $colorCreateBtn));
|
||||
@include border-radius($controlCr);
|
||||
border-radius: $controlCr;
|
||||
@include boxShdwSubtle();
|
||||
// display: inline-block;
|
||||
// margin-right: 10px !important;
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
*****************************************************************************/
|
||||
.disabled,
|
||||
a.disabled {
|
||||
@include opacity($controlDisabledOpacity);
|
||||
opacity: $controlDisabledOpacity;
|
||||
pointer-events: none !important;
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
.l-fixed-position-box,
|
||||
.l-fixed-position-image,
|
||||
.l-fixed-position-text {
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -89,7 +89,7 @@
|
||||
.l-elem {
|
||||
//@include absPosDefault($p);
|
||||
//@include absPosDefault(0);
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
padding: 2px;
|
||||
//width: 50%;
|
||||
@@ -106,7 +106,7 @@
|
||||
// @include test(blue);
|
||||
// right: $p;
|
||||
// left: auto;
|
||||
@include border-radius($smallCr);
|
||||
border-radius: $smallCr;
|
||||
$valPad: 5px;
|
||||
float: right;
|
||||
margin-left: $interiorMargin;
|
||||
@@ -125,7 +125,7 @@
|
||||
|
||||
.l-fixed-position-item-handle {
|
||||
$brd: 1px solid $colorKey;
|
||||
// @include border-radius($controlCr);
|
||||
// border-radius: $controlCr;
|
||||
background: rgba($colorKey, 0.5);
|
||||
cursor: crosshair;
|
||||
border: $brd;
|
||||
|
||||
@@ -139,7 +139,7 @@ mct-container {
|
||||
}
|
||||
|
||||
.ds {
|
||||
@include box-shadow(rgba(#000, 0.7) 0 4px 10px 2px);
|
||||
box-shadow: rgba(#000, 0.7) 0 4px 10px 2px;
|
||||
}
|
||||
|
||||
.hide,
|
||||
|
||||
@@ -93,7 +93,7 @@
|
||||
height: auto; width: auto;
|
||||
position: absolute;
|
||||
left: 0; top: 0; right: 0; bottom: 10%;
|
||||
@include transform-origin(bottom, left);
|
||||
@include transform-origin(bottom left);
|
||||
@include transform(scale(0.3));
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@@ -58,7 +58,7 @@
|
||||
}
|
||||
|
||||
ul {
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
padding-right: $interiorMargin;
|
||||
}
|
||||
|
||||
@@ -73,7 +73,7 @@
|
||||
}
|
||||
|
||||
em {
|
||||
@include border-radius($basicCr);
|
||||
border-radius: $basicCr;
|
||||
background-color: $colorInspectorSectionHeaderBg;
|
||||
color: $colorInspectorSectionHeaderFg;
|
||||
margin-bottom: $interiorMargin;
|
||||
@@ -99,7 +99,7 @@
|
||||
.inspector-location {
|
||||
.location-item {
|
||||
$h: 1.2em;
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
line-height: $h;
|
||||
|
||||
@@ -175,8 +175,8 @@
|
||||
|
||||
@mixin sliderTrack($bg: $scrollbarTrackColorBg) {
|
||||
//$b: 1px solid lighten($bg, 30%);
|
||||
@include border-radius(2px);
|
||||
@include box-sizing(border-box);
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
@include boxIncised(0.7);
|
||||
background-color: $bg;
|
||||
//border-bottom: $b;
|
||||
@@ -210,7 +210,7 @@
|
||||
}
|
||||
|
||||
@mixin boxIncised($sVal: 0.6, $inset: 5px) {
|
||||
@include box-shadow(inset rgba(black, $sVal) 0 1px $inset);
|
||||
box-shadow: inset rgba(black, $sVal) 0 1px $inset;
|
||||
}
|
||||
|
||||
@mixin boxOutline($c: lighten($colorBodyBg, 20%)) {
|
||||
@@ -219,24 +219,24 @@
|
||||
|
||||
@mixin boxShdw($sVal: rgba(black, 0.4) 0 0 3px) {
|
||||
@if $sVal != 'none' {
|
||||
@include box-shadow($sVal);
|
||||
box-shadow: $sVal;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin boxShdwSubtle($sVal: 0.2) {
|
||||
@if $sVal != 'none' {
|
||||
@include box-shadow(rgba(black, $sVal) 0 1px 2px);
|
||||
box-shadow: rgba(black, $sVal) 0 1px 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin boxShdwLarge($sVal: 0.7) {
|
||||
@if $sVal != 'none' {
|
||||
@include box-shadow(rgba(black, $sVal) 0 3px 10px);
|
||||
box-shadow: rgba(black, $sVal) 0 3px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin outerGlow($color: #fff, $sVal: 0.3) {
|
||||
@include box-shadow(rgba($color, $sVal) 0 0 30px);
|
||||
box-shadow: rgba($color, $sVal) 0 0 30px;
|
||||
}
|
||||
|
||||
@mixin linearGlow($deg: 0, $c: red, $a: 0.4) {
|
||||
@@ -249,18 +249,18 @@
|
||||
|
||||
@mixin txtShdw($sVal) {
|
||||
//@if $sVal != 'none' {
|
||||
@include text-shadow($sVal);
|
||||
text-shadow: $sVal;
|
||||
//}
|
||||
}
|
||||
|
||||
@mixin txtShdwSubtle($sVal: 0.1) {
|
||||
@if $sVal != 'none' {
|
||||
@include text-shadow(rgba(black, $sVal) 0 1px 2px);
|
||||
text-shadow: rgba(black, $sVal) 0 1px 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin txtShdwLarge($sVal: 0.7) {
|
||||
@include text-shadow(rgba(black, $sVal) 0 3px 7px);
|
||||
text-shadow: rgba(black, $sVal) 0 3px 7px;
|
||||
}
|
||||
|
||||
@function pullForward($c, $p: 20%) {
|
||||
@@ -291,8 +291,8 @@
|
||||
|
||||
@mixin containerBase($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||
background-color: $bg;
|
||||
@include border-radius($controlCr);
|
||||
@include box-sizing(border-box);
|
||||
border-radius: $controlCr;
|
||||
box-sizing: border-box;
|
||||
color: $fg;
|
||||
display: inline-block;
|
||||
}
|
||||
@@ -316,9 +316,9 @@
|
||||
|
||||
@mixin input-base($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.6) 0 1px 3px) {
|
||||
@include appearance(none);
|
||||
@include border-radius($controlCr);
|
||||
@include box-sizing(border-box);
|
||||
@include box-shadow(inset $shdw);
|
||||
border-radius: $controlCr;
|
||||
box-sizing: border-box;
|
||||
box-shadow: inset $shdw;
|
||||
background: $bg;
|
||||
border: none;
|
||||
color: $fg;
|
||||
@@ -334,7 +334,7 @@
|
||||
}
|
||||
|
||||
@mixin contextArrow() {
|
||||
@include text-shadow(none);
|
||||
text-shadow: none;
|
||||
content: '\76';
|
||||
display: inline-block;
|
||||
font-family: 'symbolsfont';
|
||||
@@ -407,13 +407,13 @@
|
||||
}
|
||||
|
||||
@mixin tmpBorder($c: #ffcc00, $a: 0.75) {
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
border: 1px dotted rgba($c, $a);
|
||||
}
|
||||
|
||||
@mixin testObj($w: 2000px, $h: 1000px, $c: black, $a: 0.1) {
|
||||
&:after {
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
@include bgDiagonalStripes($c, $a);
|
||||
color: rgba(white, 0.3);
|
||||
font-style: italic;
|
||||
|
||||
@@ -8,9 +8,9 @@
|
||||
.l-breadcrumb-item {
|
||||
//@include test();
|
||||
a {
|
||||
@include box-sizing(border-box);
|
||||
@include border-radius($basicCr*.75);
|
||||
@include single-transition(background-color, 0.25s);
|
||||
box-sizing: border-box;
|
||||
border-radius: $basicCr*.75;
|
||||
@include transition(background-color, 0.25s);
|
||||
color: darken($colorBodyFg, 15%);
|
||||
display: inline-block;
|
||||
//margin-right: $interiorMargin;
|
||||
|
||||
@@ -32,7 +32,7 @@ $pad: $interiorMargin * $baseRatio;
|
||||
}
|
||||
|
||||
.s-btn {
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
padding: 0 $pad;
|
||||
font-size: 0.7rem;
|
||||
vertical-align: top;
|
||||
@@ -126,9 +126,9 @@ $pad: $interiorMargin * $baseRatio;
|
||||
$cFg: $cBg;
|
||||
|
||||
|
||||
@include border-radius($basicCr);
|
||||
border-radius: $basicCr;
|
||||
//@include boxShdw($shdwBtns);
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
@include trans-prop-nice((color, background-color), 100ms);
|
||||
color: $cFg;
|
||||
cursor: pointer;
|
||||
@@ -264,7 +264,7 @@ $pad: $interiorMargin * $baseRatio;
|
||||
font-size: 0; // Remove space between s-btn elements due to white space in markup
|
||||
|
||||
.s-btn {
|
||||
@include border-radius(0);
|
||||
border-radius: 0;
|
||||
margin-left: 1px;
|
||||
}
|
||||
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
$m: 1;
|
||||
$colorSelectedColor: #fff;
|
||||
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
padding: $interiorMargin !important;
|
||||
|
||||
.l-palette-row {
|
||||
@@ -34,7 +34,7 @@
|
||||
width: ($d * $colorsPerRow) + ($m * $colorsPerRow);
|
||||
|
||||
.l-palette-item {
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
@include txtShdwSubtle(0.8);
|
||||
@include trans-prop-nice-fade(0.25s);
|
||||
border: 1px solid transparent;
|
||||
|
||||
@@ -28,8 +28,8 @@
|
||||
}
|
||||
.accordion-head {
|
||||
$op: 0.2;
|
||||
@include border-radius($basicCr * 0.75);
|
||||
@include box-sizing("border-box");
|
||||
border-radius: $basicCr * 0.75;
|
||||
box-sizing: "border-box";
|
||||
background: rgba($colorBodyFg, $op);
|
||||
cursor: pointer;
|
||||
font-size: 0.75em;
|
||||
@@ -84,7 +84,7 @@
|
||||
.l-control-group {
|
||||
// Buttons that have a conceptual grouping - internal space between, and a divider between groups.
|
||||
// @include test();
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
border-left: 1px solid $colorInteriorBorder;
|
||||
display: inline-block;
|
||||
padding: 0 $interiorMargin;
|
||||
@@ -125,9 +125,9 @@ label.checkbox.custom {
|
||||
height: $d;
|
||||
min-width: $d;
|
||||
&:before {
|
||||
@include border-radius($basicCr * .75);
|
||||
border-radius: $basicCr * .75;
|
||||
background: $bg;
|
||||
@include box-shadow(inset rgba(black, 0.4) 0 1px 2px);
|
||||
box-shadow: inset rgba(black, 0.4) 0 1px 2px;
|
||||
box-sizing: border-box;
|
||||
content: " ";
|
||||
font-family: 'symbolsfont';
|
||||
@@ -182,7 +182,7 @@ label.checkbox.custom {
|
||||
|
||||
.item .checkbox {
|
||||
&.checked label {
|
||||
@include box-shadow(none);
|
||||
box-shadow: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
@@ -293,13 +293,13 @@ label.checkbox.custom {
|
||||
}
|
||||
|
||||
.s-progress-bar {
|
||||
@include border-radius($basicCr);
|
||||
border-radius: $basicCr;
|
||||
@include boxIncised(0.3, 4px);
|
||||
background: $colorProgressBarOuter;
|
||||
.progress-amt {
|
||||
@include border-radius($basicCr);
|
||||
border-radius: $basicCr;
|
||||
@include boxShdw();
|
||||
@include border-radius($basicCr - 1);
|
||||
border-radius: $basicCr - 1;
|
||||
@include trans-prop-nice(width);
|
||||
&:before {
|
||||
background-color: $colorProgressBarAmt;
|
||||
@@ -433,7 +433,7 @@ label.checkbox.custom {
|
||||
.l-calendar {
|
||||
$colorMuted: pushBack($colorMenuFg, 30%);
|
||||
ul.l-cal-row {
|
||||
@include display-flex;
|
||||
@include display(flex);
|
||||
@include flex-flow(row nowrap);
|
||||
margin-top: 1px;
|
||||
&:first-child {
|
||||
@@ -483,9 +483,9 @@ label.checkbox.custom {
|
||||
|
||||
@include desktop {
|
||||
::-webkit-scrollbar {
|
||||
@include border-radius(2px);
|
||||
@include box-sizing(border-box);
|
||||
@include box-shadow(inset $scrollbarTrackShdw);
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: inset $scrollbarTrackShdw;
|
||||
background-color: $scrollbarTrackColorBg;
|
||||
height: $scrollbarTrackSize;
|
||||
width: $scrollbarTrackSize;
|
||||
@@ -496,8 +496,8 @@ label.checkbox.custom {
|
||||
$hc: $scrollbarThumbColorHov;
|
||||
$gr: 5%;
|
||||
@include background-image(linear-gradient(lighten($bg, $gr), $bg 20px));
|
||||
@include border-radius(2px);
|
||||
@include box-sizing(border-box);
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
&:hover {
|
||||
@include background-image(linear-gradient(lighten($hc, $gr), $hc 20px));
|
||||
}
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
}
|
||||
|
||||
.s-menu {
|
||||
@include border-radius($basicCr);
|
||||
border-radius: $basicCr;
|
||||
@include containerSubtle($colorMenuBg, $colorMenuFg);
|
||||
@include boxShdw($shdwMenu);
|
||||
@include txtShdw($shdwMenuText);
|
||||
@@ -87,7 +87,7 @@
|
||||
ul {
|
||||
@include menuUlReset();
|
||||
li {
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
border-top: 1px solid pullForward($colorMenuBg, 10%);
|
||||
color: pullForward($colorMenuBg, 60%);
|
||||
line-height: $menuLineH;
|
||||
@@ -171,7 +171,7 @@
|
||||
@include absPosDefault($interiorMargin);
|
||||
}
|
||||
.pane {
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
&.left {
|
||||
//@include test();
|
||||
border-right: 1px solid pullForward($colorMenuBg, 10%);
|
||||
@@ -183,7 +183,7 @@
|
||||
overflow-y: auto;
|
||||
ul {
|
||||
li {
|
||||
@include border-radius($controlCr);
|
||||
border-radius: $controlCr;
|
||||
padding-left: 30px;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
@@ -123,7 +123,7 @@ mct-include.status-block-holder {
|
||||
/* Styles for messages and message banners */
|
||||
.message {
|
||||
&.block {
|
||||
@include border-radius($basicCr);
|
||||
border-radius: $basicCr;
|
||||
padding: $interiorMarginLg;
|
||||
}
|
||||
&.error {
|
||||
@@ -135,9 +135,9 @@ mct-include.status-block-holder {
|
||||
.l-message-banner {
|
||||
$m: $interiorMarginSm;
|
||||
$lh: $ueFooterH - ($m*2) - 1;
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
@include ellipsize();
|
||||
@include display-flex;
|
||||
@include display(flex);
|
||||
@include flex-direction(row);
|
||||
@include align-items(center);
|
||||
position: absolute;
|
||||
@@ -198,12 +198,12 @@ mct-include.status-block-holder {
|
||||
}
|
||||
|
||||
.s-message-banner {
|
||||
@include border-radius($controlCr);
|
||||
border-radius: $controlCr;
|
||||
@include statusBannerColors($colorStatusDefault, $colorStatusFg);
|
||||
cursor: pointer;
|
||||
a { color: inherit; }
|
||||
.s-action {
|
||||
@include border-radius($basicCr);
|
||||
border-radius: $basicCr;
|
||||
@include trans-prop-nice(background-color);
|
||||
}
|
||||
.close {
|
||||
@@ -264,7 +264,7 @@ mct-include.status-block-holder {
|
||||
*/
|
||||
|
||||
.l-message {
|
||||
@include display-flex;
|
||||
@include display(flex);
|
||||
@include flex-direction(row);
|
||||
@include align-items(stretch);
|
||||
.type-icon.message-type {
|
||||
@@ -309,7 +309,7 @@ mct-include.status-block-holder {
|
||||
|
||||
.message-contents {
|
||||
.l-message {
|
||||
@include border-radius($controlCr);
|
||||
border-radius: $controlCr;
|
||||
background: rgba($colorOvrFg, 0.1);
|
||||
margin-bottom: $interiorMargin;
|
||||
padding: $interiorMarginLg;
|
||||
|
||||
@@ -37,7 +37,7 @@ mct-include.l-time-controller {
|
||||
{
|
||||
//@include test();
|
||||
@include absPosDefault(0, visible);
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
top: auto;
|
||||
}
|
||||
.l-time-range-slider,
|
||||
@@ -73,7 +73,7 @@ mct-include.l-time-controller {
|
||||
//@include test(green);
|
||||
height: $r2H; bottom: $r3H + ($interiorMarginSm * 1);
|
||||
.range-holder {
|
||||
@include box-shadow(none);
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
border: none;
|
||||
.range {
|
||||
@@ -101,7 +101,7 @@ mct-include.l-time-controller {
|
||||
}
|
||||
&:after {
|
||||
// Circle element
|
||||
@include border-radius($myW);
|
||||
border-radius: $myW;
|
||||
@include transform(translateY(-50%));
|
||||
top: 50%; right: 0; bottom: auto; left: 0;
|
||||
width: auto;
|
||||
@@ -167,7 +167,7 @@ mct-include.l-time-controller {
|
||||
color: $sliderColorKnobHov;
|
||||
}
|
||||
&.knob-l {
|
||||
//@include border-bottom-left-radius($knobCr); // MOVED TO _CONTROLS.SCSS
|
||||
//border-bottom-left-radius: $knobCr; // MOVED TO _CONTROLS.SCSS
|
||||
margin-left: $knobM;
|
||||
.range-value {
|
||||
text-align: right;
|
||||
@@ -175,7 +175,7 @@ mct-include.l-time-controller {
|
||||
}
|
||||
}
|
||||
&.knob-r {
|
||||
//@include border-bottom-right-radius($knobCr);
|
||||
//border-bottom-right-radius: $knobCr;
|
||||
margin-right: $knobM;
|
||||
.range-value {
|
||||
left: $rangeValOffset;
|
||||
@@ -193,7 +193,7 @@ mct-include.l-time-controller {
|
||||
|
||||
.s-time-range-val {
|
||||
//@include test();
|
||||
@include border-radius($controlCr);
|
||||
border-radius: $controlCr;
|
||||
background-color: $colorInputBg;
|
||||
padding: 1px 1px 0 $interiorMargin;
|
||||
}
|
||||
@@ -38,22 +38,22 @@
|
||||
z-index: 11;
|
||||
}
|
||||
&.edit-resize-nw {
|
||||
@include border-bottom-right-radius($cr);
|
||||
border-bottom-right-radius: $cr;
|
||||
cursor: nw-resize;
|
||||
top: 0; left: 0;
|
||||
}
|
||||
&.edit-resize-ne {
|
||||
@include border-bottom-left-radius($cr);
|
||||
border-bottom-left-radius: $cr;
|
||||
cursor: ne-resize;
|
||||
top: 0; right: 0;
|
||||
}
|
||||
&.edit-resize-se {
|
||||
@include border-top-left-radius($cr);
|
||||
border-top-left-radius: $cr;
|
||||
cursor: se-resize;
|
||||
bottom: 0; right: 0;
|
||||
}
|
||||
&.edit-resize-sw {
|
||||
@include border-top-right-radius($cr);
|
||||
border-top-right-radius: $cr;
|
||||
cursor: sw-resize;
|
||||
bottom: 0; left: 0;
|
||||
}
|
||||
@@ -109,4 +109,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -104,8 +104,8 @@
|
||||
}
|
||||
|
||||
.l-image-thumb-item {
|
||||
@include single-transition(background-color, 0.25s);
|
||||
@include box-sizing(border-box);
|
||||
@include transition(background-color, 0.25s);
|
||||
box-sizing: border-box;
|
||||
padding: 1px;
|
||||
position: relative;
|
||||
.l-thumb,
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
.section-header {
|
||||
@include border-radius($basicCr);
|
||||
border-radius: $basicCr;
|
||||
background: $colorFormSectionHeader;
|
||||
$c: lighten($colorBodyFg, 20%);
|
||||
//border-bottom: 1px solid rgba(#fff, 0.3);
|
||||
@@ -39,7 +39,7 @@
|
||||
|
||||
.form-row {
|
||||
$m: $interiorMargin;
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
@include clearfix;
|
||||
border-top: 1px solid $colorFormLines;
|
||||
margin-top: $m;
|
||||
@@ -51,7 +51,7 @@
|
||||
|
||||
>.label,
|
||||
>.controls {
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
@include clearfix;
|
||||
font-size: 0.8rem;
|
||||
line-height: $formInputH;
|
||||
@@ -149,7 +149,7 @@ label.form-control.checkbox {
|
||||
vertical-align: top;
|
||||
|
||||
div.s-hint {
|
||||
@include border-radius($basicCr);
|
||||
border-radius: $basicCr;
|
||||
background: rgba($colorFormInvalid, 0.8);
|
||||
display: block;
|
||||
color: lighten($colorFormInvalid, 30%);
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
}
|
||||
}
|
||||
.icon.ui-symbol {
|
||||
@include border-radius($controlCr);
|
||||
border-radius: $controlCr;
|
||||
display: inline-block;
|
||||
font-size: 1.3em;
|
||||
height: $formInputH;
|
||||
@@ -43,9 +43,9 @@
|
||||
$d: $formInputH - $mgn * 2;
|
||||
$cb: #fff;
|
||||
$cf: #333;
|
||||
@include border-radius($controlCr);
|
||||
@include box-sizing(border-box);
|
||||
@include opacity(0.2);
|
||||
border-radius: $controlCr;
|
||||
box-sizing: border-box;
|
||||
opacity: 0.2;
|
||||
background: $cb;
|
||||
color: $cf;
|
||||
display: block;
|
||||
@@ -59,7 +59,7 @@
|
||||
text-align: center;
|
||||
z-index: 5;
|
||||
&:hover {
|
||||
@include opacity(0.6);
|
||||
opacity: 0.6;
|
||||
background-color: $colorKey;
|
||||
}
|
||||
}
|
||||
@@ -95,7 +95,7 @@
|
||||
.clear-icon,
|
||||
.menu-icon,
|
||||
&:before {
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
line-height: inherit;
|
||||
position: absolute;
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
line-height: $formInputH;
|
||||
select {
|
||||
@include appearance(none);
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
background: none;
|
||||
color: $colorSelectFg;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
|
||||
.l-infobubble-wrapper {
|
||||
$arwSize: 5px;
|
||||
@include box-shadow(rgba(black, 0.4) 0 1px 5px);
|
||||
box-shadow: rgba(black, 0.4) 0 1px 5px;
|
||||
position: relative;
|
||||
z-index: 50;
|
||||
.l-infobubble {
|
||||
@@ -149,8 +149,8 @@
|
||||
|
||||
.s-infobubble {
|
||||
$emFg: darken($colorInfoBubbleFg, 20%);
|
||||
@include border-radius($basicCr);
|
||||
@include box-shadow(rgba(black, 0.4) 0 1px 5px);
|
||||
border-radius: $basicCr;
|
||||
box-shadow: rgba(black, 0.4) 0 1px 5px;
|
||||
background: $colorInfoBubbleBg;
|
||||
color: $colorInfoBubbleFg;
|
||||
font-size: 0.8rem;
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
display: block;
|
||||
|
||||
@if $splitterEndCr != 'none' {
|
||||
@include border-radius($splitterEndCr);
|
||||
border-radius: $splitterEndCr;
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
|
||||
@@ -34,8 +34,8 @@
|
||||
@include animation-duration(0.5s);
|
||||
@include animation-iteration-count(infinite);
|
||||
@include animation-timing-function(linear);
|
||||
@include border-radius(100%);
|
||||
@include box-sizing(border-box);
|
||||
border-radius: 100%;
|
||||
box-sizing: border-box;
|
||||
border-color: rgba($c, 0.25);
|
||||
border-top-color: rgba($c, 1.0);
|
||||
border-style: solid;
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
|
||||
.tabular,
|
||||
table {
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
display: table;
|
||||
@@ -107,7 +107,7 @@ table {
|
||||
&.s-cell-type-value {
|
||||
text-align: right;
|
||||
.l-cell-contents {
|
||||
@include border-radius($smallCr);
|
||||
border-radius: $smallCr;
|
||||
padding-left: $itemPadLR;
|
||||
padding-right: $itemPadLR;
|
||||
}
|
||||
@@ -126,7 +126,7 @@ table {
|
||||
top: $tabularHeaderH * 2;
|
||||
}
|
||||
input[type="text"] {
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
width: 100%; //50px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
.overlay > .holder {
|
||||
//@include test(orange); // This works!
|
||||
$m: 0;
|
||||
@include border-radius($m);
|
||||
border-radius: $m;
|
||||
top: $m;
|
||||
right: $m;
|
||||
bottom: $m;
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
> .holder {
|
||||
//$i: 15%;
|
||||
@include containerSubtle($colorOvrBg, $colorOvrFg);
|
||||
@include border-radius($basicCr * 3);
|
||||
border-radius: $basicCr * 3;
|
||||
color: $colorOvrFg;
|
||||
top: 50%;
|
||||
right: auto;
|
||||
|
||||
@@ -69,8 +69,8 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
|
||||
}
|
||||
|
||||
.gl-plot-coords {
|
||||
@include box-sizing(border-box);
|
||||
@include border-radius($controlCr);
|
||||
box-sizing: border-box;
|
||||
border-radius: $controlCr;
|
||||
background: black;
|
||||
color: lighten($colorBodyFg, 30%);
|
||||
padding: 2px 5px;
|
||||
@@ -117,7 +117,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
|
||||
&.l-plot-y-label {
|
||||
$x: -50%;
|
||||
$r: -90deg;
|
||||
@include transform-origin(50%, 0);
|
||||
@include transform-origin(50% 0);
|
||||
@include transform(translateX($x) rotate($r));
|
||||
display: inline-block;
|
||||
margin-left: $interiorMargin; // Kick off the left edge
|
||||
@@ -234,7 +234,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
|
||||
}
|
||||
.plot-color-swatch,
|
||||
.color-swatch {
|
||||
@include border-radius(2px);
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
height: $swatchD;
|
||||
width: $swatchD;
|
||||
@@ -244,7 +244,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
|
||||
|
||||
.gl-plot-legend {
|
||||
.plot-legend-item {
|
||||
@include border-radius($smallCr);
|
||||
border-radius: $smallCr;
|
||||
line-height: 1.5em;
|
||||
padding: 0px $itemPadLR;
|
||||
.plot-color-swatch {
|
||||
@@ -310,4 +310,4 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
|
||||
&.tick-label-y {
|
||||
right: 0; left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
&:before,
|
||||
.clear-icon,
|
||||
.menu-icon {
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
color: $colorInputIcon;
|
||||
height: $iconD;
|
||||
width: $iconD;
|
||||
@@ -130,7 +130,7 @@
|
||||
.active-filter-display {
|
||||
$s: 0.7em;
|
||||
$p: $interiorMargin;
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
line-height: 130%;
|
||||
padding-left: $s * 2.25;
|
||||
font-size: $s;
|
||||
|
||||
@@ -35,9 +35,9 @@ ul.tree {
|
||||
.tree-item,
|
||||
.search-result-item {
|
||||
@extend .l-flex-row;
|
||||
@include box-sizing(border-box);
|
||||
@include border-radius($basicCr);
|
||||
@include single-transition(background-color, 0.25s);
|
||||
box-sizing: border-box;
|
||||
border-radius: $basicCr;
|
||||
@include transition(background-color, 0.25s);
|
||||
font-size: 0.8rem;
|
||||
height: $menuLineH;
|
||||
line-height: $menuLineH;
|
||||
@@ -155,7 +155,7 @@ mct-representation {
|
||||
.t-item-icon,
|
||||
.t-title-label {
|
||||
color: $colorItemTreeEditingFg;
|
||||
@include text-shadow(none);
|
||||
text-shadow: none;
|
||||
}
|
||||
.t-title-label {
|
||||
font-style: italic;
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
}
|
||||
|
||||
.editor {
|
||||
@include border-radius($basicCr * 1.5);
|
||||
border-radius: $basicCr * 1.5;
|
||||
}
|
||||
|
||||
.contents {
|
||||
@@ -86,7 +86,7 @@
|
||||
color: lighten($colorBodyBg, 30%);
|
||||
font-size: .7rem;
|
||||
.status-holder {
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
@include absPosDefault($interiorMargin);
|
||||
@include ellipsize();
|
||||
right: 120px;
|
||||
@@ -94,7 +94,7 @@
|
||||
z-index: 1;
|
||||
}
|
||||
.app-logo {
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
@include absPosDefault($interiorMargin);
|
||||
cursor: pointer;
|
||||
left: auto;
|
||||
@@ -121,7 +121,7 @@
|
||||
}
|
||||
|
||||
.pane {
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
|
||||
.pane-header {
|
||||
@@ -282,7 +282,7 @@
|
||||
|
||||
/***************************************************** OBJECT BROWSE BAR */
|
||||
.object-browse-bar {
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
height: $ueTopBarH;
|
||||
line-height: $ueTopBarH;
|
||||
white-space: nowrap;
|
||||
@@ -378,7 +378,7 @@
|
||||
.s-status-editing {
|
||||
.l-object-wrapper {
|
||||
@include pulseBorder($colorEditAreaFg, $dur: 1s, $opacity0: 0.3);
|
||||
@include border-radius($controlCr);
|
||||
border-radius: $controlCr;
|
||||
background-color: $colorEditAreaBg;
|
||||
border-color: $colorEditAreaFg;
|
||||
border-width: 2px;
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
height: $btnToolbarH;
|
||||
}
|
||||
input[type="text"] {
|
||||
@include box-sizing(border-box);
|
||||
box-sizing: border-box;
|
||||
font-size: .9em;
|
||||
height: $btnToolbarH;
|
||||
margin-bottom: 1px;
|
||||
|
||||
Reference in New Issue
Block a user