Pill

Overview

Basic pill

<span class="pill">99</span>

Files

https://github.com/davidbrooksio/cwf-lite/blob/master/style/modules/pill.css

• Directorystyle

  • Directorymodules

    • pill.css

Stylesheet

@layer cwf-modules {
  .pill {
    align-items: var(--pill-align-items, center);
    display: var(--pill-display, inline-flex);
    justify-content: var(--pill-justify-content, center);
    background: var(--pill-background, grey);
    border-color: var(--pill-border-color, grey);
    border-radius: var(--pill-border-radius, 99rem);
    border-style: var(--pill-border-style, solid);
    border-width: var(--pill-border-width, 1px);
    color: var(--pill-color, LightGrey);
    font-size: var(--pill-font-size, 11px);
    font-weight: var(--pill-font-weight, 400);
    line-height: var(--pill-line-height, 1);
    text-align: var(--pill-text-align, center);
    white-space: var(--pill-white-space, nowrap);
    gap: var(--pill-gap, var(--size-2));
    padding: var(--pill-padding-top, 0) var(--pill-padding-right, var(--size-2))
      var(--pill-padding-bottom, 0) var(--pill-padding-left, var(--size-2));
    min-width: var(--pill-min-width, 1rem);
    min-height: var(--pill-min-height, 1rem);
    user-select: var(--pill-user-select, none);
    vertical-align: var(--pill-vertical-align, middle);
  }
}