silverstripe-framework/scss/AssetUploadField.scss
Jonathon Menz 2923787352 NEW consistent file icons
File icons have been updated for consistency and a StripThumbnail method added to File for icon display in gridfield instances (such as file selection interface)
2016-03-19 10:36:11 -07:00

401 lines
9.0 KiB
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:5px;
clear:both;
max-width:750px;
display:block;
.toggle {
font-style: normal;
font-size: $font-base-size;
}
}
.backlink {
padding-left: 12px;
}
body.cms.ss-uploadfield-edit-iframe {
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;
}
}
}
.composite.ss-assetuploadfield .details fieldset {
@extend body.cms.ss-uploadfield-edit-iframe;
padding: $grid-x*2;
}
.ss-assetuploadfield {
border-bottom: 0;
@include box-shadow(none);
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;
// Prevent icons touching edge
img[src$="_32.png"] {
width: auto;
height: 26px;
margin: 2px 0 0 2px;
}
}
.ss-uploadfield-item-info {
position: relative;
line-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 {
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;
font-size:14px;
}
.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;
&.loading {
width: 100%;
height: 22px;
padding: 15px 0;
background: url(../admin/images/spinner.gif) no-repeat 50% 50%;
iframe {
/* Old IE needs this or it'll give the iframe a white background, covering the spinner */
padding-top: 0; margin-top: 37px;
border: none;
}
}
iframe {
width: 100%;
padding: $grid-x*2;
background: #E2E2E2;
}
}
}
.ss-uploadfield-addfile {
.ss-uploadfield-item-info {
float: left;
margin: 25px 0 0;
.ss-insert-media &{
margin: 10px 0px 0 20px;
}
label{
font-size: 18px;
line-height: 30px;
padding: 0px 16px;
margin-right:0px;
}
}
.ss-uploadfield-fromcomputer {
/*position: relative; */
overflow: hidden;
display: block;
.btn-icon-drive-upload-large {
background: url(../images/drive-upload-white.png) no-repeat 0px 0px;
width:32px;
height:32px;
margin-top:-12px;
}
}
.ss-uploadfield-item-uploador {
float: left;
font-weight: bold;
font-size: 22px;
padding: 0 20px;
line-height: 70px;
margin-top:10px;
display: none;
.ss-insert-media &{
font-size: 18px;
margin-top: -5px;
}
}
.ss-uploadfield-dropzone {
margin-top:9px;
padding: 8px 0;
@include border-radius(13px);
@include box-shadow(rgba($color-medium-separator, 0.4) 0 0 4px 0 inset, 0 1px 0 #FAFAFA);
border: 2px dashed $color-medium-separator;
background: lighten($color-base,12%);
display: none;
height: 54px;
min-width: 280px;
float: left;
text-align: center;
&.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 10px no-repeat;
z-index:1;
padding: 6px 48px 0;
line-height: 25px;
font-size: 20px;
font-weight: bold;
display: inline-block;
span {
display: block;
font-size: 12px;
z-index:-1;
margin-top:-3px;
}
}
.ss-insert-media &{
height: 54px;
min-width: 250px; //Design has these smaller than main upload area
overflow:hidden;
padding:0;
margin-top:2px;
div{
background-position:0 11px;
padding-top:21px;
margin-left: 33px;
span{
height:38px;
font-size:18px;
line-height: 18px;
}
}
}
}
}
}
/** ----------------------------------------------------
* "@2x" media query
* ---------------------------------------------------- */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
/* Loading spinner */
.ss-assetuploadfield {
.ss-uploadfield-files {
.ss-uploadfield-item-editform {
&.loading {
background-image: url(../admin/images/spinner@2x.gif);
background-size: 43px 43px;
}
}
}
}
}