Experiments page.
[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / utils / bourbon / library / _modular-scale.scss
1 @charset "UTF-8";
2
3 /// Increments up or down a defined scale and returns an adjusted value. This
4 /// helps establish consistent measurements and spacial relationships throughout
5 /// your project. We provide a list of commonly used scales as
6 /// [pre-defined variables][scales].
7 ///
8 /// [scales]: https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/settings/_scales.scss
9 ///
10 /// @argument {number (unitless)} $increment
11 ///   How many steps to increment up or down the scale.
12 ///
13 /// @argument {number (with unit) | list} $value [1em]
14 ///   The base value the scale starts at. Can also be set globally using the
15 ///   `modular-scale-base` key in the Bourbon settings.
16 ///
17 /// @argument {number (unitless)} $ratio [1.25]
18 ///   The ratio the scale is built on. Can also be set globally using the
19 ///   `modular-scale-ratio` key in the Bourbon settings.
20 ///
21 /// @return {number (with unit)}
22 ///
23 /// @example scss
24 ///   .element {
25 ///     font-size: modular-scale(2);
26 ///   }
27 ///
28 ///   // CSS Output
29 ///   .element {
30 ///     font-size: 1.5625em;
31 ///   }
32 ///
33 /// @example scss
34 ///   .element {
35 ///     margin-right: modular-scale(3, 2em);
36 ///   }
37 ///
38 ///   // CSS Output
39 ///   .element {
40 ///     margin-right: 3.90625em;
41 ///   }
42 ///
43 /// @example scss
44 ///   .element {
45 ///     font-size: modular-scale(3, 1em 1.6em, $major-seventh);
46 ///   }
47 ///
48 ///   // CSS Output
49 ///   .element {
50 ///     font-size: 3em;
51 ///   }
52 ///
53 /// @example scss
54 ///   // Globally change the base ratio
55 ///   $bourbon: (
56 ///     "modular-scale-ratio": 1.2,
57 ///   );
58 ///
59 ///   .element {
60 ///     font-size: modular-scale(3);
61 ///   }
62 ///
63 ///   // CSS Output
64 ///   .element {
65 ///     font-size: 1.728em;
66 ///   }
67 ///
68 /// @require {function} _fetch-bourbon-setting
69
70 @function modular-scale(
71   $increment,
72   $value: _fetch-bourbon-setting("modular-scale-base"),
73   $ratio: _fetch-bourbon-setting("modular-scale-ratio")
74 ) {
75   $v1: nth($value, 1);
76   $v2: nth($value, length($value));
77   $value: $v1;
78
79   // scale $v2 to just above $v1
80   @while $v2 > $v1 {
81     $v2: ($v2 / $ratio); // will be off-by-1
82   }
83   @while $v2 < $v1 {
84     $v2: ($v2 * $ratio); // will fix off-by-1
85   }
86
87   // check AFTER scaling $v2 to prevent double-counting corner-case
88   $double-stranded: $v2 > $v1;
89
90   @if $increment > 0 {
91     @for $i from 1 through $increment {
92       @if $double-stranded and ($v1 * $ratio) > $v2 {
93         $value: $v2;
94         $v2: ($v2 * $ratio);
95       } @else {
96         $v1: ($v1 * $ratio);
97         $value: $v1;
98       }
99     }
100   }
101
102   @if $increment < 0 {
103     // adjust $v2 to just below $v1
104     @if $double-stranded {
105       $v2: ($v2 / $ratio);
106     }
107
108     @for $i from $increment through -1 {
109       @if $double-stranded and ($v1 / $ratio) < $v2 {
110         $value: $v2;
111         $v2: ($v2 / $ratio);
112       } @else {
113         $v1: ($v1 / $ratio);
114         $value: $v1;
115       }
116     }
117   }
118
119   @return $value;
120 }