From ae3382d797e76a41be8bff9e7ac4ed3d06784a57 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Mon, 27 Feb 2012 18:15:59 -0800 Subject: working through new grid implementation... --- less/mixins.less | 272 ++++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 217 insertions(+), 55 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 6b85be96f..ef5804d39 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -482,16 +482,126 @@ #grid { - .core (@gridColumnWidth, @gridGutterWidth) { + // we have to define these bogus mixins otherwise + // less throws an exception when we call for them + // below and a guard hasn't overridden them + // (@fat will work with @cloudhead on coming up with something better hopefully) + .span1 (@gridColumns) {} + .span2 (@gridColumns) {} + .span3 (@gridColumns) {} + .span4 (@gridColumns) {} + .span5 (@gridColumns) {} + .span6 (@gridColumns) {} + .span7 (@gridColumns) {} + .span8 (@gridColumns) {} + .span9 (@gridColumns) {} + .span10 (@gridColumns) {} + .span11 (@gridColumns) {} + .span12 (@gridColumns) {} + .span13 (@gridColumns) {} + .span14 (@gridColumns) {} + .span15 (@gridColumns) {} + .span16 (@gridColumns) {} + .span17 (@gridColumns) {} + .span18 (@gridColumns) {} + .span19 (@gridColumns) {} + .span20 (@gridColumns) {} + .span21 (@gridColumns) {} + .span22 (@gridColumns) {} + .span23 (@gridColumns) {} + .span24 (@gridColumns) {} + + + // override mixins with guards + .span1 (@gridColumns) when (@gridColumns > 0) { .span1 { .span(1); } } + .span2 (@gridColumns) when (@gridColumns > 1) { .span2 { .span(2); } } + .span3 (@gridColumns) when (@gridColumns > 2) { .span3 { .span(3); } } + .span4 (@gridColumns) when (@gridColumns > 3) { .span4 { .span(4); } } + .span5 (@gridColumns) when (@gridColumns > 4) { .span5 { .span(5); } } + .span6 (@gridColumns) when (@gridColumns > 5) { .span6 { .span(6); } } + .span7 (@gridColumns) when (@gridColumns > 6) { .span7 { .span(7); } } + .span8 (@gridColumns) when (@gridColumns > 7) { .span8 { .span(8); } } + .span9 (@gridColumns) when (@gridColumns > 8) { .span9 { .span(9); } } + .span10 (@gridColumns) when (@gridColumns > 9) { .span10 { .span(10); } } + .span11 (@gridColumns) when (@gridColumns > 10) { .span11 { .span(11); } } + .span12 (@gridColumns) when (@gridColumns > 11) { .span12 { .span(12); } } + .span13 (@gridColumns) when (@gridColumns > 12) { .span13 { .span(13); } } + .span14 (@gridColumns) when (@gridColumns > 13) { .span14 { .span(14); } } + .span15 (@gridColumns) when (@gridColumns > 14) { .span15 { .span(15); } } + .span16 (@gridColumns) when (@gridColumns > 15) { .span16 { .span(16); } } + .span17 (@gridColumns) when (@gridColumns > 16) { .span17 { .span(17); } } + .span18 (@gridColumns) when (@gridColumns > 17) { .span18 { .span(18); } } + .span19 (@gridColumns) when (@gridColumns > 18) { .span19 { .span(19); } } + .span20 (@gridColumns) when (@gridColumns > 19) { .span20 { .span(20); } } + .span21 (@gridColumns) when (@gridColumns > 20) { .span21 { .span(21); } } + .span22 (@gridColumns) when (@gridColumns > 21) { .span22 { .span(22); } } + .span23 (@gridColumns) when (@gridColumns > 22) { .span23 { .span(23); } } + .span24 (@gridColumns) when (@gridColumns > 23) { .span24 { .span(24); } } + + + // do the same with offset as we did with spans ;_; + .offset1 (@gridColumns) {} + .offset2 (@gridColumns) {} + .offset3 (@gridColumns) {} + .offset4 (@gridColumns) {} + .offset5 (@gridColumns) {} + .offset6 (@gridColumns) {} + .offset7 (@gridColumns) {} + .offset8 (@gridColumns) {} + .offset9 (@gridColumns) {} + .offset10 (@gridColumns) {} + .offset11 (@gridColumns) {} + .offset12 (@gridColumns) {} + .offset13 (@gridColumns) {} + .offset14 (@gridColumns) {} + .offset15 (@gridColumns) {} + .offset16 (@gridColumns) {} + .offset17 (@gridColumns) {} + .offset18 (@gridColumns) {} + .offset19 (@gridColumns) {} + .offset20 (@gridColumns) {} + .offset21 (@gridColumns) {} + .offset22 (@gridColumns) {} + .offset23 (@gridColumns) {} + .offset24 (@gridColumns) {} + + + // override with guards + .offset1 (@gridColumns) when (@gridColumns > 0) { .offset1 { .offset(1); } } + .offset2 (@gridColumns) when (@gridColumns > 1) { .offset2 { .offset(2); } } + .offset3 (@gridColumns) when (@gridColumns > 2) { .offset3 { .offset(3); } } + .offset4 (@gridColumns) when (@gridColumns > 3) { .offset4 { .offset(4); } } + .offset5 (@gridColumns) when (@gridColumns > 4) { .offset5 { .offset(5); } } + .offset6 (@gridColumns) when (@gridColumns > 5) { .offset6 { .offset(6); } } + .offset7 (@gridColumns) when (@gridColumns > 6) { .offset7 { .offset(7); } } + .offset8 (@gridColumns) when (@gridColumns > 7) { .offset8 { .offset(8); } } + .offset9 (@gridColumns) when (@gridColumns > 8) { .offset9 { .offset(9); } } + .offset10 (@gridColumns) when (@gridColumns > 9) { .offset10 { .offset(10); } } + .offset11 (@gridColumns) when (@gridColumns > 10) { .offset11 { .offset(11); } } + .offset12 (@gridColumns) when (@gridColumns > 11) { .offset12 { .offset(12); } } + .offset13 (@gridColumns) when (@gridColumns > 12) { .offset13 { .offset(13); } } + .offset14 (@gridColumns) when (@gridColumns > 13) { .offset14 { .offset(14); } } + .offset15 (@gridColumns) when (@gridColumns > 14) { .offset15 { .offset(15); } } + .offset16 (@gridColumns) when (@gridColumns > 15) { .offset16 { .offset(16); } } + .offset17 (@gridColumns) when (@gridColumns > 16) { .offset17 { .offset(17); } } + .offset18 (@gridColumns) when (@gridColumns > 17) { .offset18 { .offset(18); } } + .offset19 (@gridColumns) when (@gridColumns > 18) { .offset19 { .offset(19); } } + .offset20 (@gridColumns) when (@gridColumns > 19) { .offset20 { .offset(20); } } + .offset21 (@gridColumns) when (@gridColumns > 20) { .offset21 { .offset(21); } } + .offset22 (@gridColumns) when (@gridColumns > 21) { .offset22 { .offset(22); } } + .offset23 (@gridColumns) when (@gridColumns > 22) { .offset23 { .offset(23); } } + .offset24 (@gridColumns) when (@gridColumns > 23) { .offset24 { .offset(24); } } - .span (@columns) { - width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); - } + .core (@gridColumnWidth, @gridGutterWidth) { .offset (@columns) { margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); } + .span (@columns) { + width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); + } + .row { margin-left: @gridGutterWidth * -1; .clearfix(); @@ -505,33 +615,59 @@ // Set the container width, and reset it for fixed navbars .container, .navbar-fixed-top .container, - .navbar-fixed-bottom .container { .span(12); } - - .span1 { .span(1); } - .span2 { .span(2); } - .span3 { .span(3); } - .span4 { .span(4); } - .span5 { .span(5); } - .span6 { .span(6); } - .span7 { .span(7); } - .span8 { .span(8); } - .span9 { .span(9); } - .span10 { .span(10); } - .span11 { .span(11); } - .span12 { .span(12); } - - .offset1 { .offset(1); } - .offset2 { .offset(2); } - .offset3 { .offset(3); } - .offset4 { .offset(4); } - .offset5 { .offset(5); } - .offset6 { .offset(6); } - .offset7 { .offset(7); } - .offset8 { .offset(8); } - .offset9 { .offset(9); } - .offset10 { .offset(10); } - .offset11 { .offset(11); } - .offset12 { .offset(12); } + .navbar-fixed-bottom .container { .span(@gridColumns); } + + // define up to max of 24 columns (default is 12) + #grid .span1(@gridColumns); + #grid .span2(@gridColumns); + #grid .span3(@gridColumns); + #grid .span4(@gridColumns); + #grid .span5(@gridColumns); + #grid .span6(@gridColumns); + #grid .span7(@gridColumns); + #grid .span8(@gridColumns); + #grid .span9(@gridColumns); + #grid .span10(@gridColumns); + #grid .span11(@gridColumns); + #grid .span12(@gridColumns); + #grid .span13(@gridColumns); + #grid .span14(@gridColumns); + #grid .span15(@gridColumns); + #grid .span16(@gridColumns); + #grid .span17(@gridColumns); + #grid .span18(@gridColumns); + #grid .span19(@gridColumns); + #grid .span20(@gridColumns); + #grid .span21(@gridColumns); + #grid .span22(@gridColumns); + #grid .span23(@gridColumns); + #grid .span24(@gridColumns); + + // define up to max of 24 offsets (default is 12) + #grid .offset1(@gridColumns); + #grid .offset2(@gridColumns); + #grid .offset3(@gridColumns); + #grid .offset4(@gridColumns); + #grid .offset5(@gridColumns); + #grid .offset6(@gridColumns); + #grid .offset7(@gridColumns); + #grid .offset8(@gridColumns); + #grid .offset9(@gridColumns); + #grid .offset10(@gridColumns); + #grid .offset11(@gridColumns); + #grid .offset12(@gridColumns); + #grid .offset13(@gridColumns); + #grid .offset14(@gridColumns); + #grid .offset15(@gridColumns); + #grid .offset16(@gridColumns); + #grid .offset17(@gridColumns); + #grid .offset18(@gridColumns); + #grid .offset19(@gridColumns); + #grid .offset20(@gridColumns); + #grid .offset21(@gridColumns); + #grid .offset22(@gridColumns); + #grid .offset23(@gridColumns); + #grid .offset24(@gridColumns); } @@ -551,18 +687,31 @@ > [class*="span"]:first-child { margin-left: 0; } - > .span1 { .span(1); } - > .span2 { .span(2); } - > .span3 { .span(3); } - > .span4 { .span(4); } - > .span5 { .span(5); } - > .span6 { .span(6); } - > .span7 { .span(7); } - > .span8 { .span(8); } - > .span9 { .span(9); } - > .span10 { .span(10); } - > .span11 { .span(11); } - > .span12 { .span(12); } + + #grid .span1(@gridColumns); + #grid .span2(@gridColumns); + #grid .span3(@gridColumns); + #grid .span4(@gridColumns); + #grid .span5(@gridColumns); + #grid .span6(@gridColumns); + #grid .span7(@gridColumns); + #grid .span8(@gridColumns); + #grid .span9(@gridColumns); + #grid .span10(@gridColumns); + #grid .span11(@gridColumns); + #grid .span12(@gridColumns); + #grid .span13(@gridColumns); + #grid .span14(@gridColumns); + #grid .span15(@gridColumns); + #grid .span16(@gridColumns); + #grid .span17(@gridColumns); + #grid .span18(@gridColumns); + #grid .span19(@gridColumns); + #grid .span20(@gridColumns); + #grid .span21(@gridColumns); + #grid .span22(@gridColumns); + #grid .span23(@gridColumns); + #grid .span24(@gridColumns); } } @@ -577,18 +726,31 @@ textarea, .uneditable-input { margin-left: 0; // override margin-left from core grid system - > .span1 { .span(1); } - > .span2 { .span(2); } - > .span3 { .span(3); } - > .span4 { .span(4); } - > .span5 { .span(5); } - > .span6 { .span(6); } - > .span7 { .span(7); } - > .span8 { .span(8); } - > .span9 { .span(9); } - > .span10 { .span(10); } - > .span11 { .span(11); } - > .span12 { .span(12); } + + #grid .span1(@gridColumns); + #grid .span2(@gridColumns); + #grid .span3(@gridColumns); + #grid .span4(@gridColumns); + #grid .span5(@gridColumns); + #grid .span6(@gridColumns); + #grid .span7(@gridColumns); + #grid .span8(@gridColumns); + #grid .span9(@gridColumns); + #grid .span10(@gridColumns); + #grid .span11(@gridColumns); + #grid .span12(@gridColumns); + #grid .span13(@gridColumns); + #grid .span14(@gridColumns); + #grid .span15(@gridColumns); + #grid .span16(@gridColumns); + #grid .span17(@gridColumns); + #grid .span18(@gridColumns); + #grid .span19(@gridColumns); + #grid .span20(@gridColumns); + #grid .span21(@gridColumns); + #grid .span22(@gridColumns); + #grid .span23(@gridColumns); + #grid .span24(@gridColumns); } } -- cgit v1.2.3 From 86159872433e39800374d563dde28afaa29545f0 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Mon, 27 Feb 2012 18:21:21 -0800 Subject: add guard for child spans --- less/mixins.less | 169 +++++++++++++++++++++++++++++++------------------------ 1 file changed, 97 insertions(+), 72 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index ef5804d39..5386d41ef 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -486,30 +486,30 @@ // less throws an exception when we call for them // below and a guard hasn't overridden them // (@fat will work with @cloudhead on coming up with something better hopefully) - .span1 (@gridColumns) {} - .span2 (@gridColumns) {} - .span3 (@gridColumns) {} - .span4 (@gridColumns) {} - .span5 (@gridColumns) {} - .span6 (@gridColumns) {} - .span7 (@gridColumns) {} - .span8 (@gridColumns) {} - .span9 (@gridColumns) {} - .span10 (@gridColumns) {} - .span11 (@gridColumns) {} - .span12 (@gridColumns) {} - .span13 (@gridColumns) {} - .span14 (@gridColumns) {} - .span15 (@gridColumns) {} - .span16 (@gridColumns) {} - .span17 (@gridColumns) {} - .span18 (@gridColumns) {} - .span19 (@gridColumns) {} - .span20 (@gridColumns) {} - .span21 (@gridColumns) {} - .span22 (@gridColumns) {} - .span23 (@gridColumns) {} - .span24 (@gridColumns) {} + .span1 (@gridColumns, @child: 0) {} + .span2 (@gridColumns, @child: 0) {} + .span3 (@gridColumns, @child: 0) {} + .span4 (@gridColumns, @child: 0) {} + .span5 (@gridColumns, @child: 0) {} + .span6 (@gridColumns, @child: 0) {} + .span7 (@gridColumns, @child: 0) {} + .span8 (@gridColumns, @child: 0) {} + .span9 (@gridColumns, @child: 0) {} + .span10 (@gridColumns, @child: 0) {} + .span11 (@gridColumns, @child: 0) {} + .span12 (@gridColumns, @child: 0) {} + .span13 (@gridColumns, @child: 0) {} + .span14 (@gridColumns, @child: 0) {} + .span15 (@gridColumns, @child: 0) {} + .span16 (@gridColumns, @child: 0) {} + .span17 (@gridColumns, @child: 0) {} + .span18 (@gridColumns, @child: 0) {} + .span19 (@gridColumns, @child: 0) {} + .span20 (@gridColumns, @child: 0) {} + .span21 (@gridColumns, @child: 0) {} + .span22 (@gridColumns, @child: 0) {} + .span23 (@gridColumns, @child: 0) {} + .span24 (@gridColumns, @child: 0) {} // override mixins with guards @@ -538,6 +538,31 @@ .span23 (@gridColumns) when (@gridColumns > 22) { .span23 { .span(23); } } .span24 (@gridColumns) when (@gridColumns > 23) { .span24 { .span(24); } } + .span1 (@gridColumns, @child) when (@gridColumns > 0) and (@child) { > .span1 { .span(1); } } + .span2 (@gridColumns, @child) when (@gridColumns > 1) and (@child) { > .span2 { .span(2); } } + .span3 (@gridColumns, @child) when (@gridColumns > 2) and (@child) { > .span3 { .span(3); } } + .span4 (@gridColumns, @child) when (@gridColumns > 3) and (@child) { > .span4 { .span(4); } } + .span5 (@gridColumns, @child) when (@gridColumns > 4) and (@child) { > .span5 { .span(5); } } + .span6 (@gridColumns, @child) when (@gridColumns > 5) and (@child) { > .span6 { .span(6); } } + .span7 (@gridColumns, @child) when (@gridColumns > 6) and (@child) { > .span7 { .span(7); } } + .span8 (@gridColumns, @child) when (@gridColumns > 7) and (@child) { > .span8 { .span(8); } } + .span9 (@gridColumns, @child) when (@gridColumns > 8) and (@child) { > .span9 { .span(9); } } + .span10 (@gridColumns, @child) when (@gridColumns > 9) and (@child) { > .span10 { .span(10); } } + .span11 (@gridColumns, @child) when (@gridColumns > 10) and (@child) { > .span11 { .span(11); } } + .span12 (@gridColumns, @child) when (@gridColumns > 11) and (@child) { > .span12 { .span(12); } } + .span13 (@gridColumns, @child) when (@gridColumns > 12) and (@child) { > .span13 { .span(13); } } + .span14 (@gridColumns, @child) when (@gridColumns > 13) and (@child) { > .span14 { .span(14); } } + .span15 (@gridColumns, @child) when (@gridColumns > 14) and (@child) { > .span15 { .span(15); } } + .span16 (@gridColumns, @child) when (@gridColumns > 15) and (@child) { > .span16 { .span(16); } } + .span17 (@gridColumns, @child) when (@gridColumns > 16) and (@child) { > .span17 { .span(17); } } + .span18 (@gridColumns, @child) when (@gridColumns > 17) and (@child) { > .span18 { .span(18); } } + .span19 (@gridColumns, @child) when (@gridColumns > 18) and (@child) { > .span19 { .span(19); } } + .span20 (@gridColumns, @child) when (@gridColumns > 19) and (@child) { > .span20 { .span(20); } } + .span21 (@gridColumns, @child) when (@gridColumns > 20) and (@child) { > .span21 { .span(21); } } + .span22 (@gridColumns, @child) when (@gridColumns > 21) and (@child) { > .span22 { .span(22); } } + .span23 (@gridColumns, @child) when (@gridColumns > 22) and (@child) { > .span23 { .span(23); } } + .span24 (@gridColumns, @child) when (@gridColumns > 23) and (@child) { > .span24 { .span(24); } } + // do the same with offset as we did with spans ;_; .offset1 (@gridColumns) {} @@ -688,30 +713,30 @@ margin-left: 0; } - #grid .span1(@gridColumns); - #grid .span2(@gridColumns); - #grid .span3(@gridColumns); - #grid .span4(@gridColumns); - #grid .span5(@gridColumns); - #grid .span6(@gridColumns); - #grid .span7(@gridColumns); - #grid .span8(@gridColumns); - #grid .span9(@gridColumns); - #grid .span10(@gridColumns); - #grid .span11(@gridColumns); - #grid .span12(@gridColumns); - #grid .span13(@gridColumns); - #grid .span14(@gridColumns); - #grid .span15(@gridColumns); - #grid .span16(@gridColumns); - #grid .span17(@gridColumns); - #grid .span18(@gridColumns); - #grid .span19(@gridColumns); - #grid .span20(@gridColumns); - #grid .span21(@gridColumns); - #grid .span22(@gridColumns); - #grid .span23(@gridColumns); - #grid .span24(@gridColumns); + #grid .span1(@gridColumns, true); + #grid .span2(@gridColumns, true); + #grid .span3(@gridColumns, true); + #grid .span4(@gridColumns, true); + #grid .span5(@gridColumns, true); + #grid .span6(@gridColumns, true); + #grid .span7(@gridColumns, true); + #grid .span8(@gridColumns, true); + #grid .span9(@gridColumns, true); + #grid .span10(@gridColumns, true); + #grid .span11(@gridColumns, true); + #grid .span12(@gridColumns, true); + #grid .span13(@gridColumns, true); + #grid .span14(@gridColumns, true); + #grid .span15(@gridColumns, true); + #grid .span16(@gridColumns, true); + #grid .span17(@gridColumns, true); + #grid .span18(@gridColumns, true); + #grid .span19(@gridColumns, true); + #grid .span20(@gridColumns, true); + #grid .span21(@gridColumns, true); + #grid .span22(@gridColumns, true); + #grid .span23(@gridColumns, true); + #grid .span24(@gridColumns, true); } } @@ -727,30 +752,30 @@ .uneditable-input { margin-left: 0; // override margin-left from core grid system - #grid .span1(@gridColumns); - #grid .span2(@gridColumns); - #grid .span3(@gridColumns); - #grid .span4(@gridColumns); - #grid .span5(@gridColumns); - #grid .span6(@gridColumns); - #grid .span7(@gridColumns); - #grid .span8(@gridColumns); - #grid .span9(@gridColumns); - #grid .span10(@gridColumns); - #grid .span11(@gridColumns); - #grid .span12(@gridColumns); - #grid .span13(@gridColumns); - #grid .span14(@gridColumns); - #grid .span15(@gridColumns); - #grid .span16(@gridColumns); - #grid .span17(@gridColumns); - #grid .span18(@gridColumns); - #grid .span19(@gridColumns); - #grid .span20(@gridColumns); - #grid .span21(@gridColumns); - #grid .span22(@gridColumns); - #grid .span23(@gridColumns); - #grid .span24(@gridColumns); + #grid .span1(@gridColumns, true); + #grid .span2(@gridColumns, true); + #grid .span3(@gridColumns, true); + #grid .span4(@gridColumns, true); + #grid .span5(@gridColumns, true); + #grid .span6(@gridColumns, true); + #grid .span7(@gridColumns, true); + #grid .span8(@gridColumns, true); + #grid .span9(@gridColumns, true); + #grid .span10(@gridColumns, true); + #grid .span11(@gridColumns, true); + #grid .span12(@gridColumns, true); + #grid .span13(@gridColumns, true); + #grid .span14(@gridColumns, true); + #grid .span15(@gridColumns, true); + #grid .span16(@gridColumns, true); + #grid .span17(@gridColumns, true); + #grid .span18(@gridColumns, true); + #grid .span19(@gridColumns, true); + #grid .span20(@gridColumns, true); + #grid .span21(@gridColumns, true); + #grid .span22(@gridColumns, true); + #grid .span23(@gridColumns, true); + #grid .span24(@gridColumns, true); } } -- cgit v1.2.3 From 1aeca545c8708dce6d05e7698589a20b98b39a76 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 4 Mar 2012 14:06:30 -0800 Subject: new approach to grid with recursive mixins :D --- less/mixins.less | 258 ++++++------------------------------------------------- 1 file changed, 25 insertions(+), 233 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 5386d41ef..d58a43685 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -482,140 +482,24 @@ #grid { - // we have to define these bogus mixins otherwise - // less throws an exception when we call for them - // below and a guard hasn't overridden them - // (@fat will work with @cloudhead on coming up with something better hopefully) - .span1 (@gridColumns, @child: 0) {} - .span2 (@gridColumns, @child: 0) {} - .span3 (@gridColumns, @child: 0) {} - .span4 (@gridColumns, @child: 0) {} - .span5 (@gridColumns, @child: 0) {} - .span6 (@gridColumns, @child: 0) {} - .span7 (@gridColumns, @child: 0) {} - .span8 (@gridColumns, @child: 0) {} - .span9 (@gridColumns, @child: 0) {} - .span10 (@gridColumns, @child: 0) {} - .span11 (@gridColumns, @child: 0) {} - .span12 (@gridColumns, @child: 0) {} - .span13 (@gridColumns, @child: 0) {} - .span14 (@gridColumns, @child: 0) {} - .span15 (@gridColumns, @child: 0) {} - .span16 (@gridColumns, @child: 0) {} - .span17 (@gridColumns, @child: 0) {} - .span18 (@gridColumns, @child: 0) {} - .span19 (@gridColumns, @child: 0) {} - .span20 (@gridColumns, @child: 0) {} - .span21 (@gridColumns, @child: 0) {} - .span22 (@gridColumns, @child: 0) {} - .span23 (@gridColumns, @child: 0) {} - .span24 (@gridColumns, @child: 0) {} - - - // override mixins with guards - .span1 (@gridColumns) when (@gridColumns > 0) { .span1 { .span(1); } } - .span2 (@gridColumns) when (@gridColumns > 1) { .span2 { .span(2); } } - .span3 (@gridColumns) when (@gridColumns > 2) { .span3 { .span(3); } } - .span4 (@gridColumns) when (@gridColumns > 3) { .span4 { .span(4); } } - .span5 (@gridColumns) when (@gridColumns > 4) { .span5 { .span(5); } } - .span6 (@gridColumns) when (@gridColumns > 5) { .span6 { .span(6); } } - .span7 (@gridColumns) when (@gridColumns > 6) { .span7 { .span(7); } } - .span8 (@gridColumns) when (@gridColumns > 7) { .span8 { .span(8); } } - .span9 (@gridColumns) when (@gridColumns > 8) { .span9 { .span(9); } } - .span10 (@gridColumns) when (@gridColumns > 9) { .span10 { .span(10); } } - .span11 (@gridColumns) when (@gridColumns > 10) { .span11 { .span(11); } } - .span12 (@gridColumns) when (@gridColumns > 11) { .span12 { .span(12); } } - .span13 (@gridColumns) when (@gridColumns > 12) { .span13 { .span(13); } } - .span14 (@gridColumns) when (@gridColumns > 13) { .span14 { .span(14); } } - .span15 (@gridColumns) when (@gridColumns > 14) { .span15 { .span(15); } } - .span16 (@gridColumns) when (@gridColumns > 15) { .span16 { .span(16); } } - .span17 (@gridColumns) when (@gridColumns > 16) { .span17 { .span(17); } } - .span18 (@gridColumns) when (@gridColumns > 17) { .span18 { .span(18); } } - .span19 (@gridColumns) when (@gridColumns > 18) { .span19 { .span(19); } } - .span20 (@gridColumns) when (@gridColumns > 19) { .span20 { .span(20); } } - .span21 (@gridColumns) when (@gridColumns > 20) { .span21 { .span(21); } } - .span22 (@gridColumns) when (@gridColumns > 21) { .span22 { .span(22); } } - .span23 (@gridColumns) when (@gridColumns > 22) { .span23 { .span(23); } } - .span24 (@gridColumns) when (@gridColumns > 23) { .span24 { .span(24); } } - - .span1 (@gridColumns, @child) when (@gridColumns > 0) and (@child) { > .span1 { .span(1); } } - .span2 (@gridColumns, @child) when (@gridColumns > 1) and (@child) { > .span2 { .span(2); } } - .span3 (@gridColumns, @child) when (@gridColumns > 2) and (@child) { > .span3 { .span(3); } } - .span4 (@gridColumns, @child) when (@gridColumns > 3) and (@child) { > .span4 { .span(4); } } - .span5 (@gridColumns, @child) when (@gridColumns > 4) and (@child) { > .span5 { .span(5); } } - .span6 (@gridColumns, @child) when (@gridColumns > 5) and (@child) { > .span6 { .span(6); } } - .span7 (@gridColumns, @child) when (@gridColumns > 6) and (@child) { > .span7 { .span(7); } } - .span8 (@gridColumns, @child) when (@gridColumns > 7) and (@child) { > .span8 { .span(8); } } - .span9 (@gridColumns, @child) when (@gridColumns > 8) and (@child) { > .span9 { .span(9); } } - .span10 (@gridColumns, @child) when (@gridColumns > 9) and (@child) { > .span10 { .span(10); } } - .span11 (@gridColumns, @child) when (@gridColumns > 10) and (@child) { > .span11 { .span(11); } } - .span12 (@gridColumns, @child) when (@gridColumns > 11) and (@child) { > .span12 { .span(12); } } - .span13 (@gridColumns, @child) when (@gridColumns > 12) and (@child) { > .span13 { .span(13); } } - .span14 (@gridColumns, @child) when (@gridColumns > 13) and (@child) { > .span14 { .span(14); } } - .span15 (@gridColumns, @child) when (@gridColumns > 14) and (@child) { > .span15 { .span(15); } } - .span16 (@gridColumns, @child) when (@gridColumns > 15) and (@child) { > .span16 { .span(16); } } - .span17 (@gridColumns, @child) when (@gridColumns > 16) and (@child) { > .span17 { .span(17); } } - .span18 (@gridColumns, @child) when (@gridColumns > 17) and (@child) { > .span18 { .span(18); } } - .span19 (@gridColumns, @child) when (@gridColumns > 18) and (@child) { > .span19 { .span(19); } } - .span20 (@gridColumns, @child) when (@gridColumns > 19) and (@child) { > .span20 { .span(20); } } - .span21 (@gridColumns, @child) when (@gridColumns > 20) and (@child) { > .span21 { .span(21); } } - .span22 (@gridColumns, @child) when (@gridColumns > 21) and (@child) { > .span22 { .span(22); } } - .span23 (@gridColumns, @child) when (@gridColumns > 22) and (@child) { > .span23 { .span(23); } } - .span24 (@gridColumns, @child) when (@gridColumns > 23) and (@child) { > .span24 { .span(24); } } - - - // do the same with offset as we did with spans ;_; - .offset1 (@gridColumns) {} - .offset2 (@gridColumns) {} - .offset3 (@gridColumns) {} - .offset4 (@gridColumns) {} - .offset5 (@gridColumns) {} - .offset6 (@gridColumns) {} - .offset7 (@gridColumns) {} - .offset8 (@gridColumns) {} - .offset9 (@gridColumns) {} - .offset10 (@gridColumns) {} - .offset11 (@gridColumns) {} - .offset12 (@gridColumns) {} - .offset13 (@gridColumns) {} - .offset14 (@gridColumns) {} - .offset15 (@gridColumns) {} - .offset16 (@gridColumns) {} - .offset17 (@gridColumns) {} - .offset18 (@gridColumns) {} - .offset19 (@gridColumns) {} - .offset20 (@gridColumns) {} - .offset21 (@gridColumns) {} - .offset22 (@gridColumns) {} - .offset23 (@gridColumns) {} - .offset24 (@gridColumns) {} - - - // override with guards - .offset1 (@gridColumns) when (@gridColumns > 0) { .offset1 { .offset(1); } } - .offset2 (@gridColumns) when (@gridColumns > 1) { .offset2 { .offset(2); } } - .offset3 (@gridColumns) when (@gridColumns > 2) { .offset3 { .offset(3); } } - .offset4 (@gridColumns) when (@gridColumns > 3) { .offset4 { .offset(4); } } - .offset5 (@gridColumns) when (@gridColumns > 4) { .offset5 { .offset(5); } } - .offset6 (@gridColumns) when (@gridColumns > 5) { .offset6 { .offset(6); } } - .offset7 (@gridColumns) when (@gridColumns > 6) { .offset7 { .offset(7); } } - .offset8 (@gridColumns) when (@gridColumns > 7) { .offset8 { .offset(8); } } - .offset9 (@gridColumns) when (@gridColumns > 8) { .offset9 { .offset(9); } } - .offset10 (@gridColumns) when (@gridColumns > 9) { .offset10 { .offset(10); } } - .offset11 (@gridColumns) when (@gridColumns > 10) { .offset11 { .offset(11); } } - .offset12 (@gridColumns) when (@gridColumns > 11) { .offset12 { .offset(12); } } - .offset13 (@gridColumns) when (@gridColumns > 12) { .offset13 { .offset(13); } } - .offset14 (@gridColumns) when (@gridColumns > 13) { .offset14 { .offset(14); } } - .offset15 (@gridColumns) when (@gridColumns > 14) { .offset15 { .offset(15); } } - .offset16 (@gridColumns) when (@gridColumns > 15) { .offset16 { .offset(16); } } - .offset17 (@gridColumns) when (@gridColumns > 16) { .offset17 { .offset(17); } } - .offset18 (@gridColumns) when (@gridColumns > 17) { .offset18 { .offset(18); } } - .offset19 (@gridColumns) when (@gridColumns > 18) { .offset19 { .offset(19); } } - .offset20 (@gridColumns) when (@gridColumns > 19) { .offset20 { .offset(20); } } - .offset21 (@gridColumns) when (@gridColumns > 20) { .offset21 { .offset(21); } } - .offset22 (@gridColumns) when (@gridColumns > 21) { .offset22 { .offset(22); } } - .offset23 (@gridColumns) when (@gridColumns > 22) { .offset23 { .offset(23); } } - .offset24 (@gridColumns) when (@gridColumns > 23) { .offset24 { .offset(24); } } + // Recursive mixins! <3 + // Requires not yet released LESS ;) + + .spanX (@index) when not (@index = 0) { + ~".span@{index}" { .span(@index); } + #grid .spanX(@index - 1); + } + .spanX (@index, @child) when not (@index = 0) and (@child) { + ~"> .span@{index}" { .span(@index); } + #grid .spanX(@index - 1); + } + .spanX (0) {} + + .offsetX (@index) when not (@index = 0) { + ~".offset@{index}" { .offset(@index); } + #grid .offsetX(@index - 1); + } + .offsetX (0) {} .core (@gridColumnWidth, @gridGutterWidth) { @@ -642,57 +526,9 @@ .navbar-fixed-top .container, .navbar-fixed-bottom .container { .span(@gridColumns); } - // define up to max of 24 columns (default is 12) - #grid .span1(@gridColumns); - #grid .span2(@gridColumns); - #grid .span3(@gridColumns); - #grid .span4(@gridColumns); - #grid .span5(@gridColumns); - #grid .span6(@gridColumns); - #grid .span7(@gridColumns); - #grid .span8(@gridColumns); - #grid .span9(@gridColumns); - #grid .span10(@gridColumns); - #grid .span11(@gridColumns); - #grid .span12(@gridColumns); - #grid .span13(@gridColumns); - #grid .span14(@gridColumns); - #grid .span15(@gridColumns); - #grid .span16(@gridColumns); - #grid .span17(@gridColumns); - #grid .span18(@gridColumns); - #grid .span19(@gridColumns); - #grid .span20(@gridColumns); - #grid .span21(@gridColumns); - #grid .span22(@gridColumns); - #grid .span23(@gridColumns); - #grid .span24(@gridColumns); - - // define up to max of 24 offsets (default is 12) - #grid .offset1(@gridColumns); - #grid .offset2(@gridColumns); - #grid .offset3(@gridColumns); - #grid .offset4(@gridColumns); - #grid .offset5(@gridColumns); - #grid .offset6(@gridColumns); - #grid .offset7(@gridColumns); - #grid .offset8(@gridColumns); - #grid .offset9(@gridColumns); - #grid .offset10(@gridColumns); - #grid .offset11(@gridColumns); - #grid .offset12(@gridColumns); - #grid .offset13(@gridColumns); - #grid .offset14(@gridColumns); - #grid .offset15(@gridColumns); - #grid .offset16(@gridColumns); - #grid .offset17(@gridColumns); - #grid .offset18(@gridColumns); - #grid .offset19(@gridColumns); - #grid .offset20(@gridColumns); - #grid .offset21(@gridColumns); - #grid .offset22(@gridColumns); - #grid .offset23(@gridColumns); - #grid .offset24(@gridColumns); + // generate .spanX and .offsetX + #grid .spanX (@gridColumns); + #grid .offsetX (@gridColumns); } @@ -713,30 +549,8 @@ margin-left: 0; } - #grid .span1(@gridColumns, true); - #grid .span2(@gridColumns, true); - #grid .span3(@gridColumns, true); - #grid .span4(@gridColumns, true); - #grid .span5(@gridColumns, true); - #grid .span6(@gridColumns, true); - #grid .span7(@gridColumns, true); - #grid .span8(@gridColumns, true); - #grid .span9(@gridColumns, true); - #grid .span10(@gridColumns, true); - #grid .span11(@gridColumns, true); - #grid .span12(@gridColumns, true); - #grid .span13(@gridColumns, true); - #grid .span14(@gridColumns, true); - #grid .span15(@gridColumns, true); - #grid .span16(@gridColumns, true); - #grid .span17(@gridColumns, true); - #grid .span18(@gridColumns, true); - #grid .span19(@gridColumns, true); - #grid .span20(@gridColumns, true); - #grid .span21(@gridColumns, true); - #grid .span22(@gridColumns, true); - #grid .span23(@gridColumns, true); - #grid .span24(@gridColumns, true); + // generate .spanX + #grid .spanX (@gridColumns, true); } } @@ -752,30 +566,8 @@ .uneditable-input { margin-left: 0; // override margin-left from core grid system - #grid .span1(@gridColumns, true); - #grid .span2(@gridColumns, true); - #grid .span3(@gridColumns, true); - #grid .span4(@gridColumns, true); - #grid .span5(@gridColumns, true); - #grid .span6(@gridColumns, true); - #grid .span7(@gridColumns, true); - #grid .span8(@gridColumns, true); - #grid .span9(@gridColumns, true); - #grid .span10(@gridColumns, true); - #grid .span11(@gridColumns, true); - #grid .span12(@gridColumns, true); - #grid .span13(@gridColumns, true); - #grid .span14(@gridColumns, true); - #grid .span15(@gridColumns, true); - #grid .span16(@gridColumns, true); - #grid .span17(@gridColumns, true); - #grid .span18(@gridColumns, true); - #grid .span19(@gridColumns, true); - #grid .span20(@gridColumns, true); - #grid .span21(@gridColumns, true); - #grid .span22(@gridColumns, true); - #grid .span23(@gridColumns, true); - #grid .span24(@gridColumns, true); + // generate .spanX + #grid .spanX (@gridColumns, true); } } -- cgit v1.2.3 From 2f598e35a0954532388960c5cf0e2855a076d48c Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 4 Mar 2012 14:11:51 -0800 Subject: when > 0 rather than when not 0 --- less/mixins.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index d58a43685..b1274847d 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -485,17 +485,17 @@ // Recursive mixins! <3 // Requires not yet released LESS ;) - .spanX (@index) when not (@index = 0) { + .spanX (@index) when (@index > 0) { ~".span@{index}" { .span(@index); } #grid .spanX(@index - 1); } - .spanX (@index, @child) when not (@index = 0) and (@child) { + .spanX (@index, @child) when (@index > 0) and (@child) { ~"> .span@{index}" { .span(@index); } #grid .spanX(@index - 1); } .spanX (0) {} - .offsetX (@index) when not (@index = 0) { + .offsetX (@index) when (@index > 0) { ~".offset@{index}" { .offset(@index); } #grid .offsetX(@index - 1); } -- cgit v1.2.3 From 3524aa909cd0cef16c9d244bd21da0dfd7b48cf9 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 4 Mar 2012 14:21:54 -0800 Subject: make sure to pass child var through --- less/mixins.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index b1274847d..3129d515e 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -489,11 +489,11 @@ ~".span@{index}" { .span(@index); } #grid .spanX(@index - 1); } - .spanX (@index, @child) when (@index > 0) and (@child) { + .spanX (@index, @child) when not (@index = 0) and (@child) { ~"> .span@{index}" { .span(@index); } - #grid .spanX(@index - 1); + #grid .spanX(@index - 1, @child); } - .spanX (0) {} + .spanX (0, ...) {} .offsetX (@index) when (@index > 0) { ~".offset@{index}" { .offset(@index); } -- cgit v1.2.3 From 29c63fdb6ae4877160dbad05cdcf34f8cf1f66ad Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 4 Mar 2012 14:27:13 -0800 Subject: true > child + varargs --- less/mixins.less | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 3129d515e..c9ed13317 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -489,10 +489,10 @@ ~".span@{index}" { .span(@index); } #grid .spanX(@index - 1); } - .spanX (@index, @child) when not (@index = 0) and (@child) { - ~"> .span@{index}" { .span(@index); } - #grid .spanX(@index - 1, @child); - } + .spanX (@index, child) when (@index > 0) { +    ~"> .span@{index}" { .span(@index); } +    #grid .spanX(@index - 1, child); +  } .spanX (0, ...) {} .offsetX (@index) when (@index > 0) { @@ -550,7 +550,7 @@ } // generate .spanX - #grid .spanX (@gridColumns, true); + #grid .spanX (@gridColumns, child); } } @@ -567,7 +567,7 @@ margin-left: 0; // override margin-left from core grid system // generate .spanX - #grid .spanX (@gridColumns, true); + #grid .spanX (@gridColumns, child); } } -- cgit v1.2.3 From a07851d6afdd51ded9273083ec5c734b0af52ddb Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sat, 10 Mar 2012 13:01:17 -0800 Subject: stop doing oldschool escape substitution --- less/mixins.less | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index bba754452..47d467243 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -283,7 +283,7 @@ // Opacity .opacity(@opacity: 100) { opacity: @opacity / 100; - filter: e(%("alpha(opacity=%d)", @opacity)); + filter: ~"alpha(opacity=@{opacity})"; } @@ -320,7 +320,7 @@ background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 background-image: linear-gradient(left, @startColor, @endColor); // Le standard background-repeat: repeat-x; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@startColor, endColorstr=@endColor, GradientType=1); // IE9 and down } .vertical(@startColor: #555, @endColor: #333) { background-color: mix(@startColor, @endColor, 60%); @@ -331,7 +331,7 @@ background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 background-image: linear-gradient(top, @startColor, @endColor); // The standard background-repeat: repeat-x; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@startColor, endColorstr=@endColor, GradientType=0); // IE9 and down } .directional(@startColor: #555, @endColor: #333, @deg: 45deg) { background-color: @endColor; @@ -351,7 +351,7 @@ background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor); background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor); background-repeat: no-repeat; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@startColor, endColorstr=@endColor, GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback } .radial(@innerColor: #555, @outerColor: #333) { background-color: @outerColor; @@ -374,7 +374,7 @@ } // Reset filters for IE .reset-filter() { - filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); } -- cgit v1.2.3