Flat Theme

dabblet.css

/**
 * Flat 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 {
  position: relative;
  display: block;
  padding: 4px 32px;
  margin: 6px 0;
  line-height: 20px;
  color: #004b60;
  cursor: pointer;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  background: #00b7ea;
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.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: '\2022';
  display: none;
  position: absolute;
  width: 16px;
  right: 8px;
  top: 50%;
  margin-top: -10px;
  font-size: 24px;
  text-align: center;
}

.option-list label > span:hover {
  color: white;
}

.option-list input[type=radio]:checked + span {
  color: white;
}

.option-list input[type=radio]:checked + span:after {
  display: block;
}

dabblet.html

<div class="option-list">
	<label>
		<input name="option" type="radio">
		<span><span>Option 1</span></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"}