react-toolbox/components/button/theme.css

@import '../colors.css';
@import '../variables.css';
@import './config.css';

.button {
  align-content: center;
  align-items: center;
  border: 0;
  composes: reset from '../helpers.css';
  cursor: pointer;
  display: inline-block;
  flex-direction: row;
  font-size: calc(1.4 * var(--unit));
  font-weight: 500;
  height: var(--button-height);
  justify-content: center;
  letter-spacing: 0;
  line-height: var(--button-height);
  outline: none;
  padding: 0;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    box-shadow 0.2s var(--animation-curve-fast-out-linear-in),
    background-color 0.2s var(--animation-curve-default),
    color 0.2s var(--animation-curve-default);
  white-space: nowrap;

  & > input {
    height: 0.1px;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 0.1px;
    z-index: 0;
  }

  &::-moz-focus-inner {
    border: 0;
  }

  & > span:not([data-react-toolbox='tooltip']) {
    display: inline-block;
    line-height: var(--button-height);
    vertical-align: top;
  }

  & > svg {
    display: inline-block;
    fill: currentColor;
    font-size: 120%;
    height: var(--button-height);
    vertical-align: top;
    width: 1em;
  }

  & > * {
    pointer-events: none;
  }

  & > .rippleWrapper {
    overflow: hidden;
  }

  &[disabled] {
    color: var(--button-disabled-text-color);
    cursor: auto;
    pointer-events: none;
  }
}

.squared {
  border-radius: var(--button-border-radius);
  min-width: var(--button-squared-min-width);
  padding: var(--button-squared-padding);

  & .icon {
    font-size: 120%;
    margin-right: var(--button-squared-icon-margin);
    vertical-align: middle;
  }

  & > svg {
    margin-right: calc(0.5 * var(--unit));
  }
}

.solid {
  &[disabled] {
    background-color: var(--button-disabled-background-color);
    box-shadow: var(--shadow-2p);
  }

  &:active {
    box-shadow: var(--shadow-2p);
  }

  &:focus:not(:active) {
    box-shadow:
      0 0 8px rgba(0, 0, 0, 0.18),
      0 8px 16px rgba(0, 0, 0, 0.36);
  }
}

.raised {
  box-shadow: var(--shadow-2p);
  composes: button;
  composes: squared;
  composes: solid;
}

.flat {
  background: transparent;
  composes: button;
  composes: squared;
}

.floating {
  border-radius: 50%;
  box-shadow:
    0 1px 1.5px 0 rgba(0, 0, 0, 0.12),
    0 1px 1px 0 rgba(0, 0, 0, 0.24);
  composes: button;
  composes: solid;
  font-size: var(--button-floating-font-size);
  height: var(--button-floating-height);
  width: var(--button-floating-height);

  & .icon {
    line-height: var(--button-floating-height);
  }

  & > .rippleWrapper {
    border-radius: 50%;
  }

  &.mini {
    font-size: var(--button-floating-mini-font-size);
    height: var(--button-floating-mini-height);
    width: var(--button-floating-mini-height);

    & .icon {
      line-height: var(--button-floating-mini-height);
    }
  }
}

.toggle {
  background: transparent;
  border-radius: 50%;
  composes: button;
  vertical-align: middle;
  width: var(--button-height);

  & > .icon,
  & svg {
    font-size: var(--button-toggle-font-size);
    line-height: var(--button-height);
    vertical-align: top;
  }

  & > .rippleWrapper {
    border-radius: 50%;
  }
}

.primary:not([disabled]) {
  &.raised,
  &.floating {
    background: var(--button-primary-color);
    color: var(--button-primary-color-contrast);
  }

  &.flat,
  &.toggle {
    color: var(--button-primary-color);

    &:focus:not(:active) {
      background: var(--button-primary-color-hover);
    }
  }

  &.flat:hover {
    background: var(--button-primary-color-hover);
  }
}

.accent:not([disabled]) {
  &.raised,
  &.floating {
    background: var(--button-accent-color);
    color: var(--button-accent-color-contrast);
  }

  &.flat,
  &.toggle {
    color: var(--button-accent-color);

    &:focus:not(:active) {
      background: var(--button-accent-color-hover);
    }
  }

  &.flat:hover {
    background: var(--button-accent-color-hover);
  }
}

.neutral:not([disabled]) {
  &.raised,
  &.floating {
    background-color: var(--button-neutral-color);
    color: var(--button-neutral-color-contrast);
  }

  &.flat,
  &.toggle {
    color: var(--button-neutral-color-contrast);

    &:focus:not(:active) {
      background: var(--button-neutral-color-hover);
    }
  }

  &.flat:hover {
    background: var(--button-neutral-color-hover);
  }

  &.inverse {
    &.raised,
    &.floating {
      background-color: var(--button-neutral-color-contrast);
      color: var(--button-neutral-color);
    }

    &.flat,
    &.toggle {
      color: var(--button-neutral-color);

      &:focus:not(:active) {
        background: var(--button-neutral-color-hover);
      }
    }

    &.flat:hover {
      background: var(--button-neutral-color-hover);
    }
  }
}

.neutral.inverse[disabled] {
  background-color: var(--button-disabled-background-inverse);
  color: var(--button-disabled-text-color-inverse);
}