ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-18 20:57:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Markup / scss refactor WIP

Browse Source 
- Added sass-base.scss to make it easier for SFC's to
include needed SASS vars, mixins, etc. with a single import;
- Cleaned up indention in Layout.vue;
This commit is contained in:
charlesh88 2018-08-15 10:38:26 -07:00
parent b2d12f95ee
commit 4c5baf183a
5 changed files with 86 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/styles-new/_constants-snow.scss
View File

@ -1,3 +1,5 @@
@import "constants";
// Mixins
@function pullForward($c: $colorBodyBg, $p: 20%) {
// For dark interfaces, lighter things come forward - opposite for light interfaces

10
src/styles-new/core.scss
View File

@ -1,6 +1,6 @@
@import "vendor/normalize.min.css";
@import "constants";
@import "constants-snow";
@import "glyphs";
@import "mixins";
@import "global";
@import "sass-base.scss";
/******************** RENDERS CSS */
@import "global";
@import "controls";

7
src/styles-new/sass-base.scss Normal file
View File

@ -0,0 +1,7 @@
// Imports only constants, mixins, etc.
// 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 "glyphs";
@import "mixins";

5
src/ui/components/controls/search.vue
View File

@ -10,10 +10,7 @@
</template>
<style lang="scss">
@import "~styles/constants";
@import "~styles/constants-snow";
@import "~styles/glyphs";
@import "~styles/mixins";
@import "~styles/sass-base";;
/******************************* SEARCH */
.c-search {

143
src/ui/components/layout/Layout.vue
View File

@ -28,73 +28,72 @@
</template>
<style lang="scss">
@import "~styles/constants";
@import "~styles/constants-snow";
@import "~styles/sass-base";
/******************************* SHELL */
.l-shell {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
display: flex;
flex-flow: column nowrap;
/********** STATUS AREA */
&__status {
border-bottom: 1px solid $colorInteriorBorder;
flex: 0 1 auto;
height: 40px;
order: 1;
padding: $interiorMarginLg;
}
/********** MAIN AREA */
&__main {
flex: 1 1 auto;
display: flex;
flex-flow: row nowrap;
order: 2;
}
&__object-view {
flex: 1 1 auto;
padding: $interiorMarginLg;
}
&__time-conductor {
border-top: 1px solid $colorInteriorBorder;
min-height: 50px;
padding: $interiorMarginLg;
}
/********** MAIN AREA PANES */
&__pane-tree,
&__pane-main,
&__pane-inspector {
/******************************* SHELL */
.l-shell {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
display: flex;
flex-flow: column nowrap;
}
&__pane-tree,
&__pane-inspector {
max-width: 30%;
min-width: 5%;
}
/********** STATUS AREA */
&__status {
border-bottom: 1px solid $colorInteriorBorder;
flex: 0 1 auto;
height: 40px;
order: 1;
padding: $interiorMarginLg;
}
&__pane-tree {
$m: $interiorMargin;
background: $colorTreeBg;
padding: $m $m + ($splitterD - $splitterHandleD) $m $m;
width: 300px
}
/********** MAIN AREA */
&__main {
flex: 1 1 auto;
display: flex;
flex-flow: row nowrap;
order: 2;
}
&__pane-main {
flex: 1 1 auto;
}
&__object-view {
flex: 1 1 auto;
padding: $interiorMarginLg;
}
&__pane-inspector {
width: 200px
&__time-conductor {
border-top: 1px solid $colorInteriorBorder;
min-height: 50px;
padding: $interiorMarginLg;
}
/********** MAIN AREA PANES */
&__pane-tree,
&__pane-main,
&__pane-inspector {
display: flex;
flex-flow: column nowrap;
}
&__pane-tree,
&__pane-inspector {
max-width: 30%;
min-width: 5%;
}
&__pane-tree {
$m: $interiorMargin;
background: $colorTreeBg;
padding: $m $m + ($splitterD - $splitterHandleD) $m $m;
width: 300px
}
&__pane-main {
flex: 1 1 auto;
}
&__pane-inspector {
width: 200px
}
}
}
</style>
<script>
@ -105,19 +104,19 @@
import search from '../controls/search.vue';
import splitter from '../controls/splitter.vue';
export default {
data () {
return {
msg: 'Hello world!'
export default {
data () {
return {
msg: 'Hello world!'
}
},
components: {
MctInspector,
MctMain,
MctStatus,
MctTree,
search,
splitter
}
},
components: {
MctInspector,
MctMain,
MctStatus,
MctTree,
search,
splitter
}
}
</script>