@enigmatry/scss-foundation 17.0.0-preview.5.1 → 17.0.0

package/src/modules/layout/_grid-core.scss

@@ -1,54 +1,54 @@
-$breakpoints: () !default;
-@use 'sass:map';
-@use '../../modules/responsiveness/breakpoints' as breakpoints;
-
-@mixin generate($column-prefix, $offset-prefix, $spacing: 0) {
-	.row {
-		display: flex;
-		flex-wrap: wrap;
-
-		@if $spacing != 0 {
-			margin: 0 -#{$spacing};
-		}
-
-		[class*='#{$column-prefix}'], [class*='#{$offset-prefix}'] {
-			box-sizing: border-box;
-			flex-shrink: 0;
-			max-width: 100%;
-			padding: 0 $spacing;
-		}
-	}
-
-	#{'.' + $column-prefix}auto {
-		flex: 0 0 auto;
-		width: auto;
-		padding: 0 $spacing;
-	}
-}
-
-@mixin generate-reverse-row($breakpoints) {
-	$reverse-prefix: '.row.reverse-row-';
-	$under: 'under-';
-
-	@each $item, $value in $breakpoints {
-		$size: map.get($value, description);
-
-		@include breakpoints.apply-on($item) {
-			#{$reverse-prefix + $size} {
-				flex-direction: row-reverse;
-			}
-		}
-	}
-
-	@each $item, $value in $breakpoints {
-		$size: map.get($value, description);
-
-		#{$reverse-prefix + $under + $size} {
-			flex-direction: row-reverse;
-
-			@include breakpoints.apply-on($item) {
-				flex-direction: row;
-			}
-		}
-	}
+$breakpoints: () !default;
+@use 'sass:map';
+@use '../../modules/responsiveness/breakpoints' as breakpoints;
+
+@mixin generate($column-prefix, $offset-prefix, $spacing: 0) {
+	.row {
+		display: flex;
+		flex-wrap: wrap;
+
+		@if $spacing != 0 {
+			margin: 0 -#{$spacing};
+		}
+
+		[class*='#{$column-prefix}'], [class*='#{$offset-prefix}'] {
+			box-sizing: border-box;
+			flex-shrink: 0;
+			max-width: 100%;
+			padding: 0 $spacing;
+		}
+	}
+
+	#{'.' + $column-prefix}auto {
+		flex: 0 0 auto;
+		width: auto;
+		padding: 0 $spacing;
+	}
+}
+
+@mixin generate-reverse-row($breakpoints) {
+	$reverse-prefix: '.row.reverse-row-';
+	$under: 'under-';
+
+	@each $item, $value in $breakpoints {
+		$size: map.get($value, description);
+
+		@include breakpoints.apply-on($item) {
+			#{$reverse-prefix + $size} {
+				flex-direction: row-reverse;
+			}
+		}
+	}
+
+	@each $item, $value in $breakpoints {
+		$size: map.get($value, description);
+
+		#{$reverse-prefix + $under + $size} {
+			flex-direction: row-reverse;
+
+			@include breakpoints.apply-on($item) {
+				flex-direction: row;
+			}
+		}
+	}
 }

package/src/modules/layout/_grid.scss

