Swap 2 box shadows for 1 radial gradient

Closes #4340

Fixes a UI glitch where the vertical parts of a box shadow would show.
This fix changes those box shadows for 1 radial gradient, where only 5px of it is shown. No more vertical shadows.
This commit is contained in:
Paul Adam Davis 2014-10-26 17:35:54 +00:00
parent 0e9d4e6792
commit 4889d04454

View File

@ -100,30 +100,22 @@
.scrolling {
.floatingheader {
box-shadow:
rgba(0,0,0,0.03) 0 1px 3px,
rgba(255, 255, 255, 0.5) 0 -1px 0 inset;
box-shadow: rgba(0, 0, 0, 0.03) 0 1px 3px;
&:before {
content: "";
height: 40px;
position: absolute;
bottom: -5px;
left: 50%;
height: 5px;
width: 80%;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -40%;
box-shadow: rgba(0,0,0,0.03) 0 2px 3px;
}
&:after {
content: "";
height: 40px;
width: 30%;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -15%;
box-shadow: rgba(0,0,0,0.02) 0 3px 4px;
background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.05) 0%,rgba(0, 0, 0, 0) 75%,rgba(0, 0, 0, 0) 100%);
background-position: 0px -5px;
background-size: 100% 200%;
z-index: -1;
}
} // .floatingheader
} // .scrolling
}//.scrolling