diff --git a/.github/build.yaml b/.github/build.yaml
new file mode 100644
index 0000000..b6fab3f
--- /dev/null
+++ b/.github/build.yaml
@@ -0,0 +1,31 @@
+name: Publish Library
+run-name: Publish Library
+
+on:
+ push:
+
+jobs:
+ build:
+ name: Build NPM Project
+ runs-on: ubuntu-latest
+ container: node:alpine
+ steps:
+ - name: Clone Repository
+ uses: ztimson/actions/clone@develop
+
+ - name: Install & Build
+ run: npm i && npm run build
+ working-directory: lib
+
+ - name: Upload to Registry
+ uses: ztimson/actions/npm/publish@develop
+ with:
+ working-directory: lib
+
+ - name: Upload to NPM
+ uses: ztimson/actions/npm/publish@develop
+ with:
+ owner: ztimson
+ registry: https://registry.npmjs.org/
+ token: ${{secrets.NPM_TOKEN}}
+ working-directory: lib
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..dd31c8c
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,4 @@
+.idea
+.vscode
+*.log
+dist
diff --git a/LICENSE b/LICENSE
index fc50bed..e734a49 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,11 +1,7 @@
Copyright (c) 2023 Zakary Timson
-All Rights Reserved.
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
index 62d4043..6905ca9 100644
--- a/README.md
+++ b/README.md
@@ -3,27 +3,27 @@
-
+
- ### Template
+ ### CSS Utils
- Simple repository template
+ CSS Utility Classes
- [![Version](https://img.shields.io/badge/dynamic/json.svg?label=Version&style=for-the-badge&url=https://git.zakscode.com/api/v1/repos/ztimson/template/tags&query=$[0].name)](https://git.zakscode.com/ztimson/template/tags)
- [![Pull Requests](https://img.shields.io/badge/dynamic/json.svg?label=Pull%20Requests&style=for-the-badge&url=https://git.zakscode.com/api/v1/repos/ztimson/template&query=open_pr_counter)](https://git.zakscode.com/ztimson/template/pulls)
- [![Issues](https://img.shields.io/badge/dynamic/json.svg?label=Issues&style=for-the-badge&url=https://git.zakscode.com/api/v1/repos/ztimson/template&query=open_issues_count)](https://git.zakscode.com/ztimson/template/issues)
+ [![Version](https://img.shields.io/badge/dynamic/json.svg?label=Version&style=for-the-badge&url=https://git.zakscode.com/api/v1/repos/ztimson/css-utils/tags&query=$[0].name)](https://git.zakscode.com/ztimson/css-utils/tags)
+ [![Pull Requests](https://img.shields.io/badge/dynamic/json.svg?label=Pull%20Requests&style=for-the-badge&url=https://git.zakscode.com/api/v1/repos/ztimson/css-utils&query=open_pr_counter)](https://git.zakscode.com/ztimson/css-utils/pulls)
+ [![Issues](https://img.shields.io/badge/dynamic/json.svg?label=Issues&style=for-the-badge&url=https://git.zakscode.com/api/v1/repos/ztimson/css-utils&query=open_issues_count)](https://git.zakscode.com/ztimson/css-utils/issues)
---
---
@@ -32,65 +32,24 @@
## Table of Contents
- [Template](#top)
- [About](#about)
- - [Demo](#demo)
- [Built With](#built-with)
- [Setup](#setup)
- [Production](#production)
- [Development](#development)
+ - [Documentation](#documentation)
- [License](#license)
## About
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+This is a CSS utility library based on Bootstrap.
-### Demo
+It includes all the utility libraries without any of the bloat.
-Website: https://git.zakscode.com
+Some extra classes have been added and a few class name changed to match convention.
### Built With
-[![Angular](https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular)](https://angular.io/)
-[![Android](https://img.shields.io/badge/android-34A853?style=for-the-badge&logo=android&logoColor=ffffff)](https://www.android.com/)
-[![Arduino](https://img.shields.io/badge/Arduino-00878F?style=for-the-badge&logo=arduino&logoColor=white)](https://www.arduino.cc/)
-[![Bootstrap](https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge&logo=bootstrap&logoColor=white)](https://getbootstrap.com)
-[![C](https://img.shields.io/badge/C-A8B9CC?style=for-the-badge&logo=c&logoColor=ffffff)](https://en.cppreference.com/w/c/language)
-[![C++](https://img.shields.io/badge/C%2B%2B-00599C?style=for-the-badge&logo=cplusplus)](https://cplusplus.com/)
-[![C#](https://img.shields.io/badge/C%23-239120?style=for-the-badge&logo=csharp)](https://dotnet.microsoft.com/)
[![CSS](https://img.shields.io/badge/CSS-1572B6?style=for-the-badge&logo=css3)](https://www.w3.org/Style/CSS/Overview.en.html)
-[![Django](https://img.shields.io/badge/django-0C4B33?style=for-the-badge&logo=django)](https://www.djangoproject.com/)
-[![Docker](https://img.shields.io/badge/Docker-384d54?style=for-the-badge&logo=docker)](https://docker.com/)
-[![Electron](https://img.shields.io/badge/Electron-47848F?style=for-the-badge&logo=electron&logoColor=white)](https://www.electronjs.org/)
-[![Firebase](https://img.shields.io/badge/Firebase-FFFFFF?style=for-the-badge&logo=firebase)](https://firebase.google.com/)
-[![Go](https://img.shields.io/badge/Go-00ADD8?style=for-the-badge&logo=go&logoColor=ffffff)](https://go.dev/)
-[![GraphQL](https://img.shields.io/badge/GraphQL-E10098?style=for-the-badge&logo=graphql)](https://graphql.org/)
-[![HTML](https://img.shields.io/badge/HTML-FFFFFF?style=for-the-badge&logo=html5)](https://developer.mozilla.org/en-US/docs/Glossary/HTML)
-[![Java](https://img.shields.io/badge/Java-5382A1?style=for-the-badge&logo=coffeescript&logoColor=F8981D)](https://java.com/)
-[![JavaScript](https://img.shields.io/badge/JavaScript-000000?style=for-the-badge&logo=javascript)](https://javascript.com/)
-[![JQuery](https://img.shields.io/badge/jQuery-0769AD?style=for-the-badge&logo=jquery)](https://jquery.com )
-[![Laravel](https://img.shields.io/badge/Laravel-6C6C6C?style=for-the-badge&logo=laravel)](https://laravel.com)
-[![Linux](https://img.shields.io/badge/Linux-eeeeee?style=for-the-badge&logo=linux&logoColor=000000)](https://www.linux.org/)
-[![Momentum](https://img.shields.io/badge/Momentum-000000?style=for-the-badge&logo=data:image/svg%2bxml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIgImh0dHA6Ly93d3cudzMub3JnL1RSLzIwMDEvUkVDLVNWRy0yMDAxMDkwNC9EVEQvc3ZnMTAuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI1MHB0IiBoZWlnaHQ9IjI1MHB0IiB2aWV3Qm94PSIwIDAgMjUwIDI1MCIgIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiPgoJPHN0eWxlPgoJCUBtZWRpYSAocHJlZmVycy1jb2xvci1zY2hlbWU6IGxpZ2h0KSB7CgkJZyB7IGZpbGw6ICMwMDAwMDA7IH0KCQl9CgkJQG1lZGlhIChwcmVmZXJzLWNvbG9yLXNjaGVtZTogZGFyaykgewoJCWcgeyBmaWxsOiAjZmZmZmZmOyB9CgkJfQoJPC9zdHlsZT4KCTxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsMjUwKSBzY2FsZSgwLjEsLTAuMSkiPgoJCTxwYXRoIGQ9Ik0xMTY1IDIyOTkgYy0yNDUgLTE4IC00NzAgLTEyMyAtNjUxIC0zMDMgLTExNyAtMTE4IC0yMDAgLTI1MCAtMjUyIC00MDEgLTcxIC0yMDkgLTcxIC00NjggLTEgLTY3OSAzNyAtMTA4IDExOCAtMjU0IDE3OCAtMzE5IGwyNSAtMjggLTEzMiAtMTMyIC0xMzIgLTEzMiA1MiAtNTMgNTMgLTUyIDEzMiAxMzIgMTMyIDEzMiAyOCAtMjUgYzQxIC0zOCAxMDkgLTgyIDE4OCAtMTIxIDE1MyAtNzcgMjkyIC0xMDkgNDcwIC0xMDkgMjkxIDAgNTM2IDEwMSA3NDEgMzA1IDE1MyAxNTQgMjQ0IDMyNCAyODkgNTQwIDIxIDEwMyAyMSAyOTkgLTEgNDAyIC0zMiAxNTkgLTEwNSAzMjQgLTE4NyA0MjYgbC00OSA2MSAxMjIgMTIyIDEyMyAxMjMgLTIyIDMxIGMtMTIgMTYgLTM2IDQwIC01MiA1MiBsLTMxIDIyIC0xMjEgLTEyMSAtMTIyIC0xMjEgLTYwIDQ2IGMtODEgNjEgLTI2MSAxNDcgLTM2NSAxNzMgLTEwNCAyNyAtMjM1IDM3IC0zNTUgMjl6IG0yNzQgLTE2NCBjMTAyIC0yMSAyMTcgLTY4IDI5NyAtMTIxIDEwOSAtNzIgMTA2IC02NiA0OSAtMTI0IGwtNTAgLTUwIC01MCA5IGMtODMgMTYgLTE2OSAtNSAtMzA1IC03NCBsLTc1IC0zOCA0NSAtMzggYzI1IC0yMiA1MyAtNDIgNjMgLTQ1IDExIC0zIDQ1IDYgNzcgMjAgNjggMzEgMTM1IDQ1IDE3MCAzNiAyMiAtNSAyNSAtMTIgMjggLTU2IDEyIC0yMDQgLTM2MCAtNjQ1IC02NzQgLTgwMCAtMTA3IC01MyAtMTgwIC02NiAtMjA4IC0zOCAtMjcgMjcgLTE4IDExMyAyMiAxOTggMTggMzcgMjkgNzMgMjUgODAgLTE0IDI0IC03NiA5NiAtODIgOTYgLTEyIDAgLTc4IC0xMzIgLTEwMSAtMTk5IC0xNiAtNDkgLTIxIC04NCAtMTkgLTE0OCBsMyAtODQgLTQxIC00MSBjLTUwIC01MCAtNTIgLTQ5IC0xMTkgNTggLTU1IDg4IC05OCAxOTYgLTExOSAyOTQgLTE5IDkxIC0xOSAyNzkgMCAzNjkgNzIgMzQzIDM0NyA2MjEgNjg4IDY5NSA4NSAxOSAyODkgMTkgMzc2IDF6IG01NjkgLTM5MyBjNjMgLTk1IDEwNSAtMTk1IDEyOCAtMzA1IDE4IC04OSAxOCAtMjc3IC0xIC0zNjcgLTczIC0zNDYgLTM0OSAtNjIyIC02OTUgLTY5NSAtOTEgLTE5IC0yNzggLTE5IC0zNjggMCAtMTMwIDI3IC0yNzggOTUgLTM2NyAxNjkgbC0zMCAyNSA0NSA0NSBjNDQgNDUgNDUgNDYgMTEwIDQ2IDE3MyAwIDM5MiAxMjQgNjI1IDM1NSAxMzAgMTI5IDIwNCAyMjIgMjc4IDM1MCA2MyAxMDkgODkgMTg1IDk0IDI4MCBsNSA4MCA1MSA1MyBjMjggMjggNTUgNTIgNTkgNTIgNSAwIDM1IC00MCA2NiAtODh6Ii8+CgkJPHBhdGggZD0iTTc1MiAxODM5IGMtMTk1IC05NyAtOTMgLTQzMyAyMzggLTc5MSA3MSAtNzcgNzIgLTc4IDEwMCAtNjMgMTUgOCA0MiAyNiA2MCA0MSBsMzEgMjcgLTY5IDcxIGMtMTc2IDE4MSAtMjk3IDM3NCAtMzE3IDUwOCAtMTQgOTIgMzIgMTEwIDE1OCA2NSAxMjAgLTQ0IDI2OCAtMTQ3IDQwOSAtMjg3IGw4OCAtODcgMTkgMjEgYzEwIDEyIDI4IDM2IDM5IDU1IGwyMSAzNCAtMjYgMzEgYy00NyA1NyAtMTk3IDE4NiAtMjg1IDI0NyAtMTk2IDEzNCAtMzYxIDE4MCAtNDY2IDEyOHoiLz4KCQk8cGF0aCBkPSJNMTAxMiAxNDk3IGMtMjkgLTI5IC01MiAtNTggLTUyIC02NiAwIC0xMyA1NCAtOTYgNjggLTEwNSA1IC0zIDQ0IDMwIDg2IDczIGw3OCA3OSAtNTMgMzYgYy0zMCAyMCAtNTggMzYgLTY0IDM2IC02IDAgLTM0IC0yNCAtNjMgLTUzeiIvPgoJCTxwYXRoIGQ9Ik0xNjcyIDExMzkgYy00NiAtNTYgLTQ5IC02OSAtMjggLTEwMiAyMyAtMzUgNTYgLTE0MyA1NiAtMTgxIDAgLTc4IC01OSAtODMgLTIwNiAtMjAgbC04MyAzNiAtNTEgLTQ0IGMtMjcgLTI0IC01MCAtNDYgLTUwIC01MCAwIC0xNCAxODYgLTk5IDI1MiAtMTE0IDIwMCAtNDkgMzE3IDc4IDI2MyAyODYgLTE2IDYzIC03MCAxODYgLTk3IDIyMyAtMTMgMTcgLTE3IDE0IC01NiAtMzR6Ii8+Cgk8L2c+Cjwvc3ZnPgo=)](https://git.zakscode.com/ztimson/momentum)
-[![MongoDB](https://img.shields.io/badge/mongodb-000000?style=for-the-badge&logo=mongodb)](https://www.mongodb.com/)
-[![MySQL](https://img.shields.io/badge/MySQL-4479A1?style=for-the-badge&logo=mysql&logoColor=ffffff)](https://www.mysql.com/)
-[![Nest](https://img.shields.io/badge/nestjs-E0234E?style=for-the-badge&logo=nestjs)](https://nestjs.com/)
-[![.NET](https://img.shields.io/badge/.NET-512BD4?style=for-the-badge&logo=dotnet)](https://dotnet.microsoft.com/)
-[![Next](https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs)](https://nextjs.org/)
-[![NGINX](https://img.shields.io/badge/NGINX-009639?style=for-the-badge&logo=nginx)](https://www.nginx.com/)
-[![Node](https://img.shields.io/badge/Node.js-000000?style=for-the-badge&logo=nodedotjs)](https://nodejs.org/)
-[![p5.js](https://img.shields.io/badge/p5.js-ed225d?style=for-the-badge&logo=p5dotjs&logoColor=white)](https://p5js.org/)
-[![PHP](https://img.shields.io/badge/PHP-474A8A?style=for-the-badge&logo=php&logoColor=white)](https://www.php.net/)
-[![PostgreSQL](https://img.shields.io/badge/PostgreSQl-212121?style=for-the-badge&logo=postgresql)](https://www.postgresql.org/)
-[![Python](https://img.shields.io/badge/Python-FFD43B?style=for-the-badge&logo=python)](https://www.python.org/)
-[![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react)](https://reactjs.org/)
-[![Redis](https://img.shields.io/badge/Redis-ffffff?style=for-the-badge&logo=redis)](https://redis.com/)
[![SASS](https://img.shields.io/badge/SASS-CC6699?style=for-the-badge&logo=sass&logoColor=ffffff)](https://sass-lang.com/)
-[![Shell](https://img.shields.io/badge/Shell-000000?style=for-the-badge&logo=windowsterminal&logoColor=00ff00)](https://en.wikipedia.org/wiki/Shell_script)
-[![SQL Server](https://img.shields.io/badge/SQL%20Server-CC2927?style=for-the-badge&logo=microsoftsqlserver)](https://www.microsoft.com/en-ca/sql-server)
-[![SQLite](https://img.shields.io/badge/SQLITE-003B57?style=for-the-badge&logo=sqlite)](https://www.sqlite.org/index.html)
-[![Svelte](https://img.shields.io/badge/Svelte-4A4A55?style=for-the-badge&logo=svelte)](https://svelte.dev/)
-[![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white)](https://typescriptlang.org/)
-[![Windows](https://img.shields.io/badge/Windows-0078D4?style=for-the-badge&logo=windows)](https://microsoft.com/windows)
-[![Vite](https://img.shields.io/badge/vite-1b1b1b?style=for-the-badge&logo=vite)](https://vitejs.dev/)
-[![Vue](https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vuedotjs)](https://vuejs.org/)
## Setup
@@ -102,11 +61,10 @@ Website: https://git.zakscode.com
#### Prerequisites
-- [Docker](https://docs.docker.com/install/)
+- [NPM](https://docs.docker.com/install/)
#### Instructions
-1. Run the docker image: `docker run -p 80:80 git.zakscode.com/ztimson/template:latest`
-2. Open [http://localhost](http://localhost)
+1. Install: `npm i @ztimson/css-utils`;
@@ -121,12 +79,11 @@ Website: https://git.zakscode.com
#### Instructions
1. Install the dependencies: `npm install`
-2. Start the Angular server: `npm run start`
-3. Open [http://localhost:4200](http://localhost:4200)
+2. Start the Angular server: `npm run build`
## License
-Copyright © 2023 Zakary Timson | All Rights Reserved | Available under MIT Licensing
+Copyright © 2023 Zakary Timson | Available under MIT Licensing
See the [license](./LICENSE) for more information.
diff --git a/dist/.gitkeep b/dist/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..5ae92bc
--- /dev/null
+++ b/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+ CSS Utils
+
+
+
+
+
+
+
+
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..71b4a1c
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,465 @@
+{
+ "name": "@ztimson/css-utils",
+ "version": "1.0.0",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {
+ "": {
+ "name": "@ztimson/css-utils",
+ "version": "1.0.0",
+ "license": "MIT",
+ "dependencies": {
+ "sass": "^1.80.6"
+ }
+ },
+ "node_modules/@parcel/watcher": {
+ "version": "2.5.0",
+ "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.0.tgz",
+ "integrity": "sha512-i0GV1yJnm2n3Yq1qw6QrUrd/LI9bE8WEBOTtOkpCXHHdyN3TAGgqAK/DAT05z4fq2x04cARXt2pDmjWjL92iTQ==",
+ "hasInstallScript": true,
+ "optional": true,
+ "dependencies": {
+ "detect-libc": "^1.0.3",
+ "is-glob": "^4.0.3",
+ "micromatch": "^4.0.5",
+ "node-addon-api": "^7.0.0"
+ },
+ "engines": {
+ "node": ">= 10.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ },
+ "optionalDependencies": {
+ "@parcel/watcher-android-arm64": "2.5.0",
+ "@parcel/watcher-darwin-arm64": "2.5.0",
+ "@parcel/watcher-darwin-x64": "2.5.0",
+ "@parcel/watcher-freebsd-x64": "2.5.0",
+ "@parcel/watcher-linux-arm-glibc": "2.5.0",
+ "@parcel/watcher-linux-arm-musl": "2.5.0",
+ "@parcel/watcher-linux-arm64-glibc": "2.5.0",
+ "@parcel/watcher-linux-arm64-musl": "2.5.0",
+ "@parcel/watcher-linux-x64-glibc": "2.5.0",
+ "@parcel/watcher-linux-x64-musl": "2.5.0",
+ "@parcel/watcher-win32-arm64": "2.5.0",
+ "@parcel/watcher-win32-ia32": "2.5.0",
+ "@parcel/watcher-win32-x64": "2.5.0"
+ }
+ },
+ "node_modules/@parcel/watcher-android-arm64": {
+ "version": "2.5.0",
+ "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.0.tgz",
+ "integrity": "sha512-qlX4eS28bUcQCdribHkg/herLe+0A9RyYC+mm2PXpncit8z5b3nSqGVzMNR3CmtAOgRutiZ02eIJJgP/b1iEFQ==",
+ "cpu": [
+ "arm64"
+ ],
+ "optional": true,
+ "os": [
+ "android"
+ ],
+ "engines": {
+ "node": ">= 10.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/watcher-darwin-arm64": {
+ "version": "2.5.0",
+ "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.0.tgz",
+ "integrity": "sha512-hyZ3TANnzGfLpRA2s/4U1kbw2ZI4qGxaRJbBH2DCSREFfubMswheh8TeiC1sGZ3z2jUf3s37P0BBlrD3sjVTUw==",
+ "cpu": [
+ "arm64"
+ ],
+ "optional": true,
+ "os": [
+ "darwin"
+ ],
+ "engines": {
+ "node": ">= 10.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/watcher-darwin-x64": {
+ "version": "2.5.0",
+ "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.0.tgz",
+ "integrity": "sha512-9rhlwd78saKf18fT869/poydQK8YqlU26TMiNg7AIu7eBp9adqbJZqmdFOsbZ5cnLp5XvRo9wcFmNHgHdWaGYA==",
+ "cpu": [
+ "x64"
+ ],
+ "optional": true,
+ "os": [
+ "darwin"
+ ],
+ "engines": {
+ "node": ">= 10.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/watcher-freebsd-x64": {
+ "version": "2.5.0",
+ "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.0.tgz",
+ "integrity": "sha512-syvfhZzyM8kErg3VF0xpV8dixJ+RzbUaaGaeb7uDuz0D3FK97/mZ5AJQ3XNnDsXX7KkFNtyQyFrXZzQIcN49Tw==",
+ "cpu": [
+ "x64"
+ ],
+ "optional": true,
+ "os": [
+ "freebsd"
+ ],
+ "engines": {
+ "node": ">= 10.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/watcher-linux-arm-glibc": {
+ "version": "2.5.0",
+ "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.0.tgz",
+ "integrity": "sha512-0VQY1K35DQET3dVYWpOaPFecqOT9dbuCfzjxoQyif1Wc574t3kOSkKevULddcR9znz1TcklCE7Ht6NIxjvTqLA==",
+ "cpu": [
+ "arm"
+ ],
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">= 10.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/watcher-linux-arm-musl": {
+ "version": "2.5.0",
+ "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.0.tgz",
+ "integrity": "sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA==",
+ "cpu": [
+ "arm"
+ ],
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">= 10.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/watcher-linux-arm64-glibc": {
+ "version": "2.5.0",
+ "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.0.tgz",
+ "integrity": "sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA==",
+ "cpu": [
+ "arm64"
+ ],
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">= 10.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/watcher-linux-arm64-musl": {
+ "version": "2.5.0",
+ "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.0.tgz",
+ "integrity": "sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q==",
+ "cpu": [
+ "arm64"
+ ],
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">= 10.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/watcher-linux-x64-glibc": {
+ "version": "2.5.0",
+ "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.0.tgz",
+ "integrity": "sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==",
+ "cpu": [
+ "x64"
+ ],
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">= 10.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/watcher-linux-x64-musl": {
+ "version": "2.5.0",
+ "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.0.tgz",
+ "integrity": "sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==",
+ "cpu": [
+ "x64"
+ ],
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">= 10.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/watcher-win32-arm64": {
+ "version": "2.5.0",
+ "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.0.tgz",
+ "integrity": "sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig==",
+ "cpu": [
+ "arm64"
+ ],
+ "optional": true,
+ "os": [
+ "win32"
+ ],
+ "engines": {
+ "node": ">= 10.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/watcher-win32-ia32": {
+ "version": "2.5.0",
+ "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.0.tgz",
+ "integrity": "sha512-+rgpsNRKwo8A53elqbbHXdOMtY/tAtTzManTWShB5Kk54N8Q9mzNWV7tV+IbGueCbcj826MfWGU3mprWtuf1TA==",
+ "cpu": [
+ "ia32"
+ ],
+ "optional": true,
+ "os": [
+ "win32"
+ ],
+ "engines": {
+ "node": ">= 10.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/@parcel/watcher-win32-x64": {
+ "version": "2.5.0",
+ "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.0.tgz",
+ "integrity": "sha512-lPrxve92zEHdgeff3aiu4gDOIt4u7sJYha6wbdEZDCDUhtjTsOMiaJzG5lMY4GkWH8p0fMmO2Ppq5G5XXG+DQw==",
+ "cpu": [
+ "x64"
+ ],
+ "optional": true,
+ "os": [
+ "win32"
+ ],
+ "engines": {
+ "node": ">= 10.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ }
+ },
+ "node_modules/braces": {
+ "version": "3.0.3",
+ "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+ "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+ "optional": true,
+ "dependencies": {
+ "fill-range": "^7.1.1"
+ },
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/chokidar": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
+ "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
+ "dependencies": {
+ "readdirp": "^4.0.1"
+ },
+ "engines": {
+ "node": ">= 14.16.0"
+ },
+ "funding": {
+ "url": "https://paulmillr.com/funding/"
+ }
+ },
+ "node_modules/detect-libc": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+ "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+ "optional": true,
+ "bin": {
+ "detect-libc": "bin/detect-libc.js"
+ },
+ "engines": {
+ "node": ">=0.10"
+ }
+ },
+ "node_modules/fill-range": {
+ "version": "7.1.1",
+ "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+ "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+ "optional": true,
+ "dependencies": {
+ "to-regex-range": "^5.0.1"
+ },
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/immutable": {
+ "version": "4.3.7",
+ "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
+ "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw=="
+ },
+ "node_modules/is-extglob": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+ "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+ "optional": true,
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/is-glob": {
+ "version": "4.0.3",
+ "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+ "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+ "optional": true,
+ "dependencies": {
+ "is-extglob": "^2.1.1"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/is-number": {
+ "version": "7.0.0",
+ "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+ "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+ "optional": true,
+ "engines": {
+ "node": ">=0.12.0"
+ }
+ },
+ "node_modules/micromatch": {
+ "version": "4.0.8",
+ "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+ "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+ "optional": true,
+ "dependencies": {
+ "braces": "^3.0.3",
+ "picomatch": "^2.3.1"
+ },
+ "engines": {
+ "node": ">=8.6"
+ }
+ },
+ "node_modules/node-addon-api": {
+ "version": "7.1.1",
+ "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+ "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+ "optional": true
+ },
+ "node_modules/picomatch": {
+ "version": "2.3.1",
+ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+ "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+ "optional": true,
+ "engines": {
+ "node": ">=8.6"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/jonschlinkert"
+ }
+ },
+ "node_modules/readdirp": {
+ "version": "4.0.2",
+ "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",
+ "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
+ "engines": {
+ "node": ">= 14.16.0"
+ },
+ "funding": {
+ "type": "individual",
+ "url": "https://paulmillr.com/funding/"
+ }
+ },
+ "node_modules/sass": {
+ "version": "1.80.6",
+ "resolved": "https://registry.npmjs.org/sass/-/sass-1.80.6.tgz",
+ "integrity": "sha512-ccZgdHNiBF1NHBsWvacvT5rju3y1d/Eu+8Ex6c21nHp2lZGLBEtuwc415QfiI1PJa1TpCo3iXwwSRjRpn2Ckjg==",
+ "dependencies": {
+ "chokidar": "^4.0.0",
+ "immutable": "^4.0.0",
+ "source-map-js": ">=0.6.2 <2.0.0"
+ },
+ "bin": {
+ "sass": "sass.js"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ },
+ "optionalDependencies": {
+ "@parcel/watcher": "^2.4.1"
+ }
+ },
+ "node_modules/source-map-js": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+ "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/to-regex-range": {
+ "version": "5.0.1",
+ "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+ "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+ "optional": true,
+ "dependencies": {
+ "is-number": "^7.0.0"
+ },
+ "engines": {
+ "node": ">=8.0"
+ }
+ }
+ }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..705ae39
--- /dev/null
+++ b/package.json
@@ -0,0 +1,17 @@
+{
+ "name": "@ztimson/css-utils",
+ "version": "1.0.0",
+ "description": "CSS Utility Classes",
+ "scripts": {
+ "build": "npx sass src/main.scss > dist/main.css && npx sass src/main.scss --style compressed > dist/main.min.css"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git.zakscode.com:ztimson/css-utils"
+ },
+ "author": "ztimson",
+ "license": "MIT",
+ "devDependencies": {
+ "sass": "^1.80.6"
+ }
+}
diff --git a/src/main.scss b/src/main.scss
new file mode 100644
index 0000000..a16cd4d
--- /dev/null
+++ b/src/main.scss
@@ -0,0 +1,434 @@
+@use 'sass:map';
+
+// Theme settings ===========================================================================================
+
+// Colors
+:root {
+ // Theme colors, what ever you like
+ --theme-backdrop: #dddddd;
+ --theme-primary: #ff0000;
+ --theme-accent: #0000ff;
+ --theme-info: #6157cc;
+ --theme-success: #65c147;
+ --theme-warn: #d88750;
+ --theme-danger: #bf4f4f;
+ --theme-black: black;
+ --theme-white: white;
+
+ // Mic
+ --theme-animation: 0.2s linear; // Animation style
+ --theme-content-width: 1100px; // Max width of clamped content
+ --theme-font: Arial, sans-serif;
+
+ // Light theme
+ &, .theme-light {
+ --theme-clear: #ffffff; // Content background (Usually white or off-black)
+ --theme-text: #000000; // Text color (Should contrast bg-primary)
+ --theme-muted: #6c757d; // Muted text color (Should have less contrast against bg-primary)
+ }
+
+ // Dark theme
+ .theme-dark {
+ --theme-clear: #2e2e2e; // Content background (Usually white or off-black)
+ --theme-text: #ffffff; // Text color (Should contrast bg-primary)
+ --theme-muted: #cccccc; // Muted text color (Should have less contrast against bg-primary)
+ }
+
+}
+
+// Don't edit past this point ===============================================================================
+
+$breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px);
+$direction: ('s': 'left', 't': 'top', 'e': 'right', 'b': 'bottom');
+$divisible: (0, 10, 20, 25, 30, 33, 40, 50, 60, 66, 70, 75, 80, 90, 100);
+$sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5rem);
+
+// "Fixes" ==================================================================================================
+
+// Optional opinionated styling to clean up CSS defaults
+
+.fix-anchor, .fix {
+ a, a:not([href]) {
+ color: var(--theme-primary);
+ &:not(:hover) { text-decoration: none; }
+ &:hover { text-decoration: underline; }
+ }
+}
+
+.fix-button, .fix {
+ button {
+ cursor: pointer;
+ }
+}
+
+.fix-code, .fix {
+ code {
+ display: block;
+ white-space: pre;
+ font-family: monospace;
+ background: rgb(30, 30, 30);
+ color: #00cb00;
+ overflow: auto;
+ }
+}
+
+.fix-dom, .fix {
+ &, html, body {
+ height: 100%;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ overflow: auto;
+ color: var(--theme-text);
+ background-color: var(--theme-backdrop);
+ }
+
+ hr { opacity: 50%; }
+ * { box-sizing: border-box; }
+}
+
+.fix-focus, .fix {
+ * {
+ outline: none !important;
+ box-shadow: none !important;
+ }
+}
+
+.fix-font, .fix {
+ * { font-family: var(--theme-font), sans-serif; }
+ p, input, select, textarea, button { font-size: 1rem; }
+ span { font-size: inherit; }
+ h1, h2, h3, h4, h5, h6, p {
+ margin-top: 0;
+ margin-bottom: 0.5rem;
+ }
+ h1 { font-weight: 500; font-size: 2.5rem; }
+ h2 { font-weight: 500; font-size: 2rem; }
+ h3 { font-weight: 500; font-size: 1.75rem; }
+ h4 { font-weight: 500; font-size: 1.5rem; }
+ h5 { font-weight: 500; font-size: 1.25rem; }
+ h6 { font-weight: 500; font-size: 1rem; }
+}
+
+option { color: black !important; }
+
+// Utilities ================================================================================================
+
+// Animate
+.animate { transition: var(--theme-animation); }
+.animate-none { transition: none !important; }
+.animate-color {
+ transition: var(--theme-animation);
+ transition-property: color, background-color;
+}
+.animate-pos {
+ transition: var(--theme-animation);
+ transition-property: height, width, left, right, top, bottom;
+}
+
+// Border - Colors
+@each $color in ('black', 'white', 'primary', 'secondary', 'info', 'success', 'warn', 'danger', 'muted') {
+ .b-#{$color} { border-color: var(--theme-#{$color}) !important; }
+}
+
+// Border - Radius
+.br-circle { border-radius: 50% !important; }
+.br-pill { border-radius: 50rem !important; }
+@each $s, $size in $sizes {
+ .brtl-#{$s}, .brt-#{$s}, .brs-#{$s}, .br-#{$s} { border-top-left-radius: $size !important; }
+ .brtr-#{$s}, .brt-#{$s}, .bre-#{$s}, .br-#{$s} { border-top-right-radius: $size !important; }
+ .brbl-#{$s}, .brb-#{$s}, .brs-#{$s}, .br-#{$s} { border-bottom-left-radius: $size !important; }
+ .brbr-#{$s}, .brb-#{$s}, .bre-#{$s}, .br-#{$s} { border-bottom-right-radius: $size !important; }
+}
+
+// Colors - Background
+.bg-backdrop { background-color: var(--theme-backdrop) !important; }
+.bg-black { background-color: var(--theme-white) !important; }
+.bg-clear {
+ background-color: var(--theme-clear) !important;
+ color: var(--theme-text) !important;
+}
+.bg-transparent { background-color: transparent !important; }
+.bg-white { background-color: var(--theme-white) !important; }
+@each $color in ('primary', 'secondary', 'text', 'info', 'success', 'warn', 'danger', 'muted') {
+ .bg-#{$color} {
+ position: relative;
+ color: white;
+ }
+ .bg-#{$color}::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: var(--theme-#{$color});
+ opacity: 0.2;
+ border-radius: inherit;
+ }
+}
+
+// Center
+.center {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+}
+
+// Clamp (Restrict page width for large screens)
+.clamp { width: min(var(--theme-content-width), calc(100% - map.get($sizes, 3))); }
+
+// Colors - Foreground
+@each $color in ('black', 'white', 'text', 'primary', 'secondary', 'info', 'success', 'warn', 'danger', 'muted') {
+ .fg-#{$color} { color: var(--theme-#{$color}) !important; }
+}
+
+// Cursors
+@each $name in ('auto', 'default', 'none', 'context-menu', 'help', 'pointer', 'progress', 'wait', 'cell', 'crosshair', 'text', 'vertical-text', 'alias', 'copy', 'move', 'no-drop', 'not-allowed', 'grab', 'grabbing', 'all-scroll', 'col-resize', 'row-resize', 'zoom-in', 'zoom-out') {
+ .curs-#{$name} { cursor: #{$name} !important; }
+}
+
+// Font
+.fs-bolder { font-weight: bolder !important; }
+.fs-bold { font-weight: bold !important; }
+.fs-clear { font-style: normal !important; }
+.fs-italic { font-style: italic !important; }
+.fs-lighter { font-weight: lighter !important; }
+.fs-line-through { text-decoration: line-through !important; }
+.fs-none { text-decoration: none !important; }
+.fs-normal { font-weight: normal !important; }
+.fs-underline { text-decoration: underline !important; }
+.fs-7 { font-size: 2.5rem !important; }
+.fs-6 { font-size: 2.25rem !important; }
+.fs-5 { font-size: 2rem !important; }
+.fs-4 { font-size: 1.75rem !important; }
+.fs-3 { font-size: 1.5rem !important; }
+.fs-2 { font-size: 1.25rem !important; }
+.fs-1 { font-size: 1rem !important; }
+
+// Height
+.h-auto { height: auto !important; }
+@each $div in $divisible {
+ .h-#{$div} { height: #{$div}#{'%'} !important; }
+}
+
+// Hover
+.hover:hover { filter: brightness(125%) !important; }
+
+// Opacity
+@each $div in $divisible {
+ .o-#{$div} { opacity: #{$div}#{'%'} !important; }
+}
+
+// Z-index
+@each $div in $divisible {
+ .z-#{$div} { z-index: #{$div} !important; }
+}
+
+// Shadows
+.shadow { box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 !important; }
+.shadow-none { box-shadow: none !important; }
+
+// Text
+.text-break {
+ word-wrap: break-word !important;
+ word-break: break-word !important;
+}
+.text-truncate {
+ overflow: hidden !important;
+ text-overflow: ellipsis !important;
+ white-space: nowrap !important;
+}
+.text-nowrap {
+ white-space: nowrap !important;
+ text-wrap: nowrap !important;
+}
+.text-wrap {
+ white-space: normal !important;
+ text-wrap: pretty !important;
+}
+
+.text-lowercase { text-transform: lowercase !important; }
+.text-uppercase { text-transform: uppercase !important; }
+.text-capitalize { text-transform: capitalize !important; }
+
+// Width
+.w-auto { width: auto !important; }
+@each $div in $divisible {
+ .w-#{$div} { width: #{$div}#{'%'} !important; }
+}
+
+// User Select
+@each $s in ('all', 'auto', 'none', 'text') {
+ .select-#{$s} { user-select: #{$s} !important; }
+}
+
+// Visibility
+.visible { visibility: visible !important; }
+.hidden { visibility: hidden !important; }
+
+// Breakpoint rules
+@mixin utilities($bp) {
+ @if $bp != null { $bp: '-#{$bp}'; }
+
+ // Alignment
+ .align-x#{$bp} { text-align: center !important; }
+ .align-x#{$bp}-start { text-align: left !important; }
+ .align-x#{$bp}-end { text-align: right !important; }
+ .align-y#{$bp} { vertical-align: middle !important; }
+ .align-y#{$bp}-start { vertical-align: top !important; }
+ .align-y#{$bp}-end { vertical-align: bottom !important; }
+
+ // Border - Style
+ .b#{$bp}-dash { border-style: dashed !important; }
+ .b#{$bp}-dot-dash { border-style: dot-dash !important; }
+ .b#{$bp}-dot-dot-dash { border-style: dot-dot-dash !important; }
+ .b#{$bp}-dot { border-style: dotted !important; }
+ .b#{$bp}-double { border-style: double !important; }
+ .b#{$bp}-none { border-style: none !important; }
+ .b#{$bp}-solid { border-style: solid !important; }
+
+ // Display
+ @each $display in (block, inline, inline-block, grid, inline-grid, table, table-row, table-cell, none) {
+ .d#{$bp}-#{$display} { display: #{$display} !important; }
+ }
+
+ // Flex
+ .align#{$bp}-start { align-content: start !important; }
+ .align#{$bp}-end { align-content: end !important; }
+ .align#{$bp}-center { align-content: center !important; }
+ .align#{$bp}-baseline { align-content: baseline !important; }
+ .align#{$bp}-stretch { align-content: stretch !important; }
+ .align-items#{$bp}-start { align-items: start !important; }
+ .align-items#{$bp}-end { align-items: end !important; }
+ .align-items#{$bp}-center { align-items: center !important; }
+ .align-items#{$bp}-baseline { align-items: baseline !important; }
+ .align-items#{$bp}-stretch { align-items: stretch !important; }
+ .align-self#{$bp}-start { align-self: start !important; }
+ .align-self#{$bp}-end { align-self: end !important; }
+ .align-self#{$bp}-center { align-self: center !important; }
+ .align-self#{$bp}-baseline { align-self: baseline !important; }
+ .align-self#{$bp}-stretch { align-self: stretch !important; }
+ .flex#{$bp}-c {
+ display: flex !important;
+ flex-direction: column !important;
+ }
+ .flex#{$bp}-cr {
+ display: flex !important;
+ flex-direction: column-reverse !important;
+ }
+ .flex#{$bp}-r {
+ display: flex !important;
+ flex-direction: row !important;
+ }
+ .flex#{$bp}-rr {
+ display: flex !important;
+ flex-direction: row-reverse !important;
+ }
+ .flex-inline#{$bp}-c {
+ display: inline-flex !important;
+ flex-direction: column !important;
+ }
+ .flex-inline#{$bp}-cr {
+ display: inline-flex !important;
+ flex-direction: column-reverse !important;
+ }
+ .flex-inline#{$bp}-r {
+ display: inline-flex !important;
+ flex-direction: row !important;
+ }
+ .flex-inline#{$bp}-rr {
+ display: inline-flex !important;
+ flex-direction: row-reverse !important;
+ }
+ .flex#{$bp}-fill { flex: 1 1 auto; }
+ .flex#{$bp}-expand {
+ flex-basis: 0 !important;
+ flex-grow: 1 !important;
+ }
+ .flex#{$bp}-grow-1 { flex-grow: 1 !important; }
+ .flex#{$bp}-shrink-1 { flex-shrink: 1 !important; }
+ .flex#{$bp}-grow-0 { flex-grow: 0 !important; }
+ .flex#{$bp}-shrink-0 { flex-shrink: 0 !important; }
+ .flex#{$bp}-nowrap { flex-wrap: nowrap !important; }
+ .flex#{$bp}-wrap { flex-wrap: wrap !important; }
+ .justify#{$bp}-start { justify-content: start !important; }
+ .justify#{$bp}-end { justify-content: end !important; }
+ .justify#{$bp}-center { justify-content: center !important; }
+ .justify#{$bp}-between { justify-content: space-between !important; }
+ .justify#{$bp}-around { justify-content: space-around !important; }
+ .justify#{$bp}-evenly { justify-content: space-evenly !important; }
+
+ // Float
+ @each $f, $float in ('start': 'left', 'end': 'right', 'none': 'none') {
+ .float#{$bp}-#{$f} { float: #{$float} !important; }
+ }
+
+ // Object Fit
+ .fit#{$bp}-contain { object-fit: contain !important; }
+ .fit#{$bp}-cover { object-fit: cover !important; }
+ .fit#{$bp}-fill { object-fit: fill !important; }
+ .fit#{$bp}-scale { object-fit: scale-down !important; }
+ .fit#{$bp}-none { object-fit: none !important; }
+
+ // Overflow
+ @each $opt in ('auto', 'hidden', 'scroll', 'visible') {
+ .overflow#{$bp}-#{$opt} { overflow: #{$opt} !important; }
+ .overflow-x#{$bp}-#{$opt} { overflow-x: #{$opt} !important; }
+ .overflow-y#{$bp}-#{$opt} { overflow-y: #{$opt} !important; }
+ }
+
+ // Position
+ @each $pos in ('absolute', 'fixed', 'relative', 'static', 'sticky') {
+ .pos#{$bp}-#{$pos} { position: #{$pos} !important; }
+ }
+
+ @each $s, $size in $sizes {
+ .b#{$bp}-#{$s} { border: #{$s}px solid !important; } // Border
+ .m#{$bp}-#{$s} { margin: $size !important; } // Margin
+ .p#{$bp}-#{$s} { padding: $size !important; } // Padding
+ .bx#{$bp}-#{$s} { // Border
+ border-left: #{$s}px solid !important;
+ border-right: #{$s}px solid !important;
+ }
+ .mx#{$bp}-#{$s} { // Margin
+ margin-left: $size !important;
+ margin-right: $size !important;
+ }
+ .px#{$bp}-#{$s} { // Padding
+ padding-left: $size !important;
+ padding-right: $size !important;
+ }
+ .by#{$bp}-#{$s} { // Border
+ border-top: #{$s}px solid !important;
+ border-bottom: #{$s}px solid !important;
+ }
+ .my#{$bp}-#{$s} { // Margin
+ margin-top: $size !important;
+ margin-bottom: $size !important;
+ }
+ .py#{$bp}-#{$s} { // Padding
+ padding-top: $size !important;
+ padding-bottom: $size !important;
+ }
+
+ .order#{$bp}-#{$s} { order: $s !important; } // Flex order
+
+ @each $d, $dir in $direction {
+ .b#{$d}#{$bp}-#{$s} { border-#{$dir}: #{$s}px solid !important; } // Border
+ .m#{$d}#{$bp}-#{$s} { margin-#{$dir}: $size !important; } // Margin
+ .p#{$d}#{$bp}-#{$s} { padding-#{$dir}: $size !important; } // Padding
+ }
+ }
+}
+
+@include utilities(null);
+@media print {
+ @include utilities('print');
+}
+@each $breakpoint, $min-width in $breakpoints {
+ @media (min-width: #{$min-width}) {
+ @include utilities($breakpoint);
+ }
+}