mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-07-02 17:39:30 +02:00
ee10dbb680
We've removed the ability to directly reference JS and CSS files for form fields and other SilverStripe features in favour of a common bundle built by Webpack. The logical next step is to make the framework module free of frontend dependencies, which should simplify its operation, and avoid another time intensive "npm install" on a module.
348 lines
7.3 KiB
SCSS
348 lines
7.3 KiB
SCSS
// TODO we need a seperated file for styles that are used in both cms and front end (such as buttons)
|
|
@import "themes/default.scss";
|
|
@import "_mixins.scss";
|
|
|
|
.ss-uploadfield,
|
|
.ss-insert-media {
|
|
&.form-group::after {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
.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%);
|
|
border-radius: 4px;
|
|
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;
|
|
background: #f0f2f4;
|
|
span {
|
|
height: 60px;
|
|
width: 80px;
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
&.ss-uploadfield-dropzone {
|
|
box-shadow: 0 0 4px 0 $color-medium-separator inset;
|
|
border: 2px dashed $color-medium-separator;
|
|
background: $color-light-separator;
|
|
margin-right: 15px;
|
|
position: relative;
|
|
|
|
&::after {
|
|
background: none;
|
|
}
|
|
}
|
|
img {
|
|
display: block;
|
|
margin: 0 auto;
|
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2O8dOnSfwYkoKenx4jMZ6SDAmT7QGx0K1EcRBsFAJfOHd3Le79RAAAAAElFTkSuQmCC) repeat;
|
|
// No checker background for icons
|
|
&[src$="_32.png"] {
|
|
background: transparent;
|
|
}
|
|
}
|
|
}
|
|
.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-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 {
|
|
border-radius: 25px;
|
|
height: 13px;
|
|
padding: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
.ss-uploadfield-item-progressbar {
|
|
border: 1px solid $color-medium-separator;
|
|
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 {
|
|
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;
|
|
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(../../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;
|
|
margin: 0;
|
|
filter: alpha(opacity = 0);
|
|
transform: translate(-200%, 0);
|
|
direction: ltr;
|
|
cursor: pointer;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.loader {
|
|
height: 94px; // Approxmiately matches the height of the field once a file is attached, avoids a 'jump' in size
|
|
background: transparent url(../../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("../../images/spinner@2x.gif");
|
|
background-size: 43px 43px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ss-upload {
|
|
.loader {
|
|
background-image: url("../../images/spinner@2x.gif");
|
|
background-size: 43px 43px;
|
|
}
|
|
}
|
|
|
|
}
|