mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
5a42a4181a
- Managed by npm - Created an `npm run css` task to compile - Updated shrinkwrap - Updated changelog
390 lines
8.4 KiB
SCSS
390 lines
8.4 KiB
SCSS
// 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";
|
|
|
|
.ss-uploadfield-view-allowed-extensions {
|
|
margin-top: -42px;
|
|
float: right;
|
|
|
|
.toggle-content {
|
|
opacity: 0;
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
z-index: 1;
|
|
padding: 2.5*$grid-y 2*$grid-x;
|
|
width: 280px;
|
|
right: -280px;
|
|
top: 0;
|
|
bottom: 0;
|
|
border-left: 1px solid $color-separator;
|
|
box-shadow: 0 0 3px $color-separator;
|
|
background: $tab-panel-texture-color;
|
|
transition: all .3s linear;
|
|
|
|
h4 {
|
|
margin: 0 0 6px;
|
|
padding-right: 20px;
|
|
}
|
|
}
|
|
|
|
&.active .toggle-content {
|
|
right: 0;
|
|
opacity: 1;
|
|
}
|
|
|
|
.toggle {
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
float: right;
|
|
color: $color-text;
|
|
width: 16px;
|
|
height: 16px;
|
|
overflow: hidden;
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
text-decoration: none;
|
|
color: darken($color-text, 10%);;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
box-shadow: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
h3 {
|
|
border-bottom: 1px solid $color-shadow-light;
|
|
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{
|
|
.ss-uploadfield-item-edit-all {
|
|
float: right;
|
|
margin: -8px 0 0;
|
|
padding:0;
|
|
background: none;
|
|
border: 0;
|
|
box-shadow: none;
|
|
color: $color-text;
|
|
|
|
&:hover{
|
|
color: lighten($color-text, 10%);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.ss-uploadfield-files {
|
|
margin: 0;
|
|
padding: 0;
|
|
clear:both;
|
|
|
|
.ss-uploadfield-item {
|
|
border: 1px solid lighten($color-medium-separator, 20%);
|
|
border-radius: 5px;
|
|
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;
|
|
background-image: linear-gradient(to bottom, #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;
|
|
background-image: linear-gradient(to bottom, #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;
|
|
background-image: linear-gradient(
|
|
to bottom,
|
|
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);
|
|
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 {
|
|
border-radius: 5px;
|
|
height: 30px;
|
|
padding: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
}
|
|
.ss-uploadfield-item-progressbar {
|
|
background-color: #92a6b3;
|
|
background-image: linear-gradient(to bottom, #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;
|
|
padding: 0;
|
|
|
|
.ss-uploadfield-item-info {
|
|
margin: 0;
|
|
|
|
> span {
|
|
display: block;
|
|
padding: 0;
|
|
line-height: 1;
|
|
color: lighten($color-text, 20%);
|
|
margin-top: -12px;
|
|
}
|
|
|
|
.upload-url::before {
|
|
font-size: 23px;
|
|
}
|
|
}
|
|
|
|
.ss-uploadfield-fromcomputer {
|
|
margin: 12px 2px;
|
|
overflow: hidden;
|
|
font-weight: normal;
|
|
|
|
.ss-insert-media &{
|
|
margin: 0 12px 0 0;
|
|
}
|
|
|
|
&::before {
|
|
font-size: 23px;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|