<div class="prodprice">
<div class="prodlicen">
<label for="radItem1" class="md-radio has--add-text">
<input type="radio" id="radItem1" name="radItem[]" class="md-radio__input">
<span class="md-radio__custom">
<span class="md-radio__custom-inner"></span>
</span>
<div class="md-radio__label-text">
Single site license
<!-- <small class="md-radio__add-text">Price: 79$USD</small> -->
</div>
</label>
<label for="radItem2" class="md-radio has--add-text">
<input type="radio" id="radItem2" name="radItem[]" class="md-radio__input">
<span class="md-radio__custom">
<span class="md-radio__custom-inner"></span>
</span>
<div class="md-radio__label-text">
5 Site License
<!-- <small class="md-radio__add-text">Price: 99$USD</small> -->
</div>
</label>
<label for="radItem3" class="md-radio has--add-text">
<input type="radio" id="radItem3" name="radItem[]" class="md-radio__input">
<span class="md-radio__custom">
<span class="md-radio__custom-inner"></span>
</span>
<div class="md-radio__label-text">
Developers License
<!-- <small class="md-radio__add-text">Price: 499$USD</small> -->
</div>
</label>
</div><!-- prodlicen -->
<div class="text_align">
<h3 class="price license_price themecolor">€79</h3>
</div>
</div><!-- prodprice -->
.prodprice {
display: flex;
justify-content: space-between;
}
.product:first-child {
flex-basis: calc(100% - 70px - 30px);
}
.prodprice:nth-child(2) {
flex-basis: 70px;
}
.prodlicen {
display: flex;
flex-wrap: wrap;
}
/* .md-radio {
position: relative;
display: inline-block;
font-size: 20px;
line-height: 46px;
cursor: pointer;
} */
.md-radio {
/* position: relative; */
display: flex;
flex-basis: 200px;
flex-grow:1;
font-size: 20px;
line-height: 46px;
cursor: pointer;
}
.md-radio:hover .md-radio__custom-inner {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: 0.5;
}
.md-radio__input {
display: none;
/* width: 1px;
height: 1px;
border: none;
-webkit-transition: none;
transition: none;
opacity: 0; */
}
.md-radio__input:checked + .md-radio__custom {
border-color: #F16334;
-webkit-transform: scale(1);
transform: scale(1);
}
.md-radio__input:checked + .md-radio__custom .md-radio__custom-inner {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.md-radio__input:focus + .md-radio__custom .md-radio__custom-inner {
background-color: #F16334;
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.md-radio__custom {
/* position: relative; */
display: flex;
/* float: left; */
/* clear: left; */
box-sizing: initial;
margin: 8px;
width: 24px;
height: 24px;
background-color: #fff;
border: 3px solid #cccccc;
border-radius: 50%;
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-transform: scale(0.75);
transform: scale(0.75);
}
.md-radio__custom-inner {
width: 16px;
height: 16px;
display: block;
margin: 4px;
background-color: #F16334;
border-radius: 50%;
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
.md-radio__label-text {
display: inline-block;
/* line-height: 1.125; */
}
/* .md-radio.has--add-text .md-radio__label-text {
padding-top: 7px;
} */
.md-radio.has--add-text .md-radio__add-text {
display: block;
padding-top: 2px;
color: #5b5b5b;
line-height: 1;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.