@cds/core/list/list.css

Clarity Design System - common components, themes, and utilties

/*
 * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
/*
 * Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
 * This software is released under MIT license.
 * The full license information can be found in LICENSE in the root directory of this project.
 */
ul[cds-list=unstyled] {
  padding-inline-start: 0 !important;
  margin: 0 !important;
}
ul[cds-list=unstyled] li::marker {
  color: transparent;
}

[cds-list] {
  color: var(--cds-global-typography-color-300, var(--cds-global-color-construction-800, #2d4048));
}

ol[cds-list] {
  list-style-type: decimal;
  list-style-position: outside;
  padding-inline-start: var(--cds-global-space-9, calc(24 * 1rem / var(--cds-global-base, 20)));
  margin: 0;
}

ul[cds-list]:not([cds-list=unstyled]) {
  list-style-type: disc;
  list-style-position: outside;
  padding-inline-start: var(--cds-global-space-9, calc(24 * 1rem / var(--cds-global-base, 20)));
  margin: 0;
}

ul[cds-list=disc] {
  list-style-type: disc;
}

ul[cds-list=circle] {
  list-style-type: circle;
}

ul[cds-list=square] {
  list-style-type: square;
}

ol[cds-list=decimal] {
  list-style-type: decimal;
}

ol[cds-list=decimal-leading-zero] {
  list-style-type: decimal-leading-zero;
}

ol[cds-list=lower-alpha] {
  list-style-type: lower-alpha;
}

ol[cds-list=lower-latin] {
  list-style-type: lower-latin;
}

ol[cds-list=lower-roman] {
  list-style-type: lower-roman;
}

ol[cds-list=upper-alpha] {
  list-style-type: upper-alpha;
}

ol[cds-list=upper-latin] {
  list-style-type: upper-latin;
}

ol[cds-list=upper-roman] {
  list-style-type: upper-roman;
}

ul[cds-list=unstyled] > li > ul:not([cds-list=unstyled]),
ul[cds-list=unstyled] > li ol {
  margin-inline-start: 0;
  padding-inline-start: var(--cds-global-space-9, calc(24 * 1rem / var(--cds-global-base, 20)));
}
ul[cds-list=unstyled] > li > ul[cds-list=unstyled] {
  margin-inline-start: 0;
  padding-inline-start: var(--cds-global-space-9, calc(24 * 1rem / var(--cds-global-base, 20))) !important;
}

ul:not([cds-list=unstyled]) > li > ul[cds-list=unstyled],
ol[cds-list] > li > ul[cds-list=unstyled] {
  margin-inline-start: 0;
  padding-inline-start: var(--cds-global-space-9, calc(24 * 1rem / var(--cds-global-base, 20))) !important;
}

ol[cds-list] > li > ol[cds-list] {
  margin-inline-start: 0;
  padding-inline-start: var(--cds-global-space-9, calc(24 * 1rem / var(--cds-global-base, 20)));
}

ul[cds-layout~=horizontal] li,
ol[cds-layout~=horizontal] li {
  list-style-position: inside;
}

dl[cds-list] {
  margin: 0;
}
dl[cds-list] dt {
  font-weight: bold;
}
dl[cds-list] dd {
  margin-inline-start: 0;
}