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;
}

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

	.middleColumn {
		margin-left: 0;
	}
}

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


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



/**
	Mixin creates a transparent button with a dropdown arrow, 
	as is used for files in the files up-load area. The arrows 
	themselves are added in the _style file
**/
@mixin ss-uploadfield-editButton{
	&.ss-uploadfield-item-edit {
		opacity:0.9;
		padding-top: 3px;
		padding-bottom: 0;
		height:100%;
		@include border-radius(0);
		&.ui-state-hover{
			background:none;		
			opacity:1;
			span.toggle-details{
				opacity:1;
			}	
		}
		span.toggle-details{
			opacity:0.9;
			margin-left:3px;
			display: inline-block;
			width: 5px;
			height: 100%;
			cursor: pointer;
			.toggle-details-icon {
				margin-top:1px;
				display: inline-block;
				width: 8px;
				height: 8px;
				vertical-align: middle;
				&.opened {	
					margin-top:0;
				}
			}
		}

	}

	.ui-icon {
		display: none;
	}	
}