mirror of
https://github.com/nasa/openmct.git
synced 2025-02-20 09:26:45 +00:00
Topic themes (#2187)
* Bringing over in-progress changes from topic-core-css - Adds _espresso-constants.scss; - Cleanup colors and naming; - Remove conflict res leftover 'domainObject' in mct-tree.vue; - Still WIP! * Various - Remove pushBack / pullForward functions; - Fix c-input-inline, remove bg until hover; - TODO: input bg colors - Increased margin in main-pane; * Themeing WIP - Conductor markup: convert to buttons for accessibility; - Conductor styles consolidated and changed for better theme support; * Themeing WIP; significant rewrite of pane headers - Pane headers restructured for better semantics and clarity; - Espresso design refined and tightened; - Grid Vue changes for better themeing support; - TODO: fix mobile version, collapse icon is whack; * Restored Number-type input styling for correct positioning of spinner button; * Themeing mods for click-icon styles * Bring Snow theme into style parity with Espresso - TODO: refine Snow colors; * Mobile styling fixed - Mobile menu icon significant fixes; - Hover only applied to desktop; - Reorg of mixins; * Bring Snow theme constants into parity with Espresso - Refined Snow styles; - Fixed missing scroll and padding in tree; - Pane collapse button now uses proper color; - Item Grid view refinement; - Cleaned up code; * Color fixes - Super-menu description; - Conductor time buttons hover; - Datepicker "in-month" items color; - Espresso colorKeyFilter brightened;
This commit is contained in:
Charles Hacskaylo
Pete Richards
parent
814b404614
commit
5f9f3cd8e8
@ -14,9 +14,9 @@
|
||||
:title="item.model.name">{{item.model.name}}</div>
|
||||
<div class="c-grid-item__metadata"
|
||||
:title="item.type.name">
|
||||
<span>{{item.type.name}}</span>
|
||||
<span v-if="item.model.composition !== undefined">
|
||||
- {{item.model.composition.length}} item<span v-if="item.model.composition.length !== 1">s</span>
|
||||
<span class="c-grid-item__metadata__type">{{item.type.name}}</span>
|
||||
<span class="c-grid-item__metadata__item-count" v-if="item.model.composition !== undefined">
|
||||
{{item.model.composition.length}} item<span v-if="item.model.composition.length !== 1">s</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -45,8 +45,8 @@
|
||||
body.desktop & {
|
||||
flex-flow: row wrap;
|
||||
&__item {
|
||||
height: $ueBrowseGridItemLg;
|
||||
width: $ueBrowseGridItemLg;
|
||||
height: $gridItemDesk;
|
||||
width: $gridItemDesk;
|
||||
margin: 0 $interiorMargin $interiorMargin 0;
|
||||
}
|
||||
}
|
||||
@ -62,8 +62,8 @@
|
||||
|
||||
&__type-icon {
|
||||
filter: $colorKeyFilter;
|
||||
flex: 0 0 32px;
|
||||
font-size: 2em; // Drives the size of the alias indicator when present
|
||||
flex: 0 0 $gridItemMobile;
|
||||
font-size: floor($gridItemMobile / 2);
|
||||
margin-right: $interiorMarginLg;
|
||||
}
|
||||
|
||||
@ -84,13 +84,22 @@
|
||||
&__name {
|
||||
@include ellipsize();
|
||||
color: $colorItemFg;
|
||||
font-size: 1.3em;
|
||||
font-size: 1.2em;
|
||||
font-weight: 400;
|
||||
margin-bottom: $interiorMarginSm;
|
||||
}
|
||||
|
||||
&__metadata {
|
||||
color: $colorItemFgDetails;
|
||||
font-size: 0.9em;
|
||||
|
||||
body.mobile & {
|
||||
[class*='__item-count'] {
|
||||
&:before {
|
||||
content: ' - ';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__controls {
|
||||
@ -136,8 +145,8 @@
|
||||
|
||||
&__type-icon {
|
||||
flex: 1 1 auto;
|
||||
font-size: 6em; // Drives the size of the alias indicator when present
|
||||
margin: $interiorMargin 22.5%;
|
||||
font-size: floor($gridItemDesk / 3);
|
||||
margin: $interiorMargin 22.5% $interiorMargin * 3 22.5%;
|
||||
order: 2;
|
||||
transform: scale(0.9);
|
||||
transform-origin: center;
|
||||
@ -149,6 +158,20 @@
|
||||
justify-content: flex-end;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
&__metadata {
|
||||
display: flex;
|
||||
|
||||
&__type {
|
||||
flex: 1 1 auto;
|
||||
@include ellipsize();
|
||||
}
|
||||
|
||||
&__item-count {
|
||||
opacity: 0.7;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -8,8 +8,7 @@
|
||||
<span>{{formatTime(entry.createdOn, 'HH:mm:ss')}}</span>
|
||||
</div>
|
||||
<div class="c-ne__content">
|
||||
<!-- TODO: fix styling for c-input-inline when SCSS is merged and remove s-input-inline class here -->
|
||||
<div class="c-ne__text c-input-inline s-input-inline"
|
||||
<div class="c-ne__text c-input-inline"
|
||||
contenteditable="true"
|
||||
ref="contenteditable"
|
||||
v-on:blur="textBlur($event, entry.id)"
|
||||
|
||||
@ -220,6 +220,16 @@
|
||||
}
|
||||
|
||||
.is-realtime-mode {
|
||||
button {
|
||||
@include themedButton($colorTimeBg);
|
||||
color: $colorTimeFg;
|
||||
|
||||
&:hover {
|
||||
background: $colorTimeHov !important;
|
||||
color: $colorTimeFg !important;
|
||||
}
|
||||
}
|
||||
|
||||
.c-conductor-input {
|
||||
&:before {
|
||||
color: $colorTime;
|
||||
|
||||
@ -21,10 +21,10 @@
|
||||
*****************************************************************************/
|
||||
<template>
|
||||
<div class="c-ctrl-wrapper c-ctrl-wrapper--menus-up">
|
||||
<div class="c-button--menu c-mode-button"
|
||||
<button class="c-button--menu c-mode-button"
|
||||
@click="toggleMenu($event)">
|
||||
<span class="c-button__label">{{selectedMode.name}}</span>
|
||||
</div>
|
||||
</button>
|
||||
<div class="c-menu c-super-menu c-conductor__mode-menu"
|
||||
v-if="showMenu">
|
||||
<div class="c-super-menu__menu">
|
||||
@ -66,16 +66,6 @@
|
||||
min-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.is-realtime-mode {
|
||||
.c-mode-button {
|
||||
background: $colorTimeBg;
|
||||
|
||||
&:hover {
|
||||
background: $colorTimeHov;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
@ -22,11 +22,11 @@
|
||||
<template>
|
||||
<div class="c-ctrl-wrapper c-ctrl-wrapper--menus-up"
|
||||
v-if="selectedTimeSystem.name">
|
||||
<div class="c-button--menu c-time-system-button"
|
||||
<button class="c-button--menu c-time-system-button"
|
||||
:class="selectedTimeSystem.cssClass"
|
||||
@click="toggleMenu($event)">
|
||||
<span class="c-button__label">{{selectedTimeSystem.name}}</span>
|
||||
</div>
|
||||
</button>
|
||||
<div class="c-menu" v-if="showMenu">
|
||||
<ul>
|
||||
<li @click="setTimeSystemFromView(timeSystem)"
|
||||
@ -40,20 +40,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~styles/sass-base";
|
||||
|
||||
.is-realtime-mode {
|
||||
.c-time-system-button {
|
||||
background: $colorTimeBg;
|
||||
|
||||
&:hover {
|
||||
background: $colorTimeHov;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
inject: ['openmct', 'configuration'],
|
||||
|
||||
@ -108,7 +108,7 @@
|
||||
grid-gap: 1px;
|
||||
height: 100%;
|
||||
|
||||
$mutedOpacity: 0.7;
|
||||
$mutedOpacity: 0.5;
|
||||
|
||||
ul {
|
||||
display: contents;
|
||||
@ -127,7 +127,7 @@
|
||||
padding: $interiorMargin;
|
||||
|
||||
&.is-in-month {
|
||||
background: rgba($colorBodyFg, 0.1);
|
||||
background: $colorMenuElementHilite;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
330
src/styles-new/_constants-espresso.scss
Normal file
330
src/styles-new/_constants-espresso.scss
Normal file
@ -0,0 +1,330 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
/************************************************** ESPRESSO THEME CONSTANTS */
|
||||
|
||||
@import "constants";
|
||||
|
||||
// Functions
|
||||
@function buttonBg($c: $colorBtnBg) {
|
||||
@return linear-gradient(lighten($c, 5%), $c);
|
||||
}
|
||||
|
||||
// Constants
|
||||
$fontBaseSize: 12px;
|
||||
$smallCr: 2px;
|
||||
$controlCr: 3px;
|
||||
$basicCr: 4px;
|
||||
|
||||
// Base colors
|
||||
$colorBodyBg: #393939;
|
||||
$colorBodyFg: #aaa;
|
||||
$colorGenBg: #222;
|
||||
$colorHeadBg: #262626;
|
||||
$colorHeadFg: $colorBodyFg;
|
||||
$colorStatusBarBg: $colorHeadBg;
|
||||
$colorStatusBarFg: $colorBodyFg;
|
||||
$colorStatusBarFgHov: #aaa;
|
||||
$colorKey: #0099cc;
|
||||
$colorKeyFg: #fff;
|
||||
$colorKeyHov: #00c0f6;
|
||||
$colorKeyFilter: brightness(1) sepia(1) hue-rotate(145deg) saturate(6);
|
||||
$colorKeyFilterHov: brightness(1) sepia(1) hue-rotate(145deg) saturate(7);
|
||||
$colorInteriorBorder: rgba($colorBodyFg, 0.2);
|
||||
$colorA: #ccc;
|
||||
$colorAHov: #fff;
|
||||
|
||||
// Layout
|
||||
$shellMainPad: 4px 0;
|
||||
$shellPanePad: $interiorMargin, 7px; // TODO: Sync this with Snow theme
|
||||
|
||||
// Status colors, mainly used for messaging and item ancillary symbols
|
||||
$colorStatusFg: #999;
|
||||
$colorStatusDefault: #ccc;
|
||||
$colorStatusInfo: #60ba7b;
|
||||
$colorStatusAlert: #ffb66c;
|
||||
$colorStatusError: #da0004;
|
||||
$colorStatusBtnBg: #666;
|
||||
|
||||
// States
|
||||
$colorPausedBg: #ff9900;
|
||||
$colorPausedFg: #fff;
|
||||
$colorOk: #33cc33;
|
||||
|
||||
// Base variations
|
||||
$colorBodyBgSubtle: lighten($colorBodyBg, 5%);
|
||||
$colorBodyBgSubtleHov: darken($colorKey, 50%);
|
||||
$colorKeySubtle: darken($colorKey, 50%);
|
||||
|
||||
// Time Colors
|
||||
$colorTime: #618cff;
|
||||
$colorTimeBg: $colorTime;
|
||||
$colorTimeFg: lighten($colorTimeBg, 30%);
|
||||
$colorTimeHov: lighten($colorTime, 10%);
|
||||
$colorTimeSubtle: darken($colorTime, 20%);
|
||||
$colorTOI: $colorBodyFg; // was $timeControllerToiLineColor
|
||||
$colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
|
||||
|
||||
// Edit Colors
|
||||
$editColor: #00c7c3;
|
||||
$editColorFg: $colorBodyFg;
|
||||
$browseBorderSelectableHov: 1px dotted rgba($colorBodyFg, 0.2);
|
||||
$browseShdwSelectableHov: rgba($colorBodyFg, 0.2) 0 0 3px;
|
||||
$browseBorderSelected: 1px solid rgba($colorBodyFg, 0.6);
|
||||
$editBorderSelectable: 1px dotted rgba($editColor, 1);
|
||||
$editBorderSelectableHov: 1px dashed rgba($editColor, 1);
|
||||
$editBorderSelected: 1px solid $editColor;
|
||||
$editBorderDrilledIn: 1px dashed #ff4d9a;
|
||||
$colorGridLines: rgba($editColor, 0.2);
|
||||
|
||||
// UI elements
|
||||
$colorIconAlias: #4af6f3;
|
||||
$colorIconAliasForKeyFilter: #aaa;
|
||||
$colorProgressBarOuter: rgba(#000, 0.1);
|
||||
$colorProgressBarAmt: #0a0;
|
||||
|
||||
// Buttons and Controls
|
||||
$colorBtnBg: lighten($colorBodyBg, 10%); // !
|
||||
$colorBtnBgHov: lighten($colorBtnBg, 10%); // !
|
||||
$colorBtnFg: lighten($colorBodyFg, 10%); // !
|
||||
$colorBtnFgHov: $colorBtnFg;
|
||||
$colorBtnMajorBg: $colorKey;
|
||||
$colorBtnMajorBgHov: $colorKeyHov;
|
||||
$colorBtnMajorFg: $colorKeyFg;
|
||||
$colorBtnMajorFgHov: darken($colorBtnMajorFg, 10%);
|
||||
$colorBtnCautionBg: #f16f6f;
|
||||
$colorBtnCautionBgHov: #f1504e;
|
||||
$colorBtnCautionFg: $colorBtnFg;
|
||||
$colorClickIcon: $colorKey;
|
||||
$colorClickIconBgHov: rgba($colorKey, 0.6);
|
||||
$colorClickIconFgHov: $colorKeyHov;
|
||||
|
||||
// Menus
|
||||
$colorMenuBg: lighten($colorBodyBg, 20%);
|
||||
$colorMenuFg: lighten($colorBodyFg, 30%);
|
||||
$colorMenuIc: lighten($colorKey, 15%);
|
||||
$colorMenuHovBg: $colorMenuIc;
|
||||
$colorMenuHovFg: lighten($colorMenuFg, 10%);
|
||||
$colorMenuHovIc: $colorMenuHovFg;
|
||||
$colorMenuElementHilite: lighten($colorMenuBg, 10%);
|
||||
$shdwMenu: rgba(black, 0.5) 0 1px 5px;
|
||||
$shdwMenuText: none;
|
||||
$menuItemPad: $interiorMargin, floor($interiorMargin * 1.25);
|
||||
|
||||
// Palettes and Swatches
|
||||
$paletteItemBorderOuterColorSelected: black;
|
||||
$paletteItemBorderInnerColorSelected: white;
|
||||
$paletteItemBorderInnerColor: rgba($paletteItemBorderOuterColorSelected, 0.3);
|
||||
|
||||
// Form colors
|
||||
$colorCheck: $colorKey;
|
||||
$colorFormRequired: $colorKey;
|
||||
$colorFormValid: $colorOk;
|
||||
$colorFormError: #990000;
|
||||
$colorFormInvalid: #ff2200;
|
||||
$colorFormFieldErrorBg: $colorFormError;
|
||||
$colorFormFieldErrorFg: rgba(#fff, 0.6);
|
||||
$colorFormLines: rgba(#000, 0.1);
|
||||
$colorFormSectionHeader: rgba(#000, 0.05);
|
||||
$colorInputBg: rgba(black, 0.2);
|
||||
$colorInputFg: $colorBodyFg;
|
||||
$colorInputPlaceholder: darken($colorBodyFg, 20%);
|
||||
$colorFormText: darken($colorBodyFg, 10%);
|
||||
$colorInputIcon: darken($colorBodyFg, 25%);
|
||||
$colorFieldHint: lighten($colorBodyFg, 40%);
|
||||
$shdwInput: inset rgba(black, 0.4) 0 0 1px;
|
||||
$shdwInputHov: inset rgba(black, 0.7) 0 0 1px;
|
||||
$shdwInputFoc: inset rgba(black, 0.7) 0 0 3px;
|
||||
|
||||
// Inspector
|
||||
$colorInspectorBg: lighten($colorBodyBg, 5%);
|
||||
$colorInspectorFg: $colorBodyFg;
|
||||
$colorInspectorPropName: darken($colorBodyFg, 20%);
|
||||
$colorInspectorPropVal: lighten($colorInspectorFg, 15%);
|
||||
$colorInspectorSectionHeaderBg: lighten($colorInspectorBg, 5%);
|
||||
$colorInspectorSectionHeaderFg: lighten($colorInspectorBg, 40%);
|
||||
|
||||
// Overlay
|
||||
$overlayColorBg: $colorMenuBg;
|
||||
$overlayColorFg: $colorMenuFg;
|
||||
$overlayButtonColorBg: lighten($overlayColorBg, 20%);
|
||||
$overlayButtonColorFg: #fff;
|
||||
$overlayCr: $interiorMarginLg;
|
||||
|
||||
// Indicator colors
|
||||
$colorIndicatorAvailable: $colorKey;
|
||||
$colorIndicatorDisabled: #444;
|
||||
$colorIndicatorOn: $colorOk;
|
||||
$colorIndicatorOff: #666;
|
||||
|
||||
// Limits and staleness colors//
|
||||
$colorTelemFresh: lighten($colorBodyFg, 20%);
|
||||
$colorTelemStale: darken($colorBodyFg, 20%);
|
||||
$styleTelemStale: italic;
|
||||
$colorLimitYellowBg: rgba(#ffaa00, 0.3);
|
||||
$colorLimitYellowIc: #ffaa00;
|
||||
$colorLimitRedBg: rgba(red, 0.3);
|
||||
$colorLimitRedIc: red;
|
||||
|
||||
// Bubble colors
|
||||
$colorInfoBubbleBg: $colorMenuBg;
|
||||
$colorInfoBubbleFg: #666;
|
||||
|
||||
// Items
|
||||
$colorItemBg: buttonBg($colorBtnBg);
|
||||
$colorItemBgHov: buttonBg(lighten($colorBtnBg, 5%));
|
||||
$colorListItemBg: transparent;
|
||||
$colorListItemBgHov: rgba($colorKey, 0.1);
|
||||
$colorItemFg: $colorBtnFg;
|
||||
$colorItemFgDetails: darken($colorItemFg, 20%);
|
||||
$shdwItemText: none;
|
||||
|
||||
// Tabular
|
||||
$colorTabBorder: lighten($colorBodyBg, 10%);
|
||||
$colorTabBodyBg: $colorBodyBg;
|
||||
$colorTabBodyFg: lighten($colorBodyFg, 20%);
|
||||
$colorTabHeaderBg: lighten($colorBodyBg, 10%);
|
||||
$colorTabHeaderFg: lighten($colorBodyFg, 20%);
|
||||
$colorTabHeaderBorder: $colorBodyBg;
|
||||
|
||||
// Plot
|
||||
$colorPlotBg: rgba(black, 0.05);
|
||||
$colorPlotFg: $colorBodyFg;
|
||||
$colorPlotHash: black;
|
||||
$opacityPlotHash: 0.2;
|
||||
$stylePlotHash: dashed;
|
||||
$colorPlotAreaBorder: $colorInteriorBorder;
|
||||
$colorPlotLabelFg: darken($colorPlotFg, 20%);
|
||||
$legendCollapsedNameMaxW: 50%;
|
||||
$legendHoverValueBg: rgba($colorBodyFg, 0.2);
|
||||
|
||||
// Tree
|
||||
$colorTreeBg: transparent;
|
||||
$colorItemTreeHoverBg: lighten($colorBodyBg, 10%);
|
||||
$colorItemTreeHoverFg: lighten($colorBodyFg, 10%);
|
||||
$colorItemTreeIcon: $colorKey; // Used
|
||||
$colorItemTreeIconHover: $colorItemTreeIcon; // Used
|
||||
$colorItemTreeFg: $colorBodyFg;
|
||||
$colorItemTreeSelectedBg: darken($colorKey, 15%);
|
||||
$colorItemTreeSelectedFg: $colorBodyBg;
|
||||
$colorItemTreeEditingBg: $editColor;
|
||||
$colorItemTreeEditingFg: $editColorFg;
|
||||
$colorItemTreeVC: $colorBodyFg;
|
||||
$colorItemTreeVCHover: $colorKey;
|
||||
$shdwItemTreeIcon: none;
|
||||
|
||||
// Images
|
||||
$colorThumbHoverBg: $colorItemTreeHoverBg;
|
||||
|
||||
// Scrollbar
|
||||
$scrollbarTrackSize: 7px;
|
||||
$scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px;
|
||||
$scrollbarTrackColorBg: rgba(#000, 0.2);
|
||||
$scrollbarThumbColor: darken($colorBodyBg, 50%);
|
||||
$scrollbarThumbColorHov: $colorKey;
|
||||
$scrollbarThumbColorMenu: lighten($colorMenuBg, 10%);
|
||||
$scrollbarThumbColorMenuHov: lighten($scrollbarThumbColorMenu, 2%);
|
||||
|
||||
// Splitter
|
||||
$splitterHandleD: 2px;
|
||||
$splitterHandleHitMargin: 4px;
|
||||
$colorSplitterBaseBg: $colorBodyBg;
|
||||
$colorSplitterBg: lighten($colorSplitterBaseBg, 10%);
|
||||
$colorSplitterFg: $colorBodyBg;
|
||||
$colorSplitterHover: $colorKey;
|
||||
$colorSplitterActive: $colorKey;
|
||||
$splitterBtnD: (16px, 35px); // height, width
|
||||
$splitterBtnColorBg: $colorBtnBg;
|
||||
$splitterBtnColorFg: #999;
|
||||
$splitterBtnLabelColorFg: #666;
|
||||
$splitterCollapsedBtnColorBg: #222;
|
||||
$splitterCollapsedBtnColorFg: #666;
|
||||
$splitterCollapsedBtnColorBgHov: $colorKey;
|
||||
$splitterCollapsedBtnColorFgHov: $colorKeyFg;
|
||||
|
||||
// Mobile
|
||||
$colorMobilePaneLeft: darken($colorBodyBg, 2%);
|
||||
$colorMobilePaneLeftTreeItemBg: rgba($colorBodyFg, 0.1);
|
||||
$colorMobilePaneLeftTreeItemFg: $colorItemTreeFg;
|
||||
$colorMobileSelectListTreeItemBg: rgba(#000, 0.05);
|
||||
|
||||
// About Screen
|
||||
$colorAboutLink: $colorKeySubtle;
|
||||
|
||||
// Loading
|
||||
$colorLoadingFg: #776ba2;
|
||||
$colorLoadingBg: rgba($colorLoadingFg, 0.1);
|
||||
|
||||
// Transitions
|
||||
$transIn: all 50ms ease-in-out;
|
||||
$transOut: all 250ms ease-in-out;
|
||||
$transInBounce: all 200ms cubic-bezier(.47,.01,.25,1.5);
|
||||
$transInBounceBig: all 300ms cubic-bezier(.2,1.6,.6,3);
|
||||
|
||||
// Discrete items, like Notebook entries, Widget rules
|
||||
$createBtnTextTransform: uppercase;
|
||||
|
||||
@mixin discreteItem() {
|
||||
background: rgba($colorBodyFg,0.1);
|
||||
border: none;
|
||||
border-radius: $controlCr;
|
||||
|
||||
.c-input-inline:hover {
|
||||
background: $colorBodyBg;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin discreteItemInnerElem() {
|
||||
border: 1px solid rgba(#fff, 0.1);
|
||||
border-radius: $controlCr;
|
||||
}
|
||||
|
||||
@mixin themedButton($c: $colorBtnBg) {
|
||||
background: linear-gradient(lighten($c, 5%), $c);
|
||||
box-shadow: rgba(black, 0.5) 0 0 2px;
|
||||
}
|
||||
|
||||
/**************************************************** NOT USED, LEAVE FOR NOW */
|
||||
// Slider controls, not in use
|
||||
/*
|
||||
$sliderColorBase: $colorKey;
|
||||
$sliderColorRangeHolder: rgba(black, 0.07);
|
||||
$sliderColorRange: rgba($sliderColorBase, 0.2);
|
||||
$sliderColorRangeHov: rgba($sliderColorBase, 0.4);
|
||||
$sliderColorKnob: darken($sliderColorBase, 20%);
|
||||
$sliderColorKnobHov: rgba($sliderColorBase, 0.7);
|
||||
$sliderColorRangeValHovBg: $sliderColorRange;
|
||||
$sliderColorRangeValHovFg: $colorBodyFg;
|
||||
$sliderKnobW: 15px;
|
||||
$sliderKnobR: 2px;
|
||||
*/
|
||||
|
||||
// Content status
|
||||
/*
|
||||
$colorAlert: #ff3c00;
|
||||
$colorWarningHi: #990000;
|
||||
$colorWarningLo: #ff9900;
|
||||
$colorDiagnostic: #a4b442;
|
||||
$colorCommand: #3693bd;
|
||||
$colorInfo: #2294a2;
|
||||
$colorOk: #33cc33;
|
||||
*/
|
||||
@ -20,115 +20,73 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
/****************************************************** SNOW THEME CONSTANTS */
|
||||
|
||||
@import "constants";
|
||||
|
||||
// Functions
|
||||
@function pullForward($c: $colorBodyBg, $p: 20%) {
|
||||
// For dark interfaces, lighter things come forward - opposite for light interfaces
|
||||
@return darken($c, $p);
|
||||
@function buttonBg($c: $colorBtnBg) {
|
||||
@return $c;
|
||||
}
|
||||
|
||||
@function pushBack($c: $colorBodyBg, $p: 20%) {
|
||||
// For dark interfaces, darker things move back - opposite for light interfaces
|
||||
@return lighten($c, $p);
|
||||
}
|
||||
|
||||
// Global
|
||||
// Constants
|
||||
$fontBaseSize: 12px;
|
||||
$smallCr: 2px;
|
||||
$controlCr: 3px;
|
||||
$basicCr: 4px;
|
||||
|
||||
// Base colors
|
||||
$colorBodyBg: #fcfcfc;
|
||||
$colorBodyFg: #666;
|
||||
$colorGenBg: #fff;
|
||||
$colorHeadBg: #eee;
|
||||
$colorHeadFg: $colorBodyFg;
|
||||
$colorStatusBarBg: #000;
|
||||
$colorStatusBarFg: #999;
|
||||
$colorStatusBarFgHov: #aaa;
|
||||
$colorKey: #0099cc;
|
||||
$colorKeyFilter: brightness(0.9) sepia(1) hue-rotate(145deg) saturate(6);
|
||||
$colorKeyFilterHov: brightness(1) sepia(1) hue-rotate(145deg) saturate(7);
|
||||
$colorKeySelectedBg: $colorKey;
|
||||
$colorKeyFg: #fff;
|
||||
$colorKeyHov: #00c0f6;
|
||||
$colorEditAreaBg: #eafaff; // Deprecated, use $editColor instead
|
||||
$colorEditAreaFg: #4bb1c7; // Deprecated, use $editColor instead
|
||||
$colorKeyFilter: brightness(0.9) sepia(1) hue-rotate(145deg) saturate(6);
|
||||
$colorKeyFilterHov: brightness(1) sepia(1) hue-rotate(145deg) saturate(7);
|
||||
$colorInteriorBorder: rgba($colorBodyFg, 0.2);
|
||||
$colorA: #999;
|
||||
$colorAHov: $colorKey;
|
||||
$contrastRatioPercent: 40%;
|
||||
$hoverRatioPercent: 10%;
|
||||
$basicCr: 4px;
|
||||
$controlCr: 3px;
|
||||
$smallCr: 2px;
|
||||
$overlayCr: 11px;
|
||||
$shdwTextSubtle: rgba(black, 0.2) 0 1px 2px;
|
||||
|
||||
// Variations
|
||||
$colorBodyBgSubtle: pullForward($colorBodyBg, 5%);
|
||||
$colorBodyBgSubtleHov: pushBack($colorKey, 50%);
|
||||
$colorKeySubtle: pushBack($colorKey, 50%);
|
||||
// Layout
|
||||
$shellMainPad: 4px 0;
|
||||
$shellPanePad: 0 7px;
|
||||
|
||||
// Status colors, mainly used for messaging and item ancillary symbols
|
||||
$colorStatusFg: #999;
|
||||
$colorStatusDefault: #ccc;
|
||||
$colorStatusInfo: #60ba7b;
|
||||
$colorStatusAlert: #ffb66c;
|
||||
$colorStatusError: #da0004;
|
||||
$colorStatusBtnBg: #666;
|
||||
|
||||
// States
|
||||
$colorPausedBg: #ff9900;
|
||||
$colorPausedFg: #fff;
|
||||
$colorOk: #33cc33;
|
||||
|
||||
// Base variations
|
||||
$colorBodyBgSubtle: darken($colorBodyBg, 5%);
|
||||
$colorBodyBgSubtleHov: lighten($colorKey, 50%);
|
||||
$colorKeySubtle: lighten($colorKey, 50%);
|
||||
|
||||
// Time Colors
|
||||
$colorTime: #618cff;
|
||||
$colorTimeBg: $colorTime;
|
||||
$colorTimeFg: $colorBodyBg;
|
||||
$colorTimeHov: pushBack($colorTime, 5%);
|
||||
$colorTimeSubtle: pushBack($colorTime, 20%);
|
||||
|
||||
// Buttons and Controls
|
||||
$btnPad: $interiorMargin, $interiorMargin * 1.25;
|
||||
$colorBtnBg: #aaaaaa;
|
||||
$colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
|
||||
$colorBtnFg: #fff;
|
||||
$colorBtnFgHov: $colorBtnFg;
|
||||
$colorBtnIcon: #eee;
|
||||
$colorBtnIconHov: $colorBtnFgHov;
|
||||
$colorBtnMajorBg: $colorKey;
|
||||
$colorBtnMajorBgHov: $colorKeyHov;
|
||||
$colorBtnMajorFg: $colorKeyFg;
|
||||
$colorBtnMajorFgHov: pushBack($colorBtnMajorFg, $hoverRatioPercent);
|
||||
$colorBtnCautionBg: #f16f6f;
|
||||
$colorBtnCautionBgHov: #f1504e;
|
||||
$colorBtnCautionFg: $colorBtnFg;
|
||||
$colorClickIcon: $colorKey;
|
||||
$colorClickIconHov: $colorKeyHov;
|
||||
$colorToggleIcon: rgba($colorClickIcon, 0.5);
|
||||
$colorToggleIconActive: $colorKey;
|
||||
$colorToggleIconHov: rgba($colorToggleIconActive, 0.5);
|
||||
$colorInvokeMenu: #000;
|
||||
$contrastInvokeMenuPercent: 40%;
|
||||
$shdwBtns: none;
|
||||
$shdwBtnsOverlay: none;
|
||||
$sliderColorBase: $colorKey;
|
||||
$sliderColorRangeHolder: rgba(black, 0.07);
|
||||
$sliderColorRange: rgba($sliderColorBase, 0.2);
|
||||
$sliderColorRangeHov: rgba($sliderColorBase, 0.4);
|
||||
$sliderColorKnob: pushBack($sliderColorBase, 20%);
|
||||
$sliderColorKnobHov: rgba($sliderColorBase, 0.7);
|
||||
$sliderColorRangeValHovBg: $sliderColorRange;
|
||||
$sliderColorRangeValHovFg: $colorBodyFg;
|
||||
$sliderKnobW: 15px;
|
||||
$sliderKnobR: 2px;
|
||||
$timeControllerToiLineColor: $colorBodyFg;
|
||||
$timeControllerToiLineColorHov: $colorTime;
|
||||
$colorTransLucBg: #666; // Used as a visual blocking element over variable backgrounds, like imagery
|
||||
$createBtnTextTransform: uppercase;
|
||||
|
||||
// Foundation Colors
|
||||
$colorAlt1: #776ba2;
|
||||
$colorAlert: #ff3c00;
|
||||
$colorWarningHi: #990000;
|
||||
$colorWarningLo: #ff9900;
|
||||
$colorDiagnostic: #a4b442;
|
||||
$colorCommand: #3693bd;
|
||||
$colorInfo: #2294a2;
|
||||
$colorOk: #33cc33;
|
||||
$colorIconAlias: #4af6f3;
|
||||
$colorIconAliasForKeyFilter: #aaa;
|
||||
$colorPausedBg: #ff9900;
|
||||
$colorPausedFg: #fff;
|
||||
$colorCreateBtn: $colorKey;
|
||||
$colorInvokeMenu: #fff;
|
||||
$colorObjHdrTxt: $colorBodyFg;
|
||||
$colorObjHdrIc: lighten($colorObjHdrTxt, 30%);
|
||||
$colorTick: rgba(black, 0.2);
|
||||
$colorTimeHov: lighten($colorTime, 5%);
|
||||
$colorTimeSubtle: lighten($colorTime, 20%);
|
||||
$colorTOI: $colorBodyFg; // was $timeControllerToiLineColor
|
||||
$colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
|
||||
|
||||
// Edit Colors
|
||||
$editColor: #00c7c3;
|
||||
$editColorFg: $colorBodyFg;
|
||||
$browseBorderSelectableHov: 1px dotted rgba($colorBodyFg, 0.2);
|
||||
$browseShdwSelectableHov: rgba($colorBodyFg, 0.2) 0 0 3px;
|
||||
$browseBorderSelected: 1px solid rgba($colorBodyFg, 0.6);
|
||||
@ -138,18 +96,39 @@ $editBorderSelected: 1px solid $editColor;
|
||||
$editBorderDrilledIn: 1px dashed #ff4d9a;
|
||||
$colorGridLines: rgba($editColor, 0.2);
|
||||
|
||||
// UI elements
|
||||
$colorIconAlias: #4af6f3;
|
||||
$colorIconAliasForKeyFilter: #aaa;
|
||||
$colorProgressBarOuter: rgba(#000, 0.1);
|
||||
$colorProgressBarAmt: #0a0;
|
||||
|
||||
// Buttons and Controls
|
||||
$colorBtnBg: #aaaaaa;
|
||||
$colorBtnBgHov: darken($colorBtnBg, 10%);
|
||||
$colorBtnFg: #fff;
|
||||
$colorBtnFgHov: $colorBtnFg;
|
||||
$colorBtnMajorBg: $colorKey;
|
||||
$colorBtnMajorBgHov: $colorKeyHov;
|
||||
$colorBtnMajorFg: $colorKeyFg;
|
||||
$colorBtnMajorFgHov: lighten($colorBtnMajorFg, 10%);
|
||||
$colorBtnCautionBg: #f16f6f;
|
||||
$colorBtnCautionBgHov: #f1504e;
|
||||
$colorBtnCautionFg: $colorBtnFg;
|
||||
$colorClickIcon: $colorKey;
|
||||
$colorClickIconBgHov: rgba($colorKey, 0.2);
|
||||
$colorClickIconFgHov: $colorKeyHov;
|
||||
|
||||
// Menus
|
||||
$colorMenuBg: pushBack($colorBodyBg, 10%);
|
||||
$colorMenuFg: pullForward($colorMenuBg, 70%);
|
||||
$colorMenuBg: lighten($colorBodyBg, 10%);
|
||||
$colorMenuFg: darken($colorMenuBg, 70%);
|
||||
$colorMenuIc: $colorKey;
|
||||
$colorMenuHovBg: $colorMenuIc; //pullForward($colorMenuBg, $hoverRatioPercent);
|
||||
$colorMenuHovBg: $colorMenuIc;
|
||||
$colorMenuHovFg: $colorMenuBg;
|
||||
$colorMenuHovIc: $colorMenuBg;
|
||||
$colorMenuElementHilite: darken($colorMenuBg, 10%);
|
||||
$shdwMenu: rgba(black, 0.5) 0 1px 5px;
|
||||
$shdwMenuText: none;
|
||||
$colorCreateMenuLgIcon: $colorKey;
|
||||
$colorCreateMenuText: $colorBodyFg;
|
||||
$menuItemPad: ($interiorMargin, nth($btnPad, 2));
|
||||
$menuItemPad: $interiorMargin, floor($interiorMargin * 1.25);
|
||||
|
||||
// Palettes and Swatches
|
||||
$paletteItemBorderOuterColorSelected: black;
|
||||
@ -160,7 +139,7 @@ $paletteItemBorderInnerColor: rgba($paletteItemBorderOuterColorSelected, 0.3);
|
||||
$colorCheck: $colorKey;
|
||||
$colorFormRequired: $colorKey;
|
||||
$colorFormValid: $colorOk;
|
||||
$colorFormError: $colorWarningHi;
|
||||
$colorFormError: #990000;
|
||||
$colorFormInvalid: #ff2200;
|
||||
$colorFormFieldErrorBg: $colorFormError;
|
||||
$colorFormFieldErrorFg: rgba(#fff, 0.6);
|
||||
@ -168,35 +147,28 @@ $colorFormLines: rgba(#000, 0.1);
|
||||
$colorFormSectionHeader: rgba(#000, 0.05);
|
||||
$colorInputBg: $colorGenBg;
|
||||
$colorInputFg: $colorBodyFg;
|
||||
$colorInputPlaceholder: pushBack($colorBodyFg, 20%);
|
||||
$colorFormText: pushBack($colorBodyFg, 10%);
|
||||
$colorInputIcon: pushBack($colorBodyFg, 25%);
|
||||
$colorFieldHint: pullForward($colorBodyFg, 40%);
|
||||
$colorInputPlaceholder: lighten($colorBodyFg, 20%);
|
||||
$colorFormText: lighten($colorBodyFg, 10%);
|
||||
$colorInputIcon: lighten($colorBodyFg, 25%);
|
||||
$colorFieldHint: darken($colorBodyFg, 40%);
|
||||
$shdwInput: inset rgba(black, 0.4) 0 0 1px;
|
||||
$shdwInputHov: inset rgba(black, 0.7) 0 0 1px;
|
||||
$shdwInputFoc: inset rgba(black, 0.7) 0 0 3px;
|
||||
|
||||
// Inspector
|
||||
$colorInspectorBg: pullForward($colorBodyBg, 5%);
|
||||
$colorInspectorBg: darken($colorBodyBg, 5%);
|
||||
$colorInspectorFg: $colorBodyFg;
|
||||
$colorInspectorPropName: pushBack($colorBodyFg, 20%);
|
||||
$colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
|
||||
$colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
|
||||
$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
|
||||
$colorInspectorPropName: lighten($colorBodyFg, 20%);
|
||||
$colorInspectorPropVal: darken($colorInspectorFg, 15%);
|
||||
$colorInspectorSectionHeaderBg: darken($colorInspectorBg, 5%);
|
||||
$colorInspectorSectionHeaderFg: darken($colorInspectorBg, 40%);
|
||||
|
||||
// Status colors, mainly used for messaging and item ancillary symbols
|
||||
$colorStatusFg: #999;
|
||||
$colorStatusDefault: #ccc;
|
||||
$colorStatusInfo: #60ba7b;
|
||||
$colorStatusAlert: #ffb66c;
|
||||
$colorStatusError: #da0004;
|
||||
$colorStatusBtnBg: #666;
|
||||
$colorProgressBarOuter: rgba(#000, 0.1);
|
||||
$colorProgressBarAmt: #0a0;
|
||||
$progressBarHOverlay: 15px;
|
||||
$progressBarStripeW: 20px;
|
||||
$shdwStatusIc: rgba(white, 0.8) 0 0px 5px;
|
||||
$animPausedPulseDur: 1s;
|
||||
// Overlay
|
||||
$overlayColorBg: $colorMenuBg;
|
||||
$overlayColorFg: $colorMenuFg;
|
||||
$overlayButtonColorBg: $colorBtnBg;
|
||||
$overlayButtonColorFg: $colorBtnFg;
|
||||
$overlayCr: $interiorMarginLg;
|
||||
|
||||
// Indicator colors
|
||||
$colorIndicatorAvailable: $colorKey;
|
||||
@ -204,13 +176,9 @@ $colorIndicatorDisabled: #444;
|
||||
$colorIndicatorOn: $colorOk;
|
||||
$colorIndicatorOff: #666;
|
||||
|
||||
// Selects
|
||||
$colorSelectBg: $colorBtnBg;
|
||||
$colorSelectFg: $colorBtnFg;
|
||||
|
||||
// Limits and staleness colors//
|
||||
$colorTelemFresh: pullForward($colorBodyFg, 20%);
|
||||
$colorTelemStale: pushBack($colorBodyFg, 20%);
|
||||
$colorTelemFresh: darken($colorBodyFg, 20%);
|
||||
$colorTelemStale: lighten($colorBodyFg, 20%);
|
||||
$styleTelemStale: italic;
|
||||
$colorLimitYellowBg: rgba(#ffaa00, 0.3);
|
||||
$colorLimitYellowIc: #ffaa00;
|
||||
@ -220,37 +188,22 @@ $colorLimitRedIc: red;
|
||||
// Bubble colors
|
||||
$colorInfoBubbleBg: $colorMenuBg;
|
||||
$colorInfoBubbleFg: #666;
|
||||
$colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
|
||||
$colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
|
||||
|
||||
// Overlay
|
||||
$colorOvrBlocker: rgba(black, 0.7); // Used
|
||||
$colorOvrBg: $colorBodyBg; // Used
|
||||
$colorOvrFg: $colorBodyFg; // Used
|
||||
$colorOvrBtnBg: pullForward($colorOvrBg, 40%);
|
||||
$colorOvrBtnFg: #fff;
|
||||
$colorFieldHintOverlay: pullForward($colorOvrBg, 40%);
|
||||
$durLargeViewExpand: 250ms;
|
||||
|
||||
// Items
|
||||
$colorItemBg: #ddd;
|
||||
$colorItemBgHov: rgba($colorKey, 0.1); //pushBack($colorItemBg, $hoverRatioPercent * 0.4);
|
||||
$colorItemBg: lighten($colorBtnBg, 20%);
|
||||
$colorItemBgHov: lighten($colorItemBg, 5%);
|
||||
$colorListItemBg: transparent;
|
||||
$colorListItemBgHov: rgba($colorKey, 0.1);
|
||||
$colorItemFg: $colorBodyFg;
|
||||
$colorItemFgDetails: pushBack($colorItemFg, 15%);
|
||||
$colorItemIc: $colorKey;
|
||||
$colorItemSubIcons: $colorItemFgDetails;
|
||||
$colorItemOpenIcon: $colorItemFgDetails;
|
||||
$colorItemFgDetails: lighten($colorItemFg, 15%);
|
||||
$shdwItemText: none;
|
||||
$colorItemBgSelected: $colorKey;
|
||||
|
||||
// Tabular
|
||||
$colorTabBorder: pullForward($colorBodyBg, 10%);
|
||||
$colorTabBorder: darken($colorBodyBg, 10%);
|
||||
$colorTabBodyBg: $colorBodyBg;
|
||||
$colorTabBodyFg: pullForward($colorBodyFg, 20%);
|
||||
$colorTabHeaderBg: pullForward($colorBodyBg, 10%);
|
||||
$colorTabHeaderFg: pullForward($colorBodyFg, 20%);
|
||||
$colorTabBodyFg: darken($colorBodyFg, 20%);
|
||||
$colorTabHeaderBg: darken($colorBodyBg, 10%);
|
||||
$colorTabHeaderFg: darken($colorBodyFg, 20%);
|
||||
$colorTabHeaderBorder: $colorBodyBg;
|
||||
|
||||
// Plot
|
||||
@ -260,24 +213,23 @@ $colorPlotHash: black;
|
||||
$opacityPlotHash: 0.2;
|
||||
$stylePlotHash: dashed;
|
||||
$colorPlotAreaBorder: $colorInteriorBorder;
|
||||
$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
|
||||
$colorPlotLabelFg: lighten($colorPlotFg, 20%);
|
||||
$legendCollapsedNameMaxW: 50%;
|
||||
$legendHoverValueBg: rgba($colorBodyFg, 0.2);
|
||||
|
||||
// Tree
|
||||
$colorTreeBg: #f0f0f0; // Used
|
||||
$colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);
|
||||
$colorItemTreeHoverFg: pullForward($colorBodyFg, $hoverRatioPercent);
|
||||
$colorTreeBg: transparent;
|
||||
$colorItemTreeHoverBg: darken($colorBodyBg, 10%);
|
||||
$colorItemTreeHoverFg: darken($colorBodyFg, 10%);
|
||||
$colorItemTreeIcon: $colorKey; // Used
|
||||
$colorItemTreeIconHover: $colorItemTreeIcon; // Used
|
||||
$colorItemTreeFg: $colorBodyFg;
|
||||
$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
|
||||
$colorItemTreeSelectedBg: lighten($colorKey, 15%);
|
||||
$colorItemTreeSelectedFg: $colorBodyBg;
|
||||
$colorItemTreeEditingBg: #caf1ff;
|
||||
$colorItemTreeEditingFg: $colorEditAreaFg;
|
||||
$colorItemTreeEditingBg: $editColor;
|
||||
$colorItemTreeEditingFg: $editColorFg;
|
||||
$colorItemTreeVC: $colorBodyFg;
|
||||
$colorItemTreeVCHover: $colorKey;
|
||||
$colorItemTreeSelectedVC: $colorBodyBg;
|
||||
$shdwItemTreeIcon: none;
|
||||
|
||||
// Images
|
||||
@ -289,54 +241,37 @@ $scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px;
|
||||
$scrollbarTrackColorBg: rgba(#000, 0.2);
|
||||
$scrollbarThumbColor: darken($colorBodyBg, 50%);
|
||||
$scrollbarThumbColorHov: $colorKey;
|
||||
$scrollbarThumbColorOverlay: darken($colorOvrBg, 50%);
|
||||
$scrollbarThumbColorOverlayHov: $scrollbarThumbColorHov;
|
||||
$scrollbarThumbColorMenu: pullForward($colorMenuBg, 10%);
|
||||
$scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
|
||||
$scrollbarThumbColorMenu: darken($colorMenuBg, 10%);
|
||||
$scrollbarThumbColorMenuHov: darken($scrollbarThumbColorMenu, 2%);
|
||||
|
||||
// Splitter
|
||||
$splitterD: 7px;
|
||||
$splitterHandleD: 2px;
|
||||
$splitterHandleHitMargin: 4px;
|
||||
$splitterGrippyD: ($splitterHandleD - 4, 75px, 50px); // thickness, length, min-length
|
||||
$colorSplitterBaseBg: $colorBodyBg;
|
||||
$colorSplitterBg: pullForward($colorSplitterBaseBg, 20%);
|
||||
$colorSplitterBg: darken($colorSplitterBaseBg, 20%);
|
||||
$colorSplitterFg: $colorBodyBg;
|
||||
$colorSplitterHover: $colorKey; // pullForward($colorSplitterBg, $hoverRatioPercent * 2);
|
||||
$colorSplitterHover: $colorKey;
|
||||
$colorSplitterActive: $colorKey;
|
||||
$splitterBtnD: (16px, 35px); // height, width
|
||||
$splitterBtnColorBg: #eee;
|
||||
$splitterBtnColorFg: #999;
|
||||
$splitterBtnColorHoverBg: rgba($colorKey, 1);
|
||||
$splitterBtnColorHoverFg: $colorBodyBg;
|
||||
$colorSplitterGrippy: pullForward($colorSplitterBaseBg, 30%);
|
||||
$splitterShdw: none;
|
||||
$splitterEndCr: none;
|
||||
|
||||
// Minitabs
|
||||
$colorMiniTabBg: $colorSplitterBg;
|
||||
$colorMiniTabFg: pullForward($colorMiniTabBg, 30%);
|
||||
$colorMiniTabBgHov: $colorSplitterHover;
|
||||
$colorMiniTabFgHov: #fff;
|
||||
$splitterBtnColorBg: $colorBtnBg;
|
||||
$splitterBtnColorFg: #ddd;
|
||||
$splitterBtnLabelColorFg: #999;
|
||||
$splitterCollapsedBtnColorBg: #ccc;
|
||||
$splitterCollapsedBtnColorFg: #666;
|
||||
$splitterCollapsedBtnColorBgHov: $colorKey;
|
||||
$splitterCollapsedBtnColorFgHov: $colorKeyFg;
|
||||
|
||||
// Mobile
|
||||
$colorMobilePaneLeft: darken($colorBodyBg, 2%);
|
||||
$colorMobilePaneLeftTreeItemBg: rgba($colorBodyFg, 0.1); //pullForward($colorMobilePaneLeft, 3%);
|
||||
$colorMobilePaneLeftTreeItemBg: rgba($colorBodyFg, 0.1);
|
||||
$colorMobilePaneLeftTreeItemFg: $colorItemTreeFg;
|
||||
$colorMobileSelectListTreeItemBg: rgba(#000, 0.05);
|
||||
|
||||
// Datetime Picker, Calendar
|
||||
$colorCalCellHovBg: $colorKey;
|
||||
$colorCalCellHovFg: $colorKeyFg;
|
||||
$colorCalCellSelectedBg: $colorItemTreeSelectedBg;
|
||||
$colorCalCellSelectedFg: $colorItemTreeSelectedFg;
|
||||
$colorCalCellInMonthBg: pullForward($colorMenuBg, 5%);
|
||||
|
||||
// About Screen
|
||||
$colorAboutLink: #84b3ff;
|
||||
$colorAboutLink: $colorKeySubtle;
|
||||
|
||||
// Loading
|
||||
$colorLoadingFg: $colorAlt1;
|
||||
$colorLoadingFg: #776ba2;
|
||||
$colorLoadingBg: rgba($colorLoadingFg, 0.1);
|
||||
|
||||
// Transitions
|
||||
@ -346,14 +281,50 @@ $transInBounce: all 200ms cubic-bezier(.47,.01,.25,1.5);
|
||||
$transInBounceBig: all 300ms cubic-bezier(.2,1.6,.6,3);
|
||||
|
||||
// Discrete items, like Notebook entries, Widget rules
|
||||
$createBtnTextTransform: uppercase;
|
||||
|
||||
@mixin discreteItem() {
|
||||
background: rgba($colorBodyFg,0.1);
|
||||
border: 1px solid $colorInteriorBorder;
|
||||
border-radius: $controlCr;
|
||||
|
||||
.c-input-inline:hover {
|
||||
background: $colorBodyBg;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin discreteItemInnerElem() {
|
||||
border: 1px solid $colorBodyBg;
|
||||
border-radius: $controlCr; }
|
||||
border-radius: $controlCr;
|
||||
}
|
||||
|
||||
@mixin themedButton($c: $colorBtnBg) {
|
||||
background: $c;
|
||||
}
|
||||
|
||||
|
||||
/**************************************************** NOT USED, LEAVE FOR NOW */
|
||||
// Slider controls, not in use
|
||||
/*
|
||||
$sliderColorBase: $colorKey;
|
||||
$sliderColorRangeHolder: rgba(black, 0.07);
|
||||
$sliderColorRange: rgba($sliderColorBase, 0.2);
|
||||
$sliderColorRangeHov: rgba($sliderColorBase, 0.4);
|
||||
$sliderColorKnob: lighten($sliderColorBase, 20%);
|
||||
$sliderColorKnobHov: rgba($sliderColorBase, 0.7);
|
||||
$sliderColorRangeValHovBg: $sliderColorRange;
|
||||
$sliderColorRangeValHovFg: $colorBodyFg;
|
||||
$sliderKnobW: 15px;
|
||||
$sliderKnobR: 2px;
|
||||
*/
|
||||
|
||||
// Content status
|
||||
/*
|
||||
$colorAlert: #ff3c00;
|
||||
$colorWarningHi: #990000;
|
||||
$colorWarningLo: #ff9900;
|
||||
$colorDiagnostic: #a4b442;
|
||||
$colorCommand: #3693bd;
|
||||
$colorInfo: #2294a2;
|
||||
$colorOk: #33cc33;
|
||||
*/
|
||||
|
||||
@ -45,14 +45,15 @@ $overlayInnerMargin: 25px;
|
||||
|
||||
/*************** Items */
|
||||
$itemPadLR: 5px;
|
||||
$ueBrowseGridItemLg: 200px;
|
||||
$gridItemDesk: 175px;
|
||||
$gridItemMobile: 32px;
|
||||
/*************** Tabular */
|
||||
$tabularHeaderH: 22px;
|
||||
$tabularTdPadLR: $itemPadLR;
|
||||
$tabularTdPadTB: 2px;
|
||||
|
||||
/************************** MOBILE */
|
||||
$mobileMenuIconD: 34px; // Used
|
||||
$mobileMenuIconD: 24px; // Used
|
||||
$mobileTreeItemH: 35px; // Used
|
||||
|
||||
/************************** VISUAL */
|
||||
|
||||
@ -20,115 +20,6 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
/******************************************************** PLACEHOLDERS */
|
||||
@mixin cControl() {
|
||||
$fs: 1em;
|
||||
@include userSelectNone();
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
font-family: symbolsfont;
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&:after {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
[class*="__label"] {
|
||||
@include ellipsize();
|
||||
display: block;
|
||||
line-height: $fs; // Remove effect on top and bottom padding
|
||||
font-size: $fs;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin cButton() {
|
||||
@include cControl();
|
||||
background: $colorBtnBg;
|
||||
border-radius: $controlCr;
|
||||
color: $colorBtnFg;
|
||||
cursor: pointer;
|
||||
padding: nth($btnPad, 1) nth($btnPad, 2);
|
||||
|
||||
&:hover {
|
||||
background: $colorBtnBgHov;
|
||||
color: $colorBtnFgHov;
|
||||
}
|
||||
|
||||
&[class*="--major"] {
|
||||
background: $colorBtnMajorBg;
|
||||
color: $colorBtnMajorFg;
|
||||
|
||||
&:hover {
|
||||
background: $colorBtnMajorBgHov;
|
||||
color: $colorBtnMajorFgHov;
|
||||
}
|
||||
}
|
||||
|
||||
&[class*='--caution'] {
|
||||
background: $colorBtnCautionBg;
|
||||
color: $colorBtnCautionFg;
|
||||
|
||||
&:hover {
|
||||
background: $colorBtnCautionBgHov;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin cClickIcon() {
|
||||
// A clickable element that just includes the icon, no background
|
||||
// Padding is included to facilitate a bigger hit area
|
||||
// Make the icon bigger relative to its container
|
||||
@include cControl();
|
||||
$pLR: 3px;
|
||||
$pTB: 3px;
|
||||
border-radius: $controlCr;
|
||||
color: $colorKey;
|
||||
cursor: pointer;
|
||||
padding: $pTB $pLR ;
|
||||
|
||||
&:hover {
|
||||
background: rgba($colorKey, 0.2);
|
||||
}
|
||||
|
||||
&:before,
|
||||
*:before {
|
||||
// *:before handles any nested containers that may contain glyph elements
|
||||
// Needed for c-togglebutton.
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin cCtrlWrapper {
|
||||
// Provides a wrapper around buttons and other controls
|
||||
// Contains control and provides positioning context for contained menu/palette.
|
||||
// Wraps --menu elements, contains button and menu
|
||||
overflow: visible;
|
||||
|
||||
.c-menu {
|
||||
// Default position of contained menu
|
||||
top: 100%; left: 0;
|
||||
}
|
||||
|
||||
&[class*='--menus-up'] {
|
||||
.c-menu {
|
||||
top: auto; bottom: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&[class*='--menus-left'] {
|
||||
.c-menu {
|
||||
left: auto; right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/********* Buttons */
|
||||
// Optionally can include icon in :before via markup
|
||||
button {
|
||||
@ -206,7 +97,7 @@ button {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
}
|
||||
/********* Disclosure Triangle */
|
||||
/********* Disclosure Triangle */
|
||||
// Provides an arrow icon that when clicked expands an element to reveal its contents.
|
||||
// Used in tree items. Always placed BEFORE an element.
|
||||
.c-disclosure-triangle {
|
||||
@ -237,55 +128,73 @@ button {
|
||||
}
|
||||
|
||||
/******************************************************** FORM ELEMENTS */
|
||||
/********* Inline inputs */
|
||||
.c-input-inline {
|
||||
// A text input or contenteditable element that indicates edit affordance on hover and looks like an input on focus
|
||||
@include input-base();
|
||||
border: 1px solid transparent;
|
||||
display: block !important;
|
||||
min-width: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
overflow: hidden;
|
||||
transition: all 250ms ease;
|
||||
white-space: nowrap;
|
||||
input, textarea {
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
letter-spacing: inherit;
|
||||
}
|
||||
|
||||
&:not(:focus) {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
padding-left: $inputTextPLeftRight;
|
||||
padding-right: $inputTextPLeftRight;
|
||||
}
|
||||
&:hover {
|
||||
border-color: rgba($colorBodyFg, 0.2);
|
||||
}
|
||||
&:focus {
|
||||
@include nice-input($shdw: rgba(0, 0, 0, 0.6) 0 1px 3px);
|
||||
border-color: transparent;
|
||||
input[type=text],
|
||||
input[type=search],
|
||||
input[type=number] {
|
||||
@include reactive-input();
|
||||
padding: $inputTextP;
|
||||
&.numeric {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.c-labeled-input {
|
||||
// An input used in the Toolbar
|
||||
// Assumes label is before the input
|
||||
@include cControl();
|
||||
|
||||
input {
|
||||
margin-left: $interiorMarginSm;
|
||||
}
|
||||
input[type=number]::-webkit-inner-spin-button,
|
||||
input[type=number]::-webkit-outer-spin-button {
|
||||
margin-right: -5px !important;
|
||||
margin-top: -1px !important;
|
||||
}
|
||||
|
||||
/******************************************************** HYPERLINKS AND HYPERLINK BUTTONS */
|
||||
.c-hyperlink {
|
||||
&--link {
|
||||
color: $colorKey;
|
||||
.c-input {
|
||||
&--datetime {
|
||||
// Sized for values such as 2018-09-28 22:32:33.468Z
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
&--button {
|
||||
@include cButton();
|
||||
&--hrs-min-sec {
|
||||
// Sized for values such as 00:25:00
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
&-inline,
|
||||
&--inline {
|
||||
// A text input or contenteditable element that indicates edit affordance on hover and looks like an input on focus
|
||||
@include reactive-input($bg: transparent);
|
||||
box-shadow: none;
|
||||
display: block !important;
|
||||
min-width: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
overflow: hidden;
|
||||
transition: all 250ms ease;
|
||||
white-space: nowrap;
|
||||
|
||||
&:not(:focus) {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $colorInputBg;
|
||||
padding-left: $inputTextPLeftRight;
|
||||
padding-right: $inputTextPLeftRight;
|
||||
}
|
||||
}
|
||||
|
||||
&--labeled {
|
||||
// TODO: replace .c-labeled-input with this
|
||||
// An input used in the Toolbar
|
||||
// Assumes label is before the input
|
||||
@include cControl();
|
||||
|
||||
input {
|
||||
margin-left: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -323,7 +232,6 @@ button {
|
||||
}
|
||||
|
||||
@mixin menuInner() {
|
||||
color: $colorMenuFg;
|
||||
li {
|
||||
@include cControl();
|
||||
justify-content: start;
|
||||
@ -349,10 +257,6 @@ button {
|
||||
}
|
||||
}
|
||||
|
||||
@mixin modalMenu() {
|
||||
// Optional modifier that makes a c-menu more mobile-friendly
|
||||
}
|
||||
|
||||
.c-menu {
|
||||
@include menuOuter();
|
||||
@include menuInner();
|
||||
@ -397,11 +301,6 @@ button {
|
||||
justify-content: stretch;
|
||||
|
||||
.l-item-description {
|
||||
&__icon,
|
||||
&__description {
|
||||
//flex: 1 1 50%;
|
||||
}
|
||||
|
||||
&__name,
|
||||
&__description {
|
||||
margin-top: $interiorMarginLg;
|
||||
@ -413,6 +312,7 @@ button {
|
||||
}
|
||||
|
||||
&__name {
|
||||
color: $colorMenuFg;
|
||||
flex: 0 0 auto;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
@ -576,3 +476,9 @@ button {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/***************************************************** SLIDERS */
|
||||
.c-slider {
|
||||
@include cControl();
|
||||
> * + * { margin-left: $interiorMargin; }
|
||||
}
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/******************************************************** RESETS */
|
||||
/******************************* RESETS */
|
||||
*,
|
||||
:before,
|
||||
:after {
|
||||
@ -60,7 +60,7 @@ div {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/******************************************************** UTILITIES */
|
||||
/******************************* UTILITIES */
|
||||
.u-contents {
|
||||
display: contents;
|
||||
}
|
||||
@ -74,7 +74,7 @@ div {
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************** BROWSER ELEMENTS */
|
||||
/******************************* BROWSER ELEMENTS */
|
||||
body.desktop {
|
||||
::-webkit-scrollbar {
|
||||
box-sizing: border-box;
|
||||
@ -92,30 +92,16 @@ body.desktop {
|
||||
}
|
||||
}
|
||||
|
||||
.overlay ::-webkit-scrollbar-thumb {
|
||||
background: $scrollbarThumbColorOverlay;
|
||||
&:hover {
|
||||
background: $scrollbarThumbColorOverlayHov;
|
||||
}
|
||||
::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.menu ::-webkit-scrollbar-thumb {
|
||||
.c-menu ::-webkit-scrollbar-thumb {
|
||||
background: $scrollbarThumbColorMenu;
|
||||
&:hover {
|
||||
background: $scrollbarThumbColorMenuHov;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=number]::-webkit-inner-spin-button,
|
||||
input[type=number]::-webkit-outer-spin-button {
|
||||
//margin: -1px -5px inherit -5px !important;
|
||||
margin-right: -5px !important;
|
||||
margin-top: -1px !important;
|
||||
}
|
||||
|
||||
/************************** HTML ENTITIES */
|
||||
@ -223,21 +209,7 @@ body.desktop .has-local-controls {
|
||||
//}
|
||||
//}
|
||||
|
||||
/******************************************************** IS */
|
||||
|
||||
.is-selectable {
|
||||
&:hover {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.is-editing {
|
||||
.is-selectable {
|
||||
|
||||
}
|
||||
}
|
||||
/******************************************************** LEGACY */
|
||||
/************************** LEGACY */
|
||||
|
||||
mct-container {
|
||||
display: block;
|
||||
@ -309,6 +281,21 @@ a.disabled {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-selection {
|
||||
// aka selection = "None". Used in palettes and their menu buttons.
|
||||
$c: red;
|
||||
$s: 48%;
|
||||
$e: 52%;
|
||||
background-image: linear-gradient(-45deg,
|
||||
transparent $s - 5%,
|
||||
$c $s,
|
||||
$c $e,
|
||||
transparent $e + 5%
|
||||
);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.scrolling,
|
||||
.scroll {
|
||||
overflow: auto;
|
||||
|
||||
@ -20,8 +20,6 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
// VERSION MANUALLY MIGRATED FROM VUE-TOOLBAR
|
||||
|
||||
/************************** VISUALS */
|
||||
@mixin ancillaryIcon($d, $c) {
|
||||
// Used for small icons used in combination with larger icons,
|
||||
@ -146,10 +144,17 @@
|
||||
}
|
||||
|
||||
/************************** CONTROLS, BUTTONS */
|
||||
@mixin hover {
|
||||
body.desktop & {
|
||||
&:hover {
|
||||
@content
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin htmlInputReset() {
|
||||
appearance: none;
|
||||
background: none;
|
||||
background-color: transparent;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
outline: none;
|
||||
@ -165,7 +170,7 @@
|
||||
border-radius: $controlCr;
|
||||
|
||||
&.error {
|
||||
background-color: $colorFormFieldErrorBg;
|
||||
background: $colorFormFieldErrorBg;
|
||||
color: $colorFormFieldErrorFg;
|
||||
}
|
||||
}
|
||||
@ -183,7 +188,7 @@
|
||||
box-shadow: $shdwInput;
|
||||
color: $fg;
|
||||
|
||||
&:hover {
|
||||
@include hover() {
|
||||
box-shadow: $shdwInputHov;
|
||||
}
|
||||
|
||||
@ -193,12 +198,133 @@
|
||||
}
|
||||
|
||||
@mixin button($bg: $colorBtnBg, $fg: $colorBtnFg, $radius: $controlCr, $shdw: none) {
|
||||
// Is this being used? Remove if not.
|
||||
background: $bg;
|
||||
color: $fg;
|
||||
border-radius: $radius;
|
||||
box-shadow: $shdw;
|
||||
}
|
||||
|
||||
@mixin cControl() {
|
||||
$fs: 1em;
|
||||
@include userSelectNone();
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
font-family: symbolsfont;
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&:after {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
[class*="__label"] {
|
||||
@include ellipsize();
|
||||
display: block;
|
||||
line-height: $fs; // Remove effect on top and bottom padding
|
||||
font-size: $fs;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin cButton() {
|
||||
@include cControl();
|
||||
@include themedButton();
|
||||
border-radius: $controlCr;
|
||||
color: $colorBtnFg;
|
||||
cursor: pointer;
|
||||
padding: $interiorMargin floor($interiorMargin * 1.25);
|
||||
|
||||
@include hover() {
|
||||
background: $colorBtnBgHov;
|
||||
color: $colorBtnFgHov;
|
||||
}
|
||||
|
||||
&[class*="--major"] {
|
||||
background: $colorBtnMajorBg;
|
||||
color: $colorBtnMajorFg;
|
||||
|
||||
@include hover() {
|
||||
background: $colorBtnMajorBgHov;
|
||||
color: $colorBtnMajorFgHov;
|
||||
}
|
||||
}
|
||||
|
||||
&[class*='--caution'] {
|
||||
background: $colorBtnCautionBg;
|
||||
color: $colorBtnCautionFg;
|
||||
|
||||
&:hover {
|
||||
background: $colorBtnCautionBgHov;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin cClickIcon() {
|
||||
// A clickable element that just includes the icon, no background
|
||||
// Padding is included to facilitate a bigger hit area
|
||||
// Make the icon bigger relative to its container
|
||||
@include cControl();
|
||||
$pLR: 4px;
|
||||
$pTB: 3px;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
border-radius: $controlCr;
|
||||
color: $colorKey;
|
||||
cursor: pointer;
|
||||
padding: $pTB $pLR ;
|
||||
|
||||
@include hover() {
|
||||
background: $colorClickIconBgHov;
|
||||
color: $colorClickIconFgHov;
|
||||
}
|
||||
|
||||
&:before,
|
||||
*:before {
|
||||
// *:before handles any nested containers that may contain glyph elements
|
||||
// Needed for c-togglebutton.
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin cCtrlWrapper {
|
||||
// Provides a wrapper around buttons and other controls
|
||||
// Contains control and provides positioning context for contained menu/palette.
|
||||
// Wraps --menu elements, contains button and menu
|
||||
overflow: visible;
|
||||
|
||||
.c-menu {
|
||||
// Default position of contained menu
|
||||
top: 100%; left: 0;
|
||||
}
|
||||
|
||||
&[class*='--menus-up'] {
|
||||
.c-menu {
|
||||
top: auto; bottom: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&[class*='--menus-left'] {
|
||||
.c-menu {
|
||||
left: auto; right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@mixin wrappedInput() {
|
||||
// An input that is wrapped. Optionally includes a __label or icon element.
|
||||
// Based on .c-search.
|
||||
|
||||
@ -24,8 +24,8 @@
|
||||
//!********************************* CONTROLS *!
|
||||
//@import "../styles/controls/breadcrumb";
|
||||
@import "../styles/controls/buttons";
|
||||
@import "../styles/controls/palette";
|
||||
@import "../styles/controls/controls";
|
||||
//@import "../styles/controls/palette";
|
||||
//@import "../styles/controls/controls";
|
||||
@import "../styles/controls/lists";
|
||||
@import "../styles/controls/menus";
|
||||
@import "../styles/controls/messages";
|
||||
|
||||
@ -116,7 +116,6 @@
|
||||
$p: $interiorMarginSm;
|
||||
@include discreteItem();
|
||||
display: flex;
|
||||
//flex-wrap: wrap;
|
||||
padding: $interiorMarginSm $interiorMarginSm $interiorMarginSm $interiorMargin;
|
||||
|
||||
&__time,
|
||||
@ -156,7 +155,7 @@
|
||||
}
|
||||
|
||||
&__text {
|
||||
min-height: 24px; // Needed in Firefox when field is blank
|
||||
min-height: 22px; // Needed in Firefox when field is blank
|
||||
white-space: pre-wrap;
|
||||
|
||||
&.is-blank-notebook-entry {
|
||||
|
||||
@ -24,5 +24,6 @@
|
||||
// Meant for use as a single line import in Vue SFC's.
|
||||
// Do not include anything that renders to CSS!
|
||||
@import "constants";
|
||||
@import "constants-snow"; // TEMP
|
||||
@import "constants-espresso"; // TEMP
|
||||
//@import "constants-snow"; // TEMP
|
||||
@import "mixins";
|
||||
@ -5,7 +5,6 @@
|
||||
'l-pane--horizontal-handle-after': type === 'horizontal' && handle === 'after',
|
||||
'l-pane--vertical-handle-before': type === 'vertical' && handle === 'before',
|
||||
'l-pane--vertical-handle-after': type === 'vertical' && handle === 'after',
|
||||
'l-pane--collapsable' : collapsable,
|
||||
'l-pane--collapsed': collapsed,
|
||||
'l-pane--reacts': !handle,
|
||||
'l-pane--resizing': resizing === true
|
||||
@ -14,11 +13,13 @@
|
||||
class="l-pane__handle"
|
||||
@mousedown="start">
|
||||
</div>
|
||||
<button v-if="label"
|
||||
class="l-pane__collapse-button"
|
||||
@click="toggleCollapse">
|
||||
<div class="l-pane__header"
|
||||
v-if="label">
|
||||
<span class="l-pane__label">{{ label }}</span>
|
||||
</button>
|
||||
<button class="l-pane__collapse-button c-button"
|
||||
v-if="collapsable"
|
||||
@click="toggleCollapse"></button>
|
||||
</div>
|
||||
<div class="l-pane__contents">
|
||||
<slot></slot>
|
||||
</div>
|
||||
@ -61,14 +62,11 @@
|
||||
// __handle and __label don't appear in mobile
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__collapse-button {
|
||||
position: absolute;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
top: 0; right: 0; // Default
|
||||
z-index: 1;
|
||||
margin-bottom: $interiorMargin;
|
||||
}
|
||||
|
||||
&--reacts {
|
||||
@ -112,7 +110,6 @@
|
||||
&__contents {
|
||||
flex: 1 1 100%;
|
||||
opacity: 1;
|
||||
padding: $interiorMargin;
|
||||
pointer-events: inherit;
|
||||
transition: opacity 250ms ease 250ms;
|
||||
|
||||
@ -122,13 +119,10 @@
|
||||
}
|
||||
|
||||
> [class*="__"] + [class*="__"] {
|
||||
// Create margin between elements in a pane
|
||||
// Doesn't match first elem, but will match all subsequent
|
||||
margin-top: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
/************************ DESKTOP STYLES */
|
||||
/************************************************ DESKTOP STYLES */
|
||||
body.desktop & {
|
||||
&__handle {
|
||||
background: $colorSplitterBg;
|
||||
@ -151,52 +145,35 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__header {
|
||||
font-size: floor(12px * .9);
|
||||
}
|
||||
|
||||
&__collapse-button {
|
||||
$m: 2px;
|
||||
$h: 12px;
|
||||
box-shadow: none;
|
||||
background: $splitterBtnColorBg;
|
||||
color: $splitterBtnColorFg;
|
||||
flex: 0 0 nth($splitterBtnD, 1);
|
||||
font-size: $h * .9;
|
||||
position: relative;
|
||||
justify-content: start;
|
||||
transition: $transOut;
|
||||
border-radius: $smallCr;
|
||||
font-size: 6px;
|
||||
line-height: 90%;
|
||||
padding: 3px 15px;
|
||||
|
||||
&:after {
|
||||
// Close icon
|
||||
background: $colorBtnBg;
|
||||
border-radius: $smallCr;
|
||||
color: $colorBtnFg;
|
||||
content: $glyph-icon-arrow-right-equilateral;
|
||||
display: block;
|
||||
font-family: symbolsfont;
|
||||
font-size: 6px;
|
||||
line-height: 90%;
|
||||
padding: 3px 15px;
|
||||
position: absolute;
|
||||
right: $m;
|
||||
top: $m;
|
||||
transition: $transOut;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(black, 0.1);
|
||||
&:after {
|
||||
background: $splitterBtnColorHoverBg;
|
||||
color: $splitterBtnColorHoverFg;
|
||||
transition: $transIn;
|
||||
}
|
||||
@include hover() {
|
||||
background: $colorBtnBgHov;
|
||||
color: $colorBtnFgHov;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
// Name of the pane
|
||||
@include ellipsize();
|
||||
@include userSelectNone();
|
||||
color: $splitterBtnLabelColorFg;
|
||||
display: block;
|
||||
padding-right: nth($splitterBtnD, 2) + $interiorMargin; // Force label to ellipsis
|
||||
pointer-events: none;
|
||||
text-transform: uppercase;
|
||||
transform-origin: top left;
|
||||
flex: 1 0 90%;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&--resizing {
|
||||
@ -209,6 +186,7 @@
|
||||
}
|
||||
|
||||
&[class*="--collapsed"] {
|
||||
/********************************* STYLES FOR DESKTOP COLLAPSED PANES, ALL ORIENTATIONS */
|
||||
$d: nth($splitterBtnD, 1);
|
||||
flex-basis: $d;
|
||||
min-width: $d !important;
|
||||
@ -218,19 +196,24 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .l-pane__collapse-button {
|
||||
background: $splitterBtnColorFg;
|
||||
color: $splitterBtnColorBg;
|
||||
|
||||
.l-pane__header {
|
||||
&:hover {
|
||||
background: $splitterBtnColorHoverBg !important;
|
||||
color: $splitterCollapsedBtnColorFgHov;
|
||||
.l-pane__label {
|
||||
color: inherit;
|
||||
}
|
||||
.l-pane__collapse-button {
|
||||
background: $splitterCollapsedBtnColorBgHov;
|
||||
color: inherit;
|
||||
transition: $transIn;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .l-pane__collapse-button {
|
||||
height: nth($splitterBtnD, 1);
|
||||
padding: $interiorMarginSm $interiorMarginSm;
|
||||
.l-pane__collapse-button {
|
||||
background: $splitterCollapsedBtnColorBg;
|
||||
color: $splitterCollapsedBtnColorFg;
|
||||
}
|
||||
}
|
||||
|
||||
&[class*="--horizontal"] {
|
||||
@ -249,31 +232,44 @@
|
||||
}
|
||||
}
|
||||
|
||||
.l-pane__collapse-button {
|
||||
&:before {
|
||||
content: $glyph-icon-arrow-right-equilateral;
|
||||
}
|
||||
}
|
||||
|
||||
&[class*="--collapsed"] {
|
||||
> .l-pane__collapse-button {
|
||||
/************************ COLLAPSED HORIZONTAL SPLITTER, EITHER DIRECTION */
|
||||
[class*="__header"] {
|
||||
@include abs();
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
[class*="label"] {
|
||||
position: absolute;
|
||||
transform: translate($interiorMarginLg + 1, 18px) rotate(90deg);
|
||||
left: 3px;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.l-pane__collapse-button {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0; // Only have to do this once, because of scaleX(-1) below.
|
||||
position: absolute;
|
||||
top: 0; right: 0; bottom: 0; left: 0;
|
||||
height: auto; width: 100%;
|
||||
padding: 0;
|
||||
|
||||
[class*="label"] {
|
||||
&:before {
|
||||
position: absolute;
|
||||
transform: translate($interiorMarginLg + 1, 18px) rotate(90deg);
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: none;
|
||||
padding: 0;
|
||||
top: $interiorMargin;
|
||||
left: 50%;
|
||||
right: auto;
|
||||
transform: translateX(-50%);
|
||||
width: auto;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/************************** Horizontal Splitter Before */
|
||||
// Inspector pane
|
||||
&[class*="-before"] {
|
||||
> .l-pane__handle {
|
||||
left: 0;
|
||||
@ -281,15 +277,14 @@
|
||||
}
|
||||
|
||||
&[class*="--collapsed"] {
|
||||
> .l-pane__collapse-button {
|
||||
&:after {
|
||||
transform: translateX(-50%) scaleX(-1);
|
||||
}
|
||||
.l-pane__collapse-button {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/************************** Horizontal Splitter After */
|
||||
// Tree pane
|
||||
&[class*="-after"] {
|
||||
> .l-pane__handle {
|
||||
right: 0;
|
||||
@ -297,7 +292,7 @@
|
||||
}
|
||||
|
||||
&:not([class*="--collapsed"]) {
|
||||
> .l-pane__collapse-button:after {
|
||||
.l-pane__collapse-button {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
@ -321,19 +316,19 @@
|
||||
}
|
||||
|
||||
/************************** Vertical Splitter Before */
|
||||
// Pane collapses downward
|
||||
// Pane collapses downward. Used by Elements pool in Inspector
|
||||
&[class*="-before"] {
|
||||
> .l-pane__handle {
|
||||
top: 0;
|
||||
transform: translateY(floor($splitterHandleD / -1));
|
||||
}
|
||||
|
||||
> .l-pane__collapse-button:after {
|
||||
.l-pane__collapse-button:before {
|
||||
content: $glyph-icon-arrow-down;
|
||||
}
|
||||
|
||||
&.l-pane--collapsed {
|
||||
> .l-pane__collapse-button:after {
|
||||
> .l-pane__collapse-button {
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,9 +25,7 @@
|
||||
<div class="l-shell__search">
|
||||
<search class="c-search--major" ref="shell-search"></search>
|
||||
</div>
|
||||
<div class="l-shell__tree">
|
||||
<mct-tree></mct-tree>
|
||||
</div>
|
||||
<mct-tree class="l-shell__tree"></mct-tree>
|
||||
</pane>
|
||||
<pane class="l-shell__pane-main">
|
||||
<browse-bar class="l-shell__main-view-browse-bar"
|
||||
@ -66,45 +64,64 @@
|
||||
overflow: hidden;
|
||||
|
||||
&__status {
|
||||
background: $colorBodyFg;
|
||||
color: $colorBodyBg;
|
||||
border-top: 1px solid $colorInteriorBorder;
|
||||
background: $colorStatusBarBg;
|
||||
color: $colorStatusBarFg;
|
||||
height: 24px;
|
||||
padding: $interiorMarginSm;
|
||||
}
|
||||
|
||||
&__pane-tree {
|
||||
background: $colorTreeBg;
|
||||
width: 40%;
|
||||
|
||||
[class*="collapse-button"] {
|
||||
// For mobile, collapse button becomes menu icon
|
||||
body.mobile & {
|
||||
height: $mobileMenuIconD;
|
||||
width: $mobileMenuIconD;
|
||||
@include cClickIcon();
|
||||
position: absolute;
|
||||
right: -2 * nth($shellPanePad, 2); // Needs to be -1 * when pane is collapsed
|
||||
top: 0;
|
||||
transform: translateX(100%);
|
||||
width: $mobileMenuIconD;
|
||||
z-index: 2;
|
||||
|
||||
&:before {
|
||||
color: $colorKey;
|
||||
content: $glyph-icon-menu-hamburger;
|
||||
font-family: symbolsfont;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__pane-main,
|
||||
&__pane-tree {
|
||||
> .l-pane__contents {
|
||||
&__pane-tree,
|
||||
&__pane-inspector,
|
||||
&__pane-main {
|
||||
.l-pane__contents {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
|
||||
> * {
|
||||
flex: 0 0 auto;
|
||||
+ * {
|
||||
margin-top: $interiorMarginLg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.mobile & {
|
||||
&__pane-tree {
|
||||
background: linear-gradient(90deg, transparent 70%, rgba(black, 0.2) 99%, rgba(black, 0.3));
|
||||
|
||||
&[class*="--collapsed"] {
|
||||
[class*="collapse-button"] {
|
||||
right: -1 * nth($shellPanePad, 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.phone.portrait & {
|
||||
&__pane-tree {
|
||||
width: calc(100% - #{$mobileMenuIconD});
|
||||
width: calc(100% - #{$mobileMenuIconD + (2 * nth($shellPanePad, 2))});
|
||||
|
||||
+ .l-pane {
|
||||
// Hide pane-main when this pane is expanded
|
||||
@ -140,13 +157,13 @@
|
||||
}
|
||||
|
||||
body.mobile & .l-shell__main-view-browse-bar {
|
||||
margin-left: $mobileMenuIconD - $interiorMarginLg; // Make room for the hamburger!
|
||||
margin-left: $mobileMenuIconD; // Make room for the hamburger!
|
||||
}
|
||||
|
||||
&__head {
|
||||
align-items: center;
|
||||
background: $colorHeadBg;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid $colorInteriorBorder;
|
||||
padding: $interiorMargin;
|
||||
|
||||
> [class*="__"] + [class*="__"] {
|
||||
@ -167,27 +184,40 @@
|
||||
}
|
||||
|
||||
/******************************* MAIN AREA */
|
||||
|
||||
&__main-container {
|
||||
// Wrapper for main views
|
||||
flex: 1 1 auto;
|
||||
flex: 1 1 auto !important;
|
||||
overflow: auto;
|
||||
//font-size: 16px; // TEMP FOR LEGACY STYLING
|
||||
}
|
||||
|
||||
&__tree {
|
||||
// Tree component within __pane-tree
|
||||
flex: 1 1 100%;
|
||||
overflow-y: auto;
|
||||
flex: 1 1 auto !important;
|
||||
}
|
||||
|
||||
&__time-conductor {
|
||||
border-top: 1px solid $colorInteriorBorder;
|
||||
flex: 0 0 auto;
|
||||
padding-top: $interiorMargin;
|
||||
}
|
||||
|
||||
&__main {
|
||||
> .l-pane {
|
||||
padding: nth($shellPanePad, 1) nth($shellPanePad, 2);
|
||||
}
|
||||
}
|
||||
|
||||
body.desktop & {
|
||||
/********** HEAD AND STATUS */
|
||||
&__main {
|
||||
// Top and bottom padding in container that holds tree, __pane-main and Inspector
|
||||
padding: $shellMainPad;
|
||||
> .l-pane {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__pane-tree,
|
||||
&__pane-inspector {
|
||||
max-width: 30%;
|
||||
@ -200,11 +230,6 @@
|
||||
&__pane-inspector {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
&__toolbar {
|
||||
flex: 0 0 auto;
|
||||
margin-bottom: $interiorMargin;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
<template>
|
||||
<ul class="c-tree">
|
||||
<tree-item v-for="child in children"
|
||||
:key="child.id"
|
||||
:node="child">
|
||||
</tree-item>
|
||||
</ul>
|
||||
<div class="c-tree__wrapper">
|
||||
<ul class="c-tree">
|
||||
<tree-item v-for="child in children"
|
||||
:key="child.id"
|
||||
:node="child">
|
||||
</tree-item>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@ -16,6 +18,11 @@
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
|
||||
&__wrapper {
|
||||
overflow-y: auto;
|
||||
padding-right: $interiorMarginSm;
|
||||
}
|
||||
|
||||
.c-tree {
|
||||
margin-left: 15px;
|
||||
}
|
||||
@ -99,7 +106,7 @@
|
||||
children: []
|
||||
};
|
||||
},
|
||||
inject: ['openmct', 'domainObject'],
|
||||
inject: ['openmct'],
|
||||
mounted: function () {
|
||||
this.openmct.objects.get('ROOT')
|
||||
.then(root => this.openmct.composition.get(root).load())
|
||||
|
||||
@ -35,8 +35,8 @@
|
||||
|
||||
&__outer {
|
||||
@include abs();
|
||||
background: $colorOvrBg;
|
||||
color: $colorOvrFg;
|
||||
background: $overlayColorBg;
|
||||
color: $overlayColorFg;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: $overlayInnerMargin;
|
||||
@ -65,7 +65,7 @@
|
||||
body.desktop & {
|
||||
&__blocker {
|
||||
@include abs();
|
||||
background: $colorOvrBlocker;
|
||||
background: rgba(black, 0.7);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user