File: D:/HostingSpaces/SBogers10/umans.komma.pro/wwwroot/packages/komma/kms/css/functions/_gridlover.sass
// Scale factor constants.
// Don't change them ever!
$MINOR_SECOND: 1.067
$MAJOR_SECOND: 1.125
$MINOR_THIRD: 1.2
$MAJOR_THIRD: 1.25
$PERFECT_FOURTH: 1.333
$AUGMENTED_FOURTH: 1.414
$PERFECT_FIFTH: 1.5
$MINOR_SIXTH: 1.6
$GOLDEN_SECTION: 1.618
$MAJOR_SIXTH: 1.667
$MINOR_SEVENTH: 1.778
$MAJOR_SEVENTH: 1.875
$OCTAVE: 2
$MAJOR_TENTH: 2.5
$MAJOR_ELEVENTH: 2.667
$MAJOR_TWELFTH: 3
$DOUBLE_OCTAVE: 4
// Default font size.
// Don't change it ever!
$SGL_DEFAULT_FONT_SIZE: 16
$sgl-base-font-size: strip-units($font-size-base) !default
$sgl-base-line-height: strip-units($line-height-base) !default
$sgl-scale-factor: $PERFECT_FOURTH !default
// @function exponent() taken from Sassy-math https://github.com/Team-Sass/Sassy-math.
@function exponent($base, $exponent)
// Resets value.
$value: $base
// Positive intergers get multiplied.
@if $exponent > 1
@for $i from 2 through $exponent
$value: $value * $base
// Negatives intergers get divided. A number divided by itself is 1.
@if $exponent < 1
@for $i from 0 through -$exponent
$value: $value / $base
// Return the last value written.
@return $value
// All the gridlover-xxx mixins are based on the Gridlover app http://www.gridlover.net/app/
/**
* To use in the `<body>`.
*
* Outputs `font-size` and `line-height`.
*
* @param {number} $font-size ($sgl-base-font-size) - Base font size
* @param {Boolean} $rem (false) - Outputs rem units if `true`
*
* @example scss
* body {
* @include gridlover-body($sgl-base-font-size, true);
* }
* @example css
* body {
* font-size: 18px;
* line-height: 22px;
* font-size: 1.125rem;
* line-height: 1.375rem;
* }
*/
@mixin gridlover-body($font-size: $sgl-base-font-size, $rem: false)
font-size: $font-size * 1px
line-height: round(($font-size * $sgl-base-line-height)) * 1px
@if($rem == true)
font-size: ($font-size / $SGL_DEFAULT_FONT_SIZE) * 1rem
line-height: round(($font-size * $sgl-base-line-height)) / $SGL_DEFAULT_FONT_SIZE * 1rem
/**
* To use in headings `<h1> - <h4>`.
*
* Outputs `font-size`, `line-height`, `margin-bottom` and `margin-top`.
*
* @param {number} $step -
* `<h1>` → `$step: 3`
*
* `<h2>` → `$step: 2`
*
* `<h3>` → `$step: 1`
*
* `<h4>` → `$step: 0`
*
* @param {Boolean} $rem (false) - Outputs rem units if `true`
*
* @example scss
* h1 {
* @include gridlover-heading(3, true);
* }
* h2 {
* @include gridlover-heading(2, true);
* }
* h3 {
* @include gridlover-heading(1, true);
* }
* h4 {
* @include gridlover-heading(0, true);
* }
* @example css
* h1 {
* font-size: 76px;
* line-height: 88px;
* margin-bottom: 22px;
* margin-top: 44px;
* font-size: 4.75rem;
* line-height: 5.5rem;
* margin-bottom: 1.375rem;
* margin-top: 2.75rem;
* }
*
* h2 {
* font-size: 47px;
* line-height: 66px;
* margin-bottom: 22px;
* margin-top: 44px;
* font-size: 2.9375rem;
* line-height: 4.125rem;
* margin-bottom: 1.375rem;
* margin-top: 2.75rem;
* }
*
* h3 {
* font-size: 29px;
* line-height: 44px;
* margin-bottom: 22px;
* margin-top: 22px;
* font-size: 1.8125rem;
* line-height: 2.75rem;
* margin-bottom: 1.375rem;
* margin-top: 1.375rem;
* }
*
* h4 {
* font-size: 18px;
* line-height: 22px;
* margin-bottom: 22px;
* margin-top: 22px;
* font-size: 1.125rem;
* line-height: 1.375rem;
* margin-bottom: 1.375rem;
* margin-top: 1.375rem;
* }
*/
@mixin gridlover-heading($step, $rem: false)
$font-size: $sgl-base-font-size
$scale: $sgl-scale-factor
$computed-font-size: round($font-size * exponent($scale, $step))
$line-height: round($font-size * $sgl-base-line-height)
$lines: ceil($computed-font-size / $line-height)
font-size: $computed-font-size * 1px
line-height: $line-height * $lines * 1px
margin-bottom: $line-height * 1px
@if ($step > 1)
margin-top: $line-height * 2 * 1px
@else
margin-top: $line-height * 1px
@if ($rem == true)
font-size: $computed-font-size / $SGL_DEFAULT_FONT_SIZE * 1rem
line-height: ($line-height * $lines) / $SGL_DEFAULT_FONT_SIZE * 1rem
margin-bottom: $line-height / $SGL_DEFAULT_FONT_SIZE * 1rem
@if ($step > 1)
margin-top: ($line-height * 2) / $SGL_DEFAULT_FONT_SIZE * 1rem
@else
margin-top: $line-height / $SGL_DEFAULT_FONT_SIZE * 1rem
/**
* To use in `<p>`, `<ul>`, `<ol>`, `<pre>`, `<table>`, `<blockquote>`, etc.
*
* Outputs `margin-bottom` and `margin-top`.
*
* @param {Boolean} $rem (false) - Outputs rem units if `true`
*
* @example scss
* p, ul, ol, pre, table, blockquote {
* @include sassy-gridlover-margins(true);
* }
* @example css
* p, ul, ol, pre, table, blockquote {
* margin-bottom: 22px;
* margin-top: 22px;
* margin-bottom: 1.375rem;
* margin-top: 1.375rem;
* }
*/
@mixin gridlover-margins($rem: false)
margin-bottom: round($sgl-base-font-size * $sgl-base-line-height) * 1px
margin-top: round($sgl-base-font-size * $sgl-base-line-height) * 1px
@if($rem == true)
margin-bottom: round($sgl-base-font-size * $sgl-base-line-height) / $SGL_DEFAULT_FONT_SIZE * 1rem
margin-top: round($sgl-base-font-size * $sgl-base-line-height) / $SGL_DEFAULT_FONT_SIZE * 1rem