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

package/docs/modules/text-modification.md

@@ -1,27 +1,27 @@
-
-# Text-related methods
-
-From time to time we need to prettify and alter some text in HTML. The following methods help us with that.
-
-## Text Modification
-
-@use scss-foundation/src/modules/text/modification as text-modification;
-
-- Capitalizes given string.
-
-```
-text-modification.capitalize('john'); // returns John
-```
-
-- Cuts off lengthy text by adding an ellipsis at the end. Behavior heavily depends on context; it cannot be applied to
-containers with unlimited width.
-
-```
-@include text-modification.ellipsis();
-```
-This mixin is short-hand for the following set of properties:
-```
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-```
+
+# Text-related methods
+
+From time to time we need to prettify and alter some text in HTML. The following methods help us with that.
+
+## Text Modification
+
+@use scss-foundation/src/modules/text/modification as text-modification;
+
+- Capitalizes given string.
+
+```
+text-modification.capitalize('john'); // returns John
+```
+
+- Cuts off lengthy text by adding an ellipsis at the end. Behavior heavily depends on context; it cannot be applied to
+containers with unlimited width.
+
+```
+@include text-modification.ellipsis();
+```
+This mixin is short-hand for the following set of properties:
+```
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+```

package/docs/modules/visibility.md

@@ -1,27 +1,27 @@
-# Visibility methods
-
-Visibility utilities for control of element visibility based on different device states.
-
-## Visibility
-
-@use scss-foundation/src/modules/states/visibility;
-
-- Show on mobile. Method for controlling the visibility of the element on mobile devices.
-
-```
-@include visibility.show-on-mobile($mobile-state: block);
-```
-The argument is optional and defaults to block. Sets the following property:
-```
-	display: $mobile-state;
-```
-
-- Show on the tablet. Method for controlling the visibility of the element on tablet devices.
-
-```
-@include visibility.show-on-tablet($tablet-state: block);
-```
-The argument is optional and defaults to block. Sets the following property:
-```
-	display: $tablet-state;
-```
+# Visibility methods
+
+Visibility utilities for control of element visibility based on different device states.
+
+## Visibility
+
+@use scss-foundation/src/modules/states/visibility;
+
+- Show on mobile. Method for controlling the visibility of the element on mobile devices.
+
+```
+@include visibility.show-on-mobile($mobile-state: block);
+```
+The argument is optional and defaults to block. Sets the following property:
+```
+	display: $mobile-state;
+```
+
+- Show on the tablet. Method for controlling the visibility of the element on tablet devices.
+
+```
+@include visibility.show-on-tablet($tablet-state: block);
+```
+The argument is optional and defaults to block. Sets the following property:
+```
+	display: $tablet-state;
+```

package/docs/partials/README.md

@@ -1,14 +1,14 @@
-
-# Helper Classes
-
-## How to use it
-
-Helper classes provide an effective solution for minimizing repetitive code. You can easily apply them from this library in your code base.
-
-## What's included
-
-- [Alignment Helper Classes](./visibility.md)
-- [Cursor Helper Classes](./cursor.md)
-- [Resize Helper Classes](./resize.md)
-- [Text Control Helper Classes](./text-control.md)
-- [Visibility Helper Classes](./visibility.md)
+
+# Helper Classes
+
+## How to use it
+
+Helper classes provide an effective solution for minimizing repetitive code. You can easily apply them from this library in your code base.
+
+## What's included
+
+- [Alignment Helper Classes](./visibility.md)
+- [Cursor Helper Classes](./cursor.md)
+- [Resize Helper Classes](./resize.md)
+- [Text Control Helper Classes](./text-control.md)
+- [Visibility Helper Classes](./visibility.md)

package/docs/partials/alignment.md

@@ -1,15 +1,15 @@
-# Alignment Helper Classes
-
-Provides a set of classes that can be used to apply flexible alignment properties. Included classes are: space-between, align-center, align-right, align-vertical which work using utilities for positioning items using flex.
-
-## Alignment
-
-@use scss-foundation/src/partials/core/layout/alignment;
-
-- The `space-between` class applies a flexible alignment to its elements, distributing them along the horizontal axis with space between each element.
-
-- The `align-center` class applies a flexible alignment to its elements, centering them both horizontally and vertically inside the parent container.
-
-- The `align-right` class applies a flexible alignment to its elements, centering them vertically and aligning them to the right side of the parent container.
-
-- The `align-vertical` class applies a flexible alignment to its elements, centering them vertically inside the parent container.
+# Alignment Helper Classes
+
+Provides a set of classes that can be used to apply flexible alignment properties. Included classes are: space-between, align-center, align-right, align-vertical which work using utilities for positioning items using flex.
+
+## Alignment
+
+@use scss-foundation/src/partials/core/layout/alignment;
+
+- The `space-between` class applies a flexible alignment to its elements, distributing them along the horizontal axis with space between each element.
+
+- The `align-center` class applies a flexible alignment to its elements, centering them both horizontally and vertically inside the parent container.
+
+- The `align-right` class applies a flexible alignment to its elements, centering them vertically and aligning them to the right side of the parent container.
+
+- The `align-vertical` class applies a flexible alignment to its elements, centering them vertically inside the parent container.

