path: root/assets/sass/_mixins.scss

// - - - - - - - - - - - - - - - - - -
// Mixins
// - - - - - - - - - - - - - - - - - -

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Responsive
// Usage: @include mq(tabletp) {}

// iPhone min device width cheat sheet:
//
// iPhone 4 and 4S: 320px
// iPhone 5, 5S, 5C and 5SE: 320px
// iPhone 6, 6S, 7 and 8: 375px
// iPhone 6+, 7+ and 8+: 414px
// iPhone X: 375px
$break-phonem: 320px;
$break-phonel: 480px;
$break-tabletp: 768px;
$break-tabletl: 1024px;
$break-laptop: 1220px;
$break-desktop: 1600px;

@mixin mq($media) {
  @if $media == phonem {
    @media only screen and (min-width: $break-phonem) { @content; }
  }
  @else if $media == phonel {
    @media only screen and (min-width: $break-phonel) { @content; }
  }
  @else if $media == tabletp {
    @media only screen and (min-width: $break-tabletp) { @content; }
  }
  @else if $media == tabletl {
    @media only screen and (min-width: $break-tabletl) { @content; }
  }
  @else if $media == laptop {
    @media only screen and (min-width: $break-laptop) { @content; }
  }
  @else if $media == desktop {
    @media only screen and (min-width: $break-desktop) { @content; }
  }
}

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  text-size-adjust
// Controls the text inflation algorithm used on some smartphones and tablets.
// Other browsers will ignore this property.
//
// Usage: @include text-size-adjust(none);

@mixin text-size-adjust($value) {
  -webkit-text-size-adjust: $value;
     -moz-text-size-adjust: $value; // editorconfig-checker-disable-line
      -ms-text-size-adjust: $value;
          text-size-adjust: $value;
}

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  Transform
// Usage: @include transform(
//             rotate(90deg),
//             scale(0.5),
//             // ... add more transforms if you need
//        );
//

@mixin transform($transforms...) {
  // combine the passed transforms into a space separated list
  $transform-list: join($transforms, null, space);

  // print out the transforms
  -webkit-transform: $transform-list;
     -moz-transform: $transform-list; // editorconfig-checker-disable-line
      -ms-transform: $transform-list;
       -o-transform: $transform-list; // editorconfig-checker-disable-line
          transform: $transform-list;
}

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  Transitions
// Usage: @include transition(color .3s ease);

@mixin transition($args...) {
  -webkit-transition: $args;
     -moz-transition: $args; // editorconfig-checker-disable-line
      -ms-transition: $args;
       -o-transition: $args; // editorconfig-checker-disable-line
          transition: $args;
}

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Appearance
// Used to display an element using platform-native styling based
// on the operating system's theme.
//
// Usage: @include appearance(button);

@mixin appearance($value) {
  -webkit-appearance: $value;
     -moz-appearance: $value; // editorconfig-checker-disable-line
          appearance: $value;
}

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  Placeholder
// Style the placeholder text of a form element.
//
// Usage: @include input-placeholder(#ABB7B7, 15%);

@mixin input-placeholder($color, $alpha) {
  ::-webkit-input-placeholder {
    color: lighten($color, $alpha);
  }

  ::-moz-placeholder {
    color: lighten($color, $alpha);
  }

  :-ms-input-placeholder {
    color: lighten($color, $alpha);
  }

  :-moz-placeholder {
    color: lighten($color, $alpha);
  }
}

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Box Sizing
// Sets how the total width and height of an element is calculated.
//
// Usage: @include box-sizing(border-box);

@mixin box-sizing ($value) {
  -webkit-box-sizing: $value;
     -moz-box-sizing: $value; // editorconfig-checker-disable-line
          box-sizing: $value;
}


// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Box Shadow
//
// Usage: @include box-shadow(0 0 2px 1px #e21a23!important);

@mixin box-shadow ($args...) {
  -webkit-box-shadow: $args;
     -moz-box-shadow: $args; // editorconfig-checker-disable-line
          box-shadow: $args;
}

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Border Radius
//
// Usage: @include border-radius(10% 30% 50% 70%);

@mixin border-radius ($args...) {
  -webkit-border-radius: $args;
     -moz-border-radius: $args; // editorconfig-checker-disable-line
          border-radius: $args;
}

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Flex Wrap
// Sets whether flex items are forced onto one line or can wrap onto
// multiple lines.
//
// Usage: @include flex-wrap(wrap);

@mixin flex-wrap ($value) {
  -webkit-flex-wrap: $value;
      -ms-flex-wrap: $value;
          flex-wrap: $value;
}

// - - - - - - - - - - - - - - - - - - - - - - - - - - - Box Decoration Break
// Specifies how an element's fragments should be rendered when broken across
// multiple lines, columns, or pages.
//
// Usage: @include box-decoration-break(clone);

@mixin box-decoration-break ($value) {
  -webkit-box-decoration-break: $value;
      -ms-box-decoration-break: $value;
          box-decoration-break: $value;
}

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Mask


// Usage: @include mask-image(url("/img/external-link.svg"));

@mixin mask-image($value) {
  -webkit-mask-image: $value;
          mask-image: $value;
}

// Usage: @include mask-size(cover);

@mixin mask-size($value) {
  -webkit-mask-size: $value;
          mask-size: $value;
}

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Filter
// Applies graphical effects like blur or color shift to an element.
//
// Usage: @include filter(drop-shadow(0 2px 5px rgba(0, 0, 0, .3)));

@mixin filter($value) {
  -webkit-filter: $value;
     -moz-filter: $value; // editorconfig-checker-disable-line
       -o-filter: $value; // editorconfig-checker-disable-line
          filter: $value;
}

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - clip-path
// Create a clipping region that sets what part of an element should be shown.
//
// Usage: @include clip-path(
//             padding-box,
//             circle(50px at 0 100px),
//             // ...
//        );

@mixin clip-path($clip-list...) {
  // combine the passed transforms into a space separated list
  $clip-list: join($clip-list, null, space);

  -webkit-clip-path: $clip-list;
     -moz-clip-path: $clip-list; // editorconfig-checker-disable-line
      -ms-clip-path: $clip-list;
          clip-path: $clip-list;
}


// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - visually-hidden
// Visually hides text content for accessibility. This text should
// only be visible to screen reader users.
//
// Usage: @include visually-hidden();

@mixin visually-hidden {
  // Outside the DOM flow
  position: absolute !important;
  // Do not wrap content
  white-space: nowrap;
  // Hide borders
  border: 0;
  // Nearly collapsed
  height: 1px;
  width: 1px;
  // Remove padding / margin
  padding: 0;
  margin: -1px;
  // Do not allow overflow
  overflow: hidden;
  // Hide the 1px x 1px element completely
  // - clip: old browsers
  // - clip-path: modern browsers
  clip: rect(1px, 1px, 1px, 1px);
  @include clip-path(inset(50%));
}