washnroll/files/wash-n-roll/internal/scss/abstracts/_mixins.scss

$base-size: 16;
@function size($target, $context: $base-size) {
  @return ($target / $context) * 1rem;
}

@mixin afterOverflow {
  &:after {
    content:".";
    display:block;
    clear:both;
    font-size:0;
    height:0;
    visibility:hidden;
  }
}

@mixin transition {
  transition: all 0.3s ease-out;
}

@mixin fullwidth {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin: 0 -50vw 5rem -50vw;
  background: #f5f5f5;
}

@mixin button {
  display: inline-block;
  padding: 8px 28px;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: size(16);
  line-height: size(20);
  text-decoration: none;
  color: $font;
  white-space: nowrap;
  border: none;
  background: $tertiary;
  border-radius: 20px;
  cursor: pointer;
  @include transition();
  &:hover {
    color: $white;
  }
}

//@mixin btn-primary {
//  display: inline-block;
//  min-width: 250px;
//  text-align: center;
//  height: 48px;
//  font-size: size(23);
//  line-height: size(36);
//  font-weight: 500;
//  letter-spacing: 2px;
//  background: $primary;
//  border: none;
//  color: #fff;
//  text-decoration: none;
//  transition: 0.2s;
//  &:hover {
//    background: lighten($primary, 15%);
//  }
//}
//
//@mixin btn-secondary {
//  display: inline-block;
//  height: 48px;
//  padding: 0 25px;
//  font-size: size(23);
//  line-height: size(36);
//  font-weight: 500;
//  letter-spacing: 2px;
//  background: $secondary;
//  border: none;
//  color: #fff;
//  text-decoration: none;
//  transition: 0.2s;
//  &:hover {
//    background: lighten($secondary, 15%);
//  }
//}
//
//@mixin btn-light {
//  display: inline-block;
//  font-size: size(23);
//  line-height: size(36);
//  font-weight: 500;
//  letter-spacing: 2px;
//  background: #fff;
//  border: none;
//  color: $primary;
//  height: 48px;
//  transition: 0.2s;
//  &:hover {
//    background: rgba(#fff, 0.75);
//  }
//}