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

package/README.md

@@ -1,18 +1,18 @@
-
-# SCSS Foundation
-
-## Installation
-
-```
-$ npm install --save-dev @enigmatry/scss-foundation
-```
-
-## What's included
-
-- [Utilities](../scss-foundation/docs/modules/README.md)
-
-- [Helper Classes](../scss-foundation/docs/partials/README.md)
-
-## License
-
-Apache-2 © Enigmatry
+
+# SCSS Foundation
+
+## Installation
+
+```
+$ npm install --save-dev @enigmatry/scss-foundation
+```
+
+## What's included
+
+- [Utilities](../scss-foundation/docs/modules/README.md)
+
+- [Helper Classes](../scss-foundation/docs/partials/README.md)
+
+## License
+
+Apache-2 © Enigmatry

package/coverage/clover.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<coverage generated="1715686128220" clover="3.2.0">
-  <project timestamp="1715686128220" name="All files">
+<coverage generated="1715779891203" clover="3.2.0">
+  <project timestamp="1715779891204" name="All files">
     <metrics statements="0" coveredstatements="0" conditionals="0" coveredconditionals="0" methods="0" coveredmethods="0" elements="0" coveredelements="0" complexity="0" loc="0" ncloc="0" packages="0" files="0" classes="0"/>
   </project>
 </coverage>

package/coverage/lcov-report/index.html

@@ -86,7 +86,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-05-14T11:28:48.212Z
+                at 2024-05-15T13:31:31.200Z
             </div>
         <script src="prettify.js"></script>
         <script>

package/docs/modules/README.md

@@ -1,19 +1,19 @@
-# Utilities
-
-## How to use it
-
-Utilities are nothing more than just sass mixins that won't be included in your code base unless you @use individual files of this library and @include them.
-
-## What's included
-
-- [Flexible Grid System](./grid.md)
-- [Encapsulated logic regarding Breakpoints / Media queries](./breakpoints.md)
-- [(Flex) Alignment utilities](./alignment.md)
-- [Background Hover utilities](./background-hover.md)
-- [Absolute Positioning utilities](./absolute-positioning.md)
-- [Fixed Positioning utilities](./fixed-positioning.md)
-- [Text Modification utilities](./text-modification.md)
-- [Text Hover utilities](./text-hover.md)
-- [Border Radius utilities](./border-radius.md)
-- [Row Coloring utilities](./row-coloring.md)
-- [Visibility utilities](./visibility.md)
+# Utilities
+
+## How to use it
+
+Utilities are nothing more than just sass mixins that won't be included in your code base unless you @use individual files of this library and @include them.
+
+## What's included
+
+- [Flexible Grid System](./grid.md)
+- [Encapsulated logic regarding Breakpoints / Media queries](./breakpoints.md)
+- [(Flex) Alignment utilities](./alignment.md)
+- [Background Hover utilities](./background-hover.md)
+- [Absolute Positioning utilities](./absolute-positioning.md)
+- [Fixed Positioning utilities](./fixed-positioning.md)
+- [Text Modification utilities](./text-modification.md)
+- [Text Hover utilities](./text-hover.md)
+- [Border Radius utilities](./border-radius.md)
+- [Row Coloring utilities](./row-coloring.md)
+- [Visibility utilities](./visibility.md)

package/docs/modules/absolute-positioning.md

@@ -1,28 +1,28 @@
-# Absolute positioning methods
-
-Alignment utilities for absolute positioning of content.
-
-## Absolute
-
-@use scss-foundation/src/modules/position/absolute;
-
-- Replaces the several most common lines in absolute positioning with just one liner.
-
-```
-@include absolute.position($top, $right, $bottom, $left);
-```
-All arguments are optional and default to 0. Sets the following properties:
-```
-	position: absolute;
-	top: $top;
-	right: $right;
-	bottom: $bottom;
-	left: $left;
-```
-
-- Replaces the several most common lines in absolute positioning for unset values with just one liner.
-
-```
-@include absolute.position-unset($top, $right, $bottom, $left);
-```
-All arguments are optional and default to unset. Sets the same properties as in the previous method.
+# Absolute positioning methods
+
+Alignment utilities for absolute positioning of content.
+
+## Absolute
+
+@use scss-foundation/src/modules/position/absolute;
+
+- Replaces the several most common lines in absolute positioning with just one liner.
+
+```
+@include absolute.position($top, $right, $bottom, $left);
+```
+All arguments are optional and default to 0. Sets the following properties:
+```
+	position: absolute;
+	top: $top;
+	right: $right;
+	bottom: $bottom;
+	left: $left;
+```
+
+- Replaces the several most common lines in absolute positioning for unset values with just one liner.
+
+```
+@include absolute.position-unset($top, $right, $bottom, $left);
+```
+All arguments are optional and default to unset. Sets the same properties as in the previous method.

