mirror of
https://github.com/clearleft/clearless.git
synced 2026-01-09 13:47:55 -05:00
143 lines
3.3 KiB
Plaintext
143 lines
3.3 KiB
Plaintext
// ==============================================
|
|
// Grid mixins
|
|
// ==============================================
|
|
|
|
// You shouldn't need to touch this! Internal use only.
|
|
@grid-width: (@column-width*@total-columns) + (@gutter-width*(@total-columns - 1));
|
|
|
|
.column-wrapper() {
|
|
width: 100%;
|
|
}
|
|
|
|
.inline-column-wrapper() when not (@using-ieclasses) {
|
|
letter-spacing: -0.31em;
|
|
*letter-spacing: normal;
|
|
word-spacing: -0.43em;
|
|
}
|
|
|
|
.inline-column-wrapper() when (@using-ieclasses) {
|
|
letter-spacing: -0.31em;
|
|
word-spacing: -0.43em;
|
|
.ie7 & {
|
|
*letter-spacing: normal;
|
|
}
|
|
}
|
|
|
|
|
|
.column() {
|
|
float: left;
|
|
.column-gutter();
|
|
}
|
|
|
|
.column( @span ) when (@span = false) {
|
|
float: left;
|
|
}
|
|
|
|
.column( @span, @total-columns:@total-columns, @end-column:false ) when (isnumber(@span)) and (isnumber(@total-columns)) {
|
|
@showgutter: false;
|
|
.column(@showgutter);
|
|
.span( @span, @total-columns, @end-column );
|
|
}
|
|
|
|
.column( @span, @end-column ) when (isnumber(@span)) and not (isnumber(@end-column)) {
|
|
@showgutter: false;
|
|
.column(@showgutter);
|
|
.span( @span, @end-column );
|
|
}
|
|
|
|
|
|
.inline-column() {
|
|
.inline-block();
|
|
vertical-align: top;
|
|
letter-spacing: normal;
|
|
word-spacing: normal;
|
|
.column-gutter();
|
|
}
|
|
|
|
.inline-column( @span ) when (@span = false) {
|
|
.inline-block();
|
|
vertical-align: top;
|
|
letter-spacing: normal;
|
|
word-spacing: normal;
|
|
}
|
|
|
|
.inline-column( @span, @total-columns:@total-columns, @end-column:false ) when (isnumber(@span)) and (isnumber(@total-columns)) {
|
|
@showgutter: false;
|
|
.inline-column(@showgutter);
|
|
.span( @span, @total-columns, @end-column );
|
|
}
|
|
|
|
.inline-column( @span, @end-column ) when not (isnumber(@end-column)) {
|
|
@showgutter: false;
|
|
.inline-column(@showgutter);
|
|
.span( @span, @end-column );
|
|
}
|
|
|
|
|
|
.end-column() {
|
|
margin-right: 0;
|
|
float: right;
|
|
}
|
|
|
|
.inline-end-column() {
|
|
margin-right: 0;
|
|
}
|
|
|
|
|
|
.span( @span ) {
|
|
.column-width(@span, @total-columns);
|
|
}
|
|
|
|
.span( @span, @total-columns, @end-column:false ) when (isnumber(@total-columns)) {
|
|
.column-width(@span, @total-columns);
|
|
.column-gutter(@total-columns, @end-column);
|
|
}
|
|
|
|
.span( @span, @end-column ) when not (isnumber(@end-column)) {
|
|
.column-width(@span, @total-columns);
|
|
}
|
|
|
|
|
|
.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;
|
|
}
|
|
|
|
.column-gutter(@total-columns:@total-columns, @end-column:false) when (@end-column) {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.column-gutter(@total-columns:@total-columns, @end-column:false) when not (@end-column) {
|
|
@calc-gutter-width: 100%*(@gutter-width/@grid-width);
|
|
margin-right: @calc-gutter-width;
|
|
}
|
|
|
|
|