Button

Overview

Basic button

<button class="button" type="button">Click me</button>

Files

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

• Directorystyle

  • Directorymodules

    • button.css

Stylesheet

@layer cwf-modules {
  .button {
    align-items: var(--button-align-items, center);
    background: var(--button-background, var(--color-background));
    border-color: var(--button-border-color, var(--color-border));
    border-radius: var(--button-border-radius, var(--size-2));
    border-style: var(--button-border-style, solid);
    border-width: var(--button-border-width, 1px);
    box-shadow: var(--button-box-shadow, none);
    color: var(--button-color, var(--color-text));
    cursor: var(--button-cursor, pointer);
    display: var(--button-display, inline-flex);
    font-family: var(--button-font-family, inherit);
    font-size: var(--button-font-size, inherit);
    font-weight: var(--button-font-weight, 400);
    gap: var(--button-gap, var(--size-3));
    height: var(--button-height, var(--control-height, auto));
    justify-content: var(--button-justify-content, center);
    line-height: var(--button-line-height, var(--control-line-height));
    outline: var(--button-outline, 0);

    padding-block-start: var(--button-padding-top, var(--control-padding-y));
    padding-inline-end: var(--button-padding-right, var(--size-5));
    padding-block-end: var(--button-padding-bottom, var(--control-padding-y));
    padding-inline-start: var(--button-padding-left, var(--size-5));

    text-align: var(--button-text-align, center);
    text-decoration: var(--button-text-decoration, none);
    user-select: var(--button-user-select, none);
    vertical-align: var(--button-vertical-align, middle);
    white-space: var(--button-white-space, nowrap);
    transition: var(
      --button-transition,
      transform 0.1s ease,
      background-color 0.2s ease,
      border-color 0.2s ease,
      box-shadow 0.2s ease
    );

    &:disabled {
      opacity: var(--button-disabled-opacity, 0.6);
      cursor: var(--button-disabled-cursor, not-allowed);
    }

    &:not(:disabled) {
      &[aria-current="page"],
      &[data-active="true"] {
        background: var(
          --button-current-background,
          var(--color-neutral-hover)
        );
        border-color: var(--button-current-border-color, var(--color-primary));
        box-shadow: var(--button-current-box-shadow, none);
        color: var(--button-current-color, var(--color-text));
        text-decoration: var(--button-current-text-decoration, none);
      }

      &:hover {
        background: var(--button-hover-background, var(--color-neutral-hover));
        border-color: var(--button-hover-border-color, var(--color-border));
        box-shadow: var(--button-hover-box-shadow, none);
        color: var(--button-hover-color, var(--color-text));
        text-decoration: var(--button-hover-text-decoration, none);
      }

      &:focus-visible,
      &:focus {
        background: var(--button-focus-background, var(--color-background));
        border-color: var(--button-focus-border-color, var(--color-primary));
        box-shadow: var(
          --button-focus-box-shadow,
          0 0 0 0.25em hsl(from var(--color-primary) h s l / 15%)
        );
        color: var(--button-focus-color, var(--color-text));
        text-decoration: var(--button-focus-text-decoration, none);
      }

      &:active {
        background: var(--button-active-background, var(--color-neutral-hover));
        border-color: var(--button-active-border-color, var(--color-primary));
        box-shadow: var(
          --button-active-box-shadow,
          0 0 0 0.25em hsl(from var(--color-primary) h s l / 25%)
        );
        color: var(--button-active-color, var(--color-text));
        text-decoration: var(--button-active-text-decoration, none);
        transform: var(--button-active-transform, scale(0.98));
      }
    }
  }
}