No notes defined.
<p><span class="tag">An Inside Look</span> <a href="#" class="tag">Career Path</a></p>
<p><span class="tag tag--primary">An Inside Look</span> <a href="#" class="tag tag--primary">Career Path</a></p>
<p><span class="tag tag--secondary">An Inside Look</span> <a href="#" class="tag tag--secondary">Career Path</a></p>
<p><span class="tag tag--tertiary">An Inside Look</span> <a href="#" class="tag tag--tertiary">Career Path</a></p>
<p><span class="tag">An Inside Look</span> <a href="#" class="tag">Career Path</a></p>
<p><span class="tag tag--primary">An Inside Look</span> <a href="#" class="tag tag--primary">Career Path</a></p>
<p><span class="tag tag--secondary">An Inside Look</span> <a href="#" class="tag tag--secondary">Career Path</a></p>
<p><span class="tag tag--tertiary">An Inside Look</span> <a href="#" class="tag tag--tertiary">Career Path</a></p>
$tag-colors: (
'primary': $primary,
'secondary': $secondary,
'tertiary': $tertiary,
);
.tag {
&:where(:not(body)) {
// some CMS like Wordpress add a 'tag' class to the body, so we negate this
// :where doesn't add extra specificity.
position: relative;
display: inline-block;
margin: 0 $spacing-2xs $spacing-2xs 0;
padding: $spacing-4xs $spacing-xs;
@include typescale('xs');
text-transform: lowercase;
background: $grey--lightest;
border-radius: $border-radius-sm;
}
&--margin-left {
margin-left: $spacing-xs;
}
// Colours
@each $name, $value in $tag-colors {
&--#{$name} {
background: $value;
color: #{choose-contrast-color-prefer-white($value)};
--color: #{choose-contrast-color-prefer-white($value)};
}
}
}
a.tag {
text-decoration: none;
color: var(--color, #{$text-color});
&:hover, &:focus {
}
}
.list--tags {
// see lists/_lists.scss
}