silverstripe-framework/scss/AssetUploadField.scss

403 lines
8.6 KiB
SCSS
Raw Normal View History

@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 {
margin-top: -42px;
max-width: 400px;
width: 30%;
background: $tab-panel-texture-color;
display: block;
float: right;
position: relative;
.toggle {
font-style: normal;
font-size: 16px;
float: right;
color: lighten($color-text, 20%);
position: absolute;
top: 4px;
right: 0;
width: 16px;
height: 16px;
overflow: hidden;
&:hover,
&:active,
&:focus {
text-decoration: none;
color: $color-text;
}
}
h4 {
margin: 0 0 6px;
padding-right: 20px;
}
}
.backlink {
padding-left: 12px;
}
body.cms.ss-uploadfield-edit-iframe {
overflow: auto;
background: #E2E2E2;
2012-05-13 21:05:30 +02:00
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);
margin: 0;
position: relative;
padding: 0;
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;
}
2012-02-21 21:16:52 +01:00
.field {
border-bottom: 0;
box-shadow:none;
2012-02-21 21:16:52 +01:00
}
.fileOverview{
clear:both;
margin-top:10px;
position:relative;
2012-05-13 21:05:30 +02:00
.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);
2012-04-30 02:25:35 +02:00
@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;
.no-preview{
display:block;
height:100%;
width:100%;
background:url('../images/icons/document.png') 2px 0px no-repeat;
}
}
.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%));
2012-05-13 21:05:30 +02:00
.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);
2012-05-13 21:05:30 +02:00
.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;
2012-05-13 21:05:30 +02:00
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);
2012-05-13 21:05:30 +02:00
&.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;
}
}
2012-05-13 21:05:30 +02:00
}
.ss-uploadfield-item-actions {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 0;
2012-05-13 21:05:30 +02:00
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 {
margin: 0 0 16px;
padding: 0;
.ss-uploadfield-item-info {
text-align: center;
width: 50%;
margin: -$grid-y*1.5 auto 0;
.ss-insert-media & {
margin: 0 auto;
> span {
margin-top: 0;
}
}
> span {
display: block;
padding: 0;
line-height: 1;
color: lighten($color-text, 20%);
margin-top: -12px;
}
.upload-url {
display: inline;
color: $color-text-blue-link;
cursor: pointer;
}
}
.ss-uploadfield-fromcomputer {
font-size: 14px;
padding: $grid-y*.5 $grid-x*1;
display: inline-block;
float: none;
overflow: hidden;
margin: -$grid-y*5 0 $grid-y*.75;
font-weight: normal;
.ss-insert-media & {
margin: 8px 0 4px;
}
&::before {
font-size: 20px;
margin-right: 6px;
}
}
}
}
.ss-uploadfield-dropzone {
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(236, 239, 241, .9) url('../admin/images/drag_drop_opt.svg') center center no-repeat;
background-size: 312px 325px;
z-index: 100;
}
&.active.hover {
&::after {
content: '';
}
}
}
/** ----------------------------------------------------
* "@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;
}
}
}
}
}