<a href="#" class="a-tag">
<span class="a-tag__text">cyberspace</span>
</a>
<a href="{{href}}" class="a-tag{{#if is_light}} a-tag--light{{/if}}{{#if background_color}}{{/if}}{{#if border}} u-b-solid u-b-{{border_color}} background-{{background_color}}{{/if}}{{#if hover_color}} a-tag--hover-{{hover_color}}{{/if}}{{#if color}} color-{{color}}{{/if}}">
{{#if icon}}
{{#if icon_align_left}}
{{> @icon id=icon additional_classes="u-m-r-1"}}
{{/if}}
{{/if}}
<span class="a-tag__text">{{text}}</span>
{{#if icon}}
{{#if icon_align_right}}
{{> @icon id=icon additional_classes="u-m-l-1"}}
{{/if}}
{{/if}}
</a>
{
"text": "cyberspace",
"href": "#"
}
@charset 'UTF-8';
/// @group Tags
@include atom(tag) {
@extend %normalize-links;
@extend %tag;
display: inline-flex;
align-items: center;
position: relative;
z-index: z_index(middleground);
margin-right: rhythm(1);
margin-bottom: rhythm(1);
padding: rhythm(1) rhythm(2);
font-size: $small-text;
line-height: 1;
text-decoration: none;
text-transform: uppercase;
&--background {
@include color_values($colors, 'background-color', $separator: '-');
@include color_values($colors, 'border-color', $separator: '-');
}
@include e(text) {
color: var(--cyberspace-color);
letter-spacing: 0.025rem;
}
@include m(light) {
@extend %tag-light;
@include e(text) {
color: $color-snow;
}
}
> svg {
width: $icon-size-small;
height: $icon-size-small;
}
@include m(hover-light) {
&:hover,
&:focus {
background-color: currentColor !important;
[class*=text] {
color: $color-snow;
}
}
}
@include m(hover-dark) {
&:hover,
&:focus {
background-color: currentColor !important;
[class*=text] {
color: $color-cyberspace;
}
}
}
}
No notes defined.