assets/scss/_mixins.scss

//  Licensed under the Apache License, Version 2.0 (the "License"); you may not
//  use this file except in compliance with the License. You may obtain a copy of
//  the License at
//
//    http://www.apache.org/licenses/LICENSE-2.0
//
//  Unless required by applicable law or agreed to in writing, software
//  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
//  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
//  License for the specific language governing permissions and limitations under
//  the License.

@mixin box-sizing($boxmodel) {
  -webkit-box-sizing: $boxmodel;
  -moz-box-sizing: $boxmodel;
  box-sizing: $boxmodel;
}
// Border Radius
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}
// Single Corner Border Radius
@mixin border-top-left-radius($radius) {
  -webkit-border-top-left-radius: $radius;
  -moz-border-radius-topleft: $radius;
  border-top-left-radius: $radius;
}
@mixin border-top-right-radius($radius) {
  -webkit-border-top-right-radius: $radius;
  -moz-border-radius-topright: $radius;
  border-top-right-radius: $radius;
}
@mixin border-bottom-right-radius($radius) {
  -webkit-border-bottom-right-radius: $radius;
  -moz-border-radius-bottomright: $radius;
  border-bottom-right-radius: $radius;
}
@mixin border-bottom-left-radius($radius) {
  -webkit-border-bottom-left-radius: $radius;
  -moz-border-radius-bottomleft: $radius;
  border-bottom-left-radius: $radius;
}
// Single Side Border Radius
@mixin border-top-radius($radius) {
  @include border-top-right-radius($radius);
  @include border-top-left-radius($radius);
}
@mixin border-right-radius($radius) {
  @include border-top-right-radius($radius);
  @include border-bottom-right-radius($radius);
}
@mixin border-bottom-radius($radius) {
  @include border-bottom-right-radius($radius);
  @include border-bottom-left-radius($radius);
}
@mixin border-left-radius($radius) {
  @include border-top-left-radius($radius);
  @include border-bottom-left-radius($radius);
}
@mixin rotate($degrees) {
  -webkit-transform: rotate($degrees);
  -moz-transform: rotate($degrees);
  -ms-transform: rotate($degrees);
  -o-transform: rotate($degrees);
  transform: rotate($degrees);
}

@mixin transition($arguments...) {
  -webkit-transition: $arguments;
  -moz-transition: $arguments;
  -ms-transition: $arguments;
  -o-transition: $arguments;
  transition: $arguments;
}

@mixin bottom-border($height: 6px) {
  border-bottom: 1px solid $cf-border-color02;
}

@mixin left-border() {
  border-left: 1px solid $cf-border-color02;
}

@mixin noselect() {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@mixin display-flex() {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

/* rather than run through all permutations of the shorthand options for flex, this just pulls all arguments */
@mixin flex($arguments...) {
  -webkit-flex: $arguments;
  -ms-flex: $arguments;
  flex: $arguments;
}

/* $dir: column or row */
@mixin flex-direction($dir) {
  -webkit-flex-direction: $dir;
  -ms-flex-direction: $dir;
  flex-direction: $dir;
}