Panel

dabblet.css

/**
 * Panel
 */

body {
	font-family: sans-serif;
}

.panel {
	margin: 10px;
}

.panel__header {
	max-width: 250px;
	padding: 0 30px;
	margin: 0;
	
	line-height: 34px;
	color: white;
	font-size: 15px;
	font-weight: bold;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
	
	border-radius: 8px 9px 0 0;
	background: linear-gradient(to bottom, rgb(73, 98, 99) 0%, rgb(103, 143, 139) 100%);
}

.panel__body {
	padding: 10px;
	min-height: 200px;
	
	color: white;
	
	border: solid 2px #4b6062;
	border-radius: 0 8px 8px;
	background: #2b383c;
	
	box-shadow: inset 20px 20px 20px 0 rgba(255, 255, 255, 0.1),
				inset -20px -20px 20px 0 rgba(0, 0, 0, 0.1);
}

.panel__justification {
	width: 75%;
	padding: 15px 20px;
	margin: 0 auto;
	
	font-size: 13px;
	text-align: center;
	
	border-radius: 8px;
	box-shadow: inset 15px 15px 15px 0 rgba(0, 0, 0, 0.3),
				inset -15px -15px 15px 0 rgba(255, 255, 255, 0.1);
			
}

.panel__justification input[type=text] {
	padding: 3px;
	min-width: 200px;
	
	line-height: 20px;
	
	border: none;
	border-radius: 4px;
	background: rgb(32, 42, 45);
	box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.5);
}

.option-list {
  counter-reset: options;
  margin-bottom: 20px;
}

.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 70px 2px 32px;
  margin: 4px 0;
  
  line-height: 20px;
  font-weight: bold;
  color: rgb(0, 60, 0);
  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, rgb(132, 168, 132) 20%, rgb(52, 135, 52) 50%, rgb(0, 124, 0) 51%, rgb(0, 196, 0) 75%);
  border-radius: 10px;
  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: 8px;
  background: rgb(0, 153, 0);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

.option-list label > span:before {
  content: counter(options);
  position: absolute;
  width: 16px;
  left: 8px;
  top: 50%;
  margin-top: -10px;
  
  font-size: 20px;
  font-weight: bold;
  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;
}

.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="panel">
	<h3 class="panel__header"><i class="icon"></i> Your options are:</h3>
	
	<div class="panel__body">
		<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>

		<div class="panel__justification">
			<label>Look for other options: <input type="text" placeholder="Enter keywords here">
		</div>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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