<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="col-md-12">
<div class="col-md-2">
<div class="panel panel-default">
<div class="panel-heading libreStatsPanelHeading">
<div class="panel-title text-center">
<span>DELIVERY METHOD</span>
<a class="fa fa-caret-down pull-right libreStatsPanelHeadingIcon" href="#deliverymethod"
data-toggle="collapse"></a>
</div>
</div>
<div class="panel-body libreStatsPanelBody collapse in" id="deliverymethod">
<div class="funkyradio">
<div class="funkyradio-primary">
<input type="radio" name="radio" id="radio1" checked/>
<label for="radio1">
<span>AVC Logistic Service UK</span></label>
<span class="sublabel">Price: 11.47 €</span>
</div>
<div class="funkyradio-primary">
<input type="radio" name="radio" id="radio2"/>
<label for="radio2">
<span>Logistic Express</span></label>
<span class="sublabel">Price: 12.67 €</span>
</div>
<div class="funkyradio-primary">
<input type="radio" name="radio" id="radio3" />
<label for="radio3">
<span>Self collect at Warehouse</span></label>
<span class="sublabel">Ipswich, Suffolk, IP3 9RR (Free)</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="panel panel-default">
<div class="panel-heading libreStatsPanelHeading">
<div class="panel-title text-center">
<span>SHIPPING ADDONS</span>
<a class="fa fa-caret-down pull-right libreStatsPanelHeadingIcon" href="#addons"
data-toggle="collapse"></a>
</div>
</div>
<div class="panel-body libreStatsPanelBody collapse in" id="addons">
<div class="funkyradio">
<div class="funkyradio-primary">
<input type="checkbox" name="checkbox" id="checkbox21" />
<label for="checkbox21">
<span>Shipping after 5 PM</span></label>
<span class="sublabel">Price: 38.46 €</span>
</div>
<div class="funkyradio-primary">
<input type="checkbox" name="checkbox" id="checkbox22" />
<label for="checkbox22">
<span>Shipping during weekend</span></label>
<span class="sublabel">Price: 64.10 €</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="panel panel-default">
<div class="panel-heading libreStatsPanelHeading">
<div class="panel-title text-center">
<span>PAYMENT METHOD</span>
<a class="fa fa-caret-down pull-right libreStatsPanelHeadingIcon" href="#paymentmethod"
data-toggle="collapse"></a>
</div>
</div>
<div class="panel-body libreStatsPanelBody collapse in" id="paymentmethod">
<div class="funkyradio">
<div class="funkyradio-primary">
<input type="radio" name="radio3" id="radio31"/>
<label for="radio31">
<span>Cash on Delivery</span></label>
<span class="sublabel">Pay with cash upon delivery.</span>
</div>
<div class="funkyradio-primary">
<input type="radio" name="radio3" id="radio32" checked/>
<label for="radio32">
<span>Direct Bank Transfer</span></label>
<span class="sublabel">Make your payment directly into our bank account and get 1.5% discount. Please use your Order ID as the payment reference. Your order won’t be shipped until the funds have cleared in our account.</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<a class="btn btn-primary pull-right mb32" href="/shop/confirmation"><span class="hidden-xs">Continue <span class="fa fa-long-arrow-right"></span></span></a>
</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.0em;
padding-left: 40px;
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 {
content: '\2714';
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 {
content: '\2714';
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;
}
.panel-body{
min-height: 300px;
}
/* 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;
}
}
}
}
*/
