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

Code trimming / cleanup

Browse Source 
- pane tweaks;
This commit is contained in:
charlesh88 2018-08-30 13:50:26 -07:00
parent e3bb387139
commit 139e5ab184
1 changed files with 16 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/ui/components/controls/pane.vue
View File

@ -47,9 +47,10 @@
.l-pane { .l-pane {
backface-visibility: hidden; backface-visibility: hidden;
display: flex; display: flex;
min-width: 0px;
min-height: 0px;
opacity: 1; opacity: 1;
pointer-events: inherit; pointer-events: inherit;
transition: transOut;
&__handle, &__handle,
&__label { &__label {
@ -73,6 +74,17 @@
flex: 1 1 0; flex: 1 1 0;
} }
&--collapsed {
flex-basis: 0px !important;
transition: all 350ms ease;
.l-pane__contents {
transition: opacity 150ms ease;
opacity: 0;
pointer-events: none;
}
}
&[class*="--horizontal"] { &[class*="--horizontal"] {
&.l-pane--collapsed { &.l-pane--collapsed {
padding-left: 0 !important; padding-left: 0 !important;
@ -81,8 +93,6 @@
} }
&[class*="--vertical"] { &[class*="--vertical"] {
flex-flow: column nowrap;
&.l-pane--collapsed { &.l-pane--collapsed {
padding-top: 0 !important; padding-top: 0 !important;
padding-top: 0 !important; padding-top: 0 !important;
@ -99,30 +109,17 @@
overflow: auto; overflow: auto;
.l-pane__contents { .l-pane__contents {
// Don't pad all nested __contents
padding: 0; padding: 0;
} }
// Create margin between elements in a pane
> [class*="__"] + [class*="__"] { > [class*="__"] + [class*="__"] {
// Create margin between elements in a pane
// Doesn't match first elem, but will match all subsequent // Doesn't match first elem, but will match all subsequent
margin-top: $interiorMargin; margin-top: $interiorMargin;
} }
} }
/************************ COLLAPSED STATE */
&--collapsed {
flex-basis: 0px !important;
min-width: 0px !important;
min-height: 0px !important;
transition: all 350ms ease;
.l-pane__contents {
transition: opacity 150ms ease;
opacity: 0;
pointer-events: none;
}
}
/************************ DESKTOP STYLES */ /************************ DESKTOP STYLES */
body.desktop & { body.desktop & {
&__handle { &__handle {
@ -325,7 +322,7 @@
</style> </style>
<script> <script>
const COLLAPSE_THRESHOLD_PX = 30; const COLLAPSE_THRESHOLD_PX = 40;
export default { export default {
props: { props: {