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 | } |
