<!-- Default -->
tab
<!-- Isactive -->
tab tab-is-active
<!-- Default (Example) -->
<button class="tab" type="button">Tab</button>
<!-- Is Active (Example) -->
<button class="tab tab-is-active" type="button">Tab</button>
<!-- Default -->
tab{{#if modifier}} {{modifier}}{{/if}}
<!-- Isactive -->
tab{{#if modifier}} {{modifier}}{{/if}}
<!-- Default (Example) -->
<button class="{{render '@tab' tabContext merge=true}}" type="button">Tab</button>
<!-- Is Active (Example) -->
<button class="{{render '@tab' tabContext merge=true}}" type="button">Tab</button>
/* Default: No context defined. */
/* Isactive */
{
"modifier": "tab-is-active"
}
/* Default (Example): No context defined. */
/* Is Active (Example) */
{
"tabContext": {
"modifier": "tab-is-active"
}
}
.tab {
@include textstyle-smallbold;
border-radius: 500px; // Large value creates pill shape
color: $color-interactive1;
padding: $gridspacing $gridspacing * 1.5;
transition: background-color $transition-duration $transition-easing,
color $transition-duration $transition-easing;
will-change: background-color, color;
&:hover {
background-color: $color-interactive1;
color: $color-light1;
}
&.tab-is-active {
background-color: $color-interactive2;
color: $color-light1;
&:hover {
background-color: $color-interactive1;
color: $color-light1;
}
}
}
No notes defined.