ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-16 14:18:16 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Markup / scss refactor WIP

Browse Source 
- Add normalize.min to styles-new;
- Factor components to be more standalone, very WIP;
This commit is contained in:
charlesh88
2018-08-09 16:02:22 -07:00
parent 4d9b7fe3e4
commit f811318d18
5 changed files with 181 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/ui/components/layout/MctTree.vue
View File

@ -1,62 +1,56 @@
<template>
<div class="l-pane" :class="cssClass" :style="cssStyle">
<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');">
<ul class="c-tree">
<li class="c-tree__item-h">
<div class="c-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>
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');">
<ul class="c-tree">
<li class="c-tree__item-h">
<div class="c-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>
</template>
<style lang="scss">
.l-tree {
.l-tree {
margin-left: 20px;
@import "~styles/constants";
.c-tree {
.c-tree {
margin-left: 20px;
}
&__item {
border-radius: 5px;
display: flex;
flex-flow: row nowrap;
align-items: center;
cursor: pointer;
padding: 5px;
&:hover {
background: rgba(white, 0.2);
}
.c-view-control {
$d: 11px;
background: rgba(red, 0.4);
display: inline-block;
flex: 0 0 auto;
height: $d;
width: $d;
margin-right: 5px;
}
}
}
&__item {
border-radius: 5px;
display: flex;
flex-flow: row nowrap;
align-items: center;
cursor: pointer;
padding: 5px;
&:hover {
background: rgba(white, 0.2);
}
.c-view-control {
$d: 11px;
background: rgba(red, 0.4);
display: inline-block;
flex: 0 0 auto;
height: $d; width: $d;
margin-right: 5px;
}
}
}
</style>
<script>
export default {
props: {
cssClass: String,
cssStyle: String
}
}
export default {
}
</script>