@@ -1,99 +1,99 @@
-$breakpoints: () !default;
-
-@use 'sass:string';
-@use 'sass:map';
-@use 'sass:math';
-@use 'sass:meta';
-@use 'sass-true';
-@use 'sass-true/sass/throw';
-@use '../../modules/variables' as vars;
-@use 'sass:list';
-@forward '../../modules/responsiveness/breakpoints' with (
-	$breakpoints: $breakpoints
-);
-@use '../../modules/responsiveness/breakpoints';
-@use 'grid-core';
-
-@if list.length($breakpoints) == 0 {
-	$breakpoints: vars.$default-breakpoints;
-}
-
-$column-prefix: 'col-';
-$offset-prefix: 'offset-';
-
-@mixin generate($spacing:0, $divisions: 12) {
-	@if meta.type-of($spacing) != number {
-		@include throw.error(
-			$message: 'Please provide number parameter! Given value: ' + $spacing,
-			$source: 'generate($spacing, $divisions)',
-			$catch: vars.$testing
-		);
-	}
-	@else {
-		@if ((meta.type-of($divisions) != number) or (($divisions < 2) or ($divisions > 1000))) {
-			@include throw.error(
-				$message: 'Please provide positive number for divisions, between 2 and 1000! Given value: ' + $divisions,
-				$source: 'generate($spacing, $divisions)',
-				$catch: vars.$testing
-			);
-		}
-		
-		@else {
-			@include grid-core.generate($column-prefix, $offset-prefix, $spacing);
-			@include grid-core.generate-reverse-row($breakpoints);
-			@include -unresponsive-grid-from($spacing, $divisions);
-			@include -responsive-grid-from($spacing, $divisions);
-		}
-	}
-}
-
-@function -calculate-ratio($counter, $divisions) {
-	@return math.div(100% * $counter, $divisions);
-}
-
-@mixin -unresponsive-grid-from($spacing, $divisions) {
-	$division-limit: $divisions + 1;
-
-	@for $currentIndex from 1 to ($division-limit) {
-		$current-ratio: -calculate-ratio($currentIndex, $divisions);
-
-		#{'.' + $column-prefix + $currentIndex} {
-			flex: 0 0 auto;
-			width: $current-ratio;
-			padding: 0 $spacing;
-		}
-
-		#{'.' + $offset-prefix + $currentIndex} {
-			margin-left: $current-ratio;
-		}
-	}
-}
-
-@mixin -responsive-grid-from($spacing, $divisions) {
-	$division-limit: $divisions + 1;
-	@each $item, $value in $breakpoints {
-		$size: map.get($value, description);
-
-		@include breakpoints.apply-on($item) {
-			#{'.' + $column-prefix + $size}-auto {
-				flex: 0 0 auto;
-				width: auto;
-				padding: 0 $spacing;
-			}
-
-			@for $currentIndex from 1 to $division-limit {
-				$current-ratio: -calculate-ratio($currentIndex, $divisions);
-				$size-index-suffix: $size + '-' + $currentIndex;
-
-				#{'.' + $column-prefix + $size-index-suffix} {
-					flex: 0 0 auto;
-					width: $current-ratio;
-				}
-
-				#{'.' + $offset-prefix + $size-index-suffix} {
-					margin-left: $current-ratio;
-				}
-			}
-		}
-	}
+$breakpoints: () !default;
+
+@use 'sass:string';
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+@use 'sass-true';
+@use 'sass-true/sass/throw';
+@use '../../modules/variables' as vars;
+@use 'sass:list';
+@forward '../../modules/responsiveness/breakpoints' with (
+	$breakpoints: $breakpoints
+);
+@use '../../modules/responsiveness/breakpoints';
+@use 'grid-core';
+
+@if list.length($breakpoints) == 0 {
+	$breakpoints: vars.$default-breakpoints;
+}
+
+$column-prefix: 'col-';
+$offset-prefix: 'offset-';
+
+@mixin generate($spacing:0, $divisions: 12) {
+	@if meta.type-of($spacing) != number {
+		@include throw.error(
+			$message: 'Please provide number parameter! Given value: ' + $spacing,
+			$source: 'generate($spacing, $divisions)',
+			$catch: vars.$testing
+		);
+	}
+	@else {
+		@if ((meta.type-of($divisions) != number) or (($divisions < 2) or ($divisions > 1000))) {
+			@include throw.error(
+				$message: 'Please provide positive number for divisions, between 2 and 1000! Given value: ' + $divisions,
+				$source: 'generate($spacing, $divisions)',
+				$catch: vars.$testing
+			);
+		}
+		
+		@else {
+			@include grid-core.generate($column-prefix, $offset-prefix, $spacing);
+			@include grid-core.generate-reverse-row($breakpoints);
+			@include -unresponsive-grid-from($spacing, $divisions);
+			@include -responsive-grid-from($spacing, $divisions);
+		}
+	}
+}
+
+@function -calculate-ratio($counter, $divisions) {
+	@return math.div(100% * $counter, $divisions);
+}
+
+@mixin -unresponsive-grid-from($spacing, $divisions) {
+	$division-limit: $divisions + 1;
+
+	@for $currentIndex from 1 to ($division-limit) {
+		$current-ratio: -calculate-ratio($currentIndex, $divisions);
+
+		#{'.' + $column-prefix + $currentIndex} {
+			flex: 0 0 auto;
+			width: $current-ratio;
+			padding: 0 $spacing;
+		}
+
+		#{'.' + $offset-prefix + $currentIndex} {
+			margin-left: $current-ratio;
+		}
+	}
+}
+
+@mixin -responsive-grid-from($spacing, $divisions) {
+	$division-limit: $divisions + 1;
+	@each $item, $value in $breakpoints {
+		$size: map.get($value, description);
+
+		@include breakpoints.apply-on($item) {
+			#{'.' + $column-prefix + $size}-auto {
+				flex: 0 0 auto;
+				width: auto;
+				padding: 0 $spacing;
+			}
+
+			@for $currentIndex from 1 to $division-limit {
+				$current-ratio: -calculate-ratio($currentIndex, $divisions);
+				$size-index-suffix: $size + '-' + $currentIndex;
+
+				#{'.' + $column-prefix + $size-index-suffix} {
+					flex: 0 0 auto;
+					width: $current-ratio;
+				}
+
+				#{'.' + $offset-prefix + $size-index-suffix} {
+					margin-left: $current-ratio;
+				}
+			}
+		}
+	}
 }

