tonyair
/
silverstripe-framework
mirror of https://github.com/silverstripe/silverstripe-framework
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

MINOR AssetUploadField styling

This commit is contained in:
Ingo Schommer 2012-02-21 21:16:52 +01:00
parent cbc2891c80
commit 3c29a9268c
8 changed files with 50 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
admin/css/screen.css
View File

@ -31,7 +31,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
/** ---------------------------------------------------- Double tone borders http://daverupert.com/2011/06/two-tone-borders-with-css3/ ----------------------------------------------------- */
/** ----------------------------- Sprite images ----------------------------- */
/** Helper SCSS file for generating sprites for the interface. */
.btn-icon-sprite, .ui-state-default .btn-icon-accept, .ui-state-default .btn-icon-accept_disabled, .ui-state-default .btn-icon-add, .ui-state-default .btn-icon-add_disabled, .ui-state-default .btn-icon-addpage, .ui-state-default .btn-icon-addpage_disabled, .ui-state-default .btn-icon-arrow-circle-135-left, .ui-state-default .btn-icon-cross-circle, .ui-state-default .btn-icon-cross-circle_disabled, .ui-state-default .btn-icon-decline, .ui-state-default .btn-icon-decline_disabled, .ui-state-default .btn-icon-drive-upload, .ui-state-default .btn-icon-drive-upload_disabled, .ui-state-default .btn-icon-magnifier, .ui-state-default .btn-icon-minus-circle, .ui-state-default .btn-icon-minus-circle_disabled, .ui-state-default .btn-icon-navigation, .ui-state-default .btn-icon-navigation_disabled, .ui-state-default .btn-icon-network-cloud, .ui-state-default .btn-icon-network-cloud_disabled, .ui-state-default .btn-icon-pencil, .ui-state-default .btn-icon-pencil_disabled, .ui-state-default .btn-icon-plug-disconnect-prohibition, .ui-state-default .btn-icon-plug-disconnect-prohibition_disabled, .ui-state-default .btn-icon-preview, .ui-state-default .btn-icon-preview_disabled, .ui-state-default .btn-icon-settings, .ui-state-default .btn-icon-settings_disabled, .ui-state-default .btn-icon-unpublish, .ui-state-default .btn-icon-unpublish_disabled { background: url('../images/btn-icon-s1c742dc591.png') no-repeat; }
.btn-icon-sprite, .ui-state-default .btn-icon-accept, .ui-state-default .btn-icon-accept_disabled, .ui-state-default .btn-icon-add, .ui-state-default .btn-icon-add_disabled, .ui-state-default .btn-icon-addpage, .ui-state-default .btn-icon-addpage_disabled, .ui-state-default .btn-icon-arrow-circle-135-left, .ui-state-default .btn-icon-back, .ui-state-default .btn-icon-back_disabled, .ui-state-default .btn-icon-cross-circle, .ui-state-default .btn-icon-cross-circle_disabled, .ui-state-default .btn-icon-decline, .ui-state-default .btn-icon-decline_disabled, .ui-state-default .btn-icon-drive-upload, .ui-state-default .btn-icon-drive-upload_disabled, .ui-state-default .btn-icon-magnifier, .ui-state-default .btn-icon-minus-circle, .ui-state-default .btn-icon-minus-circle_disabled, .ui-state-default .btn-icon-navigation, .ui-state-default .btn-icon-navigation_disabled, .ui-state-default .btn-icon-network-cloud, .ui-state-default .btn-icon-network-cloud_disabled, .ui-state-default .btn-icon-pencil, .ui-state-default .btn-icon-pencil_disabled, .ui-state-default .btn-icon-plug-disconnect-prohibition, .ui-state-default .btn-icon-plug-disconnect-prohibition_disabled, .ui-state-default .btn-icon-preview, .ui-state-default .btn-icon-preview_disabled, .ui-state-default .btn-icon-settings, .ui-state-default .btn-icon-settings_disabled, .ui-state-default .btn-icon-unpublish, .ui-state-default .btn-icon-unpublish_disabled { background: url('../images/btn-icon-s4a0551bc3f.png') no-repeat; }
.ui-state-default .btn-icon-accept { background-position: 0 0; }
.ui-state-default .btn-icon-accept_disabled { background-position: 0 -17px; }
@ -40,29 +40,31 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
.ui-state-default .btn-icon-addpage { background-position: 0 -70px; }
.ui-state-default .btn-icon-addpage_disabled { background-position: 0 -88px; }
.ui-state-default .btn-icon-arrow-circle-135-left { background-position: 0 -104px; }
.ui-state-default .btn-icon-cross-circle { background-position: 0 -120px; }
.ui-state-default .btn-icon-cross-circle_disabled { background-position: 0 -136px; }
.ui-state-default .btn-icon-decline { background-position: 0 -152px; }
.ui-state-default .btn-icon-decline_disabled { background-position: 0 -169px; }
.ui-state-default .btn-icon-drive-upload { background-position: 0 -186px; }
.ui-state-default .btn-icon-drive-upload_disabled { background-position: 0 -202px; }
.ui-state-default .btn-icon-magnifier { background-position: 0 -218px; }
.ui-state-default .btn-icon-minus-circle { background-position: 0 -234px; }
.ui-state-default .btn-icon-minus-circle_disabled { background-position: 0 -250px; }
.ui-state-default .btn-icon-navigation { background-position: 0 -266px; }
.ui-state-default .btn-icon-navigation_disabled { background-position: 0 -282px; }
.ui-state-default .btn-icon-network-cloud { background-position: 0 -298px; }
.ui-state-default .btn-icon-network-cloud_disabled { background-position: 0 -314px; }
.ui-state-default .btn-icon-pencil { background-position: 0 -330px; }
.ui-state-default .btn-icon-pencil_disabled { background-position: 0 -346px; }
.ui-state-default .btn-icon-plug-disconnect-prohibition { background-position: 0 -362px; }
.ui-state-default .btn-icon-plug-disconnect-prohibition_disabled { background-position: 0 -378px; }
.ui-state-default .btn-icon-preview { background-position: 0 -394px; }
.ui-state-default .btn-icon-preview_disabled { background-position: 0 -411px; }
.ui-state-default .btn-icon-settings { background-position: 0 -428px; }
.ui-state-default .btn-icon-settings_disabled { background-position: 0 -444px; }
.ui-state-default .btn-icon-unpublish { background-position: 0 -460px; }
.ui-state-default .btn-icon-unpublish_disabled { background-position: 0 -478px; }
.ui-state-default .btn-icon-back { background-position: 0 -120px; }
.ui-state-default .btn-icon-back_disabled { background-position: 0 -136px; }
.ui-state-default .btn-icon-cross-circle { background-position: 0 -152px; }
.ui-state-default .btn-icon-cross-circle_disabled { background-position: 0 -168px; }
.ui-state-default .btn-icon-decline { background-position: 0 -184px; }
.ui-state-default .btn-icon-decline_disabled { background-position: 0 -201px; }
.ui-state-default .btn-icon-drive-upload { background-position: 0 -218px; }
.ui-state-default .btn-icon-drive-upload_disabled { background-position: 0 -234px; }
.ui-state-default .btn-icon-magnifier { background-position: 0 -250px; }
.ui-state-default .btn-icon-minus-circle { background-position: 0 -266px; }
.ui-state-default .btn-icon-minus-circle_disabled { background-position: 0 -282px; }
.ui-state-default .btn-icon-navigation { background-position: 0 -298px; }
.ui-state-default .btn-icon-navigation_disabled { background-position: 0 -314px; }
.ui-state-default .btn-icon-network-cloud { background-position: 0 -330px; }
.ui-state-default .btn-icon-network-cloud_disabled { background-position: 0 -346px; }
.ui-state-default .btn-icon-pencil { background-position: 0 -362px; }
.ui-state-default .btn-icon-pencil_disabled { background-position: 0 -378px; }
.ui-state-default .btn-icon-plug-disconnect-prohibition { background-position: 0 -394px; }
.ui-state-default .btn-icon-plug-disconnect-prohibition_disabled { background-position: 0 -410px; }
.ui-state-default .btn-icon-preview { background-position: 0 -426px; }
.ui-state-default .btn-icon-preview_disabled { background-position: 0 -443px; }
.ui-state-default .btn-icon-settings { background-position: 0 -460px; }
.ui-state-default .btn-icon-settings_disabled { background-position: 0 -476px; }
.ui-state-default .btn-icon-unpublish { background-position: 0 -492px; }
.ui-state-default .btn-icon-unpublish_disabled { background-position: 0 -510px; }
.icon { text-indent: -9999px; border: none; outline: none; }
.icon.icon-24 { width: 24px; height: 24px; background: url('../images/menu-icons/24x24-s546fcae8fd.png'); }

