Components lists (#21)

* Styles list

* Add styles to checklists

* fix identation

src/css/doc.css

@@ -251,6 +251,7 @@
 .doc .paragraph,
 .doc .dlist,
 .doc .hdlist,
+.doc .qlist,
 .doc .olist,
 .doc .ulist,
 .doc .exampleblock,
@@ -268,6 +269,12 @@
   margin: calc(24 / var(--rem-base) * 1rem) 0 0;
 }
 
+.doc .ulist .paragraph,
+.doc .dlist .paragraph,
+.doc .hdlist .paragraph {
+  margin: 0;
+}
+
 .doc table.tableblock {
   font-size: calc(14.5 / var(--rem-base) * 1rem);
 }
@@ -629,20 +636,36 @@
   padding-left: var(--ds-space-2h);
 }
 
+.doc ul.checklist p {
+  padding: var(--ds-space-h) 0;
+}
+
 .doc ul.checklist p > i.fa-check-square-o:first-child,
 .doc ul.checklist p > i.fa-square-o:first-child {
   display: inline-flex;
   justify-content: center;
-  width: 1.25rem;
-  margin-left: -1.25rem;
+  align-items: center;
+  vertical-align: middle;
+  line-height: calc(16 / var(--rem-base) * 1rem);
+}
+
+.doc ul.checklist i.fa-check-square-o::before,
+.doc ul.checklist i.fa-square-o::before {
+  font-family: "Material Icons Outlined", sans-serif;
+  border-radius: calc(3 / var(--rem-base) * 1rem);
+  width: calc(16 / var(--rem-base) * 1rem);
+  height: calc(16 / var(--rem-base) * 1rem);
 }
 
 .doc ul.checklist i.fa-check-square-o::before {
-  content: "\2713";
+  content: "\e876";
+  color: var(--ds-primary-solid-color);
+  background-color: var(--ds-primary-solid-bg);
 }
 
 .doc ul.checklist i.fa-square-o::before {
-  content: "\274f";
+  content: "";
+  border: 0.25rem solid var(--ds-text-primary);
 }
 
 .doc .dlist .dlist,
@@ -654,12 +677,12 @@
 .doc .ulist .dlist,
 .doc .ulist .olist,
 .doc .ulist .ulist {
-  margin-top: var(--ds-space-1);
+  margin-top: 0;
 }
 
 .doc .olist li + li,
 .doc .ulist li + li {
-  margin-top: var(--ds-space-2);
+  margin-top: 0;
 }
 
 .doc .ulist .listingblock,
@@ -695,9 +718,9 @@
 
 .doc .ulist .title,
 .doc .olist .title {
-  font-style: var(--caption-font-style);
   font-weight: var(--caption-font-weight);
-  margin-bottom: var(--ds-space-h);
+  margin-bottom: var(--ds-space-3);
+  color: var(--heading-font-color);
 }
 
 .doc .imageblock .title {
@@ -914,7 +937,7 @@
 }
 
 .doc .dlist dt {
-  font-style: italic;
+  color: var(--heading-font-color);
 }
 
 .doc .dlist dd {
@@ -939,6 +962,7 @@
 .doc td.hdlist1 {
   font-weight: var(--body-font-weight-bold);
   padding-right: 0.25rem;
+  color: var(--heading-font-color);
 }
 
 .doc td.hdlist2 {
@@ -1066,6 +1090,38 @@
   word-wrap: normal;
 }
 
+.doc .checklist input[type="checkbox" i] {
+  appearance: none;
+  vertical-align: middle;
+  position: relative;
+  border-radius: calc(3 / var(--rem-base) * 1rem);
+  border: 0.25rem solid var(--ds-text-primary);
+  width: calc(16 / var(--rem-base) * 1rem);
+  height: calc(16 / var(--rem-base) * 1rem);
+}
+
+.doc .checklist input[type="checkbox" i]:checked {
+  border-color: var(--ds-primary-solid-bg);
+}
+
+.doc .checklist input[type="checkbox" i]::before {
+  font-family: "Material Icons Outlined", sans-serif;
+  content: "\e876";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+}
+
+.doc .checklist input[type="checkbox" i]:checked::before {
+  opacity: 1;
+  font-size: calc(16 / var(--rem-base) * 1rem);
+  color: var(--ds-primary-solid-color);
+  background-color: var(--ds-primary-solid-bg);
+  border-radius: calc(3 / var(--rem-base) * 1rem);
+}
+
 #footnotes {
   font-size: 0.85em;
   line-height: 1.5;

src/css/ds-layout.css

@@ -180,6 +180,10 @@ html[data-theme="dark"] .doc .landing-card-icon {
   margin-top: var(--ds-space-2);
 }
 
+.doc .admonitionblock td.content .ulist p {
+  margin-top: 0;
+}
+
 .doc .admonitionblock td.content > .paragraph:first-child p:first-child,
 .doc .admonitionblock td.content > .title {
   margin: 0;