mirror of
https://github.com/nasa/openmct.git
synced 2024-12-30 09:58:52 +00:00
Merge remote-tracking branch 'github/open1515' into open-master
This commit is contained in:
Victor Woeltjen
commit
756f728865
@ -42,9 +42,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class='object-holder abs vscroll'>
|
<mct-representation key="representation.selected.key"
|
||||||
<mct-representation key="representation.selected.key"
|
mct-object="representation.selected.key && domainObject"
|
||||||
mct-object="representation.selected.key && domainObject">
|
class="abs object-holder">
|
||||||
</mct-representation>
|
</mct-representation>
|
||||||
</div>
|
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@ -20,7 +20,7 @@
|
|||||||
at runtime from the About dialog for additional information.
|
at runtime from the About dialog for additional information.
|
||||||
-->
|
-->
|
||||||
<div class="menu-element wrapper" ng-controller="ClickAwayController as createController">
|
<div class="menu-element wrapper" ng-controller="ClickAwayController as createController">
|
||||||
<div class="s-menu major create-btn" ng-click="createController.toggle()">
|
<div class="s-menu-btn major create-btn" ng-click="createController.toggle()">
|
||||||
<span class="ui-symbol icon type-icon">+</span>
|
<span class="ui-symbol icon type-icon">+</span>
|
||||||
<span class="title-label">Create</span>
|
<span class="title-label">Create</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -30,12 +30,11 @@
|
|||||||
structure="toolbar.structure"
|
structure="toolbar.structure"
|
||||||
ng-model="toolbar.state">
|
ng-model="toolbar.state">
|
||||||
</mct-toolbar>
|
</mct-toolbar>
|
||||||
<div class='holder abs object-holder work-area'>
|
<mct-representation key="representation.selected.key"
|
||||||
<mct-representation key="representation.selected.key"
|
toolbar="toolbar"
|
||||||
toolbar="toolbar"
|
mct-object="representation.selected.key && domainObject"
|
||||||
mct-object="representation.selected.key && domainObject">
|
class="holder abs object-holder work-area">
|
||||||
</mct-representation>
|
</mct-representation>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<mct-splitter></mct-splitter>
|
<mct-splitter></mct-splitter>
|
||||||
<div
|
<div
|
||||||
|
|||||||
@ -45,6 +45,7 @@ $ueEditToolBarH: 25px;
|
|||||||
$ueBrowseLeftPaneW: 25%;
|
$ueBrowseLeftPaneW: 25%;
|
||||||
$ueEditLeftPaneW: 75%;
|
$ueEditLeftPaneW: 75%;
|
||||||
$treeSearchInputBarH: 25px;
|
$treeSearchInputBarH: 25px;
|
||||||
|
$ueTimeControlH: (33px, 20px, 20px);
|
||||||
// Overlay
|
// Overlay
|
||||||
$ovrTopBarH: 60px;
|
$ovrTopBarH: 60px;
|
||||||
$ovrFooterH: 30px;
|
$ovrFooterH: 30px;
|
||||||
|
|||||||
@ -40,11 +40,11 @@
|
|||||||
|
|
||||||
/************************** HTML ENTITIES */
|
/************************** HTML ENTITIES */
|
||||||
a {
|
a {
|
||||||
color: #ccc;
|
color: $colorA;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #fff;
|
color: $colorAHov;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -125,6 +125,14 @@ mct-container {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.scrolling {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vscroll {
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.no-margin {
|
.no-margin {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -29,6 +29,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ui-symbol {
|
.ui-symbol {
|
||||||
|
&.type-icon {
|
||||||
|
color: $colorObjHdrIc;
|
||||||
|
}
|
||||||
&.icon {
|
&.icon {
|
||||||
color: $colorKey;
|
color: $colorKey;
|
||||||
&.alert {
|
&.alert {
|
||||||
@ -41,6 +44,9 @@
|
|||||||
font-size: 1.65em;
|
font-size: 1.65em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&.icon-calendar:after {
|
||||||
|
content: "\e605";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar .ui-symbol {
|
.bar .ui-symbol {
|
||||||
@ -52,7 +58,7 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.s-menu .invoke-menu,
|
.s-menu-btn .invoke-menu,
|
||||||
.icon.major .invoke-menu {
|
.icon.major .invoke-menu {
|
||||||
margin-left: $interiorMarginSm;
|
margin-left: $interiorMarginSm;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -347,9 +347,10 @@
|
|||||||
/* This doesn't work on an element inside an element with absolute positioning that has height: auto */
|
/* This doesn't work on an element inside an element with absolute positioning that has height: auto */
|
||||||
//position: relative;
|
//position: relative;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
-webkit-transform: translateY(-50%);
|
@include webkitProp(transform, translateY(-50%));
|
||||||
-ms-transform: translateY(-50%);
|
//-webkit-transform: translateY(-50%);
|
||||||
transform: translateY(-50%);
|
//-ms-transform: translateY(-50%);
|
||||||
|
//transform: translateY(-50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin verticalCenterBlock($holderH, $itemH) {
|
@mixin verticalCenterBlock($holderH, $itemH) {
|
||||||
@ -389,7 +390,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@mixin test($c: #ffcc00, $a: 0.2) {
|
@mixin test($c: #ffcc00, $a: 0.2) {
|
||||||
background-color: rgba($c, $a);
|
background-color: rgba($c, $a) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin tmpBorder($c: #ffcc00, $a: 0.75) {
|
@mixin tmpBorder($c: #ffcc00, $a: 0.75) {
|
||||||
|
|||||||
@ -10,9 +10,6 @@
|
|||||||
&.fixed {
|
&.fixed {
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
}
|
}
|
||||||
&.scrolling {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
.controls,
|
.controls,
|
||||||
label,
|
label,
|
||||||
.inline-block {
|
.inline-block {
|
||||||
|
|||||||
@ -205,7 +205,7 @@ label.checkbox.custom {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.s-menu label.checkbox.custom {
|
.s-menu-btn label.checkbox.custom {
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -295,49 +295,155 @@ label.checkbox.custom {
|
|||||||
|
|
||||||
.slider {
|
.slider {
|
||||||
$knobH: 100%; //14px;
|
$knobH: 100%; //14px;
|
||||||
$knobW: 12px;
|
|
||||||
$slotH: 50%;
|
|
||||||
.slot {
|
.slot {
|
||||||
// @include border-radius($basicCr * .75);
|
// @include border-radius($basicCr * .75);
|
||||||
@include sliderTrack();
|
//@include sliderTrack();
|
||||||
height: $slotH;
|
|
||||||
width: auto;
|
width: auto;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: ($knobH - $slotH) / 2;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: auto;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
.knob {
|
.knob {
|
||||||
@include btnSubtle();
|
//@include btnSubtle();
|
||||||
@include controlGrippy(rgba(black, 0.3), vertical, 1px, solid);
|
//@include controlGrippy(rgba(black, 0.3), vertical, 1px, solid);
|
||||||
cursor: ew-resize;
|
@include trans-prop-nice-fade(.25s);
|
||||||
|
background-color: $sliderColorKnob;
|
||||||
|
&:hover {
|
||||||
|
background-color: $sliderColorKnobHov;
|
||||||
|
}
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: $knobH;
|
height: $knobH;
|
||||||
width: $knobW;
|
width: $sliderKnobW;
|
||||||
top: 0;
|
top: 0;
|
||||||
auto: 0;
|
auto: 0;
|
||||||
bottom: auto;
|
bottom: auto;
|
||||||
left: auto;
|
left: auto;
|
||||||
&:before {
|
}
|
||||||
top: 1px;
|
.knob-l {
|
||||||
bottom: 3px;
|
@include border-left-radius($sliderKnobW);
|
||||||
left: ($knobW / 2) - 1;
|
cursor: w-resize;
|
||||||
}
|
}
|
||||||
|
.knob-r {
|
||||||
|
@include border-right-radius($sliderKnobW);
|
||||||
|
cursor: e-resize;
|
||||||
}
|
}
|
||||||
.range {
|
.range {
|
||||||
background: rgba($colorKey, 0.6);
|
@include trans-prop-nice-fade(.25s);
|
||||||
|
background-color: $sliderColorRange;
|
||||||
cursor: ew-resize;
|
cursor: ew-resize;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0; //$tbOffset;
|
||||||
right: auto;
|
right: auto;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
width: auto;
|
width: auto;
|
||||||
&:hover {
|
&:hover {
|
||||||
background: rgba($colorKey, 0.7);
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/******************************************************** 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -20,7 +20,7 @@
|
|||||||
* at runtime from the About dialog for additional information.
|
* at runtime from the About dialog for additional information.
|
||||||
*****************************************************************************/
|
*****************************************************************************/
|
||||||
/******************************************************** MENU BUTTONS */
|
/******************************************************** MENU BUTTONS */
|
||||||
.s-menu {
|
.s-menu-btn {
|
||||||
// Formerly .btn-menu
|
// Formerly .btn-menu
|
||||||
@extend .s-btn;
|
@extend .s-btn;
|
||||||
span.l-click-area {
|
span.l-click-area {
|
||||||
@ -62,186 +62,192 @@
|
|||||||
|
|
||||||
/******************************************************** MENUS THEMSELVES */
|
/******************************************************** MENUS THEMSELVES */
|
||||||
.menu-element {
|
.menu-element {
|
||||||
$bg: $colorMenuBg;
|
|
||||||
$fg: $colorMenuFg;
|
|
||||||
$ic: $colorMenuIc;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: relative;
|
position: relative;
|
||||||
.menu {
|
}
|
||||||
@include border-radius($basicCr);
|
|
||||||
@include containerSubtle($bg, $fg);
|
|
||||||
@include boxShdw($shdwMenu);
|
|
||||||
@include txtShdw($shdwMenuText);
|
|
||||||
display: block; // set to block via jQuery
|
|
||||||
padding: $interiorMarginSm 0;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 10;
|
|
||||||
ul {
|
|
||||||
@include menuUlReset();
|
|
||||||
li {
|
|
||||||
@include box-sizing(border-box);
|
|
||||||
border-top: 1px solid lighten($bg, 20%);
|
|
||||||
color: pullForward($bg, 60%);
|
|
||||||
line-height: $menuLineH;
|
|
||||||
padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
|
|
||||||
position: relative;
|
|
||||||
white-space: nowrap;
|
|
||||||
&:first-child {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
background: $colorMenuHovBg;
|
|
||||||
color: $colorMenuHovFg;
|
|
||||||
.icon {
|
|
||||||
color: $colorMenuHovIc;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.type-icon {
|
|
||||||
left: $interiorMargin * 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu,
|
.s-menu {
|
||||||
.context-menu,
|
@include border-radius($basicCr);
|
||||||
.super-menu {
|
@include containerSubtle($colorMenuBg, $colorMenuFg);
|
||||||
pointer-events: auto;
|
@include boxShdw($shdwMenu);
|
||||||
ul li {
|
@include txtShdw($shdwMenuText);
|
||||||
//padding-left: 25px;
|
padding: $interiorMarginSm 0;
|
||||||
a {
|
}
|
||||||
color: $fg;
|
|
||||||
}
|
|
||||||
.icon {
|
|
||||||
color: $ic;
|
|
||||||
}
|
|
||||||
.type-icon {
|
|
||||||
left: $interiorMargin;
|
|
||||||
}
|
|
||||||
&:hover .icon {
|
|
||||||
//color: lighten($ic, 5%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-menu {
|
.menu {
|
||||||
// Used in search dropdown in tree
|
@extend .s-menu;
|
||||||
@extend .context-menu;
|
display: block;
|
||||||
ul li {
|
position: absolute;
|
||||||
padding-left: 50px;
|
z-index: 10;
|
||||||
.checkbox {
|
ul {
|
||||||
$d: 0.7rem;
|
@include menuUlReset();
|
||||||
position: absolute;
|
li {
|
||||||
left: $interiorMargin;
|
|
||||||
top: ($menuLineH - $d) / 1.5;
|
|
||||||
em {
|
|
||||||
height: $d;
|
|
||||||
width: $d;
|
|
||||||
&:before {
|
|
||||||
font-size: 7px !important;// $d/2;
|
|
||||||
height: $d;
|
|
||||||
width: $d;
|
|
||||||
line-height: $d;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.type-icon {
|
|
||||||
left: 25px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.super-menu {
|
|
||||||
$w: 500px;
|
|
||||||
$h: $w - 20;
|
|
||||||
$plw: 50%;
|
|
||||||
$prw: 50%;
|
|
||||||
display: block;
|
|
||||||
width: $w;
|
|
||||||
height: $h;
|
|
||||||
.contents {
|
|
||||||
@include absPosDefault($interiorMargin);
|
|
||||||
}
|
|
||||||
.pane {
|
|
||||||
@include box-sizing(border-box);
|
@include box-sizing(border-box);
|
||||||
&.left {
|
border-top: 1px solid lighten($colorMenuBg, 20%);
|
||||||
//@include test();
|
color: pullForward($colorMenuBg, 60%);
|
||||||
border-right: 1px solid pullForward($colorMenuBg, 10%);
|
line-height: $menuLineH;
|
||||||
left: 0;
|
padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
|
||||||
padding-right: $interiorMargin;
|
position: relative;
|
||||||
right: auto;
|
white-space: nowrap;
|
||||||
width: $plw;
|
&:first-child {
|
||||||
overflow-x: hidden;
|
border: none;
|
||||||
overflow-y: auto;
|
}
|
||||||
ul {
|
&:hover {
|
||||||
li {
|
background: $colorMenuHovBg;
|
||||||
@include border-radius($controlCr);
|
color: $colorMenuHovFg;
|
||||||
padding-left: 30px;
|
.icon {
|
||||||
border-top: none;
|
color: $colorMenuHovIc;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.right {
|
.type-icon {
|
||||||
//@include test(red);
|
left: $interiorMargin * 2;
|
||||||
left: auto;
|
|
||||||
right: 0;
|
|
||||||
padding: $interiorMargin * 5;
|
|
||||||
width: $prw;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.menu-item-description {
|
|
||||||
.desc-area {
|
|
||||||
&.icon {
|
|
||||||
$h: 150px;
|
|
||||||
color: $colorCreateMenuLgIcon;
|
|
||||||
position: relative;
|
|
||||||
font-size: 8em;
|
|
||||||
left: 0;
|
|
||||||
height: $h;
|
|
||||||
line-height: $h;
|
|
||||||
margin-bottom: $interiorMargin * 5;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
&.title {
|
|
||||||
color: $colorCreateMenuText;
|
|
||||||
font-size: 1.2em;
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
}
|
|
||||||
&.description {
|
|
||||||
//color: lighten($bg, 30%);
|
|
||||||
color: $colorCreateMenuText;
|
|
||||||
font-size: 0.8em;
|
|
||||||
line-height: 1.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.context-menu {
|
|
||||||
font-size: 0.80rem;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.context-menu-holder {
|
.menu,
|
||||||
pointer-events: none;
|
.context-menu,
|
||||||
|
.super-menu {
|
||||||
|
pointer-events: auto;
|
||||||
|
ul li {
|
||||||
|
//padding-left: 25px;
|
||||||
|
a {
|
||||||
|
color: $colorMenuFg;
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
color: $colorMenuIc;
|
||||||
|
}
|
||||||
|
.type-icon {
|
||||||
|
left: $interiorMargin;
|
||||||
|
}
|
||||||
|
&:hover .icon {
|
||||||
|
//color: lighten($colorMenuIc, 5%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-menu {
|
||||||
|
// Used in search dropdown in tree
|
||||||
|
@extend .context-menu;
|
||||||
|
ul li {
|
||||||
|
padding-left: 50px;
|
||||||
|
.checkbox {
|
||||||
|
$d: 0.7rem;
|
||||||
|
position: absolute;
|
||||||
|
left: $interiorMargin;
|
||||||
|
top: ($menuLineH - $d) / 1.5;
|
||||||
|
em {
|
||||||
|
height: $d;
|
||||||
|
width: $d;
|
||||||
|
&:before {
|
||||||
|
font-size: 7px !important;// $d/2;
|
||||||
|
height: $d;
|
||||||
|
width: $d;
|
||||||
|
line-height: $d;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.type-icon {
|
||||||
|
left: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.super-menu {
|
||||||
|
$w: 500px;
|
||||||
|
$h: $w - 20;
|
||||||
|
$plw: 50%;
|
||||||
|
$prw: 50%;
|
||||||
|
display: block;
|
||||||
|
width: $w;
|
||||||
|
height: $h;
|
||||||
|
.contents {
|
||||||
|
@include absPosDefault($interiorMargin);
|
||||||
|
}
|
||||||
|
.pane {
|
||||||
|
@include box-sizing(border-box);
|
||||||
|
&.left {
|
||||||
|
//@include test();
|
||||||
|
border-right: 1px solid pullForward($colorMenuBg, 10%);
|
||||||
|
left: 0;
|
||||||
|
padding-right: $interiorMargin;
|
||||||
|
right: auto;
|
||||||
|
width: $plw;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
ul {
|
||||||
|
li {
|
||||||
|
@include border-radius($controlCr);
|
||||||
|
padding-left: 30px;
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.right {
|
||||||
|
//@include test(red);
|
||||||
|
left: auto;
|
||||||
|
right: 0;
|
||||||
|
padding: $interiorMargin * 5;
|
||||||
|
width: $prw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menu-item-description {
|
||||||
|
.desc-area {
|
||||||
|
&.icon {
|
||||||
|
$h: 150px;
|
||||||
|
color: $colorCreateMenuLgIcon;
|
||||||
|
position: relative;
|
||||||
|
font-size: 8em;
|
||||||
|
left: 0;
|
||||||
|
height: $h;
|
||||||
|
line-height: $h;
|
||||||
|
margin-bottom: $interiorMargin * 5;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
&.title {
|
||||||
|
color: $colorCreateMenuText;
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
&.description {
|
||||||
|
//color: lighten($colorMenuBg, 30%);
|
||||||
|
color: $colorCreateMenuText;
|
||||||
|
font-size: 0.8em;
|
||||||
|
line-height: 1.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.context-menu {
|
||||||
|
font-size: 0.80rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.context-menu-holder,
|
||||||
|
.menu-holder {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 200px;
|
|
||||||
width: 170px;
|
|
||||||
z-index: 70;
|
z-index: 70;
|
||||||
.context-menu-wrapper {
|
.context-menu-wrapper {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
.context-menu {
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
&.go-left .context-menu {
|
&.go-left .context-menu,
|
||||||
|
&.go-left .menu {
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
&.go-up .context-menu {
|
&.go-up .context-menu,
|
||||||
|
&.go-up .menu {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.context-menu-holder {
|
||||||
|
pointer-events: none;
|
||||||
|
height: 200px;
|
||||||
|
width: 170px;
|
||||||
|
}
|
||||||
|
|
||||||
.btn-bar.right .menu,
|
.btn-bar.right .menu,
|
||||||
.menus-to-left .menu {
|
.menus-to-left .menu {
|
||||||
left: auto;
|
left: auto;
|
||||||
|
|||||||
@ -1,13 +1,28 @@
|
|||||||
.l-time-controller {
|
@mixin toiLineHovEffects() {
|
||||||
$inputTxtW: 90px;
|
//@include pulse(.25s);
|
||||||
$knobW: 9px;
|
&:before,
|
||||||
$r1H: 20px;
|
&:after {
|
||||||
$r2H: 30px;
|
background-color: $timeControllerToiLineColorHov;
|
||||||
$r3H: 10px;
|
}
|
||||||
|
}
|
||||||
|
|
||||||
position: relative;
|
.l-time-controller-visible {
|
||||||
margin: $interiorMarginLg 0;
|
|
||||||
min-width: 400px;
|
}
|
||||||
|
|
||||||
|
.l-time-controller {
|
||||||
|
$minW: 400px;
|
||||||
|
$knobHOffset: 0px;
|
||||||
|
$knobM: ($sliderKnobW + $knobHOffset) * -1;
|
||||||
|
$rangeValPad: $interiorMargin;
|
||||||
|
$rangeValOffset: $sliderKnobW;
|
||||||
|
//$knobCr: $sliderKnobW;
|
||||||
|
$timeRangeSliderLROffset: 130px + $sliderKnobW + $rangeValOffset;
|
||||||
|
$r1H: nth($ueTimeControlH,1);
|
||||||
|
$r2H: nth($ueTimeControlH,2);
|
||||||
|
$r3H: nth($ueTimeControlH,3);
|
||||||
|
|
||||||
|
//height: $r1H + $r2H + $r3H + ($interiorMargin * 2);
|
||||||
|
|
||||||
.l-time-range-inputs-holder,
|
.l-time-range-inputs-holder,
|
||||||
.l-time-range-slider {
|
.l-time-range-slider {
|
||||||
@ -18,55 +33,118 @@
|
|||||||
.l-time-range-slider-holder,
|
.l-time-range-slider-holder,
|
||||||
.l-time-range-ticks-holder
|
.l-time-range-ticks-holder
|
||||||
{
|
{
|
||||||
margin-bottom: $interiorMargin;
|
//@include test();
|
||||||
position: relative;
|
@include absPosDefault(0, visible);
|
||||||
|
@include box-sizing(border-box);
|
||||||
|
min-width: $minW;
|
||||||
|
top: auto;
|
||||||
}
|
}
|
||||||
.l-time-range-slider,
|
.l-time-range-slider,
|
||||||
.l-time-range-ticks {
|
.l-time-range-ticks {
|
||||||
//@include test(red, 0.1);
|
//@include test(red, 0.1);
|
||||||
@include absPosDefault(0, visible);
|
@include absPosDefault(0, visible);
|
||||||
|
left: $timeRangeSliderLROffset; right: $timeRangeSliderLROffset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-time-range-inputs-holder {
|
.l-time-range-inputs-holder {
|
||||||
height: $r1H;
|
//@include test(red);
|
||||||
}
|
height: $r1H; bottom: $r2H + $r3H + ($interiorMarginSm * 2);
|
||||||
|
padding-top: $interiorMargin;
|
||||||
.l-time-range-slider,
|
border-top: 1px solid $colorInteriorBorder;
|
||||||
.l-time-range-ticks {
|
.type-icon {
|
||||||
left: $inputTxtW; right: $inputTxtW;
|
font-size: 120%;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.l-time-range-input,
|
||||||
|
.l-time-range-inputs-elem {
|
||||||
|
margin-right: $interiorMargin;
|
||||||
|
.lbl {
|
||||||
|
color: $colorPlotLabelFg;
|
||||||
|
}
|
||||||
|
.ui-symbol.icon {
|
||||||
|
font-size: 11px;
|
||||||
|
width: 11px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-time-range-slider-holder {
|
.l-time-range-slider-holder {
|
||||||
height: $r2H;
|
//@include test(green);
|
||||||
|
height: $r2H; bottom: $r3H + ($interiorMarginSm * 1);
|
||||||
.range-holder {
|
.range-holder {
|
||||||
@include box-shadow(none);
|
@include box-shadow(none);
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
height: 75%;
|
.range {
|
||||||
|
.toi-line {
|
||||||
|
$myC: $timeControllerToiLineColor;
|
||||||
|
$myW: 8px;
|
||||||
|
@include transform(translateX(50%));
|
||||||
|
position: absolute;
|
||||||
|
//@include test();
|
||||||
|
top: 0; right: 0; bottom: 0px; left: auto;
|
||||||
|
width: $myW;
|
||||||
|
height: auto;
|
||||||
|
z-index: 2;
|
||||||
|
&:before,
|
||||||
|
&:after {
|
||||||
|
background-color: $myC;
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
&:before {
|
||||||
|
// Vert line
|
||||||
|
top: 0; right: auto; bottom: -10px; left: floor($myW/2) - 1;
|
||||||
|
width: 2px;
|
||||||
|
//top: 0; right: 3px; bottom: 0; left: 3px;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
// Circle element
|
||||||
|
@include border-radius($myW);
|
||||||
|
@include transform(translateY(-50%));
|
||||||
|
top: 50%; right: 0; bottom: auto; left: 0;
|
||||||
|
width: auto;
|
||||||
|
height: $myW;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover .toi-line {
|
||||||
|
@include toiLineHovEffects;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:not(:active) {
|
||||||
|
//@include test(#ff00cc);
|
||||||
|
.knob,
|
||||||
|
.range {
|
||||||
|
@include transition-property(left, right);
|
||||||
|
@include transition-duration(500ms);
|
||||||
|
@include transition-timing-function(ease-in-out);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-time-range-ticks-holder {
|
.l-time-range-ticks-holder {
|
||||||
height: $r3H;
|
height: $r3H;
|
||||||
.l-time-range-ticks {
|
.l-time-range-ticks {
|
||||||
border-top: 1px solid $colorInteriorBorder;
|
border-top: 1px solid $colorTick;
|
||||||
.tick {
|
.tick {
|
||||||
background-color: $colorInteriorBorder;
|
background-color: $colorTick;
|
||||||
border:none;
|
border:none;
|
||||||
|
height: 5px;
|
||||||
width: 1px;
|
width: 1px;
|
||||||
margin-left: -1px;
|
margin-left: -1px;
|
||||||
|
position: absolute;
|
||||||
&:first-child {
|
&:first-child {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
.l-time-range-tick-label {
|
.l-time-range-tick-label {
|
||||||
color: lighten($colorInteriorBorder, 20%);
|
@include webkitProp(transform, translateX(-50%));
|
||||||
|
color: $colorPlotLabelFg;
|
||||||
|
display: inline-block;
|
||||||
font-size: 0.7em;
|
font-size: 0.7em;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin-left: -0.5 * $tickLblW;
|
top: 8px;
|
||||||
text-align: center;
|
white-space: nowrap;
|
||||||
top: $r3H;
|
|
||||||
width: $tickLblW;
|
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -74,31 +152,47 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.knob {
|
.knob {
|
||||||
width: $knobW;
|
z-index: 2;
|
||||||
.range-value {
|
.range-value {
|
||||||
$w: 75px;
|
//@include test($sliderColorRange);
|
||||||
//@include test();
|
@include trans-prop-nice-fade(.25s);
|
||||||
|
padding: 0 $rangeValOffset;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
height: $r2H;
|
||||||
margin-top: -7px; // Label is 13px high
|
line-height: $r2H;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
width: $w;
|
|
||||||
}
|
}
|
||||||
&:hover .range-value {
|
&:hover .range-value {
|
||||||
color: $colorKey;
|
color: $sliderColorKnobHov;
|
||||||
}
|
}
|
||||||
&.knob-l {
|
&.knob-l {
|
||||||
margin-left: $knobW / -2;
|
//@include border-bottom-left-radius($knobCr); // MOVED TO _CONTROLS.SCSS
|
||||||
|
margin-left: $knobM;
|
||||||
.range-value {
|
.range-value {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
right: $knobW + $interiorMargin;
|
right: $rangeValOffset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.knob-r {
|
&.knob-r {
|
||||||
margin-right: $knobW / -2;
|
//@include border-bottom-right-radius($knobCr);
|
||||||
|
margin-right: $knobM;
|
||||||
.range-value {
|
.range-value {
|
||||||
left: $knobW + $interiorMargin;
|
left: $rangeValOffset;
|
||||||
|
}
|
||||||
|
&:hover + .range-holder .range .toi-line {
|
||||||
|
@include toiLineHovEffects;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//.slot.range-holder {
|
||||||
|
// background-color: $sliderColorRangeHolder;
|
||||||
|
//}
|
||||||
|
|
||||||
|
.s-time-range-val {
|
||||||
|
//@include test();
|
||||||
|
@include border-radius($controlCr);
|
||||||
|
background-color: $colorInputBg;
|
||||||
|
padding: 1px 1px 0 $interiorMargin;
|
||||||
}
|
}
|
||||||
@ -19,39 +19,44 @@
|
|||||||
* this source code distribution or the Licensing information page available
|
* this source code distribution or the Licensing information page available
|
||||||
* at runtime from the About dialog for additional information.
|
* at runtime from the About dialog for additional information.
|
||||||
*****************************************************************************/
|
*****************************************************************************/
|
||||||
|
@mixin complexFieldHolder($myW) {
|
||||||
|
width: $myW + $interiorMargin;
|
||||||
|
input[type="text"] {
|
||||||
|
width: $myW;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.complex.datetime {
|
.complex.datetime {
|
||||||
span {
|
span {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-right: $interiorMargin;
|
margin-right: $interiorMargin;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
.field-hints,
|
.field-hints,
|
||||||
.fields {
|
.fields {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.field-hints {
|
.field-hints {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
.fields {
|
.fields {
|
||||||
margin-top: $interiorMarginSm 0;
|
margin-top: $interiorMarginSm 0;
|
||||||
padding: $interiorMarginSm 0;
|
padding: $interiorMarginSm 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.date {
|
.date {
|
||||||
$myW: 80px;
|
@include complexFieldHolder(80px);
|
||||||
width: $myW + $interiorMargin;
|
}
|
||||||
input {
|
|
||||||
width: $myW;
|
.time.md {
|
||||||
}
|
@include complexFieldHolder(60px);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.time.sm {
|
.time.sm {
|
||||||
$myW: 40px;
|
@include complexFieldHolder(40px);
|
||||||
width: $myW + $interiorMargin;
|
|
||||||
input {
|
|
||||||
width: $myW;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -21,10 +21,13 @@
|
|||||||
*****************************************************************************/
|
*****************************************************************************/
|
||||||
.select {
|
.select {
|
||||||
@include btnSubtle($colorSelectBg);
|
@include btnSubtle($colorSelectBg);
|
||||||
margin: 0 0 2px 2px; // Needed to avoid dropshadow from being clipped by parent containers
|
@if $shdwBtns != none {
|
||||||
|
margin: 0 0 2px 0; // Needed to avoid dropshadow from being clipped by parent containers
|
||||||
|
}
|
||||||
padding: 0 $interiorMargin;
|
padding: 0 $interiorMargin;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
line-height: $formInputH;
|
||||||
select {
|
select {
|
||||||
@include appearance(none);
|
@include appearance(none);
|
||||||
@include box-sizing(border-box);
|
@include box-sizing(border-box);
|
||||||
@ -40,11 +43,8 @@
|
|||||||
}
|
}
|
||||||
&:after {
|
&:after {
|
||||||
@include contextArrow();
|
@include contextArrow();
|
||||||
|
pointer-events: none;
|
||||||
color: rgba($colorSelectFg, percentToDecimal($contrastInvokeMenuPercent));
|
color: rgba($colorSelectFg, percentToDecimal($contrastInvokeMenuPercent));
|
||||||
//content:"v";
|
|
||||||
//display: block;
|
|
||||||
//font-family: 'symbolsfont';
|
|
||||||
//pointer-events: none;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: $interiorMargin; top: 0;
|
right: $interiorMargin; top: 0;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -40,6 +40,11 @@ table {
|
|||||||
thead, .thead {
|
thead, .thead {
|
||||||
border-bottom: 1px solid $colorTabHeaderBorder;
|
border-bottom: 1px solid $colorTabHeaderBorder;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:not(.fixed-header) tr th {
|
||||||
|
background-color: $colorTabHeaderBg;
|
||||||
|
}
|
||||||
|
|
||||||
tbody, .tbody {
|
tbody, .tbody {
|
||||||
display: table-row-group;
|
display: table-row-group;
|
||||||
tr, .tr {
|
tr, .tr {
|
||||||
@ -64,7 +69,6 @@ table {
|
|||||||
display: table-cell;
|
display: table-cell;
|
||||||
}
|
}
|
||||||
th, .th {
|
th, .th {
|
||||||
background-color: $colorTabHeaderBg;
|
|
||||||
border-left: 1px solid $colorTabHeaderBorder;
|
border-left: 1px solid $colorTabHeaderBorder;
|
||||||
color: $colorTabHeaderFg;
|
color: $colorTabHeaderFg;
|
||||||
padding: $tabularTdPadLR $tabularTdPadLR;
|
padding: $tabularTdPadLR $tabularTdPadLR;
|
||||||
@ -143,7 +147,7 @@ table {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: $tabularHeaderH;
|
height: $tabularHeaderH;
|
||||||
background: rgba(#fff, 0.15);
|
background-color: $colorTabHeaderBg;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
tbody, .tbody {
|
tbody, .tbody {
|
||||||
|
|||||||
@ -89,7 +89,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
|
|||||||
.gl-plot-label,
|
.gl-plot-label,
|
||||||
.l-plot-label {
|
.l-plot-label {
|
||||||
// @include test(yellow);
|
// @include test(yellow);
|
||||||
color: lighten($colorBodyFg, 20%);
|
color: $colorPlotLabelFg;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
// text-transform: uppercase;
|
// text-transform: uppercase;
|
||||||
|
|||||||
@ -47,7 +47,7 @@
|
|||||||
}
|
}
|
||||||
&.frame-template {
|
&.frame-template {
|
||||||
.s-btn,
|
.s-btn,
|
||||||
.s-menu {
|
.s-menu-btn {
|
||||||
height: $ohH;
|
height: $ohH;
|
||||||
line-height: $ohH;
|
line-height: $ohH;
|
||||||
padding: 0 $interiorMargin;
|
padding: 0 $interiorMargin;
|
||||||
@ -56,7 +56,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.s-menu:after {
|
.s-menu-btn:after {
|
||||||
font-size: 8px;
|
font-size: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -30,21 +30,21 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.holder-all {
|
.holder-all {
|
||||||
$myM: 0; // $interiorMarginSm;
|
$myM: 0; // $interiorMarginSm;
|
||||||
top: $myM;
|
top: $myM;
|
||||||
right: $myM;
|
right: $myM;
|
||||||
bottom: $myM;
|
bottom: $myM;
|
||||||
left: $myM;
|
left: $myM;
|
||||||
}
|
}
|
||||||
|
|
||||||
.browse-area,
|
.browse-area,
|
||||||
.edit-area,
|
.edit-area,
|
||||||
.editor {
|
.editor {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editor {
|
.editor {
|
||||||
@include border-radius($basicCr * 1.5);
|
@include border-radius($basicCr * 1.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.contents {
|
.contents {
|
||||||
@ -68,8 +68,8 @@
|
|||||||
margin-right: $interiorMargin;
|
margin-right: $interiorMargin;
|
||||||
}
|
}
|
||||||
&.abs {
|
&.abs {
|
||||||
text-wrap: none;
|
text-wrap: none;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
&.left,
|
&.left,
|
||||||
.left {
|
.left {
|
||||||
width: 45%;
|
width: 45%;
|
||||||
@ -95,51 +95,51 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.user-environ {
|
.user-environ {
|
||||||
.browse-area,
|
.browse-area,
|
||||||
.edit-area,
|
.edit-area,
|
||||||
.editor {
|
.editor {
|
||||||
top: $bodyMargin + $ueTopBarH + ($interiorMargin);
|
top: $bodyMargin + $ueTopBarH + ($interiorMargin);
|
||||||
right: $bodyMargin;
|
right: $bodyMargin;
|
||||||
bottom: $ueFooterH + $bodyMargin;
|
bottom: $ueFooterH + $bodyMargin;
|
||||||
left: $bodyMargin;
|
left: $bodyMargin;
|
||||||
}
|
}
|
||||||
|
|
||||||
.browse-area,
|
.browse-area,
|
||||||
.edit-area {
|
.edit-area {
|
||||||
> .contents {
|
> .contents {
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-area {
|
.edit-area {
|
||||||
$tbH: $btnToolbarH + $interiorMargin;
|
$tbH: $btnToolbarH + $interiorMargin;
|
||||||
top: $bodyMargin + $ueTopBarEditH + ($interiorMargin);
|
top: $bodyMargin + $ueTopBarEditH + ($interiorMargin);
|
||||||
.tool-bar {
|
.tool-bar {
|
||||||
bottom: auto;
|
bottom: auto;
|
||||||
height: $tbH;
|
height: $tbH;
|
||||||
line-height: $btnToolbarH;
|
line-height: $btnToolbarH;
|
||||||
}
|
}
|
||||||
.work-area {
|
.work-area {
|
||||||
top: $tbH + $interiorMargin * 2;
|
top: $tbH + $interiorMargin * 2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ue-bottom-bar {
|
.ue-bottom-bar {
|
||||||
//@include absPosDefault($bodyMargin);
|
//@include absPosDefault($bodyMargin);
|
||||||
@include absPosDefault(0);// New status bar design
|
@include absPosDefault(0); // New status bar design
|
||||||
top: auto;
|
top: auto;
|
||||||
height: $ueFooterH;
|
height: $ueFooterH;
|
||||||
.status-holder {
|
.status-holder {
|
||||||
//right: $ueAppLogoW + $bodyMargin; New status bar design
|
//right: $ueAppLogoW + $bodyMargin; New status bar design
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
.app-logo {
|
.app-logo {
|
||||||
left: auto;
|
left: auto;
|
||||||
width: $ueAppLogoW;
|
width: $ueAppLogoW;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.cols {
|
.cols {
|
||||||
@ -225,89 +225,91 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.pane {
|
.pane {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
&.treeview.left {
|
&.treeview.left {
|
||||||
.create-btn-holder {
|
.create-btn-holder {
|
||||||
bottom: auto; top: 0;
|
bottom: auto;
|
||||||
height: $ueTopBarH;
|
top: 0;
|
||||||
.wrapper.menu-element {
|
height: $ueTopBarH;
|
||||||
position: absolute;
|
.wrapper.menu-element {
|
||||||
bottom: $interiorMargin;
|
position: absolute;
|
||||||
}
|
bottom: $interiorMargin;
|
||||||
}
|
}
|
||||||
.search-holder {
|
}
|
||||||
top: $ueTopBarH + $interiorMarginLg;
|
.search-holder {
|
||||||
}
|
top: $ueTopBarH + $interiorMarginLg;
|
||||||
.tree-holder {
|
}
|
||||||
overflow: auto;
|
.tree-holder {
|
||||||
top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin;
|
overflow: auto;
|
||||||
}
|
top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&.items {
|
&.items {
|
||||||
.object-browse-bar {
|
.object-browse-bar {
|
||||||
.left.abs,
|
.left.abs,
|
||||||
.right.abs {
|
.right.abs {
|
||||||
top: auto;
|
top: auto;
|
||||||
}
|
}
|
||||||
//.left.abs {
|
|
||||||
// @include tmpBorder(green);
|
|
||||||
//}
|
|
||||||
//.right.abs {
|
|
||||||
// @include tmpBorder(red);
|
|
||||||
//}
|
|
||||||
}
|
|
||||||
.object-holder {
|
|
||||||
top: $ueTopBarH + $interiorMarginLg;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.object-holder {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.split-layout {
|
.split-layout {
|
||||||
&.horizontal {
|
&.horizontal {
|
||||||
// Slides up and down
|
// Slides up and down
|
||||||
>.pane {
|
> .pane {
|
||||||
// @include test();
|
// @include test();
|
||||||
margin-top: $interiorMargin;
|
margin-top: $interiorMargin;
|
||||||
&:first-child {
|
&:first-child {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.vertical {
|
&.vertical {
|
||||||
// Slides left and right
|
// Slides left and right
|
||||||
>.pane {
|
> .pane {
|
||||||
// @include test();
|
// @include test();
|
||||||
margin-left: $interiorMargin;
|
margin-left: $interiorMargin;
|
||||||
>.holder {
|
> .holder {
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
&:first-child {
|
&:first-child {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
.holder {
|
.holder {
|
||||||
right: $interiorMarginSm;
|
right: $interiorMarginSm;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.object-holder {
|
||||||
|
overflow: hidden; // Contained objects need to handle their own overflow now
|
||||||
|
top: $ueTopBarH + $interiorMarginLg;
|
||||||
|
> ng-include {
|
||||||
|
@include absPosDefault(0, auto);
|
||||||
|
}
|
||||||
|
&.l-controls-visible {
|
||||||
|
&.l-time-controller-visible {
|
||||||
|
> ng-include {
|
||||||
|
bottom: nth($ueTimeControlH,1) + nth($ueTimeControlH,2) +nth($ueTimeControlH,3) + ($interiorMargin * 3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.object-browse-bar .s-btn,
|
.object-browse-bar .s-btn,
|
||||||
.top-bar .buttons-main .s-btn,
|
.top-bar .buttons-main .s-btn,
|
||||||
.top-bar .s-menu,
|
.top-bar .s-menu-btn,
|
||||||
.tool-bar .s-btn,
|
.tool-bar .s-btn,
|
||||||
.tool-bar .s-menu {
|
.tool-bar .s-menu-btn {
|
||||||
$h: $btnToolbarH;
|
$h: $btnToolbarH;
|
||||||
height: $h;
|
height: $h;
|
||||||
line-height: $h;
|
line-height: $h;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
.object-browse-bar,
|
.object-browse-bar,
|
||||||
@ -318,33 +320,29 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.object-browse-bar {
|
.object-browse-bar {
|
||||||
//@include test(blue);
|
//@include test(blue);
|
||||||
@include absPosDefault(0, visible);
|
@include absPosDefault(0, visible);
|
||||||
@include box-sizing(border-box);
|
@include box-sizing(border-box);
|
||||||
height: $ueTopBarH;
|
height: $ueTopBarH;
|
||||||
line-height: $ueTopBarH;
|
line-height: $ueTopBarH;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
padding-right: $interiorMarginLg * 2;
|
padding-right: $interiorMarginLg * 2;
|
||||||
.l-back {
|
.l-back {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
float: left;
|
float: left;
|
||||||
margin-right: $interiorMarginLg;
|
margin-right: $interiorMarginLg;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-flex {
|
.l-flex {
|
||||||
@include webkitVal('display', 'flex');
|
@include webkitVal('display', 'flex');
|
||||||
@include webkitProp('flex-flow', 'row nowrap');
|
@include webkitProp('flex-flow', 'row nowrap');
|
||||||
.left {
|
.left {
|
||||||
//@include test(red);
|
//@include test(red);
|
||||||
@include webkitProp(flex, '1 1 0');
|
@include webkitProp(flex, '1 1 0');
|
||||||
padding-right: $interiorMarginLg;
|
padding-right: $interiorMarginLg;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.vscroll {
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
@ -20,42 +20,47 @@
|
|||||||
at runtime from the About dialog for additional information.
|
at runtime from the About dialog for additional information.
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<div ng-controller="DateTimePickerController">
|
<div ng-controller="DateTimePickerController" class="l-datetime-picker s-datetime-picker s-menu">
|
||||||
<div style="vertical-align: top; display: inline-block">
|
<div class="holder">
|
||||||
<div style="text-align: center;">
|
<div class="l-month-year-pager">
|
||||||
<a ng-click="changeMonth(-1)"><</a>
|
<a class="pager prev" ng-click="changeMonth(-1)"></a>
|
||||||
{{month}} {{year}}
|
<span class="val">{{month}} {{year}}</span>
|
||||||
<a ng-click="changeMonth(1)">></a>
|
<a class="pager next" ng-click="changeMonth(1)"></a>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="l-calendar">
|
||||||
<table>
|
<ul class="l-cal-row l-header">
|
||||||
<tr>
|
<li ng-repeat="day in ['Su','Mo','Tu','We','Th','Fr','Sa']">{{day}}</li>
|
||||||
<th ng-repeat="day in ['Su','Mo','Tu','We','Th','Fr','Sa']">
|
</ul>
|
||||||
{{day}}
|
<ul class="l-cal-row l-body" ng-repeat="row in table">
|
||||||
</th>
|
<li ng-repeat="cell in row"
|
||||||
</tr>
|
ng-click="select(cell)"
|
||||||
<tr ng-repeat="row in table">
|
ng-class='{ "in-month": isInCurrentMonth(cell), selected: isSelected(cell) }'>
|
||||||
<td style="text-align: center;"
|
<div class="prime">{{cell.day}}</div>
|
||||||
ng-repeat="cell in row"
|
<div class="sub">{{cell.dayOfYear}}</div>
|
||||||
ng-click="select(cell)"
|
</li>
|
||||||
ng-class='{
|
</ul>
|
||||||
disabled: !isSelectable(cell),
|
</div>
|
||||||
test: isSelected(cell)
|
</div>
|
||||||
}'>
|
<div class="l-time-selects complex datetime"
|
||||||
<div>{{cell.day}}</div>
|
ng-show="options">
|
||||||
<div style="font-size: 80%">{{cell.dayOfYear}}</div>
|
<div class="field-hints">
|
||||||
</td>
|
<span class="hint time md"
|
||||||
</tr>
|
ng-repeat="key in ['hours', 'minutes', 'seconds']"
|
||||||
</table>
|
ng-if="options[key]">
|
||||||
</div>
|
{{nameFor(key)}}
|
||||||
</div>
|
</span>
|
||||||
<div style="vertical-align: top; display: inline-block"
|
</div>
|
||||||
ng-repeat="key in ['hours', 'minutes', 'seconds']"
|
<div>
|
||||||
ng-if="options[key]">
|
<span class="field control time md"
|
||||||
<div>{{nameFor(key)}}</div>
|
ng-repeat="key in ['hours', 'minutes', 'seconds']"
|
||||||
<select size="10"
|
ng-if="options[key]">
|
||||||
ng-model="time[key]"
|
<div class='form-control select'>
|
||||||
ng-options="i for i in optionsFor(key)">
|
<select size="1"
|
||||||
</select>
|
ng-model="time[key]"
|
||||||
</div>
|
ng-options="i for i in optionsFor(key)">
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -21,7 +21,7 @@
|
|||||||
-->
|
-->
|
||||||
<span ng-controller="ViewSwitcherController">
|
<span ng-controller="ViewSwitcherController">
|
||||||
<div
|
<div
|
||||||
class="view-switcher menu-element s-menu"
|
class="view-switcher menu-element s-menu-btn"
|
||||||
ng-if="view.length > 1"
|
ng-if="view.length > 1"
|
||||||
ng-controller="ClickAwayController as toggle"
|
ng-controller="ClickAwayController as toggle"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -19,78 +19,84 @@
|
|||||||
this source code distribution or the Licensing information page available
|
this source code distribution or the Licensing information page available
|
||||||
at runtime from the About dialog for additional information.
|
at runtime from the About dialog for additional information.
|
||||||
-->
|
-->
|
||||||
|
<!-- MINE -->
|
||||||
<div class="l-time-controller" ng-controller="TimeRangeController">
|
<div class="l-time-controller" ng-controller="TimeRangeController">
|
||||||
<div class="l-time-range-inputs-holder">
|
<div class="l-time-range-inputs-holder">
|
||||||
Start: {{startOuterText}}
|
<span class="l-time-range-inputs-elem ui-symbol type-icon">C</span>
|
||||||
<span ng-controller="ToggleController as t">
|
<span class="l-time-range-input" ng-controller="ToggleController as t1">
|
||||||
<a class="ui-symbol" ng-click="t.toggle()">p</a>
|
<!--<span class="lbl">Start</span>-->
|
||||||
<mct-popup ng-if="t.isActive()">
|
<span class="s-btn time-range-start" ng-click="t1.toggle()">
|
||||||
<div style="background: #222;"
|
<span class="val">{{startOuterText}}</span>
|
||||||
mct-click-elsewhere="t.setState(false)">
|
<a class="ui-symbol icon icon-calendar"></a>
|
||||||
<mct-control key="'datetime-picker'"
|
<mct-popup ng-if="t1.isActive()">
|
||||||
ng-model="ngModel.outer"
|
<div mct-click-elsewhere="t1.setState(false)">
|
||||||
field="'start'"
|
<mct-control key="'datetime-picker'"
|
||||||
options="{ hours: true }">
|
ng-model="ngModel.outer"
|
||||||
</mct-control>
|
field="'start'"
|
||||||
</div>
|
options="{ hours: true }">
|
||||||
</mct-popup>
|
</mct-control>
|
||||||
</span>
|
</div>
|
||||||
|
</mct-popup>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
|
||||||
End: {{endOuterText}}
|
<span class="l-time-range-inputs-elem lbl">to</span>
|
||||||
<span ng-controller="ToggleController as t2">
|
|
||||||
<a class="ui-symbol" ng-click="t2.toggle()">p</a>
|
|
||||||
<mct-popup ng-if="t2.isActive()">
|
|
||||||
<div style="background: #222;"
|
|
||||||
mct-click-elsewhere="t2.setState(false)">
|
|
||||||
<mct-control key="'datetime-picker'"
|
|
||||||
ng-model="ngModel.outer"
|
|
||||||
field="'end'"
|
|
||||||
options="{ hours: true }">
|
|
||||||
</mct-control>
|
|
||||||
</div>
|
|
||||||
</mct-popup>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
|
<span class="l-time-range-input" ng-controller="ToggleController as t2">
|
||||||
|
<!--<span class="lbl">End</span>-->
|
||||||
|
<span class="s-btn l-time-range-input" ng-click="t2.toggle()">
|
||||||
|
<span class="val">{{endOuterText}}</span>
|
||||||
|
<a class="ui-symbol icon icon-calendar"></a>
|
||||||
|
<mct-popup ng-if="t2.isActive()">
|
||||||
|
<div mct-click-elsewhere="t2.setState(false)">
|
||||||
|
<mct-control key="'datetime-picker'"
|
||||||
|
ng-model="ngModel.outer"
|
||||||
|
field="'end'"
|
||||||
|
options="{ hours: true }">
|
||||||
|
</mct-control>
|
||||||
|
</div>
|
||||||
|
</mct-popup>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
<div class="l-time-range-slider-holder">
|
||||||
|
<div class="l-time-range-slider">
|
||||||
|
<div class="slider"
|
||||||
|
mct-resize="spanWidth = bounds.width">
|
||||||
|
<div class="knob knob-l"
|
||||||
|
mct-drag-down="startLeftDrag()"
|
||||||
|
mct-drag="leftDrag(delta[0])"
|
||||||
|
ng-style="{ left: startInnerPct }">
|
||||||
|
<div class="range-value">{{startInnerText}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="knob knob-r"
|
||||||
|
mct-drag-down="startRightDrag()"
|
||||||
|
mct-drag="rightDrag(delta[0])"
|
||||||
|
ng-style="{ right: endInnerPct }">
|
||||||
|
<div class="range-value">{{endInnerText}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="slot range-holder">
|
||||||
|
<div class="range"
|
||||||
|
mct-drag-down="startMiddleDrag()"
|
||||||
|
mct-drag="middleDrag(delta[0])"
|
||||||
|
ng-style="{ left: startInnerPct, right: endInnerPct}">
|
||||||
|
<div class="toi-line"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="l-time-range-slider-holder">
|
<div class="l-time-range-ticks-holder">
|
||||||
<div class="l-time-range-slider">
|
<div class="l-time-range-ticks">
|
||||||
<div class="slider"
|
<div
|
||||||
mct-resize="spanWidth = bounds.width">
|
ng-repeat="tick in ticks"
|
||||||
<div class="slot range-holder">
|
ng-style="{ left: $index * (100 / (ticks.length - 1)) + '%' }"
|
||||||
<div class="range"
|
class="tick tick-x"
|
||||||
mct-drag-down="startMiddleDrag()"
|
>
|
||||||
mct-drag="middleDrag(delta[0])"
|
<span class="l-time-range-tick-label">{{tick}}</span>
|
||||||
ng-style="{ left: startInnerPct, right: endInnerPct}">
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="knob knob-l"
|
</div>
|
||||||
mct-drag-down="startLeftDrag()"
|
|
||||||
mct-drag="leftDrag(delta[0])"
|
|
||||||
ng-style="{ left: startInnerPct }">
|
|
||||||
<div class="range-value">{{startInnerText}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="knob knob-r"
|
|
||||||
mct-drag-down="startRightDrag()"
|
|
||||||
mct-drag="rightDrag(delta[0])"
|
|
||||||
ng-style="{ right: endInnerPct }">
|
|
||||||
<div class="range-value">{{endInnerText}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="l-time-range-ticks-holder">
|
|
||||||
<div class="l-time-range-ticks">
|
|
||||||
<div
|
|
||||||
ng-repeat="tick in ticks"
|
|
||||||
ng-style="{ left: $index * (100 / (ticks.length - 1)) + '%' }"
|
|
||||||
class="tick tick-x"
|
|
||||||
>
|
|
||||||
<span class="l-time-range-tick-label">{{tick}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@ -138,7 +138,7 @@ define(
|
|||||||
$scope.ngModel[$scope.field] = m.valueOf();
|
$scope.ngModel[$scope.field] = m.valueOf();
|
||||||
}
|
}
|
||||||
|
|
||||||
$scope.isSelectable = function (cell) {
|
$scope.isInCurrentMonth = function (cell) {
|
||||||
return cell.month === month;
|
return cell.month === month;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -26,7 +26,9 @@ define(
|
|||||||
function (moment) {
|
function (moment) {
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
var DATE_FORMAT = "YYYY-MM-DD HH:mm:ss";
|
var
|
||||||
|
DATE_FORMAT = "YYYY-MM-DD HH:mm:ss",
|
||||||
|
TICK_SPACING_PX = 150;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @memberof platform/commonUI/general
|
* @memberof platform/commonUI/general
|
||||||
@ -59,8 +61,7 @@ define(
|
|||||||
}
|
}
|
||||||
|
|
||||||
function updateSpanWidth(w) {
|
function updateSpanWidth(w) {
|
||||||
// Space about 100px apart
|
tickCount = Math.max(Math.floor(w / TICK_SPACING_PX), 2);
|
||||||
tickCount = Math.max(Math.floor(w / 100), 2);
|
|
||||||
updateTicks();
|
updateTicks();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -7,12 +7,14 @@ $colorKey: #0099cc;
|
|||||||
$colorKeySelectedBg: #005177;
|
$colorKeySelectedBg: #005177;
|
||||||
$colorKeyFg: #fff;
|
$colorKeyFg: #fff;
|
||||||
$colorInteriorBorder: rgba($colorBodyFg, 0.1);
|
$colorInteriorBorder: rgba($colorBodyFg, 0.1);
|
||||||
|
$colorA: #ccc;
|
||||||
|
$colorAHov: #fff;
|
||||||
$contrastRatioPercent: 7%;
|
$contrastRatioPercent: 7%;
|
||||||
$basicCr: 2px;
|
$basicCr: 2px;
|
||||||
$controlCr: 3px;
|
$controlCr: 3px;
|
||||||
$smallCr: 2px;
|
$smallCr: 2px;
|
||||||
|
|
||||||
// Buttons
|
// Buttons and Controls
|
||||||
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent); //
|
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent); //
|
||||||
$colorBtnFg: $colorBodyFg;
|
$colorBtnFg: $colorBodyFg;
|
||||||
$colorBtnMajorBg: $colorKey;
|
$colorBtnMajorBg: $colorKey;
|
||||||
@ -20,6 +22,18 @@ $colorBtnMajorFg: $colorKeyFg;
|
|||||||
$colorBtnIcon: $colorKey;
|
$colorBtnIcon: $colorKey;
|
||||||
$colorInvokeMenu: #fff;
|
$colorInvokeMenu: #fff;
|
||||||
$contrastInvokeMenuPercent: 20%;
|
$contrastInvokeMenuPercent: 20%;
|
||||||
|
$shdwBtns: rgba(black, 0.2) 0 1px 2px;
|
||||||
|
$sliderColorBase: $colorKey;
|
||||||
|
$sliderColorRangeHolder: rgba(black, 0.1);
|
||||||
|
$sliderColorRange: rgba($sliderColorBase, 0.3);
|
||||||
|
$sliderColorRangeHov: rgba($sliderColorBase, 0.5);
|
||||||
|
$sliderColorKnob: rgba($sliderColorBase, 0.6);
|
||||||
|
$sliderColorKnobHov: $sliderColorBase;
|
||||||
|
$sliderColorRangeValHovBg: rgba($sliderColorBase, 0.1);
|
||||||
|
$sliderColorRangeValHovFg: $colorKeyFg;
|
||||||
|
$sliderKnobW: nth($ueTimeControlH,2)/2;
|
||||||
|
$timeControllerToiLineColor: #00c2ff;
|
||||||
|
$timeControllerToiLineColorHov: #fff;
|
||||||
|
|
||||||
// General Colors
|
// General Colors
|
||||||
$colorAlt1: #ffc700;
|
$colorAlt1: #ffc700;
|
||||||
@ -34,6 +48,7 @@ $colorFormSectionHeader: rgba(#000, 0.2);
|
|||||||
$colorInvokeMenu: #fff;
|
$colorInvokeMenu: #fff;
|
||||||
$colorObjHdrTxt: $colorBodyFg;
|
$colorObjHdrTxt: $colorBodyFg;
|
||||||
$colorObjHdrIc: pullForward($colorObjHdrTxt, 20%);
|
$colorObjHdrIc: pullForward($colorObjHdrTxt, 20%);
|
||||||
|
$colorTick: rgba(white, 0.2);
|
||||||
|
|
||||||
// Menu colors
|
// Menu colors
|
||||||
$colorMenuBg: pullForward($colorBodyBg, 23%);
|
$colorMenuBg: pullForward($colorBodyBg, 23%);
|
||||||
@ -99,16 +114,17 @@ $colorItemBgSelected: $colorKey;
|
|||||||
$colorTabBorder: pullForward($colorBodyBg, 10%);
|
$colorTabBorder: pullForward($colorBodyBg, 10%);
|
||||||
$colorTabBodyBg: darken($colorBodyBg, 10%);
|
$colorTabBodyBg: darken($colorBodyBg, 10%);
|
||||||
$colorTabBodyFg: lighten($colorTabBodyBg, 40%);
|
$colorTabBodyFg: lighten($colorTabBodyBg, 40%);
|
||||||
$colorTabHeaderBg: lighten($colorBodyBg, 10%);
|
$colorTabHeaderBg: rgba(white, 0.1); // lighten($colorBodyBg, 10%);
|
||||||
$colorTabHeaderFg: lighten($colorTabHeaderBg, 40%);
|
$colorTabHeaderFg: $colorBodyFg; //lighten($colorTabHeaderBg, 40%);
|
||||||
$colorTabHeaderBorder: $colorBodyBg;
|
$colorTabHeaderBorder: $colorBodyBg;
|
||||||
|
|
||||||
// Plot
|
// Plot
|
||||||
$colorPlotBg: rgba(black, 0.1);
|
$colorPlotBg: rgba(black, 0.1);
|
||||||
$colorPlotFg: $colorBodyFg;
|
$colorPlotFg: $colorBodyFg;
|
||||||
$colorPlotHash: rgba(white, 0.2);
|
$colorPlotHash: $colorTick;
|
||||||
$stylePlotHash: dashed;
|
$stylePlotHash: dashed;
|
||||||
$colorPlotAreaBorder: $colorInteriorBorder;
|
$colorPlotAreaBorder: $colorInteriorBorder;
|
||||||
|
$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
|
||||||
|
|
||||||
// Tree
|
// Tree
|
||||||
$colorItemTreeIcon: $colorKey;
|
$colorItemTreeIcon: $colorKey;
|
||||||
@ -139,5 +155,12 @@ $colorGrippyInteriorHover: $colorKey;
|
|||||||
// Mobile
|
// Mobile
|
||||||
$colorMobilePaneLeft: darken($colorBodyBg, 5%);
|
$colorMobilePaneLeft: darken($colorBodyBg, 5%);
|
||||||
|
|
||||||
|
// Datetime Picker
|
||||||
|
$colorCalCellHovBg: $colorKey;
|
||||||
|
$colorCalCellHovFg: $colorKeyFg;
|
||||||
|
$colorCalCellSelectedBg: $colorItemTreeSelectedBg;
|
||||||
|
$colorCalCellSelectedFg: $colorItemTreeSelectedFg;
|
||||||
|
$colorCalCellInMonthBg: pushBack($colorMenuBg, 5%);
|
||||||
|
|
||||||
// About Screen
|
// About Screen
|
||||||
$colorAboutLink: #84b3ff;
|
$colorAboutLink: #84b3ff;
|
||||||
@ -1,13 +1,13 @@
|
|||||||
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) {
|
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) {
|
||||||
@include containerBase($bg, $fg);
|
@include containerBase($bg, $fg);
|
||||||
@include background-image(linear-gradient(lighten($bg, 5%), $bg));
|
@include background-image(linear-gradient(lighten($bg, 5%), $bg));
|
||||||
@include boxShdwSubtle();
|
@include boxShdw($shdwBtns);
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin btnSubtle($bg: $colorBodyBg, $bgHov: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
|
@mixin btnSubtle($bg: $colorBodyBg, $bgHov: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
|
||||||
@include containerSubtle($bg, $fg);
|
@include containerSubtle($bg, $fg);
|
||||||
@include btnBase($bg, linear-gradient(lighten($bg, 15%), lighten($bg, 10%)), $fg, $ic);
|
@include btnBase($bg, linear-gradient(lighten($bg, 15%), lighten($bg, 10%)), $fg, $ic);
|
||||||
@include text-shadow(rgba(black, 0.3) 0 1px 1px);
|
@include text-shadow($shdwItemText);
|
||||||
}
|
}
|
||||||
|
|
||||||
@function pullForward($c: $colorBodyBg, $p: 20%) {
|
@function pullForward($c: $colorBodyBg, $p: 20%) {
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -7,12 +7,14 @@ $colorKey: #0099cc;
|
|||||||
$colorKeySelectedBg: $colorKey;
|
$colorKeySelectedBg: $colorKey;
|
||||||
$colorKeyFg: #fff;
|
$colorKeyFg: #fff;
|
||||||
$colorInteriorBorder: rgba($colorBodyFg, 0.2);
|
$colorInteriorBorder: rgba($colorBodyFg, 0.2);
|
||||||
|
$colorA: #999;
|
||||||
|
$colorAHov: $colorKey;
|
||||||
$contrastRatioPercent: 40%;
|
$contrastRatioPercent: 40%;
|
||||||
$basicCr: 4px;
|
$basicCr: 4px;
|
||||||
$controlCr: $basicCr;
|
$controlCr: $basicCr;
|
||||||
$smallCr: 3px;
|
$smallCr: 3px;
|
||||||
|
|
||||||
// Buttons
|
// Buttons and Controls
|
||||||
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
|
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
|
||||||
$colorBtnFg: #fff;
|
$colorBtnFg: #fff;
|
||||||
$colorBtnMajorBg: $colorKey;
|
$colorBtnMajorBg: $colorKey;
|
||||||
@ -20,6 +22,18 @@ $colorBtnMajorFg: $colorKeyFg;
|
|||||||
$colorBtnIcon: #eee;
|
$colorBtnIcon: #eee;
|
||||||
$colorInvokeMenu: #000;
|
$colorInvokeMenu: #000;
|
||||||
$contrastInvokeMenuPercent: 40%;
|
$contrastInvokeMenuPercent: 40%;
|
||||||
|
$shdwBtns: none;
|
||||||
|
$sliderColorBase: $colorKey;
|
||||||
|
$sliderColorRangeHolder: rgba(black, 0.07);
|
||||||
|
$sliderColorRange: rgba($sliderColorBase, 0.2);
|
||||||
|
$sliderColorRangeHov: rgba($sliderColorBase, 0.4);
|
||||||
|
$sliderColorKnob: rgba($sliderColorBase, 0.5);
|
||||||
|
$sliderColorKnobHov: rgba($sliderColorBase, 0.7);
|
||||||
|
$sliderColorRangeValHovBg: $sliderColorRange; //rgba($sliderColorBase, 0.1);
|
||||||
|
$sliderColorRangeValHovFg: $colorBodyFg;
|
||||||
|
$sliderKnobW: nth($ueTimeControlH,2)/2;
|
||||||
|
$timeControllerToiLineColor: $colorBodyFg;
|
||||||
|
$timeControllerToiLineColorHov: #0052b5;
|
||||||
|
|
||||||
// General Colors
|
// General Colors
|
||||||
$colorAlt1: #ff6600;
|
$colorAlt1: #ff6600;
|
||||||
@ -32,6 +46,7 @@ $colorGridLines: rgba(#000, 0.05);
|
|||||||
$colorInvokeMenu: #fff;
|
$colorInvokeMenu: #fff;
|
||||||
$colorObjHdrTxt: $colorBodyFg;
|
$colorObjHdrTxt: $colorBodyFg;
|
||||||
$colorObjHdrIc: pushBack($colorObjHdrTxt, 30%);
|
$colorObjHdrIc: pushBack($colorObjHdrTxt, 30%);
|
||||||
|
$colorTick: rgba(black, 0.2);
|
||||||
|
|
||||||
// Menu colors
|
// Menu colors
|
||||||
$colorMenuBg: pushBack($colorBodyBg, 10%);
|
$colorMenuBg: pushBack($colorBodyBg, 10%);
|
||||||
@ -104,9 +119,10 @@ $colorTabHeaderBorder: $colorBodyBg;
|
|||||||
// Plot
|
// Plot
|
||||||
$colorPlotBg: rgba(black, 0.05);
|
$colorPlotBg: rgba(black, 0.05);
|
||||||
$colorPlotFg: $colorBodyFg;
|
$colorPlotFg: $colorBodyFg;
|
||||||
$colorPlotHash: rgba(black, 0.2);
|
$colorPlotHash: $colorTick;
|
||||||
$stylePlotHash: dashed;
|
$stylePlotHash: dashed;
|
||||||
$colorPlotAreaBorder: $colorInteriorBorder;
|
$colorPlotAreaBorder: $colorInteriorBorder;
|
||||||
|
$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
|
||||||
|
|
||||||
// Tree
|
// Tree
|
||||||
$colorItemTreeIcon: $colorKey;
|
$colorItemTreeIcon: $colorKey;
|
||||||
@ -137,5 +153,12 @@ $colorGrippyInteriorHover: $colorBodyBg;
|
|||||||
// Mobile
|
// Mobile
|
||||||
$colorMobilePaneLeft: darken($colorBodyBg, 2%);
|
$colorMobilePaneLeft: darken($colorBodyBg, 2%);
|
||||||
|
|
||||||
|
// Datetime Picker, Calendar
|
||||||
|
$colorCalCellHovBg: $colorKey;
|
||||||
|
$colorCalCellHovFg: $colorKeyFg;
|
||||||
|
$colorCalCellSelectedBg: $colorItemTreeSelectedBg;
|
||||||
|
$colorCalCellSelectedFg: $colorItemTreeSelectedFg;
|
||||||
|
$colorCalCellInMonthBg: pullForward($colorMenuBg, 5%);
|
||||||
|
|
||||||
// About Screen
|
// About Screen
|
||||||
$colorAboutLink: #84b3ff;
|
$colorAboutLink: #84b3ff;
|
||||||
@ -1,5 +1,6 @@
|
|||||||
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
|
||||||
@include containerBase($bg, $fg);
|
@include containerBase($bg, $fg);
|
||||||
|
@include boxShdw($shdwBtns);
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin btnSubtle($bg: $colorBtnBg, $bgHov: none, $fg: $colorBtnFg, $ic: $colorBtnIcon) {
|
@mixin btnSubtle($bg: $colorBtnBg, $bgHov: none, $fg: $colorBtnFg, $ic: $colorBtnIcon) {
|
||||||
|
|||||||
@ -28,13 +28,8 @@ define(
|
|||||||
|
|
||||||
var CONDUCTOR_HEIGHT = "100px",
|
var CONDUCTOR_HEIGHT = "100px",
|
||||||
TEMPLATE = [
|
TEMPLATE = [
|
||||||
'<div style=',
|
|
||||||
'"position: absolute; bottom: 0; width: 100%; ',
|
|
||||||
'overflow: hidden; ',
|
|
||||||
'height: ' + CONDUCTOR_HEIGHT + '">',
|
|
||||||
"<mct-include key=\"'time-controller'\" ng-model='conductor'>",
|
"<mct-include key=\"'time-controller'\" ng-model='conductor'>",
|
||||||
"</mct-include>",
|
"</mct-include>"
|
||||||
'</div>'
|
|
||||||
].join(''),
|
].join(''),
|
||||||
THROTTLE_MS = 200,
|
THROTTLE_MS = 200,
|
||||||
GLOBAL_SHOWING = false;
|
GLOBAL_SHOWING = false;
|
||||||
@ -141,8 +136,7 @@ define(
|
|||||||
this.conductorElement =
|
this.conductorElement =
|
||||||
this.$compile(TEMPLATE)(this.conductorScope());
|
this.$compile(TEMPLATE)(this.conductorScope());
|
||||||
this.element.after(this.conductorElement[0]);
|
this.element.after(this.conductorElement[0]);
|
||||||
this.element.addClass('abs');
|
this.element.addClass('l-controls-visible l-time-controller-visible');
|
||||||
this.element.css('bottom', CONDUCTOR_HEIGHT);
|
|
||||||
GLOBAL_SHOWING = true;
|
GLOBAL_SHOWING = true;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@ -19,7 +19,7 @@
|
|||||||
this source code distribution or the Licensing information page available
|
this source code distribution or the Licensing information page available
|
||||||
at runtime from the About dialog for additional information.
|
at runtime from the About dialog for additional information.
|
||||||
-->
|
-->
|
||||||
<div style="width: 100%; height: 100%;"
|
<div class="l-layout"
|
||||||
ng-controller="LayoutController as controller">
|
ng-controller="LayoutController as controller">
|
||||||
|
|
||||||
<div class='frame child-frame panel abs'
|
<div class='frame child-frame panel abs'
|
||||||
|
|||||||
@ -19,7 +19,7 @@
|
|||||||
this source code distribution or the Licensing information page available
|
this source code distribution or the Licensing information page available
|
||||||
at runtime from the About dialog for additional information.
|
at runtime from the About dialog for additional information.
|
||||||
-->
|
-->
|
||||||
<div class="abs l-iframe">
|
<div class="l-iframe abs">
|
||||||
<iframe ng-controller="EmbeddedPageController as ctl"
|
<iframe ng-controller="EmbeddedPageController as ctl"
|
||||||
ng-src="{{ctl.trust(model.url)}}">
|
ng-src="{{ctl.trust(model.url)}}">
|
||||||
</iframe>
|
</iframe>
|
||||||
|
|||||||
@ -119,7 +119,7 @@
|
|||||||
<span class="ui-symbol icon">I</span>
|
<span class="ui-symbol icon">I</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<div class="menu-element s-menu menus-to-left"
|
<div class="menu-element s-menu-btn menus-to-left"
|
||||||
ng-if="plot.getModeOptions().length > 1"
|
ng-if="plot.getModeOptions().length > 1"
|
||||||
ng-controller="ClickAwayController as toggle">
|
ng-controller="ClickAwayController as toggle">
|
||||||
|
|
||||||
|
|||||||
@ -20,7 +20,7 @@
|
|||||||
at runtime from the About dialog for additional information.
|
at runtime from the About dialog for additional information.
|
||||||
-->
|
-->
|
||||||
<div
|
<div
|
||||||
class="t-btn l-btn s-btn s-icon-btn s-menu menu-element t-color-palette"
|
class="t-btn l-btn s-btn s-icon-btn s-menu-btn menu-element t-color-palette"
|
||||||
ng-controller="ClickAwayController as toggle"
|
ng-controller="ClickAwayController as toggle"
|
||||||
>
|
>
|
||||||
|
|
||||||
|
|||||||
@ -19,7 +19,7 @@
|
|||||||
this source code distribution or the Licensing information page available
|
this source code distribution or the Licensing information page available
|
||||||
at runtime from the About dialog for additional information.
|
at runtime from the About dialog for additional information.
|
||||||
-->
|
-->
|
||||||
<div class="s-menu menu-element"
|
<div class="s-menu-btn menu-element"
|
||||||
ng-controller="ClickAwayController as toggle">
|
ng-controller="ClickAwayController as toggle">
|
||||||
|
|
||||||
<span class="l-click-area" ng-click="toggle.toggle()"></span>
|
<span class="l-click-area" ng-click="toggle.toggle()"></span>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user