wikijs/client/scss/layout/_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};
}