package/docs/partials/cursor.md

@@ -1,13 +1,13 @@
-# Cursor Helper Classes
-
- Various cursor states. Currently supported: clickable, draggable, and forbidden, each of them represents a specific cursor state.
-
-## Cursor
-
-@use scss-foundation/src/partials/core/states/cursor;
-
-- The `clickable` class is used to indicate that an element is clickable. When this class is applied, the cursor will change to a pointer.
-
-- The `draggable` class is used to indicate that an element is draggable. When this class is applied, the cursor will change to a grabbing hand.
-
-- The `forbidden` class is used to indicate that an element is not allowed to be interacted with. When this class is applied, the cursor will change to not allowed.
+# Cursor Helper Classes
+
+ Various cursor states. Currently supported: clickable, draggable, and forbidden, each of them represents a specific cursor state.
+
+## Cursor
+
+@use scss-foundation/src/partials/core/states/cursor;
+
+- The `clickable` class is used to indicate that an element is clickable. When this class is applied, the cursor will change to a pointer.
+
+- The `draggable` class is used to indicate that an element is draggable. When this class is applied, the cursor will change to a grabbing hand.
+
+- The `forbidden` class is used to indicate that an element is not allowed to be interacted with. When this class is applied, the cursor will change to not allowed.

package/docs/partials/resize.md

@@ -1,9 +1,9 @@
-# Resize Helper Class
-
-Resize helper class is used to disable the resizing behavior of an element, preventing users from resizing it.
-
-## Resize
-
-@use scss-foundation/src/partials/core/states/resize;
-
-- Apply the `no-resize` class to an element to disable resizing.
+# Resize Helper Class
+
+Resize helper class is used to disable the resizing behavior of an element, preventing users from resizing it.
+
+## Resize
+
+@use scss-foundation/src/partials/core/states/resize;
+
+- Apply the `no-resize` class to an element to disable resizing.

package/docs/partials/text-control.md

@@ -1,11 +1,11 @@
-# Text Control Helper Classes
-
-Text control helper classes are used for text transformation. Included classes are: first-letter-capitalized and capitalized.
-
-## Text Control
-
-@use scss-foundation/src/partials/core/fonts/text-control;
-
-- The `first-letter-capitalized` class is used to capitalize the first letter of the element.
-
-- The `capitalized` class is used to transform all text to uppercase.
+# Text Control Helper Classes
+
+Text control helper classes are used for text transformation. Included classes are: first-letter-capitalized and capitalized.
+
+## Text Control
+
+@use scss-foundation/src/partials/core/fonts/text-control;
+
+- The `first-letter-capitalized` class is used to capitalize the first letter of the element.
+
+- The `capitalized` class is used to transform all text to uppercase.

package/docs/partials/visibility.md

@@ -1,9 +1,9 @@
-# Hidden Helper Class
-
- Hidden helper class is used to hide elements by setting their display property to none, effectively removing them from the visual layout of the page.
-
-## Hidden
-
-@use scss-foundation/src/partials/core/states/visibility;
-
-- To hide an element, apply the `hidden` class to it.
+# Hidden Helper Class
+
+ Hidden helper class is used to hide elements by setting their display property to none, effectively removing them from the visual layout of the page.
+
+## Hidden
+
+@use scss-foundation/src/partials/core/states/visibility;
+
+- To hide an element, apply the `hidden` class to it.

package/jest.config.js

