@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 "sprites.scss";

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

.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;
	}
	
	.ss-uploadfield-files {
		margin: 0;
		padding: 0;
		
		.ss-uploadfield-item {
			border: 1px solid lighten($color-medium-separator, 20%);
			@include border-radius(5px);
			@include background-clip(padding-box);
			background: #E2E2E2;
			margin: 0 0 5px;
			padding: 0;
			overflow: hidden;
			position: relative;
		}
			.ss-uploadfield-item-preview {
				position: absolute;
				height: 30px;
				width: 40px;
				overflow: hidden;
				z-index: 1;
			}
			.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;
				@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 {
					position: relative;
					z-index: 1;
					margin: 3px 0 3px 50px;
					width: 40%;
					background: #fff;
					border: 1px solid lighten($color-medium-separator, 20%);
					@include border-radius(5px);
					display: block;
					line-height: 24px;
					height: 22px;
					padding: 0 5px;
					text-align: left;
					
					b { 
						font-weight: bold; 
						padding: 0 5px 0 0;
					}
					span {
						font-size: $font-base-size - 1;
						color: lighten($color-text, 25%);
					}
				}
					.ss-uploadfield-item-status {
						float: right;
						padding: 0 0 0 5px;
						
						&.ui-state-error-text {
							color: $color-button-destructive;
							font-weight: bold;
						}
					}
				.ss-uploadfield-item-actions {
					position: absolute;
					top: 0;
					right: 0;
					left: 0;
					z-index: 0;
				}
					label.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-fromfiles {
							//@include actionButtonSprite('network-cloud');
						}
						&.ss-uploadfield-item-delete {
							//color: $color-button-destructive;
							//@include actionButtonSprite('minus-circle');
						}
						&.ss-uploadfield-item-edit {
							padding-top: 0;
							padding-bottom: 0;
							line-height: 30px;
						}
					}
					.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-cancel {
						position: absolute;
						top: 7px;
						right: 7px;
						
						button {
							display: block;
							overflow: hidden;
							text-indent: -9999px;
							padding: 0;
							margin: 0;
							border: 0;
							width: 16px;
							height: 16px;
							cursor: pointer;
							@include single-box-shadow(none);
							background: sprite($sprites16, cross-circle) no-repeat;
						}
					}
				.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 {
		height: 70px;
		padding: 5px 15px 15px;
	
		.ss-uploadfield-item-info {
			float: left;
			margin: 19px 0 0;		
		}
			.ss-uploadfield-fromcomputer {
				position: relative;
				overflow: hidden;
				display: block;
				margin: 0 10px 0 0;
				@include actionButtonSpriteConstructive('drive-upload');
			}
		.ss-uploadfield-item-uploador {
			float: left;
			font-weight: bold;
			font-size: 22px;
			padding: 0 20px;
			line-height: 70px;
			display: none;
		}
		.ss-uploadfield-dropzone { 
			@include border-radius(10px);
			@include box-shadow(lighten($color-medium-separator, 10%) 0 0 3px 3px inset);
			border: 2px dashed $color-medium-separator;
			background: $color-light-separator;
			display: none;
			height: 66px;
			width: 300px;
			float: left;
			
			div {
				padding: 15px 0 0;
				line-height: 22px;
				font-size: 20px;
				font-weight: bold;
				text-align: center;
				
				span {
					display: block;
					font-size: 12px;
				}
			}
		}
	}
}