Fix SectionList hovering issue (#4749)

* 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

View File

@ -17,7 +17,6 @@
$transition: all 0.25s;
$widthNormal: 33.33%;
$widthShrunk: 29%;
$widthExpanded: 42%;
.section {
@ -39,18 +38,19 @@ $widthExpanded: 42%;
display: flex;
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. */
.item {
box-sizing: border-box;
display: flex;
flex: 0 1 $widthNormal;
max-width: $widthNormal;
opacity: 0.85;
padding: 0.25em;
/* https://www.binarymoon.co.uk/2014/02/fixing-css-transitions-in-google-chrome/ */
transform: translateZ(0);
transition: $transition;
width: 0;
&:hover {
opacity: 1;
@ -58,22 +58,13 @@ $widthExpanded: 42%;
}
}
&:hover {
.item {
&.stretchOn {
flex: 0 1 $widthShrunk;
max-width: $widthShrunk;
&:hover {
.item.stretchOn:hover {
flex: 0 0 $widthExpanded;
max-width: $widthExpanded;
}
}
}
}
}
}
.section+.section {
.section + .section {
margin-top: 1em;
}