X-Git-Url: https://git.danix.xyz/?a=blobdiff_plain;f=assets%2Fsass%2Fbourbon%2Fbourbon%2Flibrary%2F_modular-scale.scss;fp=assets%2Fsass%2Fbourbon%2Fbourbon%2Flibrary%2F_modular-scale.scss;h=81f2ab9a0cc965f15de6eec19c8bc9002bef39c1;hb=2d3ca553a3d3345ec8ecdf0faedc6924cd0e2f5d;hp=0000000000000000000000000000000000000000;hpb=2ae9d02fd007f6d0bab6576f8f26d66570358605;p=theme-danix.xyz.git diff --git a/assets/sass/bourbon/bourbon/library/_modular-scale.scss b/assets/sass/bourbon/bourbon/library/_modular-scale.scss new file mode 100644 index 0000000..81f2ab9 --- /dev/null +++ b/assets/sass/bourbon/bourbon/library/_modular-scale.scss @@ -0,0 +1,120 @@ +@charset "UTF-8"; + +/// Increments up or down a defined scale and returns an adjusted value. This +/// helps establish consistent measurements and spacial relationships throughout +/// your project. We provide a list of commonly used scales as +/// [pre-defined variables][scales]. +/// +/// [scales]: https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/helpers/_scales.scss +/// +/// @argument {number (unitless)} $increment +/// How many steps to increment up or down the scale. +/// +/// @argument {number (with unit) | list} $value [1em] +/// The base value the scale starts at. Can also be set globally using the +/// `modular-scale-base` key in the Bourbon settings. +/// +/// @argument {number (unitless)} $ratio [1.25] +/// The ratio the scale is built on. Can also be set globally using the +/// `modular-scale-ratio` key in the Bourbon settings. +/// +/// @return {number (with unit)} +/// +/// @example scss +/// .element { +/// font-size: modular-scale(2); +/// } +/// +/// // CSS Output +/// .element { +/// font-size: 1.5625em; +/// } +/// +/// @example scss +/// .element { +/// margin-right: modular-scale(3, 2em); +/// } +/// +/// // CSS Output +/// .element { +/// margin-right: 3.90625em; +/// } +/// +/// @example scss +/// .element { +/// font-size: modular-scale(3, 1em 1.6em, $major-seventh); +/// } +/// +/// // CSS Output +/// .element { +/// font-size: 3em; +/// } +/// +/// @example scss +/// // Globally change the base ratio +/// $bourbon: ( +/// "modular-scale-ratio": 1.2, +/// ); +/// +/// .element { +/// font-size: modular-scale(3); +/// } +/// +/// // CSS Output +/// .element { +/// font-size: 1.728em; +/// } +/// +/// @require {function} _fetch-bourbon-setting + +@function modular-scale( + $increment, + $value: _fetch-bourbon-setting("modular-scale-base"), + $ratio: _fetch-bourbon-setting("modular-scale-ratio") +) { + $v1: nth($value, 1); + $v2: nth($value, length($value)); + $value: $v1; + + // scale $v2 to just above $v1 + @while $v2 > $v1 { + $v2: ($v2 / $ratio); // will be off-by-1 + } + @while $v2 < $v1 { + $v2: ($v2 * $ratio); // will fix off-by-1 + } + + // check AFTER scaling $v2 to prevent double-counting corner-case + $double-stranded: $v2 > $v1; + + @if $increment > 0 { + @for $i from 1 through $increment { + @if $double-stranded and ($v1 * $ratio) > $v2 { + $value: $v2; + $v2: ($v2 * $ratio); + } @else { + $v1: ($v1 * $ratio); + $value: $v1; + } + } + } + + @if $increment < 0 { + // adjust $v2 to just below $v1 + @if $double-stranded { + $v2: ($v2 / $ratio); + } + + @for $i from $increment through -1 { + @if $double-stranded and ($v1 / $ratio) < $v2 { + $value: $v2; + $v2: ($v2 / $ratio); + } @else { + $v1: ($v1 / $ratio); + $value: $v1; + } + } + } + + @return $value; +}