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

Splitter refinements / mixin fix

Browse Source 
- Splitter with resize grippy;
- Fixed @background-image mixins;
This commit is contained in:
charlesh88 2018-08-17 13:51:53 -07:00
parent 5a07f0d2b5
commit e6be02fb8d
4 changed files with 42 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -235,14 +235,16 @@ $scrollbarThumbColorMenu: pullForward($colorMenuBg, 10%);
$scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
// Splitter
$splitterD: 10px;
$splitterD: 7px;
$splitterCollapseBtnD: ($splitterD, 30px);
$splitterDSm: 8px; // Smaller splitter, used inside elements like a Timeline view
$splitterHandleD: 3px;
$splitterHandleD: 7px;
$splitterGrippyD: ($splitterHandleD - 4, 75px, 50px); // thickness, length, min-length
$colorSplitterBaseBg: $colorBodyBg;
$colorSplitterBg: pullForward($colorSplitterBaseBg, 15%);
$colorSplitterBg: pullForward($colorSplitterBaseBg, 10%);
$colorSplitterFg: $colorBodyBg;
$colorSplitterButtonBg: pullForward($colorSplitterBaseBg, 20%);
$colorSplitterGrippy: pullForward($colorSplitterBaseBg, 30%);
$splitterShdw: none;
$splitterEndCr: none;
$colorSplitterHover: pullForward($colorSplitterBg, $hoverRatioPercent * 2);

8
src/styles-new/_mixins.scss
View File

@ -32,23 +32,23 @@
}
@mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) {
@include background-image(linear-gradient(-45deg,
background-image: linear-gradient(-45deg,
rgba($c, $a) 25%, transparent 25%,
transparent 50%, rgba($c, $a) 50%,
rgba($c, $a) 75%, transparent 75%,
transparent 100%
));
);
background-repeat: repeat;
background-size: $d $d;
}
@mixin bgStripes($c: yellow, $a: 0.1, $bgsize: 5px, $angle: 90deg) {
@include background-image(linear-gradient($angle,
background-image: linear-gradient($angle,
rgba($c, $a) 25%, transparent 25%,
transparent 50%, rgba($c, $a) 50%,
rgba($c, $a) 75%, transparent 75%,
transparent 100%
));
);
background-repeat: repeat;
background-size: $bgsize $bgsize;
}

6
src/ui/components/controls/multipane.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="multipane"
<div class="l-multipane"
:class="{
'multipane--vertical': type === 'vertical',
'multipane--horizontal': type === 'horizontal'
'l-multipane--vertical': type === 'vertical',
'l-multipane--horizontal': type === 'horizontal'
}">
<slot></slot>
</div>

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

@ -53,6 +53,15 @@
left: $hitMargin * -1;
}
&:after {
// Grippy
min-height: nth($splitterGrippyD, 3);
height: nth($splitterGrippyD, 2);
width: nth($splitterGrippyD, 1);
top: 50%; left: ($splitterHandleD - nth($splitterGrippyD, 1)) / 2;
transform: translateY(-50%);
}
&--before {
// Handle at left edge of containing pane
left: 0;
@ -74,7 +83,6 @@
}
[class*="collapse-button"] {
border-bottom-left-radius: $controlCr;
height: nth($splitterCollapseBtnD, 2);
width: nth($splitterCollapseBtnD, 1);
@ -119,6 +127,15 @@
left: 0;
}
&:after {
// Grippy
min-width: nth($splitterGrippyD, 3);
width: nth($splitterGrippyD, 2);
height: nth($splitterGrippyD, 1);
left: 50%; top: ($splitterHandleD - nth($splitterGrippyD, 1)) / 2;
transform: translateX(-50%);
}
&--before {
// Handle at top edge of containing pane
top: 0;
@ -160,6 +177,16 @@
z-index: -1;
}
&:after {
// Grippy affordance
content: '';
background: $colorSplitterGrippy;
border-radius: 5px;
display: block;
position: absolute;
z-index: 1;
}
&:active, &:hover {
transition: $transIn;
}
@ -180,7 +207,7 @@
justify-content: center;
position: absolute;
z-index: 3;
background: $colorSplitterButtonBg;
background: $colorSplitterGrippy;
transition: $transOut;
&:active, &:hover {
@ -198,7 +225,7 @@
&:before {
color: $colorSplitterFg;
display: block;
font-size: 0.7em;
font-size: 0.6em;
font-family: symbolsfont;
}
}