From dc222d54f83b270784549cec927649291681ba75 Mon Sep 17 00:00:00 2001 From: Will Rossiter Date: Tue, 9 Aug 2011 11:39:12 +1200 Subject: [PATCH] MINOR: changed icon size for lefthand menu down to 16x16 rather than 24x24 --- admin/css/screen.css | 35 +++++---- admin/images/icons/16x16-s4d33bad4d2.png | Bin 0 -> 1480 bytes admin/images/icons/16x16/blog.png | Bin 0 -> 295 bytes admin/images/icons/16x16/community.png | Bin 0 -> 403 bytes admin/images/icons/16x16/document.png | Bin 0 -> 271 bytes admin/images/icons/16x16/gears.png | Bin 0 -> 437 bytes admin/images/icons/16x16/home.png | Bin 0 -> 326 bytes admin/images/icons/16x16/information.png | Bin 0 -> 359 bytes admin/images/icons/16x16/network.png | Bin 0 -> 321 bytes admin/images/icons/16x16/pencil.png | Bin 0 -> 419 bytes admin/images/icons/16x16/picture.png | Bin 0 -> 358 bytes admin/images/icons/16x16/pie-chart.png | Bin 0 -> 406 bytes admin/scss/_menu.scss | 2 +- admin/scss/_sprites.scss | 73 ++++++++++++------- admin/scss/_style.scss | 2 +- admin/templates/Includes/LeftAndMain_Menu.ss | 2 +- 16 files changed, 70 insertions(+), 44 deletions(-) create mode 100644 admin/images/icons/16x16-s4d33bad4d2.png create mode 100644 admin/images/icons/16x16/blog.png create mode 100644 admin/images/icons/16x16/community.png create mode 100644 admin/images/icons/16x16/document.png create mode 100644 admin/images/icons/16x16/gears.png create mode 100644 admin/images/icons/16x16/home.png create mode 100644 admin/images/icons/16x16/information.png create mode 100644 admin/images/icons/16x16/network.png create mode 100644 admin/images/icons/16x16/pencil.png create mode 100644 admin/images/icons/16x16/picture.png create mode 100644 admin/images/icons/16x16/pie-chart.png diff --git a/admin/css/screen.css b/admin/css/screen.css index bcc6d4be9..e99bfeb10 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -30,17 +30,26 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, /** ---------------------------------------------------- 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; } +/** Helper SCSS file for generating sprites for the interface. S */ +.icon { text-indent: -9999px; border: none; outline: none; } +.icon.icon-24 { width: 24px; height: 24px; background: url('../images/icons/24x24-sba30d25a74.png'); } +.icon.icon-24.icon-assetadmin { background-position: 0 -192px; } +.icon.icon-24.icon-cmsmain { background-position: 0 -168px; } +.icon.icon-24.icon-cmspagescontroller { background-position: 0 -144px; } +.icon.icon-24.icon-cmssettingscontroller { background-position: 0 -72px; } +.icon.icon-24.icon-securityadmin { background-position: 0 -24px; } +.icon.icon-24.icon-reportadmin { background-position: 0 -216px; } +.icon.icon-24.icon-commentadmin { background-position: 0 0; } +.icon.icon-24.icon-help { background-position: 0 -120px; } +.icon.icon-16 { width: 16px; height: 16px; background: url('../images/icons/16x16-s4d33bad4d2.png'); } +.icon.icon-16.icon-assetadmin { background-position: 0 -128px; } +.icon.icon-16.icon-cmsmain { background-position: 0 -112px; } +.icon.icon-16.icon-cmspagescontroller { background-position: 0 -96px; } +.icon.icon-16.icon-cmssettingscontroller { background-position: 0 -48px; } +.icon.icon-16.icon-securityadmin { background-position: 0 -16px; } +.icon.icon-16.icon-reportadmin { background-position: 0 -144px; } +.icon.icon-16.icon-commentadmin { background-position: 0 0; } +.icon.icon-16.icon-help { background-position: 0 -80px; } /** ----------------------------- 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. */ @@ -200,7 +209,7 @@ li.class-ErrorPage a .jstree-pageicon { background-position: 0 -112px; } .cms-menu-list li a { display: block; height: 24px; line-height: 24px; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-shadow: #bfcad2 1px 1px 0; color: #1f1f1f; padding: 7px 5px 7px 8px; background-color: #b0bec7; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #8ca1ae)); background-image: -webkit-linear-gradient(#b0bec7, #8ca1ae); background-image: -moz-linear-gradient(#b0bec7, #8ca1ae); background-image: -o-linear-gradient(#b0bec7, #8ca1ae); background-image: -ms-linear-gradient(#b0bec7, #8ca1ae); background-image: linear-gradient(#b0bec7, #8ca1ae); border-top: 1px solid #ced7dc; border-bottom: 1px solid #748d9d; } .cms-menu-list li a:hover { text-decoration: none; background-color: #b6c3cb; border-bottom: 1px solid #8399a7; color: #2c2c2c; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bfcad2), color-stop(100%, #b0bec7)); background-image: -webkit-linear-gradient(#bfcad2, #b0bec7); background-image: -moz-linear-gradient(#bfcad2, #b0bec7); background-image: -o-linear-gradient(#bfcad2, #b0bec7); background-image: -ms-linear-gradient(#bfcad2, #b0bec7); background-image: linear-gradient(#bfcad2, #b0bec7); } .cms-menu-list li a:focus, .cms-menu-list li a:active { border-top: 1px solid #a1b2bc; text-decoration: none; background-color: #a1b2bc; color: #393939; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #92a5b2), color-stop(100%, #a1b2bc)); background-image: -webkit-linear-gradient(#92a5b2, #a1b2bc); background-image: -moz-linear-gradient(#92a5b2, #a1b2bc); background-image: -o-linear-gradient(#92a5b2, #a1b2bc); background-image: -ms-linear-gradient(#92a5b2, #a1b2bc); background-image: linear-gradient(#92a5b2, #a1b2bc); } -.cms-menu-list li a .icon { display: block; float: left; margin-right: 8px; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; } +.cms-menu-list li a .icon { display: block; float: left; margin: 4px 10px 0 4px; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; } .cms-menu-list li a .text { display: block; } .cms-menu-list li.current a { color: white; text-shadow: #1e5270 0 -1px 0; border-top: 1px solid #55a4d2; border-bottom: 1px solid #1e5270; background-color: #338dc1; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #338dc1), color-stop(100%, #287099)); background-image: -webkit-linear-gradient(#338dc1, #287099); background-image: -moz-linear-gradient(#338dc1, #287099); background-image: -o-linear-gradient(#338dc1, #287099); background-image: -ms-linear-gradient(#338dc1, #287099); background-image: linear-gradient(#338dc1, #287099); } .cms-menu-list li.current ul { border-top: 1px solid #1e5270; } @@ -315,7 +324,7 @@ html article, html aside, html details, html figcaption, html figure, html foote .cms-preview, .cms-menu, .cms-content, .cms-content-header, .cms-content-tools, .cms-content-fields, .cms-edit-form { display: -moz-inline-box; -moz-box-orient: vertical; display: inline-block; vertical-align: middle; *vertical-align: auto; } .cms-preview, .cms-menu, .cms-content, .cms-content-header, .cms-content-tools, .cms-content-fields, .cms-edit-form { *display: inline; } -.cms-content-header { background-color: #b0bec7; padding: 8px 8px 6px 8px; height: 32px; z-index: 60; border-bottom: 2px solid #8399a7; -moz-box-shadow: #eceff1 0 16px 16px; -webkit-box-shadow: #eceff1 0 16px 16px; -o-box-shadow: #eceff1 0 16px 16px; box-shadow: #eceff1 0 16px 16px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ced7dc), color-stop(100%, #92a5b2)); background-image: -webkit-linear-gradient(#ced7dc, #92a5b2); background-image: -moz-linear-gradient(#ced7dc, #92a5b2); background-image: -o-linear-gradient(#ced7dc, #92a5b2); background-image: -ms-linear-gradient(#ced7dc, #92a5b2); background-image: linear-gradient(#ced7dc, #92a5b2); } +.cms-content-header { background-color: #b0bec7; padding: 8px 8px 6px 16px; height: 32px; z-index: 60; border-bottom: 2px solid #8399a7; -moz-box-shadow: #eceff1 0 16px 16px; -webkit-box-shadow: #eceff1 0 16px 16px; -o-box-shadow: #eceff1 0 16px 16px; box-shadow: #eceff1 0 16px 16px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ced7dc), color-stop(100%, #92a5b2)); background-image: -webkit-linear-gradient(#ced7dc, #92a5b2); background-image: -moz-linear-gradient(#ced7dc, #92a5b2); background-image: -o-linear-gradient(#ced7dc, #92a5b2); background-image: -ms-linear-gradient(#ced7dc, #92a5b2); background-image: linear-gradient(#ced7dc, #92a5b2); } .cms-content-header h2 { float: left; padding: 8px 8px 0 0; font-size: 12px; line-height: 24px; font-weight: bold; text-shadow: #ced7dc 1px 1px 0; width: 176px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; } .cms-content-header > div { width: 9999em; overflow: hidden; } .cms-content-header .cms-content-header-tabs { float: left; } diff --git a/admin/images/icons/16x16-s4d33bad4d2.png b/admin/images/icons/16x16-s4d33bad4d2.png new file mode 100644 index 0000000000000000000000000000000000000000..9a31d371db7fdde7318723cf04c75279d5ea7b0a GIT binary patch literal 1480 zcmV;(1vmPMP)eB82<&{A%`vO!NUeTY{1e$g-*dx3x+Brn34nq6)IIUG$APom{4uf#$ZDgB29^* zltyZ3q$y2_l7=cOHMm7X1MwhKs0V3|qN+h4lB{%#vbA{8TF z7Bt5B7{HjoMLfhYB;X*)i6v|og*jZueZh%)`~VB6M?Z$*l)M!d2LbaKj^F0cGci;J zonJto31~sBH`#@gJob5#FL47)GNMLkOLuaGoA&L{$VjQiUV$wfz)Rj_67S<5istx# znt(ZZqeay5G>ct0hsz#t2kp8@>jD!(iJ=^}C!pIaN({6dWp`&hL1G{yAE0!a{Y8+akBsT6VEMj;Sq)w_U zBE%pG%}8}cgxJ-E5WxtVXBn`MSu_eVT74v-Pm;MlcGDw^ai-pQs`SsWkOuFu<3BUZ zXWaUf-z0ECInZX1cB5BATc+F z!tMNq01v!oC(Yd4wA~?3hUg*F=E+bIN-nb#=_E*w$HkT{d>Cevbp>bW6x*Jy~t1@PRtNx(E-fB_MTl{x~9Z$RAXNj3%% z5PvcfQnF+ivXAO(rVc{ZnI8kP>(_nZLpDid<9sZyK+bfQ3+Ysuag#y(Y1o^Sblm_= zH%hj8WCO@&v}v{*7sz=I4n@_Ahx}CF9UP1+C^^abPf&3d$^q(G!q+3D4jiH4c-%ri z@@&8b_}2d!uNQl`E+*tI-C5_D+jr?8_pxx!%!`z2Fl*Ve9ar(4^_DFHPIxa`j;Vrj z7uRtu2uQLI_QwdLJV9r#x|K(G{b(|<@q{|w#@-SjA1)*uulayxu4@~6B>M^GvZFVM zdcz@X-1t=egP?Jn*^^3zXW8Aa>wp@3tE#T=!(MvgVhK>oqMR`9+fU;k_upvUF~snU zo?(YhKo85heGIyQ*2oQ{-6foI+Z0B{3iZ_mO~pw%yYwcb9$S*-4r`Y*23ua~i!lSB zk5$1Oo@dpM8sAG5+i1xet9TvbLb<1bDRL&{*#a4OTX=u_n8{7lzYuszJ%6U#N1`~L-D+-jMq<3@u300002Las1)NPW2JBNN zL^Rxx?g(y}!QR2!5W%qO0f)f=H~S+V1wBXMbjC+N9dekB8<;!P844L^9pZNQ!`@N9pmR5KA(O!O zW{aKxM_z?6_D8)QT#oA|F+aNRP$S(@zGx@kk$Og>2L@*>6&Mw!u{+G@ zRrA=jwzYA38gqCk?BtNX;C_jRNzrGDn{p^mMdOkG&JKUMP5$vtVAS+r5?)ZEKI@Tm zfRxCm>k(=;cWP#>aMrFBH lvkNBtUZ)m%JamXI|}G)22WQ%mvv4FO#soWg_HmQ literal 0 HcmV?d00001 diff --git a/admin/images/icons/16x16/document.png b/admin/images/icons/16x16/document.png new file mode 100644 index 0000000000000000000000000000000000000000..8cd792f72cf2211a1c883fe91202d6b2e4e2c56b GIT binary patch literal 271 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`3dtTpz6=aiY77hwEes65fIv-FFh5ghmZbu%5ppU#$>aYIZ1hkRC)78&qol`;+ E0NdeH5&!@I literal 0 HcmV?d00001 diff --git a/admin/images/icons/16x16/gears.png b/admin/images/icons/16x16/gears.png new file mode 100644 index 0000000000000000000000000000000000000000..d0db97b0f43ffcd9c41cf2dfdf4bd2316bfea187 GIT binary patch literal 437 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`3dtTpz6=aiY77hwEes65fI#0RO4?aUh)1hN?n#Y1GC z^cpDa^FP6@kiLxhW17Zp#*Tak<^uhF5hvQUSX%3N1-3gLek>cZm?1=NIpbf4n1-XS zx(+ejXIJ`E2wh}nQ(`Dmc*p*TW66;uzFtm6g>B7M*@kw^dQOXZrZg;BaD!8;oI%QN z{RhbpOi~_s0qYf)?~qft*L9Zr1?Ne|j_C{=`K~k=U)W)updi?==cAj Ux~fV%1_l;`r>mdKI;Vst0F^Y5PXGV_ literal 0 HcmV?d00001 diff --git a/admin/images/icons/16x16/home.png b/admin/images/icons/16x16/home.png new file mode 100644 index 0000000000000000000000000000000000000000..27d3fa0f9abd826a367c6045160198c947c48c00 GIT binary patch literal 326 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`3dtTpz6=aiY77hwEes65fI literal 0 HcmV?d00001 diff --git a/admin/images/icons/16x16/information.png b/admin/images/icons/16x16/information.png new file mode 100644 index 0000000000000000000000000000000000000000..c9348033dcf6fe33c2331aa7a2227ba0489d6a4d GIT binary patch literal 359 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`3dtTpz6=aiY77hwEes65fIC;h%JI(&O`wR>i9*JrEX3%r>sbI=86)1N2 zsk?(G;h>TlbFY@D#(yS(_o_!(?>W>kb>45#pRhsFK)8c-Le71URg7vETAVMG#juq) zzqEGPGc|X?tHI@HKcXJm+Sl98V~_svtFPZ&I1{an^LB{Ts5Ix2A| literal 0 HcmV?d00001 diff --git a/admin/images/icons/16x16/network.png b/admin/images/icons/16x16/network.png new file mode 100644 index 0000000000000000000000000000000000000000..c21a1bb2cdc9ef345ac053884f51fb460c4ccc11 GIT binary patch literal 321 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`3dtTpz6=aiY77hwEes65fIb|5M`+PJ#8TkN#&A z^(ZuTHZU?doN4xF5+5? zdjV^OPWuDTbCM1*h`v3p{ literal 0 HcmV?d00001 diff --git a/admin/images/icons/16x16/pencil.png b/admin/images/icons/16x16/pencil.png new file mode 100644 index 0000000000000000000000000000000000000000..5711bcc1f15d0481bff6a88cd348a7c61fabeb23 GIT binary patch literal 419 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`3dtTpz6=aiY77hwEes65fI zlfmU_)*{)xy~8j?Sz!O+R0ca|hmBX+jublVna9}8dm=$s zz@6cvyvBb{f$a<*eKM>B4?btg(c^5fl4Yr5+{i2-pRT5~wTZ`){Ya=o4#N?CN2$gN zt`nv`JWCk470$ISixXD(rg)V>g5jsVWJfB4p}9pb)6+wskYw<5^>bP0l+XkK9NUY< literal 0 HcmV?d00001 diff --git a/admin/images/icons/16x16/picture.png b/admin/images/icons/16x16/picture.png new file mode 100644 index 0000000000000000000000000000000000000000..978c4f990288ff032fd792aa16ec7e150edd832b GIT binary patch literal 358 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`3dtTpz6=aiY77hwEes65fI8y~P$~UeIiNqZYBBs19%NUDG#91C}kQKks qpysfFTkb%RsHEo4gAM6!Yz!I#(lNVst+@g82!p4qpUXO@geCwLMR8I9 literal 0 HcmV?d00001 diff --git a/admin/images/icons/16x16/pie-chart.png b/admin/images/icons/16x16/pie-chart.png new file mode 100644 index 0000000000000000000000000000000000000000..57ad727c013d36d1124d45c8883ab48ecf7500b4 GIT binary patch literal 406 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`3dtTpz6=aiY77hwEes65fI|Btf=E4T4v+rzb9Z=IpD=x<$cSyQQ&YK|@XhBQt9QYgb{TkV2jFi3WX# zGtJI*x&r?hl6ZBB_!KNBFtRt?VDDFb=dg#N{SI@0#F>Q(9P1i*Zg3o_K4Fr;EIdV! z>qxrC6&^1i?wJ#edXxpeJ6yI=WZ?SYF(FFKySj1%<-7yabi)V*$aIdO_Wk283>`njxgN@xNA<9vdb literal 0 HcmV?d00001 diff --git a/admin/scss/_menu.scss b/admin/scss/_menu.scss index b5e363e46..aabd8de33 100755 --- a/admin/scss/_menu.scss +++ b/admin/scss/_menu.scss @@ -107,7 +107,7 @@ .icon { display: block; float: left; - margin-right: 8px; + margin: 4px 10px 0 4px; @include opacity(0.7); } diff --git a/admin/scss/_sprites.scss b/admin/scss/_sprites.scss index 324fc7839..2c6724f5b 100644 --- a/admin/scss/_sprites.scss +++ b/admin/scss/_sprites.scss @@ -1,43 +1,60 @@ /** * Helper SCSS file for generating sprites for the interface. * - + * S */ @import "compass/utilities/sprites/base"; $icon24: sprite-map("icons/24x24/*.png"); +$icon16: sprite-map("icons/16x16/*.png"); -.icon-24 { - background: $icon24; + +@mixin icons($sprite) { + background: $sprite; + + &.icon-assetadmin { + @include sprite($sprite, "picture"); + } + &.icon-cmsmain { + @include sprite($sprite, "pencil"); + } + &.icon-cmspagescontroller { + @include sprite($sprite, "network"); + } + &.icon-cmssettingscontroller { + @include sprite($sprite, "gears"); + } + &.icon-securityadmin { + @include sprite($sprite, "community"); + } + &.icon-reportadmin { + @include sprite($sprite, "pie-chart"); + } + &.icon-commentadmin { + @include sprite($sprite, "blog"); + } + &.icon-help { + @include sprite($sprite, "information"); + } +} + + +.icon { text-indent: -9999px; border: none; outline: none; - width: 24px; - height: 24px; + &.icon-24 { + width: 24px; + height: 24px; - &.icon-assetadmin { - @include sprite($icon24, "picture"); + @include icons($icon24); } - &.icon-cmsmain { - @include sprite($icon24, "pencil"); + + &.icon-16 { + width: 16px; + height: 16px; + + @include icons($icon16); } - &.icon-cmspagescontroller { - @include sprite($icon24, "network"); - } - &.icon-cmssettingscontroller { - @include sprite($icon24, "gears"); - } - &.icon-securityadmin { - @include sprite($icon24, "community"); - } - &.icon-reportadmin { - @include sprite($icon24, "pie-chart"); - } - &.icon-commentadmin { - @include sprite($icon24, "blog"); - } - &.icon-help { - @include sprite($icon24, "information"); - } -} +} \ No newline at end of file diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index 31d906775..3707c4ed6 100755 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -100,7 +100,7 @@ html,body { .cms-content-header { background-color: darken($color-widget-bg, 20%); - padding: $grid-vertical $grid-horizontal ($grid-vertical - 2) $grid-horizontal; + padding: $grid-vertical $grid-horizontal ($grid-vertical - 2) $grid-horizontal * 2; height: $grid-vertical * 4; z-index: 60; border-bottom: 2px solid darken($color-widget-bg, 35%); diff --git a/admin/templates/Includes/LeftAndMain_Menu.ss b/admin/templates/Includes/LeftAndMain_Menu.ss index 21c84d57f..e02e3320e 100755 --- a/admin/templates/Includes/LeftAndMain_Menu.ss +++ b/admin/templates/Includes/LeftAndMain_Menu.ss @@ -26,7 +26,7 @@ <% control MainMenu %>