From d8cafeacb5c8eda03360c005bbbabe8bb1ff6ab9 Mon Sep 17 00:00:00 2001 From: Mark Perkins Date: Fri, 22 Jun 2012 17:58:57 +0100 Subject: [PATCH] Lots of grid improvements, a few sprite tweaks --- README.md | 4 +- _compiled/example.css | 119 ++++++++++++++++++++++++++---- examples/example.less | 147 ++++++++++++++++++++++++++++++------- examples/grids.html | 44 ++++++++++- examples/index.html | 19 +++-- examples/nested-grids.html | 61 +++++++++++++++ examples/other.html | 28 +++++++ examples/sprite.png | Bin 3009 -> 3711 bytes examples/sprites.html | 13 +++- mixins/grids.less | 31 ++++++++ mixins/helpers.less | 9 ++- mixins/settings.less | 2 +- mixins/sprites.less | 16 ++-- 13 files changed, 431 insertions(+), 62 deletions(-) create mode 100644 examples/other.html diff --git a/README.md b/README.md index 7800359..76ac55f 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ ClearLESS ========= -A reuseable collection of carefully-considered LESS mixins to help speed up development and increase maintainability. +A reuseable collection of carefully-considered LESS mixins to help speed up development and increase maintainability of stylesheets in large projects. + + diff --git a/_compiled/example.css b/_compiled/example.css index 0032f47..bf7a3ff 100644 --- a/_compiled/example.css +++ b/_compiled/example.css @@ -13,10 +13,57 @@ body { padding: 20px; margin: 0; background: #DDD; + font-size: 10px; + font-family: sans-serif; + min-width: 320px; +} +p, +li { + font-size: 10px; + font-size: 1rem; +} +h1 { + font-size: 15px; + font-size: 1.5rem; +} +h2 { + font-size: 12px; + font-size: 1.2rem; } .receptacle { max-width: 1200px; margin: 0 auto; + border-bottom: 1px dashed #666; +} +.nav { + padding: 10px 0 10px 10px; +} +.nav li { + margin-bottom: 5px; + list-style: none; + padding: 0; +} +.nav a { + display: inline-block; + position: relative; + padding-left: 16px; +} +.ie6 .nav a, +.ie7 .nav a { + display: inline; + zoom: 1; +} +.nav a:before { + position: absolute; + display: block; + content: ' '; + background-image: url('/examples/sprite.png'); + background-repeat: no-repeat; + background-position: -100px -50px; + height: 11px; + width: 6px; + top: 4px; + left: 0; } /* ---- grids ---- */ .primary, @@ -29,8 +76,6 @@ body { margin-bottom: 2%; } .segment { - box-sizing: border-box; - padding: 10px; margin-bottom: 2%; overflow: hidden; } @@ -88,8 +133,13 @@ body { .section-3 .segment { width: 49.2063492063492%; } +.section-4 .segment { + width: 49.2063492063492%; +} +/* media query example */ @media all and (max-width: 40em) { - .section-3 .segment:nth-child(2n) { + .section-3 .segment:nth-child(2n), + .section-4 .segment:nth-child(2n) { margin-right: 0; float: right; } @@ -128,13 +178,28 @@ body { margin-right: 0; float: right; } + .section-4 .primary { + width: 11.11111111111111%; + padding-right: 6.349206349206349%; + } + .section-4 .secondary { + width: 11.11111111111111%; + padding-left: 6.349206349206349%; + margin-left: 6.349206349206349%; + } + .section-4 .tertiary { + width: 17.46031746031746%; + margin-left: 6.349206349206349%; + } + .section-4 .quaternary { + width: 17.46031746031746%; + padding-left: 6.349206349206349%; + margin-right: 6.349206349206349%; + } } /* Nested Grids */ .section-parent .segment { - display: inline; - float: left; width: 49.2063492063492%; - margin-right: 1.5873015873015872%; } .section-parent > .secondary { background-color: transparent; @@ -143,16 +208,19 @@ body { float: right; } .section-nested .segment { - display: inline; - float: left; width: 22.58064516129032%; margin-right: 3.225806451612903%; background: #999; } -.section-nested .segment:nth-child(4n) { +.floated .section-nested .segment > .secondary, +.floated .section-parent .segment:nth-child(4n) { margin-right: 0; float: right; } +.inline .section-nested .segment > .secondary, +.inline .section-parent .segment:nth-child(4n) { + margin-right: 0; +} /* Sprites & Icons */ .more { display: inline-block; @@ -176,13 +244,19 @@ body { top: 4px; right: 0; } -.nav li { +.icon-nav a { + display: inline-block; padding-top: 10px; padding-bottom: 10px; position: relative; padding-left: 38px; } -.nav li:before { +.ie6 .icon-nav a, +.ie7 .icon-nav a { + display: inline; + zoom: 1; +} +.icon-nav a:before { position: absolute; display: block; content: ' '; @@ -194,13 +268,28 @@ body { top: 2px; left: 0; } -.nav li.rockets:before { - background-position: 0px -50px; +.icon-nav .robots a:before { + background-position: 0px 0px; } -.nav li.runners:before { +.icon-nav .robots a:hover:before { background-position: -50px 0px; } -.nav li.ghosts:before { +.icon-nav .rockets a:before { + background-position: 0px -50px; +} +.icon-nav .rockets a:hover:before { background-position: -50px -50px; } +.icon-nav .runners a:before { + background-position: 0px -100px; +} +.icon-nav .runners a:hover:before { + background-position: -50px -100px; +} +.icon-nav .ghosts a:before { + background-position: 0px -150px; +} +.icon-nav .ghosts a:hover:before { + background-position: -50px -150px; +} /* Other Helpers */ diff --git a/examples/example.less b/examples/example.less index 9ddcee8..8907a44 100644 --- a/examples/example.less +++ b/examples/example.less @@ -1,14 +1,18 @@ @import "../mixins/all"; // Default settings override + @sprite-image: url('/examples/sprite.png'); @using-modernizr: false; @using-ieclasses: true; -@column-width: 60px; -@gutter-width: 20px; +@column-width: 60; +@gutter-width: 20; + +@base-font-size: 10; // Project settings + @mobile-width: 40em; /* ---- setup ---- */ @@ -17,11 +21,40 @@ body { padding: 20px; margin: 0; background: #DDD; + font-size: ~"@{base-font-size}px"; + font-family: sans-serif; + min-width: 320px; +} + +p, li { + .font-size-rems(1); +} + +h1 { + .font-size-rems(1.5); +} + +h2 { + .font-size-rems(1.2); } .receptacle { max-width: 1200px; margin: 0 auto; + border-bottom: 1px dashed #666; +} + +.nav { + padding: 10px 0 10px 10px; + li { + margin-bottom: 5px; + list-style: none; + padding: 0; + } + a { + .inline-block(); + .icon(2, 1, 6px, 11px, 10px, 0, 4px); + } } /* ---- grids ---- */ @@ -38,8 +71,6 @@ body { } .segment { - box-sizing: border-box; - padding: 10px; margin-bottom: 2%; overflow: hidden; } @@ -87,8 +118,18 @@ body { } } +.section-4 { + .segment { + .span(8); + } +} + + +/* media query example */ + @media all and ( max-width: @mobile-width ) { - .section-3 .segment:nth-child(2n) { + .section-3 .segment:nth-child(2n), + .section-4 .segment:nth-child(2n) { .end-column(); } } @@ -110,7 +151,7 @@ body { } .secondary { .span(6); - .end-column() + .end-column(); } } @@ -129,17 +170,40 @@ body { } .quaternary { .span(3); - .end-column() + .end-column(); } } - + + .section-4 { + .primary { + .span(2); + .post-pad(1); + } + .secondary { + .span(2); + .pre-pad(1); + .pre-push(1); + } + .tertiary { + .span(3); + .pre-push(1); + } + + .quaternary { + .span(3); + .pre-pad(1); + .post-push-end(1); + } + + } + } /* Nested Grids */ .section-parent { .segment { - .column(8); + .span(8); } > .secondary { background-color: transparent; @@ -150,37 +214,64 @@ body { .section-nested { .segment { - .column(2,8); + .span(2,8); background: #999; } - .segment:nth-child(4n) { +} + +.floated { + .section-nested .segment > .secondary, + .section-parent .segment:nth-child(4n) { .end-column(); } } +.inline { + .section-nested .segment > .secondary, + .section-parent .segment:nth-child(4n) { + .inline-end-column(); + } +} + + /* Sprites & Icons */ .more { .inline-block(); - .icon-right(2, 1, 6px, 11px, 10px, 0, 4px); -} - -.nav li { - padding-top: 10px; - padding-bottom: 10px; - .icon-left(0, 0, 28px, 28px, 10px, 0, 2px); + .right-icon(2, 1, 6px, 11px, 10px, 0, 4px); } -.nav li.rockets { - .icon-left-pos(0,1); -} - -.nav li.runners { - .icon-left-pos(1,0); -} - -.nav li.ghosts { - .icon-left-pos(1,1); +.icon-nav { + a { + .inline-block(); + padding-top: 10px; + padding-bottom: 10px; + .icon(0, 0, 28px, 28px, 10px, 0, 2px); + } + .robots a { + .icon-pos(0,0); + &:hover { + .icon-pos(1,0); + } + } + .rockets a { + .icon-pos(0,1); + &:hover { + .icon-pos(1,1); + } + } + .runners a { + .icon-pos(0,2); + &:hover { + .icon-pos(1,2); + } + } + .ghosts a { + .icon-pos(0,3); + &:hover { + .icon-pos(1,3); + } + } } /* Other Helpers */ diff --git a/examples/grids.html b/examples/grids.html index d9d0ae4..3a52e7f 100644 --- a/examples/grids.html +++ b/examples/grids.html @@ -2,7 +2,8 @@ - + + @@ -72,6 +73,26 @@ +
+ +
+

primary

+
+ +
+

secondary

+
+ +
+

tertiary

+
+ +
+

quaternary

+
+ +
+
@@ -130,6 +151,27 @@
+
+ +
+

primary

+
+ +
+

secondary

+
+ +
+

tertiary

+
+ +
+

quaternary

+
+ +
+ + diff --git a/examples/index.html b/examples/index.html index e688c50..4fbb1cd 100644 --- a/examples/index.html +++ b/examples/index.html @@ -2,6 +2,7 @@ + @@ -11,12 +12,20 @@ -

ClearLESS Examples

+
+

ClearLESS Examples

+
+ +
- + + +
diff --git a/examples/nested-grids.html b/examples/nested-grids.html index 7c9b4b6..dd20607 100644 --- a/examples/nested-grids.html +++ b/examples/nested-grids.html @@ -2,6 +2,7 @@ + @@ -75,5 +76,65 @@ +
+ +

Inline

+ +
+ +
+

primary

+
+ +
+

secondary

+
+ +
+

tertiary

+
+ +
+

quaternary

+
+ +
+ + +
+ +
+

primary

+
+ +
+ +
+ +
+

primary

+
+ +
+

secondary

+
+ +
+

tertiary

+
+ +
+

quaternary

+
+ +
+ +
+ +
+ +
+ + diff --git a/examples/other.html b/examples/other.html new file mode 100644 index 0000000..b992a88 --- /dev/null +++ b/examples/other.html @@ -0,0 +1,28 @@ + + + + + + + + + + ClearLESS Examples + + + +
+ +

Other Examples

+ +
+ + +
+ + + +
+ + + diff --git a/examples/sprite.png b/examples/sprite.png index 46bebccb27f70ce4e2be8ffbe04c230c6ccc24c8..9d704cb274825d238250f37e5a72a44e7602e92a 100644 GIT binary patch delta 2566 zcmV+h3iEnxP#GRhIwL1;@@Wy(0kE=}Sy!GRbz1-JSK z(DO)-PP)@{e0M%QpZ71(`DL9??|h%HzV|FCN(9|?b)^)VVQA&fh_ip;(miiIp7RHY z?YdUEGpJ#ZCI7h%ufBZG^z_~l zl)$>*i!a~foAQ`xd3^XzOL&`sq8asixj<1hN;S3QpSi<__D+W!n3-j=TKnF1=aO$T zP>iO_X&Ob(&~$^N7Z-oL>cowsJH9g`!s@`GmhY<7n*H&sZoj0@JpgE+itD09&Je1K z>soc>;_%5Mu7;cOL!KE27a&6slBR9om9X@=x zb=|?%tca>Z*Zt}be_p)pJxUT^Vjd2 z@nhZ*J>aC19=Lk#x_jJR`Ru%hXKViOHEmPF zB8xY|acVg1U&nu-eb4X%+%2%b4UJt zbKBIg$YOHpN+69%sxx_6XD~Uep=v^s_(3wBtlC@7f9(3TtGTStF;jE@@|4}YxHxRG zm?KuYtL%W4m=-(8I)gbP;(+~2#6coVR;_l?X?I({{)B%M)~)*b+!1EVYl=fEi{&Vj z9hgdx!?Mm0If@8tdI4Fri_hP*bJOE?opUu$So6ax%WasJpV}?6;TDl)=!Ez=ix5BG zr~W#ZHCB7ku222!3m3ljx!;@*7+P6fWS!A{FU*xScFw6IPkR5)KfU{<&-n&qWy>0S z#`bMnN6vrzz-xA&2U$6?#-6r)>y|Cso^|2N&f9%fS~DDu3clBD9@{nIx!SVrnHN0o ztle+F`q;vdMpklIWd&DqSY-v*V`|SH@my^^`P2*E@tGe^P5ox!Sdy&w_ULJ@?5nW$`N;l>n5=8R_WFDE=8CGoE4-#CWZn3^cRp;;pJ!$B z}G&F_u(9`pwp4qo@AcRg~@pJ8|yvb!Gu0000000000 z002NfXx(+|h1Tr|*qm;fziy{dxeij*_6L6p?c!HP{lUUqzi!oRsSPo-TKLMsWfpnM zU%mHS`r_b~$as4oI&-~18`>U-&WSDWJ)J7qGNZ%xW|1>Ubl5&ygN z7gnSp`XLpp+sR&X$NvX%mQD>32EQE7k;+$B6kVLjlNC>0nYYA>MHbIkY_Stxrk$i@pBr8Z={r&8H$M1Z%<3IEbrgX)Vq+ISBtWXbMBE0vVyApfR zD8aZ`YEOLVO6*0$j2!d(~onT<>A2QuGFy7V&A7d zTXy;x)Ng|wgRFYht1JKj004gg0000000000001!TsBA%NxtUh9`m>EvsAtU0N`}fX zH!Be>YX(gssuVM55>b6wWrpH?Syi7S89}$~dfj5v6^b@PjZjJndnBt|%}}?UaEc@? zl;E}YEJ>Vf4Za9ZI0}?ht5n{6Bd6C`OZWTcdk+Zu) znBCQO^6JlL9XRz!w&H)w>YTjQtU?fLd#b4Ar6A1id}6niYbui6`EL?wOexWCJOy{p zihSddB~$rmmj6B4E?hRKL2{?El?^o5?9Vm*ouTqKBnrD6h$6>wUx5+s^~Wj&?k#2M zoIul~?T^Y-zYAC6e(SUIyOf2iAfr=>N(RDjfu=}1G+!1k6Lfzfnw}<+ELJ8&l9XAX zOW7+E)aWbO?uQ{(iQ>UWVp(<9U&~q?YE*x@ZwgM~{uzN}g;oSUXjraM$tw#000000 z0000000000000aJsyWUlX*uI&(FsIiH42q%j8#04HJE%JO-odrWLX(cu}yX*!~8!x z*;U5U9hxSq^7lkF&6VqBJ(fYv&@$6yWj^pDk*eo-u>#DXrV~3zom(nep{9|JgUYu< zryWIR>>zasT_lP~?4bJXFlch@ifQb?&3U2|%V=8cKpKBp>@v;RL7psDRgu_%G_o9% z1UX9_@#ELJuKX7F7@Qaa)J18)7k20j9$v)|QtPfgW3|C3P* cSr?x0f6d^wIGkYkMF0Q*07*qoM6N<$g63=+`~Uy| delta 1846 zcmV-62g&&V9KjcmGXdGLG$a86m&21<0aCNC0c8OQ8P0ex0002^Ja7AfElx|&*r=hKz~G4!`YmtWu>K+@o57tnKiqvZqDO} zWb>YRmu1T;Q>DyK8av~SC3V7*Wb*Nyvv}9M3uo1^yn0w=u20zMoLRH=q%`$O&Appt z^Tzp97L3J$?yFoGj>KYNaYAO@aFcuH)TJz~ZxCT67u>LUR-ZXff(gBWB!X^AS4I@o z5P$Q#AK-iRA5t;;&3dz0EnS|}vq~l#KD>D2u2o?D@h8-jgx|4vo6@SdDwMg2sz?8$ zDm0^?|D$297_64nn^83+moNMM?_0WFjrAg!R(aL2acS30Rf&Y7M)`>IJ8U{cCMCmK zv0_DX{<36)*{YV$|KhtJTh`r{i<)%5c7Itpr{z;3^12yzmDWZ(3^9VL7&oqB^b3tE zS2Z^+Tu`sKsn5Uu{=b%WYg<~b%2jo`mA`#fs_NVmg|bw6+bPF>*H#>TmWXQ1(Z>us zxW^OC(yDJ{n=+Ep+?tchbhkvuuoA9LjJYenV_@1beRdf*aMzx_`)sqd=gB6GmVZ{$ zin*;x6-rpL6Gr_(d3{rY{-~>A%OfYTt~&0pKw$b=TlCwqcduT(diL}@A(C3PvT@~K z|FkAmC}Bm7SyIrfv}iC<=kvT~i;QaraWR{)=!{xef$OFm*spg_8P-!Gsm4FG$o^?* zDYUTktG_W57jpnPY&)N4j_z@<7=QE>>v3L$6$nflvsJ%-ef#$5@p9uzk(AaI3p6Y- z=7hvS$YYFQj;EQUyW-Our#S4qq#jma`jnyLh8{G2!aH)nYAW2Y)Og5fDB)0CbrqI5 zx{HomCfb!To#;r0RTVgU{3D+{GxhRQUTrcIY*-yQos}Bh6SC)8Cgst?s(+erX!+rH ze){O-^G<%H^ulVLZ#Z5Hw6Lm?xH!YT{v-=ia`j%a6Cpz7FBBZdzj zdE(UbCrv)psv8!@3_er-h!JQ=pKgdD-p;V9@#R`p!$+QQ>1n4~-BI&W5X zjVl;8Ul%h4nOofcJq`$*RDZ5zHDb`Am)`W)`?a-SHLvb0tlM*4x17s7EHkU9-uoiX z1KiN@<-^hMj|tUlc;i?Gs(xvazFVUK64YiiQN(puMoAJ%ALt$pp9eR5EZ^`pyS ziHW?^k3tuGR^1`2+QoH^|9*V`kzKFC`qSmG#DvRnJ!kJ1YpUCaRXgvYGqd^`JAb+w zmRzcEv95aGqUyA;=6}6(<#t{D?8WOstt*;g{rdLJd*%D{Y}k%?t6GNj>jyJW&-Z89 z@Ofv}EYiB))!XO$gA|4KyPBEB-JGNrTUy@KU01GZR;j3ItZspqw15BUaJyT9iMCeU#eRXX z+JVje4yyCbfdwVhw%#G9(w$^wmzG*wX?bO@iuwKW=61!QBUW~nmCepD`Kr6EQ-wg@ zM=Ne<*Z1St-xcFkIuFY-<05NWa>SDN@5P))tw`rtS#QxSuB_xuRwM&$8VF zVC15Ne8!k%9+XB{m632NA{krQW~XJ>Zw4=9-l%p#Gk-guF@smssO1%`l*96gcq)xC z%a~`0KND7S?h+15ZUtA{Jzz!tsaVXqOE@gODTUIWu#(Up!N + @@ -10,13 +11,21 @@ -

Sprites & Icons

+
+ +

Sprites & Icons

+ +

Read more

-
    +
+ +
+ +
  • Robots
  • Rockets
  • Runners
    • diff --git a/mixins/grids.less b/mixins/grids.less index c3fc76a..e11829a 100644 --- a/mixins/grids.less +++ b/mixins/grids.less @@ -21,6 +21,10 @@ float: right; } +.inline-end-column() { + margin-right: 0; +} + .span( @span ) { .column-width(@span, @total-columns); @@ -88,6 +92,33 @@ } +.pre-pad( @span ) { + @calc-column-width: 100%*((((@gutter-width+@column-width)*@span)) / @grid-width); + padding-left: @calc-column-width; +} + +.post-pad( @span ) { + @calc-column-width: 100%*((((@gutter-width+@column-width)*@span)) / @grid-width); + padding-right: @calc-column-width; +} + +.pre-push( @span ) { + @calc-column-width: 100%*((((@gutter-width+@column-width)*@span)) / @grid-width); + margin-left: @calc-column-width; +} + +.post-push( @span ) { + @calc-column-width: 100%*((((@gutter-width+@column-width)*@span)+@gutter-width) / @grid-width); + margin-right: @calc-column-width; +} + +.post-push-end( @span ) { + @calc-column-width: 100%*((((@gutter-width+@column-width)*@span)) / @grid-width); + margin-right: @calc-column-width; +} + + + .column-width(@span, @total-columns:@total-columns) { @calc-column-width: 100%*((((@gutter-width+@column-width)*@span)-@gutter-width) / @grid-width); width: @calc-column-width; diff --git a/mixins/helpers.less b/mixins/helpers.less index 7e1fdec..25e6efe 100644 --- a/mixins/helpers.less +++ b/mixins/helpers.less @@ -13,7 +13,14 @@ } } -.font-size-ems(@target-px-size, @context-px-size:@base-font-size-px) { +.font-size-rems(@px-size, @context-px-size:@base-font-size){ + @rem-value: @px-size; + @px-value: (@px-size * @context-px-size); + font-size: ~"@{px-value}px"; + font-size: ~"@{rem-value}rem"; +} + +.font-size-ems(@target-px-size, @context-px-size:@base-font-size) { font-size: (@target-px-size / @context-px-size) * 1em; } diff --git a/mixins/settings.less b/mixins/settings.less index 6ab6d08..5048516 100644 --- a/mixins/settings.less +++ b/mixins/settings.less @@ -9,7 +9,7 @@ @using-ieclasses: true; // whether or not the markup has html5-boilerplate style IE classes in it or not @using-modernizr: false; // whether or not modernizer feature-detection classes are being used -@base-font-size-px: 16; // base pixel font size. Used as a default for px-em conversions +@base-font-size: 16; // base pixel font size. Used as a default for px-em conversions // Sprites -------------------------------- diff --git a/mixins/sprites.less b/mixins/sprites.less index 00290d3..a4ac861 100644 --- a/mixins/sprites.less +++ b/mixins/sprites.less @@ -32,7 +32,7 @@ // These can only be used on block or inline-block elements. // ============================================== -.icon-left(@x, @y, @width, @height, @pad:10, @nudge-left:0, @nudge-top:0, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr) { +.icon(@x, @y, @width, @height, @pad:10, @nudge-left:0, @nudge-top:0, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr) { .generatedcontent & { position: relative; padding-left: (@width + @pad) * 1px; @@ -44,7 +44,7 @@ } } -.icon-left(@x, @y, @width, @height, @pad:10, @nudge-left:0, @nudge-top:0, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr = false) { +.icon(@x, @y, @width, @height, @pad:10, @nudge-left:0, @nudge-top:0, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr = false) { position: relative; padding-left: (@width + @pad) * 1px; &:before { @@ -54,7 +54,7 @@ } } -.icon-right(@x, @y, @width, @height, @pad:10, @nudge-right:0, @nudge-top:0, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr) { +.right-icon(@x, @y, @width, @height, @pad:10, @nudge-right:0, @nudge-top:0, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr) { .generatedcontent & { padding-right: (@width + @pad) * 1px; position: relative; @@ -66,7 +66,7 @@ } } -.icon-right(@x, @y, @width, @height, @pad:10, @nudge-right:0, @nudge-top:0, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr = false) { +.right-icon(@x, @y, @width, @height, @pad:10, @nudge-right:0, @nudge-top:0, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr = false) { position: relative; padding-right: (@width + @pad) * 1px; &:before { @@ -76,7 +76,7 @@ } } -.icon-left-pos(@x, @y, @nudge-left:0, @nudge-top:0, @sprite-grid:@sprite-grid) when (@using-modernizr) { +.icon-pos(@x, @y, @nudge-left:0, @nudge-top:0, @sprite-grid:@sprite-grid) when (@using-modernizr) { .generatedcontent &:before { .sprite-pos(@x, @y, @sprite-grid); .nudge-l(@nudge-left); @@ -84,7 +84,7 @@ } } -.icon-left-pos(@x, @y, @nudge-left:0, @nudge-top:0, @sprite-grid:@sprite-grid) { +.icon-pos(@x, @y, @nudge-left:0, @nudge-top:0, @sprite-grid:@sprite-grid) { &:before { .sprite-pos(@x, @y, @sprite-grid); .nudge-l(@nudge-left); @@ -92,7 +92,7 @@ } } -.icon-right-pos(@x, @y, @nudge-right:0, @nudge-top:0, @sprite-grid:@sprite-grid) when (@using-modernizr) { +.right-icon-pos(@x, @y, @nudge-right:0, @nudge-top:0, @sprite-grid:@sprite-grid) when (@using-modernizr) { .generatedcontent &:before { .sprite-pos(@x, @y, @sprite-grid); .nudge-r(@nudge-right); @@ -100,7 +100,7 @@ } } -.icon-right-pos(@x, @y, @nudge-right:0, @nudge-top:0, @sprite-grid:@sprite-grid) { +.right-icon-pos(@x, @y, @nudge-right:0, @nudge-top:0, @sprite-grid:@sprite-grid) { &:before { .sprite-pos(@x, @y, @sprite-grid); .nudge-r(@nudge-right);