730 lines
18 KiB
SCSS
730 lines
18 KiB
SCSS
/*****************************************************************************
|
|
* Open MCT, Copyright (c) 2014-2017, United States Government
|
|
* as represented by the Administrator of the National Aeronautics and Space
|
|
* Administration. All rights reserved.
|
|
*
|
|
* Open MCT 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 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.
|
|
*****************************************************************************/
|
|
|
|
.accordion {
|
|
$accordionHeadH: 18px;
|
|
margin-top: $interiorMargin;
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
.accordion-head {
|
|
$op: 0.2;
|
|
border-radius: $basicCr * 0.75;
|
|
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;
|
|
}
|
|
}
|
|
|
|
.s-icon-button {
|
|
// Clickable icon elements that have hover
|
|
@extend .ui-symbol;
|
|
color: $colorClickIcon;
|
|
&:hover {
|
|
color: $colorClickIconHov;
|
|
}
|
|
}
|
|
|
|
.s-toggle-icon {
|
|
// Has default (in-active) and .active states
|
|
@extend .s-icon-button;
|
|
color: $colorToggleIcon;
|
|
&:hover { color: rgba($colorToggleIconHov, 0.5); }
|
|
&.active { color: $colorToggleIconActive; }
|
|
}
|
|
|
|
.l-composite-control {
|
|
vertical-align: middle;
|
|
&:not(.l-inline) {
|
|
margin-bottom: $interiorMargin;
|
|
}
|
|
&.l-inline {
|
|
display: inline-block;
|
|
}
|
|
&.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.
|
|
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; bottom: auto;
|
|
text-align: right;
|
|
z-index: 5;
|
|
}
|
|
|
|
.s-local-controls {
|
|
@include trans-prop-nice(opacity);
|
|
font-size: 0.7rem;
|
|
&.s-wrapper-transluc {
|
|
// Semi-opaque wrapper to visually distinguish a control
|
|
// from the background
|
|
background: rgba($colorTransLucBg, 0.7);
|
|
box-sizing: border-box;
|
|
border-radius: $controlCr;
|
|
}
|
|
}
|
|
|
|
/******************************************************** CUSTOM CHECKBOXES */
|
|
label.checkbox.custom,
|
|
label.radio.custom {
|
|
$bg: pullForward($colorBodyBg, 10%);
|
|
$d: $formRowCtrlsH;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
line-height: 120%;
|
|
margin-right: $interiorMargin * 4;
|
|
padding-left: $d + $interiorMargin;
|
|
position: relative;
|
|
em {
|
|
color: $colorBodyFg;
|
|
display: inline-block;
|
|
height: $d;
|
|
width: $d;
|
|
&:before {
|
|
border-radius: $basicCr * .75;
|
|
background: $bg;
|
|
box-shadow: inset rgba(black, 0.4) 0 1px 2px;
|
|
box-sizing: border-box;
|
|
content: "";
|
|
font-family: 'symbolsfont';
|
|
font-size: 0.7em;
|
|
display: inline-block;
|
|
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%);
|
|
}
|
|
}
|
|
}
|
|
|
|
label.checkbox.custom input:checked ~ em:before { content: $glyph-icon-check; }
|
|
label.radio.custom input:checked ~ em:before { content: $glyph-icon-bullet; }
|
|
|
|
.s-menu-button label.checkbox.custom {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.item .checkbox {
|
|
&.checked label {
|
|
box-shadow: none;
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
label.form-control.checkbox {
|
|
input {
|
|
margin-right: $interiorMargin;
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
|
|
/******************************************************** PLACEHOLDERS */
|
|
input[type="text"],
|
|
input[type="search"],
|
|
textarea {
|
|
@include placeholder {
|
|
color: rgba($colorInputFg, 0.4);
|
|
font-style: italic;
|
|
}
|
|
}
|
|
|
|
/******************************************************** INPUTS */
|
|
input[type="text"],
|
|
input[type="search"],
|
|
input[type="number"] {
|
|
@include nice-input();
|
|
vertical-align: baseline;
|
|
padding: $inputTextP;
|
|
&.numeric {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.l-input-sm {
|
|
input[type="text"],
|
|
input[type="search"],
|
|
input[type="number"] {
|
|
width: 50px !important;
|
|
}
|
|
}
|
|
|
|
.l-input-lg input[type="text"],
|
|
input[type="text"].lg { width: 100% !important; }
|
|
.l-input-med input[type="text"],
|
|
input[type="text"].med { width: 200px !important; }
|
|
input[type="text"].sm { width: 50px !important; }
|
|
.l-numeric input[type="text"],
|
|
input[type="text"].numeric { text-align: right; }
|
|
|
|
.l-textarea-sm textarea,
|
|
textarea.sm { position: relative; height: 50px; }
|
|
.l-textarea-med textarea,
|
|
textarea.med { position: relative; height: 150px; }
|
|
.l-textarea-lg textarea,
|
|
textarea.lg { position: relative; height: 300px; }
|
|
|
|
.input-labeled {
|
|
// Used in toolbar
|
|
margin-left: $interiorMargin;
|
|
label {
|
|
display: inline-block;
|
|
margin-right: $interiorMarginSm;
|
|
}
|
|
&.inline {
|
|
display: inline-block;
|
|
}
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
/******************************************************** SELECTS */
|
|
.select {
|
|
@include btnSubtle($bg: $colorSelectBg);
|
|
@extend .icon-arrow-down; // Context arrow
|
|
@if $shdwBtns != none {
|
|
margin: 0 0 2px 0; // Needed to avoid dropshadow from being clipped by parent containers
|
|
}
|
|
display: inline-block;
|
|
padding: 0 $interiorMargin;
|
|
overflow: hidden;
|
|
position: relative;
|
|
line-height: $formInputH;
|
|
select {
|
|
@include appearance(none);
|
|
box-sizing: border-box;
|
|
background: none;
|
|
color: $colorSelectFg;
|
|
cursor: pointer;
|
|
border: none !important;
|
|
padding: 4px 25px 2px 0px;
|
|
width: 130%;
|
|
option {
|
|
margin: $interiorMargin 0; // Firefox
|
|
}
|
|
}
|
|
&:before {
|
|
//@include contextArrow();
|
|
pointer-events: none;
|
|
color: rgba($colorSelectFg, percentToDecimal($contrastInvokeMenuPercent));
|
|
display: block;
|
|
position: absolute;
|
|
right: $interiorMargin; top: 0;
|
|
}
|
|
}
|
|
|
|
/******************************************************** AUTOCOMPLETE */
|
|
.autocomplete {
|
|
input {
|
|
width: 226px;
|
|
padding: 5px 0px 5px 7px;
|
|
}
|
|
.icon-arrow-down {
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 210px;
|
|
font-size: 10px;
|
|
cursor: pointer;
|
|
}
|
|
.autocompleteOptions {
|
|
border: 1px solid $colorFormLines;
|
|
border-radius: 5px;
|
|
width: 224px;
|
|
max-height: 170px;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
li {
|
|
border: 1px solid $colorFormLines;
|
|
padding: 8px 0px 8px 5px;
|
|
.optionText {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.optionPreSelected {
|
|
background-color: $colorInspectorSectionHeaderBg;
|
|
color: $colorInspectorSectionHeaderFg;
|
|
}
|
|
}
|
|
}
|
|
|
|
/******************************************************** OBJECT-HEADER */
|
|
.object-header {
|
|
font-size: 1em;
|
|
|
|
> .type-icon {
|
|
color: $colorObjHdrIc;
|
|
font-size: 120%;
|
|
float: left;
|
|
margin-right: $interiorMargin;
|
|
}
|
|
|
|
.l-elem-wrapper {
|
|
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;
|
|
}
|
|
|
|
.title-label {
|
|
color: $colorObjHdrTxt;
|
|
@include ellipsize();
|
|
}
|
|
|
|
.context-available-w {
|
|
z-index: 5;
|
|
}
|
|
|
|
.context-available {
|
|
font-size: 0.7em;
|
|
@include flex(0 0 1);
|
|
}
|
|
|
|
.t-object-alert {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/******************************************************** 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 {
|
|
border-radius: $basicCr;
|
|
@include boxIncised(0.3, 4px);
|
|
background: $colorProgressBarOuter;
|
|
.progress-amt {
|
|
border-radius: $basicCr;
|
|
@include boxShdw();
|
|
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%;
|
|
.slot {
|
|
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($sliderKnobR);
|
|
cursor: w-resize;
|
|
}
|
|
.knob-r {
|
|
@include border-right-radius($sliderKnobR);
|
|
cursor: e-resize;
|
|
}
|
|
.range {
|
|
@include trans-prop-nice-fade(.25s);
|
|
background-color: $sliderColorRange;
|
|
cursor: ew-resize;
|
|
position: absolute;
|
|
top: 0;
|
|
right: auto;
|
|
bottom: 0;
|
|
left: auto;
|
|
height: auto;
|
|
width: auto;
|
|
&:hover {
|
|
background-color: $sliderColorRangeHov;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin sliderKnob() {
|
|
$h: 16px;
|
|
cursor: pointer;
|
|
width: floor($h/1.75);
|
|
height: $h;
|
|
margin-top: 1 + floor($h/2) * -1;
|
|
@include btnSubtle(pullForward($colorBtnBg, 10%));
|
|
//border-radius: 50% !important;
|
|
}
|
|
|
|
@mixin sliderKnobRound() {
|
|
$h: 12px;
|
|
cursor: pointer;
|
|
width: $h;
|
|
height: $h;
|
|
margin-top: 1 + floor($h/2) * -1;
|
|
@include btnSubtle(pullForward($colorBtnBg, 20%));
|
|
border-radius: 50% !important;
|
|
}
|
|
|
|
input[type="range"] {
|
|
// HTML5 range inputs
|
|
|
|
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
|
|
background: transparent; /* Otherwise white in Chrome */
|
|
&:focus {
|
|
outline: none; /* Removes the blue border. */
|
|
}
|
|
|
|
// Thumb
|
|
&::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
@include sliderKnobRound();
|
|
}
|
|
&::-moz-range-thumb {
|
|
border: none;
|
|
@include sliderKnobRound();
|
|
}
|
|
&::-ms-thumb {
|
|
border: none;
|
|
@include sliderKnobRound();
|
|
}
|
|
|
|
// Track
|
|
&::-webkit-slider-runnable-track {
|
|
width: 100%;
|
|
height: 3px;
|
|
@include sliderTrack();
|
|
}
|
|
|
|
&::-moz-range-track {
|
|
width: 100%;
|
|
height: 3px;
|
|
@include sliderTrack();
|
|
}
|
|
}
|
|
|
|
/******************************************************** DATETIME PICKER */
|
|
.l-datetime-picker {
|
|
$r1H: 15px;
|
|
@include user-select(none);
|
|
font-size: 0.8rem;
|
|
padding: $interiorMarginLg !important;
|
|
.l-month-year-pager {
|
|
$pagerW: 20px;
|
|
height: $r1H;
|
|
margin-bottom: $interiorMargin;
|
|
position: relative;
|
|
.pager,
|
|
.val {
|
|
@extend .abs;
|
|
}
|
|
.pager {
|
|
width: $pagerW;
|
|
@extend .ui-symbol;
|
|
&.prev {
|
|
@extend .icon-arrow-left;
|
|
right: auto;
|
|
}
|
|
&.next {
|
|
@extend .icon-arrow-right;
|
|
left: auto;
|
|
text-align: right;
|
|
}
|
|
}
|
|
.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: inherit;
|
|
}
|
|
}
|
|
|
|
/******************************************************** 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);
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include phone {
|
|
.l-datetime-picker {
|
|
padding: $interiorMargin !important;
|
|
}
|
|
.l-calendar {
|
|
ul.l-cal-row {
|
|
li {
|
|
padding: 2px $interiorMargin;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/******************************************************** TEXTAREA */
|
|
textarea {
|
|
@include nice-textarea($colorInputBg, $colorInputFg);
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
/******************************************************** MISC */
|
|
.context-available {
|
|
@extend .icon-arrow-down;
|
|
color: $colorKey;
|
|
&:hover {
|
|
color: $colorKeyHov;
|
|
}
|
|
}
|
|
|
|
.view-switcher,
|
|
.t-btn-view-large {
|
|
@include trans-prop-nice-fade($controlFadeMs);
|
|
}
|
|
|
|
/******************************************************** BROWSER ELEMENTS */
|
|
body.desktop {
|
|
::-webkit-scrollbar {
|
|
box-sizing: border-box;
|
|
box-shadow: inset $scrollbarTrackShdw;
|
|
background-color: $scrollbarTrackColorBg;
|
|
height: $scrollbarTrackSize;
|
|
width: $scrollbarTrackSize;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
box-sizing: border-box;
|
|
background: $scrollbarThumbColor;
|
|
&:hover { background: $scrollbarThumbColorHov; }
|
|
}
|
|
|
|
.overlay ::-webkit-scrollbar-thumb {
|
|
$lr: 15%;
|
|
background: $scrollbarThumbColorOverlay;
|
|
&:hover { background: $scrollbarThumbColorOverlayHov; }
|
|
}
|
|
|
|
::-webkit-scrollbar-corner {
|
|
background: $scrollbarTrackColorBg;
|
|
}
|
|
}
|
|
|