Standardization status

dabblet.css

/**
 * Standardization status
 */

body {
	background: #f9f7f3;
	font-size: 14px;
}

/* Don't copy this rule, it’s just for the demo */
.standardization_status {
	margin: 50px 8px !important;
	float: left !important;
}

.standardization_status {
	position: relative;
	float: right;
	width: 13px;
	height: 13px;
	padding: 15px;
	background: url(http://docs.webplatform.org/w/skins/webplatform/images/standardization-status.svg)
	            hsl(40, 34%, 88%);
	background-size: 100% 700%;
	margin: 13px 0 15px;
	white-space: nowrap;
	border-radius: 50%;
	font-size: 0;
	color: transparent;
	box-shadow: 0 -1px 2px 1px hsla(40, 34%, 30%, .2) inset,
	            0 1px white, 0 0 0 10px #f9f7f3;
}

	.standardization_status[title="W3C Working Draft"] {
		background-position: 0 -100%;
	}
	
	.standardization_status[title="W3C Last Call Working Draft"] {
		background-position: 0 -200%;
	}
	
	.standardization_status[title="W3C Candidate Recommendation"] {
		background-position: 0 -300%;
	}
	
	.standardization_status[title="W3C Proposed Recommendation"] {
		background-position: 0 -400%;
	}
	
	.standardization_status[title="W3C Recommendation"] {
		background-image: none;
		box-shadow: 
		        0 -1px 2px 1px hsla(40, 34%, 30%, .2) inset,
		        0 0 0 7px #005A9C inset,
	            0 1px white, 0 0 0 10px #f9f7f3;
	}
	
	.standardization_status[title="Mixed"] {
		background-position: 0 -500%;
	}
	
	.standardization_status[title="Deprecated"] {
		background-position: 0 -600%;
	}
	
	.standardization_status[title="Non-Standard"] {
		background-image: none;
		box-shadow: 
		        0 -1px 2px 1px hsla(40, 34%, 30%, .2) inset,
		        0 0 0 7px #e00 inset,
	            0 1px white, 0 0 0 10px #f9f7f3;
	}
	
	.standardization_status[title="De Facto Standard"] {
		background-image: none;
		box-shadow: 
		        0 -1px 2px 1px hsla(40, 34%, 30%, .2) inset,
		        0 0 0 7px #1f9374 inset,
	            0 1px white, 0 0 0 10px #f9f7f3;
	}

		.standardization_status:before {
			content: url(http://docs.webplatform.org/w/skins/webplatform/images/w3c-small.svg);
			position: absolute;
			top: 13px;
			left: 10px;
			text-align: center;
		}
		
		.standardization_status[title^="W3C Last Call Working Draft"]:after,
		.standardization_status[title^="W3C Recommendation"]:after {
			content: '';
			position: absolute;
			left: 50%;
			width: 7px;
			height: 7px;
			margin-left: -6.5px;
			background: white;
			border: 3px solid #005A9C;
			border-radius: 50%;
		}
		
		.standardization_status[title^="W3C Last Call Working Draft"]:after {
			bottom: -3px; 
		}
		
		.standardization_status[title^="W3C Recommendation"]:after {
			top: -3px;	
		}
		
		.standardization_status[title^="Non-Standard"]:after,
		.standardization_status[title^="De Facto Standard"]:after,
		.standardization_status[title^="Experimental"]:after {
			content: '';
			position: absolute;
			top: 50%; right: 8px; left: 8px;
			border-top: 4px hsla(0, 100%, 40%, .8) solid;
			margin-top: -3px;
		}

dabblet.html

<span class="standardization_status" title="W3C Editor Draft">W3C Editor Draft</span>
<span class="standardization_status" title="W3C Working Draft">W3C Working Draft</span>
<span class="standardization_status" title="W3C Last Call Working Draft">W3C Last Call Working Draft</span>
<span class="standardization_status" title="W3C Candidate Recommendation">W3C Candidate Recommendation</span>
<span class="standardization_status" title="W3C Proposed Recommendation">W3C Proposed Recommendation</span>
<span class="standardization_status" title="W3C Recommendation">W3C Recommendation</span>
<span class="standardization_status" title="Mixed">Mixed</span>
<span class="standardization_status" title="Deprecated">Deprecated</span>
<span class="standardization_status" title="Non-Standard">Non-Standard</span>
<span class="standardization_status" title="De Facto Standard">De Facto Standard</span>
<span class="standardization_status" title="Experimental">Experimental</span>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}

Saw this gist on GitHub News Feed, remembered that I wanted to do the same thing but using only gradients, so, just for fun: http://dabblet.com/gist/5922484 :)

Very cool Roman!! Though we’re not using -prefix-free on WebPlatform.org, so it would end up needing too much code for that use case...

Stumbled on this trough the News feed of GitHub as well. Made a few little tweaks that may help make this a tiny bit more maintainable. Just an idea.

http://dabblet.com/gist/5936438

Removed padding and added negative text-indent to the main element. Also added text-align: center.

Vertical alignment is controlled by setting the proper line-height for the :before element.

This way the circles can be made bigger by setting 3 values: (With SASS it becomes one number)

.standardization_status {
    width: 4em;
    height: 4em;
}

.standardization_status:before {
    line-height: 4em;
}