generated from ztimson/template
CSS utilities
This commit is contained in:
parent
c23cad2308
commit
dd83ef0c33
31
.github/build.yaml
vendored
Normal file
31
.github/build.yaml
vendored
Normal file
@ -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
|
||||
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
.idea
|
||||
.vscode
|
||||
*.log
|
||||
dist
|
||||
12
LICENSE
12
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.
|
||||
|
||||
79
README.md
79
README.md
@ -3,27 +3,27 @@
|
||||
<br />
|
||||
|
||||
<!-- Logo -->
|
||||
<img src="https://git.zakscode.com/repo-avatars/2b4ee6ba1f2e2618bf7694e4a52fb56d1d0ea6abafa2dcbe496ab786b86d5a76" alt="Logo" width="200" height="200">
|
||||
<img src="https://git.zakscode.com/repo-avatars/76cb13e0e27818654d364227400292abc6a4e6def657bd9f5713f4286e34e544" alt="Logo" width="200" height="200">
|
||||
|
||||
<!-- Title -->
|
||||
### Template
|
||||
### CSS Utils
|
||||
|
||||
<!-- Description -->
|
||||
Simple repository template
|
||||
CSS Utility Classes
|
||||
|
||||
<!-- Repo badges -->
|
||||
[](https://git.zakscode.com/ztimson/template/tags)
|
||||
[](https://git.zakscode.com/ztimson/template/pulls)
|
||||
[](https://git.zakscode.com/ztimson/template/issues)
|
||||
[](https://git.zakscode.com/ztimson/css-utils/tags)
|
||||
[](https://git.zakscode.com/ztimson/css-utils/pulls)
|
||||
[](https://git.zakscode.com/ztimson/css-utils/issues)
|
||||
|
||||
<!-- Links -->
|
||||
|
||||
---
|
||||
<div>
|
||||
<a href="https://git.zakscode.com/ztimson/template/wiki" target="_blank">Documentation</a>
|
||||
• <a href="https://git.zakscode.com/ztimson/template/releases" target="_blank">Release Notes</a>
|
||||
• <a href="https://git.zakscode.com/ztimson/template/issues/new?template=.github%2fissue_template%2fbug.md" target="_blank">Report a Bug</a>
|
||||
• <a href="https://git.zakscode.com/ztimson/template/issues/new?template=.github%2fissue_template%2fenhancement.md" target="_blank">Request a Feature</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/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>
|
||||
</div>
|
||||
|
||||
---
|
||||
@ -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
|
||||
[](https://angular.io/)
|
||||
[](https://www.android.com/)
|
||||
[](https://www.arduino.cc/)
|
||||
[](https://getbootstrap.com)
|
||||
[](https://en.cppreference.com/w/c/language)
|
||||
[](https://cplusplus.com/)
|
||||
[](https://dotnet.microsoft.com/)
|
||||
[](https://www.w3.org/Style/CSS/Overview.en.html)
|
||||
[](https://www.djangoproject.com/)
|
||||
[](https://docker.com/)
|
||||
[](https://www.electronjs.org/)
|
||||
[](https://firebase.google.com/)
|
||||
[](https://go.dev/)
|
||||
[](https://graphql.org/)
|
||||
[](https://developer.mozilla.org/en-US/docs/Glossary/HTML)
|
||||
[](https://java.com/)
|
||||
[](https://javascript.com/)
|
||||
[](https://jquery.com )
|
||||
[](https://laravel.com)
|
||||
[](https://www.linux.org/)
|
||||
[](https://git.zakscode.com/ztimson/momentum)
|
||||
[](https://www.mongodb.com/)
|
||||
[](https://www.mysql.com/)
|
||||
[](https://nestjs.com/)
|
||||
[](https://dotnet.microsoft.com/)
|
||||
[](https://nextjs.org/)
|
||||
[](https://www.nginx.com/)
|
||||
[](https://nodejs.org/)
|
||||
[](https://p5js.org/)
|
||||
[](https://www.php.net/)
|
||||
[](https://www.postgresql.org/)
|
||||
[](https://www.python.org/)
|
||||
[](https://reactjs.org/)
|
||||
[](https://redis.com/)
|
||||
[](https://sass-lang.com/)
|
||||
[](https://en.wikipedia.org/wiki/Shell_script)
|
||||
[](https://www.microsoft.com/en-ca/sql-server)
|
||||
[](https://www.sqlite.org/index.html)
|
||||
[](https://svelte.dev/)
|
||||
[](https://typescriptlang.org/)
|
||||
[](https://microsoft.com/windows)
|
||||
[](https://vitejs.dev/)
|
||||
[](https://vuejs.org/)
|
||||
|
||||
## Setup
|
||||
|
||||
@ -102,11 +61,10 @@ Website: https://git.zakscode.com
|
||||
</summary>
|
||||
|
||||
#### 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`;
|
||||
</details>
|
||||
|
||||
<details>
|
||||
@ -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`
|
||||
|
||||
</details>
|
||||
|
||||
## 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.
|
||||
|
||||
0
dist/.gitkeep
vendored
Normal file
0
dist/.gitkeep
vendored
Normal file
13
index.html
Normal file
13
index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!Doctype>
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>CSS Utils</title>
|
||||
|
||||
<style href="./dist/main.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
465
package-lock.json
generated
Normal file
465
package-lock.json
generated
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
17
package.json
Normal file
17
package.json
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
434
src/main.scss
Normal file
434
src/main.scss
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user