From 0fade6c9d397871b38c7af76e9b15f1b211317bf Mon Sep 17 00:00:00 2001 From: Jeremy Bridson Date: Mon, 4 Feb 2013 14:15:27 +1300 Subject: [PATCH 1/2] BUGFIX:fixed styling of asset upload page and dialog in the asset admin and media insert via WYSIWYG editor open/8231. --- css/AssetUploadField.css | 33 +++++++++------- images/drive-upload-large.png | Bin 0 -> 2152 bytes scss/AssetUploadField.scss | 48 +++++++++++++++-------- scss/_elementMixins.scss | 18 ++++----- templates/AssetUploadField.ss | 2 +- templates/HtmlEditorField_UploadField.ss | 2 +- 6 files changed, 60 insertions(+), 43 deletions(-) create mode 100644 images/drive-upload-large.png diff --git a/css/AssetUploadField.css b/css/AssetUploadField.css index 66d6c53c0..01d744ee2 100644 --- a/css/AssetUploadField.css +++ b/css/AssetUploadField.css @@ -17,6 +17,8 @@ Used in side panels and action tabs .backlink { padding-left: 12px; } +#Form_EditorToolbarMediaForm .ui-tabs-panel { padding-left: 0px; } + body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fieldset { padding: 16px; overflow: auto; background: #E2E2E2; } body.cms.ss-uploadfield-edit-iframe span.readonly, .composite.ss-assetuploadfield .details fieldset span.readonly { font-style: italic; color: #777777; text-shadow: 0px 1px 0px #fff; } body.cms.ss-uploadfield-edit-iframe .fieldholder-small label, .composite.ss-assetuploadfield .details fieldset .fieldholder-small label { margin-left: 0; } @@ -36,7 +38,7 @@ body.cms.ss-uploadfield-edit-iframe .fieldholder-small label, .composite.ss-asse .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item .info { position: relative; padding: 7px; overflow: hidden; background-color: #FFBE66; border: 1px solid #FF9300; } .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-preview { position: absolute; height: 30px; width: 40px; overflow: hidden; z-index: 1; } .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-preview .no-preview { display: block; height: 100%; width: 100%; background: url("../images/icons/document.png") 2px 0px no-repeat; } -.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-info { position: relative; line-height: 30px; font-size: 18px; overflow: hidden; background-color: #5db4df; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5db4df), color-stop(8%, #5db1dd), color-stop(50%, #439bcb), color-stop(54%, #3f99cd), color-stop(96%, #207db6), color-stop(100%, #1e7cba)); background-image: -webkit-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: -moz-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: -o-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); } +.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-info { position: relative; line-height: 30px; font-size: 14px; overflow: hidden; background-color: #5db4df; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5db4df), color-stop(8%, #5db1dd), color-stop(50%, #439bcb), color-stop(54%, #3f99cd), color-stop(96%, #207db6), color-stop(100%, #1e7cba)); background-image: -webkit-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: -moz-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: -o-linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); background-image: linear-gradient(top, #5db4df 0%, #5db1dd 8%, #439bcb 50%, #3f99cd 54%, #207db6 96%, #1e7cba 100%); } .ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info { background-color: #c11f1d; padding-right: 130px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c11f1d), color-stop(4%, #bf1d1b), color-stop(8%, #b71b1c), color-stop(15%, #b61e1d), color-stop(27%, #b11d1d), color-stop(31%, #ab1d1c), color-stop(42%, #a51b1b), color-stop(46%, #9f1b19), color-stop(50%, #9f1b19), color-stop(54%, #991c1a), color-stop(58%, #971a18), color-stop(62%, #911b1b), color-stop(65%, #911b1b), color-stop(88%, #7e1816), color-stop(92%, #771919), color-stop(100%, #731817)); background-image: -webkit-linear-gradient(top, #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%); background-image: -moz-linear-gradient(top, #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%); background-image: -o-linear-gradient(top, #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%); background-image: linear-gradient(top, #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-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name { width: 100%; cursor: default; background: #bcb9b9; background: rgba(201, 198, 198, 0.9); } .ss-assetuploadfield .ss-uploadfield-files .ui-state-error .ss-uploadfield-item-info .ss-uploadfield-item-name .name { text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.7); } @@ -47,13 +49,13 @@ body.cms.ss-uploadfield-edit-iframe .fieldholder-small label, .composite.ss-asse .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-error-text { max-width: 70%; position: absolute; right: 5px; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6); color: #cc0000; } .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-warning-text { color: #b7a403; } .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-name .ss-uploadfield-item-status.ui-state-success-text { color: #1f9433; } -.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions { position: absolute; top: 0; right: 0; left: 0; z-index: 0; color: #f00; } +.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions { position: absolute; top: 0; right: 0; left: 0; z-index: 0; color: #f00; font-size: 14px; } .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button { background: none; border: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-shadow: none; color: white; float: right; } .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-delete { display: none; } -.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-cancel { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; border-left: 1px solid rgba(255, 255, 255, 0.2); margin-top: 3px; cursor: pointer; opacity: 0.9; } +.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-cancel { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; border-left: 1px solid rgba(255, 255, 255, 0.2); margin-top: 0px; cursor: pointer; opacity: 0.9; } .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-cancel:hover { opacity: 1; } -.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-cancel .ui-icon { display: block; margin: 0; position: realtive; top: 4px; } -.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-edit { opacity: 0.9; padding-top: 3px; padding-bottom: 0; height: 100%; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; } +.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-cancel .ui-icon { display: block; margin: 0; position: realtive; top: 8px; } +.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-edit { opacity: 0.9; padding-top: 1px; padding-bottom: 0; height: 100%; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; } .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-edit.ui-state-hover { background: none; opacity: 1; } .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-edit.ui-state-hover span.toggle-details { opacity: 1; } .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-actions .ss-ui-button.ss-uploadfield-item-edit span.toggle-details { opacity: 0.9; margin-left: 3px; display: inline-block; width: 5px; height: 100%; cursor: pointer; } @@ -66,16 +68,17 @@ body.cms.ss-uploadfield-edit-iframe .fieldholder-small label, .composite.ss-asse .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-progress .ss-uploadfield-item-progressbarvalue { width: 0; background: #60b3dd url(../images/progressbar_blue.gif) repeat left center; } .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 .ss-uploadfield-item-info { float: left; margin: 34px 0 0; } -.ss-insert-media .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info { margin: 15px 0px 0 20px; } -.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info label { font-size: 16px; line-height: 30px; padding: 5px 16px; } +.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info { float: left; margin: 10px 0 0; } +.ss-insert-media .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info { margin: 10px 0px 0 20px; } +.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info label { font-size: 18px; line-height: 30px; padding: 8px 16px; } .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer { /*position: relative; */ overflow: hidden; display: block; } -.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-uploador { float: left; font-weight: bold; font-size: 22px; padding: 0 20px; line-height: 70px; margin-top: 16px; display: none; } +.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer .btn-icon-drive-upload-large { background: url(../images/drive-upload-large.png) no-repeat 0px -4px; width: 32px; height: 32px; margin-top: -12px; } +.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-uploador { float: left; font-weight: bold; font-size: 22px; padding: 0 20px; line-height: 70px; margin-top: 8px; display: none; } .ss-insert-media .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-uploador { font-size: 18px; margin-top: 0; } -.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone { margin-top: 9px; -webkit-border-radius: 13px; -moz-border-radius: 13px; -ms-border-radius: 13px; -o-border-radius: 13px; border-radius: 13px; -webkit-box-shadow: rgba(128, 128, 128, 0.4) 0 0 4px 0 inset, 0 1px 0 #fafafa; -moz-box-shadow: rgba(128, 128, 128, 0.4) 0 0 4px 0 inset, 0 1px 0 #fafafa; box-shadow: rgba(128, 128, 128, 0.4) 0 0 4px 0 inset, 0 1px 0 #fafafa; border: 2px dashed gray; background: #d4dbe0; display: none; height: 82px; width: 360px; float: left; } +.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone { margin-top: 9px; -webkit-border-radius: 13px; -moz-border-radius: 13px; -ms-border-radius: 13px; -o-border-radius: 13px; border-radius: 13px; -webkit-box-shadow: rgba(128, 128, 128, 0.4) 0 0 4px 0 inset, 0 1px 0 #fafafa; -moz-box-shadow: rgba(128, 128, 128, 0.4) 0 0 4px 0 inset, 0 1px 0 #fafafa; box-shadow: rgba(128, 128, 128, 0.4) 0 0 4px 0 inset, 0 1px 0 #fafafa; border: 2px dashed gray; background: #d4dbe0; display: none; height: 54px; width: 360px; float: left; } .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone.active.hover { -webkit-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; -moz-box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; box-shadow: rgba(255, 255, 255, 0.6) 0 0 3px 2px inset; } -.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div { color: #5e5e5e; text-shadow: 0px 1px 0px #fff; background: url("../images/upload.png") 0 25px no-repeat; width: 230px; z-index: 1; padding: 20px 0 0; line-height: 25px; font-size: 25px; font-weight: bold; text-align: center; display: block; margin: 0 auto; } -.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div span { display: block; font-size: 14px; z-index: -1; } -.ss-insert-media .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone { margin-top: 3px; height: 56px; width: 277px; overflow: hidden; } -.ss-insert-media .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div { background-position: 0 15px; } -.ss-insert-media .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div span { height: 30px; font-size: 18px; line-height: 18px; } +.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div { color: #5e5e5e; text-shadow: 0px 1px 0px #fff; background: url("../images/upload.png") 0 12px no-repeat; width: 230px; z-index: 1; padding: 6px 0 0; line-height: 25px; font-size: 20px; font-weight: bold; text-align: center; display: block; margin: 0 auto; } +.ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div span { display: block; font-size: 12px; z-index: -1; margin-top: -3px; } +.ss-insert-media .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone { height: 54px; width: 277px; overflow: hidden; } +.ss-insert-media .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div { background-position: 0 13px; padding-top: 22px; } +.ss-insert-media .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-dropzone div span { height: 38px; font-size: 18px; line-height: 18px; } diff --git a/images/drive-upload-large.png b/images/drive-upload-large.png new file mode 100644 index 0000000000000000000000000000000000000000..f95014ee711d3e4f83f37becb2b0b0b38d9d5378 GIT binary patch literal 2152 zcmbVNYg7|w8Xi=Ff~c!d5VkS|9MJ-B!PE_3e;pv{Ub7toIzIWc|dGBX- zM6M6Dwsf!r0Kl3X21j8lXnGdnu(v8Z`#H9(L_^}yXn6{nB~&6nkXW9KfLy6C6^TNG zVr^y{;tK%t(olb;k-gG+T1yaZmg+#_~Isu}wyy+|o1AKSk zF>6Y33M&fcyt9R!{P1Zgs$h{wSy@@cEGkj1OeH}+K0YQ63Wb1a5L8+jD%22UDwjD1 z7*UCo5(O%e%Rm#OFj=lf{qUHlZ$pqOc)a(-GS$08VJRbNgbETwB$K34Q(SMfRcI9Q zA2&Xzt%}hq5KtR5*Yb6_lYe{9I4h0NG(NVC>Qp_V_%43 ziI_#EGO;W&Xk-S3OlLw6lgy+t*=#5X_NGB(GCareAuO8;2g5-jFrCf}f}jveFo($r z;;?Dd5SR?H8H_nBSEfRRG7&OoSAyAnhh_gEmc>>gLR7Adk;^mYIv_Glj>=VOas|ka zrh^_lp-3V#2|P^&dK)i{C?%gEVvbTS1>aGp3$7jUAb&1KDsi2l*9bbrEqUgsu!A zvMo9sZQMvN;Feyx6L4m#vO<^c<{*+hT(>mG=i$MC!C%)jjdwchkp$FOaNYB}XbUj* zr045l{$5*y>ldM=+`X>LS4(WxL9N!^i_sY956~5BmaJ{dm*)Dcq zVtlsKywrPV|K))^LX|Az{_w~#=aMZGuTqx+9F$*J@Wa42L_)P^$&ECv4=)Z^5#vAW z3da9@I#b2l#n(-&Rttq?&$L5zUPL#^q;l8Q-kKG9L5V|XeoJjr&rz9lY=e}bzb@K9 z*jup^l2d zVdiZ6jwFFGC6?w8Yk|Yzpjxh5ba^+IT|ET6e5owP<@1lv8(C?t^jYh={B$O?*T;^r3knKq>~|68ADDUZLcR7#w@u0-%9hD(pB`{DR7p4TJN{i1 zwWqYB%Aw71i zuD%-3*AHauYb&<^HOnjk!HG%cY6&5e1^+Q;)-pd;FV+CH;Ps^0hdqxPbsM~`2an3%Y7IUm3|1RsjDDl`-n zSYLH+S=Qo?%OBE^Y%I4|B;@9bta?WykrLgP_QljyNorNE0D_7+-z=aP^57$4p zb6dJGbzj1g{J*yHobS>rjK;GZ4yQcvaHdrvttNi=nG4hSQ}R26mK?uV(fU-*Pcyeh z+TCGMtwKR0AOTpKLV{|=KIW#<3@ literal 0 HcmV?d00001 diff --git a/scss/AssetUploadField.scss b/scss/AssetUploadField.scss index dedb5b80b..60cfdc3f0 100644 --- a/scss/AssetUploadField.scss +++ b/scss/AssetUploadField.scss @@ -27,6 +27,12 @@ padding-left: 12px; } +#Form_EditorToolbarMediaForm { + .ui-tabs-panel { + padding-left: 0px; + } +} + body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fieldset { padding: $grid-x*2; overflow: auto; @@ -135,7 +141,7 @@ body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fie .ss-uploadfield-item-info { position: relative; line-height: 30px; - font-size: 18px; + font-size: 14px; overflow: hidden; background-color: #5db4df; @include background-image(linear-gradient(top, #5db4df 0%,#5db1dd 8%,#439bcb 50%,#3f99cd 54%,#207db6 96%,#1e7cba 100%)); @@ -227,7 +233,8 @@ body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fie left: 0; z-index: 0; color: #f00; - @include ss-uploadfield-action-buttons; + @include ss-uploadfield-action-buttons; + font-size:14px; } .ss-uploadfield-item-progress { @@ -267,20 +274,26 @@ body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fie .ss-uploadfield-item-info { float: left; - margin: 34px 0 0; + margin: 10px 0 0; .ss-insert-media &{ - margin: 15px 0px 0 20px; + margin: 10px 0px 0 20px; } label{ - font-size: 16px; + font-size: 18px; line-height: 30px; - padding: 5px 16px; + padding: 8px 16px; } } .ss-uploadfield-fromcomputer { /*position: relative; */ overflow: hidden; display: block; + .btn-icon-drive-upload-large { + background: url(../images/drive-upload-large.png) no-repeat 0px -4px; + width:32px; + height:32px; + margin-top:-12px; + } } .ss-uploadfield-item-uploador { float: left; @@ -288,7 +301,7 @@ body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fie font-size: 22px; padding: 0 20px; line-height: 70px; - margin-top:16px; + margin-top:8px; display: none; .ss-insert-media &{ font-size: 18px; @@ -302,7 +315,7 @@ body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fie border: 2px dashed $color-medium-separator; background: lighten($color-base,12%); display: none; - height: 82px; + height: 54px; width: 360px; float: left; @@ -314,32 +327,33 @@ body.cms.ss-uploadfield-edit-iframe, .composite.ss-assetuploadfield .details fie div { color:lighten($color-text, 10%); text-shadow: 0px 1px 0px #fff; - background: url('../images/upload.png') 0 25px no-repeat; + background: url('../images/upload.png') 0 12px no-repeat; width:230px; z-index:1; - padding: 20px 0 0; + padding: 6px 0 0; line-height: 25px; - font-size: 25px; + font-size: 20px; font-weight: bold; text-align: center; display:block; margin:0 auto; span { display: block; - font-size: 14px; + font-size: 12px; z-index:-1; + margin-top:-3px; } } .ss-insert-media &{ - margin-top:3px; - height: 56px; //Design has these smaller than main upload area - width: 277px; + height: 54px; + width: 277px; //Design has these smaller than main upload area overflow:hidden; div{ - background-position:0 15px; + background-position:0 13px; + padding-top:22px; span{ - height:30px; + height:38px; font-size:18px; line-height: 18px; } diff --git a/scss/_elementMixins.scss b/scss/_elementMixins.scss index 33f2944be..152b7dbf0 100644 --- a/scss/_elementMixins.scss +++ b/scss/_elementMixins.scss @@ -7,7 +7,7 @@ //*Mixin generates the generic button styling for the gridfield*/ @mixin gridFieldButtons{ - border:none; + border:none; display:block; text-indent:-9999em; width:30px; @@ -32,7 +32,7 @@ &.ss-uploadfield-item-cancel{ @include border-radius(0); border-left:1px solid rgba(#fff, 0.2); - margin-top:3px; + margin-top:0px; cursor: pointer; opacity:0.9; &:hover{ @@ -42,9 +42,9 @@ display: block; margin: 0; position:realtive; - top:4px; - } - } + top:8px; + } + } @include ss-uploadfield-editButton; } } @@ -57,12 +57,12 @@ @mixin ss-uploadfield-editButton{ &.ss-uploadfield-item-edit { opacity:0.9; - padding-top: 3px; + padding-top: 1px; padding-bottom: 0; height:100%; @include border-radius(0); &.ui-state-hover{ - background:none; + background:none; opacity:1; span.toggle-details{ opacity:1; @@ -81,7 +81,7 @@ width: 8px; height: 8px; vertical-align: middle; - &.opened { + &.opened { margin-top:0; } } @@ -90,5 +90,5 @@ .ui-icon { display: none; - } + } } \ No newline at end of file diff --git a/templates/AssetUploadField.ss b/templates/AssetUploadField.ss index 9abddc6b9..9fb6960ca 100644 --- a/templates/AssetUploadField.ss +++ b/templates/AssetUploadField.ss @@ -10,7 +10,7 @@
-