tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 12:05:37 +00:00
Code Issues Projects Releases Wiki Activity

Adding a transparent background to upload preview

Browse Source 
Adding a background to upload preview

I could not see a preview of a white image with background transparency in the preview area. Adding a backgorund to this area helps make it more visible.

Applying background image to img

Applying background image to img to avoid layout change

Applying background image to img

Applying background image to img to avoid layout change
This commit is contained in:
Nick Spiel 2015-11-20 14:16:52 +11:00 committed by Nick Spiel
parent 624e3fde6a
commit 7a7f592d0f
2 changed files with 4 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
css/UploadField.css
View File

@ -16,6 +16,7 @@ Used in side panels and action tabs
.ss-uploadfield .ss-uploadfield-item { margin: 0; padding: 15px; overflow: auto; }
.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-preview { height: 60px; line-height: 60px; width: 80px; text-align: center; font-weight: bold; float: left; overflow: hidden; }
.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-preview.ss-uploadfield-dropzone { -moz-box-shadow: #808080 0 0 4px 0 inset; -webkit-box-shadow: #808080 0 0 4px 0 inset; box-shadow: #808080 0 0 4px 0 inset; border: 2px dashed #808080; background: #d0d3d5; display: none; margin-right: 15px; }
.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-preview img { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2O8dOnSfwYkoKenx4jMZ6SDAmT7QGx0K1EcRBsFAJfOHd3Le79RAAAAAElFTkSuQmCC') repeat; }
.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info { margin-left: 95px; }
.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name { display: block; line-height: 13px; height: 26px; margin: 0; text-align: left; }
.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-info .ss-uploadfield-item-name .name { max-width: 240px; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; display: inline; float: left; }

3
scss/UploadField.scss
View File

@ -48,6 +48,9 @@
display: none;
margin-right: 15px;
}
img {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2O8dOnSfwYkoKenx4jMZ6SDAmT7QGx0K1EcRBsFAJfOHd3Le79RAAAAAElFTkSuQmCC) repeat;
}
}
.ss-uploadfield-item-info {
margin-left: 95px;