Compare commits

..

No commits in common. "develop" and "1.0.1" have entirely different histories.

10 changed files with 608 additions and 1696 deletions

View File

@ -42,12 +42,3 @@ jobs:
uses: ztimson/actions/tag@develop uses: ztimson/actions/tag@develop
with: with:
tag: ${{env.VERSION}} tag: ${{env.VERSION}}
docs:
name: Publish CDN & Docs
needs: build
uses: ztimson/actions/.github/workflows/docker.yaml@develop
with:
name: ztimson/css-utils
repository: ${{github.server_url}}/${{github.repository}}.git
pass: ${{secrets.DEPLOY_TOKEN}}

View File

@ -4,3 +4,4 @@ node_modules
.editorconfig .editorconfig
.gitignore .gitignore
CODEOWNERS CODEOWNERS
index.html

View File

@ -1,17 +0,0 @@
# Build application
FROM node:alpine as build
RUN mkdir /app
WORKDIR /app
COPY . .
RUN if [ ! -d "node_modules" ]; then npm i; fi && \
if [ ! -d "dist/css-utils.css" ]; then npm run build; fi
# Use Nginx to serve
FROM nginx:1.23-alpine
COPY --from=build /app/dist /usr/share/nginx/html/dist
COPY src /usr/share/nginx/html/src
COPY index.html /usr/share/nginx/html
COPY wave.webp /usr/share/nginx/html
COPY favicon.webp /usr/share/nginx/html

View File

