Merge branch 'open-master' into open1223
Conflicts: platform/features/plot/res/templates/plot.html
This commit is contained in:
Victor Woeltjen
@@ -19,13 +19,17 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
// Features
|
||||
$enableImageryThumbs: false; // Set to true if historical imagery thumbnails are supported
|
||||
|
||||
// Margins, spacing, radii
|
||||
$bodyMargin: 10px;
|
||||
$interiorMargin: 5px;
|
||||
$interiorMarginLg: $interiorMargin * 2;
|
||||
$interiorMarginSm: 3px;
|
||||
$basicCr: 3px;
|
||||
$controlCr: $basicCr;
|
||||
$basicCr: 2px;
|
||||
$controlCr: 2px;
|
||||
$smallCr: 2px;
|
||||
$badgeW: 35px;
|
||||
|
||||
@@ -34,9 +38,12 @@ $colorBodyBg: #333;
|
||||
$colorBodyFg: #999;
|
||||
$colorFooterBg: #000;
|
||||
$colorKey: #0099cc;
|
||||
$colorKeySelectedBg: #005177;
|
||||
$colorKeyFg: #fff;
|
||||
$colorAlt1: #ffc700;
|
||||
$colorAlert: #ff3c00;
|
||||
$colorPausedBg: #c56f01;
|
||||
$colorPausedFg: #fff;
|
||||
$colorCheck: $colorKey;
|
||||
$colorCreateBtn: $colorKey;
|
||||
$colorInteriorBorder: lighten($colorBodyBg, 10%);
|
||||
@@ -50,7 +57,18 @@ $colorLimitYellow: #9d7500;
|
||||
$colorLimitRed: #aa0000;
|
||||
$colorTelemFresh: #fff;
|
||||
$colorTelemStale: #888;
|
||||
$styleTelemStale: italic;
|
||||
$colorInfoBubbleFg: #666;
|
||||
$colorInfoBubbleBg: #ddd;
|
||||
$colorThumbsBubbleFg: lighten($colorBodyFg, 10%);
|
||||
$colorThumbsBubbleBg: lighten($colorBodyBg, 10%);
|
||||
$colorLimitYellow: #9d7500;
|
||||
$colorLimitRed: #aa0000;
|
||||
$colorTelemFresh: #fff;
|
||||
$colorTelemStale: #888;
|
||||
$styleTelemState: italic;
|
||||
$colorInfoBubbleFg: #666;
|
||||
$colorInfoBubbleBg: #ddd;
|
||||
|
||||
// Ratios
|
||||
$ltGamma: 20%;
|
||||
@@ -108,7 +126,7 @@ $controlDisabledOpacity: 0.3;
|
||||
$formLabelW: 20%;
|
||||
$formInputH: 22px;
|
||||
$formRowCtrlsH: 14px;
|
||||
$menuLineH: 1.5rem;
|
||||
$menuLineH: 1.4rem;
|
||||
$scrollbarTrackSize: 10px;
|
||||
$scrollbarTrackColorBg: rgba(#000, 0.4);
|
||||
$btnStdH: 25px;
|
||||
@@ -124,3 +142,19 @@ $tickLblH: 15px;
|
||||
$tickLblW: 50px;
|
||||
$tickH: $ticksH - $tickLblVMargin - $tickLblH;
|
||||
$tickW: 1px;
|
||||
|
||||
// Imagery
|
||||
$imageMainControlBarH: 20px;
|
||||
$imageThumbsD: 120px;
|
||||
$imageThumbsWrapperH: $imageThumbsD * 1.4;
|
||||
$imageThumbPad: 1px;
|
||||
|
||||
// Bubbles
|
||||
$bubbleArwSize: 10px;
|
||||
$bubblePad: $interiorMargin;
|
||||
$bubbleMinW: 100px;
|
||||
$bubbleMaxW: 300px;
|
||||
|
||||
|
||||
// Timing
|
||||
$controlFadeMs: 100ms;
|
||||
@@ -44,7 +44,7 @@ a.disabled {
|
||||
}
|
||||
|
||||
@include keyframes(pulse) {
|
||||
0% { opacity: 0.2; }
|
||||
0% { opacity: 0.5; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
@@ -57,5 +57,5 @@ a.disabled {
|
||||
}
|
||||
|
||||
.pulse {
|
||||
@include pulse(1000ms);
|
||||
@include pulse(750ms);
|
||||
}
|
||||
@@ -69,6 +69,10 @@ span {
|
||||
*/
|
||||
}
|
||||
|
||||
mct-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.abs {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -117,6 +121,13 @@ span {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.paused {
|
||||
&:not(.s-btn) {
|
||||
border-color: $colorPausedBg !important;
|
||||
color: $colorPausedBg !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sep {
|
||||
color: rgba(#fff, 0.2);
|
||||
}
|
||||
@@ -36,7 +36,7 @@
|
||||
// Don't pad in from top and bottom
|
||||
//top: 0; bottom: 0;
|
||||
.object-browse-bar {
|
||||
.t-btn.key-window {
|
||||
.btn.key-window {
|
||||
// Hide the Open in New Window button
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -42,12 +42,6 @@
|
||||
&.major {
|
||||
font-size: 1.65em;
|
||||
}
|
||||
&:hover {
|
||||
// color: lighten($c, $ltGamma);
|
||||
.invoke-menu {
|
||||
// color: lighten($colorBodyBg, $ltGamma * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -56,36 +50,35 @@
|
||||
}
|
||||
|
||||
.invoke-menu {
|
||||
@include invokeMenu($colorKey);
|
||||
//@include invokeMenu(); // $colorKey
|
||||
text-shadow: none;
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
font-size: 0.8rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.btn-menu .invoke-menu,
|
||||
.icon.major .invoke-menu {
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
|
||||
.icon-buttons-main .invoke-menu {
|
||||
@include invokeMenu(lighten($colorBodyBg, $ltGamma));
|
||||
}
|
||||
|
||||
.menu-element .invoke-menu {
|
||||
|
||||
margin-left: $interiorMarginSm;
|
||||
}
|
||||
|
||||
/*
|
||||
.object-header .type-icon {
|
||||
color: $colorKey;
|
||||
margin-right: $interiorMargin;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
*/
|
||||
|
||||
.menu .type-icon,
|
||||
.tree-item .type-icon,
|
||||
.icon-btn .menu.dropdown .icon,
|
||||
.super-menu.menu.dropdown .icon {
|
||||
font-size: $menuLineH * 0.93;
|
||||
.super-menu.menu .type-icon {
|
||||
font-size: $menuLineH * 0.8; //.93
|
||||
line-height: $menuLineH * 1.13;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
.super-menu.menu.dropdown .icon {
|
||||
font-size: $menuLineH * 0.95
|
||||
}
|
||||
|
||||
|
||||
@@ -46,6 +46,9 @@
|
||||
@import "controls/lists";
|
||||
@import "controls/menus";
|
||||
@import "controls/time-controller";
|
||||
@import "edit/editor";
|
||||
@import "features/imagery";
|
||||
@import "features/time-display";
|
||||
@import "forms/mixins";
|
||||
@import "forms/elems";
|
||||
@import "forms/validation";
|
||||
|
||||
@@ -26,6 +26,16 @@
|
||||
width: auto; height: auto;
|
||||
}
|
||||
|
||||
@mixin trans-prop-nice($props, $t) {
|
||||
@if $t == 0 {
|
||||
@include transition-property(none);
|
||||
} @else {
|
||||
@include transition-property($props);
|
||||
@include transition-duration($t);
|
||||
@include transition-timing-function(ease-in-out);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin trans-prop-nice-fade($t: 0.5s) {
|
||||
@if $t == 0 {
|
||||
@include transition-property(none);
|
||||
@@ -42,6 +52,12 @@
|
||||
@include transition-timing-function(ease-in-out);
|
||||
}
|
||||
|
||||
@mixin trans-prop-nice-resize-w($t: 0.5s) {
|
||||
@include transition-property(width, left, right);
|
||||
@include transition-duration($t);
|
||||
@include transition-timing-function(ease-in-out);
|
||||
}
|
||||
|
||||
@mixin triangle-right($size, $color) {
|
||||
$size: $size/2;
|
||||
$ratio: 1;
|
||||
@@ -62,6 +78,31 @@
|
||||
border-right: $size/$ratio solid transparent;
|
||||
}
|
||||
|
||||
@mixin triangle($dir: "left", $size: 5px, $ratio: 1, $color: red) {
|
||||
//$size: $size*2;
|
||||
width: 0;
|
||||
height: 0;
|
||||
$slopedB: $size/$ratio solid transparent;
|
||||
$straightB: $size solid $color;
|
||||
@if $dir == "up" {
|
||||
border-left: $slopedB;
|
||||
border-right: $slopedB;
|
||||
border-bottom: $straightB;
|
||||
} @else if $dir == "right" {
|
||||
border-top: $slopedB;
|
||||
border-bottom: $slopedB;
|
||||
border-left: $straightB;
|
||||
} @else if $dir == "down" {
|
||||
border-left: $slopedB;
|
||||
border-right: $slopedB;
|
||||
border-top: $straightB;
|
||||
} @else {
|
||||
border-top: $slopedB;
|
||||
border-bottom: $slopedB;
|
||||
border-right: $straightB;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) {
|
||||
@include background-image(linear-gradient(-45deg,
|
||||
rgba($c, $a) 25%, transparent 25%,
|
||||
@@ -90,20 +131,35 @@
|
||||
}
|
||||
|
||||
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) {
|
||||
@include background-image(linear-gradient(lighten($bg, 10%), lighten($bg, 5%)));
|
||||
$ltnRatio: 7%;
|
||||
$gradRatio: 5%;
|
||||
$hovRatio: 7%;
|
||||
$bgBase: lighten($bg, $ltnRatio);
|
||||
$fgBase: lighten($fg, $ltnRatio);
|
||||
$gradC1: lighten($bgBase, $gradRatio);
|
||||
$gradC2: $bgBase;
|
||||
$cInvokeBase: lighten($gradC1, $ltnRatio*2);
|
||||
|
||||
@include background-image(linear-gradient($gradC1, $gradC2));
|
||||
@include border-radius($controlCr);
|
||||
@include box-sizing(border-box);
|
||||
// @include box-shadow(rgba(black, 0.3) 0 1px 2px);
|
||||
@include boxShdwSubtle();
|
||||
border: none;
|
||||
border-top: 1px solid lighten($bg, 20%);
|
||||
border-top: 1px solid lighten($gradC1, 2%);
|
||||
color: $fg;
|
||||
display: inline-block;
|
||||
@if $hover == true {
|
||||
&:hover {
|
||||
@include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 15%)));
|
||||
&:not(.disabled):hover {
|
||||
@include background-image(linear-gradient(lighten($gradC1, $hovRatio), lighten($gradC2, $hovRatio)));
|
||||
color: lighten($fgBase, $hovRatio);
|
||||
&.btn-menu .invoke-menu {
|
||||
color: lighten($cInvokeBase, $hovRatio);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-menu .invoke-menu {
|
||||
color: $cInvokeBase;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sliderTrack($bg: $scrollbarTrackColorBg) {
|
||||
@@ -144,18 +200,16 @@
|
||||
}
|
||||
|
||||
@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||
@include containerSubtle($bg, $fg);
|
||||
&:not(.disabled):hover {
|
||||
@include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 10%)));
|
||||
}
|
||||
@include containerSubtle($bg, $fg, true);
|
||||
}
|
||||
|
||||
@mixin btnNoticeable($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||
@include containerSubtle($bg, $fg);
|
||||
@include background-image(linear-gradient(lighten($bg, 20%), $bg));
|
||||
&:not(.disabled):hover {
|
||||
// No longer should be used; use btnSubtle instead
|
||||
//@include containerSubtle($bg, $fg, true);
|
||||
//@include background-image(linear-gradient(lighten($bg, 20%), $bg));
|
||||
/* &:not(.disabled):hover {
|
||||
@include background-image(linear-gradient(lighten($bg, 30%), lighten($bg, 10%)));
|
||||
}
|
||||
}*/
|
||||
}
|
||||
|
||||
@mixin boxIncised($sVal: 0.6) {
|
||||
@@ -166,8 +220,8 @@
|
||||
border: 1px solid $c;
|
||||
}
|
||||
|
||||
@mixin boxShdwSubtle($sVal: 0.3) {
|
||||
@include box-shadow(rgba(black, $sVal) 0 1px 3px);
|
||||
@mixin boxShdwSubtle($sVal: 0.2) {
|
||||
@include box-shadow(rgba(black, $sVal) 0 1px 2px);
|
||||
}
|
||||
|
||||
@mixin boxShdwLarge($sVal: 0.7) {
|
||||
@@ -194,13 +248,15 @@
|
||||
}
|
||||
|
||||
|
||||
@mixin invokeMenu($baseColor) {
|
||||
/*
|
||||
@mixin invokeMenu($baseColor: $colorBodyFg) {
|
||||
$c: $baseColor;
|
||||
color: $c;
|
||||
&:hover {
|
||||
color: lighten($c, $ltGamma);
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
@mixin menuUlReset() {
|
||||
margin: 0;
|
||||
|
||||
@@ -19,37 +19,97 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
$pad: $interiorMargin * 2;
|
||||
$baseRatio: 1.5;
|
||||
$pad: $interiorMargin * $baseRatio;
|
||||
|
||||
/*********************************** TYPE STYLES */
|
||||
.t-btn {
|
||||
cursor: pointer;
|
||||
/******* LAYOUT AND SIZING */
|
||||
.btn,
|
||||
.l-btn {
|
||||
line-height: 1.25em;
|
||||
padding: 0 $pad;
|
||||
text-decoration: none;
|
||||
&.lg,
|
||||
&.create-btn {
|
||||
$h: $ueTopBarH - $interiorMargin;
|
||||
height: $h;
|
||||
line-height: $h;
|
||||
padding: 0 $pad * 3;
|
||||
}
|
||||
&.create-btn {
|
||||
.menu {
|
||||
margin-left: $pad * -1;
|
||||
}
|
||||
>.ui-symbol {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
}
|
||||
&.sm {
|
||||
padding: 0 $pad / $baseRatio;
|
||||
}
|
||||
&.vsm {
|
||||
padding: 0 ($pad / $baseRatio) / 2;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*********************************** STYLE STYLES */
|
||||
.btn,
|
||||
.s-btn {
|
||||
$base: lighten($colorBodyBg, 20%);
|
||||
$base: lighten($colorBodyBg, 20%); // Moved to s-btn
|
||||
@include border-radius($controlCr);
|
||||
@include box-sizing(border-box);
|
||||
@include text-shadow(rgba(black, 0.3) 0 1px 1px);
|
||||
cursor: pointer;
|
||||
line-height: 1.2em;
|
||||
padding: 0 $pad;
|
||||
text-decoration: none;
|
||||
&.major {
|
||||
$bg: $colorKey;
|
||||
@include btnSubtle($bg);
|
||||
$fg: lighten($bg, 50%);
|
||||
color: $fg;
|
||||
&:hover {
|
||||
@include btnSubtle(lighten($bg, 5%), $fg);
|
||||
//color: $fg;
|
||||
}
|
||||
.invoke-menu {
|
||||
color: $fg;
|
||||
}
|
||||
}
|
||||
&.subtle {
|
||||
@include btnSubtle($base, lighten($base, 40%));
|
||||
}
|
||||
&.very-subtle,
|
||||
&.s-very-subtle {
|
||||
@include containerSubtle($colorBodyBg, $colorBodyFg, true);
|
||||
&.paused {
|
||||
@include containerSubtle($colorPausedBg, $colorPausedFg, true);
|
||||
.icon:before {
|
||||
content:"\0000EF";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-btn,
|
||||
.s-icon-btn {
|
||||
@extend .s-btn;
|
||||
font-size: 1.2em;
|
||||
font-size: 1em;
|
||||
.icon {
|
||||
color: $colorKey;
|
||||
}
|
||||
&.paused {
|
||||
.icon {
|
||||
color: $colorPausedFg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.disabled):hover .icon {
|
||||
color: lighten($colorKey, $ltGamma);
|
||||
&:not(.disabled) {
|
||||
&:not(.paused) {
|
||||
&:hover {
|
||||
.icon {
|
||||
color: lighten($colorKey, $ltGamma);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.labeled {
|
||||
@@ -61,12 +121,30 @@ $pad: $interiorMargin * 2;
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
&.pause-play {
|
||||
&.paused {
|
||||
@include pulse(500ms);
|
||||
}
|
||||
.icon:before {
|
||||
content:"\0000F1";
|
||||
}
|
||||
}
|
||||
|
||||
&.show-thumbs {
|
||||
.icon:before {
|
||||
content:"\000039";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*********************************** LAYOUT STYLES */
|
||||
span.btn,
|
||||
span.btn span,
|
||||
span.l-btn,
|
||||
span.l-btn span,
|
||||
a.btn,
|
||||
a.btn span,
|
||||
a.l-btn,
|
||||
a.l-btn span {
|
||||
display: inline-block;
|
||||
|
||||
@@ -19,7 +19,8 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
.control {
|
||||
/*.control {
|
||||
// UNUSED?
|
||||
&.view-control {
|
||||
.icon {
|
||||
display: inline-block;
|
||||
@@ -45,10 +46,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
.accordion {
|
||||
$accordionHeadH: 18px;
|
||||
$accordionHeadH: 18px;
|
||||
margin-top: $interiorMargin;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
@@ -56,16 +57,20 @@
|
||||
.accordion-head {
|
||||
$op: 0.2;
|
||||
@include border-radius($basicCr * 0.75);
|
||||
@include box-sizing("border-box");
|
||||
@include box-sizing("border-box");
|
||||
background: rgba($colorBodyFg, $op);
|
||||
cursor: pointer;
|
||||
font-size: 0.75em;
|
||||
line-height: $accordionHeadH;
|
||||
line-height: $accordionHeadH;
|
||||
margin-bottom: $interiorMargin;
|
||||
padding: 0 $interiorMargin;
|
||||
position: absolute;
|
||||
top: 0; right: 0; bottom: auto; left: 0;
|
||||
width: auto; height: $accordionHeadH;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
left: 0;
|
||||
width: auto;
|
||||
height: $accordionHeadH;
|
||||
text-transform: uppercase;
|
||||
&:hover {
|
||||
background: rgba($colorBodyFg, $op * 2);
|
||||
@@ -84,79 +89,14 @@
|
||||
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);
|
||||
}
|
||||
.accordion-contents {
|
||||
position: absolute;
|
||||
top: $accordionHeadH + $interiorMargin;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -166,12 +106,12 @@
|
||||
.btn-set,
|
||||
.t-btn {
|
||||
display: inline-block;
|
||||
// margin-left: $interiorMargin;
|
||||
// margin-left: $interiorMargin;
|
||||
}
|
||||
.btn,
|
||||
.t-btn {
|
||||
&:first-child {
|
||||
// margin-left: 0;
|
||||
// margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -199,6 +139,20 @@
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.s-local-controls {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.btn-set {
|
||||
// Buttons that have a very tight conceptual grouping - no internal space between them.
|
||||
display: inline-block;
|
||||
@@ -230,8 +184,8 @@
|
||||
height: $h;
|
||||
line-height: $h;
|
||||
.icon:not(.invoke-menu) {
|
||||
// position: relative;
|
||||
// top: -0.04em;
|
||||
// position: relative;
|
||||
// top: -0.04em;
|
||||
font-size: 150%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@@ -318,37 +272,43 @@ label.checkbox.custom {
|
||||
|
||||
.btn-menu {
|
||||
$h: 20px;
|
||||
$p: $interiorMargin * 2;
|
||||
$p: $interiorMarginSm * 2;
|
||||
$c: $colorBodyFg;
|
||||
@include btnSubtle($colorBodyBg);
|
||||
height: $h;
|
||||
line-height: $h;
|
||||
&.dropdown {
|
||||
// padding-left: $p;
|
||||
padding-left: $p;
|
||||
padding-right: $p;
|
||||
}
|
||||
/* height: $h;
|
||||
line-height: $h;
|
||||
&.dropdown {
|
||||
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%);
|
||||
}
|
||||
/* &.context-available {
|
||||
// An element like the invoke-menu triangle;
|
||||
// Indicates that this element has a dropdown menu available;
|
||||
// Currently unused
|
||||
$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;
|
||||
}
|
||||
|
||||
span.l-click-area {
|
||||
// In markup, this element should not enclose anything.
|
||||
@extend .abs;
|
||||
}
|
||||
|
||||
.type-icon {
|
||||
margin-right: $interiorMargin;
|
||||
//margin-right: $interiorMargin;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-left: $interiorMargin;
|
||||
}
|
||||
.menu {
|
||||
// margin-left: (-1 * $p);
|
||||
@@ -388,17 +348,23 @@ label.checkbox.custom {
|
||||
}
|
||||
}
|
||||
|
||||
.view-switcher {
|
||||
@include trans-prop-nice-fade($controlFadeMs);
|
||||
}
|
||||
|
||||
/******************************************************** 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;
|
||||
.label {
|
||||
.title-label {
|
||||
color: lighten($colorBodyFg, 40%);
|
||||
}
|
||||
.type-icon {
|
||||
font-size: 1.5em;
|
||||
margin-right: $interiorMargin;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -412,86 +378,53 @@ label.checkbox.custom {
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************** 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 */
|
||||
.wrapper-slider {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.slider {
|
||||
//$knobH: 70%; //14px;
|
||||
$knobH: 100%; //14px;
|
||||
$knobW: 12px;
|
||||
$slotH: 80%;
|
||||
$rangeO: 0.3;
|
||||
$slotH: 50%;
|
||||
.slot {
|
||||
// @include border-radius($basicCr * .75);
|
||||
@include sliderTrack();
|
||||
height: auto;
|
||||
height: $slotH;
|
||||
width: auto;
|
||||
position: absolute;
|
||||
//top: ($knobH - $slotH) / 2;
|
||||
top: (100% - $slotH)/2;
|
||||
top: ($knobH - $slotH) / 2;
|
||||
right: 0;
|
||||
bottom: (100% - $slotH)/2;
|
||||
bottom: auto;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
.range {
|
||||
background: rgba($colorKey, $rangeO);
|
||||
cursor: ew-resize;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: auto;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
height: auto;
|
||||
width: auto;
|
||||
z-index: 1;
|
||||
&:hover {
|
||||
background: rgba($colorKey, $rangeO + 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
.knob {
|
||||
@include btnSubtle();
|
||||
@include controlGrippy(rgba(black, 0.3), vertical, 1px, solid);
|
||||
@include border-radius(2px);
|
||||
cursor: ew-resize;
|
||||
position: absolute;
|
||||
height: auto;
|
||||
height: $knobH;
|
||||
width: $knobW;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
auto: 0;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
z-index: 2;
|
||||
&.knob-l { margin-left: $knobW / -2; }
|
||||
&.knob-r { margin-right: $knobW / -2; }
|
||||
&:before {
|
||||
top: 1px;
|
||||
bottom: 3px;
|
||||
//left: ($knobW / 2) - 1;
|
||||
//margin-left: -1px;
|
||||
left: 45%;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -499,23 +432,23 @@ label.checkbox.custom {
|
||||
/******************************************************** BROWSER ELEMENTS */
|
||||
|
||||
::-webkit-scrollbar {
|
||||
@include sliderTrack();
|
||||
height: $scrollbarTrackSize;
|
||||
width: $scrollbarTrackSize;
|
||||
@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));
|
||||
}
|
||||
$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);
|
||||
background: rgba(#000, 0.4);
|
||||
}
|
||||
@@ -41,7 +41,7 @@
|
||||
@include box-sizing(border-box);
|
||||
border-top: 1px solid lighten($bg, 20%);
|
||||
line-height: $menuLineH;
|
||||
padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 3) + $treeTypeIconW;
|
||||
padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
|
||||
white-space: nowrap;
|
||||
&:first-child {
|
||||
border: none;
|
||||
@@ -168,7 +168,7 @@
|
||||
position: absolute;
|
||||
height: 200px;
|
||||
width: 170px;
|
||||
z-index: 59;
|
||||
z-index: 70;
|
||||
.context-menu-wrapper {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
|
||||
@@ -19,3 +19,86 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
.edit-main {
|
||||
$handleD: 15px;
|
||||
$cr: 5px;
|
||||
.edit-corner,
|
||||
.edit-handle {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.edit-corner {
|
||||
width: $handleD;
|
||||
height: $handleD;
|
||||
&.edit-resize-nw {
|
||||
@include border-bottom-right-radius($cr);
|
||||
cursor: nw-resize;
|
||||
top: 0; left: 0;
|
||||
}
|
||||
&.edit-resize-se {
|
||||
@include border-top-left-radius($cr);
|
||||
cursor: se-resize;
|
||||
bottom: 0; right: 0;
|
||||
}
|
||||
&.edit-resize-sw {
|
||||
@include border-top-right-radius($cr);
|
||||
cursor: sw-resize;
|
||||
bottom: 0; left: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.edit-handle {
|
||||
top: $handleD; right: $handleD; bottom: $handleD; left: $handleD;
|
||||
&.edit-move {
|
||||
$m: 0; //$handleD;
|
||||
cursor: move;
|
||||
left: $m;
|
||||
right: $m;
|
||||
top: $m;
|
||||
bottom: $m;
|
||||
z-index: 1;
|
||||
|
||||
}
|
||||
&.edit-resize-n {
|
||||
top: 0px; bottom: auto;
|
||||
height: $handleD;
|
||||
cursor: n-resize;
|
||||
}
|
||||
&.edit-resize-e {
|
||||
right: 0px; left: auto;
|
||||
width: $handleD;
|
||||
cursor: e-resize;
|
||||
}
|
||||
&.edit-resize-s {
|
||||
bottom: 0px; top: auto;
|
||||
height: $handleD;
|
||||
cursor: s-resize;
|
||||
}
|
||||
&.edit-resize-w {
|
||||
left: 0px; right: auto;
|
||||
width: $handleD;
|
||||
cursor: w-resize;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.frame.child-frame.panel {
|
||||
&:hover {
|
||||
@include boxShdwLarge();
|
||||
border-color: $colorKey;
|
||||
z-index: 2;
|
||||
.view-switcher {
|
||||
opacity: 1;
|
||||
}
|
||||
.edit-corner {
|
||||
background-color: rgba($colorKey, 0.8);
|
||||
&:hover {
|
||||
background-color: rgba($colorKey, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
171
platform/commonUI/general/res/sass/features/_imagery.scss
Normal file
171
platform/commonUI/general/res/sass/features/_imagery.scss
Normal file
@@ -0,0 +1,171 @@
|
||||
.l-image-main-wrapper,
|
||||
.l-image-main,
|
||||
.l-image-main-controlbar,
|
||||
.l-image-main-controlbar .left,
|
||||
.l-image-main-controlbar .right,
|
||||
.l-image-thumbs-wrapper {
|
||||
@include absPosDefault(0, false);
|
||||
}
|
||||
|
||||
/*************************************** MAIN LAYOUT */
|
||||
.l-image-main-wrapper {
|
||||
//@include test();
|
||||
@if $enableImageryThumbs == true {
|
||||
bottom: $interiorMargin*2 + $imageThumbsWrapperH;
|
||||
}
|
||||
min-height: 100px;
|
||||
min-width: 150px;
|
||||
.l-image-main {
|
||||
background-color: rgba(#fff, 0.1);
|
||||
bottom: $imageMainControlBarH + $interiorMargin;
|
||||
}
|
||||
.l-image-main-controlbar {
|
||||
top: auto;
|
||||
height: $imageMainControlBarH;
|
||||
}
|
||||
}
|
||||
|
||||
.l-image-thumbs-wrapper {
|
||||
//@include test(red);
|
||||
top: auto;
|
||||
height: $imageThumbsWrapperH;
|
||||
}
|
||||
|
||||
.l-date,
|
||||
.l-time,
|
||||
.l-timezone {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/*************************************** MAIN IMAGE */
|
||||
|
||||
.l-image-main,
|
||||
.l-image-thumb-item .l-thumb {
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.l-image-main {
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.l-image-main-controlbar {
|
||||
//@include test();
|
||||
font-size: 0.8em;
|
||||
line-height: $imageMainControlBarH;
|
||||
.left, .right {
|
||||
direction: rtl;
|
||||
overflow: hidden;
|
||||
}
|
||||
.left {
|
||||
//@include test(red);
|
||||
text-align: left;
|
||||
width: 75% !important;
|
||||
}
|
||||
.right {
|
||||
//@include test(green);
|
||||
min-width: 40px;
|
||||
width: 25% !important;
|
||||
z-index: 2;
|
||||
}
|
||||
.l-date,
|
||||
.l-time {
|
||||
color: #fff;
|
||||
}
|
||||
.l-mag {
|
||||
direction: ltr;
|
||||
display: inline-block;
|
||||
//white-space: nowrap;
|
||||
&:before {
|
||||
content: "\000049";
|
||||
}
|
||||
}
|
||||
.s-mag {
|
||||
color: darken($colorBodyFg, 20%);
|
||||
}
|
||||
.l-btn.show-thumbs {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.s-image-main {
|
||||
border: 1px solid transparent;
|
||||
&.paused {
|
||||
border-color: $colorPausedBg;
|
||||
}
|
||||
}
|
||||
|
||||
/*************************************** THUMBS */
|
||||
|
||||
.l-image-thumbs-wrapper {
|
||||
//@include test(green);
|
||||
direction: rtl;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
padding-bottom: $interiorMargin;
|
||||
white-space: nowrap;
|
||||
z-index: 70;
|
||||
}
|
||||
|
||||
.l-image-thumb-item {
|
||||
@include single-transition(background-color, 0.25s);
|
||||
@include box-sizing(border-box);
|
||||
padding: 1px;
|
||||
position: relative;
|
||||
.l-thumb,
|
||||
.l-date,
|
||||
.l-time {
|
||||
display: inline-block;
|
||||
}
|
||||
.l-date,
|
||||
.l-time {
|
||||
padding: 2px 3px;
|
||||
}
|
||||
cursor: pointer;
|
||||
direction: ltr;
|
||||
display: inline-block;
|
||||
font-size: 0.8em;
|
||||
margin-left: $interiorMarginSm;
|
||||
text-align: left;
|
||||
width: $imageThumbsD + $imageThumbPad*2;
|
||||
white-space: normal;
|
||||
&:hover {
|
||||
background: rgba(#fff, 0.2);
|
||||
.l-date,
|
||||
.l-time {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
&.selected {
|
||||
background: $colorKeySelectedBg;
|
||||
.l-date,
|
||||
.l-time {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.l-thumb {
|
||||
background-color: rgba(#fff, 0.1);
|
||||
height: $imageThumbsD;
|
||||
width: $imageThumbsD;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*************************************** WHEN IN FRAME */
|
||||
.frame .t-imagery {
|
||||
.l-image-main-wrapper {
|
||||
bottom: 0;
|
||||
.l-image-main-controlbar {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
@if $enableImageryThumbs == true {
|
||||
.l-btn.show-thumbs {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.l-image-thumbs-wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
.l-time-display {
|
||||
$transTime: 200ms;
|
||||
// Layout
|
||||
&:hover {
|
||||
.l-btn.control {
|
||||
//display: inline-block;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.l-elem-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.l-elem {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.l-timer {
|
||||
.l-elem.l-value {
|
||||
@include trans-prop-nice(left, $transTime);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
&:hover .l-elem.l-value {
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// Look-and-feel
|
||||
.l-elem {
|
||||
.value.active,
|
||||
&.value.active {
|
||||
color: $colorKeyFg;
|
||||
}
|
||||
}
|
||||
.l-btn.control {
|
||||
@include trans-prop-nice-fade($transTime);
|
||||
//display: none;
|
||||
opacity: 0;
|
||||
font-size: 0.9em;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -19,18 +19,13 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
input[type="text"],
|
||||
input[type="date"] {
|
||||
input[type="text"] {
|
||||
@include nice-input();
|
||||
@include input-placeholder {
|
||||
color: darken($colorBodyFg, 10%);
|
||||
font-style: italic;
|
||||
}
|
||||
&.filter {
|
||||
&.ng-dirty {
|
||||
// background: red;
|
||||
}
|
||||
}
|
||||
&.filter {
|
||||
&.ng-dirty {
|
||||
// background: red;
|
||||
}
|
||||
}
|
||||
&.numeric {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@@ -21,17 +21,15 @@
|
||||
*****************************************************************************/
|
||||
//************************************************* LAYOUT
|
||||
|
||||
$infoBubbleFg: #666;
|
||||
$infoBubbleBg: #ddd;
|
||||
|
||||
.l-infobubble-wrapper {
|
||||
$arwSize: 5px;
|
||||
@include box-shadow(rgba(black, 0.4) 0 1px 5px);
|
||||
position: absolute;
|
||||
z-index: 70;
|
||||
position: relative;
|
||||
z-index: 50;
|
||||
.l-infobubble {
|
||||
display: inline-block;
|
||||
max-width: 250px;
|
||||
min-width: $bubbleMinW;
|
||||
max-width: $bubbleMaxW;
|
||||
padding: 5px 10px;
|
||||
&:before {
|
||||
content:"";
|
||||
@@ -71,34 +69,30 @@ $infoBubbleBg: #ddd;
|
||||
}
|
||||
|
||||
&.arw-left {
|
||||
margin-left: $arwSize*2;
|
||||
margin-left: $bubbleArwSize*2;
|
||||
.l-infobubble::before {
|
||||
right: 100%;
|
||||
border-top: $arwSize solid transparent;
|
||||
border-bottom: $arwSize solid transparent;
|
||||
border-right: ($arwSize * 1.5) solid $infoBubbleBg;
|
||||
@include triangle('left', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
|
||||
}
|
||||
}
|
||||
|
||||
&.arw-right {
|
||||
margin-right: $arwSize*2;
|
||||
margin-right: $bubbleArwSize*2;
|
||||
.l-infobubble::before {
|
||||
left: 100%;
|
||||
border-top: $arwSize solid transparent;
|
||||
border-bottom: $arwSize solid transparent;
|
||||
border-left: ($arwSize * 1.5) solid $infoBubbleBg;
|
||||
@include triangle('right', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
|
||||
}
|
||||
}
|
||||
|
||||
&.arw-top {
|
||||
.l-infobubble::before {
|
||||
top: $arwSize * 2;
|
||||
top: $bubbleArwSize * 2;
|
||||
}
|
||||
}
|
||||
|
||||
&.arw-btm {
|
||||
.l-infobubble::before {
|
||||
bottom: $arwSize * 2;
|
||||
bottom: $bubbleArwSize * 2;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -110,18 +104,32 @@ $infoBubbleBg: #ddd;
|
||||
margin-left: -1 * $arwSize;
|
||||
border-left: $arwSize solid transparent;
|
||||
border-right: $arwSize solid transparent;
|
||||
border-top: ($arwSize * 1.5) solid $infoBubbleBg;
|
||||
border-top: ($arwSize * 1.5) solid $colorInfoBubbleBg;
|
||||
}
|
||||
}
|
||||
.arw {
|
||||
z-index: 2;
|
||||
}
|
||||
&.arw-up .arw.arw-down,
|
||||
&.arw-down .arw.arw-up { display: none; }
|
||||
}
|
||||
|
||||
//************************************************* LOOK AND FEEL
|
||||
|
||||
.l-thumbsbubble-wrapper {
|
||||
.arw-up {
|
||||
@include triangle('up', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
|
||||
}
|
||||
.arw-down {
|
||||
@include triangle('down', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
|
||||
}
|
||||
}
|
||||
.s-infobubble {
|
||||
$emFg: darken($infoBubbleFg, 20%);
|
||||
$emFg: darken($colorInfoBubbleFg, 20%);
|
||||
@include border-radius($basicCr);
|
||||
background: $infoBubbleBg;
|
||||
color: $infoBubbleFg;
|
||||
@include box-shadow(rgba(black, 0.4) 0 1px 5px);
|
||||
background: $colorInfoBubbleBg;
|
||||
color: $colorInfoBubbleFg;
|
||||
font-size: 0.8rem;
|
||||
.title {
|
||||
color: $emFg;
|
||||
@@ -129,7 +137,7 @@ $infoBubbleBg: #ddd;
|
||||
}
|
||||
tr {
|
||||
td {
|
||||
border-top: 1px solid darken($infoBubbleBg, 10%);
|
||||
border-top: 1px solid darken($colorInfoBubbleBg, 10%);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
&:first-child td {
|
||||
@@ -139,5 +147,9 @@ $infoBubbleBg: #ddd;
|
||||
.value {
|
||||
color: $emFg;
|
||||
}
|
||||
}
|
||||
|
||||
.s-thumbsbubble {
|
||||
background: $colorThumbsBubbleBg;
|
||||
color: $colorThumbsBubbleFg;
|
||||
}
|
||||
@@ -104,7 +104,7 @@
|
||||
&.selected {
|
||||
$cfg: lighten($colorItemSelected, 35%);
|
||||
$cfgh: lighten($cfg, 30%);
|
||||
@include btnNoticeable($colorItemSelected);
|
||||
@include btnSubtle($colorItemSelected);
|
||||
color: $cfg;
|
||||
.item-type, .top-bar .icon:not(.alert) { color: $cfg }
|
||||
.item-main .item-open { color: $cfg }
|
||||
|
||||
@@ -1,30 +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.
|
||||
*****************************************************************************/
|
||||
@import "compass";
|
||||
@import "compass/css3";
|
||||
@import "compass/css3/border-radius";
|
||||
@import "compass/css3/opacity";
|
||||
@import "compass/utilities";
|
||||
|
||||
@import "constants";
|
||||
@import "mixins";
|
||||
@import "plots/plots-main";
|
||||
@@ -75,8 +75,8 @@ ul.tree {
|
||||
.title-label {
|
||||
@include absPosDefault();
|
||||
display: block;
|
||||
left: $runningItemW + ($interiorMargin * 2);
|
||||
// right: $treeContextTriggerW + $interiorMargin; //Disabling as context trigger not being used
|
||||
left: $runningItemW + ($interiorMargin);
|
||||
//right: $treeContextTriggerW + $interiorMargin;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
// height: $menuLineH;
|
||||
@@ -99,7 +99,7 @@ ul.tree {
|
||||
|
||||
&.selected {
|
||||
$c: #fff;
|
||||
background: #005177;
|
||||
background: $colorKeySelectedBg;
|
||||
color: $c;
|
||||
.view-control {
|
||||
color: $colorItemTreeIcon;
|
||||
@@ -124,16 +124,15 @@ ul.tree {
|
||||
|
||||
&:not(.loading) {
|
||||
cursor: pointer;
|
||||
// @include tree-item-hover();
|
||||
}
|
||||
|
||||
.context-trigger {
|
||||
$h: 0.9rem;
|
||||
display: none;
|
||||
//display: none;
|
||||
top: -1px;
|
||||
position: absolute;
|
||||
right: $interiorMarginSm;
|
||||
.btn-invoke-menu {
|
||||
.invoke-menu {
|
||||
font-size: 0.75em;
|
||||
height: $h;
|
||||
line-height: $h;
|
||||
|
||||
@@ -27,6 +27,7 @@
|
||||
border: 1px solid $bc;
|
||||
&:hover {
|
||||
border-color: lighten($bc, 10%);
|
||||
z-index: 2;
|
||||
}
|
||||
.contents {
|
||||
// overflow: hidden;
|
||||
@@ -46,12 +47,25 @@
|
||||
bottom: $myM;
|
||||
left: $myM;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-main .frame.child-frame.panel {
|
||||
&:hover {
|
||||
border-color: $colorKey;
|
||||
@include boxShdwLarge();
|
||||
&.frame-template {
|
||||
// Hide the view switcher by default when it's in an element that's in a frame context
|
||||
// Frame template is used because we need to target the lowest nested frame
|
||||
// This has the effect of hiding the view switcher in nested frames in edit mode, which is desirable currently (as it's non-functional)
|
||||
.view-switcher {
|
||||
//display: none;
|
||||
opacity: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
&:hover .view-switcher {
|
||||
// Show the view switcher on frame hover
|
||||
//display: inline-block !important;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.view-switcher {
|
||||
// Hide the name when the view switcher is in a frame context
|
||||
.name {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -70,23 +70,19 @@
|
||||
&.abs {
|
||||
text-wrap: none;
|
||||
white-space: nowrap;
|
||||
&.left,
|
||||
.left {
|
||||
width: 45%;
|
||||
right: auto;
|
||||
}
|
||||
&.right,
|
||||
.right {
|
||||
width: 45%;
|
||||
left: auto;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
.icon.major {
|
||||
margin-left: $interiorMargin * 3;
|
||||
}
|
||||
// .icon.major {
|
||||
// margin-left: $interiorMargin;
|
||||
// }
|
||||
}
|
||||
&.left,
|
||||
.left {
|
||||
width: 45% !important;
|
||||
right: auto !important;
|
||||
}
|
||||
&.right,
|
||||
.right {
|
||||
width: 45% !important;
|
||||
left: auto !important;
|
||||
text-align: right;
|
||||
.icon.major {
|
||||
margin-left: $interiorMargin * 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user