wikijs/client/scss/base/mixins.scss

/**
 * Clearfix
 *
 * @return     {string}  Clearfix attribute
 */
@mixin clearfix {
	&:after {
		content: "";
		display: table;
		clear: both;
	}
}

/**
 * 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);
}