Merge remote-tracking branch 'github/master' into open236
Resolve CSS conflicts for nasa/openmctweb#236 Conflicts: platform/commonUI/general/res/sass/controls/_controls.scss platform/commonUI/themes/espresso/res/css/theme-espresso.css platform/commonUI/themes/snow/res/css/theme-snow.css
This commit is contained in:
Victor Woeltjen
@@ -42,13 +42,17 @@ $ueFooterH: 25px;
|
||||
$ueColMargin: 1.5%;
|
||||
$ueAppLogoW: 105px;
|
||||
$ueEditToolBarH: 25px;
|
||||
$ueBrowseLeftPaneW: 25%;
|
||||
$ueBrowseLeftPaneTreeW: 25%;
|
||||
$ueBrowseRightPaneInspectW: 20%;
|
||||
$ueCollapsedPaneEdgeM: 20px;
|
||||
$uePaneMiniTabH: $ueTopBarH;
|
||||
$uePaneMiniTabW: 9px;
|
||||
$ueEditLeftPaneW: 75%;
|
||||
$treeSearchInputBarH: 25px;
|
||||
$ueTimeControlH: (33px, 20px, 20px);
|
||||
// Overlay
|
||||
$ovrTopBarH: 60px;
|
||||
$ovrFooterH: 30px;
|
||||
$ovrTopBarH: 45px;
|
||||
$ovrFooterH: 24px;
|
||||
$overlayMargin: 25px;
|
||||
// Items
|
||||
$ueBrowseGridItemLg: 200px;
|
||||
@@ -57,7 +61,8 @@ $ueBrowseGridItemBottomBarH: 30px;
|
||||
$itemPadLR: 5px;
|
||||
// Tree
|
||||
$treeVCW: 10px;
|
||||
$treeTypeIconH: 16px;
|
||||
$treeTypeIconH: 1.4em; // was 16px
|
||||
$treeTypeIconHPx: 16px;
|
||||
$treeTypeIconW: 20px;
|
||||
$treeContextTriggerW: 20px;
|
||||
// Tabular
|
||||
|
||||
@@ -34,10 +34,6 @@
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.ui-symbol {
|
||||
font-family: 'symbolsfont';
|
||||
}
|
||||
|
||||
/************************** HTML ENTITIES */
|
||||
a {
|
||||
color: $colorA;
|
||||
@@ -55,7 +51,7 @@ body, html {
|
||||
color: $colorBodyFg;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 100%;
|
||||
//font-weight: 500;
|
||||
font-weight: 200;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT Web includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
// Styles to temporarily hide non-functional elements
|
||||
|
||||
/******************************** BROWSE */
|
||||
.browse-mode {
|
||||
.browse {
|
||||
&.top-bar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.browse-area.holder {
|
||||
// When .browse.top-bar is hidden, set the top of the browse-area holder
|
||||
top: $bodyMargin;
|
||||
}
|
||||
}
|
||||
@@ -29,11 +29,14 @@
|
||||
}
|
||||
|
||||
.ui-symbol {
|
||||
font-family: 'symbolsfont';
|
||||
&.type-icon {
|
||||
color: $colorObjHdrIc;
|
||||
}
|
||||
&.icon {
|
||||
color: $colorKey;
|
||||
//position: relative;
|
||||
font-size: inherit;
|
||||
&.alert {
|
||||
color: $colorAlert;
|
||||
&:hover {
|
||||
@@ -69,18 +72,32 @@
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
//.tree-item .type-icon {
|
||||
// font-size: 16px; // 16px is crisp size
|
||||
//}
|
||||
|
||||
.l-icon-link:before {
|
||||
content: "\f4";
|
||||
}
|
||||
|
||||
.l-icon-alert {
|
||||
display: none !important; // Remove this when alerts are enabled
|
||||
&:before {
|
||||
color: $colorAlert;
|
||||
content: "!";
|
||||
}
|
||||
}
|
||||
|
||||
// NEW!!
|
||||
.t-item-icon {
|
||||
// Used in grid-item.html, tree-item, inspector location, more?
|
||||
@extend .ui-symbol;
|
||||
@extend .icon;
|
||||
display: inline-block;
|
||||
line-height: normal; // This is Ok for the symbolsfont
|
||||
position: relative;
|
||||
&.l-icon-link {
|
||||
&:before {
|
||||
color: $colorIconLink;
|
||||
content: "\f4";
|
||||
height: auto; width: auto;
|
||||
position: absolute;
|
||||
left: 0; top: 0; right: 0; bottom: 10%;
|
||||
@include transform-origin(bottom, left);
|
||||
@include transform(scale(0.3));
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
107
platform/commonUI/general/res/sass/_inspector.scss
Normal file
107
platform/commonUI/general/res/sass/_inspector.scss
Normal file
@@ -0,0 +1,107 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT Web includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/* Styles for the Inspector pane */
|
||||
|
||||
.l-inspect,
|
||||
.l-inspect table tr td {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.l-inspect {
|
||||
@extend .abs;
|
||||
background: $colorInspectorBg;
|
||||
color: $colorInspectorFg;
|
||||
line-height: 140%;
|
||||
.pane-header {
|
||||
color: pushBack($colorInspectorFg, 20%);
|
||||
font-size: 0.8rem;
|
||||
&:before {
|
||||
color: pushBack($colorInspectorFg, 10%);
|
||||
content:'\e615'; // e615 Crosshair symbol
|
||||
display: inline;
|
||||
font-family: symbolsfont;
|
||||
margin-right: $interiorMargin;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
ul li,
|
||||
em {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
ul li {
|
||||
margin-bottom: $interiorMarginLg;
|
||||
}
|
||||
|
||||
em {
|
||||
@include border-radius($basicCr);
|
||||
background-color: $colorInspectorSectionHeaderBg;
|
||||
color: $colorInspectorSectionHeaderFg;
|
||||
margin-bottom: $interiorMargin;
|
||||
padding: $formTBPad $formLRPad;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.inspector-properties {
|
||||
&:not(.first) {
|
||||
border-top: 1px solid $colorInspectorSectionHeaderBg;
|
||||
}
|
||||
padding: $interiorMarginSm 0;
|
||||
.label {
|
||||
color: $colorInspectorPropName;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.value {
|
||||
color: $colorInspectorPropVal;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
.inspector-location {
|
||||
//line-height: 180%;
|
||||
.location-item {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 2px 4px;
|
||||
&:hover {
|
||||
background: $colorItemTreeHoverBg;
|
||||
color: $colorItemTreeHoverFg;
|
||||
.icon {
|
||||
color: $colorItemTreeIconHover;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.last) .t-object-label .t-title-label:after {
|
||||
color: pushBack($colorInspectorFg, 15%);
|
||||
content: '\3e';
|
||||
display: inline-block;
|
||||
font-family: symbolsfont;
|
||||
font-size: 8px;
|
||||
line-height: inherit;
|
||||
margin-left: $interiorMarginSm;
|
||||
width: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -29,8 +29,7 @@
|
||||
@import "helpers/bubbles";
|
||||
@import "helpers/splitter";
|
||||
@import "helpers/wait-spinner";
|
||||
@import "messages";
|
||||
@import "properties";
|
||||
@import "inspector";
|
||||
|
||||
/********************************* CONTROLS */
|
||||
@import "controls/breadcrumb";
|
||||
@@ -39,6 +38,7 @@
|
||||
@import "controls/controls";
|
||||
@import "controls/lists";
|
||||
@import "controls/menus";
|
||||
@import "controls/messages";
|
||||
@import "controls/time-controller";
|
||||
@import "mobile/controls/menus";
|
||||
|
||||
@@ -62,7 +62,6 @@
|
||||
@import "mobile/tree";
|
||||
@import "user-environ/frame";
|
||||
@import "user-environ/top-bar";
|
||||
@import "user-environ/bottom-bar";
|
||||
@import "user-environ/tool-bar";
|
||||
|
||||
/********************************* VIEWS */
|
||||
@@ -70,7 +69,6 @@
|
||||
@import "lists/tabular";
|
||||
@import "plots/plots-main";
|
||||
@import "iframe";
|
||||
@import "hide-non-functional";
|
||||
@import "views";
|
||||
@import "items/item";
|
||||
@import "mobile/item";
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
/* Styles for messages */
|
||||
|
||||
.message {
|
||||
&.block {
|
||||
@include border-radius($basicCr);
|
||||
padding: $interiorMarginLg;
|
||||
}
|
||||
&.error {
|
||||
background-color: rgba($colorAlert,0.3);
|
||||
color: lighten($colorAlert, 20%);
|
||||
}
|
||||
}
|
||||
@@ -41,36 +41,41 @@
|
||||
width: $d;
|
||||
}
|
||||
|
||||
@mixin trans-prop-nice($props, $t: 500ms) {
|
||||
@if $t == 0 {
|
||||
@mixin trans-prop-nice($props, $dur: 500ms, $delay: 0) {
|
||||
// Multiple $props must be in parans like this: (left, right)
|
||||
@if $dur == 0 {
|
||||
@include transition-property(none);
|
||||
} @else {
|
||||
@include transition-property($props);
|
||||
@include transition-duration($t);
|
||||
@include transition-duration($dur);
|
||||
@include transition-timing-function(ease-in-out);
|
||||
@include transition-delay($delay);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin trans-prop-nice-fade($t: 0.5s) {
|
||||
@if $t == 0 {
|
||||
@mixin trans-prop-nice-fade($dur: 500ms, $delay: 0) {
|
||||
@if $dur == 0 {
|
||||
@include transition-property(none);
|
||||
} @else {
|
||||
@include transition-property(visibility, opacity, background-color, border-color);
|
||||
@include transition-duration($t);
|
||||
@include transition-property(opacity, background-color, border-color, color);
|
||||
@include transition-duration($dur);
|
||||
@include transition-timing-function(ease-in-out);
|
||||
@include transition-delay($delay);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin trans-prop-nice-resize-h($t: 0.5s) {
|
||||
@mixin trans-prop-nice-resize-h($dur: 500ms, $delay: 0) {
|
||||
@include transition-property(height, bottom, top);
|
||||
@include transition-duration($t);
|
||||
@include transition-duration($dur);
|
||||
@include transition-timing-function(ease-in-out);
|
||||
@include transition-delay($delay);
|
||||
}
|
||||
|
||||
@mixin trans-prop-nice-resize-w($t: 0.5s) {
|
||||
@mixin trans-prop-nice-resize-w($dur: 500ms, $delay: 0) {
|
||||
@include transition-property(width, left, right);
|
||||
@include transition-duration($t);
|
||||
@include transition-duration($dur);
|
||||
@include transition-timing-function(ease-in-out);
|
||||
@include transition-delay($delay);
|
||||
}
|
||||
|
||||
@mixin triangle-right($size, $color) {
|
||||
@@ -94,7 +99,6 @@
|
||||
}
|
||||
|
||||
@mixin triangle($dir: "left", $size: 5px, $ratio: 1, $color: red) {
|
||||
//$size: $size*2;
|
||||
width: 0;
|
||||
height: 0;
|
||||
$slopedB: $size/$ratio solid transparent;
|
||||
@@ -129,6 +133,24 @@
|
||||
background-size: $d $d;
|
||||
}
|
||||
|
||||
@mixin bgVertStripes($c: yellow, $a: 0.1, $d: 40px) {
|
||||
@include background-image(linear-gradient(-90deg,
|
||||
rgba($c, $a) 0%, rgba($c, $a) 50%,
|
||||
transparent 50%, transparent 100%
|
||||
));
|
||||
background-repeat: repeat;
|
||||
background-size: $d $d;
|
||||
}
|
||||
|
||||
@mixin bgVertFuzzyStripes($c: yellow, $a: 0.1, $d: 40px) {
|
||||
@include background-image(linear-gradient(-90deg,
|
||||
rgba($c, $a) 0%, transparent 50%,
|
||||
transparent 50%, rgba($c, $a) 100%
|
||||
));
|
||||
background-repeat: repeat;
|
||||
background-size: $d $d;
|
||||
}
|
||||
|
||||
@mixin bgTicks($c: $colorBodyFg, $repeatDir: 'x') {
|
||||
$deg: 90deg;
|
||||
@if ($repeatDir != 'x') {
|
||||
@@ -156,31 +178,28 @@
|
||||
}
|
||||
|
||||
@mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
|
||||
&:before {
|
||||
@include trans-prop-nice("border-color", 0.75s);
|
||||
content: '';
|
||||
display: block;
|
||||
height: auto;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
//&:before {
|
||||
//@include trans-prop-nice("border-color", 25ms);
|
||||
content: '';
|
||||
display: block;
|
||||
//height: auto;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
|
||||
@if $direction == "horizontal" {
|
||||
border-top: $w $style darken($b, 15%);
|
||||
top: 2px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
@if $direction == "horizontal" {
|
||||
border-top: $w $style darken($b, 15%);
|
||||
top: 2px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
height: 1px;
|
||||
|
||||
} @else if $direction == "vertical" {
|
||||
border-left: $w $style darken($b, 15%);
|
||||
left: 2px;
|
||||
bottom: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
&:not(.disabled):hover:before {
|
||||
@include trans-prop-nice("border-color", 25ms);
|
||||
border-color: $colorGrippyInteriorHover;
|
||||
} @else if $direction == "vertical" {
|
||||
border-left: $w $style darken($b, 15%);
|
||||
left: 2px;
|
||||
bottom: 5px;
|
||||
top: 5px;
|
||||
width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -256,6 +275,12 @@
|
||||
@return percentage($d);
|
||||
}
|
||||
|
||||
@function splitterHandleInset($splitterD: 21px, $splitterHandleD: 1px) {
|
||||
// Space to either side of the handle
|
||||
@return ($splitterD - $splitterHandleD) * 0.5;
|
||||
}
|
||||
|
||||
|
||||
/*********************************************** CONTROLS, FORM ELEMENTS */
|
||||
|
||||
@mixin containerBase($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||
@@ -347,10 +372,7 @@
|
||||
/* This doesn't work on an element inside an element with absolute positioning that has height: auto */
|
||||
//position: relative;
|
||||
top: 50%;
|
||||
@include webkitProp(transform, translateY(-50%));
|
||||
//-webkit-transform: translateY(-50%);
|
||||
//-ms-transform: translateY(-50%);
|
||||
//transform: translateY(-50%);
|
||||
@include transform(translateY(-50%));
|
||||
}
|
||||
|
||||
@mixin verticalCenterBlock($holderH, $itemH) {
|
||||
|
||||
@@ -1,35 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT Web includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/* Classes to be used for lists of properties and values */
|
||||
|
||||
.properties {
|
||||
.s-row {
|
||||
border-top: 1px solid $colorInteriorBorder;
|
||||
font-size: 0.8em;
|
||||
&:first-child {
|
||||
border: none;
|
||||
}
|
||||
.s-value {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -22,13 +22,17 @@
|
||||
$baseRatio: 1.5;
|
||||
$pad: $interiorMargin * $baseRatio;
|
||||
|
||||
.s-btn {
|
||||
@include box-sizing(border-box);
|
||||
.s-btn,
|
||||
.s-icon-btn {
|
||||
@include user-select(none);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
height: $btnStdH;
|
||||
line-height: $btnStdH;
|
||||
}
|
||||
|
||||
.s-btn {
|
||||
@include box-sizing(border-box);
|
||||
padding: 0 $pad;
|
||||
font-size: 0.7rem;
|
||||
|
||||
@@ -89,6 +93,155 @@ $pad: $interiorMargin * $baseRatio;
|
||||
}
|
||||
}
|
||||
|
||||
.s-icon-btn {
|
||||
@extend .ui-symbol;
|
||||
color: $colorBtnIcon;
|
||||
&:hover {
|
||||
color: lighten($colorBtnIcon, $ltGamma);
|
||||
}
|
||||
}
|
||||
|
||||
.mini-tab {
|
||||
// Meant to be used as pane hide/show control elements in concert with mct-splitter
|
||||
//@extend .ui-symbol;
|
||||
@include desktop {
|
||||
//@include test(green);
|
||||
$iconH: $uePaneMiniTabH;
|
||||
$iconW: $uePaneMiniTabW;
|
||||
$iconInnerLR: 0;
|
||||
$arwD: 9px;
|
||||
$arwOffsetX: 0px;
|
||||
$arwAnimOffsetX: 2px + $iconInnerLR;
|
||||
$cBg: pullForward($colorBodyBg, 15%);
|
||||
$cFg: $cBg;
|
||||
|
||||
|
||||
@include border-radius($basicCr);
|
||||
//@include boxShdw($shdwBtns);
|
||||
@include box-sizing(border-box);
|
||||
@include trans-prop-nice((color, background-color), 100ms);
|
||||
color: $cFg;
|
||||
cursor: pointer;
|
||||
font-family: symbolsfont;
|
||||
font-size: $arwD;
|
||||
display: block;
|
||||
position: absolute;
|
||||
line-height: $iconH;
|
||||
height: $iconH; width: $iconW;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
//background-color: $cBg;
|
||||
color: $colorKey; //pullForward($cFg, $ltGamma);
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
// State when the pane this element controls has been collapsed
|
||||
@include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon);
|
||||
&:before { opacity: 0; }
|
||||
&:after { opacity: 1; }
|
||||
&:hover {
|
||||
&:before { opacity: 1; }
|
||||
&:after { opacity: 0; }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
//@include test();
|
||||
@include trans-prop-nice((left, right, opacity), 250ms);
|
||||
display: block;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&:before {
|
||||
// Always the arrow icon
|
||||
//@include test(green);
|
||||
//font-size: $arwD;
|
||||
width: $arwD;
|
||||
}
|
||||
&:after {
|
||||
// Always icon; content is set in _layout.scss
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.anchor-left {
|
||||
// |<
|
||||
text-align: right;
|
||||
&:before {
|
||||
content:'\3c'; // Collapse left icon e613
|
||||
right: $iconInnerLR;
|
||||
}
|
||||
//&:hover:before { right: $arwAnimOffsetX; }
|
||||
&.collapsed {
|
||||
@include border-left-radius(0);
|
||||
text-align: left;
|
||||
&:before {
|
||||
content:'\3e';
|
||||
left: $iconInnerLR;
|
||||
}
|
||||
&:hover:before { left: $arwAnimOffsetX; }
|
||||
}
|
||||
}
|
||||
&.anchor-right {
|
||||
// >|
|
||||
text-align: left;
|
||||
&:before {
|
||||
content:'\3e'; // Collapse right icon e614
|
||||
left: $iconInnerLR;
|
||||
}
|
||||
//&:hover:before { left: $arwAnimOffsetX; }
|
||||
&.collapsed {
|
||||
@include border-right-radius(0);
|
||||
&:before {
|
||||
text-align: right;
|
||||
content:'\3c';
|
||||
right: $iconInnerLR;
|
||||
}
|
||||
&:hover:before { right: $arwAnimOffsetX; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mini-tab-icon {
|
||||
// Meant to be used as pane hide/show control elements in concert with mct-splitter
|
||||
//@extend .ui-symbol;
|
||||
@include desktop {
|
||||
$d: $uePaneMiniTabW;
|
||||
//@include trans-prop-nice(transform, 150ms);
|
||||
color: pullForward($colorBodyBg, 15%);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-family: symbolsfont;
|
||||
font-size: $d;
|
||||
position: absolute;
|
||||
height: $d; width: $d;
|
||||
line-height: $d;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '\78'; // X icon
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $colorKey;
|
||||
//@include transform(scale(1.2));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-btn-set {
|
||||
// Buttons that have a very tight conceptual grouping - no internal space between them.
|
||||
// Structure: .btn-set > mct-representation class=first|last > .s-btn
|
||||
|
||||
@@ -19,456 +19,507 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/*.control {
|
||||
// UNUSED?
|
||||
&.view-control {
|
||||
.icon {
|
||||
display: inline-block;
|
||||
margin: -1px 5px 1px 2px;
|
||||
vertical-align: middle;
|
||||
&.triangle-down {
|
||||
margin: 2px 2px -2px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
@include border-radius(3px);
|
||||
display: inline-block;
|
||||
padding: 1px 6px 4px 4px;
|
||||
&:hover {
|
||||
background: rgba(white, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
.accordion {
|
||||
$accordionHeadH: 18px;
|
||||
margin-top: $interiorMargin;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.accordion-head {
|
||||
$op: 0.2;
|
||||
@include border-radius($basicCr * 0.75);
|
||||
@include box-sizing("border-box");
|
||||
background: rgba($colorBodyFg, $op);
|
||||
cursor: pointer;
|
||||
font-size: 0.75em;
|
||||
line-height: $accordionHeadH;
|
||||
margin-bottom: $interiorMargin;
|
||||
padding: 0 $interiorMargin;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
left: 0;
|
||||
width: auto;
|
||||
height: $accordionHeadH;
|
||||
text-transform: uppercase;
|
||||
&:hover {
|
||||
background: rgba($colorBodyFg, $op * 2);
|
||||
}
|
||||
&:after {
|
||||
content: "^";
|
||||
display: block;
|
||||
font-family: 'symbolsfont';
|
||||
font-size: 0.9em;
|
||||
position: absolute;
|
||||
right: $interiorMargin;
|
||||
text-transform: none;
|
||||
top: 0;
|
||||
}
|
||||
&:not(.expanded):after {
|
||||
content: "v";
|
||||
}
|
||||
}
|
||||
.accordion-contents {
|
||||
position: absolute;
|
||||
top: $accordionHeadH + $interiorMargin;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
$accordionHeadH: 18px;
|
||||
margin-top: $interiorMargin;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.accordion-head {
|
||||
$op: 0.2;
|
||||
@include border-radius($basicCr * 0.75);
|
||||
@include box-sizing("border-box");
|
||||
background: rgba($colorBodyFg, $op);
|
||||
cursor: pointer;
|
||||
font-size: 0.75em;
|
||||
line-height: $accordionHeadH;
|
||||
margin-bottom: $interiorMargin;
|
||||
padding: 0 $interiorMargin;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
left: 0;
|
||||
width: auto;
|
||||
height: $accordionHeadH;
|
||||
text-transform: uppercase;
|
||||
&:hover {
|
||||
background: rgba($colorBodyFg, $op * 2);
|
||||
}
|
||||
&:after {
|
||||
content: "^";
|
||||
display: block;
|
||||
font-family: 'symbolsfont';
|
||||
font-size: 0.9em;
|
||||
position: absolute;
|
||||
right: $interiorMargin;
|
||||
text-transform: none;
|
||||
top: 0;
|
||||
}
|
||||
&:not(.expanded):after {
|
||||
content: "v";
|
||||
}
|
||||
}
|
||||
.accordion-contents {
|
||||
position: absolute;
|
||||
top: $accordionHeadH + $interiorMargin;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.l-composite-control {
|
||||
vertical-align: middle;
|
||||
&.l-checkbox {
|
||||
.composite-control-label {
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
vertical-align: middle;
|
||||
&.l-checkbox {
|
||||
.composite-control-label {
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-control-group {
|
||||
// Buttons that have a conceptual grouping - internal space between, and a divider between groups.
|
||||
// @include test();
|
||||
@include box-sizing(border-box);
|
||||
border-left: 1px solid $colorInteriorBorder;
|
||||
display: inline-block;
|
||||
padding: 0 $interiorMargin;
|
||||
position: relative;
|
||||
&:first-child {
|
||||
border-left: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
// Buttons that have a conceptual grouping - internal space between, and a divider between groups.
|
||||
// @include test();
|
||||
@include box-sizing(border-box);
|
||||
border-left: 1px solid $colorInteriorBorder;
|
||||
display: inline-block;
|
||||
padding: 0 $interiorMargin;
|
||||
position: relative;
|
||||
&:first-child {
|
||||
border-left: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.l-local-controls {
|
||||
// Control shown when hovering over an object, like plots and imagery
|
||||
// Default position is upper right
|
||||
$p: $interiorMargin;
|
||||
position: absolute;
|
||||
top: $p;
|
||||
right: $p;
|
||||
z-index: 5;
|
||||
// Control shown when hovering over an object, like plots and imagery
|
||||
// Default position is upper right
|
||||
$p: $interiorMargin;
|
||||
position: absolute;
|
||||
top: $p;
|
||||
right: $p;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.s-local-controls {
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
label.checkbox.custom {
|
||||
$bg: pullForward($colorBodyBg, 10%);
|
||||
$d: $formRowCtrlsH;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
line-height: $d;
|
||||
margin-right: $interiorMargin * 4;
|
||||
padding-left: $d + $interiorMargin;
|
||||
position: relative;
|
||||
vertical-align: middle; // was top
|
||||
em {
|
||||
color: $colorBodyFg;
|
||||
display: inline-block;
|
||||
height: $d;
|
||||
min-width: $d;
|
||||
&:before {
|
||||
@include border-radius($basicCr * .75);
|
||||
background: $bg;
|
||||
//border-bottom: 1px solid lighten($bg, 10%);
|
||||
@include box-shadow(inset rgba(black, 0.4) 0 1px 2px);
|
||||
box-sizing: border-box;
|
||||
content: " ";
|
||||
font-family: 'symbolsfont';
|
||||
font-size: 0.8em;
|
||||
display: inline-block;
|
||||
margin-right: $interiorMargin;
|
||||
height: $d;
|
||||
width: $d;
|
||||
left: 0;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
&.no-text {
|
||||
overflow: hidden;
|
||||
margin-right: 0;
|
||||
padding-left: 0;
|
||||
height: $d;
|
||||
width: $d;
|
||||
em {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
input {
|
||||
display: none;
|
||||
&:checked ~ em:before {
|
||||
background: $colorCheck;
|
||||
color: lighten($colorCheck, 50%);
|
||||
content: "2";
|
||||
}
|
||||
}
|
||||
$bg: pullForward($colorBodyBg, 10%);
|
||||
$d: $formRowCtrlsH;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
line-height: $d;
|
||||
margin-right: $interiorMargin * 4;
|
||||
padding-left: $d + $interiorMargin;
|
||||
position: relative;
|
||||
vertical-align: middle; // was top
|
||||
em {
|
||||
color: $colorBodyFg;
|
||||
display: inline-block;
|
||||
height: $d;
|
||||
min-width: $d;
|
||||
&:before {
|
||||
@include border-radius($basicCr * .75);
|
||||
background: $bg;
|
||||
//border-bottom: 1px solid lighten($bg, 10%);
|
||||
@include box-shadow(inset rgba(black, 0.4) 0 1px 2px);
|
||||
box-sizing: border-box;
|
||||
content: " ";
|
||||
font-family: 'symbolsfont';
|
||||
font-size: 0.8em;
|
||||
display: inline-block;
|
||||
margin-right: $interiorMargin;
|
||||
height: $d;
|
||||
width: $d;
|
||||
left: 0;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
&.no-text {
|
||||
overflow: hidden;
|
||||
margin-right: 0;
|
||||
padding-left: 0;
|
||||
height: $d;
|
||||
width: $d;
|
||||
em {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
input {
|
||||
display: none;
|
||||
&:checked ~ em:before {
|
||||
background: $colorCheck;
|
||||
color: lighten($colorCheck, 50%);
|
||||
content: "2";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-labeled {
|
||||
margin-left: $interiorMargin;
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
&.inline {
|
||||
display: inline-block;
|
||||
}
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
margin-left: $interiorMargin;
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
&.inline {
|
||||
display: inline-block;
|
||||
}
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.s-menu-btn label.checkbox.custom {
|
||||
margin-left: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.item .checkbox {
|
||||
&.checked label {
|
||||
@include box-shadow(none);
|
||||
border-bottom: none;
|
||||
}
|
||||
&.checked label {
|
||||
@include box-shadow(none);
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.context-available {
|
||||
$c: $colorKey;
|
||||
color: $c;
|
||||
&:hover {
|
||||
color: lighten($c, 10%);
|
||||
}
|
||||
$c: $colorKey;
|
||||
color: $c;
|
||||
&:hover {
|
||||
color: lighten($c, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.view-switcher {
|
||||
@include trans-prop-nice-fade($controlFadeMs);
|
||||
@include trans-prop-nice-fade($controlFadeMs);
|
||||
}
|
||||
|
||||
/******************************************************** OBJECT-HEADER */
|
||||
.object-header {
|
||||
//@include test();
|
||||
font-size: 1em;
|
||||
//@include test();
|
||||
font-size: 1em;
|
||||
|
||||
> .type-icon {
|
||||
color: $colorObjHdrIc;
|
||||
font-size: 120%;
|
||||
float: left;
|
||||
margin-right: $interiorMargin;
|
||||
}
|
||||
> .type-icon {
|
||||
color: $colorObjHdrIc;
|
||||
font-size: 120%;
|
||||
float: left;
|
||||
margin-right: $interiorMargin;
|
||||
}
|
||||
|
||||
.l-elem-wrapper {
|
||||
//@include test(#66f, 0.2);
|
||||
//@include webkitProp(justify-content, flex-start);
|
||||
.l-elem-wrapper {
|
||||
//@include test(#66f, 0.2);
|
||||
@include justify-content(flex-start);
|
||||
mct-representation {
|
||||
// Holds the context-available item
|
||||
// Must have min-width to make flex work properly
|
||||
// in Safari
|
||||
min-width: 0.7em;
|
||||
}
|
||||
}
|
||||
mct-representation {
|
||||
// Holds the context-available item
|
||||
// Must have min-width to make flex work properly
|
||||
// in Safari
|
||||
min-width: 0.7em;
|
||||
}
|
||||
}
|
||||
|
||||
.action {
|
||||
margin-right: $interiorMargin;
|
||||
}
|
||||
.action {
|
||||
margin-right: $interiorMargin;
|
||||
}
|
||||
|
||||
.title-label {
|
||||
//@include test(green, 0.9);
|
||||
color: $colorObjHdrTxt;
|
||||
@include ellipsize();
|
||||
//color: pushBack($colorBodyFg, 40%);
|
||||
@include webkitProp(flex, '0 1 auto');
|
||||
padding-right: 0.35em; // For context arrow. Done with em's so pad is relative to the scale of the text.
|
||||
//position: relative;
|
||||
}
|
||||
.title-label {
|
||||
//@include test(green, 0.9);
|
||||
color: $colorObjHdrTxt;
|
||||
@include ellipsize();
|
||||
//color: pushBack($colorBodyFg, 40%);
|
||||
@include webkitProp(flex, '0 1 auto');
|
||||
padding-right: 0.35em; // For context arrow. Done with em's so pad is relative to the scale of the text.
|
||||
//position: relative;
|
||||
}
|
||||
|
||||
.context-available {
|
||||
font-size: 0.7em;
|
||||
@include webkitProp(flex, '0 0 1');
|
||||
//margin-right: $interiorMargin;
|
||||
}
|
||||
.context-available {
|
||||
font-size: 0.7em;
|
||||
@include webkitProp(flex, '0 0 1');
|
||||
//margin-right: $interiorMargin;
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
.context-available {
|
||||
@include trans-prop-nice(opacity, 0.25s);
|
||||
opacity: 0;
|
||||
}
|
||||
&:hover {
|
||||
.context-available {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include desktop {
|
||||
.context-available {
|
||||
@include trans-prop-nice(opacity, 0.25s);
|
||||
opacity: 0;
|
||||
}
|
||||
&:hover {
|
||||
.context-available {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************** PROGRESS BAR */
|
||||
@include keyframes(progress) {
|
||||
100% { background-position: $progressBarStripeW center; }
|
||||
}
|
||||
|
||||
@mixin bgProgressAnim($c: yellow, $a: 0.1, $d: 20px) {
|
||||
@include background-image(linear-gradient(-90deg,
|
||||
rgba($c, $a) 0%, transparent 50%,
|
||||
transparent 50%, rgba($c, $a) 100%
|
||||
));
|
||||
background-position: 0 center;
|
||||
background-repeat: repeat-x;
|
||||
background-size: $d 40%;
|
||||
}
|
||||
|
||||
.l-progress-bar {
|
||||
// Assume will be determinate by default
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.progress-amt-holder {
|
||||
@include absPosDefault(1px);
|
||||
}
|
||||
.progress-amt,
|
||||
.progress-amt:before,
|
||||
.progress-amt:after {
|
||||
@include absPosDefault();
|
||||
display: block;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.progress-amt {
|
||||
right: auto; // Allow inline width to control }
|
||||
}
|
||||
|
||||
&.indeterminate {
|
||||
.progress-amt {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.s-progress-bar {
|
||||
@include border-radius($basicCr);
|
||||
@include boxIncised(0.3, 4px);
|
||||
background: $colorProgressBarOuter;
|
||||
//border:1px solid $colorProgressBarOuter;
|
||||
.progress-amt {
|
||||
@include border-radius($basicCr);
|
||||
@include boxShdw();
|
||||
@include border-radius($basicCr - 1);
|
||||
@include trans-prop-nice(width);
|
||||
&:before {
|
||||
background-color: $colorProgressBarAmt;
|
||||
}
|
||||
&:after {
|
||||
// Sheen
|
||||
@include background-image(linear-gradient(
|
||||
transparent 5%, rgba(#fff,0.25) 30%, transparent 100%
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.indeterminate) {
|
||||
.progress-amt:before {
|
||||
// More subtle anim for determinate progress
|
||||
@include animation(progress .4s linear infinite);
|
||||
@include bgProgressAnim(#fff, 0.1, $progressBarStripeW);
|
||||
}
|
||||
}
|
||||
|
||||
&.indeterminate .progress-amt {
|
||||
&:before {
|
||||
// More visible std diag stripe anim for indeterminate progress
|
||||
@include animation(progress .6s linear infinite);
|
||||
@include bgDiagonalStripes(#fff, 0.2, $progressBarStripeW);
|
||||
}
|
||||
&:after { display: none; }
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************** SLIDERS */
|
||||
|
||||
.slider {
|
||||
$knobH: 100%; //14px;
|
||||
.slot {
|
||||
// @include border-radius($basicCr * .75);
|
||||
//@include sliderTrack();
|
||||
width: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.knob {
|
||||
//@include btnSubtle();
|
||||
//@include controlGrippy(rgba(black, 0.3), vertical, 1px, solid);
|
||||
@include trans-prop-nice-fade(.25s);
|
||||
background-color: $sliderColorKnob;
|
||||
&:hover {
|
||||
background-color: $sliderColorKnobHov;
|
||||
}
|
||||
position: absolute;
|
||||
height: $knobH;
|
||||
width: $sliderKnobW;
|
||||
top: 0;
|
||||
auto: 0;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
}
|
||||
.knob-l {
|
||||
@include border-left-radius($sliderKnobW);
|
||||
cursor: w-resize;
|
||||
}
|
||||
.knob-r {
|
||||
@include border-right-radius($sliderKnobW);
|
||||
cursor: e-resize;
|
||||
}
|
||||
.range {
|
||||
@include trans-prop-nice-fade(.25s);
|
||||
background-color: $sliderColorRange;
|
||||
cursor: ew-resize;
|
||||
position: absolute;
|
||||
top: 0; //$tbOffset;
|
||||
right: auto;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
height: auto;
|
||||
width: auto;
|
||||
&:hover {
|
||||
background-color: $sliderColorRangeHov;
|
||||
}
|
||||
}
|
||||
$knobH: 100%; //14px;
|
||||
.slot {
|
||||
// @include border-radius($basicCr * .75);
|
||||
//@include sliderTrack();
|
||||
width: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.knob {
|
||||
@include trans-prop-nice-fade(.25s);
|
||||
background-color: $sliderColorKnob;
|
||||
&:hover {
|
||||
background-color: $sliderColorKnobHov;
|
||||
}
|
||||
position: absolute;
|
||||
height: $knobH;
|
||||
width: $sliderKnobW;
|
||||
top: 0;
|
||||
auto: 0;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
}
|
||||
.knob-l {
|
||||
@include border-left-radius($sliderKnobW);
|
||||
cursor: w-resize;
|
||||
}
|
||||
.knob-r {
|
||||
@include border-right-radius($sliderKnobW);
|
||||
cursor: e-resize;
|
||||
}
|
||||
.range {
|
||||
@include trans-prop-nice-fade(.25s);
|
||||
background-color: $sliderColorRange;
|
||||
cursor: ew-resize;
|
||||
position: absolute;
|
||||
top: 0; //$tbOffset;
|
||||
right: auto;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
height: auto;
|
||||
width: auto;
|
||||
&:hover {
|
||||
background-color: $sliderColorRangeHov;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************** DATETIME PICKER */
|
||||
.l-datetime-picker {
|
||||
$r1H: 15px;
|
||||
@include user-select(none);
|
||||
font-size: 0.8rem;
|
||||
padding: $interiorMarginLg !important;
|
||||
width: 230px;
|
||||
.l-month-year-pager {
|
||||
$pagerW: 20px;
|
||||
//@include test();
|
||||
//font-size: 0.8rem;
|
||||
height: $r1H;
|
||||
margin-bottom: $interiorMargin;
|
||||
position: relative;
|
||||
.pager,
|
||||
.val {
|
||||
//@include test(red);
|
||||
@extend .abs;
|
||||
}
|
||||
.pager {
|
||||
width: $pagerW;
|
||||
@extend .ui-symbol;
|
||||
&.prev {
|
||||
right: auto;
|
||||
&:before {
|
||||
content: "\3c";
|
||||
}
|
||||
}
|
||||
&.next {
|
||||
left: auto;
|
||||
text-align: right;
|
||||
&:before {
|
||||
content: "\3e";
|
||||
}
|
||||
}
|
||||
}
|
||||
.val {
|
||||
text-align: center;
|
||||
left: $pagerW + $interiorMargin;
|
||||
right: $pagerW + $interiorMargin;
|
||||
}
|
||||
}
|
||||
.l-calendar,
|
||||
.l-time-selects {
|
||||
border-top: 1px solid $colorInteriorBorder
|
||||
}
|
||||
.l-time-selects {
|
||||
line-height: $formInputH;
|
||||
}
|
||||
$r1H: 15px;
|
||||
@include user-select(none);
|
||||
font-size: 0.8rem;
|
||||
padding: $interiorMarginLg !important;
|
||||
width: 230px;
|
||||
.l-month-year-pager {
|
||||
$pagerW: 20px;
|
||||
//@include test();
|
||||
//font-size: 0.8rem;
|
||||
height: $r1H;
|
||||
margin-bottom: $interiorMargin;
|
||||
position: relative;
|
||||
.pager,
|
||||
.val {
|
||||
//@include test(red);
|
||||
@extend .abs;
|
||||
}
|
||||
.pager {
|
||||
width: $pagerW;
|
||||
@extend .ui-symbol;
|
||||
&.prev {
|
||||
right: auto;
|
||||
&:before {
|
||||
content: "\3c";
|
||||
}
|
||||
}
|
||||
&.next {
|
||||
left: auto;
|
||||
text-align: right;
|
||||
&:before {
|
||||
content: "\3e";
|
||||
}
|
||||
}
|
||||
}
|
||||
.val {
|
||||
text-align: center;
|
||||
left: $pagerW + $interiorMargin;
|
||||
right: $pagerW + $interiorMargin;
|
||||
}
|
||||
}
|
||||
.l-calendar,
|
||||
.l-time-selects {
|
||||
border-top: 1px solid $colorInteriorBorder
|
||||
}
|
||||
.l-time-selects {
|
||||
line-height: $formInputH;
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************** CALENDAR */
|
||||
.l-calendar {
|
||||
$colorMuted: pushBack($colorMenuFg, 30%);
|
||||
ul.l-cal-row {
|
||||
@include display-flex;
|
||||
@include flex-flow(row nowrap);
|
||||
margin-top: 1px;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
li {
|
||||
@include flex(1 0);
|
||||
//@include test();
|
||||
margin-left: 1px;
|
||||
padding: $interiorMargin;
|
||||
text-align: center;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
&.l-header li {
|
||||
color: $colorMuted;
|
||||
}
|
||||
&.l-body li {
|
||||
@include trans-prop-nice(background-color, .25s);
|
||||
cursor: pointer;
|
||||
&.in-month {
|
||||
background-color: $colorCalCellInMonthBg;
|
||||
}
|
||||
.sub {
|
||||
color: $colorMuted;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
&.selected {
|
||||
background: $colorCalCellSelectedBg;
|
||||
color: $colorCalCellSelectedFg;
|
||||
.sub {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: $colorCalCellHovBg;
|
||||
color: $colorCalCellHovFg;
|
||||
.sub {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
$colorMuted: pushBack($colorMenuFg, 30%);
|
||||
ul.l-cal-row {
|
||||
@include display-flex;
|
||||
@include flex-flow(row nowrap);
|
||||
margin-top: 1px;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
li {
|
||||
@include flex(1 0);
|
||||
//@include test();
|
||||
margin-left: 1px;
|
||||
padding: $interiorMargin;
|
||||
text-align: center;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
&.l-header li {
|
||||
color: $colorMuted;
|
||||
}
|
||||
&.l-body li {
|
||||
@include trans-prop-nice(background-color, .25s);
|
||||
cursor: pointer;
|
||||
&.in-month {
|
||||
background-color: $colorCalCellInMonthBg;
|
||||
}
|
||||
.sub {
|
||||
color: $colorMuted;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
&.selected {
|
||||
background: $colorCalCellSelectedBg;
|
||||
color: $colorCalCellSelectedFg;
|
||||
.sub {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: $colorCalCellHovBg;
|
||||
color: $colorCalCellHovFg;
|
||||
.sub {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************** BROWSER ELEMENTS */
|
||||
|
||||
@include desktop {
|
||||
::-webkit-scrollbar {
|
||||
@include border-radius(2px);
|
||||
@include box-sizing(border-box);
|
||||
@include box-shadow(inset $scrollbarTrackShdw);
|
||||
background-color: $scrollbarTrackColorBg;
|
||||
height: $scrollbarTrackSize;
|
||||
width: $scrollbarTrackSize;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
@include border-radius(2px);
|
||||
@include box-sizing(border-box);
|
||||
@include box-shadow(inset $scrollbarTrackShdw);
|
||||
background-color: $scrollbarTrackColorBg;
|
||||
height: $scrollbarTrackSize;
|
||||
width: $scrollbarTrackSize;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
$bg: $scrollbarThumbColor;
|
||||
$hc: $scrollbarThumbColorHov;
|
||||
$gr: 5%;
|
||||
@include background-image(linear-gradient(lighten($bg, $gr), $bg 20px));
|
||||
@include border-radius(2px);
|
||||
@include box-sizing(border-box);
|
||||
//@include boxShdwSubtle();
|
||||
//border-top: 1px solid lighten($bg, 20%);
|
||||
&:hover {
|
||||
@include background-image(linear-gradient(lighten($hc, $gr), $hc 20px));
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
$bg: $scrollbarThumbColor;
|
||||
$hc: $scrollbarThumbColorHov;
|
||||
$gr: 5%;
|
||||
@include background-image(linear-gradient(lighten($bg, $gr), $bg 20px));
|
||||
@include border-radius(2px);
|
||||
@include box-sizing(border-box);
|
||||
//@include boxShdwSubtle();
|
||||
//border-top: 1px solid lighten($bg, 20%);
|
||||
&:hover {
|
||||
@include background-image(linear-gradient(lighten($hc, $gr), $hc 20px));
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: $scrollbarTrackColorBg;
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar-corner {
|
||||
background: $scrollbarTrackColorBg;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
.l-tree-item-flat-list {
|
||||
// For lists of tree-items that are flat. Remove margin, etc. normally needed for the expansion arrow.
|
||||
.tree-item {
|
||||
.label {
|
||||
.t-object-label {
|
||||
left: $interiorMargin !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -43,6 +43,11 @@
|
||||
}
|
||||
|
||||
&.create-btn {
|
||||
&:before {
|
||||
content:'\2b';
|
||||
display: inline;
|
||||
font-family: symbolsfont;
|
||||
}
|
||||
.title-label {
|
||||
font-size: 1rem;
|
||||
}
|
||||
@@ -83,7 +88,7 @@
|
||||
@include menuUlReset();
|
||||
li {
|
||||
@include box-sizing(border-box);
|
||||
border-top: 1px solid lighten($colorMenuBg, 20%);
|
||||
border-top: 1px solid pullForward($colorMenuBg, 10%);
|
||||
color: pullForward($colorMenuBg, 60%);
|
||||
line-height: $menuLineH;
|
||||
padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
|
||||
|
||||
306
platform/commonUI/general/res/sass/controls/_messages.scss
Normal file
306
platform/commonUI/general/res/sass/controls/_messages.scss
Normal file
@@ -0,0 +1,306 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT Web includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
@mixin statusBannerColors($bg, $fg: $colorStatusFg) {
|
||||
$bgPb: 30%;
|
||||
$bgPbD: 10%;
|
||||
background-color: darken($bg, $bgPb);
|
||||
color: $fg;
|
||||
&:hover {
|
||||
background-color: darken($bg, $bgPb - $bgPbD);
|
||||
}
|
||||
.s-action {
|
||||
background-color: darken($bg, $bgPb + $bgPbD);
|
||||
&:hover {
|
||||
background-color: darken($bg, $bgPb);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status.block {
|
||||
color: $colorStatusDefault;
|
||||
cursor: default;
|
||||
display: inline-block;
|
||||
margin-right: $interiorMargin;
|
||||
.status-indicator,
|
||||
.label,
|
||||
.count {
|
||||
//@include test(#00ff00);
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.status-indicator {
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
&.ok .status-indicator,
|
||||
&.info .status-indicator {
|
||||
color: $colorStatusInfo;
|
||||
}
|
||||
&.alert .status-indicator,
|
||||
&.warning .status-indicator,
|
||||
&.caution .status-indicator {
|
||||
color: $colorStatusAlert;
|
||||
}
|
||||
&.error .status-indicator {
|
||||
color: $colorStatusError;
|
||||
}
|
||||
.label {
|
||||
// Max-width silliness is necessary for width transition
|
||||
@include trans-prop-nice(max-width, .25s);
|
||||
overflow: hidden;
|
||||
max-width: 0px;
|
||||
}
|
||||
.count {
|
||||
@include trans-prop-nice(opacity, .25s);
|
||||
font-weight: bold;
|
||||
opacity: 1;
|
||||
}
|
||||
&:hover {
|
||||
.label {
|
||||
max-width: 450px;
|
||||
width: auto;
|
||||
}
|
||||
.count {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles for messages and message banners */
|
||||
.message {
|
||||
&.block {
|
||||
@include border-radius($basicCr);
|
||||
padding: $interiorMarginLg;
|
||||
}
|
||||
&.error {
|
||||
background-color: rgba($colorAlert,0.3);
|
||||
color: lighten($colorAlert, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
.l-message-banner {
|
||||
$m: $interiorMarginSm;
|
||||
$lh: $ueFooterH - ($m*2) - 1;
|
||||
@include box-sizing(border-box);
|
||||
@include ellipsize();
|
||||
@include display-flex;
|
||||
@include flex-direction(row);
|
||||
@include 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%));
|
||||
|
||||
&.minimized {
|
||||
@include transition-property(left, opacity);
|
||||
@include transition-duration(0.3s);
|
||||
@include transition-timing-function(ease-in-out);
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.new {
|
||||
left: 50%;
|
||||
opacity: 1;
|
||||
&:not(.info) {
|
||||
@include pulse(100ms, 10);
|
||||
}
|
||||
}
|
||||
|
||||
.banner-elem {
|
||||
@include flex(0 1 auto);
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
}
|
||||
.l-action {
|
||||
line-height: $lh - 3;
|
||||
padding: 0 $interiorMargin;
|
||||
}
|
||||
.close {
|
||||
//@include test(red, 0.7);
|
||||
cursor: pointer;
|
||||
font-size: 7px;
|
||||
width: 8px;
|
||||
}
|
||||
.l-progress-bar {
|
||||
$h: $lh - 10;
|
||||
height: $h;
|
||||
line-height: $h;
|
||||
width: 100px;
|
||||
}
|
||||
.progress-info { display: none; }
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.s-message-banner {
|
||||
//@include transition-property(left, opacity);
|
||||
//@include transition-duration(0.35s);
|
||||
//@include transition-timing-function(ease-in-out);
|
||||
}
|
||||
|
||||
.s-message-banner {
|
||||
@include border-radius($controlCr);
|
||||
@include statusBannerColors($colorStatusDefault, $colorStatusFg);
|
||||
cursor: pointer;
|
||||
a { color: inherit; }
|
||||
.s-action {
|
||||
@include border-radius($basicCr);
|
||||
@include trans-prop-nice(background-color);
|
||||
}
|
||||
.close {
|
||||
opacity: 0.5;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.ok,
|
||||
&.info {
|
||||
@include statusBannerColors($colorStatusInfo);
|
||||
}
|
||||
&.caution,
|
||||
&.warning,
|
||||
&.alert {
|
||||
@include statusBannerColors($colorStatusAlert);
|
||||
}
|
||||
&.error {
|
||||
@include statusBannerColors($colorStatusError);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin messageBlock($iconW: 32px) {
|
||||
.type-icon.message-type {
|
||||
@include txtShdw($shdwStatusIc);
|
||||
&:before { content:"\e608"; }
|
||||
color: $colorStatusDefault;
|
||||
font-size: $iconW;
|
||||
padding: 1px;
|
||||
width: $iconW + 2;
|
||||
}
|
||||
|
||||
.message-severity-info .type-icon.message-type {
|
||||
&:before { content:"\e608"; }
|
||||
color: $colorStatusInfo;
|
||||
}
|
||||
.message-severity-alert .type-icon.message-type {
|
||||
&:before { content:"\e610"; }
|
||||
color: $colorStatusAlert;
|
||||
}
|
||||
.message-severity-error .type-icon.message-type {
|
||||
&:before { content:"\21"; }
|
||||
color: $colorStatusError;
|
||||
}
|
||||
}
|
||||
/* Paths:
|
||||
t-dialog | t-dialog-sm > t-message-single | t-message-list > overlay > holder > contents > l-message >
|
||||
message-type > (icon)
|
||||
message-contents >
|
||||
top-bar >
|
||||
title
|
||||
hint
|
||||
editor >
|
||||
(if displaying list of messages)
|
||||
ul > li > l-message >
|
||||
... same as above
|
||||
bottom-bar
|
||||
*/
|
||||
|
||||
.l-message {
|
||||
@include display-flex;
|
||||
@include flex-direction(row);
|
||||
@include align-items(stretch);
|
||||
.type-icon.message-type {
|
||||
//@include test(red);
|
||||
@include flex(0 1 auto);
|
||||
position: relative;
|
||||
}
|
||||
.message-contents {
|
||||
//@include test(blue);
|
||||
@include flex(1 1 auto);
|
||||
margin-left: $overlayMargin;
|
||||
position: relative;
|
||||
|
||||
.top-bar,
|
||||
.message-body {
|
||||
margin-bottom: $interiorMarginLg * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Message as singleton
|
||||
.t-message-single {
|
||||
@include messageBlock(80px);
|
||||
|
||||
@include desktop {
|
||||
.l-message,
|
||||
.bottom-bar {
|
||||
@include absPosDefault();
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
top: auto;
|
||||
height: $ovrFooterH;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Messages in list
|
||||
.t-message-list {
|
||||
@include messageBlock(32px);
|
||||
|
||||
.message-contents {
|
||||
.l-message {
|
||||
//border-bottom: 1px solid pullForward($colorOvrBg, 20%);
|
||||
@include border-radius($controlCr);
|
||||
background: rgba($colorOvrFg, 0.1);
|
||||
margin-bottom: $interiorMargin;
|
||||
padding: $interiorMarginLg;
|
||||
|
||||
.message-contents,
|
||||
.bottom-bar {
|
||||
//@include test(green);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.message-contents {
|
||||
font-size: 0.9em;
|
||||
margin-left: $interiorMarginLg;
|
||||
.message-action { color: pushBack($colorOvrFg, 20%); }
|
||||
.bottom-bar { text-align: left; }
|
||||
}
|
||||
|
||||
.top-bar,
|
||||
.message-body {
|
||||
margin-bottom: $interiorMarginLg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
.message-contents .l-message { margin-right: $interiorMarginLg; }
|
||||
}
|
||||
}
|
||||
@@ -19,68 +19,114 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
.split-layout {
|
||||
$b: pullForward($colorBodyBg, $contrastRatioPercent);
|
||||
|
||||
.splitter {
|
||||
background-color: $b;
|
||||
@include border-radius($splitterEndCr);
|
||||
@include boxShdw($splitterShdw);
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
//@if $colorSplitterHover != 'none' {
|
||||
&:hover {
|
||||
background-color: $colorSplitterHover;
|
||||
}
|
||||
//}
|
||||
}
|
||||
&.horizontal {
|
||||
// Slides vertically up and down, splitting the element horizontally
|
||||
overflow: hidden; // Suppress overall scroll; each internal pane handles its own overflow
|
||||
.pane {
|
||||
left: 0;
|
||||
right: 0;
|
||||
&.top {
|
||||
bottom: auto;
|
||||
}
|
||||
&.bottom {
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
>.splitter {
|
||||
@include controlGrippy($colorSplitterInterior, horizontal);
|
||||
cursor: row-resize;
|
||||
left: 0; right: 0;
|
||||
width: auto;
|
||||
height: $splitterW;
|
||||
}
|
||||
}
|
||||
&.vertical {
|
||||
// Slides horizontally left to right, splitting the element vertically
|
||||
.pane {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
&.left {
|
||||
right: auto;
|
||||
}
|
||||
&.right {
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
>.splitter {
|
||||
@include controlGrippy($colorBodyBg, vertical);
|
||||
bottom: 0;
|
||||
cursor: col-resize;
|
||||
width: $splitterW;
|
||||
}
|
||||
}
|
||||
.splitter {
|
||||
// Redo the splitter.
|
||||
// New look is a simple line.
|
||||
// Main width is used to provide a good click area, and is always transparent
|
||||
// :after will be a positioned and colored element that is the handle
|
||||
|
||||
//@include test(red);
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
&:after {
|
||||
// The handle
|
||||
content:"";
|
||||
pointer-events: none;
|
||||
@include absPosDefault(0);
|
||||
background: $colorSplitterBg;
|
||||
display: block;
|
||||
|
||||
@if $splitterEndCr != 'none' {
|
||||
@include border-radius($splitterEndCr);
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
//@include test();
|
||||
&:after {
|
||||
background-color: $colorSplitterActive !important;
|
||||
}
|
||||
}
|
||||
|
||||
@if $colorSplitterHover != 'none' {
|
||||
&:not(:active) {
|
||||
&:hover {
|
||||
&:after {
|
||||
background-color: $colorSplitterHover !important;
|
||||
@include trans-prop-nice(background-color, 150ms);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.browse-area .splitter {
|
||||
top: $ueTopBarH + $interiorMarginLg;
|
||||
.split-layout {
|
||||
$inset: splitterHandleInset($splitterD,$splitterHandleD);
|
||||
&.horizontal {
|
||||
// Slides vertically up and down, splitting the element horizontally
|
||||
overflow: hidden; // Suppress overall scroll; each internal pane handles its own overflow
|
||||
.pane {
|
||||
left: 0;
|
||||
right: 0;
|
||||
&.top {
|
||||
bottom: auto;
|
||||
}
|
||||
&.bottom {
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
>.splitter {
|
||||
cursor: row-resize;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: $splitterD;
|
||||
&:after {
|
||||
top: $inset; bottom: $inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
// Slides horizontally left to right, splitting the element vertically
|
||||
.pane {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
&.left {
|
||||
right: auto;
|
||||
}
|
||||
&.right {
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
>.splitter {
|
||||
cursor: col-resize;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
&:not(.flush-right) {
|
||||
width: $splitterD;
|
||||
&:after {
|
||||
left: $inset; right: $inset;
|
||||
}
|
||||
}
|
||||
&.flush-right {
|
||||
width: ceil($splitterD / 2);
|
||||
&:after {
|
||||
background-color: transparent;
|
||||
left: auto; right: 0; width: $splitterHandleD;
|
||||
}
|
||||
&.edge-shdw {
|
||||
@include background-image(linear-gradient(90deg, rgba(black, 0) 40%, rgba(black, 0.05) 70%, rgba(black, 0.2) 100%));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*.browse-area .splitter {
|
||||
top: 0; //$ueTopBarH + $interiorMarginLg;
|
||||
}
|
||||
|
||||
.edit-area .splitter {
|
||||
top: 0;
|
||||
}
|
||||
}*/
|
||||
|
||||
@@ -86,27 +86,16 @@
|
||||
//top: $ueBrowseGridItemTopBarH; bottom: $ueBrowseGridItemBottomBarH; //
|
||||
line-height: $lh;
|
||||
z-index: 1;
|
||||
.item-type {
|
||||
//@include trans-prop-nice("color", $transTime);
|
||||
@include absPosDefault($iconMargin, false);
|
||||
//@include test(red);
|
||||
//color: $colorItemIc;
|
||||
text-align: center;
|
||||
.item-type,
|
||||
.t-item-icon {
|
||||
//@include test();
|
||||
@include transform(translateX(-50%) translateY(-55%));
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
//height: $iconD; width: $iconD;
|
||||
font-size: $iconD * 0.95; //6em;
|
||||
line-height: $iconD;
|
||||
bottom: auto;
|
||||
height: $iconD;
|
||||
top: $iconMargin - 10;
|
||||
.l-icon-link {
|
||||
color: $colorIconLink;
|
||||
height: auto;
|
||||
line-height: 100%;
|
||||
position: absolute;
|
||||
font-size: 0.3em;
|
||||
left: 0px;
|
||||
bottom: 10px;
|
||||
z-index: 2;
|
||||
}
|
||||
//line-height: normal;
|
||||
//text-align: center;
|
||||
}
|
||||
.item-open {
|
||||
@include trans-prop-nice("opacity", $transTime);
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
|
||||
$mobileListIconSize: 30px;
|
||||
$mobileTitleDescH: 35px;
|
||||
$mobileOverlayMargin: 10px;
|
||||
$mobileOverlayMargin: 20px;
|
||||
$phoneItemH: floor($ueBrowseGridItemLg/4);
|
||||
$tabletItemH: floor($ueBrowseGridItemLg/3);
|
||||
|
||||
|
||||
@@ -49,18 +49,11 @@
|
||||
|
||||
}
|
||||
.item-main {
|
||||
.item-type {
|
||||
//@include test(blue);
|
||||
.item-type,
|
||||
.t-item-icon {
|
||||
font-size: $mobileListIconSize;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 0;
|
||||
line-height: 100%;
|
||||
text-align: left;
|
||||
width: $mobileListIconSize;
|
||||
.l-icon-link {
|
||||
bottom: 0;
|
||||
}
|
||||
left: $interiorMarginLg + $interiorMargin;
|
||||
line-height: normal;
|
||||
}
|
||||
.item-open {
|
||||
display: block;
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
background-color: $colorMobilePaneLeft;
|
||||
}
|
||||
|
||||
.pane.right-repr {
|
||||
.pane.right.items {
|
||||
//@include test();
|
||||
@include slMenuTransitions;
|
||||
margin-left: 0 !important;
|
||||
@@ -42,78 +42,66 @@
|
||||
}
|
||||
}
|
||||
|
||||
.user-environ .browse-area,
|
||||
.user-environ .edit-area,
|
||||
.user-environ .editor {
|
||||
top: 0; left: 0; right: 0; bottom: $ueFooterH;
|
||||
}
|
||||
|
||||
.holder.l-mobile {
|
||||
top: $bodyMargin !important;
|
||||
.holder.holder-create-and-search {
|
||||
right: $bodyMargin !important;
|
||||
bottom: $bodyMargin !important;
|
||||
left: $bodyMargin !important;
|
||||
}
|
||||
|
||||
// When the tree is hidden, these are the
|
||||
|
||||
// When the tree is hidden, these are the
|
||||
// classes used for the left menu and the
|
||||
// right representation.
|
||||
.browse-hidetree {
|
||||
@include user-select(none);
|
||||
.pane-tree-hidden {
|
||||
// Sets the left tree menu when the tree
|
||||
// is hidden.
|
||||
.pane.left.treeview {
|
||||
opacity: 0;
|
||||
right: 100% !important;
|
||||
width: auto !important;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
@include trans-prop-nice(opacity, 150ms);
|
||||
//right: 100% !important;
|
||||
//width: auto !important;
|
||||
//overflow-y: hidden;
|
||||
//overflow-x: hidden;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
// Sets the right represenation when
|
||||
// the tree is hidden.
|
||||
.pane.right-repr {
|
||||
.pane.right.items {
|
||||
left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.browse-showtree {
|
||||
.pane-tree-showing {
|
||||
// NOTE: DISABLED SELECTION
|
||||
// Selection disabled in both panes
|
||||
// causing cut/copy/paste menu to
|
||||
// not appear. Should me moved in
|
||||
// future to properly work
|
||||
@include user-select(none);
|
||||
//@include user-select(none);
|
||||
|
||||
// Sets the left tree menu when the tree is shown.
|
||||
.pane.left.treeview {
|
||||
@include trans-prop-nice(opacity, .4s);
|
||||
@include trans-prop-nice(opacity, 250ms, $delay: 250ms);
|
||||
@include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%));
|
||||
opacity: 1;
|
||||
display: block !important;
|
||||
//width: auto !important; // CH CO
|
||||
right: auto !important;
|
||||
width: $proporMenuWithView !important;
|
||||
}
|
||||
// Sets the right representation when the tree is shown.
|
||||
.pane.right-repr {
|
||||
.pane.right.items {
|
||||
left: $proporMenuWithView !important;
|
||||
//width: auto !important;
|
||||
|
||||
//left: 0 !important;
|
||||
//transform: translateX($proporMenuWithView);
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-menu-icon {
|
||||
.toggle-tree {
|
||||
color: $colorKey !important;
|
||||
font-size: 110%;
|
||||
position: absolute;
|
||||
top: $bodyMargin + 2;
|
||||
left: $bodyMargin;
|
||||
&:after {
|
||||
content:'m' !important;
|
||||
font-family: symbolsfont;
|
||||
}
|
||||
}
|
||||
|
||||
.object-browse-bar {
|
||||
//@include test();
|
||||
left: 30px !important;
|
||||
left: 45px !important;
|
||||
.context-available {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
@@ -153,13 +141,13 @@
|
||||
}
|
||||
|
||||
@include phonePortrait {
|
||||
.browse-showtree {
|
||||
.pane-tree-showing {
|
||||
.pane.left.treeview {
|
||||
width: $proporMenuOnly !important;
|
||||
}
|
||||
.pane.right-repr {
|
||||
.pane.right.items {
|
||||
left: 0 !important;
|
||||
@include webkitProp(transform, translateX($proporMenuOnly));
|
||||
@include transform(translateX($proporMenuOnly));
|
||||
#content-area {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@@ -37,21 +37,18 @@
|
||||
//@include test(red);
|
||||
position: absolute;
|
||||
font-size: 1.1em;
|
||||
height: $mobileTreeItemH;
|
||||
line-height: inherit;
|
||||
right: 0px;
|
||||
width: $mobileTreeRightArrowW;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.label {
|
||||
.label,
|
||||
.t-object-label {
|
||||
left: 0;
|
||||
right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow
|
||||
line-height: $mobileTreeItemH;
|
||||
//font-size: 1.1em; // CH CO
|
||||
.type-icon {
|
||||
@include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH);
|
||||
}
|
||||
.title-label {
|
||||
}
|
||||
line-height: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,16 +1,12 @@
|
||||
@include phoneandtablet {
|
||||
.overlay {
|
||||
$m: 0;
|
||||
.clk-icon.close {
|
||||
top: $mobileOverlayMargin; right: $mobileOverlayMargin;
|
||||
}
|
||||
|
||||
> .holder {
|
||||
@include border-radius($m);
|
||||
top: $m;
|
||||
right: $m;
|
||||
bottom: $m;
|
||||
left: $m;
|
||||
height: 90%; width: 90%;
|
||||
|
||||
> .contents {
|
||||
top: $mobileOverlayMargin;
|
||||
right: $mobileOverlayMargin;
|
||||
@@ -22,35 +18,64 @@
|
||||
margin-right: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.form.editor {
|
||||
border: none;
|
||||
|
||||
.contents {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include phone {
|
||||
.overlay > .holder > .contents .form.editor .contents .form-row {
|
||||
> .label,
|
||||
> .controls {
|
||||
//@include test(blue);
|
||||
display: block;
|
||||
float: none;
|
||||
width: 100%;
|
||||
.overlay > .holder {
|
||||
//@include test(orange); // This works!
|
||||
$m: 0;
|
||||
@include border-radius($m);
|
||||
top: $m;
|
||||
right: $m;
|
||||
bottom: $m;
|
||||
left: $m;
|
||||
height: auto; width: auto;
|
||||
min-width: 200px; min-height: 200px;
|
||||
max-height: 100%; max-width: 100%;
|
||||
overflow: auto;
|
||||
@include transform(none);
|
||||
|
||||
.editor .form .form-row {
|
||||
> .label,
|
||||
> .controls {
|
||||
//@include test(blue);
|
||||
display: block;
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
> .label {
|
||||
&:after {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contents {
|
||||
.abs.top-bar,
|
||||
.abs.editor,
|
||||
.abs.message-body,
|
||||
.abs.bottom-bar {
|
||||
//@include test(orange);
|
||||
top: auto; right: auto; bottom: auto; left: auto;
|
||||
height: auto; width: auto;
|
||||
margin-bottom: $interiorMarginLg * 2;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
.t-dialog-sm .overlay > .holder {
|
||||
//@include test(blue);
|
||||
height: auto; max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include phonePortrait {
|
||||
.overlay > .holder {
|
||||
.contents .bottom-bar {
|
||||
text-align: center;
|
||||
}
|
||||
> .label {
|
||||
&:after {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -20,79 +20,124 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
.overlay {
|
||||
.blocker {
|
||||
background: $colorOvrBlocker;
|
||||
z-index: 100;
|
||||
}
|
||||
font-size: 90%;
|
||||
.blocker {
|
||||
background: $colorOvrBlocker;
|
||||
z-index: 100;
|
||||
}
|
||||
.clk-icon.close {
|
||||
font-size: 0.8rem;
|
||||
position: absolute;
|
||||
top: $interiorMarginLg; right: $interiorMarginLg; bottom: auto; left: auto;
|
||||
z-index: 100;
|
||||
top: $interiorMarginLg;
|
||||
right: $interiorMarginLg;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
z-index: 100;
|
||||
}
|
||||
>.holder {
|
||||
$i: 15%;
|
||||
@include containerSubtle($colorOvrBg, $colorOvrFg);
|
||||
@include border-radius($basicCr * 3);
|
||||
color: $colorOvrFg;
|
||||
top: $i; right: $i; bottom: $i; left: $i;
|
||||
z-index: 101;
|
||||
>.contents {
|
||||
> .holder {
|
||||
//$i: 15%;
|
||||
@include containerSubtle($colorOvrBg, $colorOvrFg);
|
||||
@include border-radius($basicCr * 3);
|
||||
color: $colorOvrFg;
|
||||
top: 50%;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 50%;
|
||||
@include transform(translateX(-50%) translateY(-50%));
|
||||
height: 70%;
|
||||
width: 50%;
|
||||
min-height: 300px;
|
||||
max-height: 800px;
|
||||
min-width: 600px;
|
||||
max-width: 1000px;
|
||||
z-index: 101;
|
||||
> .contents {
|
||||
$m: $overlayMargin;
|
||||
top: $m; right: $m; bottom: $m; left: $m;
|
||||
top: $m;
|
||||
right: $m;
|
||||
bottom: $m;
|
||||
left: $m;
|
||||
|
||||
//.top-bar,
|
||||
//.editor,
|
||||
//.bottom-bar {
|
||||
// @include absPosDefault();
|
||||
//}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
@include ellipsize();
|
||||
font-size: 1.2em;
|
||||
margin-bottom: $interiorMargin;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
|
||||
.title {
|
||||
@include ellipsize();
|
||||
font-size: 1.2em;
|
||||
line-height: 120%;
|
||||
margin-bottom: $interiorMargin;
|
||||
}
|
||||
|
||||
.hint {
|
||||
color: pushBack($colorOvrFg, 20%);
|
||||
}
|
||||
|
||||
.abs.top-bar {
|
||||
height: $ovrTopBarH;
|
||||
}
|
||||
|
||||
.editor {
|
||||
top: $ovrTopBarH + ($interiorMargin * 2);
|
||||
bottom: $ovrFooterH + $interiorMargin * 2;
|
||||
left: 0; right: 0;
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
top: auto; right: 0; bottom: 0; left: 0;
|
||||
overflow: visible;
|
||||
//font-size: 1em;
|
||||
height: $ovrFooterH;
|
||||
text-align: right;
|
||||
.s-btn {
|
||||
$bg: $colorOvrBtnBg;
|
||||
&:not(.major) {
|
||||
@include btnSubtle($bg, pullForward($bg, 10%), $colorOvrBtnFg, $colorOvrBtnFg);
|
||||
}
|
||||
font-size: 95%;
|
||||
height: $ovrFooterH;
|
||||
line-height: $ovrFooterH;
|
||||
margin-left: $interiorMargin;
|
||||
padding: 0 $interiorMargin * 3;
|
||||
//&.major {
|
||||
// @extend .s-btn.major;
|
||||
// &:hover {
|
||||
// @extend .s-btn.major:hover;
|
||||
// }
|
||||
//}
|
||||
|
||||
.abs.editor,
|
||||
.abs.message-body {
|
||||
top: $ovrTopBarH + $interiorMarginLg;
|
||||
bottom: $ovrFooterH + $interiorMarginLg;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: auto;
|
||||
.field.l-med {
|
||||
input[type='text'] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.contents.l-dialog {
|
||||
$myM: $interiorMargin;
|
||||
top: $myM;
|
||||
right: $myM;
|
||||
bottom: $myM;
|
||||
left: $myM;
|
||||
overflow: auto;
|
||||
.field.l-med {
|
||||
input[type='text'] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
text-align: right;
|
||||
.s-btn {
|
||||
$bg: $colorOvrBtnBg;
|
||||
&:not(.major) {
|
||||
@include btnSubtle($bg, pullForward($bg, 10%), $colorOvrBtnFg, $colorOvrBtnFg);
|
||||
}
|
||||
font-size: 95%;
|
||||
height: $ovrFooterH;
|
||||
line-height: $ovrFooterH;
|
||||
margin-left: $interiorMargin;
|
||||
padding: 0 $interiorMargin * 3;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.abs.bottom-bar {
|
||||
top: auto;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: visible;
|
||||
//font-size: 1em;
|
||||
height: $ovrFooterH;
|
||||
}
|
||||
|
||||
.l-progress-bar {
|
||||
$h: $progressBarHOverlay;
|
||||
display: block;
|
||||
height: $h;
|
||||
line-height: $h;
|
||||
margin: .5em 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.t-dialog-sm .overlay > .holder {
|
||||
// Used for blocker and in-progress dialogs, modal alerts, etc.
|
||||
//@include test(red);
|
||||
$h: 225px;
|
||||
min-height: $h;
|
||||
height: $h;
|
||||
}
|
||||
@@ -52,7 +52,6 @@ ul.tree {
|
||||
font-size: 0.75em;
|
||||
width: $treeVCW;
|
||||
$runningItemW: $interiorMargin + $treeVCW;
|
||||
// NOTE: [Mobile] Removed Hover on Mobile
|
||||
@include desktop {
|
||||
&:hover {
|
||||
color: $colorItemTreeVCHover !important;
|
||||
@@ -60,25 +59,34 @@ ul.tree {
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
.label,
|
||||
.t-object-label {
|
||||
display: block;
|
||||
// @include test(orange);
|
||||
@include absPosDefault();
|
||||
//left: $runningItemW + $interiorMargin; // Adding pad to left to make room for link icon
|
||||
line-height: $menuLineH;
|
||||
//left: $runningItemW;
|
||||
|
||||
.t-item-icon {
|
||||
@include txtShdwSubtle($shdwItemTreeIcon);
|
||||
font-size: $treeTypeIconH;
|
||||
color: $colorItemTreeIcon;
|
||||
position: absolute;
|
||||
left: $interiorMargin;
|
||||
top: 50%;
|
||||
width: $treeTypeIconH;
|
||||
@include transform(translateY(-50%));
|
||||
}
|
||||
|
||||
.type-icon {
|
||||
//@include absPosDefault(0, false);
|
||||
$d: $treeTypeIconH; // 16px is crisp size
|
||||
$d: $treeTypeIconH;
|
||||
@include txtShdwSubtle($shdwItemTreeIcon);
|
||||
font-size: $d;
|
||||
font-size: $treeTypeIconH;
|
||||
color: $colorItemTreeIcon;
|
||||
left: $interiorMargin;
|
||||
position: absolute;
|
||||
@include verticalCenterBlock($menuLineHPx, $d);
|
||||
@include verticalCenterBlock($menuLineHPx, $treeTypeIconHPx);
|
||||
line-height: 100%;
|
||||
right: auto; width: $d;
|
||||
right: auto; width: $treeTypeIconH;
|
||||
|
||||
.icon {
|
||||
&.l-icon-link,
|
||||
@@ -100,7 +108,8 @@ ul.tree {
|
||||
}
|
||||
}
|
||||
}
|
||||
.title-label {
|
||||
.title-label,
|
||||
.t-title-label {
|
||||
@include absPosDefault();
|
||||
display: block;
|
||||
left: $runningItemW + ($interiorMargin * 3);
|
||||
@@ -116,7 +125,7 @@ ul.tree {
|
||||
.view-control {
|
||||
color: $colorItemTreeSelectedVC;
|
||||
}
|
||||
.label .type-icon {
|
||||
.t-object-label .t-item-icon {
|
||||
color: $colorItemTreeSelectedFg; //$colorItemTreeIconHover;
|
||||
}
|
||||
}
|
||||
@@ -125,9 +134,9 @@ ul.tree {
|
||||
// NOTE: [Mobile] Removed Hover on Mobile
|
||||
@include desktop {
|
||||
&:hover {
|
||||
background: rgba($colorBodyFg, 0.1); //lighten($colorBodyBg, 5%);
|
||||
color: pullForward($colorBodyFg, 20%);
|
||||
.icon {
|
||||
background: $colorItemTreeHoverBg;
|
||||
color: $colorItemTreeHoverFg;
|
||||
.t-item-icon {
|
||||
color: $colorItemTreeIconHover;
|
||||
}
|
||||
}
|
||||
@@ -152,7 +161,7 @@ ul.tree {
|
||||
}
|
||||
|
||||
.tree-item {
|
||||
.label {
|
||||
.t-object-label {
|
||||
left: $interiorMargin + $treeVCW;
|
||||
}
|
||||
}
|
||||
@@ -1,72 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT Web, Copyright (c) 2014-2015, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT Web includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
.ue-bottom-bar {
|
||||
background: $colorFooterBg;
|
||||
color: lighten($colorBodyBg, 30%);
|
||||
font-size: .7rem;
|
||||
//line-height: $ueFooterH - 4px;
|
||||
//line-height: $ueFooterH; // New status bar design
|
||||
.status-holder {
|
||||
//@include border-radius($basicCr * 1.75); // New status bar design
|
||||
@include box-sizing(border-box);
|
||||
//background: $colorFooterBg;
|
||||
//border-bottom: 1px solid lighten($colorBodyBg, 10%); // New status bar design
|
||||
@include absPosDefault($interiorMargin);
|
||||
@include ellipsize();
|
||||
line-height: $ueFooterH - ($interiorMargin * 2);
|
||||
right: 120px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.app-logo {
|
||||
@include box-sizing(border-box);
|
||||
@include absPosDefault($interiorMargin);
|
||||
left: auto;
|
||||
cursor: pointer;
|
||||
//font-size: 0.8em;
|
||||
//line-height: $ueFooterH - 10px;
|
||||
//padding-top: 1px;
|
||||
//text-transform: uppercase;
|
||||
&.logo-openmctweb {
|
||||
background: url($dirImgs + 'logo-openmctweb.svg') no-repeat center center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status.block {
|
||||
//display: inline-block;
|
||||
display: inline; // New status bar design. Inline to support ellipsis overflow
|
||||
margin-right: $interiorMarginLg;
|
||||
.status-indicator {
|
||||
//@include border-radius($controlCr * 0.9);
|
||||
//@include box-shadow(inset rgba(black, 0.5) 0 0 3px);
|
||||
//@include text-shadow(rgba(black, 0.3) 0 0 2px);
|
||||
display: inline-block;
|
||||
margin-right: $interiorMarginSm;
|
||||
color: $colorKey;
|
||||
&.ok {
|
||||
color: #009900;
|
||||
}
|
||||
&.caution {
|
||||
color: #ffaa00;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -29,13 +29,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
.holder-all {
|
||||
/*.holder-all {
|
||||
$myM: 0; // $interiorMarginSm;
|
||||
top: $myM;
|
||||
right: $myM;
|
||||
bottom: $myM;
|
||||
left: $myM;
|
||||
}
|
||||
}*/
|
||||
|
||||
.browse-area,
|
||||
.edit-area,
|
||||
@@ -96,12 +96,8 @@
|
||||
|
||||
.user-environ {
|
||||
.browse-area,
|
||||
.edit-area,
|
||||
.editor {
|
||||
top: $bodyMargin + $ueTopBarH + ($interiorMargin);
|
||||
right: $bodyMargin;
|
||||
bottom: $ueFooterH + $bodyMargin;
|
||||
left: $bodyMargin;
|
||||
top: 0; left: 0; right: 0; bottom: $ueFooterH;
|
||||
}
|
||||
|
||||
.browse-area,
|
||||
@@ -115,31 +111,51 @@
|
||||
.edit-area {
|
||||
$tbH: $btnToolbarH + $interiorMargin;
|
||||
top: $bodyMargin + $ueTopBarEditH + ($interiorMargin);
|
||||
left: $bodyMargin;
|
||||
right: $bodyMargin;
|
||||
bottom: $bodyMargin + $ueFooterH;
|
||||
.tool-bar {
|
||||
bottom: auto;
|
||||
height: $tbH;
|
||||
line-height: $btnToolbarH;
|
||||
}
|
||||
.work-area {
|
||||
.object-holder.work-area {
|
||||
top: $tbH + $interiorMargin * 2;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.ue-bottom-bar {
|
||||
//@include absPosDefault($bodyMargin);
|
||||
@include absPosDefault(0); // New status bar design
|
||||
top: auto;
|
||||
height: $ueFooterH;
|
||||
.status-holder {
|
||||
//right: $ueAppLogoW + $bodyMargin; New status bar design
|
||||
z-index: 1;
|
||||
}
|
||||
.app-logo {
|
||||
left: auto;
|
||||
width: $ueAppLogoW;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
// from _bottom-bar.scss
|
||||
.ue-bottom-bar {
|
||||
@include absPosDefault(0);// New status bar design
|
||||
top: auto;
|
||||
height: $ueFooterH;
|
||||
line-height: $ueFooterH - ($interiorMargin * 2);
|
||||
background: $colorFooterBg;
|
||||
color: lighten($colorBodyBg, 30%);
|
||||
font-size: .7rem;
|
||||
|
||||
.status-holder {
|
||||
@include box-sizing(border-box);
|
||||
@include absPosDefault($interiorMargin);
|
||||
@include ellipsize();
|
||||
//line-height: $ueFooterH - ($interiorMargin * 2);
|
||||
right: 120px;
|
||||
text-transform: uppercase;
|
||||
z-index: 1;
|
||||
}
|
||||
.app-logo {
|
||||
@include box-sizing(border-box);
|
||||
@include absPosDefault($interiorMargin);
|
||||
cursor: pointer;
|
||||
left: auto;
|
||||
width: $ueAppLogoW;
|
||||
z-index: 2;
|
||||
&.logo-openmctweb {
|
||||
background: url($dirImgs + 'logo-openmctweb.svg') no-repeat center center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cols {
|
||||
@@ -205,10 +221,19 @@
|
||||
|
||||
.browse-mode {
|
||||
.split-layout {
|
||||
.split-pane-component.pane.left {
|
||||
min-width: 150px;
|
||||
max-width: 800px;
|
||||
width: $ueBrowseLeftPaneW;
|
||||
.split-pane-component.pane {
|
||||
//@include test(green);
|
||||
&.treeview.left {
|
||||
min-width: 150px;
|
||||
max-width: 800px;
|
||||
width: $ueBrowseLeftPaneTreeW;
|
||||
}
|
||||
&.t-inspect.right {
|
||||
min-width: 200px;
|
||||
max-width: 600px;
|
||||
//padding-left: $ueCollapsedPaneEdgeM; // Allow room for mini-tab element
|
||||
width: $ueBrowseRightPaneInspectW;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -226,16 +251,33 @@
|
||||
}
|
||||
|
||||
.pane {
|
||||
@include box-sizing(border-box);
|
||||
position: absolute;
|
||||
|
||||
.pane-header {
|
||||
text-transform: uppercase;
|
||||
height: $ueTopBarH;
|
||||
line-height: $ueTopBarH;
|
||||
margin-bottom: $interiorMargin;
|
||||
}
|
||||
|
||||
.primary-pane {
|
||||
// Need to lift up this pane to ensure that 'collapsed' panes don't block user interactions
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&.treeview.left {
|
||||
.create-btn-holder {
|
||||
bottom: auto;
|
||||
top: 0;
|
||||
height: $ueTopBarH;
|
||||
.wrapper.menu-element {
|
||||
position: absolute;
|
||||
bottom: $interiorMargin;
|
||||
}
|
||||
//.create-btn-holder {
|
||||
// //bottom: auto;
|
||||
// //top: 0;
|
||||
// height: $ueTopBarH;
|
||||
// .wrapper.menu-element {
|
||||
// position: absolute;
|
||||
// bottom: $interiorMargin;
|
||||
// }
|
||||
//}
|
||||
.holder-create-and-search{
|
||||
|
||||
}
|
||||
.search-holder {
|
||||
top: $ueTopBarH + $interiorMarginLg;
|
||||
@@ -245,6 +287,54 @@
|
||||
top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
.mini-tab-icon.toggle-pane {
|
||||
//@include test(blue, 0.3);
|
||||
z-index: 5;
|
||||
@include desktop {
|
||||
$d: $uePaneMiniTabH;
|
||||
$paneExpandedOffset: $splitterD + $uePaneMiniTabW;
|
||||
top: $bodyMargin;
|
||||
height: $d;
|
||||
line-height: $d;
|
||||
&:after {
|
||||
// Always the icon that shows when the pane is collapsed
|
||||
opacity: 0;
|
||||
}
|
||||
&.collapsed {
|
||||
&:before {
|
||||
opacity: 0;
|
||||
}
|
||||
&:after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.toggle-tree.anchor-left {
|
||||
left: 0;
|
||||
@include transform(translateX(-1 * $paneExpandedOffset));
|
||||
&:after {
|
||||
content: '\6d'; // Menu 'hamburger' icon
|
||||
}
|
||||
&.collapsed {
|
||||
left: 0;
|
||||
@include transform(translateX((-1 * $ueCollapsedPaneEdgeM) + $interiorMargin));
|
||||
}
|
||||
&:not(.collapsed):before {
|
||||
@include trans-prop-nice(opacity, 200ms, 200ms);
|
||||
}
|
||||
}
|
||||
&.toggle-inspect.anchor-right {
|
||||
right: $bodyMargin;
|
||||
&:after {
|
||||
content: '\e615'; // e615: Crosshair icon; was e608: Info "i" icon
|
||||
}
|
||||
&.collapsed {
|
||||
right: $interiorMargin;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.items {
|
||||
.object-browse-bar {
|
||||
.left.abs,
|
||||
@@ -266,23 +356,44 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
&.vertical {
|
||||
/* &.vertical {
|
||||
// Slides left and right
|
||||
> .pane {
|
||||
// @include test();
|
||||
margin-left: $interiorMargin;
|
||||
> .pane.left {
|
||||
> .holder {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
.holder {
|
||||
right: $interiorMarginSm;
|
||||
}
|
||||
left: $bodyMargin;
|
||||
}
|
||||
}
|
||||
> .pane.right {
|
||||
> .holder {
|
||||
right: $bodyMargin;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
// Specific elements margins
|
||||
.holder.holder-create-and-search {
|
||||
top: $bodyMargin;
|
||||
right: 0;
|
||||
bottom: $bodyMargin;
|
||||
left: $bodyMargin;
|
||||
}
|
||||
|
||||
.holder.holder-object-and-inspector {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
.holder-object {
|
||||
top: $bodyMargin;
|
||||
bottom: $bodyMargin;
|
||||
}
|
||||
.holder-inspector-elements {
|
||||
top: $bodyMargin;
|
||||
bottom: $bodyMargin;
|
||||
left: $bodyMargin;
|
||||
right: $bodyMargin;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -340,4 +451,84 @@
|
||||
@include webkitProp(flex, '1 1 0');
|
||||
padding-right: $interiorMarginLg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// When the tree is hidden, these are the
|
||||
// classes used for the left menu and the
|
||||
// right representation.
|
||||
.pane-tree-hidden {
|
||||
// Sets the left tree menu when the tree is hidden.
|
||||
//.pane.left.treeview,
|
||||
.tree-holder,
|
||||
.splitter-treeview,
|
||||
.holder-create-and-search {
|
||||
opacity: 0;
|
||||
}
|
||||
/*.holder-create-and-search {
|
||||
@include trans-prop-nice((top, left), 250ms);
|
||||
top: $ueTopBarH + $interiorMargin;
|
||||
left: -1 * $bodyMargin !important;
|
||||
.create-btn {
|
||||
@include border-left-radius(0);
|
||||
@include trans-prop-nice((width), 250ms);
|
||||
width: $uePaneMiniTabW !important;
|
||||
text-align: center !important;
|
||||
padding: 0;
|
||||
.title-label,
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
&:before {
|
||||
font-size: 9px;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
}
|
||||
|
||||
.pane-tree-showing {
|
||||
// Sets the left tree menu when the tree is shown.
|
||||
//.pane.left.treeview,
|
||||
.tree-holder,
|
||||
.splitter-treeview {
|
||||
@include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.holder-create-and-search {
|
||||
@include trans-prop-nice(opacity, $dur: 250ms, $delay: 200ms);
|
||||
}
|
||||
}
|
||||
|
||||
.pane-inspect-showing {
|
||||
.l-object-and-inspector {
|
||||
.l-inspect,
|
||||
.splitter-inspect {
|
||||
@include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pane-inspect-hidden {
|
||||
.l-object-and-inspector {
|
||||
.l-inspect,
|
||||
.splitter-inspect {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
.pane.treeview.left .tree-holder {
|
||||
padding-right: $interiorMargin;
|
||||
}
|
||||
.pane-tree-hidden {
|
||||
.pane.right.primary-pane { left: $ueCollapsedPaneEdgeM !important; }
|
||||
}
|
||||
.pane-inspect-hidden .l-object-and-inspector {
|
||||
.pane.left { right: $ueCollapsedPaneEdgeM !important; }
|
||||
}
|
||||
|
||||
.pane:not(.resizing) {
|
||||
@include trans-prop-nice-resize-w(250ms);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user