blog/src/styles/_buttons.scss

@import 'variables';
@import 'mixins';

.btn,
a.btn {
  text-align: center;
  display: block;
  margin-bottom: 0;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none; // Reset unusual Firefox-on-Android default style
  white-space: nowrap;
  user-select: none;
  transition: 0.2s ease-in-out;

  // Default Button
  @include button-size(
    $padding-base-vertical,
    $padding-base-horizontal,
    $font-size-small,
    $line-height,
    $border-radius
  );

  background-color: rgba(#fff, 0.1);
  border: 1px solid rgba($brand-grey-light, 0.3);
  border-bottom-color: rgba($brand-grey-light, 0.4);
  font-family: $font-family-headings;
  font-weight: $font-weight-headings;
  color: $brand-grey;
  text-transform: uppercase;
  box-shadow: 0 1px 3px rgba($brand-grey-light, 0.15),
    inset 0 1px 0 rgba(#fff, 0.7);

  @media (min-width: $screen-sm) {
    max-width: 20rem;
  }

  &:hover,
  &:focus {
    outline: 0;
    background-color: rgba(#fff, 0.5);
  }

  &:active {
    color: $brand-grey;
    border-color: rgba($brand-grey-light, 0.3);
    background-color: transparent;
    box-shadow: 0 1px 0 #fff;
    transition: none;
    outline: 0;
  }

  :global(.dark) &:not(.btn-primary) {
    color: $brand-grey-light;
    background-color: darken($body-background-color--dark, 3%);
    border: 1px solid darken($body-background-color--dark, 10%);
    box-shadow: 0 1px 3px rgba(darken($body-background-color--dark, 10%), 0.5),
      inset 0 1px 0 rgba(#fff, 0.1);

    &:hover,
    &:focus {
      background-color: darken($body-background-color--dark, 1%);
    }

    &:active {
      background-color: darken($body-background-color--dark, 5%);
      box-shadow: 0 1px 0 rgba(#fff, 0.1);
    }
  }

  // Disabled State
  &.disabled,
  &[disabled] {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.6;
    box-shadow: none;
  }

  // grid buttons
  &.col2,
  &.col3 {
    margin-bottom: $spacer / 2;

    @media (min-width: $screen-sm) {
      margin-bottom: 0;
    }
  }

  span {
    font-size: $font-size-mini;
    color: $text-color-light;
    margin-left: 0.3em;
  }
}

button.link {
  color: $link-color;

  &:hover,
  &:focus {
    outline: 0;
    color: lighten($link-color, 10%);
  }

  &:active {
    transition: none;
    color: darken($link-color, 10%);
  }
}

// Primary Button
.btn-primary,
a.btn-primary {
  @extend .btn;

  color: darken($link-color, 50%);
  text-shadow: 0 1px 0 rgba(#fff, 0.3);
  background: lighten($link-color, 15%);
  border-color: $link-color;
  box-shadow: 0 1px 3px rgba($brand-grey-light, 0.4),
    inset 0 1px 0 rgba(#fff, 0.4);

  &:hover,
  &:focus {
    color: darken($link-color, 50%);
    background-color: lighten($link-color, 25%);
    text-shadow: 0 1px 0 rgba(#fff, 0.3);
  }

  &:active {
    color: darken($link-color, 50%);
    border-color: darken($link-color, 10%);
    background-color: lighten($link-color, 15%);
  }

  .dark &,
  &:global(.dark) & {
    border-color: darken($body-background-color--dark, 10%);
    background: $link-color;
    box-shadow: 0 1px 3px darken($body-background-color--dark, 10%),
      inset 0 1px 0 rgba(#fff, 0.4);

    // stylelint-disable no-descending-specificity
    &:hover,
    &:focus {
      background-color: lighten($link-color, 10%);
      text-shadow: 0 1px 0 rgba(#fff, 0.3);
    }

    &:active {
      background-color: darken($link-color, 5%);
      box-shadow: 0 1px 0 rgba(#fff, 0.2);
    }
    // stylelint-enable no-descending-specificity
  }
}

.btn-block {
  display: block;
}

// Close button
/////////////////////////////////////

.close {
  text-align: center;
  display: block;
  color: lighten($brand-grey-light, 50%);
  line-height: 1;
  font-size: $font-size-large;
  padding: 3px;
  cursor: pointer;

  &button {
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
  }

  &:hover,
  &:focus {
    color: lighten($brand-grey-light, 20%);
    cursor: pointer;
    outline: 0;
  }

  &:active {
    background: none;
    color: $brand-grey-light;
    transition: none;
  }
}

// some helper classes for old content
/////////////////////////////////////

.content-download {
  text-align: center;
  display: block;
  margin-top: $spacer * 2;
  margin-bottom: $spacer * 2;

  @media (min-width: $screen-xs) {
    display: flex;
  }

  a {
    @extend .btn;

    margin-bottom: $spacer / 2;

    @media (min-width: $screen-xs) {
      flex: 1;
      margin-left: $spacer / 2;
      margin-bottom: 0;
    }

    &:first-child {
      margin-left: 0;
    }

    &:only-child {
      margin-left: auto;
      margin-right: auto;
    }

    span {
      font-size: $font-size-mini;
      color: $text-color-light;
    }

    &[class*='icon-'] {
      &::before {
        content: '';
        width: $font-size-large;
        height: $font-size-large;
        display: inline-block;
        margin-right: 0.3rem;
        margin-bottom: -0.25rem;
        opacity: 0.75;
        background-repeat: no-repeat;
        background-position: left center;

        .dark &,
        :global(.dark) & {
          filter: invert(0.75);
        }
      }
    }

    &[class*='btn-primary'] {
      &::before {
        .dark &,
        :global(.dark) & {
          filter: invert(0);
        }
      }
    }
  }

  .icon-download::before {
    background-image: url('../images/arrow-with-circle-down.svg');
  }

  .icon-heart::before {
    background-image: url('../images/heart.svg');
  }

  .icon-github::before {
    background-image: url('../images/github.svg');
  }

  .icon-eye::before {
    background-image: url('../images/eye.svg');
  }
}