silverstripe-framework/scss/AssetUploadField.scss

@import "compass/css3";


// TODO we need a seperated file for styles that are used in both cms and front end (such as buttons)
@import "../admin/scss/themes/default.scss";
@import "../admin/scss/_mixins";
@import "_elementMixins";

// Temporary. To be hidden and replaced with javascript tooltip
.ss-uploadfield-view-allowed-extensions{
	padding-top:20px;
	clear:both;
	max-width:750px;
	display:block;
}

#AssetUploadField {
	border-bottom: 0;
	@include box-shadow(none);
}

body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fieldset {
	padding: $grid-x*2;
	overflow: auto;
	background: #E2E2E2;
	
	span.readonly {
		font-style:italic;
		color:lighten($color-text, 20%);
		text-shadow: 0px 1px 0px #fff;
	}
	.fieldholder-small{
		
		label{
			margin-left:0;
		}
	}
}

.ss-assetuploadfield {
	h3 {
		border-bottom: 1px solid $color-shadow-light;
		@include box-shadow(0 1px 0 lighten($color-shadow-light, 95%));
		margin: 0 0 8px;
		padding: 0 0 7px;
		clear: both;
		position:relative;	
	}
	.field {
		border-bottom: 0;
		box-shadow:none;
	}
	.fileOverview{
		clear:both;
		margin-top:10px;
		position:relative;
		
		.uploadStatus{
			@include clearfix;
			.state{
				float:left;
				font-size: 16px;
				font-weight:bold;
				line-height:1.1em;
			}
			.details{
				opacity:0.9;
				float:right;		
			}
		}		
	}
	.ss-uploadfield-item-actions.edit-all{
		clear:both;
		position:relative;	
		z-index:9;
		.ss-uploadfield-item-edit-all {
			z-index:8;
			position:absolute;
			top:-33px;
			padding:0;
			background: none;
			border: 0;
			right:0;
			@include box-shadow(none);
			color: $color-text;		
			&:hover{
				color: #1e7cba;	
			}
		}
	}

	
	.ss-uploadfield-files {
		margin: 0;
		padding: 0;
		clear:both;
		
		.ss-uploadfield-item {
			border: 1px solid lighten($color-medium-separator, 20%);
			@include border-radius(5px);
			@include background-clip(padding-box);			
			margin: 0 0 5px;
			padding: 0;
			overflow: hidden;
			position: relative;
			.info {
				position: relative; 
				padding: 7px; 
				overflow: hidden; 
				background-color: #FFBE66; 
				border: 1px solid #FF9300;
			}
		}
		.ss-uploadfield-item-preview {
			position: absolute;
			height: 30px;
			width: 40px;
			overflow: hidden;
			z-index: 1;
			.no-preview{		
				display:block;
				height:100%;
				width:100%;
				background:url('../images/icons/document.png') 2px 0px no-repeat;
			}
		}
		.ss-uploadfield-item-info {
			position: relative;
			height: 30px;
			overflow: hidden;
			background-color: #5db4df;
			@include background-image(linear-gradient(top,  #5db4df 0%,#5db1dd 8%,#439bcb 50%,#3f99cd 54%,#207db6 96%,#1e7cba 100%));
		}
		.ui-state-error .ss-uploadfield-item-info {
			background-color: #c11f1d;
			padding-right:130px;
			@include background-image(linear-gradient(top,  #c11f1d 0%,#bf1d1b 4%,#b71b1c 8%,#b61e1d 15%,#b11d1d 27%,#ab1d1c 31%,#a51b1b 42%,#9f1b19 46%,#9f1b19 50%,#991c1a 54%,#971a18 58%,#911b1b 62%,#911b1b 65%,#7e1816 88%,#771919 92%,#731817 100%));
			
			.ss-uploadfield-item-name {
				width:100%;				
				cursor:default;
				background: darken($color-button-disabled,20%); //for browsers that don't support rgba
				background: rgba(darken($color-button-disabled, 15%),0.9);
				
				.name { 
					text-shadow: 0px 1px 0px rgba(#fff, 0.7);
				}
			}
		}
		.ui-state-warning .ss-uploadfield-item-info {
			background-color: $color-warning;
			@include background-image(
				linear-gradient(
					top,  
					desaturate(lighten($color-warning, 10%), 20%)  0%,
					desaturate(lighten($color-warning, 5%), 20%)  8%,
					desaturate($color-warning, 20%)  50%,
					desaturate(darken(mix($color-warning, $color-button-destructive, 99%),0%), 20%)  54%,
					desaturate(darken(mix($color-warning, $color-button-destructive, 80%),1%), 20%)  96%,
					desaturate(darken(mix($color-warning, $color-button-destructive, 70%),2%), 20%) 100%)
			);
		}

		.ss-uploadfield-item-name {
			position: relative;
			z-index: 1;
			margin: 3px 0 3px 50px;
			width: 50%;
			color:lighten($color-text, 10%);
			background:$color-button-disabled; //for browsers that don't support rgba
			background: rgba(#fff, 0.8);
			@include border-radius(3px);
			line-height: 24px;
			height: 22px;
			padding: 0 5px;
			text-align: left;
			cursor:pointer;	
			//display:table, and table-layout:fixed allows us to use percentages with text-overflow
			display:table;
			table-layout:fixed;
			
			.name { 
				text-shadow: 0px 1px 0px rgba(#fff, 0.5);
				display:inline;
				float:left;
				max-width:50%;
				font-weight: normal; 
				padding: 0 5px 0 0;
				@include hide-text-overflow;
			}
			.ss-uploadfield-item-status {
				position:relative;
				float: right;
				padding: 0 0 0 5px;
				max-width:30%;
				@include hide-text-overflow;
				text-shadow: 0px 1px 0px rgba(#fff, 0.5);
				
				&.ui-state-error-text {
					max-width:70%;
					position:absolute;
					right:5px;
					text-shadow: 0px 1px 0px rgba(#fff, 0.6);
					color: darken($color-button-destructive, 10%);
				}
				&.ui-state-warning-text {
					color: darken($color-warning, 10%);
				}
				&.ui-state-success-text {
					color: $color-button-constructive;
				}
			}
		}
		.ss-uploadfield-item-actions {
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			z-index: 0;
			color: #f00;
			@include ss-uploadfield-action-buttons;			
		}
		
		.ss-uploadfield-item-progress {
			width: 100%;
			
			div {
				@include border-radius(5px);
				height: 30px;
				padding: 0;
				margin: 0;
				overflow: hidden;
				width: 100%;
			}
			.ss-uploadfield-item-progressbar {
				background-color: #92a6b3;
				@include background-image(linear-gradient(top, #92a6b3 0%,#90aab8 11%,#96b1bf 22%,#9eb4c1 33%,#a7bac7 44%,#c1d5dc 100%));
			}
			.ss-uploadfield-item-progressbarvalue {
				width: 0;
				background: #60b3dd url(../images/progressbar_blue.gif) repeat left center;
			}
		}
				
		.ss-uploadfield-item-editform {
			/* don't use display none, for it will break jQuery('iframe').contents().height() */
			height: 0;
			overflow: hidden;
			clear: both;

			iframe {
				width: 100%;
			}
		}
	}

	.ss-uploadfield-addfile {
	
		.ss-uploadfield-item-info {
			float: left;
			margin: 34px 0 0;	
			.ss-insert-media &{
				margin: 15px 0px 0 20px;
			}
			label{
				min-width:250px;
				height:30px;
				font-size:14px;
				&.ui-state-focus{
					@include single-box-shadow(none);
				}	
			}
		}
		.ss-uploadfield-fromcomputer {
			position: relative;
			overflow: hidden;
			display: block;
			margin: 0 10px 0 0;
		}
		.ss-uploadfield-item-uploador {
			float: left;
			font-weight: bold;
			font-size: 22px;
			padding: 0 20px;
			line-height: 70px;
			margin-top:16px;
			display: none;
			.ss-insert-media &{
				font-size: 18px;	
				margin-top: 0;
			}
		}
		.ss-uploadfield-dropzone { 
			margin-top:9px;
			@include border-radius(13px);
			@include box-shadow(rgba($color-medium-separator, 0.3) 0 0 3px 2px inset);
			border: 2px dashed $color-medium-separator;
			background: lighten($color-base,12%);
			display: none;
			height: 82px;
			width: 408px;
			float: left;

			&.active{
				&.hover{
					@include box-shadow(rgba(#fff,0.6) 0 0 3px 2px inset);
				}
			}
			div {
				color:lighten($color-text, 10%);
				text-shadow: 0px 1px 0px #fff;
				background: url('../images/upload.png') 0 25px no-repeat;
				width:230px;
				z-index:1;
				padding: 20px 0 0;
				line-height: 25px;
				font-size: 25px;
				font-weight: bold;
				text-align: center;
				display:block;
				margin:0 auto;
				span {
					display: block;
					font-size: 14px;
					z-index:-1;
				}
			}
			.ss-insert-media &{
				margin-top:3px;
				height: 56px; //Design has these smaller than main upload area
				width: 277px;
				overflow:hidden;

				div{		
					background-position:0 15px;					
					span{
						height:30px;
						font-size:18px;
						line-height: 18px;
					}
				}
			}
		}		
	}
}