511 lines
10 KiB
SCSS
511 lines
10 KiB
SCSS
/*****************************************************************************
|
|
* 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.
|
|
*****************************************************************************/
|
|
.control {
|
|
&.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: 1.2em;
|
|
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;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
$base: lighten($colorBodyBg, 20%); // Moved to s-btn
|
|
$p: 10px; // Moved to s-btn
|
|
@include border-radius($controlCr); // Moved to s-btn
|
|
@include box-sizing(border-box); // Moved to s-btn
|
|
@include text-shadow(rgba(black, 0.3) 0 1px 1px); // Moved to s-btn
|
|
// display: inline-block;
|
|
// margin-right: 10px;
|
|
padding: 0 ($interiorMargin * 2); // Moved to s-btn
|
|
text-decoration: none; // Moved to s-btn
|
|
&.create-btn {
|
|
$h: $ueTopBarH - $interiorMargin; //$btnStdH * 1.5;;
|
|
$p: $p * 2.25;
|
|
height: $h;
|
|
line-height: $h;
|
|
//font-size: 1.1em;
|
|
padding: 0 $p;
|
|
.menu {
|
|
margin-left: $p * -1;
|
|
}
|
|
.ui-symbol.major {
|
|
font-size: 1.1em;
|
|
}
|
|
}
|
|
&.major {
|
|
$bg: $colorKey;
|
|
@include btnNoticeable($bg);
|
|
$fg: lighten($bg, 50%);
|
|
color: $fg;
|
|
&:hover {
|
|
@include btnNoticeable(lighten($bg, 5%));
|
|
color: $fg;
|
|
}
|
|
.invoke-menu {
|
|
color: $fg;
|
|
}
|
|
}
|
|
&.normal {
|
|
padding: $p * 0.5 $p * 0.7;
|
|
}
|
|
&.outline {
|
|
&:hover {
|
|
background: rgba(#fff, 0.1);
|
|
}
|
|
}
|
|
&.subtle {
|
|
@include btnSubtle($base, lighten($base, 40%));
|
|
}
|
|
|
|
&.very-subtle {
|
|
@include btnSubtle($colorBodyBg, lighten($colorBodyBg, 50%));
|
|
}
|
|
&.lg {
|
|
@include border-radius($controlCr * 1.5);
|
|
font-size: 1.2em;
|
|
padding: 7px 25px;
|
|
}
|
|
&.icon-btn {
|
|
.icon {
|
|
color: $colorKey;
|
|
}
|
|
|
|
&:not(.disabled):hover .icon {
|
|
color: lighten($colorKey, $ltGamma);
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-bar {
|
|
// position: relative;
|
|
.btn,
|
|
.btn-set,
|
|
.t-btn {
|
|
display: inline-block;
|
|
// margin-left: $interiorMargin;
|
|
}
|
|
.btn,
|
|
.t-btn {
|
|
&:first-child {
|
|
// margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.l-composite-control {
|
|
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;
|
|
}
|
|
}
|
|
|
|
.btn-set {
|
|
// Buttons that have a very tight conceptual grouping - no internal space between them.
|
|
display: inline-block;
|
|
position: relative;
|
|
.btn,
|
|
.t-btn {
|
|
@include border-radius(0);
|
|
border-left: 1px solid lighten($colorBodyBg, 20%);
|
|
margin-left: 0;
|
|
&:first-child {
|
|
border-left: none;
|
|
@include border-left-radius($controlCr);
|
|
}
|
|
&:last-child {
|
|
@include border-right-radius($controlCr);
|
|
}
|
|
}
|
|
}
|
|
|
|
.object-browse-bar .btn,
|
|
.object-browse-bar .t-btn,
|
|
.top-bar .buttons-main .btn,
|
|
.top-bar .buttons-main .t-btn,
|
|
.tool-bar .btn,
|
|
.tool-bar .t-btn {
|
|
$h: $btnToolbarH;
|
|
display: inline-block;
|
|
font-size: $h * $btnFontSizeToH;
|
|
height: $h;
|
|
line-height: $h;
|
|
.icon:not(.invoke-menu) {
|
|
// position: relative;
|
|
// top: -0.04em;
|
|
font-size: 150%;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
label.checkbox.custom {
|
|
$bg: lighten($colorBodyBg, $ltGamma);
|
|
$d: $formRowCtrlsH;
|
|
// @include vertical-align();
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
line-height: $d;
|
|
margin-right: $interiorMargin * 4;
|
|
padding-left: $d + $interiorMargin;
|
|
position: relative;
|
|
vertical-align: 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%);
|
|
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;
|
|
}
|
|
}
|
|
|
|
.btn-menu label.checkbox.custom {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.item .checkbox {
|
|
&.checked label {
|
|
@include box-shadow(none);
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.btn-menu {
|
|
$h: 20px;
|
|
$p: $interiorMargin * 2;
|
|
$c: $colorBodyFg;
|
|
@include btnSubtle($colorBodyBg);
|
|
height: $h;
|
|
line-height: $h;
|
|
&.dropdown {
|
|
// padding-left: $p;
|
|
padding-left: $p;
|
|
padding-right: $p;
|
|
}
|
|
|
|
&:not(.disabled):hover {
|
|
color: lighten($c, 20%);
|
|
}
|
|
|
|
&.btn-invoke-menu {
|
|
$c: $colorKey;
|
|
color: $c;
|
|
padding: 0 5px;
|
|
&:hover {
|
|
color: lighten($c, 10%);
|
|
}
|
|
}
|
|
|
|
span.l-click-area {
|
|
// In markup, this element should not enclose anything.
|
|
@extend .abs;
|
|
}
|
|
|
|
.type-icon {
|
|
margin-right: $interiorMargin;
|
|
}
|
|
.menu {
|
|
// margin-left: (-1 * $p);
|
|
position: absolute;
|
|
left: 0;
|
|
text-align: left;
|
|
.ui-symbol.icon {
|
|
width: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.top-bar .btn-menu {
|
|
$h: $btnStdH; //$ueTopBarBtnH; // 35px
|
|
$p: 10px;
|
|
$badgeM: $interiorMargin;
|
|
$badgeD: $h - ($badgeM * 2);
|
|
height: $h;
|
|
line-height: $h;
|
|
padding-right: 10px;
|
|
&.browse-btn {
|
|
margin-right: $interiorMargin;
|
|
padding-left: $badgeD + $badgeM * 2;
|
|
.badge {
|
|
@include border-radius($controlCr * 1.5);
|
|
display: block;
|
|
font-size: 1em;
|
|
line-height: $badgeD;
|
|
position: absolute;
|
|
top: $badgeM;
|
|
left: $badgeM;
|
|
bottom: $badgeM;
|
|
right: auto;
|
|
width: $badgeD;
|
|
height: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
/******************************************************** OBJECT-HEADER */
|
|
.object-header {
|
|
display: inline-block;
|
|
font-size: 1em;
|
|
.title {
|
|
color: lighten($colorBodyFg, 40%);
|
|
}
|
|
.type-icon {
|
|
font-size: 1.5em;
|
|
margin-right: $interiorMargin;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.top-bar,
|
|
.object-browse-bar {
|
|
.object-header {
|
|
font-size: 1.1em;
|
|
span {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
/******************************************************** VIEW-CONTROLS */
|
|
|
|
.view-controls .view-type {
|
|
$d: 20px;
|
|
$p: 5px;
|
|
@include border-radius($controlCr);
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
margin-left: $interiorMargin;
|
|
height: $d;
|
|
line-height: $d;
|
|
padding-left: $p;
|
|
padding-right: $p;
|
|
&.cur {
|
|
background: lighten($colorBodyBg, $ltGamma);
|
|
}
|
|
}
|
|
|
|
.edit-mode .top-bar .control-set.edit-view-controls {
|
|
// Used in templates/edit-view-controls.html
|
|
margin-right: $interiorMargin * 10;
|
|
}
|
|
|
|
/******************************************************** SLIDERS */
|
|
|
|
.slider {
|
|
$knobH: 100%; //14px;
|
|
$knobW: 12px;
|
|
$slotH: 50%;
|
|
.slot {
|
|
// @include border-radius($basicCr * .75);
|
|
@include sliderTrack();
|
|
height: $slotH;
|
|
width: auto;
|
|
position: absolute;
|
|
top: ($knobH - $slotH) / 2;
|
|
right: 0;
|
|
bottom: auto;
|
|
left: 0;
|
|
}
|
|
.knob {
|
|
@include btnSubtle();
|
|
@include controlGrippy(rgba(black, 0.3), vertical, 1px, solid);
|
|
cursor: ew-resize;
|
|
position: absolute;
|
|
height: $knobH;
|
|
width: $knobW;
|
|
top: 0;
|
|
auto: 0;
|
|
bottom: auto;
|
|
left: auto;
|
|
&:before {
|
|
top: 1px;
|
|
bottom: 3px;
|
|
left: ($knobW / 2) - 1;
|
|
}
|
|
|
|
}
|
|
.range {
|
|
background: rgba($colorKey, 0.6);
|
|
cursor: ew-resize;
|
|
position: absolute;
|
|
top: 0;
|
|
right: auto;
|
|
bottom: 0;
|
|
left: auto;
|
|
height: auto;
|
|
width: auto;
|
|
&:hover {
|
|
background: rgba($colorKey, 0.7);
|
|
}
|
|
}
|
|
}
|
|
|
|
/******************************************************** BROWSER ELEMENTS */
|
|
|
|
::-webkit-scrollbar {
|
|
@include sliderTrack();
|
|
height: $scrollbarTrackSize;
|
|
width: $scrollbarTrackSize;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
$bg: lighten($colorBodyBg, 10%);
|
|
@include background-image(linear-gradient(lighten($bg, 10%), lighten($bg, 5%) 20px));
|
|
@include border-radius(1px);
|
|
@include box-sizing(border-box);
|
|
@include boxShdwSubtle();
|
|
border-top: 1px solid lighten($bg, 20%);
|
|
&:hover {
|
|
@include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 15%) 20px));
|
|
}
|
|
}
|
|
|
|
::-webkit-scrollbar-corner {
|
|
background: rgba(#000, 0.4);
|
|
} |