From dd5f3c463fab336d694f426dcad11a1783590fc9 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 5 Feb 2022 07:52:13 +0100 Subject: Ported from import syntax to modules --- src/_responsive.scss | 89 +++++++++++++++++++++++++++------------------------- 1 file changed, 46 insertions(+), 43 deletions(-) (limited to 'src/_responsive.scss') diff --git a/src/_responsive.scss b/src/_responsive.scss index a3d8445..9520dfc 100644 --- a/src/_responsive.scss +++ b/src/_responsive.scss @@ -17,20 +17,23 @@ /// @access public //// +@use './functions'; +@use './contexts'; + /// /// If true, named viewports will be supported if a compatible $breakpoints map exists. /// This is the case for [include-media](https://include-media.com/), for example. /// /// @type bool /// -$iro-responsive-support-named-viewports: true !default; +$support-named-viewports: true !default; /// /// Context ID used for responsive environment-related mixins. /// /// @type string /// -$iro-responsive-context-id: 'responsive' !default; +$context-id: 'responsive' !default; /// /// Scale a property uniformly between a specific set of target viewports / values. @@ -42,7 +45,7 @@ $iro-responsive-context-id: 'responsive' !default; /// /// @example scss - Responsive font-size between 2 viewports /// .something { -/// @include iro-responsive-property(font-size, ( 320px: 20px, 720px: 30px )); +/// @include property(font-size, ( 320px: 20px, 720px: 30px )); /// } /// /// // Generates: @@ -67,7 +70,7 @@ $iro-responsive-context-id: 'responsive' !default; /// /// @example scss - Responsive font-size between 3 viewports /// .something { -/// @include iro-responsive-property(font-size, ( 320px: 20px, 720px: 30px, 1280px: 40px )); +/// @include property(font-size, ( 320px: 20px, 720px: 30px, 1280px: 40px )); /// } /// /// // Generates: @@ -96,21 +99,21 @@ $iro-responsive-context-id: 'responsive' !default; /// } /// } /// -@mixin iro-responsive-property($props, $responsive-map, $fluid: true, $vertical: false) { - @include iro-responsive-env(map-keys($responsive-map), $fluid, $vertical) { +@mixin property($props, $responsive-map, $fluid: true, $vertical: false) { + @include env(map-keys($responsive-map), $fluid, $vertical) { @if type-of($props) == list { @each $prop in $props { - #{$prop}: iro-responsive-set(map-values($responsive-map)); + #{$prop}: set(map-values($responsive-map)); } } @else { - #{$props}: iro-responsive-set(map-values($responsive-map)); + #{$props}: set(map-values($responsive-map)); } } } /// /// Create a new responsive environment by specifying a set of viewports. -/// Inside a responsive environment, use the iro-responsive-set function to make a property scale automatically. +/// Inside a responsive environment, use the set function to make a property scale automatically. /// /// @param {list} $viewports - Viewports sorted in ascending order /// @param {bool} $fluid [true] - If enabled, property values will smoothly transition from one viewport to the next @@ -118,12 +121,12 @@ $iro-responsive-context-id: 'responsive' !default; /// /// @content /// -/// @see {function} iro-responsive-set +/// @see {function} set /// /// @example scss - Responsive font-size between 2 viewports /// .something { -/// @include iro-responsive-env((320px, 720px)) { -/// font-size: iro-responsive-set(20px, 30px); +/// @include env((320px, 720px)) { +/// font-size: set(20px, 30px); /// } /// } /// @@ -147,7 +150,7 @@ $iro-responsive-context-id: 'responsive' !default; /// } /// } /// -@mixin iro-responsive-env($viewports, $fluid: true, $vertical: false) { +@mixin env($viewports, $fluid: true, $vertical: false) { @if length($viewports) <= 1 { @error '$viewports must contain at least two viewports.'; } @@ -155,7 +158,7 @@ $iro-responsive-context-id: 'responsive' !default; $new-viewports: (); @each $viewport in $viewports { - @if $iro-responsive-support-named-viewports and global-variable-exists(breakpoints) { + @if $support-named-viewports and global-variable-exists(breakpoints) { @if map-has-key($breakpoints, $viewport) { $viewport: map-get($breakpoints, $viewport); } @@ -168,7 +171,7 @@ $iro-responsive-context-id: 'responsive' !default; $new-viewports: append($new-viewports, $viewport); } - $viewports: iro-quicksort($new-viewports); + $viewports: functions.quicksort($new-viewports); @if $new-viewports != $viewports { @error '$viewports was not sorted in ascending order.'; @@ -178,7 +181,7 @@ $iro-responsive-context-id: 'responsive' !default; $first-vp: nth($viewports, 1); $last-vp: nth($viewports, length($viewports)); - @include iro-context-push($iro-responsive-context-id, 'env', ( + @include contexts.push($context-id, 'env', ( 'viewports': $viewports, 'mode': set, 'index': 1, @@ -188,7 +191,7 @@ $iro-responsive-context-id: 'responsive' !default; @content; - @include iro-context-pop($iro-responsive-context-id); + @include contexts.pop($context-id); @for $i from 1 to length($viewports) { $prev-vp: nth($viewports, $i); @@ -196,7 +199,7 @@ $iro-responsive-context-id: 'responsive' !default; @if not $vertical { @media (min-width: $prev-vp) and (max-width: $next-vp) { - @include iro-context-push($iro-responsive-context-id, 'env', ( + @include contexts.push($context-id, 'env', ( 'viewports': $viewports, 'mode': transition, 'index': $i, @@ -206,11 +209,11 @@ $iro-responsive-context-id: 'responsive' !default; @content; - @include iro-context-pop($iro-responsive-context-id); + @include contexts.pop($context-id); } } @else { @media (min-height: $prev-vp) and (max-height: $next-vp) { - @include iro-context-push($iro-responsive-context-id, 'env', ( + @include contexts.push($context-id, 'env', ( 'viewports': $viewports, 'mode': transition, 'index': $i, @@ -220,14 +223,14 @@ $iro-responsive-context-id: 'responsive' !default; @content; - @include iro-context-pop($iro-responsive-context-id); + @include contexts.pop($context-id); } } } @if not $vertical { @media (min-width: $last-vp) { - @include iro-context-push($iro-responsive-context-id, 'env', ( + @include contexts.push($context-id, 'env', ( 'viewports': $viewports, 'mode': set, 'index': length($viewports), @@ -237,11 +240,11 @@ $iro-responsive-context-id: 'responsive' !default; @content; - @include iro-context-pop($iro-responsive-context-id); + @include contexts.pop($context-id); } } @else { @media (min-height: $last-vp) { - @include iro-context-push($iro-responsive-context-id, 'env', ( + @include contexts.push($context-id, 'env', ( 'viewports': $viewports, 'mode': set, 'index': length($viewports), @@ -251,11 +254,11 @@ $iro-responsive-context-id: 'responsive' !default; @content; - @include iro-context-pop($iro-responsive-context-id); + @include contexts.pop($context-id); } } } @else { - @include iro-context-push($iro-responsive-context-id, 'env', ( + @include contexts.push($context-id, 'env', ( 'viewports': $viewports, 'mode': set, 'index': 1, @@ -265,14 +268,14 @@ $iro-responsive-context-id: 'responsive' !default; @content; - @include iro-context-pop($iro-responsive-context-id); + @include contexts.pop($context-id); @for $i from 2 through length($viewports) { $vp: nth($viewports, $i); @if not $vertical { @media (min-width: $vp) { - @include iro-context-push($iro-responsive-context-id, 'env', ( + @include contexts.push($context-id, 'env', ( 'viewports': $viewports, 'mode': set, 'index': $i @@ -280,11 +283,11 @@ $iro-responsive-context-id: 'responsive' !default; @content; - @include iro-context-pop($iro-responsive-context-id); + @include contexts.pop($context-id); } } @else { @media (min-height: $vp) { - @include iro-context-push($iro-responsive-context-id, 'env', ( + @include contexts.push($context-id, 'env', ( 'viewports': $viewports, 'mode': set, 'index': $i @@ -292,7 +295,7 @@ $iro-responsive-context-id: 'responsive' !default; @content; - @include iro-context-pop($iro-responsive-context-id); + @include contexts.pop($context-id); } } } @@ -306,10 +309,10 @@ $iro-responsive-context-id: 'responsive' !default; /// /// @return {number|string} /// -@function iro-responsive-set($values, $without-calc: false) { - $noop: iro-context-assert-stack-must-contain($iro-responsive-context-id, 'env'); +@function set($values, $without-calc: false) { + $noop: contexts.assert-stack-must-contain($context-id, 'env'); - $data: nth(iro-context-get($iro-responsive-context-id, 'env'), 2); + $data: nth(contexts.get($context-id, 'env'), 2); $viewports: map-get($data, 'viewports'); $mode: map-get($data, 'mode'); $fluid: map-get($data, 'fluid'); @@ -328,7 +331,7 @@ $iro-responsive-context-id: 'responsive' !default; $prev-value: nth($values, $index); $next-value: nth($values, $index + 1); - @return iro-responsive-fluid-calc($prev-value, $next-value, $prev-vp, $next-vp, $vertical, $without-calc); + @return fluid-calc($prev-value, $next-value, $prev-vp, $next-vp, $vertical, $without-calc); } } @@ -344,7 +347,7 @@ $iro-responsive-context-id: 'responsive' !default; /// /// @access private /// -@function iro-responsive-fluid-calc($min-value, $max-value, $min-viewport, $max-viewport, $vertical: false, $without-calc: false) { +@function fluid-calc($min-value, $max-value, $min-viewport, $max-viewport, $vertical: false, $without-calc: false) { $value-unit: unit($min-value); $max-value-unit: unit($max-value); $viewport-unit: unit($min-viewport); @@ -368,12 +371,12 @@ $iro-responsive-context-id: 'responsive' !default; } @if ($value-unit == rem) and ($viewport-unit == px) { - $min-viewport: iro-px-to-rem($min-viewport); - $max-viewport: iro-px-to-rem($max-viewport); + $min-viewport: functions.px-to-rem($min-viewport); + $max-viewport: functions.px-to-rem($max-viewport); $viewport-unit: rem; } @else if ($value-unit == px) and ($viewport-unit == rem) { - $min-value: iro-px-to-rem($min-value); - $max-value: iro-px-to-rem($max-value); + $min-value: functions.px-to-rem($min-value); + $max-value: functions.px-to-rem($max-value); $value-unit: rem; } @@ -381,8 +384,8 @@ $iro-responsive-context-id: 'responsive' !default; @error 'This combination of units is not supported.'; } - $value-diff: iro-strip-unit($max-value - $min-value); - $viewport-diff: iro-strip-unit($max-viewport - $min-viewport); + $value-diff: functions.strip-unit($max-value - $min-value); + $viewport-diff: functions.strip-unit($max-viewport - $min-viewport); $calc: ''; @@ -403,4 +406,4 @@ $iro-responsive-context-id: 'responsive' !default; } } -@include iro-context-stack-create($iro-responsive-context-id); +@include contexts.create($context-id); -- cgit v1.2.3-70-g09d2