GridFieldBulkEditingTools/bulkUpload/css/GridFieldBulkUpload.scss

@import 'bourbon/bourbon';

.bulkUpload
{
	padding: 0 !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);

	&:hover
	{
		background-color: #444546;
	}

	.component
	{
		padding: 0 !important;

		color: #fff;
		background: #98aab6;

		border-top: 1px solid #a4b4bf;
		border-left: 1px solid #a4b4bf;		
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);

		div.ss-uploadfield
		{
			position: relative;

			float: left;
			clear: both;
			width: 100%;

			// uploading file progress
			.ss-uploadfield-files
			{
				float: left;
				clear: both;
				width: 100%;

				$itemHeight: 30px;

				// each individual upload
				.ss-uploadfield-item
				{
					position: relative;
					float: left;
					clear: both;
					overflow: hidden;

					width: 98%;
					padding: 5px 1% 5px 1%;
					
					border: none;
					border-top: 1px solid rgba(0, 0, 0, 0.1);

					background-color: #eceff1;

					&:nth-child(2n-1)
					{
						background-color: #e6eaed;
					}

					.ss-uploadfield-item-preview
					{
						width: $itemHeight;
						height: $itemHeight;
						line-height: 38px;
					}

					.ss-uploadfield-item-info
					{
						height: $itemHeight;
						margin-left: 40px;
						line-height: $itemHeight;

						.ss-uploadfield-item-name
						{
							position: absolute;
							top: 0;
							left: 50px;

							width: 100%;
							height: 100%;
							line-height: 40px;

							.name
							{
								color: #343434;
							}

							.size {
								font-weight: normal;
							}

							.ss-uploadfield-item-status
							{
								float: left;
								width: auto;
								padding: 0 0 0 5px;
								text-align: left;
								max-width: none;

								&.ui-state-warning-text
								{
									color: #f29500;
								}
								&.ui-state-success-text
								{
									color: #298530;
								}
							}// .ss-uploadfield-item-status
						}// .ss-uploadfield-item-name
						
						.ss-uploadfield-item-actions
						{
							position: absolute;
							top: 0;
							left: 0;

							width: 100%;
							height: $itemHeight;

							margin: 0;
							padding: 5px 0 5px 0;

							.ss-uploadfield-item-progress
							{
								left: 50px;
								right: 35px;
								margin-top: 8px;
							}

							button
							{
								margin: 0 10px 0 0;

								.ui-button-text
								{
									padding-top: 4px;
									padding-bottom: 3px;
								}
							}

							.ss-uploadfield-item-cancel
							{
								position: relative;
								top: 7px;
								right: auto;
								float: right;

								button
								{
									background: none;
								}
							}

							.ss-uploadfield-item-overwrite
							{
								position: relative;
								float: right;
								margin-top: 2px;
							}
						}// .ss-uploadfield-item-actions
					}// .ss-uploadfield-item-info

					.ss-uploadfield-item-editform
					{

					}
				}			
			}// .ss-uploadfield-files

			// upload tools
			.ss-uploadfield-addfile
			{
				float: left;
				clear: both;

				width: 98%;

				padding: 1%;

				&.borderTop 
				{
					border: none;
				}

				.ss-uploadfield-item-preview.ss-uploadfield-dropzone
				{
					float: right;
					width: 35%;
					height: 43px;
					margin: 0;

					line-height: 43px;

					color: #eee;
					background-color: #8898a3;
					border: 2px dashed #73818a;
					box-shadow: #73818a 0 0 10px 0 inset;

					&.hover
					{
						color: #444546;
						background-color: #eee;
					}
				}

				.ss-uploadfield-item-info
				{
					float: left;
					width: 60%;
					margin: 0;

					.ss-uploadfield-item-name
					{
						height: auto;
						margin-bottom: 5px !important;
						small {
							font-weight: normal !important;
						}
					}

					.ss-ui-button
					{
						.ui-button-text
						{
							.ui-button-text
							{
								padding: 0px;
							}
						}						
					}

					.ss-uploadfield-fromcomputer
					{
						margin-bottom: 0;
					}

					.ss-uploadfield-fromfiles
					{
						margin-bottom: 0;
						padding: .5px;
					}
				}
			}// .ss-uploadfield-addfile

			.colymba-bulkupload-buttons
			{
				display: none;
				float: left;
				width: 98%;
				padding: 6px 1% 6px 1%;

				// border-top: 1px solid rgba(0, 0, 0, 0.1);

				background-color: #8898a3;

				button
				{
					float: left;
					margin: 0 6px 0 0;

					.ui-button-text
					{
						.ui-button-text
						{
							padding: 0;
						}
					}

					&.bulkUploadEditButton,
					&.bulkUploadClearErrorButton
					{
						float: right;
						margin: 0 0 0 6px;
					}
				}// button

				.colymba-bulkupload-info
				{
					float: left;
					margin: 0 6px 0 6px;
					line-height: 28px;					
					height: 28px;
					color: #ffffff;

					background-image: url(../../images/spinner.gif);
					background-position: 0 -50px;
					background-repeat: no-repeat;

					overflow: hidden; 
				}

				&.loading
				{
					.colymba-bulkupload-info
					{
						padding-left: 20px;
						background-position: 0 5px;
					}					
				}
			}

		}// .ss-uploadfield

	}// .component

}// .bulkUpload