Homerapp - colors

by PhilQ

HTML

<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

SCSS

* { margin: 0; padding: 0; box-sizing: border-box; }

$colors: (
	"green": #45cd98,
	"yelllow": #f9e5a5,
	"orange": #fac694,
	"red": #e37762,
	"darkred": #752e38,
);


// @import "node_modules/bootstrap/scss/bootstrap";

ul {
	list-style: none;
	width: 100%;
	border: 5px solid #fff;

	li {
		float: left;
		display: inline-block;
		width: 25%;
		height: auto;
		border: 5px solid #fff;
		
		&:before {
			content: '';
			display: inline-block;
			width: 100%;
			padding-top: 100%;
		}
		
		&:nth-child(1) {
			background: map-get($colors, "green");
		}
		
		&:nth-child(2) {
			background: mix(map-get($colors, "green"), #fff, 60%);
		}
		
		&:nth-child(3) {
			background: mix(map-get($colors, "green"), #fff, 25%);
		}
		
		&:nth-child(4) {
			background: mix(map-get($colors, "green"), #fff, 10%);
		}
		
		&:nth-child(5) {
			background: map-get($colors, "yelllow");
		}
		
		&:nth-child(6) {
			background: map-get($colors, "orange");
		}
		
		&:nth-child(7) {
			background: map-get($colors, "red");
		}
		
		&:nth-child(8) {
			background: map-get($colors, "darkred");
		}
	}
}