diff options
Diffstat (limited to 'src/_harmony.scss')
-rw-r--r-- | src/_harmony.scss | 24 |
1 files changed, 13 insertions, 11 deletions
diff --git a/src/_harmony.scss b/src/_harmony.scss index 076fe55..839036c 100644 --- a/src/_harmony.scss +++ b/src/_harmony.scss | |||
@@ -9,6 +9,8 @@ | |||
9 | //// | 9 | //// |
10 | 10 | ||
11 | @use 'sass:math'; | 11 | @use 'sass:math'; |
12 | @use './functions'; | ||
13 | @use './responsive'; | ||
12 | 14 | ||
13 | /// | 15 | /// |
14 | /// Adjust a value to a modular scale. | 16 | /// Adjust a value to a modular scale. |
@@ -23,7 +25,7 @@ | |||
23 | /// | 25 | /// |
24 | /// @return {number} | 26 | /// @return {number} |
25 | /// | 27 | /// |
26 | @function iro-harmony-modular-scale($times, $base, $ratio) { | 28 | @function modular-scale($times, $base, $ratio) { |
27 | @if type-of($base) == number { | 29 | @if type-of($base) == number { |
28 | @return $base * math.pow($ratio, $times); | 30 | @return $base * math.pow($ratio, $times); |
29 | } | 31 | } |
@@ -31,7 +33,7 @@ | |||
31 | $main-base: nth($base, 1); | 33 | $main-base: nth($base, 1); |
32 | $norm-bases: (); | 34 | $norm-bases: (); |
33 | 35 | ||
34 | @each $b in iro-list-slice($base, 2) { | 36 | @each $b in functions.list-slice($base, 2) { |
35 | @if $b > $main-base { | 37 | @if $b > $main-base { |
36 | @while $b > $main-base { | 38 | @while $b > $main-base { |
37 | $b: math.div($b, $ratio); | 39 | $b: math.div($b, $ratio); |
@@ -47,7 +49,7 @@ | |||
47 | } | 49 | } |
48 | 50 | ||
49 | $all-bases: append($norm-bases, $main-base); | 51 | $all-bases: append($norm-bases, $main-base); |
50 | $all-bases: iro-quicksort($all-bases); | 52 | $all-bases: functions.quicksort($all-bases); |
51 | 53 | ||
52 | $base-index: $times % length($all-bases) + 1; | 54 | $base-index: $times % length($all-bases) + 1; |
53 | $exp: math.floor(math.div($times, length($all-bases))); | 55 | $exp: math.floor(math.div($times, length($all-bases))); |
@@ -59,11 +61,11 @@ | |||
59 | /// Combine responsive properties with modular scales to achieve responsive modular scales. | 61 | /// Combine responsive properties with modular scales to achieve responsive modular scales. |
60 | /// | 62 | /// |
61 | /// @param {string | list} $props - Property or list of properties to set | 63 | /// @param {string | list} $props - Property or list of properties to set |
62 | /// @param {number} $times - Number of iterations. See iro-harmony-modular-scale for more information. | 64 | /// @param {number} $times - Number of iterations. See modular-scale for more information. |
63 | /// @param {number} $responsive-map - A map with keys = viewports and values = modular scales | 65 | /// @param {number} $responsive-map - A map with keys = viewports and values = modular scales |
64 | /// @param {bool} $fluid [true] - If enabled, property values will smoothly transition from one viewport to the next | 66 | /// @param {bool} $fluid [true] - If enabled, property values will smoothly transition from one viewport to the next |
65 | /// | 67 | /// |
66 | /// @see {function} iro-harmony-modular-scale | 68 | /// @see {function} modular-scale |
67 | /// | 69 | /// |
68 | /// @example scss - Responsive font sizes between 2 viewports based on modular scales | 70 | /// @example scss - Responsive font sizes between 2 viewports based on modular scales |
69 | /// $ms: ( | 71 | /// $ms: ( |
@@ -72,25 +74,25 @@ | |||
72 | /// ); | 74 | /// ); |
73 | /// | 75 | /// |
74 | /// h1 { | 76 | /// h1 { |
75 | /// @include iro-responsive-modular-scale(font-size, 3, $ms); | 77 | /// @include responsive-modular-scale(font-size, 3, $ms); |
76 | /// } | 78 | /// } |
77 | /// | 79 | /// |
78 | /// h2 { | 80 | /// h2 { |
79 | /// @include iro-responsive-modular-scale(font-size, 2, $ms); | 81 | /// @include responsive-modular-scale(font-size, 2, $ms); |
80 | /// } | 82 | /// } |
81 | /// | 83 | /// |
82 | /// h3 { | 84 | /// h3 { |
83 | /// @include iro-responsive-modular-scale(font-size, 1, $ms); | 85 | /// @include responsive-modular-scale(font-size, 1, $ms); |
84 | /// } | 86 | /// } |
85 | /// | 87 | /// |
86 | @mixin iro-responsive-modular-scale($props, $times, $responsive-map, $fluid: true) { | 88 | @mixin responsive-modular-scale($props, $times, $responsive-map, $fluid: true) { |
87 | $new-map: (); | 89 | $new-map: (); |
88 | 90 | ||
89 | @each $key, $value in $responsive-map { | 91 | @each $key, $value in $responsive-map { |
90 | $new-map: map-merge($new-map, ( | 92 | $new-map: map-merge($new-map, ( |
91 | $key: iro-harmony-modular-scale($times, $value...) | 93 | $key: modular-scale($times, $value...) |
92 | )); | 94 | )); |
93 | } | 95 | } |
94 | 96 | ||
95 | @include iro-responsive-property($props, $new-map, $fluid); | 97 | @include responsive.property($props, $new-map, $fluid); |
96 | } | 98 | } |