grassrootseconomics/openethereum
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix SectionList hovering issue (#4749)

Browse Source 
* Fix SectionList Items hover when <3 items

* Even easier...
This commit is contained in:
Nicolas Gotchac 2017-03-07 22:03:52 +01:00 committed by Jaco Greeff
parent 7638b2c9e8
commit 48e5d82186
1 changed files with 7 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
js/src/ui/SectionList/sectionList.css
View File

@ -17,7 +17,6 @@
$transition: all 0.25s; $transition: all 0.25s;
$widthNormal: 33.33%; $widthNormal: 33.33%;
$widthShrunk: 29%;
$widthExpanded: 42%; $widthExpanded: 42%;
.section { .section {
@ -39,18 +38,19 @@ $widthExpanded: 42%;
display: flex; display: flex;
justify-content: center; justify-content: center;
/* TODO: As per JS comments, the flex-base could be adjusted in the future to allow for */ /* TODO: As per JS comments, the flex-base could be adjusted in the future to allow for
/* case where <> 3 columns are required should the need arrise from a UI pov. */ /* case where <> 3 columns are required should the need arrise from a UI pov. */
.item { .item {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex: 0 1 $widthNormal; flex: 0 1 $widthNormal;
max-width: $widthNormal;
opacity: 0.85; opacity: 0.85;
padding: 0.25em; padding: 0.25em;
/* https://www.binarymoon.co.uk/2014/02/fixing-css-transitions-in-google-chrome/ */ /* https://www.binarymoon.co.uk/2014/02/fixing-css-transitions-in-google-chrome/ */
transform: translateZ(0); transform: translateZ(0);
transition: $transition; transition: $transition;
width: 0;
&:hover { &:hover {
opacity: 1; opacity: 1;
@ -58,22 +58,13 @@ $widthExpanded: 42%;
} }
} }
&:hover { .item.stretchOn:hover {
.item { flex: 0 0 $widthExpanded;
&.stretchOn { max-width: $widthExpanded;
flex: 0 1 $widthShrunk;
max-width: $widthShrunk;
&:hover {
flex: 0 0 $widthExpanded;
max-width: $widthExpanded;
}
}
}
} }
} }
} }
.section+.section { .section + .section {
margin-top: 1em; margin-top: 1em;
} }