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 transition($properties: margin 0.3s ease-in 0s){
   	-moz-transition: $properties;
	-webkit-transition: $properties;
	-o-transition: $properties;
	transition: $properties;
}

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

//** ----------------------------------------------------
// * Show label and field content in their own lines,
// * to maximize the available horizontal space.
// * ----------------------------------------------------- */
@mixin form-field-stacked {
	label {
		display: block;
		float: none;
		padding-bottom: 10px;
	}

	.middleColumn {
		margin-left: 0px;
		clear: left;
	}

	.description {
		margin-left: 0px;
	}
}

/*Mixin used to generate slightly smaller text and forms
Used in side panels and action tabs
*/
@mixin tightSpacing{
	h3,h4,h5 {
		font-weight: bold;
		line-height: $grid-y * 2;
	}
	h3 {
		font-size: $font-base-size + 1;
	}

	h4 {
		font-size: $font-base-size;
		margin:5px 0;
	}

	.ui-widget-content {
		background: none;
	}

	.field {
		/*
		 * Fields are more compressed in some areas compared to the
		 * main content editing window so the below alters the internal
		 * spacing of the fields so we can move that spacing to between
		 * the form fields rather than padding
		 */
		border-bottom:none;
		@include box-shadow(none);
		label {
			float: none;
			width: auto;
			font-size: 12px;
			padding: 0 $grid-x 4px 0;
			&.extra-details{
				overflow:hidden;
				margin-top:10px;
				display: block;
				color: lighten($color-text, 35%);
				font-style:italic;
				font-weight:normal;
				font-size:1em;
				float:left;
				@include text-shadow(none);
				&.fill{
					&:before{
						color:#fff;
						content: '?';
						font-size:12px;
						@include box-sizing('border-box');
						padding-left:3px;
						padding-right:3px;
						display:block;
						float:left;
						@include text-shadow(none);
						@include border-radius(50px);
						background-color:lighten($color-text, 45%);
						width:15px;
						height:15px;
						margin-right:5px;
						margin-bottom:5px;
					}
				}
			}
		}

		.middleColumn {
			margin: 0;
		}

		input.text,
		select,
		textarea {
			padding: 5px;
			font-size: 11px;
		}

		&.checkbox {
			padding: 0 8px 0;

			input {
				margin: 2px 0;
			}
		}
	}

	.fieldgroup {
		.fieldgroup-field {
			padding: 0;

			.field {
				margin: 0;
				padding: 0;
			}
		}
	}

	/* Restyle for smaller area*/
	.cms-content-fields{
		overflow:visible;
	}
	.chzn-container-single{
		width:100% !important;
		.chzn-single{
			padding: 0 0 0 5px;
			float:none;
		}
	}
	.cms-content-actions, .cms-preview-controls{
		padding:0;
		height:auto;
		border:none;
		@include box-shadow(none);
	}
	.cms-edit-form{
		width:100%;
	}
	.CompositeField{
		margin:0;
		padding:0;
		float:none;
	}
	.parent-mode{
		padding-top:0;
	}
	.treedropdown, .SelectionGroup li.selected div.field{
		margin:10px 0 0 0;
		//@include box-shadow(inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0,0.1));
		.treedropdownfield-title{
			position:absolute;
			z-index:2;
			padding:5px;
		}
		.treedropdownfield-panel{
			margin-top:11px;
		}
		.treedropdownfield-toggle-panel-link{
			background:none;
			border-left:none;
			padding:5px 3px;
			.ui-icon{
				float:right;
				opacity:0.7;
			}
		}
	}
	.cms-add-form ul.SelectionGroup{
		padding-left:0;
		padding-right:0;
		overflow:visible;
		border-bottom:none;
	}
}