package/src/modules/layout/_index.scss

@@ -1,2 +1,2 @@
-@use 'grid';
+@use 'grid';
 @use 'grid-core';

package/src/modules/lists/_row-coloring.scss

@@ -1,13 +1,13 @@
-@mixin odd-row-coloring($color) {
-	@include row-coloring($color, odd);
-}
-
-@mixin even-row-coloring($color) {
-	@include row-coloring($color, even);
-}
-
-@mixin row-coloring($color, $rows) {
-	&:nth-child(#{$rows}) {
-		background-color: $color;
-	}
+@mixin odd-row-coloring($color) {
+	@include row-coloring($color, odd);
+}
+
+@mixin even-row-coloring($color) {
+	@include row-coloring($color, even);
+}
+
+@mixin row-coloring($color, $rows) {
+	&:nth-child(#{$rows}) {
+		background-color: $color;
+	}
 }

package/src/modules/position/_absolute.scss

@@ -1,9 +1,9 @@
-@use 'set-position' as set;
-
-@mixin position($top: 0, $right: 0, $bottom: 0, $left: 0) {
-	@include set.set-position(absolute, $top, $right, $bottom, $left);
-}
-
-@mixin position-unset($top: unset, $right: unset, $bottom: unset, $left: unset) {
-	@include set.set-position(absolute, $top, $right, $bottom, $left);
+@use 'set-position' as set;
+
+@mixin position($top: 0, $right: 0, $bottom: 0, $left: 0) {
+	@include set.set-position(absolute, $top, $right, $bottom, $left);
+}
+
+@mixin position-unset($top: unset, $right: unset, $bottom: unset, $left: unset) {
+	@include set.set-position(absolute, $top, $right, $bottom, $left);
 }

package/src/modules/position/_fixed.scss

@@ -1,9 +1,9 @@
-@use 'set-position' as set;
-
-@mixin position($top: 0, $right: 0, $bottom: 0, $left: 0) {
-	@include set.set-position(fixed, $top, $right, $bottom, $left);
-}
-
-@mixin position-unset($top: unset, $right: unset, $bottom: unset, $left: unset) {
-	@include set.set-position(fixed, $top, $right, $bottom, $left);
+@use 'set-position' as set;
+
+@mixin position($top: 0, $right: 0, $bottom: 0, $left: 0) {
+	@include set.set-position(fixed, $top, $right, $bottom, $left);
+}
+
+@mixin position-unset($top: unset, $right: unset, $bottom: unset, $left: unset) {
+	@include set.set-position(fixed, $top, $right, $bottom, $left);
 }

package/src/modules/position/_index.scss

@@ -1,3 +1,3 @@
-@use 'set-position';
-@use 'absolute';
+@use 'set-position';
+@use 'absolute';
 @use 'fixed';

package/src/modules/position/_set-position.scss

@@ -1,25 +1,25 @@
-/* stylelint-disable declaration-block-no-redundant-longhand-properties */
-/* stylelint-disable declaration-empty-line-before */
-@use 'sass:meta';
-
-@mixin set-position($position, $top, $right, $bottom, $left) {
-
-	$positions: (
-		$top,
-		$right,
-		$bottom,
-		$left
-	);
-
-	@each $position in $positions {
-		@if (($position != 'unset') and (meta.type-of($position) != number)) {
-			@error 'Please provide the right parameters for position (number or 'unset')! Given value: ' + $position;
-		}
-	}
-
-	position: $position;
-	top: $top;
-	right: $right;
-	bottom: $bottom;
-	left: $left;
+/* stylelint-disable declaration-block-no-redundant-longhand-properties */
+/* stylelint-disable declaration-empty-line-before */
+@use 'sass:meta';
+
+@mixin set-position($position, $top, $right, $bottom, $left) {
+
+	$positions: (
+		$top,
+		$right,
+		$bottom,
+		$left
+	);
+
+	@each $position in $positions {
+		@if (($position != 'unset') and (meta.type-of($position) != number)) {
+			@error 'Please provide the right parameters for position (number or 'unset')! Given value: ' + $position;
+		}
+	}
+
+	position: $position;
+	top: $top;
+	right: $right;
+	bottom: $bottom;
+	left: $left;
 }

package/src/modules/responsiveness/_breakpoints.scss

@@ -1,56 +1,56 @@
-/* stylelint-disable at-rule-allowed-list */
-$breakpoints: () !default;
-
-@use 'sass:list';
-@use 'sass:string';
-@use 'sass:map';
-@use '../../modules/text/modification' as text-modification;
-@use '../../modules/variables' as variables;
-
-// Had to be done this way due to current limitations of collection initialization in Sass.
-@if list.length($breakpoints) == 0 {
-	$breakpoints: variables.$default-breakpoints;
-}
-
-@function -get-size($size) {
-	@if (map.has-key($breakpoints, $size)) {
-		$gotten-size: map.get($breakpoints, $size);
-		@return map.get($gotten-size, size);
-	}
-
-	@error 'Size must be any of following values: ' + map.keys($breakpoints) + '. Given size: ' + $size;
-}
-
-@function -presentation($string, $with-capitalization) {
-	@if $with-capitalization == true {
-		@return text-modification.capitalize($string);
-	}
-
-	@return $string;
-}
-
-@mixin -set-content($breakpoint, $with-capitalization) {
-	content: string.quote(-presentation($breakpoint, $with-capitalization));
-}
-
-@mixin apply-on($given-size) {
-	@media only screen and (width >= -get-size($given-size)) {
-		@content;
-	}
-}
-
-@mixin set-up($with-capitalization: true) {
-	@each $breakpoint, $value in $breakpoints {
-		$currentIndex: list.index($breakpoints, ($breakpoint $value));
-
-		@if $currentIndex == 1 {
-			@include -set-content($breakpoint, $with-capitalization);
-			display: none;
-		}
-		@else {
-			@include apply-on($breakpoint) {
-				@include -set-content($breakpoint, $with-capitalization);
-			}
-		}
-	}
+/* stylelint-disable at-rule-allowed-list */
+$breakpoints: () !default;
+
+@use 'sass:list';
+@use 'sass:string';
+@use 'sass:map';
+@use '../../modules/text/modification' as text-modification;
+@use '../../modules/variables' as variables;
+
+// Had to be done this way due to current limitations of collection initialization in Sass.
+@if list.length($breakpoints) == 0 {
+	$breakpoints: variables.$default-breakpoints;
+}
+
+@function -get-size($size) {
+	@if (map.has-key($breakpoints, $size)) {
+		$gotten-size: map.get($breakpoints, $size);
+		@return map.get($gotten-size, size);
+	}
+
+	@error 'Size must be any of following values: ' + map.keys($breakpoints) + '. Given size: ' + $size;
+}
+
+@function -presentation($string, $with-capitalization) {
+	@if $with-capitalization == true {
+		@return text-modification.capitalize($string);
+	}
+
+	@return $string;
+}
+
+@mixin -set-content($breakpoint, $with-capitalization) {
+	content: string.quote(-presentation($breakpoint, $with-capitalization));
+}
+
+@mixin apply-on($given-size) {
+	@media only screen and (width >= -get-size($given-size)) {
+		@content;
+	}
+}
+
+@mixin set-up($with-capitalization: true) {
+	@each $breakpoint, $value in $breakpoints {
+		$currentIndex: list.index($breakpoints, ($breakpoint $value));
+
+		@if $currentIndex == 1 {
+			@include -set-content($breakpoint, $with-capitalization);
+			display: none;
+		}
+		@else {
+			@include apply-on($breakpoint) {
+				@include -set-content($breakpoint, $with-capitalization);
+			}
+		}
+	}
 }

package/src/modules/states/_hover.scss

@@ -1,7 +1,7 @@
-@mixin background-hover($regular-state, $hover-state) {
-	background-color: $regular-state;
-
-	&:hover, &:hover::before {
-		background-color: $hover-state;
-	}
+@mixin background-hover($regular-state, $hover-state) {
+	background-color: $regular-state;
+
+	&:hover, &:hover::before {
+		background-color: $hover-state;
+	}
 }

package/src/modules/states/_index.scss

@@ -1,2 +1,2 @@
-@use 'hover';
+@use 'hover';
 @use 'visibility';

package/src/modules/states/_visibility.scss

@@ -1,15 +1,15 @@
-@mixin show-on-mobile($mobile-state: block) {
-	@include -toggle-state($mobile-state, none);
-}
-
-@mixin show-on-tablet($tablet-state: block) {
-	@include -toggle-state(none, $tablet-state);
-}
-
-@mixin -toggle-state($mobile-state, $tablet-state) {
-	display: $mobile-state;
-
-	@include breakpoints.apply-on-tablet() {
-		display: $tablet-state;
-	}
-}
+@mixin show-on-mobile($mobile-state: block) {
+	@include -toggle-state($mobile-state, none);
+}
+
+@mixin show-on-tablet($tablet-state: block) {
+	@include -toggle-state(none, $tablet-state);
+}
+
+@mixin -toggle-state($mobile-state, $tablet-state) {
+	display: $mobile-state;
+
+	@include breakpoints.apply-on-tablet() {
+		display: $tablet-state;
+	}
+}

package/src/modules/text/_hover.scss

@@ -1,7 +1,7 @@
-@mixin font-hover($regular-state, $hover-state) {
-	color: $regular-state;
- 
-	&:hover, &:hover::before {
-		color: $hover-state;
-	}
+@mixin font-hover($regular-state, $hover-state) {
+	color: $regular-state;
+ 
+	&:hover, &:hover::before {
+		color: $hover-state;
+	}
 }

package/src/modules/text/_index.scss

@@ -1,2 +1,2 @@
-@use 'modification';
+@use 'modification';
 @use 'hover';

package/src/modules/text/_modification.scss

@@ -1,30 +1,30 @@
-@use 'sass:string';
-@use '../../modules/variables' as vars;
-@use 'sass-true';
-@use 'sass:meta';
-
-@function capitalize($string) {
-	@if meta.type-of($string) != string {
-		@return sass-true.error(
-			$message: 'Please provide string parameter! Given value: ' + $string,
-			$source: 'capitalize()',
-			$catch: vars.$testing
-		);
-	}
-
-	@return string.to-upper-case(string.slice($string, 1, 1)) + string.slice($string, 2);
-}
-
-@mixin ellipsis($num: 1) {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-
-	@if $num > 1 {
-		white-space: unset;
-		/* stylelint-disable-next-line order/properties-order, value-no-vendor-prefix */
-		display: -webkit-box;
-		-webkit-line-clamp: $num;
-		-webkit-box-orient: vertical;
-	}
+@use 'sass:string';
+@use '../../modules/variables' as vars;
+@use 'sass-true';
+@use 'sass:meta';
+
+@function capitalize($string) {
+	@if meta.type-of($string) != string {
+		@return sass-true.error(
+			$message: 'Please provide string parameter! Given value: ' + $string,
+			$source: 'capitalize()',
+			$catch: vars.$testing
+		);
+	}
+
+	@return string.to-upper-case(string.slice($string, 1, 1)) + string.slice($string, 2);
+}
+
+@mixin ellipsis($num: 1) {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+
+	@if $num > 1 {
+		white-space: unset;
+		/* stylelint-disable-next-line order/properties-order, value-no-vendor-prefix */
+		display: -webkit-box;
+		-webkit-line-clamp: $num;
+		-webkit-box-orient: vertical;
+	}
 }