Button group created with radio inputs.
/////////////////////////////////////////////
//
// Button group
//
// Structure:
// <div>
// <input:radio.buttonGroup__radio>
// <label>
// ...
@mixin button__group(
$selected_bg: $color_off_white,
$selected_color: $color_secondary,
$border_radius: .15em
) {
display: flex;
flex-flow: row nowrap;
&-radio {
display: none;
&:checked {
+ label {
background-color: $selected_bg;
color: $selected_color;
}
}
}
&-label {
@include custom_transition();
border: 1px solid $selected_bg;
color: $selected_bg;
cursor: pointer;
padding: .6em .6em .5em;
text-align: center;
&:not(:last-of-type) {
border-right: 0;
}
&:first-of-type {
border-radius: $border_radius 0 0 $border_radius;
}
&:last-of-type {
border-radius: 0 $border_radius $border_radius 0;
}
}
}
.types {
&__prices {
@include button__group();
font-size: 1.4rem;
margin: 1rem auto 2rem;
}
}
<div class="types__prices">
<input
class="types__prices-radio"
type="radio"
id="{{ child._id }}"
data-ng-repeat-start="child in vm.type.children | orderBy:'priority' track by child._id"
data-ng-model="vm.selectedChild"
data-ng-value="child"
>
<label
class="types__prices-label"
for="{{ child._id }}"
data-ng-repeat-end
>
{{ ::child.price.totalCost | dollars:0 }}
</label>
</div>