<span class="tab tab--active">
<a class="tab__inner" href="#">Active Section</a>
</span>
<span class="tab tab--active">
<a class="tab__inner" href="{{ href }}">{{ label }}</a>
</span>
{
"href": "#",
"label": "Active Section"
}
.tab {
$light-border-colour: #e0e0e0;
display: inline-block;
&__inner {
color: inherit;
display: inline-block;
padding: 1rem;
border: solid 1px $light-border-colour;
&:hover {
color: inherit;
}
}
&--active {
border-top: 4px solid $teal;
.tab__inner {
border-width: 0 1px;
}
}
&--inactive {
background: hsla(var(--gray-10-hsl), 1);
}
}
No notes defined.