A left column sidebar has its drop shadow on the wrong side
Opened this issue · 0 comments
NeilBrommer commented
A sidebar on the right puts the drop shadow on the inside edge (between the columns):
However a left sidebar puts the drop shadow on the outside edge (CodePen example):
This is the SCSS I'm using to fix this (CodePen example):
.wsu-row--sidebar-left {
.wsu-column--style-sidebar {
border-left: none;
border-right: 1px solid #e5e5e5;
&::before {
display: none;
}
&::after {
content: "";
position: absolute;
display: block;
top: 0;
bottom: 0;
right: -30px;
width: 30px;
height: auto;
background: linear-gradient(
to left,
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 0.05) 100%
);
}
}
}
And this is what the result looks like: