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, white);
    border-color: var(--button-border-color, LightGrey);
    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, inherit);
    cursor: var(--button-cursor, pointer);
    display: var(--button-display, inline-flex);
    font-weight: var(--button-font-weight, 400);
    gap: var(--button-gap, var(--size-3));
    justify-content: var(--button-justify-content, center);
    line-height: var(--button-line-height, 1);
    outline: var(--button-outline, 0);
    padding: var(--button-padding-top, var(--size-3))
      var(--button-padding-right, var(--size-5))
      var(--button-padding-bottom, var(--size-3))
      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, all 0.2s ease-in-out);

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

    &:not(:disabled) {
      &:hover {
        background: var(--button-hover-background, WhiteSmoke);
        border-color: var(--button-hover-border-color, grey);
        box-shadow: var(--button-hover-box-shadow, none);
        color: var(--button-hover-color, inherit);
        text-decoration: var(--button-hover-text-decoration, none);
      }

      &:focus-visible,
      &:focus {
        background: var(--button-focus-background, WhiteSmoke);
        border-color: var(--button-focus-border-color, grey);
        box-shadow: var(
          --button-focus-box-shadow,
          0 0 0 0.25em rgba(0, 0, 0, 0.125)
        );
        color: var(--button-focus-color, inherit);
        text-decoration: var(--button-focus-text-decoration, none);
      }

      &:active {
        background: var(--button-active-background, WhiteSmoke);
        border-color: var(--button-active-border-color, grey);
        box-shadow: var(
          --button-active-box-shadow,
          0 0 0 0.25em rgba(0, 0, 0, 0.25)
        );
        color: var(--button-active-color, inherit);
        text-decoration: var(--button-active-text-decoration, none);
      }

      &[aria-current="page"] {
        background: var(--button-current-background, WhiteSmoke);
        border-color: var(--button-current-border-color, DarkGray);
        box-shadow: var(--button-current-box-shadow, none);
        color: var(--button-current-color, inherit);
        text-decoration: var(--button-current-text-decoration, none);
      }
    }
  }
}