ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-16 14:18:16 +00:00
Code Issues Actions 4 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
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; $colorSplitterBaseBg: $colorBodyBg;
$colorSplitterBg: pullForward($colorSplitterBaseBg, 20%); $colorSplitterBg: pullForward($colorSplitterBaseBg, 20%);
$colorSplitterFg: $colorBodyBg; $colorSplitterFg: $colorBodyBg;
$colorSplitterHover: $colorKey; // pullForward($colorSplitterBg, $hoverRatioPercent * 2);
$colorSplitterActive: $colorKey;
$colorSplitterButtonBg: rgba($colorBodyFg, 0.1); //pullForward($colorSplitterBaseBg, 20%); $colorSplitterButtonBg: rgba($colorBodyFg, 0.1); //pullForward($colorSplitterBaseBg, 20%);
$colorSplitterButtonFg: $colorBodyFg; $colorSplitterButtonFg: $colorBodyFg;
$colorSplitterButtonHoverBg: rgba($colorKey, 0.5);
$colorSplitterButtonHoverFg: $colorBodyBg;
$colorSplitterGrippy: pullForward($colorSplitterBaseBg, 30%); $colorSplitterGrippy: pullForward($colorSplitterBaseBg, 30%);
$splitterShdw: none; $splitterShdw: none;
$splitterEndCr: none; $splitterEndCr: none;
$colorSplitterHover: pullForward($colorSplitterBg, $hoverRatioPercent * 2);
$colorSplitterActive: $colorKey;
// Minitabs // Minitabs
$colorMiniTabBg: $colorSplitterBg; $colorMiniTabBg: $colorSplitterBg;

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

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