No notes defined.
<svg width="13" height="24" viewBox="0 0 13 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.8814 14.0359H11.7416L12.8856 9.45959H8.8814V7.17146C8.8814 5.99307 8.8814 4.88332 11.1695 4.88332H12.8856V1.03926C12.5127 0.990064 11.1043 0.879089 9.61703 0.879089C6.51089 0.879089 4.30513 2.77481 4.30513 6.2562V9.45959H0.872925V14.0359H4.30513V23.7604H8.8814V14.0359Z" fill="black" />
</svg>
<svg width="13" height="24" viewBox="0 0 13 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M8.8814 14.0359H11.7416L12.8856 9.45959H8.8814V7.17146C8.8814 5.99307 8.8814 4.88332 11.1695 4.88332H12.8856V1.03926C12.5127 0.990064 11.1043 0.879089 9.61703 0.879089C6.51089 0.879089 4.30513 2.77481 4.30513 6.2562V9.45959H0.872925V14.0359H4.30513V23.7604H8.8814V14.0359Z"
fill="{{ fill ?: 'black' }}"/>
</svg>
// add icons to this array with their filename and type,
// the loop at the bottom of the file will create classes for them
$icons: (
//'facebook': 'svg',
//'instagram': 'svg',
//'twitter': 'svg',
//'linkedin': 'svg',
//'youtube': 'svg',
//'external-primary': 'svg',
//'phone': 'svg',
//'mail': 'svg',
//'pin': 'svg',
);
.icon {
position: relative;
display: inline-block;
width: 1em;
height: 1em;
text-align: center;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
vertical-align: baseline;
top: 0.1em;
svg,
img {
display: block;
width: 100%;
max-height: 100%;
vertical-align: middle;
}
svg {
height: 100%;
//fill: #000;
}
&:before {
font-size: 1em;
display: inline-block;
}
@each $name, $extension in $icons {
&--#{$name} {
background-image: url('../img/icon-#{$name}.#{$extension}');
}
}
// Layout
&--margin-before {
margin-inline-start: 0.35em;
}
&--margin-after {
margin-inline-end: 0.35em;
}
// Themes
&--primary {
svg, path {
fill: $primary !important;
}
}
&--secondary {
svg, path {
fill: $secondary !important;
}
}
&--tertiary {
svg, path {
fill: $tertiary !important;
}
}
// Variant generator
// (see loop at top)
//@each $name, $extension in $icons {
// &--#{$name} {
// background-image: url('../img/icon-#{$name}.#{$extension}');
// }
//}
// Special
@at-root {
a, button {
&:where(:has(.svgHeart)) {
path {
fill: rgba(white, 0);
stroke-width: 2;
stroke: $grey;
transition: all 100ms;
}
&:hover, &:focus {
path {
fill: rgba($pink, 0.5);
stroke-width: 0;
}
}
&:active {
path {
fill: $pink;
stroke-width: 0;
}
}
}
&:where(:has(.svgHeart--filled)) {
path {
transition: all 100ms;
}
&:hover, &:focus {
path {
fill: rgba($pink, 0.5);
stroke-width: 0;
}
}
&:active {
path {
fill: rgba(white, 0);
stroke-width: 2;
}
}
}
}
}
}