From 2a53de0c302175ccc52c971e3202408319dbfce7 Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Sat, 15 Aug 2020 13:39:14 +0200
Subject: [PATCH] List styles now without grid
---
source/_data/data.json | 3 +
.../04-lists/dense-unordered-list.mustache | 12 ++--
.../unordered-list-leading-variants.mustache | 72 ++++++++++++-------
.../04-lists/unordered-list-sizes.mustache | 72 ++++++++++++-------
.../00-atoms/04-lists/unordered-list.mustache | 12 ++--
source/css/atoms/list.pcss | 27 +++----
6 files changed, 126 insertions(+), 72 deletions(-)
diff --git a/source/_data/data.json b/source/_data/data.json
index 5556a8e..b0c4aa6 100755
--- a/source/_data/data.json
+++ b/source/_data/data.json
@@ -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.",
diff --git a/source/_patterns/00-atoms/04-lists/dense-unordered-list.mustache b/source/_patterns/00-atoms/04-lists/dense-unordered-list.mustache
index 6014045..ae19ce0 100644
--- a/source/_patterns/00-atoms/04-lists/dense-unordered-list.mustache
+++ b/source/_patterns/00-atoms/04-lists/dense-unordered-list.mustache
@@ -1,8 +1,8 @@
<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>
diff --git a/source/_patterns/00-atoms/04-lists/unordered-list-leading-variants.mustache b/source/_patterns/00-atoms/04-lists/unordered-list-leading-variants.mustache
index 9348b4c..f431668 100644
--- a/source/_patterns/00-atoms/04-lists/unordered-list-leading-variants.mustache
+++ b/source/_patterns/00-atoms/04-lists/unordered-list-leading-variants.mustache
@@ -1,42 +1,66 @@
<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>
diff --git a/source/_patterns/00-atoms/04-lists/unordered-list-sizes.mustache b/source/_patterns/00-atoms/04-lists/unordered-list-sizes.mustache
index c7ad18a..7bb2d74 100644
--- a/source/_patterns/00-atoms/04-lists/unordered-list-sizes.mustache
+++ b/source/_patterns/00-atoms/04-lists/unordered-list-sizes.mustache
@@ -1,42 +1,66 @@
<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>
diff --git a/source/_patterns/00-atoms/04-lists/unordered-list.mustache b/source/_patterns/00-atoms/04-lists/unordered-list.mustache
index c2c4758..1c9aa10 100644
--- a/source/_patterns/00-atoms/04-lists/unordered-list.mustache
+++ b/source/_patterns/00-atoms/04-lists/unordered-list.mustache
@@ -1,8 +1,8 @@
<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>
diff --git a/source/css/atoms/list.pcss b/source/css/atoms/list.pcss
index f092952..ca9147f 100644
--- a/source/css/atoms/list.pcss
+++ b/source/css/atoms/list.pcss
@@ -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";
--
GitLab