ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-24 07:16:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Vertical pane resizing fixed

Browse Source 
- Vertical pane styling with significant fixes;
This commit is contained in:
charlesh88 2018-08-29 16:52:53 -07:00
parent b3ad4c4c14
commit cf89e8a86f
2 changed files with 23 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/styles-new/_global.scss
View File

@ -36,6 +36,11 @@ div {
position: relative; position: relative;
} }
/******************************* UTILITIES */
.u-contents {
display: contents;
}
/******************************* BROWSER ELEMENTS */ /******************************* BROWSER ELEMENTS */
body.desktop { body.desktop {
::-webkit-scrollbar { ::-webkit-scrollbar {

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

@ -30,7 +30,20 @@
$hitMargin: 4px; $hitMargin: 4px;
/**************************** BASE - MOBILE AND DESKTOP */ /**************************** BASE - MOBILE AND DESKTOP */
.l-multipane {
display: flex;
&--horizontal {
flex-flow: row nowrap;
}
&--vertical {
flex-flow: column nowrap;
}
}
.l-pane { .l-pane {
display: flex;
opacity: 1; opacity: 1;
pointer-events: inherit; pointer-events: inherit;
transition: transOut; transition: transOut;
@ -59,6 +72,8 @@
} }
&[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;
@ -67,11 +82,11 @@
/************************ CONTENTS */ /************************ CONTENTS */
&__contents { &__contents {
flex: 1 1 100%;
opacity: 1; opacity: 1;
padding: $interiorMargin; padding: $interiorMargin;
pointer-events: inherit; pointer-events: inherit;
transition: opacity 250ms ease 250ms; transition: opacity 250ms ease 250ms;
height: 100%;
overflow: auto; overflow: auto;
.l-pane__contents { .l-pane__contents {
@ -250,7 +265,7 @@
&[class*="-before"] { &[class*="-before"] {
> .l-pane__handle { > .l-pane__handle {
top: 0; top: 0;
//transform: translateY(floor($splitterHandleD / -2)); // Center over the pane edge transform: translateY(floor($splitterHandleD / -2)); // Center over the pane edge
} }
} }
@ -258,7 +273,7 @@
&[class*="-after"] { &[class*="-after"] {
> .l-pane__handle { > .l-pane__handle {
bottom: 0; bottom: 0;
//transform: translateY(floor($splitterHandleD / 2)); // Center over the pane edge transform: translateY(floor($splitterHandleD / 2)); // Center over the pane edge
} }
} }
} }