Default Theme

dabblet.css

/**
 * Default Theme
 */
 
 body {
   font-family: sans-serif;
   font-size: 16px;
 }
 
.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: 2px 32px;
  margin: 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: #72aa00;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 51%, rgba(0, 0, 0, 0.2) 100%);
  border: solid 1px #72aa00;
  border-radius: 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 > span {
  display: block;
  padding: 3px 5px;
  background: #72aa00;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
}

.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 {
  transition: all .1s ease-in-out;
  color: #edffc9;
  background-color: #c7d769;
  border-color: #87c900;
}

.option-list input[type=radio]:checked + span {
  color: white;
  background-image: linear-gradient(to bottom, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%);
  border-color: #3690f0;
}

.option-list input[type=radio]:checked + span > span {
  background-color: #3690f0;
}

.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":"all"}