BIN
admin/images/btn-icon-s1c742dc591.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

BIN
admin/images/btn-icon-s4a0551bc3f.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
admin/images/btn-icon/back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
admin/images/btn-icon/back_disabled.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

2
css/AssetUploadField.css
View File

@ -7,6 +7,7 @@
#AssetUploadField { border-bottom: 0; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
.ss-assetuploadfield h3 { border-bottom: 1px solid rgba(201, 205, 206, 0.8); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -o-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); margin: 0 0 8px; padding: 0 0 7px; clear: both; }
.ss-assetuploadfield .field { border-bottom: 0; }
.ss-assetuploadfield .ss-uploadfield-files { margin: 0; padding: 0; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item { border: 1px solid #b3b3b3; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding; -o-background-clip: padding-box; -ms-background-clip: padding-box; -khtml-background-clip: padding-box; background-clip: padding-box; background: #E2E2E2; margin: 0 0 5px; padding: 0; overflow: hidden; position: relative; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-preview { position: absolute; height: 30px; width: 40px; overflow: hidden; z-index: 1; }
@ -30,7 +31,6 @@
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button { display: block; overflow: hidden; text-indent: -9999px; padding: 0; margin: 0; border: 0; width: 16px; height: 16px; cursor: pointer; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform { /* don't use display none, for it will break jQuery('iframe').contents().height() */ height: 0; overflow: hidden; clear: both; }
.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform iframe { width: 100%; }
.ss-assetuploadfield .ss-uploadfield-addfile { height: 70px; padding: 5px 15px 15px; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info { float: left; margin: 19px 0 0; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer { position: relative; overflow: hidden; display: block; margin: 0 10px 0 0; }
.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-uploador { float: left; font-weight: bold; font-size: 22px; padding: 0 20px; line-height: 70px; display: none; }

6
scss/AssetUploadField.scss
View File

@ -16,6 +16,10 @@
padding: 0 0 7px;
clear: both;
}
.field {
border-bottom: 0;
}
.ss-uploadfield-files {
margin: 0;
@ -162,8 +166,6 @@
}
}
.ss-uploadfield-addfile {
height: 70px;
padding: 5px 15px 15px;
.ss-uploadfield-item-info {
float: left;

22
templates/AssetUploadField.ss
View File

@ -1,4 +1,12 @@
<div class="ss-uploadfield-item ss-uploadfield-addfile">
<div class="ss-uploadfield-item ss-uploadfield-addfile field">
<h3>
<span class="step-label">
<span class="flyout">1</span><span class="arrow"></span>
<span class="title"><% _t('AssetUploadField.ChooseFiles', 'Choose files') %></span>
</span>
</h3>
<div class="ss-uploadfield-item-info">
<label class="ss-uploadfield-fromcomputer ss-ui-button ss-ui-action-constructive" title="<% _t('AssetUploadField.FROMCOMPUTERINFO', 'Upload from your computer') %>" data-icon="drive-upload">
<% _t('AssetUploadField.FROMCOMPUTER', 'Choose files from your computer') %>
@ -18,5 +26,13 @@
</div>
<div class="clear"><!-- --></div>
</div>
<h3 class="ss-uploadfield-editandorganize"><% _t('AssetUploadField.EDITANDORGANIZE', 'Edit & organize') %></h3>
<ul class="ss-uploadfield-files files"></ul>
<div class="ss-uploadfield-editandorganize">
<h3>
<span class="step-label">
<span class="flyout">2</span><span class="arrow"></span>
<span class="title"><% _t('AssetUploadField.EDITANDORGANIZE', 'Edit & organize') %></span>
</span>
</h3>
<ul class="ss-uploadfield-files files"></ul>
</div>