silverstripe-framework/scss/_elementMixins.scss

//**
// * This file contains mixins relating to specific functionality
// *
// * Mixins should be stored here rather than individual files
// */


//*Mixin generates the generic button styling for the gridfield*/
@mixin gridFieldButtons{
	border:none;			
	display:block;
	text-indent:-9999em;
	width:30px; 
	height:25px; //match the height of the input field
}


// Mixin generates the styling for the actions buttons in file uploads
@mixin ss-uploadfield-action-buttons{
	.ss-ui-button {
		background: none;
		border: 0;
		@include box-shadow(none);
		@include text-shadow(none);
		color: $color-text-light;
		float: right;
		
		&.ss-uploadfield-item-delete {
			// TODO tmp hack until we have permissions and can disable delete
			display: none;
		}
		&.ss-uploadfield-item-cancel{

			@include border-radius(0);
			border-left:1px solid rgba(#fff, 0.2);
			margin-top:3px;			
			cursor: pointer;
			opacity:0.9;
			&:hover{
				opacity:1;
			}
			.ui-icon {
			  display: block;
			  margin: 0;
			  position:realtive;
			  top:4px;
			}
	
		}				
		@include ss-uploadfield-editButton;
	}
}

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