GridFieldBulkEditingTools/bulkUpload/css/GridFieldBulkUpload.scss

308 lines
4.9 KiB
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