Solid CSS foundation color/size swatch in details
Solid CSS foundation color/size swatch in details

/* Color and Size Options TRUE/FALSE container strip on Category Pages */
.colorOptionsContainer, 
.sizeOptionsContainer {	
	display: block;
	position: absolute;
	left: auto;
	color: white;
	width: 100%;
	line-height: 30px;
	text-transform: uppercase;
	font-size: 14px;
	/* default fallback */
	background: rgb(0, 0, 0) transparent;
	/* nice browsers */
	background: rgba(0, 0, 0, 0.6);
}
.colorOptionsContainer {
	top: 230px; 
}
.sizeOptionsContainer {
	top: 180px; 
}

/* Color and Size Options SWATCHES containers */
.catColorSwatch {
	cursor: none; 
}
.catColorSwatch ul {
	padding-left: 0;
	list-style-type: none; 
	margin: 0; 
}
.catColorSwatch ul li.swatch {
	float: left; 
	display: inline-block !important; 
	padding: 0; 
	width: 26px; 
}
.catColorSwatch ul li.swatch .swatchColours {
	position: relative; 
	display: inline-block !important;
	margin: 0 !important;
	padding: 2px !important; 
}
.catColorSwatch ul li.swatch .swatchColours .swatchColour {
	width: 21px;
	display: block;
}
.catColorSwatch ul li.swatch label {
	position: relative; 
	margin: 0; 
/* 	cursor: pointer; */
}
.catColorSwatch ul li.swatch label div.radio {
	display: none; 
}
.catColorSwatch ul li.swatch input {
	height: 0;
	overflow: hidden;
	z-index: -10000;
	position: absolute;
	float: none;
}
.catColorSwatch .swatch .name {
	display: none;
}
.catSizeSwatch {
	clear: both; 
}
.catSizeSwatch ul {
	margin: 0; 
}
.catSizeSwatch ul li {
	display: inline; 
	padding: 0; 
}
.catSizeSwatch ul li label {
	display: inline-block; 
	border: 1px solid #eeeeee; 
	padding: 2px 6px; 
	margin: 0; 
}
.catSizeSwatch ul li label div.radio {
	display: none; 
}
iamandrebulatov/BC-Category-Page-Color-Swatch