notes/_sass/buttons.scss

//
// Buttons and things that look like buttons
//
// stylelint-disable color-named

.btn {
  display: inline-block;
  box-sizing: border-box;
  padding-top: 0.3em;
  padding-right: 1em;
  padding-bottom: 0.3em;
  padding-left: 1em;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  line-height: 1.5;
  color: $purple-200;
  text-decoration: none;
  vertical-align: baseline;
  cursor: pointer;
  background-color: #f7f7f7;
  border-width: 0;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
  appearance: none;

  &:focus {
    text-decoration: none;
    outline: none;
    box-shadow: 0 0 0 3px rgba(blue, 0.25);
  }

  &:focus:hover,
  &.selected:focus {
    box-shadow: 0 0 0 3px rgba(blue, 0.25);
  }

  &:hover,
  &.zeroclipboard-is-hover {
    color: $purple-300;
  }

  &:hover,
  &:active,
  &.zeroclipboard-is-hover,
  &.zeroclipboard-is-active {
    text-decoration: none;
    background-color: #f4f4f4;
  }

  &:active,
  &.selected,
  &.zeroclipboard-is-active {
    background-color: #ededed;
    background-image: none;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
  }

  &.selected:hover {
    background-color: darken(#dcdcdc, 5%);
  }

  &:disabled,
  &.disabled {
    &,
    &:hover {
      color: rgba(102, 102, 102, 0.5);
      cursor: default;
      background-color: rgba(229, 229, 229, 0.5);
      background-image: none;
      box-shadow: none;
    }
  }
}

.btn-outline {
  color: $blue-100;
  background: transparent;
  box-shadow: inset 0 0 0 2px $grey-lt-300;

  &:hover,
  &:active,
  &.zeroclipboard-is-hover,
  &.zeroclipboard-is-active {
    color: $grey-dk-100;
    text-decoration: none;
    background-color: transparent;
    box-shadow: inset 0 0 0 3px $grey-lt-300;
  }

  &:focus {
    text-decoration: none;
    outline: none;
    box-shadow: inset 0 0 0 2px $grey-dk-100, 0 0 0 3px rgba(blue, 0.25);
  }

  &:focus:hover,
  &.selected:focus {
    box-shadow: inset 0 0 0 2px $grey-dk-100;
  }
}

.btn-purple {
  @include btn-color($white, $purple-100);
}

.btn-blue {
  @include btn-color($white, $blue-000);
}

.btn-green {
  @include btn-color($white, $green-100);
}