Cookiebox

Html


<div class="cookie-notification" data-cookie-box>
	<div class="flex--end">
		<button class="cookie-notification__close" data-close-cookie>
			<img src="../assets/images/icons/close-button.svg" />
		</button>
	</div>
	<p>Lorem ipsum</p>
	<div class="row">
		<div class="col-lg-4 col-md-6">
			<a href="#" class="main-button" data-accept-cookie>
				<span class="main-button__text">Accept cookie</span>
			</a>
		</div>
		<div class="col-lg-4 col-md-6 flex--vertical-center">
			<a href="#" class="cookie-notification__link">Read more</a>
		</div>
	</div>
</div>

Scss

		
.cookie-notification {
	background-color: $color-white;
	padding: 2rem 3rem;
	box-shadow: rgba(0,0,0,.3) 0px 0px 10px;
	z-index: 9;
	transition: $transition;

	&.is-hidden {
		transform: translateX(-150%);
	}

	&__close {
		background-color: transparent;

		img {
			height: 1.2rem;
			height: 1.2rem;
		}
	}

	&__link{
		text-decoration: underline;
		font-size: 1.6rem;
	}
}