wsuwebteam/web-design-system

A left column sidebar has its drop shadow on the wrong side

Opened this issue · 0 comments

A sidebar on the right puts the drop shadow on the inside edge (between the columns):

image

However a left sidebar puts the drop shadow on the outside edge (CodePen example):

image

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:

image