Fancy Theme

dabblet.css

/**
 * Fancy Theme
 */

body {
	font-family: sans-serif;
}

.option-list {
	counter-reset: options;
	margin-top: 50px;
}

.option-list label {
	counter-increment: options;
	display: block;
}

.option-list input[type=radio] {
	display: none;
}

.option-list label > span {
	display: block;
	position: relative;
	padding: 8px 8px 8px 32px;
	margin: 4px 60px 4px 0;
	line-height: 20px;
	color: #496d00;
	cursor: pointer;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3);
	background-image: linear-gradient(to bottom, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%);
	border: solid 1px #72aa00;
	border-radius: 8px 0 0 8px;
	box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), 0 3px 3px rgba(0, 0, 0, 0.25);
}

.option-list label > span:before {
	content: counter(options);
	position: absolute;
	width: 16px;
	left: 8px;
	top: 50%;
	margin-top: -10px;
	text-align: center;
}

.option-list label > span:after {
	content: '';
	position: absolute;
	width: 15px;
	height: 100%;
	right: -30px;
	top: -1px;
	
	background: linear-gradient(to bottom, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%);
	border: solid 1px #72aa00;
	border-radius: 0 8px 8px 0;
	box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), 0 3px 3px rgba(0, 0, 0, 0.25);
	
	transition: all .3s ease-in-out;
}
.option-list input[type=radio]:checked + span:after {
	right: -17px;
	background: linear-gradient(to bottom, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%);
	box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.8), 0 0 25px #6db3f2;
	border-color: #3690f0;
}

dabblet.html

<div class="option-list">
	<label>
		<input name="option" type="radio">
		<span>Option 1</span>
	</label>
	<label>
		<input name="option" type="radio">
		<span><span>Option 2</span></span>
	</label>
	<label>
		<input name="option" type="radio">
		<span><span>Option Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae blanditiis consequuntur explicabo harum ipsa iste laboriosam laborum natus numquam omnis porro quasi ratione repudiandae, sapiente, sint suscipit velit voluptatem!</span></span>
	</label>
	<label>
		<input name="option" type="radio">
		<span><span>Option 4</span></span>
	</label>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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