<fieldset class="style-select ">
<legend class="style-select__legend-label text-small">style</legend>
<div class="style-select__inner">
<div class="style-select__item"><input class="style-select__input" type="radio" name="style" id="bold" value="bold" data-font=""><label class="style-select__label" for="bold">Bold</label><span class="style-select__delim">/</span></div>
<div class="style-select__item"><input class="style-select__input" type="radio" name="style" id="italic" value="italic" data-font=""><label class="style-select__label" for="italic">Italic</label><span class="style-select__delim">/</span></div>
<div class="style-select__item"><input class="style-select__input" type="radio" name="style" id="normal" value="normal" checked="checked" data-font=""><label class="style-select__label" for="normal">Normal</label></div>
</div>
</fieldset>
<fieldset class="style-select {{ class }} {{ modifier }}">
<legend class="style-select__legend-label text-small">{{ data.label }}</legend>
<div class="style-select__inner">
{% for item in data.items %}
{% spaceless %}
<div class="style-select__item">
<input class="style-select__input" type="radio" name="{{ item.name }}" id="{{ item.id }}" value="{{ item.value }}" {% if item.isSelected %} checked="checked" {% endif %} data-font="{{ item.path }}">
{% if item.label %}
<label class="style-select__label" for="{{ item.id }}">
{{- item.label -}}
</label>
{% if not loop.last %}
<span class="style-select__delim">/</span>
{% endif %}
{% endif %}
</div>
{% endspaceless %}
{% endfor %}
</div>
</fieldset>
{
"language": "en-US",
"data": {
"label": "style",
"items": [
{
"id": "bold",
"name": "style",
"value": "bold",
"label": "Bold",
"rule": "font-weight",
"style": "bold"
},
{
"id": "italic",
"name": "style",
"value": "italic",
"label": "Italic",
"rule": "font-style",
"style": "italic"
},
{
"id": "normal",
"name": "style",
"value": "normal",
"label": "Normal",
"rule": "font-style",
"style": "normal",
"isSelected": true
}
]
}
}
.style-select__inner {
display: flex;
}
.style-select__legend-label {
text-transform: uppercase;
opacity: .6;
cursor: default;
@include bp(sm-min) {
margin-bottom: 4px;
}
}
.style-select__item {
position: relative;
}
.style-select__input {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
visibility: hidden;
}
.style-select__label {
position: relative;
cursor: pointer;
&:before,
&:after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 0;
border-bottom: 1px solid var(--color-text);
transition: width $transition-duration $transition-easing, border-bottom $transition-duration $transition-easing;
}
html[data-whatintent='keyboard'] .style-select__input:focus + & {
outline: 2px solid var(--color-compliment);
}
.style-select__input:focus + &:before,
&:hover:before {
@media (hover: hover) {
width: 100%;
}
}
.style-select__input:checked + & {
&:before {
left: auto;
right: 0;
width: 0;
}
&:after {
width: 100%;
transition: width $transition-duration $transition-easing $transition-duration, border-bottom $transition-duration $transition-easing;
}
}
}
.style-select__delim {
padding: 0 8px;
}
import './style-select.scss';