No notes defined.
<ul class="checkList">
<li class="checkList-item">Hashtag Echo Park selfies</li>
<li class="checkList-item">PBR try-hard skateboard, <a href="#">plaid 8-bit</a></li>
<li class="checkList-item">Flexitarian retro single-origin coffee</li>
<li class="checkList-item">Church-key vinyl pug cardigan</li>
<li class="checkList-item">Biodiesel locavore PBR<br /> try-hard skateboard</li>
<li class="checkList-item">Plaid 8-bit</li>
<li class="checkList-item">
<p>Stumptown bicycle rights sus, pok pok austin coloring book roof party venmo biodiesel yes plz portland disrupt master cleanse sartorial taiyaki.</p>
<p>8-bit viral man bun salvia locavore mixtape.</p>
</li>
</ul>
<ul class="checkList{{#modifier}} {{.}}{{/modifier}}">
{{#items}}
<li class="checkList-item">{{{.}}}</li>
{{/items}}
</ul>
{
"items": [
"Hashtag Echo Park selfies",
"PBR try-hard skateboard, <a href=\"#\">plaid 8-bit</a>",
"Flexitarian retro single-origin coffee",
"Church-key vinyl pug cardigan",
"Biodiesel locavore PBR<br/> try-hard skateboard",
"Plaid 8-bit",
"<p>Stumptown bicycle rights sus, pok pok austin coloring book roof party venmo biodiesel yes plz portland disrupt master cleanse sartorial taiyaki.</p><p>8-bit viral man bun salvia locavore mixtape.</p>"
]
}
@import "_checkList.settings";
@import "_checkList.styles";
%checkList {
&-item {
&::before {
opacity: .7;
}
}
}
$checkList_icon_stroke-width: 2 !default;
$checkList_icon: '<svg width="26" height="26" viewBox="0 0 26 26" stroke="{{color}}" stroke-width="#{$checkList_icon_stroke-width}" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="13" cy="13" r="12"/><path d="M8 14L11 17L18 10"/></svg>' !default;
$checkList_icon_size: 26px !default;
%checkList {
$gutter: 1ch;
@include stack-spacing();
padding-left: $gutter;
list-style: none;
&-item {
position: relative;
padding-left: calc(#{$checkList_icon_size} + #{$gutter});
position: relative;
& + & {
@include stack-spacing(small);
}
&::before {
content: "";
display: block;
flex-shrink: 0;
width: $checkList_icon_size;
height: $checkList_icon_size;
margin-top: calc(.5 * (1lh - #{$checkList_icon_size}));
position: absolute;
left: 0;
background: svg-url($checkList_icon) center center no-repeat;
mix-blend-mode: luminosity;
}
[data-theme="dark"] &::before {
background-image: svg-url($checkList_icon, $_PAGE-COLOR);
}
@supports (mask-image: url()) {
&::before {
background: none;
mix-blend-mode: normal;
background-color: currentcolor;
mask-image: svg-url($checkList_icon);
mask-repeat: no-repeat;
mask-position: center center;
pointer-events: none;
user-select: none;
}
}
> *:not(br) {
@include stack-spacing(small);
&:first-child {
@include stack-spacing(0);
}
}
}
a {
@extend %link;
}
@include not-on-desktop(){
&-item {
$ratio: math.div($_base-font-size--mobile, $_base-font-size);
$checkList_icon_size: $ratio * $checkList_icon_size;
padding-left: calc(#{$checkList_icon_size} + #{$gutter});
&::before {
width: $checkList_icon_size;
height: $checkList_icon_size;
margin-top: calc(.5 * (1lh - #{$checkList_icon_size}));
top: -1px;
background-size: ($ratio * 100%);
}
@supports (mask-image: url()) {
&::before {
mask-size: ($ratio * 100%);
}
}
}
}
}
.checkList {
@extend %checkList;
> li,
&-item {
@extend %checkList-item;
}
}