Add status bar

This commit is contained in:
charlesh88 2018-08-17 14:14:01 -07:00
parent 8addfb886e
commit c3262de1b7

View File

@ -1,5 +1,9 @@
<template> <template>
<div class="l-shell"> <div class="l-shell">
<div class="l-shell__head">
[ Create Button ]
[ App Logo ]
</div>
<multipane class="l-shell__main" <multipane class="l-shell__main"
type="horizontal"> type="horizontal">
<pane class="l-pane l-shell__pane-tree" <pane class="l-pane l-shell__pane-tree"
@ -23,9 +27,7 @@
</pane> </pane>
</multipane> </multipane>
<div class="l-shell__status"> <div class="l-shell__status">
[ Create Button ]
<MctStatus></MctStatus> <MctStatus></MctStatus>
[ App Logo ]
</div> </div>
</div> </div>
</template> </template>
@ -40,21 +42,32 @@
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
/********** STATUS AREA */ /********** HEAD AND STATUS */
&__head,
&__status { &__status {
border-bottom: 1px solid $colorInteriorBorder;
flex: 0 1 auto; flex: 0 1 auto;
}
&__head {
border-bottom: 1px solid $colorInteriorBorder;
height: 40px; height: 40px;
order: 1;
padding: $interiorMarginLg; padding: $interiorMarginLg;
} }
&__status {
background: $colorBodyFg;
color: $colorBodyBg;
border-top: 1px solid $colorInteriorBorder;
height: 24px;
padding: $interiorMarginSm;
}
/********** MAIN AREA */ /********** MAIN AREA */
&__main { &__main {
flex: 1 1 auto; flex: 1 1 auto;
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
order: 2;
} }
&__tree { &__tree {