aboutsummaryrefslogtreecommitdiffstats
path: root/src/_harmony.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/_harmony.scss')
-rw-r--r--src/_harmony.scss24
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}