tools.mixins.less

///*------------------------------------*\
//    #MIXINS
//\*------------------------------------*/

// inuitcss has a number of default mixins that the framework, and developers
// working with it, can make use of.





// Create a fully formed type style (sizing and vertical rhythm) by passing in a
// single value, e.g.:
//
// .foo {
//     .inuit-font-size(12px);
// }
//
// This will generate a rem-based font-size with its pixel fallback, as well as
// a unitless line-height which will place the element on your baseline, e.g.:
//
// .foo {
//     font-size: 12px;
//     font-size: 0.75rem;
//     line-height: 2;
// }
//
// If you do not want inuitcss to generate you a line-height automatically, you
// simply pass in your own as a second paramater:
//
// .foo {
//     .inuit-font-size(12px, 1.5);
// }
//
// This will yield:
//
// .foo {
//     font-size: 12px;
//     font-size: 0.75rem;
//     line-height: 1.5;
// }
//
// This parameter can be any integer, ‘inherit’, or ‘normal’. If you don’t want
// a line-height at all, pass in a second paramater of ‘none’ or ‘false’:
//
// .foo {
//     .inuit-font-size(12px, none);
// }
//
// This will yield:
//
// .foo {
//     font-size: 12px;
//     font-size: 0.75rem;
// }

.inuit-font-size(@inuit-font-size, @inuit-line-height: auto) {
    font-size: @inuit-font-size;
    font-size: (@inuit-font-size / @inuit-base-font-size) * 1rem;
}

.inuit-font-size(@inuit-font-size, @inuit-line-height: auto) when (@inuit-line-height = auto) {
    line-height: unit(ceil(@inuit-font-size / @inuit-base-line-height) * (@inuit-base-line-height / @inuit-font-size));
}

.inuit-font-size(@inuit-font-size, @inuit-line-height: auto) when not (@inuit-line-height = auto) and (isnumber(@inuit-line-height)), (@inuit-line-height = inherit), (@inuit-line-height = normal) {
    line-height: @inuit-line-height;
}