From 404e71399b4169f97fc7e870073ed579742f1dca Mon Sep 17 00:00:00 2001 From: Will Rossiter Date: Fri, 5 Aug 2011 16:46:03 +1200 Subject: [PATCH] ENHANCEMENAT: sprited up cms menu icons via compass --- admin/config.rb | 7 +++- admin/css/screen.css | 25 ++++++------- admin/images/icons/24x24-sba30d25a74.png | Bin 0 -> 2122 bytes admin/scss/_icons.scss | 44 ----------------------- admin/scss/_sprites.scss | 43 ++++++++++++++++++++++ admin/scss/screen.scss | 6 +++- 6 files changed, 67 insertions(+), 58 deletions(-) create mode 100644 admin/images/icons/24x24-sba30d25a74.png delete mode 100644 admin/scss/_icons.scss create mode 100644 admin/scss/_sprites.scss diff --git a/admin/config.rb b/admin/config.rb index 044f3d307..ec6b43ab3 100755 --- a/admin/config.rb +++ b/admin/config.rb @@ -9,5 +9,10 @@ sass_dir = "scss" images_dir = "images" javascripts_dir = "javascript" output_style = :compact + # To enable relative paths to assets via compass helper functions. Uncomment: -relative_assets = true \ No newline at end of file +relative_assets = true + +# disable comments in the output. We want admin comments +# to be verbose +line_comments = false \ No newline at end of file diff --git a/admin/css/screen.css b/admin/css/screen.css index f34b840d7..bcc6d4be9 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -29,6 +29,19 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, /** ---------------------------------------------------- Hides the overflowing text from a container Note: you must define a width on the element with this overflow. ----------------------------------------------------- */ /** ---------------------------------------------------- Clear the properties of sub form fields. Often needed for nested form fields and ----------------------------------------------------- */ /** ---------------------------------------------------- Double tone borders http://daverupert.com/2011/06/two-tone-borders-with-css3/ ----------------------------------------------------- */ +/** ----------------------------- Sprite images ----------------------------- */ +/** Helper SCSS file for generating sprites for the interface. + */ +.icon-24 { background: url('../images/icons/24x24-sba30d25a74.png'); text-indent: -9999px; border: none; outline: none; width: 24px; height: 24px; } +.icon-24.icon-assetadmin { background-position: 0 -192px; } +.icon-24.icon-cmsmain { background-position: 0 -168px; } +.icon-24.icon-cmspagescontroller { background-position: 0 -144px; } +.icon-24.icon-cmssettingscontroller { background-position: 0 -72px; } +.icon-24.icon-securityadmin { background-position: 0 -24px; } +.icon-24.icon-reportadmin { background-position: 0 -216px; } +.icon-24.icon-commentadmin { background-position: 0 0; } +.icon-24.icon-help { background-position: 0 -120px; } + /** ----------------------------- CMS Components ------------------------------ */ /** This file defines the jstree base styling (see http://jstree.com), as well as any customizations (see bottom of file). The styles are usually added through jstree.js on DOM load, but we need it earlier in order to correctly display the uninitialized tree. */ .jstree ul { display: block; margin: 0 0 0 0; padding: 0 0 0 0; list-style-type: none; } @@ -257,18 +270,6 @@ form.nostyle .middleColumn { margin-left: 0; } .action-hidden { display: none; } -/** Icon styles. @todo Automatic sprite generation and ensure that developers can define icons for their own admin interfaces @package sapphire @subpackage admin */ -.icon { background-repeat: none; } -.icon.icon-24 { width: 24px; height: 24px; } -.icon.icon-24.icon-assetadmin { background-image: url(../images/icons/24x24/picture.png); } -.icon.icon-24.icon-cmsmain { background-image: url(../images/icons/24x24/pencil.png); } -.icon.icon-24.icon-cmspagescontroller { background-image: url(../images/icons/24x24/network.png); } -.icon.icon-24.icon-cmssettingscontroller { background-image: url(../images/icons/24x24/gears.png); } -.icon.icon-24.icon-securityadmin { background-image: url(../images/icons/24x24/community.png); } -.icon.icon-24.icon-reportadmin { background-image: url(../images/icons/24x24/pie-chart.png); } -.icon.icon-24.icon-commentadmin { background-image: url(../images/icons/24x24/blog.png); } -.icon.icon-24.icon-help { background-image: url(../images/icons/24x24/information.png); } - /** This file defines CMS-specific customizations to the jQuery UI theme. Every rule in this file should be wrapped in the '.cms' selector (to make it more specific), and contain ONLY overwritten jQuery UI rules (with 'ui-' prefix). This file should be fairly short, as we're using our own custom jQuery UI theme already. TODO Add theme reference Use _style.scss to add more generic style information, and read the jQuery UI theming API: http://jqueryui.com/docs/Theming/API */ .cms .ui-tabs { padding: 0; background: #f0f3f4 url(../images/textures/bg_cms_main_content.png) repeat top left; } .cms .ui-tabs .ui-widget-header { border: 0; background: none; } diff --git a/admin/images/icons/24x24-sba30d25a74.png b/admin/images/icons/24x24-sba30d25a74.png new file mode 100644 index 0000000000000000000000000000000000000000..ba9f5cd0df48e32cbacecd72e4ca43e378b715d2 GIT binary patch literal 2122 zcmV-Q2(|Z#P)iFr1s8#a5^)w;Od*RbrZ9^s?RW3H?{DVb_wGw$5bX_QUS7`k z?$0^rJ3sRnMI3A?fCF@fDh*`ksgu%-cGFeEhgZ=!tz*;|X+_5v)kFf+N8NNKTajaZ z-2iz;3r2Qij~PZO>WTnJF*-@L)MzMvn}!+XXaj8ls0=r@h%_o-Pt!X9P*C0(QhZ0Ll` zJ$TX=^cVd>6|^YsWbofEZh9OLqkcHi4=`~?H*lwczQy{jk)<~+g2W!V{a&Kuj3)7i zHQEJW#1ZFfx5Sgqom%FI>kry1(eP>z*%S`ac23LZipMy$IS;=$d=CtQgzTlx3g+JV zO94AU>C$6s3 zenf4JKV*;>Z5QHJYRj*NgB^&OxR-sa1|HBXt{&4NT93HR#}x#sTWY{pj=EBSJjMxC z2t!Qi04+G9KJix@3cU3~oELzDx+Tqt60=!6^%v*Ahmh$9Y^xBBW)e8mJPx;7x(>fO zfH|~)Ihge$=(Y#zo})F;^EP@CtcN=?9~*$qc~t(!w0M1E1-O-g@8+r76u`w>#Z|Wn zz!mQjkRG@Y(MMK|RSIy$ZAgX4o8M9c{NffQ7vvAc;+BtV0BUjVro+S={LB~rbWUa6 zHo$B#)*(aKaP2n4T-<`7Xu6GZyFr#@!6S(%k!7+9F#$}_L!GtG2}5X-^|XO`Pl*sX zX%2V^vYA{75oqsPfH7L7cv#B|-$Mmrb|V&&^iqBh;FL^LuA2fXR5C$;lL(E?VDYP_ zfO%wnFYc61f%N%UWd^X@Q;TLZl*4VAJWxY2w&UDTIDm^c%j>JEHYzJx%!tDwc{&$< zO1oh>_vH*Jb(@wIbu_LaA+dt|IWs*ZB;jcLD8+!Y;!Xj%rIDs<<(9|weHvDjER%N4XK6mJ{Eru z)9*0Ug&-1`rL}aFzQ^Zfn12R&;2s(ZW{nJ#>78_+^_Z zFHPg8oAy#u6e3&T>GeufyOU7?jZ0ZlyOC@qPk-%i2TVrX1$YaBjU~0!VLIrR$gHG7 zY=#l|UnA)QZ}qAHwcuI)I?Y;N!7&IMx}es>DY?0OfVk9hQTIiv^?WN9jnEEx9rKrG zUcgb$bu0BFfR&?2+eB-;Uv+!?t!+h_aTaUmulC%dbr!|=0sSRCKfBhg!#o|ufa2%- zM?1~f+OYx0LhLpP?L6}WZWQ;o6{&=01`~^|ptoJXWEAtxMD>T&FK5fkZ6dq}1B{FJ zH|BBj-wZ~vq(0ANXRgv5di zD96)dfje!4z3z7b{Uz`Js9M0cth$cBj%4{}eD9>?O5ERa_z}AhsN~ z^iWh<8bCJM91MJ*22?@&ie@3B``|Y9qf{jgQinUBkTT;HW%wSF>UM#0jPp|(a^9z; zP;N?FFAKGx=rB2}LCP`ND18?uUKb)R_?0