@ -20,7 +20,7 @@
--- ---
<div> <div>
<a href="https://css.zakscode.com" target="_blank">Documentation</a> <a href="https://git.zakscode.com/ztimson/css-utils/wiki" target="_blank">Documentation</a>
<a href="https://git.zakscode.com/ztimson/css-utils/releases" target="_blank">Release Notes</a> <a href="https://git.zakscode.com/ztimson/css-utils/releases" target="_blank">Release Notes</a>
<a href="https://git.zakscode.com/ztimson/css-utils/issues/new?template=.github%2fissue_template%2fbug.md" target="_blank">Report a Bug</a> <a href="https://git.zakscode.com/ztimson/css-utils/issues/new?template=.github%2fissue_template%2fbug.md" target="_blank">Report a Bug</a>
<a href="https://git.zakscode.com/ztimson/css-utils/issues/new?template=.github%2fissue_template%2fenhancement.md" target="_blank">Request a Feature</a> <a href="https://git.zakscode.com/ztimson/css-utils/issues/new?template=.github%2fissue_template%2fenhancement.md" target="_blank">Request a Feature</a>
@ -36,7 +36,7 @@
- [Setup](#setup) - [Setup](#setup)
- [Production](#production) - [Production](#production)
- [Development](#development) - [Development](#development)
- [Documentation](https://css.zakscode.com) - [Documentation](#documentation)
- [License](#license) - [License](#license)
## About ## About
@ -83,9 +83,6 @@ Some extra classes have been added and a few class name changed to match convent
</details> </details>
## Documentation
https://css.zaskscode.com
## License ## License
Copyright © 2023 Zakary Timson | Available under MIT Licensing Copyright © 2023 Zakary Timson | Available under MIT Licensing

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

1015
index.html

File diff suppressed because it is too large Load Diff

955
package-lock.json generated
View File

@ -1,494 +1,465 @@
{ {
"name": "@ztimson/css-utils", "name": "@ztimson/css-utils",
"version": "1.2.1", "version": "1.0.0",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@ztimson/css-utils", "name": "@ztimson/css-utils",
"version": "1.2.1", "version": "1.0.0",
"license": "MIT", "license": "MIT",
"devDependencies": { "dependencies": {
"sass": "^1.80.6" "sass": "^1.80.6"
} }
}, },
"node_modules/@parcel/watcher": { "node_modules/@parcel/watcher": {
"version": "2.5.0", "version": "2.5.0",
"resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.0.tgz", "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.0.tgz",
"integrity": "sha512-i0GV1yJnm2n3Yq1qw6QrUrd/LI9bE8WEBOTtOkpCXHHdyN3TAGgqAK/DAT05z4fq2x04cARXt2pDmjWjL92iTQ==", "integrity": "sha512-i0GV1yJnm2n3Yq1qw6QrUrd/LI9bE8WEBOTtOkpCXHHdyN3TAGgqAK/DAT05z4fq2x04cARXt2pDmjWjL92iTQ==",
"dev": true, "hasInstallScript": true,
"hasInstallScript": true, "optional": true,
"optional": true, "dependencies": {
"dependencies": { "detect-libc": "^1.0.3",
"detect-libc": "^1.0.3", "is-glob": "^4.0.3",
"is-glob": "^4.0.3", "micromatch": "^4.0.5",
"micromatch": "^4.0.5", "node-addon-api": "^7.0.0"
"node-addon-api": "^7.0.0" },
}, "engines": {
"engines": { "node": ">= 10.0.0"
"node": ">= 10.0.0" },
}, "funding": {
"funding": { "type": "opencollective",
"type": "opencollective", "url": "https://opencollective.com/parcel"
"url": "https://opencollective.com/parcel" },
}, "optionalDependencies": {
"optionalDependencies": { "@parcel/watcher-android-arm64": "2.5.0",
"@parcel/watcher-android-arm64": "2.5.0", "@parcel/watcher-darwin-arm64": "2.5.0",
"@parcel/watcher-darwin-arm64": "2.5.0", "@parcel/watcher-darwin-x64": "2.5.0",
"@parcel/watcher-darwin-x64": "2.5.0", "@parcel/watcher-freebsd-x64": "2.5.0",
"@parcel/watcher-freebsd-x64": "2.5.0", "@parcel/watcher-linux-arm-glibc": "2.5.0",
"@parcel/watcher-linux-arm-glibc": "2.5.0", "@parcel/watcher-linux-arm-musl": "2.5.0",
"@parcel/watcher-linux-arm-musl": "2.5.0", "@parcel/watcher-linux-arm64-glibc": "2.5.0",
"@parcel/watcher-linux-arm64-glibc": "2.5.0", "@parcel/watcher-linux-arm64-musl": "2.5.0",
"@parcel/watcher-linux-arm64-musl": "2.5.0", "@parcel/watcher-linux-x64-glibc": "2.5.0",
"@parcel/watcher-linux-x64-glibc": "2.5.0", "@parcel/watcher-linux-x64-musl": "2.5.0",
"@parcel/watcher-linux-x64-musl": "2.5.0", "@parcel/watcher-win32-arm64": "2.5.0",
"@parcel/watcher-win32-arm64": "2.5.0", "@parcel/watcher-win32-ia32": "2.5.0",
"@parcel/watcher-win32-ia32": "2.5.0", "@parcel/watcher-win32-x64": "2.5.0"
"@parcel/watcher-win32-x64": "2.5.0" }
} },
}, "node_modules/@parcel/watcher-android-arm64": {
"node_modules/@parcel/watcher-android-arm64": { "version": "2.5.0",
"version": "2.5.0", "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.0.tgz",
"resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.0.tgz", "integrity": "sha512-qlX4eS28bUcQCdribHkg/herLe+0A9RyYC+mm2PXpncit8z5b3nSqGVzMNR3CmtAOgRutiZ02eIJJgP/b1iEFQ==",
"integrity": "sha512-qlX4eS28bUcQCdribHkg/herLe+0A9RyYC+mm2PXpncit8z5b3nSqGVzMNR3CmtAOgRutiZ02eIJJgP/b1iEFQ==", "cpu": [
"cpu": [ "arm64"
"arm64" ],
], "optional": true,
"dev": true, "os": [
"optional": true, "android"
"os": [ ],
"android" "engines": {
], "node": ">= 10.0.0"
"engines": { },
"node": ">= 10.0.0" "funding": {
}, "type": "opencollective",
"funding": { "url": "https://opencollective.com/parcel"
"type": "opencollective", }
"url": "https://opencollective.com/parcel" },
} "node_modules/@parcel/watcher-darwin-arm64": {
}, "version": "2.5.0",
"node_modules/@parcel/watcher-darwin-arm64": { "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.0.tgz",
"version": "2.5.0", "integrity": "sha512-hyZ3TANnzGfLpRA2s/4U1kbw2ZI4qGxaRJbBH2DCSREFfubMswheh8TeiC1sGZ3z2jUf3s37P0BBlrD3sjVTUw==",
"resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.0.tgz", "cpu": [
"integrity": "sha512-hyZ3TANnzGfLpRA2s/4U1kbw2ZI4qGxaRJbBH2DCSREFfubMswheh8TeiC1sGZ3z2jUf3s37P0BBlrD3sjVTUw==", "arm64"
"cpu": [ ],
"arm64" "optional": true,
], "os": [
"dev": true, "darwin"
"optional": true, ],
"os": [ "engines": {
"darwin" "node": ">= 10.0.0"
], },
"engines": { "funding": {
"node": ">= 10.0.0" "type": "opencollective",
}, "url": "https://opencollective.com/parcel"
"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",
"node_modules/@parcel/watcher-darwin-x64": { "integrity": "sha512-9rhlwd78saKf18fT869/poydQK8YqlU26TMiNg7AIu7eBp9adqbJZqmdFOsbZ5cnLp5XvRo9wcFmNHgHdWaGYA==",
"version": "2.5.0", "cpu": [
"resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.0.tgz", "x64"
"integrity": "sha512-9rhlwd78saKf18fT869/poydQK8YqlU26TMiNg7AIu7eBp9adqbJZqmdFOsbZ5cnLp5XvRo9wcFmNHgHdWaGYA==", ],
"cpu": [ "optional": true,
"x64" "os": [
], "darwin"
"dev": true, ],
"optional": true, "engines": {
"os": [ "node": ">= 10.0.0"
"darwin" },
], "funding": {
"engines": { "type": "opencollective",
"node": ">= 10.0.0" "url": "https://opencollective.com/parcel"
}, }
"funding": { },
"type": "opencollective", "node_modules/@parcel/watcher-freebsd-x64": {
"url": "https://opencollective.com/parcel" "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==",
"node_modules/@parcel/watcher-freebsd-x64": { "cpu": [
"version": "2.5.0", "x64"
"resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.0.tgz", ],
"integrity": "sha512-syvfhZzyM8kErg3VF0xpV8dixJ+RzbUaaGaeb7uDuz0D3FK97/mZ5AJQ3XNnDsXX7KkFNtyQyFrXZzQIcN49Tw==", "optional": true,
"cpu": [ "os": [
"x64" "freebsd"
], ],
"dev": true, "engines": {
"optional": true, "node": ">= 10.0.0"
"os": [ },
"freebsd" "funding": {
], "type": "opencollective",
"engines": { "url": "https://opencollective.com/parcel"
"node": ">= 10.0.0" }
}, },
"funding": { "node_modules/@parcel/watcher-linux-arm-glibc": {
"type": "opencollective", "version": "2.5.0",
"url": "https://opencollective.com/parcel" "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.0.tgz",
} "integrity": "sha512-0VQY1K35DQET3dVYWpOaPFecqOT9dbuCfzjxoQyif1Wc574t3kOSkKevULddcR9znz1TcklCE7Ht6NIxjvTqLA==",
}, "cpu": [
"node_modules/@parcel/watcher-linux-arm-glibc": { "arm"
"version": "2.5.0", ],
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.0.tgz", "optional": true,
"integrity": "sha512-0VQY1K35DQET3dVYWpOaPFecqOT9dbuCfzjxoQyif1Wc574t3kOSkKevULddcR9znz1TcklCE7Ht6NIxjvTqLA==", "os": [
"cpu": [ "linux"
"arm" ],
], "engines": {
"dev": true, "node": ">= 10.0.0"
"optional": true, },
"os": [ "funding": {
"linux" "type": "opencollective",
], "url": "https://opencollective.com/parcel"
"engines": { }
"node": ">= 10.0.0" },
}, "node_modules/@parcel/watcher-linux-arm-musl": {
"funding": { "version": "2.5.0",
"type": "opencollective", "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.0.tgz",
"url": "https://opencollective.com/parcel" "integrity": "sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA==",
} "cpu": [
}, "arm"
"node_modules/@parcel/watcher-linux-arm-musl": { ],
"version": "2.5.0", "optional": true,
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.0.tgz", "os": [
"integrity": "sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA==", "linux"
"cpu": [ ],
"arm" "engines": {
], "node": ">= 10.0.0"
"dev": true, },
"optional": true, "funding": {
"os": [ "type": "opencollective",
"linux" "url": "https://opencollective.com/parcel"
], }
"engines": { },
"node": ">= 10.0.0" "node_modules/@parcel/watcher-linux-arm64-glibc": {
}, "version": "2.5.0",
"funding": { "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.0.tgz",
"type": "opencollective", "integrity": "sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA==",
"url": "https://opencollective.com/parcel" "cpu": [
} "arm64"
}, ],
"node_modules/@parcel/watcher-linux-arm64-glibc": { "optional": true,
"version": "2.5.0", "os": [
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.0.tgz", "linux"
"integrity": "sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA==", ],
"cpu": [ "engines": {
"arm64" "node": ">= 10.0.0"
], },
"dev": true, "funding": {
"optional": true, "type": "opencollective",
"os": [ "url": "https://opencollective.com/parcel"
"linux" }
], },
"engines": { "node_modules/@parcel/watcher-linux-arm64-musl": {
"node": ">= 10.0.0" "version": "2.5.0",
}, "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.0.tgz",
"funding": { "integrity": "sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q==",
"type": "opencollective", "cpu": [
"url": "https://opencollective.com/parcel" "arm64"
} ],
}, "optional": true,
"node_modules/@parcel/watcher-linux-arm64-musl": { "os": [
"version": "2.5.0", "linux"
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.0.tgz", ],
"integrity": "sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q==", "engines": {
"cpu": [ "node": ">= 10.0.0"
"arm64" },
], "funding": {
"dev": true, "type": "opencollective",
"optional": true, "url": "https://opencollective.com/parcel"
"os": [ }
"linux" },
], "node_modules/@parcel/watcher-linux-x64-glibc": {
"engines": { "version": "2.5.0",
"node": ">= 10.0.0" "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.0.tgz",
}, "integrity": "sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==",
"funding": { "cpu": [
"type": "opencollective", "x64"
"url": "https://opencollective.com/parcel" ],
} "optional": true,
}, "os": [
"node_modules/@parcel/watcher-linux-x64-glibc": { "linux"
"version": "2.5.0", ],
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.0.tgz", "engines": {
"integrity": "sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==", "node": ">= 10.0.0"
"cpu": [ },
"x64" "funding": {
], "type": "opencollective",
"dev": true, "url": "https://opencollective.com/parcel"
"optional": true, }
"os": [ },
"linux" "node_modules/@parcel/watcher-linux-x64-musl": {
], "version": "2.5.0",
"engines": { "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.0.tgz",
"node": ">= 10.0.0" "integrity": "sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==",
}, "cpu": [
"funding": { "x64"
"type": "opencollective", ],
"url": "https://opencollective.com/parcel" "optional": true,
} "os": [
}, "linux"
"node_modules/@parcel/watcher-linux-x64-musl": { ],
"version": "2.5.0", "engines": {
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.0.tgz", "node": ">= 10.0.0"
"integrity": "sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==", },
"cpu": [ "funding": {
"x64" "type": "opencollective",
], "url": "https://opencollective.com/parcel"
"dev": true, }
"optional": true, },
"os": [ "node_modules/@parcel/watcher-win32-arm64": {
"linux" "version": "2.5.0",
], "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.0.tgz",
"engines": { "integrity": "sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig==",
"node": ">= 10.0.0" "cpu": [
}, "arm64"
"funding": { ],
"type": "opencollective", "optional": true,
"url": "https://opencollective.com/parcel" "os": [
} "win32"
}, ],
"node_modules/@parcel/watcher-win32-arm64": { "engines": {
"version": "2.5.0", "node": ">= 10.0.0"
"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.0.tgz", },
"integrity": "sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig==", "funding": {
"cpu": [ "type": "opencollective",
"arm64" "url": "https://opencollective.com/parcel"
], }
"dev": true, },
"optional": true, "node_modules/@parcel/watcher-win32-ia32": {
"os": [ "version": "2.5.0",
"win32" "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.0.tgz",
], "integrity": "sha512-+rgpsNRKwo8A53elqbbHXdOMtY/tAtTzManTWShB5Kk54N8Q9mzNWV7tV+IbGueCbcj826MfWGU3mprWtuf1TA==",
"engines": { "cpu": [
"node": ">= 10.0.0" "ia32"
}, ],
"funding": { "optional": true,
"type": "opencollective", "os": [
"url": "https://opencollective.com/parcel" "win32"
} ],
}, "engines": {
"node_modules/@parcel/watcher-win32-ia32": { "node": ">= 10.0.0"
"version": "2.5.0", },
"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.0.tgz", "funding": {
"integrity": "sha512-+rgpsNRKwo8A53elqbbHXdOMtY/tAtTzManTWShB5Kk54N8Q9mzNWV7tV+IbGueCbcj826MfWGU3mprWtuf1TA==", "type": "opencollective",
"cpu": [ "url": "https://opencollective.com/parcel"
"ia32" }
], },
"dev": true, "node_modules/@parcel/watcher-win32-x64": {
"optional": true, "version": "2.5.0",
"os": [ "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.0.tgz",
"win32" "integrity": "sha512-lPrxve92zEHdgeff3aiu4gDOIt4u7sJYha6wbdEZDCDUhtjTsOMiaJzG5lMY4GkWH8p0fMmO2Ppq5G5XXG+DQw==",
], "cpu": [
"engines": { "x64"
"node": ">= 10.0.0" ],
}, "optional": true,
"funding": { "os": [
"type": "opencollective", "win32"
"url": "https://opencollective.com/parcel" ],
} "engines": {
}, "node": ">= 10.0.0"
"node_modules/@parcel/watcher-win32-x64": { },
"version": "2.5.0", "funding": {
"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.0.tgz", "type": "opencollective",
"integrity": "sha512-lPrxve92zEHdgeff3aiu4gDOIt4u7sJYha6wbdEZDCDUhtjTsOMiaJzG5lMY4GkWH8p0fMmO2Ppq5G5XXG+DQw==", "url": "https://opencollective.com/parcel"
"cpu": [ }
"x64" },
], "node_modules/braces": {
"dev": true, "version": "3.0.3",
"optional": true, "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
"os": [ "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
"win32" "optional": true,
], "dependencies": {
"engines": { "fill-range": "^7.1.1"
"node": ">= 10.0.0" },
}, "engines": {
"funding": { "node": ">=8"
"type": "opencollective", }
"url": "https://opencollective.com/parcel" },
} "node_modules/chokidar": {
}, "version": "4.0.1",
"node_modules/braces": { "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
"version": "3.0.3", "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", "dependencies": {
"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", "readdirp": "^4.0.1"
"dev": true, },
"optional": true, "engines": {
"dependencies": { "node": ">= 14.16.0"
"fill-range": "^7.1.1" },
}, "funding": {
"engines": { "url": "https://paulmillr.com/funding/"
"node": ">=8" }
} },
}, "node_modules/detect-libc": {
"node_modules/chokidar": { "version": "1.0.3",
"version": "4.0.1", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz", "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
"integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==", "optional": true,
"dev": true, "bin": {
"dependencies": { "detect-libc": "bin/detect-libc.js"
"readdirp": "^4.0.1" },
}, "engines": {
"engines": { "node": ">=0.10"
"node": ">= 14.16.0" }
}, },
"funding": { "node_modules/fill-range": {
"url": "https://paulmillr.com/funding/" "version": "7.1.1",
} "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
}, "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
"node_modules/detect-libc": { "optional": true,
"version": "1.0.3", "dependencies": {
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", "to-regex-range": "^5.0.1"
"integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==", },
"dev": true, "engines": {
"optional": true, "node": ">=8"
"bin": { }
"detect-libc": "bin/detect-libc.js" },
}, "node_modules/immutable": {
"engines": { "version": "4.3.7",
"node": ">=0.10" "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
} "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw=="
}, },
"node_modules/fill-range": { "node_modules/is-extglob": {
"version": "7.1.1", "version": "2.1.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
"dev": true, "optional": true,
"optional": true, "engines": {
"dependencies": { "node": ">=0.10.0"
"to-regex-range": "^5.0.1" }
}, },
"engines": { "node_modules/is-glob": {
"node": ">=8" "version": "4.0.3",
} "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
}, "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
"node_modules/immutable": { "optional": true,
"version": "4.3.7", "dependencies": {
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz", "is-extglob": "^2.1.1"
"integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==", },
"dev": true "engines": {
}, "node": ">=0.10.0"
"node_modules/is-extglob": { }
"version": "2.1.1", },
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "node_modules/is-number": {
"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", "version": "7.0.0",
"dev": true, "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
"optional": true, "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
"engines": { "optional": true,
"node": ">=0.10.0" "engines": {
} "node": ">=0.12.0"
}, }
"node_modules/is-glob": { },
"version": "4.0.3", "node_modules/micromatch": {
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "version": "4.0.8",
"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
"dev": true, "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
"optional": true, "optional": true,
"dependencies": { "dependencies": {
"is-extglob": "^2.1.1" "braces": "^3.0.3",
}, "picomatch": "^2.3.1"
"engines": { },
"node": ">=0.10.0" "engines": {
} "node": ">=8.6"
}, }
"node_modules/is-number": { },
"version": "7.0.0", "node_modules/node-addon-api": {
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "version": "7.1.1",
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
"dev": true, "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
"optional": true, "optional": true
"engines": { },
"node": ">=0.12.0" "node_modules/picomatch": {
} "version": "2.3.1",
}, "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
"node_modules/micromatch": { "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
"version": "4.0.8", "optional": true,
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", "engines": {
"integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", "node": ">=8.6"
"dev": true, },
"optional": true, "funding": {
"dependencies": { "url": "https://github.com/sponsors/jonschlinkert"
"braces": "^3.0.3", }
"picomatch": "^2.3.1" },
}, "node_modules/readdirp": {
"engines": { "version": "4.0.2",
"node": ">=8.6" "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",
} "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
}, "engines": {
"node_modules/node-addon-api": { "node": ">= 14.16.0"
"version": "7.1.1", },
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", "funding": {
"integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", "type": "individual",
"dev": true, "url": "https://paulmillr.com/funding/"
"optional": true }
}, },
"node_modules/picomatch": { "node_modules/sass": {
"version": "2.3.1", "version": "1.80.6",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "resolved": "https://registry.npmjs.org/sass/-/sass-1.80.6.tgz",
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", "integrity": "sha512-ccZgdHNiBF1NHBsWvacvT5rju3y1d/Eu+8Ex6c21nHp2lZGLBEtuwc415QfiI1PJa1TpCo3iXwwSRjRpn2Ckjg==",
"dev": true, "dependencies": {
"optional": true, "chokidar": "^4.0.0",
"engines": { "immutable": "^4.0.0",
"node": ">=8.6" "source-map-js": ">=0.6.2 <2.0.0"
}, },
"funding": { "bin": {
"url": "https://github.com/sponsors/jonschlinkert" "sass": "sass.js"
} },
}, "engines": {
"node_modules/readdirp": { "node": ">=14.0.0"
"version": "4.0.2", },
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz", "optionalDependencies": {
"integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==", "@parcel/watcher": "^2.4.1"
"dev": true, }
"engines": { },
"node": ">= 14.16.0" "node_modules/source-map-js": {
}, "version": "1.2.1",
"funding": { "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
"type": "individual", "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
"url": "https://paulmillr.com/funding/" "engines": {
} "node": ">=0.10.0"
}, }
"node_modules/sass": { },
"version": "1.80.6", "node_modules/to-regex-range": {
"resolved": "https://registry.npmjs.org/sass/-/sass-1.80.6.tgz", "version": "5.0.1",
"integrity": "sha512-ccZgdHNiBF1NHBsWvacvT5rju3y1d/Eu+8Ex6c21nHp2lZGLBEtuwc415QfiI1PJa1TpCo3iXwwSRjRpn2Ckjg==", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
"dev": true, "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
"dependencies": { "optional": true,
"chokidar": "^4.0.0", "dependencies": {
"immutable": "^4.0.0", "is-number": "^7.0.0"
"source-map-js": ">=0.6.2 <2.0.0" },
}, "engines": {
"bin": { "node": ">=8.0"
"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==",
"dev": true,
"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==",
"dev": true,
"optional": true,
"dependencies": {
"is-number": "^7.0.0"
},
"engines": {
"node": ">=8.0"
}
}
}
} }

View File

@ -1,6 +1,6 @@
{ {
"name": "@ztimson/css-utils", "name": "@ztimson/css-utils",
"version": "1.3.2", "version": "1.0.1",
"description": "CSS Utility Classes", "description": "CSS Utility Classes",
"readme": "README.md", "readme": "README.md",
"scripts": { "scripts": {

View File

@ -4,7 +4,7 @@
// Colors // Colors
:root { :root {
// Theme colors -- what ever you like // Theme colors, what ever you like
--theme-backdrop: #dddddd; --theme-backdrop: #dddddd;
--theme-primary: #ff0000; --theme-primary: #ff0000;
--theme-accent: #0000ff; --theme-accent: #0000ff;
@ -15,8 +15,7 @@
--theme-black: black; --theme-black: black;
--theme-white: white; --theme-white: white;
// Misc // Mic
--theme-border: black;
--theme-animation: 0.2s linear; // Animation style --theme-animation: 0.2s linear; // Animation style
--theme-content-width: 1100px; // Max width of clamped content --theme-content-width: 1100px; // Max width of clamped content
--theme-font: Arial, sans-serif; --theme-font: Arial, sans-serif;
@ -34,36 +33,46 @@
--theme-text: #ffffff; // Text color (Should contrast bg-primary) --theme-text: #ffffff; // Text color (Should contrast bg-primary)
--theme-muted: #cccccc; // Muted text color (Should have less contrast against bg-primary) --theme-muted: #cccccc; // Muted text color (Should have less contrast against bg-primary)
} }
}
$breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px); // Device size }
$sizes: (0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5rem); // Padding/Margin, etc...
// Don't edit past this point =============================================================================== // 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'); $direction: ('s': 'left', 't': 'top', 'e': 'right', 'b': 'bottom');
$divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100); $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" ================================================================================================== // "Fixes" ==================================================================================================
// Optional opinionated styling to clean up CSS defaults // Optional opinionated styling to clean up CSS defaults
.fix-anchor, .fix:not(.no-anchor-fix) { .fix-anchor, .fix {
a, a:not([href]) { a, a:not([href]) {
cursor: pointer;
color: var(--theme-primary); color: var(--theme-primary);
&:not(:hover):not(:focus) { text-decoration: none; } &:not(:hover) { text-decoration: none; }
&:hover, &:focus { text-decoration: underline; } &:hover { text-decoration: underline; }
} }
} }
.fix-button, .fix:not(.no-button-fix) { .fix-button, .fix {
button:not(:disabled) { button {
cursor: pointer; cursor: pointer;
} }
} }
.fix-dom, .fix:not(.no-dom-fix) { .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 { &, html, body {
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -74,22 +83,25 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
background-color: var(--theme-backdrop); background-color: var(--theme-backdrop);
} }
hr { opacity: 50%; }
* { box-sizing: border-box; } * { box-sizing: border-box; }
} }
.fix-focus, .fix:not(.no-focus-fix) { .fix-focus, .fix {
* { * {
outline: inherit; outline: none !important;
-webkit-tap-highlight-color: transparent; box-shadow: none !important;
} }
} }
.fix-font, .fix:not(.no-font-fix) { .fix-font, .fix {
color: var(--theme-text); * { font-family: var(--theme-font), sans-serif; }
font-family: var(--theme-font), sans-serif;
p, input, select, textarea, button { font-size: 1rem; } p, input, select, textarea, button { font-size: 1rem; }
h1, h2, h3, h4, h5, h6, p { margin: 0 0 0.5rem 0; } 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; } h1 { font-weight: 500; font-size: 2.5rem; }
h2 { font-weight: 500; font-size: 2rem; } h2 { font-weight: 500; font-size: 2rem; }
h3 { font-weight: 500; font-size: 1.75rem; } h3 { font-weight: 500; font-size: 1.75rem; }
@ -98,26 +110,10 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
h6 { font-weight: 500; font-size: 1rem; } h6 { font-weight: 500; font-size: 1rem; }
} }
// Misc ===================================================================================================== option { color: black !important; }
// 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))); }
// Utilities ================================================================================================ // Utilities ================================================================================================
// Anchor
.anchor-c { transform: translate(-50%, -50%); }
.anchor-e { transform: translate(-100%, -50%); }
.anchor-s { transform: translate(0, -50%); }
// Animate // Animate
.animate { transition: var(--theme-animation); } .animate { transition: var(--theme-animation); }
.animate-none { transition: none !important; } .animate-none { transition: none !important; }
@ -125,17 +121,14 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
transition: var(--theme-animation); transition: var(--theme-animation);
transition-property: color, background-color; transition-property: color, background-color;
} }
.animate-opacity {
transition: var(--theme-animation);
transition-property: opacity;
}
.animate-pos { .animate-pos {
transition: var(--theme-animation); transition: var(--theme-animation);
transition-property: height, width, left, right, top, bottom; transition-property: height, width, left, right, top, bottom;
} }
.animate-trans {
transition: var(--theme-animation); // Border - Colors
transition-property: transform; @each $color in ('black', 'white', 'primary', 'secondary', 'info', 'success', 'warn', 'danger', 'muted') {
.b-#{$color} { border-color: var(--theme-#{$color}) !important; }
} }
// Border - Radius // Border - Radius
@ -150,17 +143,17 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
// Colors - Background // Colors - Background
.bg-backdrop { background-color: var(--theme-backdrop) !important; } .bg-backdrop { background-color: var(--theme-backdrop) !important; }
.bg-black { background-color: var(--theme-black) !important; } .bg-black { background-color: var(--theme-white) !important; }
.bg-white { background-color: var(--theme-white) !important; } .bg-clear {
.bg-transparent { background-color: transparent !important; }
.bg-container {
background-color: var(--theme-clear) !important; background-color: var(--theme-clear) !important;
color: var(--theme-text) !important; color: var(--theme-text) !important;
} }
@each $color in ('primary', 'accent', 'text', 'info', 'success', 'warn', 'danger', 'muted') { .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} { .bg-#{$color} {
position: relative; position: relative;
z-index: 1; color: white;
} }
.bg-#{$color}::before { .bg-#{$color}::before {
content: ''; content: '';
@ -170,36 +163,42 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: var(--theme-#{$color}); background-color: var(--theme-#{$color});
filter: saturate(.5) brightness(150%); opacity: 0.2;
border-radius: inherit; border-radius: inherit;
z-index: -1;
} }
} }
// 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 // Colors - Foreground
@each $color in ('black', 'clear', 'white', 'text', 'primary', 'accent', 'info', 'success', 'warn', 'danger', 'muted') { @each $color in ('black', 'white', 'text', 'primary', 'secondary', 'info', 'success', 'warn', 'danger', 'muted') {
.fg-#{$color} { .fg-#{$color} { color: var(--theme-#{$color}) !important; }
color: var(--theme-#{$color}) !important;
text-decoration-color: var(--theme-#{$color}) !important;
}
} }
// Cursors // Cursors
@each $name in ('alias','auto','cell','col-resize','copy','crosshair','default','grab','grabbing','help','move','not-allowed','pointer','progress','row-resize','text','none','wait','vertical-text','zoom-in','zoom-out') { @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; } .curs-#{$name} { cursor: #{$name} !important; }
} }
// Font // Font
.fs-bolder { font-weight: bolder !important; } .fs-bolder { font-weight: bolder !important; }
.fs-bold { font-weight: 500 !important; } .fs-bold { font-weight: bold !important; }
.fs-normal { font-weight: normal !important; } .fs-clear { font-style: normal !important; }
.fs-italic { font-style: italic !important; } .fs-italic { font-style: italic !important; }
.fs-none { font-style: normal !important; }
.fs-lighter { font-weight: lighter !important; } .fs-lighter { font-weight: lighter !important; }
.fs-no-dec { text-decoration: none !important; } .fs-line-through { text-decoration: line-through !important; }
.fs-strike { text-decoration: line-through !important; } .fs-none { text-decoration: none !important; }
.fs-normal { font-weight: normal !important; }
.fs-underline { text-decoration: underline !important; } .fs-underline { text-decoration: underline !important; }
.fs-strike.fs-underline { text-decoration: line-through underline !important; }
.fs-7 { font-size: 2.5rem !important; } .fs-7 { font-size: 2.5rem !important; }
.fs-6 { font-size: 2.25rem !important; } .fs-6 { font-size: 2.25rem !important; }
.fs-5 { font-size: 2rem !important; } .fs-5 { font-size: 2rem !important; }
@ -207,26 +206,6 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
.fs-3 { font-size: 1.5rem !important; } .fs-3 { font-size: 1.5rem !important; }
.fs-2 { font-size: 1.25rem !important; } .fs-2 { font-size: 1.25rem !important; }
.fs-1 { font-size: 1rem !important; } .fs-1 { font-size: 1rem !important; }
.fs-break {
word-wrap: break-word !important;
word-break: break-word !important;
}
.fs-truncate {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.fs-nowrap {
white-space: nowrap !important;
text-wrap: nowrap !important;
}
.fs-wrap {
white-space: normal !important;
text-wrap: pretty !important;
}
.fs-lowercase { text-transform: lowercase !important; }
.fs-uppercase { text-transform: uppercase !important; }
.fs-capitalize { text-transform: capitalize !important; }
// Height // Height
.h-auto { height: auto !important; } .h-auto { height: auto !important; }
@ -235,46 +214,44 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
} }
// Hover // Hover
.curs-hover:hover, .hover:hover { filter: brightness(125%) !important; } .hover:hover { filter: brightness(125%) !important; }
.curs-hover:hover {
cursor: pointer;
user-select: none;
}
// Opacity // Opacity
@each $div in $divisible { @each $div in $divisible {
.o-#{$div} { opacity: #{$div}#{'%'} !important; } .o-#{$div} { opacity: #{$div}#{'%'} !important; }
} }
// Overflow // Z-index
@each $opt in ('auto', 'hidden', 'scroll', 'visible') {
.overflow-#{$opt} { overflow: #{$opt} !important; }
.overflow-x-#{$opt} { overflow-x: #{$opt} !important; }
.overflow-y-#{$opt} { overflow-y: #{$opt} !important; }
}
// Position
@each $p, $pos in ('abs': 'absolute', 'fix': 'fixed', 'rel': 'relative', 'static': 'static', 'stick': 'sticky') {
.pos-#{$p} { position: #{$pos} !important; }
}
@each $div in $divisible { @each $div in $divisible {
.bottom-#{$div} { bottom: #{$div}#{'%'} !important; } .z-#{$div} { z-index: #{$div} !important; }
.end-#{$div} { right: #{$div}#{'%'} !important; }
.start-#{$div} { left: #{$div}#{'%'} !important; }
.top-#{$div} { top: #{$div}#{'%'} !important; }
} }
// Shadows // 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 { 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-drop { filter: drop-shadow(0px 1px 2.5px black) !important; }
.shadow-white { filter: drop-shadow(0px 1px 2.5px white) !important; }
.shadow-none { box-shadow: none !important; } .shadow-none { box-shadow: none !important; }
// User Select // Text
@each $s in ('all', 'auto', 'none', 'text') { .text-break {
.select-#{$s} { user-select: #{$s} !important; } 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 // Width
.w-auto { width: auto !important; } .w-auto { width: auto !important; }
@ -282,11 +259,15 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
.w-#{$div} { width: #{$div}#{'%'} !important; } .w-#{$div} { width: #{$div}#{'%'} !important; }
} }
// Z-index // User Select
@each $s, $ignore in $sizes { @each $s in ('all', 'auto', 'none', 'text') {
.z-#{$s} { z-index: #{$s} !important; } .select-#{$s} { user-select: #{$s} !important; }
} }
// Visibility
.visible { visibility: visible !important; }
.hidden { visibility: hidden !important; }
// Breakpoint rules // Breakpoint rules
@mixin utilities($bp) { @mixin utilities($bp) {
@if $bp != null { $bp: '-#{$bp}'; } @if $bp != null { $bp: '-#{$bp}'; }
@ -299,17 +280,26 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
.align-y#{$bp}-start { vertical-align: top !important; } .align-y#{$bp}-start { vertical-align: top !important; }
.align-y#{$bp}-end { vertical-align: bottom !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 // Display
@each $display in (block, inline, inline-block, 'flex', 'inline-flex' grid, inline-grid, table, table-row, table-cell, none) { @each $display in (block, inline, inline-block, grid, inline-grid, table, table-row, table-cell, none) {
.d#{$bp}-#{$display} { display: #{$display} !important; } .d#{$bp}-#{$display} { display: #{$display} !important; }
} }
// Flex // Flex
.align-content#{$bp}-start { align-content: start !important; } .align#{$bp}-start { align-content: start !important; }
.align-content#{$bp}-end { align-content: end !important; } .align#{$bp}-end { align-content: end !important; }
.align-content#{$bp}-center { align-content: center !important; } .align#{$bp}-center { align-content: center !important; }
.align-content#{$bp}-baseline { align-content: baseline !important; } .align#{$bp}-baseline { align-content: baseline !important; }
.align-content#{$bp}-stretch { align-content: stretch !important; } .align#{$bp}-stretch { align-content: stretch !important; }
.align-items#{$bp}-start { align-items: start !important; } .align-items#{$bp}-start { align-items: start !important; }
.align-items#{$bp}-end { align-items: end !important; } .align-items#{$bp}-end { align-items: end !important; }
.align-items#{$bp}-center { align-items: center !important; } .align-items#{$bp}-center { align-items: center !important; }
@ -353,18 +343,14 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
flex-direction: row-reverse !important; flex-direction: row-reverse !important;
} }
.flex#{$bp}-fill { flex: 1 1 auto; } .flex#{$bp}-fill { flex: 1 1 auto; }
.flex#{$bp}-fill-even { .flex#{$bp}-expand {
flex-basis: 0 !important; flex-basis: 0 !important;
flex-grow: 1 !important; flex-grow: 1 !important;
} }
.flex#{$bp}-grow-0 { flex-grow: 0 !important; }
.flex#{$bp}-shrink-0 { flex-shrink: 0 !important; }
.flex#{$bp}-grow-1 { flex-grow: 1 !important; } .flex#{$bp}-grow-1 { flex-grow: 1 !important; }
.flex#{$bp}-shrink-1 { flex-shrink: 1 !important; } .flex#{$bp}-shrink-1 { flex-shrink: 1 !important; }
.flex#{$bp}-grow-2 { flex-grow: 2 !important; } .flex#{$bp}-grow-0 { flex-grow: 0 !important; }
.flex#{$bp}-shrink-2 { flex-shrink: 2 !important; } .flex#{$bp}-shrink-0 { flex-shrink: 0 !important; }
.flex#{$bp}-grow-3 { flex-grow: 3 !important; }
.flex#{$bp}-shrink-3 { flex-shrink: 3 !important; }
.flex#{$bp}-nowrap { flex-wrap: nowrap !important; } .flex#{$bp}-nowrap { flex-wrap: nowrap !important; }
.flex#{$bp}-wrap { flex-wrap: wrap !important; } .flex#{$bp}-wrap { flex-wrap: wrap !important; }
.justify#{$bp}-start { justify-content: start !important; } .justify#{$bp}-start { justify-content: start !important; }
@ -386,24 +372,26 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
.fit#{$bp}-scale { object-fit: scale-down !important; } .fit#{$bp}-scale { object-fit: scale-down !important; }
.fit#{$bp}-none { object-fit: none !important; } .fit#{$bp}-none { object-fit: none !important; }
.m#{$bp}-auto { margin: auto !important; } // Margin // Overflow
.mx#{$bp}-auto { // Margin @each $opt in ('auto', 'hidden', 'scroll', 'visible') {
margin-left: auto !important; .overflow#{$bp}-#{$opt} { overflow: #{$opt} !important; }
margin-right: auto !important; .overflow-x#{$bp}-#{$opt} { overflow-x: #{$opt} !important; }
} .overflow-y#{$bp}-#{$opt} { overflow-y: #{$opt} !important; }
.my#{$bp}-auto { // Margin
margin-top: auto !important;
margin-bottom: auto !important;
} }
// Visibility // Position
.visible#{$bp} { visibility: visible !important; } @each $pos in ('absolute', 'fixed', 'relative', 'static', 'sticky') {
.hidden#{$bp} { visibility: hidden !important; } .pos#{$bp}-#{$pos} { position: #{$pos} !important; }
}
@each $s, $size in $sizes { @each $s, $size in $sizes {
.b#{$bp}-#{$s} { border: #{$s}px solid var(--theme-border) !important; } // Border .b#{$bp}-#{$s} { border: #{$s}px solid !important; } // Border
.m#{$bp}-#{$s} { margin: $size !important; } // Margin .m#{$bp}-#{$s} { margin: $size !important; } // Margin
.p#{$bp}-#{$s} { padding: $size !important; } // Padding .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 .mx#{$bp}-#{$s} { // Margin
margin-left: $size !important; margin-left: $size !important;
margin-right: $size !important; margin-right: $size !important;
@ -412,6 +400,10 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
padding-left: $size !important; padding-left: $size !important;
padding-right: $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 .my#{$bp}-#{$s} { // Margin
margin-top: $size !important; margin-top: $size !important;
margin-bottom: $size !important; margin-bottom: $size !important;
@ -422,13 +414,9 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
} }
.order#{$bp}-#{$s} { order: $s !important; } // Flex order .order#{$bp}-#{$s} { order: $s !important; } // Flex order
}
@each $d, $dir in $direction { @each $d, $dir in $direction {
.m#{$d}#{$bp}-auto { margin-#{$dir}: auto !important; } // Margin .b#{$d}#{$bp}-#{$s} { border-#{$dir}: #{$s}px solid !important; } // Border
@each $s, $size in $sizes {
.b#{$d}#{$bp}-#{$s} { border-#{$dir}: #{$s}px solid var(--theme-border) !important; } // Border
.m#{$d}#{$bp}-#{$s} { margin-#{$dir}: $size !important; } // Margin .m#{$d}#{$bp}-#{$s} { margin-#{$dir}: $size !important; } // Margin
.p#{$d}#{$bp}-#{$s} { padding-#{$dir}: $size !important; } // Padding .p#{$d}#{$bp}-#{$s} { padding-#{$dir}: $size !important; } // Padding
} }
@ -436,23 +424,11 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
} }
@include utilities(null); @include utilities(null);
@media print { @include utilities('print'); } @media print {
@include utilities('print');
}
@each $breakpoint, $min-width in $breakpoints { @each $breakpoint, $min-width in $breakpoints {
@media (min-width: #{$min-width}) { @media (min-width: #{$min-width}) {
@include utilities($breakpoint); @include utilities($breakpoint);
} }
} }
// Border - Colors
@each $color in ('black', 'white', 'primary', 'accent', 'info', 'success', 'text', 'warn', 'danger', 'muted') {
.b-#{$color} { border-color: var(--theme-#{$color}) !important; }
}
// Border - Style
.b-dash { border-style: dashed !important; }
.b-dot-dash { border-style: dot-dash !important; }
.b-dot-dot-dash { border-style: dot-dot-dash !important; }
.b-dot { border-style: dotted !important; }
.b-double { border-style: double !important; }
.b-none { border-style: none !important; }
.b-solid { border-style: solid !important; }

BIN
wave.webp

Binary file not shown.

Before

Width:  |  Height:  |  Size: 329 KiB