<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div>
Testing out a Quiz using the radio buttons of Funky Radio/Check.
<br>
Shall Eventually add Some Fancy JScript for a Dynamic Quiz.
<hr>
</div>
<div class="row well well-lg">
<div class="text-center">
<h3>To help you decide which method applies to your company – answer the questions below</h3>
<hr>
<p>Question 1: Was the Company dissolved more than 6 years ago?</p>
<small style="font-variant:small-caps;">Placeholder: Real Content to come later </small>
</div>
<div class="col-sm-6">
<div class="funkyradio">
<div class="funkyradio-success">
<input type="radio" name="radio" id="radioY" />
<label for="radioY">Yes</label>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="funkyradio">
<div class="funkyradio-danger">
<input type="radio" name="radio" id="radioN" />
<label for="radioN">No</label>
</div>
</div>
</div>
</div>
</div>
@import('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css')
.funkyradio div {
clear: both;
overflow: hidden;
}
.funkyradio label {
width: 100%;
border-radius: 3px;
border: 1px solid #D1D3D4;
font-weight: normal;
}
.funkyradio input[type="radio"]:empty,
.funkyradio input[type="checkbox"]:empty {
display: none;
}
.funkyradio input[type="radio"]:empty ~ label,
.funkyradio input[type="checkbox"]:empty ~ label {
position: relative;
line-height: 2.5em;
text-indent: 3.25em;
margin-top: 2em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.funkyradio input[type="radio"]:empty ~ label:before,
.funkyradio input[type="checkbox"]:empty ~ label:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
}
.funkyradio input[type="radio"]:hover:not(:checked) ~ label,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label {
color: #888;
}
.funkyradio input[type="radio"]:hover:not(:checked) ~ label:before,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before {
text-indent: .9em;
color: #C2C2C2;
}
.funkyradio input[type="radio"]:checked ~ label,
.funkyradio input[type="checkbox"]:checked ~ label {
color: #777;
}
.funkyradio input[type="radio"]:checked ~ label:before,
.funkyradio input[type="checkbox"]:checked ~ label:before {
text-indent: .9em;
color: #333;
background-color: #ccc;
}
.funkyradio input[type="radio"]:focus ~ label:before,
.funkyradio input[type="checkbox"]:focus ~ label:before {
box-shadow: 0 0 0 3px #999;
}
.funkyradio-default input[type="radio"]:checked ~ label:before,
.funkyradio-default input[type="checkbox"]:checked ~ label:before {
color: #333;
background-color: #ccc;
}
.funkyradio-primary input[type="radio"]:checked ~ label:before,
.funkyradio-primary input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #337ab7;
}
.funkyradio-success input[type="radio"]:checked ~ label:before,
.funkyradio-success input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #5cb85c;
}
.funkyradio-danger input[type="radio"]:checked ~ label:before,
.funkyradio-danger input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #d9534f;
}
.funkyradio-warning input[type="radio"]:checked ~ label:before,
.funkyradio-warning input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #f0ad4e;
}
.funkyradio-info input[type="radio"]:checked ~ label:before,
.funkyradio-info input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #5bc0de;
}
/* SCSS STYLES */
/*
.funkyradio {
div {
clear: both;
overflow: hidden;
}
label {
width: 100%;
border-radius: 3px;
border: 1px solid #D1D3D4;
font-weight: normal;
}
input[type="radio"],
input[type="checkbox"] {
&:empty {
display: none;
~ label {
position: relative;
line-height: 2.5em;
text-indent: 3.25em;
margin-top: 2em;
cursor: pointer;
user-select: none;
&:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
}
}
}
&:hover:not(:checked) ~ label {
color: #888;
&:before {
content: '\2714';
text-indent: .9em;
color: #C2C2C2;
}
}
&:checked ~ label {
color: #777;
&:before {
content: '\2714';
text-indent: .9em;
color: #333;
background-color: #ccc;
}
}
&:focus ~ label:before {
box-shadow: 0 0 0 3px #999;
}
}
&-default {
input[type="radio"],
input[type="checkbox"] {
&:checked ~ label:before {
color: #333;
background-color: #ccc;
}
}
}
&-primary {
input[type="radio"],
input[type="checkbox"] {
&:checked ~ label:before {
color: #fff;
background-color: #337ab7;
}
}
}
&-success {
input[type="radio"],
input[type="checkbox"] {
&:checked ~ label:before {
color: #fff;
background-color: #5cb85c;
}
}
}
&-danger {
input[type="radio"],
input[type="checkbox"] {
&:checked ~ label:before {
color: #fff;
background-color: #d9534f;
}
}
}
&-warning {
input[type="radio"],
input[type="checkbox"] {
&:checked ~ label:before {
color: #fff;
background-color: #f0ad4e;
}
}
}
&-info {
input[type="radio"],
input[type="checkbox"] {
&:checked ~ label:before {
color: #fff;
background-color: #5bc0de;
}
}
}
}
*/
/*Will add JScript for Dynamic Quiz into this box*/
