mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
3ee8f505b7
The main benefit of this is so that authors who make use of
.editorconfig don't end up with whitespace changes in their PRs.
Spaces vs. tabs has been left alone, although that could do with a
tidy-up in SS4 after the switch to PSR-1/2.
The command used was this:
for match in '*.ss' '*.css' '*.scss' '*.html' '*.yml' '*.php' '*.js' '*.csv' '*.inc' '*.php5'; do
find . -path ./thirdparty -not -prune -o -path ./admin/thirdparty -not -prune -o -type f -name "$match" -exec sed -E -i '' 's/[[:space:]]+$//' {} \+
find . -path ./thirdparty -not -prune -o -path ./admin/thirdparty -not -prune -o -type f -name "$match" | xargs perl -pi -e 's/ +$//'
done
335 lines
7.2 KiB
SCSS
335 lines
7.2 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";
|
|
|
|
.ss-uploadfield {
|
|
|
|
.clear {
|
|
clear: both;
|
|
}
|
|
|
|
.description {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.middleColumn {
|
|
// TODO .middleColumn styling should probably be theme specific (eg cms ui will look different than blackcandy)
|
|
// so we should move this style into the cms and black candy files
|
|
min-width: 510px;
|
|
max-width: $grid-x * 87; // Capped width to line up with text fields
|
|
width:100%;
|
|
margin-left:0;
|
|
clear:both;
|
|
padding: 0;
|
|
background: #fff;
|
|
border: 1px solid lighten($color-medium-separator, 20%);
|
|
@include border-radius(4px);
|
|
@include background-image(linear-gradient(#efefef, #fff 10%, #fff 90%, #efefef));
|
|
}
|
|
.ss-uploadfield-item {
|
|
margin: 0;
|
|
padding: 15px;
|
|
overflow: auto;
|
|
|
|
.ss-uploadfield-item-preview {
|
|
height: 60px;
|
|
line-height: 60px;
|
|
width: 80px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
float: left;
|
|
overflow: hidden;
|
|
&.ss-uploadfield-dropzone {
|
|
@include box-shadow($color-medium-separator 0 0 4px 0 inset);
|
|
border: 2px dashed $color-medium-separator;
|
|
background: $color-light-separator;
|
|
display: none;
|
|
margin-right: 15px;
|
|
}
|
|
img {
|
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2O8dOnSfwYkoKenx4jMZ6SDAmT7QGx0K1EcRBsFAJfOHd3Le79RAAAAAElFTkSuQmCC) repeat;
|
|
}
|
|
}
|
|
.ss-uploadfield-item-info {
|
|
margin-left: 95px;
|
|
|
|
.ss-uploadfield-item-name {
|
|
display: block;
|
|
line-height: 13px;
|
|
height: 26px;
|
|
margin: 0;
|
|
text-align: left;
|
|
.name {
|
|
max-width: 240px;
|
|
font-weight: bold;
|
|
@include hide-text-overflow;
|
|
display:inline;
|
|
float:left;
|
|
}
|
|
.size {
|
|
color: lighten($color-text, 25%);
|
|
padding: 0 0 0 5px;
|
|
display:inline;
|
|
float:left;
|
|
}
|
|
.ss-uploadfield-item-status {
|
|
float: right;
|
|
padding: 0 0 0 5px;
|
|
text-align:right;
|
|
max-width: 75%;
|
|
|
|
&.ui-state-error-text {
|
|
color: $color-button-destructive;
|
|
font-weight: bold;
|
|
width:150px; //Allocates the status message enough room to be useful. Will wrap if it is longer
|
|
}
|
|
|
|
&.ui-state-warning-text {
|
|
color: darken($color-warning, 10%);
|
|
}
|
|
|
|
&.ui-state-success-text {
|
|
color: $color-button-constructive;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//Upload/Validation error
|
|
&.ui-state-error
|
|
{
|
|
.ss-uploadfield-item-preview {
|
|
width: auto;
|
|
height: auto;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.ss-uploadfield-item-info {
|
|
margin-left: 0;
|
|
|
|
.ss-uploadfield-item-name {
|
|
float: left;
|
|
width: 70%;
|
|
height: auto;
|
|
|
|
.name
|
|
{
|
|
float: left;
|
|
width: 100%;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.ss-uploadfield-item-status {
|
|
float: left;
|
|
width: 100%;
|
|
padding: 0;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
.ss-uploadfield-item-actions {
|
|
float: right;
|
|
width: 5%;
|
|
min-height: 0;
|
|
margin: 0;
|
|
|
|
.ss-uploadfield-item-cancel {
|
|
position: relative;
|
|
top: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.ss-ui-button {
|
|
display: block;
|
|
float: left;
|
|
margin: 0 10px 6px 0;
|
|
|
|
&.ss-uploadfield-fromcomputer {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
.ss-uploadfield-files {
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: auto;
|
|
position: relative;
|
|
|
|
.ss-uploadfield-item,
|
|
.ss-uploadfield-item.ui-state-error {
|
|
border: 0;
|
|
border-bottom: 1px solid lighten($color-medium-separator, 20%);
|
|
background: none;
|
|
color: $color-text;
|
|
|
|
&:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
.ss-uploadfield-item-actions {
|
|
min-height: 28px;
|
|
overflow: hidden;
|
|
margin: 6px 0 -6px 0;
|
|
position: relative;
|
|
}
|
|
.ss-uploadfield-item-progress {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 42px;
|
|
width: auto;
|
|
margin: 11px 0 0;
|
|
height: 15px;
|
|
|
|
div {
|
|
@include border-radius(25px);
|
|
height: 13px;
|
|
padding: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
.ss-uploadfield-item-progressbar {
|
|
border: 1px solid $color-medium-separator;
|
|
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 {
|
|
border: 0;
|
|
width: 0%;
|
|
background: #60b3dd url(../images/progressbar_blue.gif) repeat-x left center;
|
|
}
|
|
.ss-uploadfield-item-cancel,
|
|
.ss-uploadfield-item-start {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 0;
|
|
|
|
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);
|
|
position: relative;
|
|
// background: sprite($sprites16, cross-circle) no-repeat;
|
|
|
|
span {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
margin: 0;
|
|
|
|
&.ui-button-text {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.ss-uploadfield-item-start {
|
|
right: 20px;
|
|
button {
|
|
// background: sprite($sprites16, navigation) no-repeat;
|
|
}
|
|
}
|
|
.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;
|
|
margin: 15px 0 0;
|
|
background: url(../admin/images/spinner.gif) no-repeat 50% 0;
|
|
|
|
iframe {
|
|
/* Old IE needs this or it'll give the iframe a white background, covering the spinner */
|
|
padding-top: 0; margin-top: 22px;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
iframe {
|
|
margin-top: $grid-y;
|
|
padding-top: $grid-y;
|
|
border-top: 1px solid $color-light-separator;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
.ss-uploadfield-addfile {
|
|
&.borderTop {
|
|
border-top: 1px solid lighten($color-medium-separator, 20%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.ss-upload {
|
|
.clear {
|
|
clear: both;
|
|
}
|
|
.ss-uploadfield-fromcomputer {
|
|
input {
|
|
/* since we can't really style the file input, we use this hack to make it as big as the button and hide it */
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
margin: 0;
|
|
opacity: 0;
|
|
filter: alpha(opacity=0);
|
|
transform: translate(-300px, 0) scale(4);
|
|
font-size: 23px;
|
|
direction: ltr;
|
|
cursor: pointer;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
}
|
|
}
|
|
.loader {
|
|
height: 94px; // Approxmiately matches the height of the field once a file is attached, avoids a 'jump' in size
|
|
background: transparent url(../admin/images/spinner.gif) no-repeat 50% 50%;
|
|
}
|
|
}
|
|
|
|
/** ----------------------------------------------------
|
|
* "@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) {
|
|
|
|
.ss-uploadfield {
|
|
.ss-uploadfield-files {
|
|
.ss-uploadfield-item-editform {
|
|
&.loading {
|
|
background-image: url(../admin/images/spinner@2x.gif);
|
|
background-size: 43px 43px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ss-upload {
|
|
.loader {
|
|
background-image: url(../admin/images/spinner@2x.gif);
|
|
background-size: 43px 43px;
|
|
}
|
|
}
|
|
|
|
}
|