No notes defined.
<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.5 0H1.5C1.23478 0 0.98043 0.105357 0.792893 0.292893C0.605357 0.48043 0.5 0.734784 0.5 1V13C0.5 13.2652 0.605357 13.5196 0.792893 13.7071C0.98043 13.8946 1.23478 14 1.5 14H8.5C8.76522 14 9.01957 13.8946 9.20711 13.7071C9.39464 13.5196 9.5 13.2652 9.5 13V1C9.5 0.734784 9.39464 0.48043 9.20711 0.292893C9.01957 0.105357 8.76522 0 8.5 0ZM5.5 13H4.5V12H5.5V13ZM1.5 11V1H8.5V11H1.5Z" fill="black" />
</svg>
<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M8.5 0H1.5C1.23478 0 0.98043 0.105357 0.792893 0.292893C0.605357 0.48043 0.5 0.734784 0.5 1V13C0.5 13.2652 0.605357 13.5196 0.792893 13.7071C0.98043 13.8946 1.23478 14 1.5 14H8.5C8.76522 14 9.01957 13.8946 9.20711 13.7071C9.39464 13.5196 9.5 13.2652 9.5 13V1C9.5 0.734784 9.39464 0.48043 9.20711 0.292893C9.01957 0.105357 8.76522 0 8.5 0ZM5.5 13H4.5V12H5.5V13ZM1.5 11V1H8.5V11H1.5Z"
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;
}
}
}
}
}
}