You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

94 lines
2.3 KiB

// MIXINS
// --------------------------------------------------
%tab-focus {
// Default
outline: thin dotted #333;
// Webkit
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
// Typography
// --------------------------------------------------
/* Vertical Rhythm
https://github.com/sturobson/Sassifaction
In this mixin you can specify the font size in PX and
it will calculate the REM based on your $doc-font-size
& $doc-line-height variables.
@include font-size(24);
It will also create a bottom margin based on the
$doc-font-size & $doc-line-height variables unless you
specify that it shouldn't have one.
@include font-size(24, no);
Or if you want to specify a different bottom margin to
be generated.
@include font-size(24,32);
This mixin also generates a pixel-less line height by
default unless you specify that you either don't want
one where I'd suggest declaring 1 within the mixin.
@include font-size(24, yes, 1);
There's also the option to specify a different line-height
for it to generate to, where you would specify the
line-height in (effectively) it's pixel value.
@include font-size(24, yes, 40);
*/
@mixin font-size($size, $margin: yes, $line-height: $doc-line-height) {
// generates the font-size in REMs with a PX fallback
font-size: 0px + $size;
font-size: 0rem + $size / $doc-font-size;
// line-height functions
////////////////////////
// if you a line-height is specified in the mixin
@if $line-height != $doc-line-height and $line-height != 1 {
line-height: ceil($size / $line-height) * ($line-height / $size);
}
// if $line-height == 1
// because, typing 1 is quicker than 16
@else if $line-height == 1 {
line-height: 1;
}
// normal $line-height
// if the line-height is left.
@else {
line-height: ceil($size / $doc-line-height) * ($doc-line-height / $size);
}
// margin-bottom functions
//////////////////////////
// if no is bottom margin is required
@if $margin == no {
margin-bottom: 0;
}
// if a specific bottom margin is required
@else if $margin != yes and $margin != no {
margin-bottom: 0px + $margin;
margin-bottom: 0rem + ($margin / $doc-font-size);
}
// if you're keeping the vertical rhythm with the margin
@else {
margin-bottom: 0px + $doc-line-height;
margin-bottom: 0rem + ($doc-line-height / $doc-font-size);
}
}