@@ -1,22 +1,22 @@
-module.exports = {
-    "roots": [
-        "<rootDir>/tests/"
-    ],
-    "setupFiles": [],
-    "collectCoverage": true,
-    "collectCoverageFrom": [
-        "**/*.scss"
-    ],
-    "transform": {},
-    "transformIgnorePatterns": [
-        "<rootDir>/node_modules/"
-    ],
-    "testMatch": ["**/tests/*.js"],
-    "testPathIgnorePatterns": [
-        "<rootDir>/node_modules/",
-    ],
-    "testEnvironment": 'jest-environment-node',
-    "moduleFileExtensions": [
-        "js"
-    ]
+module.exports = {
+    "roots": [
+        "<rootDir>/tests/"
+    ],
+    "setupFiles": [],
+    "collectCoverage": true,
+    "collectCoverageFrom": [
+        "**/*.scss"
+    ],
+    "transform": {},
+    "transformIgnorePatterns": [
+        "<rootDir>/node_modules/"
+    ],
+    "testMatch": ["**/tests/*.js"],
+    "testPathIgnorePatterns": [
+        "<rootDir>/node_modules/",
+    ],
+    "testEnvironment": 'jest-environment-node',
+    "moduleFileExtensions": [
+        "js"
+    ]
 }

package/package.json

@@ -1,24 +1,24 @@
-{
-  "name": "@enigmatry/scss-foundation",
-  "version": "17.0.0-preview.5.1",
-  "author": "Enigmatry",
-  "description": "Collection of SCSS utilities useful for the most of projects.",
-  "homepage": "https://github.com/enigmatry/entry-angular-building-blocks/tree/master/libs/scss-foundation#readme",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/enigmatry/entry-angular-building-blocks.git"
-  },
-  "license": "Apache-2.0",
-  "scripts": {
-    "build": "sass --style=compressed --load-path=src src/partials/main.scss dist/scss-foundation.css",
-    "build-modules": "sass --style=compressed --load-path=src --load-path=../../node_modules src/modules/_index.scss dist/scss-foundation-modules.css",
-    "lint": "stylelint --fix src/**/*.scss --config ../../.stylelintrc.json",
-    "test": "jest --coverage --colors"
-  },
-  "peerDependencies": {
-    "sass-true": "7.0.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "name": "@enigmatry/scss-foundation",
+  "version": "17.0.0",
+  "author": "Enigmatry",
+  "description": "Collection of SCSS utilities useful for the most of projects.",
+  "homepage": "https://github.com/enigmatry/entry-angular-building-blocks/tree/master/libs/scss-foundation#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/enigmatry/entry-angular-building-blocks.git"
+  },
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "sass --style=compressed --load-path=src src/partials/main.scss dist/scss-foundation.css",
+    "build-modules": "sass --style=compressed --load-path=src --load-path=../../node_modules src/modules/_index.scss dist/scss-foundation-modules.css",
+    "lint": "stylelint --fix src/**/*.scss --config ../../.stylelintrc.json",
+    "test": "jest --coverage --colors"
+  },
+  "peerDependencies": {
+    "sass-true": "7.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/modules/_index.scss

@@ -1,8 +1,8 @@
-@use 'display';
-@use 'layout';
-@use 'position';
-@use 'responsiveness';
-@use 'text';
-@use 'lists';
-@use 'borders';
+@use 'display';
+@use 'layout';
+@use 'position';
+@use 'responsiveness';
+@use 'text';
+@use 'lists';
+@use 'borders';
 @use 'states';

package/src/modules/_map.scss

@@ -1,54 +1,54 @@
-@use 'sass:list';
-@use 'sass:string';
-@use 'sass:map';
-@use 'sass:meta';
-@use 'variables' as vars;
-
-@function value-from($object, $path) {
-
-	@if meta.type-of($object) != map {
-		@return -error('Please provide valid object! Given value: ' + $object);
-	}
-
-	@if meta.type-of($path) != string {
-		@return -error('Please provide valid path! Given value: ' + $path);
-	}
-
-	$keys: -split($path);
-
-	$result: $object;
-
-	@each $key in $keys {
-		@if (map.has-key($result, $key) == false) {
-			@return -error('Path segment must be any of following values: ' + map.keys($result) + '. Given path segment: ' + $key);
-		}
-        
-		$result: map.get($result, $key);
-	}
-
-	@return $result;
-}
-
-@function -split($string, $separator: '.') {
-	$result: ();
-	$current-index: string.index($string, $separator);
-	@while $current-index != null {
-		$key: string.slice($string, 1, $current-index - 1);
-		$result: list.append($result, $key);
-		$string: string.slice($string, $current-index + 1);
-		$current-index: string.index($string, $separator);
-	}
-
-	/* stylelint-disable-next-line scss/no-duplicate-dollar-variables */
-	$result: list.append($result, $string);
-
-	@return $result;
-}
-
-@function -error($error-message) {
-	@if vars.$testing == true {
-		@return $error-message;
-	}
-
-	@error $error-message;
+@use 'sass:list';
+@use 'sass:string';
+@use 'sass:map';
+@use 'sass:meta';
+@use 'variables' as vars;
+
+@function value-from($object, $path) {
+
+	@if meta.type-of($object) != map {
+		@return -error('Please provide valid object! Given value: ' + $object);
+	}
+
+	@if meta.type-of($path) != string {
+		@return -error('Please provide valid path! Given value: ' + $path);
+	}
+
+	$keys: -split($path);
+
+	$result: $object;
+
+	@each $key in $keys {
+		@if (map.has-key($result, $key) == false) {
+			@return -error('Path segment must be any of following values: ' + map.keys($result) + '. Given path segment: ' + $key);
+		}
+        
+		$result: map.get($result, $key);
+	}
+
+	@return $result;
+}
+
+@function -split($string, $separator: '.') {
+	$result: ();
+	$current-index: string.index($string, $separator);
+	@while $current-index != null {
+		$key: string.slice($string, 1, $current-index - 1);
+		$result: list.append($result, $key);
+		$string: string.slice($string, $current-index + 1);
+		$current-index: string.index($string, $separator);
+	}
+
+	/* stylelint-disable-next-line scss/no-duplicate-dollar-variables */
+	$result: list.append($result, $string);
+
+	@return $result;
+}
+
+@function -error($error-message) {
+	@if vars.$testing == true {
+		@return $error-message;
+	}
+
+	@error $error-message;
 }

package/src/modules/_variables.scss

@@ -1,12 +1,12 @@
-$testing: false !default;
-$default-breakpoints: (
-	mobile: ( size: 576px, description: 'sm' ),
-	tablet: ( size: 768px, description: 'md' ),
-	desktop: ( size: 992px, description: 'lg'),
-	largeDesktop: ( size: 1200px, description: 'xl'),
-	extraLargeDesktop: ( size: 1400px, description: 'xxl'));
-
-$custom-breakpoints: (
-	mobile: ( size: 540px, description: 'sm' ),
-	tablet: ( size: 800px, description: 'md' ),
+$testing: false !default;
+$default-breakpoints: (
+	mobile: ( size: 576px, description: 'sm' ),
+	tablet: ( size: 768px, description: 'md' ),
+	desktop: ( size: 992px, description: 'lg'),
+	largeDesktop: ( size: 1200px, description: 'xl'),
+	extraLargeDesktop: ( size: 1400px, description: 'xxl'));
+
+$custom-breakpoints: (
+	mobile: ( size: 540px, description: 'sm' ),
+	tablet: ( size: 800px, description: 'md' ),
 );

package/src/modules/borders/_border-radius.scss

@@ -1,10 +1,10 @@
-@mixin partial-border-radius($top-left: 0, $top-right: 0,  $bottom-right: 0, $bottom-left: 0) {
-	border: {
-		/* stylelint-disable scss/declaration-nested-properties */
-		top-left-radius: $top-left;
-		top-right-radius: $top-right;
-		bottom-right-radius: $bottom-right;
-		bottom-left-radius: $bottom-left;
-		/* stylelint-enable scss/declaration-nested-properties */
-	}
-}
+@mixin partial-border-radius($top-left: 0, $top-right: 0,  $bottom-right: 0, $bottom-left: 0) {
+	border: {
+		/* stylelint-disable scss/declaration-nested-properties */
+		top-left-radius: $top-left;
+		top-right-radius: $top-right;
+		bottom-right-radius: $bottom-right;
+		bottom-left-radius: $bottom-left;
+		/* stylelint-enable scss/declaration-nested-properties */
+	}
+}

package/src/modules/display/_items.scss

@@ -1,22 +1,22 @@
-@mixin align-center() {
-	@include fully-align(center);
-}
- 
-@mixin align($align) {
-	@include fully-align($align);
-}
- 
- 
-@mixin align-absolute-center() {
-	@include fully-align(center, center);
-}
- 
-@mixin fully-align($align, $justify: flex-start, $direction: row, $wrap: wrap) {
-	display: flex;
-	flex: {
-		direction: $direction;
-		wrap: $wrap;
-	};
-	align-items: $align;
-	justify-content: $justify;
+@mixin align-center() {
+	@include fully-align(center);
+}
+ 
+@mixin align($align) {
+	@include fully-align($align);
+}
+ 
+ 
+@mixin align-absolute-center() {
+	@include fully-align(center, center);
+}
+ 
+@mixin fully-align($align, $justify: flex-start, $direction: row, $wrap: wrap) {
+	display: flex;
+	flex: {
+		direction: $direction;
+		wrap: $wrap;
+	};
+	align-items: $align;
+	justify-content: $justify;
 }