No notes defined.
<header class="tickertape tickertape--bg-secondary">
<h2 class="tickertape__highlight">
This is a secondary highlighted title
</h2>
</header>
{% set textElement = textElement ?: 'h2' %}
{% set classString = '' %}
{% if background %}
{% set classString = classString ~ ' tickertape--bg-' ~ background %}
{% endif %}
{% for modifier in modifiers %}
{% set classString = classString ~ ' tickertape--' ~ modifier %}
{% endfor %}
{% for extraClass in extraClasses %}
{% set classString = classString ~ ' ' ~ extraClass %}
{% endfor %}
<header class="tickertape{{ classString }}">
<{{ textElement }} class="tickertape__highlight{{ textElementStyle ? ' ' ~ textElementStyle }}">
{{ text }}
</{{ textElement }}>
</header>
$tickertape-bg-colors: (
'primary': $primary,
'secondary': $secondary,
'tertiary': $tertiary,
'white': white,
);
.tickertape {
position: relative;
--background: #{$primary};
--color: white;
margin-bottom: $spacing-lg;
margin-right: $spacing-md;
text-wrap: balance;
+ .tickertape {
margin-top: -$spacing-md;
}
&__highlight {
position: relative;
display: inline;
left: 0.35rem;
padding: 0.1rem;
line-height: 1.55; // just enough to show 1px between lines at 1rem+
background: $primary;
background: var(--background, #{$primary});
color: var(--color, white);
box-shadow: -0.35rem 0 0 0 var(--background, #{$primary}), 0.35rem 0 0 0 var(--background, #{$primary});
box-decoration-break: clone;
border-radius: $border-radius-sm;
//border-top: 0.25rem solid transparent;
//border-bottom: 0.25rem solid transparent;
a {
color: white;
color: var(--color);
}
&:where(h1) {
line-height: 1.45;
}
}
}
@each $name, $value in $tickertape-bg-colors {
.tickertape--bg-#{$name} {
--background: #{$value};
--color: #{choose-contrast-color-prefer-white($value)};
}
}