// Start of grid-specific rules @gutter-size-ie: 23px; @gutter-size: 1.4rem; @grid-set: wdn-grid-set; @grid-col-class: wdn-col; // We're not in the future, but someday we will. Hold on until then. //.grid-col-width-cal(@width) { // width: -webkit-calc(@width ~"-" @gutter-size); // width: -moz-calc(@width ~"-" @gutter-size); // width: calc(@width ~"-" @gutter-size); //} .grid-col-width-cal(@width) { width: @width; } // Function to setup the widths for each grid at various breakpoints .grid-setup(@namespace, @namespace-set) { .@{namespace}-full, .@{namespace-set}-full .@{grid-col-class} { .grid-col-width-cal(100%); } // Halves .@{namespace}-one-half, .@{namespace}-two-fourths, .@{namespace}-three-sixths, .@{namespace-set}-halves .@{grid-col-class} { .grid-col-width-cal(percentage(1/2)); } // Thirds .@{namespace}-one-third, .@{namespace}-two-sixths, .@{namespace-set}-thirds .@{grid-col-class} { .grid-col-width-cal(percentage(1/3)); } .@{namespace}-two-thirds, .@{namespace}-four-sixths { .grid-col-width-cal(percentage(2/3)); } // Fourths .@{namespace}-one-fourth, .@{namespace-set}-fourths .@{grid-col-class} { .grid-col-width-cal(percentage(1/4)); } .@{namespace}-three-fourths { .grid-col-width-cal(percentage(3/4)); } // Fifths .@{namespace}-one-fifth, .@{namespace-set}-fifths .@{grid-col-class} { .grid-col-width-cal(percentage(1/5)); } .@{namespace}-two-fifths { .grid-col-width-cal(percentage(2/5)); } .@{namespace}-three-fifths { .grid-col-width-cal(percentage(3/5)); } .@{namespace}-four-fifths { .grid-col-width-cal(percentage(4/5)); } // Sixths .@{namespace}-one-sixth, .@{namespace-set}-sixths .@{grid-col-class} { .grid-col-width-cal(percentage(1/6)); } .@{namespace}-five-sixths { .grid-col-width-cal(percentage(5/6)); } // Sevenths .@{namespace}-one-seventh, .@{namespace-set}-sevenths .@{grid-col-class} { .grid-col-width-cal(percentage(1/7)); } .@{namespace}-two-sevenths { .grid-col-width-cal(percentage(2/7)); } .@{namespace}-three-sevenths { .grid-col-width-cal(percentage(3/7)); } .@{namespace}-four-sevenths { .grid-col-width-cal(percentage(4/7)); } .@{namespace}-five-sevenths { .grid-col-width-cal(percentage(5/7)); } .@{namespace}-six-sevenths { .grid-col-width-cal(percentage(6/7)); } }