@lyra/components/lib/buttons/styles/DefaultButton.css

Basic UX components

@import 'part:@lyra/base/theme/variables-style';

@keyframes focused {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

:root {
  --focus-shadow: 0 0 2px 1px color(var(--input-border-color-focus)),
    0 0 4px 0 color(var(--input-border-color-focus) a(60%)),
    0 0 10px 5px color(var(--input-border-color-focus) a(10%));
  --focus-shadow--danger: 0 0 2px 1px color(var(--state-danger-color)),
    0 0 4px 0 color(var(--state-danger-color) a(60%)),
    0 0 10px 5px color(var(--state-danger-color) a(10%));
  --focus-shadow--success: 0 0 2px 1px color(var(--state-success-color)),
    0 0 4px 0 color(var(--state-success-color) a(60%)),
    0 0 10px 5px color(var(--state-success-color) a(10%));
  --focus-shadow-white: 0 0 2px 1px color(var(--white)),
    0 0 4px 0 color(var(--white) a(60%)),
    0 0 10px 5px color(var(--white) a(10%));
}

.content {
  display: inline;
}

.inner {
  display: flex;
  align-items: center;
  outline: none;
  height: 1em;
  overflow: hidden;
}

.spacing {
  display: inline-block;
}

.spacing + .spacing {
  margin-left: var(--small-padding);
}

.root {
  margin: 0;
  padding: 0;
  position: relative;
  display: inline-block;
  outline: none;
  border: none;
  color: inherit;
  font-size: 1em;
  font-family: inherit;
  line-height: 1em;
  cursor: default;
  user-select: none;
  transition: background-color 0.15s, color 0.15s, opacity 0.15s;
  border-radius: var(--button-border-radius);
  text-transform: uppercase;
  composes: spacing;
}

.root:focus {
  box-shadow: var(--focus-shadow);

  @nest & .content {
    animation-name: focused;
    animation-duration: 0.2s;
  }
}

/* Handles fileupload buttons with focus-within */
.root:not(:focus):focus-within .inner:not(:focus) {
  box-shadow: var(--focus-shadow);
}

.root:not(:focus):focus-within .inner:not(:focus) .content {
  animation-name: focused;
  animation-duration: 0.2s;
}

.onlyIcon {
  @nest & .inner {
    padding: 0.7em 0.8em !important;
  }

  @nest & .content {
    display: block;
  }

  @nest & .icon {
    margin-right: 0;
  }
}

.padding_default {
  @nest & .inner {
    @nest :not(.onlyIcon) & {
      padding: 0.7em;

      @media (--screen-medium) {
        padding: 0.7em 1.2em;
      }
    }
  }
}

.padding_small {
  @nest & .inner {
    @nest :not(.onlyIcon) & {
      padding: 0.7em;

      @media (--screen-medium) {
        padding: 0.7em 0.6em;
      }
    }
  }
}

.shadow {
  composes: shadow-1dp from 'part:@lyra/base/theme/shadows-style';
}

.default {
  composes: root;
  composes: shadow;
  background-color: var(--default-button-color);
  color: var(--default-button-color--text);

  @nest &:not(.disabled) {
    @nest &:hover {
      background-color: color(var(--default-button-color) lightness(- 5%));
    }

    @nest &:active {
      background-color: color(var(--default-button-color) lightness(+ 10%));
      outline: 0;
    }
  }
}

.simple {
  composes: root;
  background-color: transparent;

  @nest &:not(.disabled):hover {
    background-color: color(var(--default-button-color) a(90%));
  }

  @nest &:not(.disabled) {
    @nest &:hover {
      background-color: color(
        var(--default-button-color) lightness(- 5%) a(10%)
      );
    }

    @nest &:active {
      background-color: color(
        var(--default-button-color) lightness(+ 10%) a(10%)
      );
      outline: 0;
    }
  }
}

.inverted {
  border: 1px solid var(--gray-base);
  border-color: var(--gray-base);
  background-color: transparent;
  box-shadow: none;
  composes: default;

  @nest &:not(.disabled):hover {
    background-color: color(var(--default-button-color) a(30%));
  }

  @nest &.root:focus {
    border-color: var(--input-border-color-focus);
  }
}

.secondary {
  composes: inverted;
}

.color__primary {
  border-color: var(--brand-primary);
  background-color: var(--brand-primary);
  color: var(--brand-primary--text);

  @nest &:not(.disabled):hover {
    background-color: color(var(--brand-primary) lightness(+ 5%));
    border-color: var(--brand-primary);
  }

  @nest &.inverted {
    border-color: var(--brand-primary);
    background-color: transparent;
    color: var(--brand-primary);

    @nest &:not(.disabled):hover {
      background-color: color(var(--brand-primary) a(10%));
      border-color: var(--brand-primary);
    }
  }

  @nest &.simple {
    background-color: transparent;
    color: var(--brand-primary);

    @nest &:not(.disabled) {
      @nest &:hover {
        background-color: color(var(--brand-primary) a(10%));
      }
    }
  }
}

.color__danger {
  border-color: var(--state-danger-color);
  background-color: var(--state-danger-color);
  color: var(--state-danger-color--text);

  @nest &.root:focus {
    box-shadow: var(--focus-shadow--danger);
    border-color: var(--state-danger-color);
  }

  @nest &:not(.disabled):hover {
    background-color: color(var(--state-danger-color) lightness(+ 5%));
  }

  @nest &.inverted {
    border-color: var(--state-danger-color);
    background-color: transparent;
    color: var(--state-danger-color);

    @nest &:not(.disabled) {
      @nest &:hover {
        background-color: color(var(--state-danger-color) a(10%));
        border-color: var(--state-danger-color);
      }
    }
  }

  @nest &.simple {
    background-color: transparent;
    color: var(--state-danger-color);

    @nest &:not(.disabled) {
      @nest &:hover {
        background-color: color(var(--state-danger-color) a(10%));
      }
    }
  }
}

.color__success {
  border-color: var(--state-success-color);
  background-color: var(--state-success-color);
  color: var(--state-success-color--text);

  @nest &.root:focus {
    box-shadow: var(--focus-shadow--success);
    border-color: var(--state-success-color);
  }

  @nest &:not(.disabled):hover {
    background-color: color(var(--state-success-color) lightness(+ 5%));
  }

  @nest &.inverted {
    border-color: var(--state-success-color);
    background-color: transparent;
    color: var(--state-success-color);

    @nest &:not(.disabled):hover {
      background-color: color(var(--state-success-color) a(10%));
      border-color: var(--state-success-color);
    }
  }

  @nest &.simple {
    background-color: transparent;
    color: var(--state-success-color);

    @nest &:not(.disabled):hover {
      background-color: color(var(--state-success-color) a(10%));
    }
  }
}

.color__white {
  background-color: var(--white);

  @nest &.root:focus {
    box-shadow: var(--focus-shadow-white);
  }

  @nest &:not(.disabled):hover {
    background-color: color(var(--white) lightness(- 5%));
  }

  @nest &.inverted {
    border-color: var(--white);
    background-color: transparent;
    color: var(--white);

    @nest &:not(.disabled) {
      @nest &:focus {
        box-shadow: var(--focus-shadow-white);
        border-color: var(--white);
      }

      @nest &:hover {
        background-color: color(var(--white) a(40%));
        color: var(--white);
      }
    }
  }

  @nest &.simple {
    border-color: transparent;
    background-color: transparent;
    color: var(--white);

    @nest &:not(.disabled):hover {
      background-color: color(var(--white) a(40%));
      color: var(--white);
    }
  }
}

.save {
  composes: root;
}

.spinner {
  margin-right: 0.5em;
}

.hasIcon {
  /* empty */
}

.iconContainer {
  /* empty */
}

.icon {
  /* transform: scale(1.2); */
  margin-right: var(--small-padding);
}

.disabled {
  opacity: 0.2;
}