silverstripe-framework/admin/scss/_mixins.scss

//**
// * This file contains generic mixins which we use throughout
// * the admin panels.
// *
// * Mixins should be stored here rather than individual files
// * so that we can keep.
// */

//** ----------------------------------------------------
// * Hides the overflowing text from a container
// *
// * Note: you must define a width on the element with this
// * overflow.
// * ----------------------------------------------------- */
@mixin hide-text-overflow {
	overflow: hidden;
	white-space: nowrap;
	
	// could optionally use the compass mixin but that
	// would require a 3rd party plugin
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
}

@mixin box-shadow-none{
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
    box-shadow: none;
}


//**----------------------------------------------------
//Clearfix mixin clears the float of it's parent element
//----------------------------------------------------**/
@mixin clearfix{
	&:after{
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
	*:first-child &{ zoom:1;}
}



//** ----------------------------------------------------
// * Clear the properties of sub form fields. 
// *
// * Often needed for nested form fields and 
// * ----------------------------------------------------- */
@mixin clear-form-field-styles {
	.field {
		padding: 0;
		border: 0;
	}

	label {
		float: none;
		width: auto;

		&.left {
			float: none;
			display: inherit;
			width: auto;
			padding: 0;
			line-height: inherit;
		}
	}

	.middleColumn {
		margin-left: 0;
	}

	input.text,
	textarea,
	select,
	.TreeDropdownField {
		width: auto;
		max-width: auto;
	}
}

//** ----------------------------------------------------
// * Double tone borders
// *
// * http://daverupert.com/2011/06/two-tone-borders-with-css3/
// * ----------------------------------------------------- */
@mixin doubleborder($side, $innerColor, $outerColor) {
    $shadow: "0 0 0";
    border-#{$side}: 1px solid $innerColor;
    @if ($side == "top") { $shadow: 0 -1px 0; }
    @if ($side == "right") { $shadow: 1px 0 0; }
    @if ($side == "bottom") { $shadow: 0 1px 0; }
    @if ($side == "left") { $shadow: -1px 0 0; }
    -webkit-box-shadow: $shadow $outerColor;
    -moz-box-shadow: $shadow $outerColor;
    -o-box-shadow: $shadow $outerColor;
    box-shadow: $shadow $outerColor;
}


@mixin delay($time, $webkit:true){
  @if($webkit){
    -webkit-transition-delay: $time;
  }
  -moz-transition-delay: $time;
  -o-transition-delay: $time;
    
}



@mixin transition($properties: margin 0.3s ease-in 0s){
   	-moz-transition: $properties; 
	-webkit-transition: $properties;
	-o-transition: $properties; 
	transition: $properties;
}


@mixin animateNone{
  animation-name:none;
  -moz-animation-name:none; /* Firefox */
  -webkit-animation-name:none; /* Safari and Chrome */
  -o-animation-name:none; /* Opera */
  -ms-animation-name:none;
}


@mixin keyframeSettings($name){
  @if($name == "rotate"){
    0% {
    	-webkit-transform-origin: center center;
    	margin-top:20px;   
		@include rotate(90deg);
    } 
	100% {   
		width: 583px;
		height: 320px;    
	    @include rotate(0deg);	   
    }
  }@else if($name == "rotate_secondary"){
    0% {
    	 
    	@include delay(0.5s);    		
    } 
    1%{
    	 
    }
    50%{
		-webkit-transform-origin: center center;
    	margin-top:20px;   
		//@include rotate(-90deg);
    }
	100% {   
	    @include rotate(0deg);	   
    }
  }
}


@mixin keyframes($name){
//Animation keyframes
  @-webkit-keyframes $name {
    @include keyframeSettings($name);
  }
  @-moz-keyframes $name {
    @include keyframeSettings($name);
  }
  @-ms-keyframes $name {
    @include keyframeSettings($name);
  }
  @-o-keyframes $name {
    @include keyframeSettings($name);
  }
  @keyframes $name {
    @include keyframeSettings($name);
  }
}



// $effect needs a corrosponding keyframe, (such as rotate) 
// with corrosponding keyframeSettings. Called below this mixin
// eg @include keyframes(grow); 
@mixin animateOptions($effect, $time:0.2s, $function:linear) {
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  -webkit-animation:$effect $time $function both; //webkit supports this short-hand, moz doesn't yet
  -moz-animation:$effect $time $function;
  -ms-animation:$effect $time $function;
  -o-animation:$effect $time $function;
  animation:$effect $time $function both;
}

// Shorthand call to animateOptions
// $effect needs a corrosponding keyframe, (such as rotate)  
// with corrosponding keyframeSettings. Called below this mixin
// eg @include keyframes(grow); 
@mixin animateEffect($effect) {
   @include animateOptions($effect);
}

@include keyframes(rotate);
@include keyframes(rotate_secondary);