Skip to content
Snippets Groups Projects
Commit 2a53de0c authored by xaralis's avatar xaralis
Browse files

List styles now without grid

parent 17f40732
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 126 additions and 72 deletions
source/_data/data.json
+ 3
− 0
View file @ 2a53de0c
......@@ -32,6 +32,9 @@
"short": "Lorizzle pimpin' dolizzle sit amet I",
"medium": "Rizzle adipiscing elizzle. Nullam sapien velizzle, shit volutpizzle, my"
},
"list": {
"item": "Shizz fo shizzle mah nizzle fo rizzle, <a href='#' class='underline'>mah home g-dizzle</a>, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv."
},
"excerpt": {
"short": "Shizz fo shizzle mah nizzle fo rizzle, mah home g-dizzle, gravida vizzle, arcu. Pellentesque crunk tortizzle. Sed erizzle. Black izzle sheezy telliv.",
"medium": "Izzle crazy tempizzle sizzle. We gonna chung gangsta get down get down fo shizzle turpizzle. Away break it down black. Pellentesque bling bling rhoncus fo shizzle. In hac the bizzle platea dictumst. Black dapibizzle. Crackalackin.",
......
source/_patterns/00-atoms/04-lists/dense-unordered-list.mustache
+ 6
− 6
View file @ 2a53de0c
<ul class="unordered-list unordered-list--dense">
<li>{{ headline.short }}</li>
<li>{{ headline.short }}</li>
<li>{{ headline.short }}</li>
<li>{{ headline.short }}</li>
<li>{{ headline.short }}</li>
<li>{{ headline.short }}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
source/_patterns/00-atoms/04-lists/unordered-list-leading-variants.mustache
+ 48
− 24
View file @ 2a53de0c
<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
<div class="inline-flex flex-col space-y-2">
<ul class="unordered-list leading-tight">
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>
{{{ list.item }}}
<ul class="unordered-list">
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</div>
<div class="inline-flex flex-col space-y-2">
<ul class="unordered-list leading-snug">
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>
{{{ list.item }}}
<ul class="unordered-list">
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</div>
<div class="inline-flex flex-col space-y-2">
<ul class="unordered-list leading-normal">
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>
{{{ list.item }}}
<ul class="unordered-list">
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</div>
<div class="inline-flex flex-col space-y-2">
<ul class="unordered-list leading-relaxed">
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>
{{{ list.item }}}
<ul class="unordered-list">
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</div>
</div>
source/_patterns/00-atoms/04-lists/unordered-list-sizes.mustache
+ 48
− 24
View file @ 2a53de0c
<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
<div class="inline-flex flex-col space-y-2">
<ul class="unordered-list text-xs">
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>
{{{ list.item }}}
<ul class="unordered-list">
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</div>
<div class="inline-flex flex-col space-y-2">
<ul class="unordered-list text-sm">
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>
{{{ list.item }}}
<ul class="unordered-list">
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</div>
<div class="inline-flex flex-col space-y-2">
<ul class="unordered-list text-lg">
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>
{{{ list.item }}}
<ul class="unordered-list">
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</div>
<div class="inline-flex flex-col space-y-2">
<ul class="unordered-list text-xl">
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>{{ excerpt.short }}</li>
<li>
{{{ list.item }}}
<ul class="unordered-list">
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
</div>
</div>
source/_patterns/00-atoms/04-lists/unordered-list.mustache
+ 6
− 6
View file @ 2a53de0c
<ul class="unordered-list">
<li>{{ headline.short }}</li>
<li>{{ headline.short }}</li>
<li>{{ headline.short }}</li>
<li>{{ headline.short }}</li>
<li>{{ headline.short }}</li>
<li>{{ headline.short }}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
<li>{{{ list.item }}}</li>
</ul>
source/css/atoms/list.pcss
+ 15
− 12
View file @ 2a53de0c
......@@ -8,36 +8,39 @@
@apply grid gap-4;
li {
@apply grid items-start;
@apply list-none relative;
grid-gap: .5em;
grid-template-columns: auto 1fr;
padding-left: 1em;
&:before {
@apply text-black;
@apply text-black absolute left-0;
font-family: "pirati-ui";
content: "\e919";
font-size: .5em;
font-size: .6em;
font-weight: 600;
margin-top: .7em;
margin-top: .6ex;
}
}
&.leading-tight li:before {
margin-top: .8em;
margin-top: .7ex;
}
&.leading-snug li:before {
margin-top: .6em;
margin-top: .6ex;
}
&.leading-normal li:before {
margin-top: .7em;
margin-top: .6ex;
}
&.leading-relaxed li:before {
margin-top: .6em;
margin-top: .8ex;
}
li ul {
@apply mt-4;
}
}
......@@ -49,11 +52,11 @@
.unordered-list--linked,
.content-block .unordered-list--linked {
li {
grid-template-columns: auto 1fr auto;
padding-right: 1em;
}
li:after {
@apply text-black;
@apply text-black absolute right-0;
font-family: "pirati-ui";
content: "\e923";
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Pirátský GitLab - Home of the CopyLeft