Components Module for ul, ol Elements.

sircus-components-list | v2.0.0

Unordered list

  • Elements
  • Components
    • Container
    • Grid
      • Column
  • Tools
<ul class="List">
  <li>...</li>
</ul>

Ordered list

  1. Elements
  2. Components
    1. Container
    2. Grid
      1. Column
  3. Tools
<ol class="List">
  <li>...</li>
</ol>

ListInline

  • Property
  • Elements
  • Components
  • Tools
<ul class="ListInline">
  <li>...</li>
</ul>

ListReset

  • Global
  • Elements
  • Components
    • Grid
    • Container
  • Tools
<ul class="ListInline">
  <li>...</li>
</ul>

Install

npm install sircus-components-list sircus-variables

CSS import

@import "sircus-components-list";
@import "sircus-variables";

CSS

:root {
  --ListInline-gutter: var(--gutter);
}

/*　sircus-components-list
======================================== */
.List {
  padding-left: var(--space);
}

.List ul,
.List ol {
  padding-left: 1.5rem;
  margin: 0;
}

ul.List {
  list-style: circle;
}

.ListInline,
.ListReset,
.ListReset ul,
.ListReset ol {
  padding-left: 0;
  list-style: none;
}

.ListInline {
  margin-left: calc(0 - var(--ListInline-gutter));
  margin-right: calc(0 - var(--ListInline-gutter));
}

.ListInline > li {
  display: inline-block;
  padding-left: var(--ListInline-gutter);
  padding-right: var(--ListInline-gutter);
}

.ListReset ul,
.ListReset ol {
  margin-bottom: 0;
}