Component: Sequence

docs/pages/components/sequence.md

@@ -0,0 +1,146 @@
+---
+title: 'Components: Sequence - Sloth.css'
+description: Group of ordered items like timelines or steps
+tags: timeline steps log
+---
+
+## Sequence
+
+A sequence is a group of ordered items like timelines or a step-wise status.
+
+### Vertical
+
+Use the `sequence` class on a container holding child elements with the `step` class to create a vertical sequence.
+
+<div class="demo">
+  <ol class="sequence">
+    <li class="step">2077</li>
+    <li class="step">2078</li>
+    <li class="step">2079</li>
+  </ol>
+</div>
+
+```html
+<ol class="sequence">
+  <li class="step">2077</li>
+  <li class="step">2078</li>
+  <li class="step">2079</li>
+</ol>
+```
+
+The `step` elements in vertical sequences can contain headings, paragraphs and other elements.
+
+<div class="demo">
+  <ol class="sequence">
+    <li class="step">
+      <h6>v1.0.0</h6>
+      <p>First stable release</p>
+    </li>
+    <li class="step">
+      <h6>v0.2.0</h6>
+      <p>Further features entering beta</p>
+    </li>
+    <li class="step">
+      <h6>v0.1.0</h6>
+      <p>Initial release</p>
+    </li>
+  </ol>
+</div>
+
+```html
+<ol class="sequence">
+  <li class="step">
+    <h6>v1.0.0</h6>
+    <p>First stable release</p>
+  </li>
+  <li class="step">
+    <h6>v0.2.0</h6>
+    <p>Further features entering beta</p>
+  </li>
+  <li class="step">
+    <h6>v0.1.0</h6>
+    <p>Initial release</p>
+  </li>
+</ol>
+```
+
+### Filled
+
+To make one or more steps stand out, the `filled` class can be used to fill the bullet point.
+
+<div class="demo">
+  <ol class="sequence">
+    <li class="step">2077</li>
+    <li class="step">2078</li>
+    <li class="step filled">2079</li>
+  </ol>
+</div>
+
+```html
+<ol class="sequence">
+  <li class="step">2077</li>
+  <li class="step">2078</li>
+  <li class="step filled">2079</li>
+</ol>
+```
+
+### Colors
+
+The default sequence steps are neutral. That can be changed by using `accent`, `success` and `alert` classes for the corresponding colors. The connection line color adapts to siblings sharing the same color.
+
+<div class="demo flex flex-wrap gap-8">
+  <ol class="sequence">
+    <li class="step accent filled">2079</li>
+    <li class="step accent">2078</li>
+    <li class="step">2077</li>
+    <li class="step">2076</li>
+  </ol>
+  <ol class="sequence">
+    <li class="step success filled"><code>+9.76%</code></li>
+    <li class="step success"><code>+5.13%</code></li>
+    <li class="step"><code>+0.01%</code></li>
+    <li class="step alert"><code>-2.77%</code></li>
+    <li class="step alert"><code>-8.19%</code></li>
+  </ol>
+</div>
+
+```html
+<ol class="sequence">
+  <li class="step accent filled">2079</li>
+  <li class="step accent">2078</li>
+  <li class="step">2077</li>
+  <li class="step">2076</li>
+</ol>
+
+<ol class="sequence">
+  <li class="step success filled"><code>+9.76%</code></li>
+  <li class="step success"><code>+5.13%</code></li>
+  <li class="step"><code>+0.01%</code></li>
+  <li class="step alert"><code>-2.77%</code></li>
+  <li class="step alert"><code>-8.19%</code></li>
+</ol>
+```
+
+### Horizontal
+
+Use the `sequence horizontal` classes to change the orientation of the sequence to be inline. Horizontal sequences cannot break and long sequences will get a horizontal scrollbar. Also only text is supported as step content.
+
+<div class="demo">
+  <ol class="sequence horizontal">
+    <li class="step accent filled">Initiation</li>
+    <li class="step accent filled">Planning</li>
+    <li class="step accent">Execution</li>
+    <li class="step">Monitoring and Control</li>
+    <li class="step">Closure</li>
+  </ol>
+</div>
+
+```html
+<ol class="sequence horizontal">
+  <li class="step accent filled">Initiation</li>
+  <li class="step accent filled">Planning</li>
+  <li class="step accent">Execution</li>
+  <li class="step">Monitoring and Control</li>
+  <li class="step">Closure</li>
+</ol>
+```

src/_components.css

@@ -8,7 +8,7 @@
 @import 'components/_loader.css';
 /* @import 'components/_modal.css'; */
 @import 'components/_separator.css';
-/* @import 'components/_sequence.css'; */
+@import 'components/_sequence.css';
 @import 'components/_state.css';
 /* @import 'components/_tab.css'; */
 @import 'components/_tag.css';

src/components/_sequence.css

@@ -0,0 +1,108 @@
+.sequence {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding-left: 0;
+  margin: 0;
+  list-style-type: none;
+
+  .step {
+    position: relative;
+    padding-left: 2rem;
+
+    h1, h2, h3, h4, h5, h6 {
+      margin-bottom: 0;
+
+      & + p {
+        margin-top: 0;
+      }
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: .25rem;
+      left: 0;
+      width: .75rem;
+      height: .75rem;
+      border: 2px solid var(--color-neutral);
+      border-radius: 1rem;
+      box-sizing: border-box;
+    }
+
+    &:not(:last-child)::after {
+      content: '';
+      position: absolute;
+      height: 100%;
+      width: 2px;
+      top: 1.125rem;
+      left: calc(.25rem + 1px);
+      background-color: color-mix(in srgb, var(--color-neutral) 40%, transparent);
+    }
+
+    &.filled::before {
+      background-color: var(--color-neutral);
+    }
+
+    &.accent {
+      &::before {
+        border-color: var(--color-accent);
+      }
+      &.filled::before {
+        background-color: var(--color-accent);
+      }
+      &:has(~ .step.accent)::after {
+        background-color: color-mix(in srgb, var(--color-accent) 60%, transparent);
+      }
+    }
+    &.success {
+      &::before {
+        border-color: var(--color-success);
+      }
+      &.filled::before {
+        background-color: var(--color-success);
+      }
+      &:has(~ .step.success)::after {
+        background-color: color-mix(in srgb, var(--color-success) 60%, transparent);
+      }
+    }
+    &.alert {
+      &::before {
+        border-color: var(--color-alert);
+      }
+      &.filled::before {
+        background-color: var(--color-alert);
+      }
+      &:has(~ .step.alert)::after {
+        background-color: color-mix(in srgb, var(--color-alert) 60%, transparent);
+      }
+    }
+  }
+
+  &.horizontal {
+    flex-direction: row;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scrollbar-width: thin;
+
+    .step {
+      padding-left: 0;
+      padding-bottom: 1.75rem;
+      text-wrap: nowrap;
+
+      &::before {
+        top: auto;
+        bottom: .25rem;
+        left: .5rem;
+      }
+
+      &:not(:last-child)::after {
+        height: 2px;
+        width: 100%;
+        top: auto;
+        bottom: calc(.5rem + 1px);
+        left: 1.375rem;
+      }
+    }
+  }
+}