@telekom/scale-components/dist/collection/components/list-item/list-item.css

Scale is the digital design system for Telekom products and experiences.

/**
 * @license
 * Scale https://github.com/telekom/scale
 *
 * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

:host(scale-list-item) {
  --display: block;
  --font-size: var(--telekom-typography-font-size-body);
  --line-height: var(--telekom-typography-line-spacing-standard);
  --spacing-left: calc(0.5ch + var(--telekom-spacing-composition-space-07));
  --spacing-left-nested: calc(
    0.5ch + var(--telekom-spacing-composition-space-06)
  );

  --font-marker-ordered: var(--telekom-text-style-body);
  --font-marker-ordered-nested: var(--telekom-text-style-small-bold);
  --line-height-marker-ordered-nested: var(
    --telekom-typography-line-spacing-standard
  );
  --spacing-top-marker-ordered-nested: calc(
    var(--telekom-spacing-composition-space-06) -
      var(--telekom-spacing-composition-space-05)
  );

  --spacing-right-no-marker: var(--telekom-spacing-composition-space-04);
  display: var(--display);
}

.list-item {
  position: relative;
  font-size: var(--font-size);
  line-height: var(--line-height);
  padding-left: var(--spacing-left);
  margin-top: var(--telekom-spacing-composition-space-03);
}

.list-item--nested {
  padding-left: var(--spacing-left-nested);
}

.list-item:before {
  content: '';
  top: 0;
  left: 0;
  position: absolute;
}

.list-item--unordered:before {
  top: 0.5em;
  border: var(--telekom-spacing-composition-space-01) solid currentColor;
  display: block;
  transform: scale(0.66);
  background: currentColor;
  box-sizing: border-box;
  border-radius: 50%;
  width: var(--telekom-spacing-composition-space-04);
  height: var(--telekom-spacing-composition-space-04);
}

.list-item--nested.list-item--unordered:before {
  border: var(--telekom-spacing-composition-space-01) solid currentColor;
  background: transparent;
}

.list-item--ordered:before {
  content: attr(data-index) '.';
  font: var(--font-marker-ordered);
  font-variant-numeric: tabular-nums;
}

.list-item--nested.list-item--ordered:before {
  font: var(--telekom-text-style-small-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--line-height-marker-ordered-nested);
  padding-top: var(--spacing-top-marker-ordered-nested);
}

.list-item--no-marker {
  display: inline-flex;
  align-items: center;
  padding-left: 0;
}

.list-item--no-marker:before {
  display: none;
}

.list-item--no-marker > ::slotted(*) {
  margin-right: var(--spacing-right-no-marker);
}