diff --git a/.gitignore b/.gitignore
index c8686f8..8f41f9d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
/.idea/codeStyles/codeStyleConfig.xml
+/node_modules/
diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml
index afeb635..fc2e694 100644
--- a/.idea/watcherTasks.xml
+++ b/.idea/watcherTasks.xml
@@ -14,9 +14,9 @@
-
+
-
+
@@ -45,7 +45,7 @@
-
+
@@ -54,9 +54,9 @@
-
+
-
+
diff --git a/anym-utility.css b/anym-utility.css
index b2c0319..ad02c53 100644
--- a/anym-utility.css
+++ b/anym-utility.css
@@ -144,6 +144,46 @@
flex-basis: 300px;
}
+.flex-basis-310 {
+ flex-basis: 310px;
+}
+
+.flex-basis-320 {
+ flex-basis: 320px;
+}
+
+.flex-basis-330 {
+ flex-basis: 330px;
+}
+
+.flex-basis-340 {
+ flex-basis: 340px;
+}
+
+.flex-basis-350 {
+ flex-basis: 350px;
+}
+
+.flex-basis-360 {
+ flex-basis: 360px;
+}
+
+.flex-basis-370 {
+ flex-basis: 370px;
+}
+
+.flex-basis-380 {
+ flex-basis: 380px;
+}
+
+.flex-basis-390 {
+ flex-basis: 390px;
+}
+
+.flex-basis-400 {
+ flex-basis: 400px;
+}
+
.basis {
flex-basis: 100px;
}
@@ -189,7 +229,7 @@
}
.gap {
- gap: 10px;
+ gap: 10;
}
.align-center {
diff --git a/anym-utility.css.map b/anym-utility.css.map
index f7c5149..2537cd6 100644
--- a/anym-utility.css.map
+++ b/anym-utility.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["utils/flex/_flexbox.scss","abstracts/_mixins.scss","utils/flex/_basis.scss","utils/flex/_gap.scss","utils/flex/_align.scss"],"names":[],"mappings":"AAEA;EACE;;AAEA;EACE;;AAGF;EACE;;AAEF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EClBA;EACA;EACA;;;ACPA;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AAIJ;EACE;;;ACNA;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AAIJ;EACE;;;ACRA;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;;AAKF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE","file":"anym-utility.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["utils/flex/_flexbox.scss","abstracts/_mixins.scss","utils/flex/_basis.scss","utils/flex/_gap.scss","utils/flex/_align.scss"],"names":[],"mappings":"AAGE;EACE;;AAEA;EACE;;AAGF;EACE;;AAEF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;ECnBF;EACA;EACA;;;ACLE;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AAIJ;EACE;;;ACNA;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AAIJ;EACE;;;ACRA;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;;AAKF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE","file":"anym-utility.css"}
\ No newline at end of file
diff --git a/anym-utility.min.css b/anym-utility.min.css
index 8ff8d05..dc25c16 100644
--- a/anym-utility.min.css
+++ b/anym-utility.min.css
@@ -1 +1 @@
-.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-grow{flex-grow:1}.flex-column,.flex-row{display:flex;flex-direction:column}.flex-row{flex-direction:row}.flex-center{display:flex;justify-content:center;align-items:center}.flex-basis-10{flex-basis:10px}.flex-basis-20{flex-basis:20px}.flex-basis-30{flex-basis:30px}.flex-basis-40{flex-basis:40px}.flex-basis-50{flex-basis:50px}.flex-basis-60{flex-basis:60px}.flex-basis-70{flex-basis:70px}.flex-basis-80{flex-basis:80px}.flex-basis-90{flex-basis:90px}.flex-basis-100{flex-basis:100px}.flex-basis-110{flex-basis:110px}.flex-basis-120{flex-basis:120px}.flex-basis-130{flex-basis:130px}.flex-basis-140{flex-basis:140px}.flex-basis-150{flex-basis:150px}.flex-basis-160{flex-basis:160px}.flex-basis-170{flex-basis:170px}.flex-basis-180{flex-basis:180px}.flex-basis-190{flex-basis:190px}.flex-basis-200{flex-basis:200px}.flex-basis-210{flex-basis:210px}.flex-basis-220{flex-basis:220px}.flex-basis-230{flex-basis:230px}.flex-basis-240{flex-basis:240px}.flex-basis-250{flex-basis:250px}.flex-basis-260{flex-basis:260px}.flex-basis-270{flex-basis:270px}.flex-basis-280{flex-basis:280px}.flex-basis-290{flex-basis:290px}.flex-basis-300{flex-basis:300px}.basis{flex-basis:100px}.gap-5{gap:5px}.gap-10{gap:10px}.gap-15{gap:15px}.gap-20{gap:20px}.gap-25{gap:25px}.gap-30{gap:30px}.gap-35{gap:35px}.gap-40{gap:40px}.gap-45{gap:45px}.gap-50{gap:50px}.gap{gap:10px}.align-center{align-items:center}.align-start{align-items:flex-start}.align-end{align-items:flex-end}.align-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}
\ No newline at end of file
+.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-grow{flex-grow:1}.flex-column,.flex-row{display:flex;flex-direction:column}.flex-row{flex-direction:row}.flex-center{display:flex;justify-content:center;align-items:center}.flex-basis-10{flex-basis:10px}.flex-basis-20{flex-basis:20px}.flex-basis-30{flex-basis:30px}.flex-basis-40{flex-basis:40px}.flex-basis-50{flex-basis:50px}.flex-basis-60{flex-basis:60px}.flex-basis-70{flex-basis:70px}.flex-basis-80{flex-basis:80px}.flex-basis-90{flex-basis:90px}.flex-basis-100{flex-basis:100px}.flex-basis-110{flex-basis:110px}.flex-basis-120{flex-basis:120px}.flex-basis-130{flex-basis:130px}.flex-basis-140{flex-basis:140px}.flex-basis-150{flex-basis:150px}.flex-basis-160{flex-basis:160px}.flex-basis-170{flex-basis:170px}.flex-basis-180{flex-basis:180px}.flex-basis-190{flex-basis:190px}.flex-basis-200{flex-basis:200px}.flex-basis-210{flex-basis:210px}.flex-basis-220{flex-basis:220px}.flex-basis-230{flex-basis:230px}.flex-basis-240{flex-basis:240px}.flex-basis-250{flex-basis:250px}.flex-basis-260{flex-basis:260px}.flex-basis-270{flex-basis:270px}.flex-basis-280{flex-basis:280px}.flex-basis-290{flex-basis:290px}.flex-basis-300{flex-basis:300px}.flex-basis-310{flex-basis:310px}.flex-basis-320{flex-basis:320px}.flex-basis-330{flex-basis:330px}.flex-basis-340{flex-basis:340px}.flex-basis-350{flex-basis:350px}.flex-basis-360{flex-basis:360px}.flex-basis-370{flex-basis:370px}.flex-basis-380{flex-basis:380px}.flex-basis-390{flex-basis:390px}.flex-basis-400{flex-basis:400px}.basis{flex-basis:100px}.gap-5{gap:5px}.gap-10{gap:10px}.gap-15{gap:15px}.gap-20{gap:20px}.gap-25{gap:25px}.gap-30{gap:30px}.gap-35{gap:35px}.gap-40{gap:40px}.gap-45{gap:45px}.gap-50{gap:50px}.gap{gap:10}.align-center{align-items:center}.align-start{align-items:flex-start}.align-end{align-items:flex-end}.align-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}
\ No newline at end of file
diff --git a/anym-utility.scss b/anym-utility.scss
index 826735c..0c90bcd 100644
--- a/anym-utility.scss
+++ b/anym-utility.scss
@@ -1,2 +1,7 @@
@forward 'abstracts/mixins';
-@forward 'utils';
\ No newline at end of file
+@use 'utils';
+
+@include utils.flexbox();
+@include utils.flex-basis();
+@include utils.flex-gap();
+@include utils.flex-align();
\ No newline at end of file
diff --git a/core.scss b/core.scss
new file mode 100644
index 0000000..826735c
--- /dev/null
+++ b/core.scss
@@ -0,0 +1,2 @@
+@forward 'abstracts/mixins';
+@forward 'utils';
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 99d24ed..271db0c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,349 @@
{
"name": "anym-utility-css",
- "version": "1.0.0",
+ "version": "1.0.2",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "anym-utility-css",
- "version": "1.0.0",
- "license": "ISC"
+ "version": "1.0.2",
+ "license": "ISC",
+ "dependencies": {
+ "sass": "^1.62.1"
+ }
+ },
+ "node_modules/anymatch": {
+ "version": "3.1.3",
+ "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+ "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+ "dependencies": {
+ "normalize-path": "^3.0.0",
+ "picomatch": "^2.0.4"
+ },
+ "engines": {
+ "node": ">= 8"
+ }
+ },
+ "node_modules/binary-extensions": {
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+ "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/braces": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+ "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+ "dependencies": {
+ "fill-range": "^7.0.1"
+ },
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/chokidar": {
+ "version": "3.5.3",
+ "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+ "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+ "funding": [
+ {
+ "type": "individual",
+ "url": "https://paulmillr.com/funding/"
+ }
+ ],
+ "dependencies": {
+ "anymatch": "~3.1.2",
+ "braces": "~3.0.2",
+ "glob-parent": "~5.1.2",
+ "is-binary-path": "~2.1.0",
+ "is-glob": "~4.0.1",
+ "normalize-path": "~3.0.0",
+ "readdirp": "~3.6.0"
+ },
+ "engines": {
+ "node": ">= 8.10.0"
+ },
+ "optionalDependencies": {
+ "fsevents": "~2.3.2"
+ }
+ },
+ "node_modules/fill-range": {
+ "version": "7.0.1",
+ "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+ "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+ "dependencies": {
+ "to-regex-range": "^5.0.1"
+ },
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/fsevents": {
+ "version": "2.3.2",
+ "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+ "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+ "hasInstallScript": true,
+ "optional": true,
+ "os": [
+ "darwin"
+ ],
+ "engines": {
+ "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+ }
+ },
+ "node_modules/glob-parent": {
+ "version": "5.1.2",
+ "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+ "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+ "dependencies": {
+ "is-glob": "^4.0.1"
+ },
+ "engines": {
+ "node": ">= 6"
+ }
+ },
+ "node_modules/immutable": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
+ "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg=="
+ },
+ "node_modules/is-binary-path": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+ "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+ "dependencies": {
+ "binary-extensions": "^2.0.0"
+ },
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "node_modules/is-extglob": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+ "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+ "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==",
+ "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==",
+ "engines": {
+ "node": ">=0.12.0"
+ }
+ },
+ "node_modules/normalize-path": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+ "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/picomatch": {
+ "version": "2.3.1",
+ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+ "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+ "engines": {
+ "node": ">=8.6"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/jonschlinkert"
+ }
+ },
+ "node_modules/readdirp": {
+ "version": "3.6.0",
+ "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+ "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+ "dependencies": {
+ "picomatch": "^2.2.1"
+ },
+ "engines": {
+ "node": ">=8.10.0"
+ }
+ },
+ "node_modules/sass": {
+ "version": "1.62.1",
+ "resolved": "https://registry.npmjs.org/sass/-/sass-1.62.1.tgz",
+ "integrity": "sha512-NHpxIzN29MXvWiuswfc1W3I0N8SXBd8UR26WntmDlRYf0bSADnwnOjsyMZ3lMezSlArD33Vs3YFhp7dWvL770A==",
+ "dependencies": {
+ "chokidar": ">=3.0.0 <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"
+ }
+ },
+ "node_modules/source-map-js": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+ "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+ "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==",
+ "dependencies": {
+ "is-number": "^7.0.0"
+ },
+ "engines": {
+ "node": ">=8.0"
+ }
+ }
+ },
+ "dependencies": {
+ "anymatch": {
+ "version": "3.1.3",
+ "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+ "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+ "requires": {
+ "normalize-path": "^3.0.0",
+ "picomatch": "^2.0.4"
+ }
+ },
+ "binary-extensions": {
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+ "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
+ },
+ "braces": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+ "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+ "requires": {
+ "fill-range": "^7.0.1"
+ }
+ },
+ "chokidar": {
+ "version": "3.5.3",
+ "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+ "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+ "requires": {
+ "anymatch": "~3.1.2",
+ "braces": "~3.0.2",
+ "fsevents": "~2.3.2",
+ "glob-parent": "~5.1.2",
+ "is-binary-path": "~2.1.0",
+ "is-glob": "~4.0.1",
+ "normalize-path": "~3.0.0",
+ "readdirp": "~3.6.0"
+ }
+ },
+ "fill-range": {
+ "version": "7.0.1",
+ "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+ "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+ "requires": {
+ "to-regex-range": "^5.0.1"
+ }
+ },
+ "fsevents": {
+ "version": "2.3.2",
+ "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+ "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+ "optional": true
+ },
+ "glob-parent": {
+ "version": "5.1.2",
+ "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+ "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+ "requires": {
+ "is-glob": "^4.0.1"
+ }
+ },
+ "immutable": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
+ "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg=="
+ },
+ "is-binary-path": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+ "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+ "requires": {
+ "binary-extensions": "^2.0.0"
+ }
+ },
+ "is-extglob": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+ "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="
+ },
+ "is-glob": {
+ "version": "4.0.3",
+ "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+ "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+ "requires": {
+ "is-extglob": "^2.1.1"
+ }
+ },
+ "is-number": {
+ "version": "7.0.0",
+ "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+ "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
+ },
+ "normalize-path": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+ "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
+ },
+ "picomatch": {
+ "version": "2.3.1",
+ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+ "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
+ },
+ "readdirp": {
+ "version": "3.6.0",
+ "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+ "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+ "requires": {
+ "picomatch": "^2.2.1"
+ }
+ },
+ "sass": {
+ "version": "1.62.1",
+ "resolved": "https://registry.npmjs.org/sass/-/sass-1.62.1.tgz",
+ "integrity": "sha512-NHpxIzN29MXvWiuswfc1W3I0N8SXBd8UR26WntmDlRYf0bSADnwnOjsyMZ3lMezSlArD33Vs3YFhp7dWvL770A==",
+ "requires": {
+ "chokidar": ">=3.0.0 <4.0.0",
+ "immutable": "^4.0.0",
+ "source-map-js": ">=0.6.2 <2.0.0"
+ }
+ },
+ "source-map-js": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+ "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+ },
+ "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==",
+ "requires": {
+ "is-number": "^7.0.0"
+ }
}
}
}
diff --git a/package.json b/package.json
index 5a7dffc..4fe4a2f 100644
--- a/package.json
+++ b/package.json
@@ -28,5 +28,8 @@
"publishConfig": {
"access": "public",
"@anymfah:registry": "https://npm.pkg.github.com/"
+ },
+ "dependencies": {
+ "sass": "^1.62.1"
}
}
diff --git a/utils/flex/_align.scss b/utils/flex/_align.scss
index 53d0737..168da28 100644
--- a/utils/flex/_align.scss
+++ b/utils/flex/_align.scss
@@ -1,32 +1,35 @@
-.align {
- &-center {
- align-items: center;
- }
- &-start {
- align-items: flex-start;
- }
- &-end {
- align-items: flex-end;
- }
- &-stretch {
- align-items: stretch;
- }
-}
-.justify {
- &-center {
- justify-content: center;
+@mixin flex-align {
+ .align {
+ &-center {
+ align-items: center;
+ }
+ &-start {
+ align-items: flex-start;
+ }
+ &-end {
+ align-items: flex-end;
+ }
+ &-stretch {
+ align-items: stretch;
+ }
}
- &-start {
- justify-content: flex-start;
- }
- &-end {
- justify-content: flex-end;
- }
- &-between {
- justify-content: space-between;
- }
- &-around {
- justify-content: space-around;
+
+ .justify {
+ &-center {
+ justify-content: center;
+ }
+ &-start {
+ justify-content: flex-start;
+ }
+ &-end {
+ justify-content: flex-end;
+ }
+ &-between {
+ justify-content: space-between;
+ }
+ &-around {
+ justify-content: space-around;
+ }
}
-}
\ No newline at end of file
+}
diff --git a/utils/flex/_basis.scss b/utils/flex/_basis.scss
index 39c67c2..7c1327f 100644
--- a/utils/flex/_basis.scss
+++ b/utils/flex/_basis.scss
@@ -1,11 +1,14 @@
-@for $i from 1 through 30 {
- $val: $i * 10;
- .flex-basis-#{$val} {
- flex-basis: #{$val}px;
+@mixin flex-basis($max: 400) {
+ $max: $max / 10;
+ @for $i from 1 through $max {
+ $val: $i * 10;
+ .flex-basis-#{$val} {
+ flex-basis: #{$val}px;
+ }
}
-}
-.basis {
- flex-basis: 100px;
-}
\ No newline at end of file
+ .basis {
+ flex-basis: 100px;
+ }
+}
diff --git a/utils/flex/_flexbox.scss b/utils/flex/_flexbox.scss
index ce51b4c..17cb05f 100644
--- a/utils/flex/_flexbox.scss
+++ b/utils/flex/_flexbox.scss
@@ -1,30 +1,32 @@
@use '../../abstracts/mixins';
-.flex {
- display: flex;
+@mixin flexbox() {
+ .flex {
+ display: flex;
- &-wrap {
- flex-wrap: wrap;
- }
+ &-wrap {
+ flex-wrap: wrap;
+ }
- &-nowrap {
- flex-wrap: nowrap;
- }
- &-grow {
- flex-grow: 1;
- }
+ &-nowrap {
+ flex-wrap: nowrap;
+ }
+ &-grow {
+ flex-grow: 1;
+ }
- &-column {
- display: flex;
- flex-direction: column;
- }
+ &-column {
+ display: flex;
+ flex-direction: column;
+ }
- &-row {
- display: flex;
- flex-direction: row;
- }
+ &-row {
+ display: flex;
+ flex-direction: row;
+ }
- &-center {
- @include mixins.centered;
+ &-center {
+ @include mixins.centered;
+ }
}
-}
\ No newline at end of file
+}
diff --git a/utils/flex/_gap.scss b/utils/flex/_gap.scss
index 7ecdaed..f10be9f 100644
--- a/utils/flex/_gap.scss
+++ b/utils/flex/_gap.scss
@@ -1,11 +1,14 @@
-@for $i from 1 through 10 {
- $val: $i * 5;
- .gap-#{$val} {
- gap: #{$val}px;
+@mixin flex-gap($max: 50, $steps: 5) {
+ $max: $max / $steps;
+ @for $i from 1 through $max {
+ $val: $i * $steps;
+ .gap-#{$val} {
+ gap: #{$val}px;
+ }
}
-}
-.gap {
- gap: 10px;
-}
\ No newline at end of file
+ .gap {
+ gap: $steps * 2;
+ }
+}