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

Splitter styling WIP

Browse Source 
- Hover styling
This commit is contained in:
charlesh88 2018-08-28 09:09:49 -07:00
parent 022126ca21
commit cf160c27e9
2 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -242,13 +242,15 @@ $splitterGrippyD: ($splitterHandleD - 4, 75px, 50px); // thickness, length, min-
$colorSplitterBaseBg: $colorBodyBg;
$colorSplitterBg: pullForward($colorSplitterBaseBg, 20%);
$colorSplitterFg: $colorBodyBg;
$colorSplitterHover: $colorKey; // pullForward($colorSplitterBg, $hoverRatioPercent * 2);
$colorSplitterActive: $colorKey;
$colorSplitterButtonBg: rgba($colorBodyFg, 0.1); //pullForward($colorSplitterBaseBg, 20%);
$colorSplitterButtonFg: $colorBodyFg;
$colorSplitterButtonHoverBg: rgba($colorKey, 0.5);
$colorSplitterButtonHoverFg: $colorBodyBg;
$colorSplitterGrippy: pullForward($colorSplitterBaseBg, 30%);
$splitterShdw: none;
$splitterEndCr: none;
$colorSplitterHover: pullForward($colorSplitterBg, $hoverRatioPercent * 2);
$colorSplitterActive: $colorKey;
// Minitabs
$colorMiniTabBg: $colorSplitterBg;

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

@ -81,18 +81,14 @@
}
}
/************************ MOBILE-ONLY STYLES */
/************************ DESKTOP STYLES */
body.desktop & {
//@include test(blue, 0.1);
&__handle {
background: $colorSplitterBg;
display: block;
position: absolute;
z-index: 20;
transition: $transOut;
&:before {
content: '';
@ -100,17 +96,29 @@
position: absolute;
z-index: -1;
}
&:hover {
background: $colorSplitterHover;
transition: $transIn;
}
}
&__collapse-button {
background: $colorSplitterButtonBg;
color: $colorSplitterButtonFg;
transition: $transOut;
&:before {
content: $glyph-icon-arrow-right;
font-family: symbolsfont;
font-size: .5rem;
}
&:hover {
background: $colorSplitterButtonHoverBg;
color: $colorSplitterButtonHoverFg;
transition: $transIn;
}
}
&[class*="--collapsed"] {