package/docs/modules/alignment.md

@@ -1,45 +1,45 @@
-# Alignment methods
-
-Alignment utilities for positioning items using flex.
-
-## Items
-
-@use scss-foundation/src/modules/display/items;
-
-- Center alignment. Wrapper method for following flex settings: flex direction row, justify content on flex start and
-align items centrally.
-
-```
-@include items.align-center();
-```
-
-- Configurable alignment. Everything is same as for the previous method, but align items property is configurable.
-
-```
-@include items.align($align);
-```
-
-- Horizontal and vertical central alignment. Wrapper method for following flex settings: flex direction row, justify content centrally and align items centrally.
-
-```
-@include items.align-absolute-center();
-```
-
-- Alignment utility. Replaces several line of CSS with just one liner.
-
-```
-@include items.fully-align($align, $justify, $direction, $wrap);
-```
-
-Optional arguments and their default values:
-$justify: flex-start, $direction: row, $wrap: wrap
-Sets the following properties:
-```
-	display: flex;
-	flex: {
-		direction: $direction;
-		wrap: $wrap;
-	};
-	align-items: $align;
-	justify-content: $justify;
-```
+# Alignment methods
+
+Alignment utilities for positioning items using flex.
+
+## Items
+
+@use scss-foundation/src/modules/display/items;
+
+- Center alignment. Wrapper method for following flex settings: flex direction row, justify content on flex start and
+align items centrally.
+
+```
+@include items.align-center();
+```
+
+- Configurable alignment. Everything is same as for the previous method, but align items property is configurable.
+
+```
+@include items.align($align);
+```
+
+- Horizontal and vertical central alignment. Wrapper method for following flex settings: flex direction row, justify content centrally and align items centrally.
+
+```
+@include items.align-absolute-center();
+```
+
+- Alignment utility. Replaces several line of CSS with just one liner.
+
+```
+@include items.fully-align($align, $justify, $direction, $wrap);
+```
+
+Optional arguments and their default values:
+$justify: flex-start, $direction: row, $wrap: wrap
+Sets the following properties:
+```
+	display: flex;
+	flex: {
+		direction: $direction;
+		wrap: $wrap;
+	};
+	align-items: $align;
+	justify-content: $justify;
+```

package/docs/modules/background-hover.md

@@ -1,18 +1,18 @@
-# Background hover method
-
-Hover utilities for easy definition of regular and hover background states.
-
-## Background hover
-
-@use scss-foundation/src/modules/states/hover;
-
-- Background hover. Method for setting the background color of any element for the regular state, and when the element is hovered over, it changes the color to the specified hover state.
-
-```
-@include hover.background-hover($regular-state, $hover-state);
-```
-Sets the properties for both regular and hover states:
-```
-	background-color: $regular-state;
-    background-color: $hover-state;
-```
+# Background hover method
+
+Hover utilities for easy definition of regular and hover background states.
+
+## Background hover
+
+@use scss-foundation/src/modules/states/hover;
+
+- Background hover. Method for setting the background color of any element for the regular state, and when the element is hovered over, it changes the color to the specified hover state.
+
+```
+@include hover.background-hover($regular-state, $hover-state);
+```
+Sets the properties for both regular and hover states:
+```
+	background-color: $regular-state;
+    background-color: $hover-state;
+```

package/docs/modules/border-radius.md

