mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
d642eee28e
1. Add arrows to edit dropdowns 2. Adjust lightened fields so they don't look like input boxes, and fix rgba colours 3. Add ability to click file names to edit 4. Add feedback when edit button is hovered 5. Add feedback if a file has been opened for editing and shut again (saved changes, unsaved changes, unchanged) 6. Add ability to open and close all files to edit them all at once 7. Add overall feedback for file uploads, and fix NaN error 8. Fix up area to match design 9. Fix error messages so they fit in the provided space 10. Fix case where a single uploaded file errors
313 lines
7.0 KiB
SCSS
313 lines
7.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";
|
|
|
|
|
|
#AssetUploadField {
|
|
border-bottom: 0;
|
|
@include box-shadow(none);
|
|
}
|
|
|
|
body.cms.ss-uploadfield-edit-iframe {
|
|
padding: $grid-x*2;
|
|
overflow: auto;
|
|
span.readonly{
|
|
font-style:italic;
|
|
color:lighten($color-text, 20%);
|
|
text-shadow: 0px 1px 0px #fff;
|
|
}
|
|
}
|
|
|
|
.ss-uploadfield-edit-iframe {
|
|
background: #E2E2E2;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.field {
|
|
border-bottom: 0;
|
|
box-shadow:none;
|
|
}
|
|
.fileOverview{
|
|
clear:both;
|
|
margin-top:10px;
|
|
margin-bottom:5px;
|
|
padding-bottom:5px;
|
|
height:50px;
|
|
position:relative;
|
|
.ss-ui-button {
|
|
position:absolute;
|
|
bottom:0;
|
|
background: none;
|
|
border: 0;
|
|
right:0;
|
|
@include box-shadow(none);
|
|
color: $color-text;
|
|
@include ss-uploadfield-editButton;
|
|
&.ss-uploadfield-item-edit-all {
|
|
@extend .ss-uploadfield-item-edit;
|
|
height:auto;
|
|
}
|
|
}
|
|
|
|
.state{
|
|
font-size: 16px;
|
|
font-weight:bold;
|
|
line-height:20px;
|
|
margin-bottom:5px;
|
|
}
|
|
.details{
|
|
color:lighten($color-text, 15%);
|
|
}
|
|
}
|
|
|
|
|
|
.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);
|
|
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{
|
|
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: 40%;
|
|
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);
|
|
display: block;
|
|
line-height: 24px;
|
|
height: 22px;
|
|
padding: 0 5px;
|
|
text-align: left;
|
|
cursor:pointer;
|
|
.name {
|
|
text-shadow: 0px 1px 0px rgba(#fff, 0.5);
|
|
display:inline;
|
|
float:left;
|
|
max-width:40%;
|
|
font-weight: normal;
|
|
padding: 0 5px 0 0;
|
|
}
|
|
.ss-uploadfield-item-status {
|
|
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;
|
|
|
|
|
|
}
|
|
.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;
|
|
}
|
|
@include ss-uploadfield-editButton;
|
|
}
|
|
.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);
|
|
}
|
|
}
|
|
|
|
.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;
|
|
label{
|
|
width:300px;
|
|
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-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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|