wikijs/client/scss/base/mixins.scss

/**
* Placeholder attribute for inputs
*
* @return     {string}  Placeholder attributes
*/
@mixin placeholder {
  &::-webkit-input-placeholder {@content;}
  &::-moz-placeholder {@content;}
  &:-ms-input-placeholder {@content;}
  &:placeholder-shown {@content;}
}

/**
* Spinner element
*
* @param      {string}  $color             - Color
* @param      {string}  $dur               - Animation Duration
* @param      {int}     $width             - Width
* @param      {int}     $height  [$width]  - height
*
* @return     {string}  Spinner element
*/
@mixin spinner($color,$dur,$width,$height:$width) {
  width: $width;
  height: $height;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 2px 1px 0 $color;
  @include prefix(animation, spin $dur linear infinite);
  @include keyframes(spin) {
    100%{
      @include prefix(transform, rotate(360deg));
    }
  }
}

/**
* Prefixes for keyframes
*
* @param      {string}  $animation-name          - The animation name
*
* @return     {string}  Prefixed keyframes attributes
*/
@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @-moz-keyframes #{$animation-name} {
    @content;
  }
  @-o-keyframes #{$animation-name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}

/**
* Prefix function for browser compatibility
*
* @param      {string}  $property          - Property name
* @param      {any}     $value             - Property value
*
* @return     {string}  Prefixed attributes
*/
@mixin prefix($property, $value) {
  -webkit-#{$property}: #{$value};
  -moz-#{$property}: #{$value};
  -ms-#{$property}: #{$value};
  -o-#{$property}: #{$value};
  #{$property}: #{$value};
}

/**
* Layout Mixins
*/
@mixin from($device) {
  @media screen and (min-width: $device) {
    @content;
  }
}

@mixin until($device) {
  @media screen and (max-width: $device - 1px) {
    @content;
  }
}

@mixin mobile {
  @media screen and (max-width: $tablet - 1px) {
    @content;
  }
}

@mixin tablet {
  @media screen and (min-width: $tablet) {
    @content;
  }
}

@mixin tablet-only {
  @media screen and (min-width: $tablet) and (max-width: $desktop - 1px) {
    @content;
  }
}

@mixin touch {
  @media screen and (max-width: $desktop - 1px) {
    @content;
  }
}

@mixin desktop {
  @media screen and (min-width: $desktop) {
    @content;
  }
}

@mixin desktop-only {
  @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px) {
    @content;
  }
}

@mixin widescreen {
  @media screen and (min-width: $widescreen) {
    @content;
  }
}

// Nucleo Icons

@mixin nc-rotate($degrees, $rotation) {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
  -webkit-transform: rotate($degrees);
  -moz-transform: rotate($degrees);
  -ms-transform: rotate($degrees);
  -o-transform: rotate($degrees);
  transform: rotate($degrees);
}

@mixin nc-flip($horiz, $vert, $rotation) {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
  -webkit-transform: scale($horiz, $vert);
  -moz-transform: scale($horiz, $vert);
  -ms-transform: scale($horiz, $vert);
  -o-transform: scale($horiz, $vert);
  transform: scale($horiz, $vert);
}