diff --git a/docs/pages/components/sequence.md b/docs/pages/components/sequence.md new file mode 100644 index 0000000..2ef36ba --- /dev/null +++ b/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. + +
+
    +
  1. 2077
    2. +
  2. 2078
    3. +
  3. 2079
    4. +
+
+ +```html +
    +
  1. 2077
    2. +
  2. 2078
    3. +
  3. 2079
    4. +
+``` + +The `step` elements in vertical sequences can contain headings, paragraphs and other elements. + +
+
    +
  1. +
    v1.0.0
    +

    First stable release

    +
    2. +
  2. +
    v0.2.0
    +

    Further features entering beta

    +
    3. +
  3. +
    v0.1.0
    +

    Initial release

    +
    4. +
+
+ +```html +
    +
  1. +
    v1.0.0
    +

    First stable release

    +
    2. +
  2. +
    v0.2.0
    +

    Further features entering beta

    +
    3. +
  3. +
    v0.1.0
    +

    Initial release

    +
    4. +
+``` + +### Filled + +To make one or more steps stand out, the `filled` class can be used to fill the bullet point. + +
+
    +
  1. 2077
    2. +
  2. 2078
    3. +
  3. 2079
    4. +
+
+ +```html +
    +
  1. 2077
    2. +
  2. 2078
    3. +
  3. 2079
    4. +
+``` + +### 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. + +
+
    +
  1. 2079
    2. +
  2. 2078
    3. +
  3. 2077
    4. +
  4. 2076
    5. +
+
    +
  1. +9.76%
    2. +
  2. +5.13%
    3. +
  3. +0.01%
    4. +
  4. -2.77%
    5. +
  5. -8.19%
    6. +
+
+ +```html +
    +
  1. 2079
    2. +
  2. 2078
    3. +
  3. 2077
    4. +
  4. 2076
    5. +
+ +
    +
  1. +9.76%
    2. +
  2. +5.13%
    3. +
  3. +0.01%
    4. +
  4. -2.77%
    5. +
  5. -8.19%
    6. +
+``` + +### 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. + +
+
    +
  1. Initiation
    2. +
  2. Planning
    3. +
  3. Execution
    4. +
  4. Monitoring and Control
    5. +
  5. Closure
    6. +
+
+ +```html +
    +
  1. Initiation
    2. +
  2. Planning
    3. +
  3. Execution
    4. +
  4. Monitoring and Control
    5. +
  5. Closure
    6. +
+``` diff --git a/src/_components.css b/src/_components.css index 340deb3..b18dca9 100644 --- a/src/_components.css +++ b/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'; diff --git a/src/components/_sequence.css b/src/components/_sequence.css new file mode 100644 index 0000000..1ecf0ba --- /dev/null +++ b/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; + } + } + } +}