<ul class="u-flex u-justify-between u-wrap u-list-none u-m-none u-p-none">
<li class="c-tab__item u-cursor-pointer u-p-base u-relative">
<label for="form-radio-walking" class="u-flex u-column u-items-center o-link-text u-cursor-pointer">
<svg class="o-icon o-icon--md o-icon--fill">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-walking"></use>
</svg>
<span class="u-label-04 u-block u-mt-xxsmall">walking</span>
</label>
</li>
<li class="c-tab__item u-cursor-pointer u-p-base u-relative">
<label for="form-radio-bicycle" class="u-flex u-column u-items-center o-link-text u-cursor-pointer">
<svg class="o-icon o-icon--md o-icon--fill">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-bicycle"></use>
</svg>
<span class="u-label-04 u-block u-mt-xxsmall">bicycle</span>
</label>
</li>
<li class="c-tab__item u-cursor-pointer u-p-base u-relative">
<label for="form-radio-car" class="u-flex u-column u-items-center o-link-text u-cursor-pointer">
<svg class="o-icon o-icon--md o-icon--fill">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-car"></use>
</svg>
<span class="u-label-04 u-block u-mt-xxsmall">car</span>
</label>
</li>
</ul>
<div class="c-tab">
<input type="radio" id="form-radio-walking" class="u-none u-absoute u-left u-top usize-full" name="c-tabs__choice">
<div class="c-tab__content u-size-full u-p-base">
<p>walking</p>
</div>
<input type="radio" id="form-radio-bicycle" class="u-none u-absoute u-left u-top usize-full" name="c-tabs__choice">
<div class="c-tab__content u-size-full u-p-base">
<p>bicycle</p>
</div>
<input type="radio" id="form-radio-car" class="u-none u-absoute u-left u-top usize-full" name="c-tabs__choice">
<div class="c-tab__content u-size-full u-p-base">
<p>car</p>
</div>
</div>
<ul class="u-flex u-justify-between u-wrap u-list-none u-m-none u-p-none">
{% for item in items %}
<li class="c-tab__item u-cursor-pointer u-p-base u-relative">
<label for="form-radio-{{item.val}}" class="u-flex u-column u-items-center o-link-text u-cursor-pointer">
{% if item.icon %}
<svg class="o-icon o-icon--md o-icon--fill">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-{{item.icon}}"></use>
</svg>
{% endif %}
<span class="u-label-04 u-block u-mt-xxsmall">{{item.val}}</span>
</label>
</li>
{% endfor %}
</ul>
<div class="c-tab">
{% for item in items %}
<input type="radio" id="form-radio-{{item.val}}" class="u-none u-absoute u-left u-top usize-full" name="c-tabs__choice">
<div class="c-tab__content u-size-full u-p-base">
<p>{{item.val}}</p>
</div>
{% endfor %}
</div>
{
"items": [
{
"item": null,
"icon": "walking",
"val": "walking"
},
{
"item": null,
"icon": "bicycle",
"val": "bicycle"
},
{
"item": null,
"icon": "car",
"val": "car"
}
]
}
// Name: Tab
// Description: Tab of website
//
// Component: `c-tab`
//
// Dependencies: `settings/v7/colors.tokens`
// `settings/v7/colors.themes`
// `settings/v7/colors.light`
// `settings/v7/colors.dark`
//
// ========================================================================
// Variables
// ========================================================================
.c-tab {
&__item {
flex-grow: 1;
order: 1;
border-top: 4px solid var(--divider-color);
border-right: 1px solid var(--divider-color);
border-bottom: 1px solid var(--divider-color);
background-color: var(--background-color);
&:first-child {
border-left: 1px solid var(--divider-color);
}
&.is-active,
&:hover {
border-top: 4px solid var(--theme-color);
background-color: var(--background-color-gray);
transition: background-color .3s ease-in-out, border-top .3s ease-in-out;
border-bottom: none;
}
&.active {
border-top: 4px solid var(--theme-color);
border-bottom: none;
}
}
&__container {
border-top-width: 0;
border-left-width: 1px;
border-bottom-width: 1px;
border-right-width: 1px;
border-style: solid;
border-color: var(--divider-color);
}
&__content {
// .c-tab--desktop & {
// &.form-sidebar{
// display: none;
// @include bp(md) {
// display: block;
// }
// }
// }
&.c-tab--edged {
border-top-width: 0;
border-left-width: 1px;
border-bottom-width: 1px;
border-right-width: 1px;
border-style: solid;
border-color: var(--divider-color);
}
display: none;
@include bp(lg){
display: block;
}
}
input:checked {
+ .c-tab__content {
display: block;
height: auto;
}
}
}
No notes defined.