@@ -1,20 +1,20 @@
-# Border-radius method
-
-Border radius utility for setting different border radius values for each corner of an element.
-
-## Border Radius
-
-@use scss-foundation/src/modules/borders/border-radius;
-
-- Replaces the several most common lines in border radius with just one liner.
-
-```
-@include border-radius.partial-border-radius($top-left, $top-right, $bottom-right, $bottom-left);
-```
-All arguments are optional and default to 0. Sets the following properties:
-```
-	top-left-radius: $top-left;
-	top-right-radius: $top-right;
-	bottom-right-radius: $bottom-right;
-	bottom-left-radius: $bottom-left;
+# Border-radius method
+
+Border radius utility for setting different border radius values for each corner of an element.
+
+## Border Radius
+
+@use scss-foundation/src/modules/borders/border-radius;
+
+- Replaces the several most common lines in border radius with just one liner.
+
+```
+@include border-radius.partial-border-radius($top-left, $top-right, $bottom-right, $bottom-left);
+```
+All arguments are optional and default to 0. Sets the following properties:
+```
+	top-left-radius: $top-left;
+	top-right-radius: $top-right;
+	bottom-right-radius: $bottom-right;
+	bottom-left-radius: $bottom-left;
 ```

package/docs/modules/breakpoints.md

@@ -1,27 +1,27 @@
-# Breakpoints methods
-
-Utilities related to the application's breakpoints.
-
-## Breakpoints
-
-This module has an overridable breakpoints variable. Due to Sass limitations, there should be only one (wrapper) @use/@forward of this utility in your application in order to prevent side effects and to have easier work.
-Breakpoints must be in the same format as variables inside the src root folder.
-
-Usage:
-@use scss-foundation/src/modules/responsiveness/breakpoints;
-
-- Applies desired styles and properties starting from a certain breakpoint given by its key. The key must be a valid key from
-the given (or default) breakpoint collection.
-
-```
-@include breakpoints.apply-on($given-size);
-```
-
-- Sets up breakpoints in a way so you can pass them to the JS from HTML. This is needed so you could have them defined
-only in SCSS after which you can apply some logic in JS based on that, but with only one spot for future maintenance.
-
-```
-@include breakpoints.set-up($with-capitalization);
-```
-Mixin defines the set of properties that must be added to a certain HTML container, ideally the root one. Whatever the width of the display device is, the content property of it is gonna hold a descriptive name for it and you can process that kind of enum insided JS and apply some logic.
-$with-capitalization argument is optional (default = true), since we're mostly using TypeScript + Angular Material which enforces capitalization.
+# Breakpoints methods
+
+Utilities related to the application's breakpoints.
+
+## Breakpoints
+
+This module has an overridable breakpoints variable. Due to Sass limitations, there should be only one (wrapper) @use/@forward of this utility in your application in order to prevent side effects and to have easier work.
+Breakpoints must be in the same format as variables inside the src root folder.
+
+Usage:
+@use scss-foundation/src/modules/responsiveness/breakpoints;
+
+- Applies desired styles and properties starting from a certain breakpoint given by its key. The key must be a valid key from
+the given (or default) breakpoint collection.
+
+```
+@include breakpoints.apply-on($given-size);
+```
+
+- Sets up breakpoints in a way so you can pass them to the JS from HTML. This is needed so you could have them defined
+only in SCSS after which you can apply some logic in JS based on that, but with only one spot for future maintenance.
+
+```
+@include breakpoints.set-up($with-capitalization);
+```
+Mixin defines the set of properties that must be added to a certain HTML container, ideally the root one. Whatever the width of the display device is, the content property of it is gonna hold a descriptive name for it and you can process that kind of enum insided JS and apply some logic.
+$with-capitalization argument is optional (default = true), since we're mostly using TypeScript + Angular Material which enforces capitalization.

package/docs/modules/fixed-positioning.md

@@ -1,28 +1,28 @@
-# Fixed positioning methods
-
-Alignment utilities for fixed positioning of content.
-
-## Fixed
-
-@use scss-foundation/src/modules/position/fixed;
-
-- Replaces the several most common lines in fixed positioning with just one liner.
-
-```
-@include fixed.position($top, $right, $bottom, $left);
-```
-All arguments are optional and default to 0. Sets the following properties:
-```
-	position: fixed;
-	top: $top;
-	right: $right;
-	bottom: $bottom;
-	left: $left;
-```
-
-- Replaces the several most common lines in fixed positioning for unset values with just one liner.
-
-```
-@include fixed.position-unset($top, $right, $bottom, $left);
-```
-All arguments are optional and default to unset. Sets the same properties as in the previous method.
+# Fixed positioning methods
+
+Alignment utilities for fixed positioning of content.
+
+## Fixed
+
+@use scss-foundation/src/modules/position/fixed;
+
+- Replaces the several most common lines in fixed positioning with just one liner.
+
+```
+@include fixed.position($top, $right, $bottom, $left);
+```
+All arguments are optional and default to 0. Sets the following properties:
+```
+	position: fixed;
+	top: $top;
+	right: $right;
+	bottom: $bottom;
+	left: $left;
+```
+
+- Replaces the several most common lines in fixed positioning for unset values with just one liner.
+
+```
+@include fixed.position-unset($top, $right, $bottom, $left);
+```
+All arguments are optional and default to unset. Sets the same properties as in the previous method.

package/docs/modules/grid.md

@@ -1,46 +1,46 @@
-
-# Grid methods
-
-Grid heavily depends on breakpoints utilities since there's not much sense in making a grid without them. On the other hand, on rare occasions, if you just need row styles with auto width, independent core grid utilities might be just enough. In the majority of cases, this utility is already the part of full grid so there's no need to use it manually.
-
-## Grid
-
-This module has an overridable breakpoints variable. Due to Sass limitations, there should be only one (wrapper) @use/@forward of this utility in your application in order to prevent side effects and to have easier work.
-Breakpoints must be in the same format as variables inside the src root folder.
-
-@use scss-foundation/src/layout/grid;
-
-- Full grid generation. It generates everything from the core grid plus all column/offset classes using syntax from Bootstrap
-5, classes like col-sm-4, offset-md-10.
-
-```
-@include grid.generate(); // or @include grid.generate($divisions);
-```
-The default grid (as in Bootstrap) has 12 columns, but you can change that by passing a positive number parameter (between 2 and 1000).
-
-## Grid core
-
-@use scss-foundation/src/layout/grid-core as grid;
-
- -  Core generation creates styles for rows and auto width of the content. You must pass prefixes for column and offset class
- names.
-
-```
-@include grid.generate($column-prefix, $offset-prefix);
-```
-
-- Reverse row generation. Integrated into the full grid, but this can be also added independently if needed in your application.
-
-```
-@include grid.generate-reverse-row($breakpoints);
-```
-Breakpoints are required parameter. Expected format of breakpoints is a map/dictionary with keys being unique and something descriptive to you (i.e. mobile) and value being an object defined with size (in pixels) and string description that will be seen in CSS output (i.e. sm).
-In other words:
-    **mobile: ( size: 576px, description: 'sm' )**
-For more details, please check the format of the breakpoint variable inside the src root folder.
-
-This method generates classes which helps you reverse order in row; i.e. if row had divs A, B, C and you apply reverse row class, the order will be C, B, A. There are two options:
-
-1) .reverse-row-DESIRED_BREAKPOINT_DESCRIPTION
-2) .reverse-dow-under-DESIRED_BREAKPOINT_DESCRIPTION
-The first one helps you to reverse order starting from a given breakpoint (DESIRED_BREAKPOINT_DESCRIPTION might be sm, md, xxl, depending on what you pass as a breakpoint description). The second one helps you to reverse order on all widths under certain breakpoint.
+
+# Grid methods
+
+Grid heavily depends on breakpoints utilities since there's not much sense in making a grid without them. On the other hand, on rare occasions, if you just need row styles with auto width, independent core grid utilities might be just enough. In the majority of cases, this utility is already the part of full grid so there's no need to use it manually.
+
+## Grid
+
+This module has an overridable breakpoints variable. Due to Sass limitations, there should be only one (wrapper) @use/@forward of this utility in your application in order to prevent side effects and to have easier work.
+Breakpoints must be in the same format as variables inside the src root folder.
+
+@use scss-foundation/src/layout/grid;
+
+- Full grid generation. It generates everything from the core grid plus all column/offset classes using syntax from Bootstrap
+5, classes like col-sm-4, offset-md-10.
+
+```
+@include grid.generate(); // or @include grid.generate($divisions);
+```
+The default grid (as in Bootstrap) has 12 columns, but you can change that by passing a positive number parameter (between 2 and 1000).
+
+## Grid core
+
+@use scss-foundation/src/layout/grid-core as grid;
+
+ -  Core generation creates styles for rows and auto width of the content. You must pass prefixes for column and offset class
+ names.
+
+```
+@include grid.generate($column-prefix, $offset-prefix);
+```
+
+- Reverse row generation. Integrated into the full grid, but this can be also added independently if needed in your application.
+
+```
+@include grid.generate-reverse-row($breakpoints);
+```
+Breakpoints are required parameter. Expected format of breakpoints is a map/dictionary with keys being unique and something descriptive to you (i.e. mobile) and value being an object defined with size (in pixels) and string description that will be seen in CSS output (i.e. sm).
+In other words:
+    **mobile: ( size: 576px, description: 'sm' )**
+For more details, please check the format of the breakpoint variable inside the src root folder.
+
+This method generates classes which helps you reverse order in row; i.e. if row had divs A, B, C and you apply reverse row class, the order will be C, B, A. There are two options:
+
+1) .reverse-row-DESIRED_BREAKPOINT_DESCRIPTION
+2) .reverse-dow-under-DESIRED_BREAKPOINT_DESCRIPTION
+The first one helps you to reverse order starting from a given breakpoint (DESIRED_BREAKPOINT_DESCRIPTION might be sm, md, xxl, depending on what you pass as a breakpoint description). The second one helps you to reverse order on all widths under certain breakpoint.

package/docs/modules/row-coloring.md

@@ -1,24 +1,24 @@
-# Row coloring methods
-
-Row coloring utilities for the background color to rows based on their position.
-
-## Row coloring
-
-@use scss-foundation/src/modules/lists/row-coloring as list;
-
-- Odd row coloring. Method for easily applying specified background color to odd-numbered rows.
-
-```
-@include list.odd-row-coloring($color);
-```
-Sets the following property:
-```
-	background-color: $color;
-```
-
-- Even row coloring. Method for easily applying specified background color to even-numbered rows.
-
-```
-@include list.even-row-coloring($color);
-```
+# Row coloring methods
+
+Row coloring utilities for the background color to rows based on their position.
+
+## Row coloring
+
+@use scss-foundation/src/modules/lists/row-coloring as list;
+
+- Odd row coloring. Method for easily applying specified background color to odd-numbered rows.
+
+```
+@include list.odd-row-coloring($color);
+```
+Sets the following property:
+```
+	background-color: $color;
+```
+
+- Even row coloring. Method for easily applying specified background color to even-numbered rows.
+
+```
+@include list.even-row-coloring($color);
+```
 Sets the same property as in the previous method.

package/docs/modules/text-hover.md

@@ -1,18 +1,18 @@
-# Text hover method
-
-Hover utilities for easy definition of regular and hover font states.
-
-## Text Hover
-
-@use scss-foundation/src/modules/text/hover;
-
-- Font hover. Method for setting the color of the font for the regular state, and when the element is hovered over, it changes the color to the specified hover state.
-
-```
-@include hover.font-hover($regular-state, $hover-state);
-```
-Sets the properties for both regular and hover states:
-```
-	color: $regular-state;
-    color: $hover-state;
-```
+# Text hover method
+
+Hover utilities for easy definition of regular and hover font states.
+
+## Text Hover
+
+@use scss-foundation/src/modules/text/hover;
+
+- Font hover. Method for setting the color of the font for the regular state, and when the element is hovered over, it changes the color to the specified hover state.
+
+```
+@include hover.font-hover($regular-state, $hover-state);
+```
+Sets the properties for both regular and hover states:
+```
+	color: $regular-state;
+    color: $hover-state;
+```