mirror of
https://github.com/nasa/openmct.git
synced 2024-12-18 20:57:53 +00:00
Markup / scss refactor WIP
Fixes #2140 - Mixins file added; - Markup and -shell CSS from codepen brought over;
This commit is contained in:
charlesh88
parent
fe2667285e
commit
50be483421
@ -1,8 +1,7 @@
|
||||
/************************** FONTS */
|
||||
@font-face {
|
||||
/*
|
||||
* Use https://icomoon.io/app with icomoon-project-openmct-symbols-16px.json
|
||||
* to generate font files
|
||||
* Use https://icomoon.io/app with icomoon-project-openmct-symbols-16px.json to generate font files
|
||||
*/
|
||||
font-family: 'symbolsfont';
|
||||
src: url($dirFonts + 'openmct-symbols-16px.eot');
|
||||
@ -16,8 +15,7 @@
|
||||
|
||||
@font-face {
|
||||
/*
|
||||
* Use https://icomoon.io/app with icomoon-project-openmct-symbols-12px.json
|
||||
* to generate font files
|
||||
* Use https://icomoon.io/app with icomoon-project-openmct-symbols-12px.json to generate font files
|
||||
*/
|
||||
font-family: 'symbolsfont-12px';
|
||||
src: url($dirFonts + 'openmct-symbols-12px.eot');
|
||||
@ -29,6 +27,15 @@
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/******************************* RESETS */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
div {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/************************** HTML ENTITIES */
|
||||
a {
|
||||
//color: $colorA;
|
||||
@ -44,7 +51,7 @@ body, html {
|
||||
//background-color: $colorBodyBg;
|
||||
//color: $colorBodyFg;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
@ -74,9 +81,9 @@ h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
//p {
|
||||
// margin-bottom: $interiorMarginLg;
|
||||
//}
|
||||
p {
|
||||
margin-bottom: $interiorMarginLg;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
|
||||
83
src/styles-new/_mixins.scss
Normal file
83
src/styles-new/_mixins.scss
Normal file
@ -0,0 +1,83 @@
|
||||
/*****************************************************************************
|
||||
* 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.
|
||||
*****************************************************************************/
|
||||
|
||||
@mixin ancillaryIcon($d, $c) {
|
||||
// Used for small icons used in combination with larger icons,
|
||||
// like the link and alert icons in tree items.
|
||||
color: $c;
|
||||
font-size: $d;
|
||||
line-height: $d;
|
||||
height: $d;
|
||||
width: $d;
|
||||
}
|
||||
|
||||
@mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) {
|
||||
@include background-image(linear-gradient(-45deg,
|
||||
rgba($c, $a) 25%, transparent 25%,
|
||||
transparent 50%, rgba($c, $a) 50%,
|
||||
rgba($c, $a) 75%, transparent 75%,
|
||||
transparent 100%
|
||||
));
|
||||
background-repeat: repeat;
|
||||
background-size: $d $d;
|
||||
}
|
||||
|
||||
@mixin bgStripes($c: yellow, $a: 0.1, $bgsize: 5px, $angle: 90deg) {
|
||||
@include background-image(linear-gradient($angle,
|
||||
rgba($c, $a) 25%, transparent 25%,
|
||||
transparent 50%, rgba($c, $a) 50%,
|
||||
rgba($c, $a) 75%, transparent 75%,
|
||||
transparent 100%
|
||||
));
|
||||
background-repeat: repeat;
|
||||
background-size: $bgsize $bgsize;
|
||||
}
|
||||
|
||||
@mixin bgVertStripes($c: yellow, $a: 0.1, $d: 40px) {
|
||||
@include background-image(linear-gradient(-90deg,
|
||||
rgba($c, $a) 0%, rgba($c, $a) 50%,
|
||||
transparent 50%, transparent 100%
|
||||
));
|
||||
background-repeat: repeat;
|
||||
background-size: $d $d;
|
||||
}
|
||||
|
||||
|
||||
@function percentToDecimal($p) {
|
||||
@return $p / 100%;
|
||||
}
|
||||
|
||||
@function decimalToPercent($d) {
|
||||
@return percentage($d);
|
||||
}
|
||||
|
||||
@mixin ellipsize() {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@mixin reverseEllipsis() {
|
||||
@include ellipsize();
|
||||
direction: rtl;
|
||||
unicode-bidi:bidi-override;
|
||||
}
|
||||
@ -1,20 +1,108 @@
|
||||
<template>
|
||||
<div class="Layout">
|
||||
<mct-tree ref="tree"></mct-tree>
|
||||
<mct-main ref="main"></mct-main>
|
||||
<mct-inspector ref="inspector"></mct-inspector>
|
||||
<mct-status ref="status"></mct-status>
|
||||
</div>
|
||||
<div class="l-shell">
|
||||
<div class="l-shell__main">
|
||||
<div class="l-shell__tree l-pane" style="width: 400px">
|
||||
<div class="l-pane__elem c-search">
|
||||
<input placeholder="Search" />
|
||||
</div>
|
||||
<ul class="l-pane__elem l-tree">
|
||||
<li class="l-tree__item-h">
|
||||
<div class="l-tree__item" onclick="alert('tree item click');">
|
||||
<span class="c-view-control"></span><span class="c-object-name icon-folder">
|
||||
Tree item x with a long name that forces ellipsis to occur
|
||||
</span>
|
||||
</div>
|
||||
<ul class="l-tree">
|
||||
<li class="l-tree__item-h">
|
||||
<div class="l-tree__item" onclick="alert('tree item click');">
|
||||
<span class="c-view-control"></span><span class="c-object-name icon-folder">Tree item y</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="c-splitter c-splitter--horz js-t-split-o"></div>
|
||||
<div class="l-shell__object l-object-view">
|
||||
<div class="l-object-view__object-h">l-object-h</div>
|
||||
<div class="l-object-view__time-conductor-h c-time-conductor">c-time-conductor</div>
|
||||
</div>
|
||||
<div class="c-splitter c-splitter--horz js-o-split-i"></div>
|
||||
<div class="l-shell__inspector l-inspector" style="width: 200px">
|
||||
<div class="l-inspector__properties" style="height: 300px">
|
||||
l-inspector__properties
|
||||
</div>
|
||||
<div class="c-splitter c-splitter--vert js-p-split-e"></div>
|
||||
<div class="l-inspector__elements">
|
||||
l-inspector__elements
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="l-shell__status">
|
||||
l-shell_status
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!--<div class="l-shell">
|
||||
<mct-tree ref="tree"></mct-tree>
|
||||
<mct-main ref="main"></mct-main>
|
||||
<mct-inspector ref="inspector"></mct-inspector>
|
||||
<mct-status ref="status"></mct-status>
|
||||
</div>-->
|
||||
</template>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.Layout {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: absolute
|
||||
}
|
||||
@import "~styles/constants";
|
||||
/******************************* SHELL */
|
||||
.l-shell {
|
||||
position: absolute;
|
||||
top: 0; right: 0; bottom: 0; left: 0;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
|
||||
/********** HEAD */
|
||||
&__status {
|
||||
background: #666;
|
||||
color: #ccc;
|
||||
flex: 0 1 auto;
|
||||
height: 40px;
|
||||
order: 1;
|
||||
padding: $interiorMarginLg;
|
||||
}
|
||||
|
||||
/********** MAIN */
|
||||
&__main {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
&__tree,
|
||||
&__inspector {
|
||||
max-width: 30%;
|
||||
min-width: 5%;
|
||||
}
|
||||
|
||||
&__tree {
|
||||
background: #f90;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
padding: $interiorMarginLg;
|
||||
}
|
||||
|
||||
&__object {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&__inspector {
|
||||
background: #f9c;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,16 +1,9 @@
|
||||
<template>
|
||||
<div class="MCT_Status">I'm the status bar</div>
|
||||
<div class="l-shell-head">I'm the status bar</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.MCT_Status {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
height: 20px;
|
||||
background: black;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user