<div class="size-chart">
<div class="size-chart__product">
<img src="/images/product/1e2a613963ef4ecd8a128dcbdabfde2257de004f_BG_ASSASSINSCREED_BLACK_01.jpeg" />
</div>
<div class="size-chart__guide">
<h3 class="size-chart__title">Maattabel</h3>
<div class="size-chart__sizes">
<div class="size-chart__size">
<div class="size-chart__label">Maat</div>
<div class="size-chart__item">8 Oz</div>
<div class="size-chart__item">10 Oz</div>
<div class="size-chart__item">12 Oz</div>
<div class="size-chart__item">14 Oz</div>
<div class="size-chart__item">16 Oz</div>
</div>
<div class="size-chart__values">
<div class="size-chart__values--list">
<input type="radio" id="toggleSizeChartA" name="size-chart-switch-input" class="size-chart__switch-item" value="KG" style="visibility:hidden" checked="checked" />
<div class="size-chart__switch--items switch-items">
<div class="size-chart__label">Gewicht in KG</div>
<div class="size-chart__item">vanaf 46 kg</div>
<div class="size-chart__item">46 - 54 kg</div>
<div class="size-chart__item">55 - 70 kg</div>
<div class="size-chart__item">71 - 85 kg</div>
<div class="size-chart__item">86 - 90 kg</div>
</div>
</div>
<div class="size-chart__values--list">
<input type="radio" id="toggleSizeChartB" name="size-chart-switch-input" class="size-chart__switch-item" value="LB" style="visibility:hidden" />
<div class="size-chart__switch--items switch-items">
<div class="size-chart__label">Gewicht in Lb</div>
<div class="size-chart__item">vanaf 101 lb</div>
<div class="size-chart__item">101 - 119 lb</div>
<div class="size-chart__item">121 - 154 lb</div>
<div class="size-chart__item">157 - 187 lb</div>
<div class="size-chart__item">190 - 198 lb</div>
</div>
</div>
</div>
</div>
<div class="size-chart__switch-box">
<label for="toggleSizeChartA">KG</label>
<label for="toggleSizeChartB">LB</label>
</div>
</div>
</div>
<div class="size-chart">
<div class="size-chart__product">
<img src="/images/product/1e2a613963ef4ecd8a128dcbdabfde2257de004f_BG_ASSASSINSCREED_BLACK_01.jpeg" />
</div>
<div class="size-chart__guide">
<h3 class="size-chart__title">Maattabel</h3>
<div class="size-chart__sizes">
<div class="size-chart__size">
<div class="size-chart__label">Maat</div>
<div class="size-chart__item">8 Oz</div>
<div class="size-chart__item">10 Oz</div>
<div class="size-chart__item">12 Oz</div>
<div class="size-chart__item">14 Oz</div>
<div class="size-chart__item">16 Oz</div>
</div>
<div class="size-chart__values">
<div class="size-chart__values--list">
<input type="radio" id="toggleSizeChartA" name="size-chart-switch-input" class="size-chart__switch-item" value="KG" style="visibility:hidden" checked="checked"/>
<div class="size-chart__switch--items switch-items">
<div class="size-chart__label">Gewicht in KG</div>
<div class="size-chart__item">vanaf 46 kg</div>
<div class="size-chart__item">46 - 54 kg</div>
<div class="size-chart__item">55 - 70 kg</div>
<div class="size-chart__item">71 - 85 kg</div>
<div class="size-chart__item">86 - 90 kg</div>
</div>
</div>
<div class="size-chart__values--list" >
<input type="radio" id="toggleSizeChartB" name="size-chart-switch-input" class="size-chart__switch-item" value="LB" style="visibility:hidden"/>
<div class="size-chart__switch--items switch-items">
<div class="size-chart__label">Gewicht in Lb</div>
<div class="size-chart__item">vanaf 101 lb</div>
<div class="size-chart__item">101 - 119 lb</div>
<div class="size-chart__item">121 - 154 lb</div>
<div class="size-chart__item">157 - 187 lb</div>
<div class="size-chart__item">190 - 198 lb</div>
</div>
</div>
</div>
</div>
<div class="size-chart__switch-box">
<label for="toggleSizeChartA">KG</label>
<label for="toggleSizeChartB">LB</label>
</div>
</div>
</div>
/* No context defined for this component. */
.size-chart {
display: flex;
box-shadow: $box-shadow;
&__product {
max-width: 450px;
width: 100%;
}
&__guide {
width: 100%;
padding: $spacer--l $spacer--xxl;
display: flex;
flex-direction: column;
justify-content: space-around;
}
&__title {
font-weight: bold;
font-size: $font-size-xxxl;
}
&__sizes {
display: flex;
width: 100%;
flex-wrap: nowrap;
justify-content: space-around;
}
&__size {
width: 100%;
}
&__values {
width: 70%;
margin-right: 30%;
}
&__label {
font-weight: 600;
display: block;
font-size: $font-size-large;
border-bottom: $catalog-list-item__border;
padding: $spacer--075 0;
}
&__item {
padding: $spacer--075;
display: block;
border-bottom: $catalog-list-item__border;
}
&__switch {
&-item,
&--items {
display: none;
}
&-item:checked ~ .switch-items {
display: block;
}
}
&__switch-box {
display: flex;
justify-content: flex-end;
align-items: center;
label {
margin: 0 $spacer 0 0;
padding: $spacer--extra-small $spacer--medium;
border: $catalog-list-item__border;
}
}
}
There are no notes for this item.