ztimson/css-utils
ztimson/css-utils
1
0
Fork 0
generated from ztimson/template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: ztimson:develop
Branches Tags
ztimson:develop
ztimson:1.3.2
ztimson:1.3.1
ztimson:1.3.0
ztimson:1.2.1
ztimson:1.2.0
ztimson:1.1.5
ztimson:1.1.4
ztimson:1.1.3
ztimson:1.1.2
ztimson:1.1.1
ztimson:1.1.0
ztimson:1.0.6
ztimson:1.0.5
ztimson:1.0.4
ztimson:1.0.3
ztimson:1.0.2
ztimson:1.0.1
..
compare: ztimson:1.0.2
Branches Tags
ztimson:develop
ztimson:1.3.2
ztimson:1.3.1
ztimson:1.3.0
ztimson:1.2.1
ztimson:1.2.0
ztimson:1.1.5
ztimson:1.1.4
ztimson:1.1.3
ztimson:1.1.2
ztimson:1.1.1
ztimson:1.1.0
ztimson:1.0.6
ztimson:1.0.5
ztimson:1.0.4
ztimson:1.0.3
ztimson:1.0.2
ztimson:1.0.1

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

7 changed files with 556 additions and 599 deletions
Show Stats Expand all files Collapse all files

1
Dockerfile
View File

@ -14,4 +14,3 @@ COPY --from=build /app/dist /usr/share/nginx/html/dist
COPY src /usr/share/nginx/html/src COPY src /usr/share/nginx/html/src
COPY index.html /usr/share/nginx/html COPY index.html /usr/share/nginx/html
COPY wave.webp /usr/share/nginx/html COPY wave.webp /usr/share/nginx/html
COPY favicon.webp /usr/share/nginx/html

7
README.md
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

BIN
favicon.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 24 KiB

91
index.html
View File

@ -6,29 +6,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" class="momentum-description" content="Enterprise Resource Planning" /> <meta name="description" class="momentum-description" content="Enterprise Resource Planning" />
<title>@ztimson/css-utils</title> <title>CSS Utils</title>
<link href="/favicon.webp" rel="icon">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
<link href="./dist/css-utils.css" rel="stylesheet"> <link href="./dist/css-utils.css" rel="stylesheet">
<style> <style>
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-thumb {
width: 6px;
height: 6px;
margin: 0 1px;
border-radius: 3px;
background: #777;
cursor: pointer;
}
::-webkit-scrollbar-corner {
background: rgba(0,0,0,0);
}
* { * {
font-family: Roboto, sans-serif !important; font-family: Roboto, sans-serif !important;
scroll-behavior: smooth; scroll-behavior: smooth;
@ -50,14 +33,11 @@
} }
.animate-example.animated { .animate-example.animated {
left: 110px;
background: var(--theme-accent); background: var(--theme-accent);
transform: rotate(180deg); transform: rotate(180deg);
opacity: 25%; opacity: 25%;
} }
.animate-example.animated.animate,
.animate-example.animated.animate-pos {
left: 110px;
}
.box { .box {
width: 20px; width: 20px;
@ -69,7 +49,6 @@
display: inline-block; display: inline-block;
padding: 5px; padding: 5px;
background: #f3f3f3; background: #f3f3f3;
word-break: break-word;
} }
</style> </style>
@ -78,9 +57,9 @@
<script>hljs.highlightAll();</script> <script>hljs.highlightAll();</script>
</head> </head>
<body class="theme-light p-4 flex-r justify-center"> <body class="theme-light p-3 flex-r justify-center">
<div class="clamp flex-c z-1"> <div class="clamp flex-c z-1">
<div id="top" class="flex-grow-1 bg-container shadow p-3"> <div id="top" class="flex-grow-1 bg-clear shadow p-3">
<h1 class="mb-0">@ztimson/css-utils</h1> <h1 class="mb-0">@ztimson/css-utils</h1>
<hr class="mb-3"> <hr class="mb-3">
<p>CSS Utils is a css library based on bootstrap. At 1/3 the size, its all the utilities without the bloat.</p> <p>CSS Utils is a css library based on bootstrap. At 1/3 the size, its all the utilities without the bloat.</p>
@ -88,7 +67,7 @@
</div> </div>
<h2 id="setup" class="mt-4 mb-3">Setup</h2> <h2 id="setup" class="mt-4 mb-3">Setup</h2>
<div class="flex-grow-1 bg-container shadow p-3"> <div class="flex-grow-1 bg-clear shadow p-3">
<h3 id="install">Install</h3> <h3 id="install">Install</h3>
<h4>NPM</h4> <h4>NPM</h4>
<pre><code class="language-scss"> <pre><code class="language-scss">
@ -109,7 +88,7 @@ npm install @ztimson/css-utils
&lt;link rel="stylesheet" href="https://css.zakscode.com/src/main.scss" &gt;&lt;/link&gt; &lt;link rel="stylesheet" href="https://css.zakscode.com/src/main.scss" &gt;&lt;/link&gt;
</code></pre> </code></pre>
</div> </div>
<div class="flex-grow-1 bg-container shadow p-3 mt-4"> <div class="flex-grow-1 bg-clear shadow p-3 mt-4">
<h3 id="theming">Theming</h3> <h3 id="theming">Theming</h3>
<p>Theming is minimal since its so opinionated. Its all done through CSS variables allowing runtime manipulation without having to recompile.</p> <p>Theming is minimal since its so opinionated. Its all done through CSS variables allowing runtime manipulation without having to recompile.</p>
<pre><code class="language-scss"> <pre><code class="language-scss">
@ -157,7 +136,7 @@ $sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5re
</div> </div>
<h2 id="utilities" class="mt-4 mb-3">Utilities</h2> <h2 id="utilities" class="mt-4 mb-3">Utilities</h2>
<div class="flex-grow-1 bg-container shadow p-3"> <div class="flex-grow-1 bg-clear shadow p-3">
<h3 id="alignment">Alignment</h3> <h3 id="alignment">Alignment</h3>
<div class="inline-code">.align-[x|y]-[xs|sm|md|lg|xl]-[start|end]</div> <div class="inline-code">.align-[x|y]-[xs|sm|md|lg|xl]-[start|end]</div>
<br><br> <br><br>
@ -190,7 +169,7 @@ $sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5re
</div> </div>
</div> </div>
<div class="mt-4 flex-grow-1 bg-container shadow p-3"> <div class="mt-4 flex-grow-1 bg-clear shadow p-3">
<h3 id="animations">Animations</h3> <h3 id="animations">Animations</h3>
<div class="inline-code">.animate-[color|none|opacity|pos|trans]</div> <div class="inline-code">.animate-[color|none|opacity|pos|trans]</div>
<br><br> <br><br>
@ -254,7 +233,7 @@ $sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5re
</script> </script>
</div> </div>
<div class="mt-4 flex-grow-1 bg-container shadow p-3"> <div class="mt-4 flex-grow-1 bg-clear shadow p-3">
<h3 id="borders">Borders</h3> <h3 id="borders">Borders</h3>
<h4 class="fs-3">Color</h4> <h4 class="fs-3">Color</h4>
<div class="inline-code">.b-[accent|black|danger|info|muted|primary|success|text|warn|white]</div> <div class="inline-code">.b-[accent|black|danger|info|muted|primary|success|text|warn|white]</div>
@ -316,7 +295,7 @@ $sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5re
</div> </div>
</div> </div>
<div class="mt-4 flex-grow-1 bg-container shadow p-3"> <div class="mt-4 flex-grow-1 bg-clear shadow p-3">
<h3 id="colors">Colors</h3> <h3 id="colors">Colors</h3>
<h4 class="fs-3">Background</h4> <h4 class="fs-3">Background</h4>
<div class="inline-code">.bg-[accent|backdrop|black|clear|danger|info|muted|primary|success|transparent|text|warn|white]</div> <div class="inline-code">.bg-[accent|backdrop|black|clear|danger|info|muted|primary|success|transparent|text|warn|white]</div>
@ -325,7 +304,7 @@ $sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5re
<div class="b-1 bg-accent m-2 p-2 inline-code flex-r align-items-center justify-center">.bg-accent</div> <div class="b-1 bg-accent m-2 p-2 inline-code flex-r align-items-center justify-center">.bg-accent</div>
<div class="b-1 bg-backdrop m-2 p-2 inline-code flex-r align-items-center justify-center">.bg-backdrop</div> <div class="b-1 bg-backdrop m-2 p-2 inline-code flex-r align-items-center justify-center">.bg-backdrop</div>
<div class="b-1 bg-black fg-white m-2 p-2 inline-code flex-r align-items-center justify-center">.bg-black</div> <div class="b-1 bg-black fg-white m-2 p-2 inline-code flex-r align-items-center justify-center">.bg-black</div>
<div class="b-1 bg-container m-2 p-2 inline-code flex-r align-items-center justify-center">.bg-container</div> <div class="b-1 bg-clear m-2 p-2 inline-code flex-r align-items-center justify-center">.bg-clear</div>
<div class="b-1 bg-danger m-2 p-2 inline-code flex-r align-items-center justify-center">.bg-danger</div> <div class="b-1 bg-danger m-2 p-2 inline-code flex-r align-items-center justify-center">.bg-danger</div>
<div class="b-1 bg-info m-2 p-2 inline-code flex-r align-items-center justify-center">.bg-info</div> <div class="b-1 bg-info m-2 p-2 inline-code flex-r align-items-center justify-center">.bg-info</div>
<div class="b-1 bg-muted m-2 p-2 inline-code flex-r align-items-center justify-center">.bg-muted</div> <div class="b-1 bg-muted m-2 p-2 inline-code flex-r align-items-center justify-center">.bg-muted</div>
@ -371,7 +350,7 @@ $sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5re
</div> </div>
</div> </div>
<div class="mt-4 flex-grow-1 bg-container shadow p-3"> <div class="mt-4 flex-grow-1 bg-clear shadow p-3">
<h3 id="cursors">Cursors</h3> <h3 id="cursors">Cursors</h3>
<div class="inline-code">.curs-[alias|auto|cell|col-resize|copy|crosshair|default|grab|grabbing|help|hover|move|not-allowed|pointer|progress|row-resize|text|none|wait|vertical-text|zoom-in|zoom-out]</div> <div class="inline-code">.curs-[alias|auto|cell|col-resize|copy|crosshair|default|grab|grabbing|help|hover|move|not-allowed|pointer|progress|row-resize|text|none|wait|vertical-text|zoom-in|zoom-out]</div>
<br><br> <br><br>
@ -401,12 +380,12 @@ $sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5re
</div> </div>
</div> </div>
<div class="mt-4 flex-grow-1 bg-container shadow p-3"> <div class="mt-4 flex-grow-1 bg-clear shadow p-3">
<h3 id="display">Display</h3> <h3 id="display">Display</h3>
<div class="inline-code">.d-[xs|sm|md|lg|xl]-[block|flex|grid|inline|inline-block|inline-flex|inline-grid|none|table|table-cell|table-row]</div> <div class="inline-code">.d-[xs|sm|md|lg|xl]-[block|flex|grid|inline|inline-block|inline-flex|inline-grid|none|table|table-cell|table-row]</div>
</div> </div>
<div class="mt-4 flex-grow-1 bg-container shadow p-3"> <div class="mt-4 flex-grow-1 bg-clear shadow p-3">
<h3 id="flex">Flex</h3> <h3 id="flex">Flex</h3>
<h4>Direction</h4> <h4>Direction</h4>
<div class="inline-code">.flex-[xs|sm|md|lg|xl]-[c|r|rc|rr]</div> <div class="inline-code">.flex-[xs|sm|md|lg|xl]-[c|r|rc|rr]</div>
@ -575,7 +554,7 @@ $sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5re
</div> </div>
</div> </div>
<div class="mt-4 flex-grow-1 bg-container shadow p-3"> <div class="mt-4 flex-grow-1 bg-clear shadow p-3">
<h3 id="float">Float</h3> <h3 id="float">Float</h3>
<div class="inline-code">.float-[xs|sm|md|lg|xl]-[end|none|start]</div> <div class="inline-code">.float-[xs|sm|md|lg|xl]-[end|none|start]</div>
<br><br> <br><br>
@ -586,15 +565,15 @@ $sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5re
</div> </div>
</div> </div>
<div class="mt-4 flex-grow-1 bg-container shadow p-3"> <div class="mt-4 flex-grow-1 bg-clear shadow p-3">
<h3 id="font">Font Style</h3> <h3 id="font">Font Style</h3>
<h4>Decoration</h4> <h4>Decoration</h4>
<div class="inline-code">.fs-[italic|none|strike|underline]</div> <div class="inline-code">.fs-[italic|line-through|none|underline]</div>
<br><br> <br><br>
<div> <div>
<span class="fs-italic inline-code b-1 p-2">.fs-italic</span> <span class="fs-italic inline-code b-1 p-2">.fs-italic</span>
<span class="fs-line-through inline-code b-1 p-2">.fs-line-through</span>
<span class="fs-none inline-code b-1 p-2">.fs-none</span> <span class="fs-none inline-code b-1 p-2">.fs-none</span>
<span class="fs-strike inline-code b-1 p-2">.fs-strike</span>
<span class="fs-underline inline-code b-1 p-2">.fs-underline</span> <span class="fs-underline inline-code b-1 p-2">.fs-underline</span>
</div> </div>
<br> <br>
@ -654,7 +633,7 @@ $sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5re
</div> </div>
</div> </div>
<div class="mt-4 flex-grow-1 bg-container shadow p-3"> <div class="mt-4 flex-grow-1 bg-clear shadow p-3">
<h3 id="hover">Hover</h3> <h3 id="hover">Hover</h3>
<div class="inline-code">.curs-hover|.hover</div> <div class="inline-code">.curs-hover|.hover</div>
<br><br> <br><br>
@ -664,7 +643,7 @@ $sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5re
</div> </div>
</div> </div>
<div class="mt-4 flex-grow-1 bg-container shadow p-3"> <div class="mt-4 flex-grow-1 bg-clear shadow p-3">
<h3 id="object-fit">Object Fit</h3> <h3 id="object-fit">Object Fit</h3>
<div class="inline-code">.fit-[contain|cover|fill|scale|none]</div> <div class="inline-code">.fit-[contain|cover|fill|scale|none]</div>
<br><br> <br><br>
@ -692,8 +671,7 @@ $sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5re
</div> </div>
</div> </div>
<div class="mt-4 flex-grow-1 bg-container shadow"> <div class="mt-4 flex-grow-1 bg-clear shadow p-3">
<div class="overflow-hidden p-3">
<h3 id="overflow">Overflow</h3> <h3 id="overflow">Overflow</h3>
<div class="inline-code">.overflow-[x|y]-[auto|hidden|scroll|visible]</div> <div class="inline-code">.overflow-[x|y]-[auto|hidden|scroll|visible]</div>
<br><br> <br><br>
@ -720,9 +698,8 @@ $sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5re
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="mt-4 flex-grow-1 bg-container shadow p-3"> <div class="mt-4 flex-grow-1 bg-clear shadow p-3">
<h3 id="opacity">Opacity</h3> <h3 id="opacity">Opacity</h3>
<div class="inline-code">.opacity-[0|10|20|25|30|33|34|40|50|60|66|70|75|80|90|100]</div> <div class="inline-code">.opacity-[0|10|20|25|30|33|34|40|50|60|66|70|75|80|90|100]</div>
<br><br> <br><br>
@ -741,7 +718,7 @@ $sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5re
</div> </div>
</div> </div>
<div class="mt-4 flex-grow-1 bg-container shadow p-3"> <div class="mt-4 flex-grow-1 bg-clear shadow p-3">
<h3 id="position">Position</h3> <h3 id="position">Position</h3>
<div class="inline-code">.pos-[abs|rel|static|stick]</div> <div class="inline-code">.pos-[abs|rel|static|stick]</div>
<br><br> <br><br>
@ -769,7 +746,7 @@ $sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5re
</div> </div>
</div> </div>
<div class="mt-4 flex-grow-1 bg-container shadow p-3"> <div class="mt-4 flex-grow-1 bg-clear shadow p-3">
<h3 id="shadows">Shadows</h3> <h3 id="shadows">Shadows</h3>
<div class="inline-code">.shadow-[drop|none|white]</div> <div class="inline-code">.shadow-[drop|none|white]</div>
<br><br> <br><br>
@ -786,7 +763,7 @@ $sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5re
</div> </div>
</div> </div>
<div class="mt-4 flex-grow-1 bg-container shadow p-3"> <div class="mt-4 flex-grow-1 bg-clear shadow p-3">
<h3 id="size">Size</h3> <h3 id="size">Size</h3>
<div class="flex-c flex-md-r"> <div class="flex-c flex-md-r">
<div class="flex-fill-even"> <div class="flex-fill-even">
@ -868,7 +845,7 @@ $sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5re
</div> </div>
</div> </div>
<div class="mt-4 flex-grow-1 bg-container shadow p-3"> <div class="mt-4 flex-grow-1 bg-clear shadow p-3">
<h3 id="spacing">Spacing</h3> <h3 id="spacing">Spacing</h3>
<div>Margin: <span class="inline-code">.m[b|e|s|t|x|y]-[xs|sm|md|lg|xl]-[0-5|auto]</span></div> <div>Margin: <span class="inline-code">.m[b|e|s|t|x|y]-[xs|sm|md|lg|xl]-[0-5|auto]</span></div>
<br> <br>
@ -919,7 +896,7 @@ $sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5re
</div> </div>
</div> </div>
<div class="mt-4 flex-grow-1 bg-container shadow p-3"> <div class="mt-4 flex-grow-1 bg-clear shadow p-3">
<h3 id="uer-select">User Select</h3> <h3 id="uer-select">User Select</h3>
<div class="inline-code">.select-[all|auto|none|text]</div> <div class="inline-code">.select-[all|auto|none|text]</div>
<br><br> <br><br>
@ -929,7 +906,7 @@ $sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5re
<div class="select-text inline-code b-1 p-2">.select-text</div> <div class="select-text inline-code b-1 p-2">.select-text</div>
</div> </div>
<div class="mt-4 flex-grow-1 bg-container shadow p-3"> <div class="mt-4 flex-grow-1 bg-clear shadow p-3">
<h3 id="visibility">Visibility</h3> <h3 id="visibility">Visibility</h3>
<div class="inline-code">.[hidden|visible]-[xs|sm|md|lg|xl]</div> <div class="inline-code">.[hidden|visible]-[xs|sm|md|lg|xl]</div>
<br><br> <br><br>
@ -941,7 +918,7 @@ $sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5re
</div> </div>
</div> </div>
<div class="mt-4 flex-grow-1 bg-container shadow p-3 mb-3"> <div class="mt-4 flex-grow-1 bg-clear shadow p-3 mb-3">
<h3 id="z-index">Z-Index</h3> <h3 id="z-index">Z-Index</h3>
<div class="inline-code">.z-[0-5]</div> <div class="inline-code">.z-[0-5]</div>
<br><br> <br><br>
@ -960,7 +937,10 @@ $sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5re
<div class="w-100 p-2"></div> <div class="w-100 p-2"></div>
</div> </div>
<div id="toc" class="flex-r shadow bg-container z-5 pos-fix animate b-1" style="left: 0; top: 25px; transform: translateX(calc(-100% + 26px))"> <div id="toc" class="flex-r shadow bg-clear z-5 pos-fix animate b-1" style="right: 0; top: 50px; transform: translateX(calc(100% - 26px))">
<div id="toc-toggle" class="curs-hover b-0 be-1 px-1 py-3 bg-backdrop" style="writing-mode: vertical-rl">
Table of Contents
</div>
<div class="p-3 overflow-y-auto" style="max-height: 50vh;"> <div class="p-3 overflow-y-auto" style="max-height: 50vh;">
<ul class="p-0"> <ul class="p-0">
<li> <li>
@ -1002,16 +982,13 @@ $sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5re
</li> </li>
</ul> </ul>
</div> </div>
<div id="toc-toggle" class="curs-hover b-0 be-1 px-1 py-3 bg-primary fg-white" style="writing-mode: vertical-rl">
Table of Contents
</div>
</div> </div>
<script> <script>
let open = false; let open = false;
const toc = document.querySelector('#toc') const toc = document.querySelector('#toc')
document.querySelector('#toc-toggle').onclick = () => { document.querySelector('#toc-toggle').onclick = () => {
if(open) toc.style.transform = 'translateX(calc(-100% + 26px))'; if(open) toc.style.transform = 'translateX(calc(100% - 26px))';
else toc.style.transform = 'translateX(0)'; else toc.style.transform = 'translateX(0)';
open = !open; open = !open;
} }

37
package-lock.json generated
View File

@ -1,14 +1,14 @@
{ {
"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"
} }
}, },
@ -16,7 +16,6 @@
"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": {
@ -55,7 +54,6 @@
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"android" "android"
@ -75,7 +73,6 @@
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"darwin" "darwin"
@ -95,7 +92,6 @@
"cpu": [ "cpu": [
"x64" "x64"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"darwin" "darwin"
@ -115,7 +111,6 @@
"cpu": [ "cpu": [
"x64" "x64"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"freebsd" "freebsd"
@ -135,7 +130,6 @@
"cpu": [ "cpu": [
"arm" "arm"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"linux" "linux"
@ -155,7 +149,6 @@
"cpu": [ "cpu": [
"arm" "arm"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"linux" "linux"
@ -175,7 +168,6 @@
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"linux" "linux"
@ -195,7 +187,6 @@
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"linux" "linux"
@ -215,7 +206,6 @@
"cpu": [ "cpu": [
"x64" "x64"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"linux" "linux"
@ -235,7 +225,6 @@
"cpu": [ "cpu": [
"x64" "x64"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"linux" "linux"
@ -255,7 +244,6 @@
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"win32" "win32"
@ -275,7 +263,6 @@
"cpu": [ "cpu": [
"ia32" "ia32"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"win32" "win32"
@ -295,7 +282,6 @@
"cpu": [ "cpu": [
"x64" "x64"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"win32" "win32"
@ -312,7 +298,6 @@
"version": "3.0.3", "version": "3.0.3",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
"dev": true,
"optional": true, "optional": true,
"dependencies": { "dependencies": {
"fill-range": "^7.1.1" "fill-range": "^7.1.1"
@ -325,7 +310,6 @@
"version": "4.0.1", "version": "4.0.1",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
"integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==", "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
"dev": true,
"dependencies": { "dependencies": {
"readdirp": "^4.0.1" "readdirp": "^4.0.1"
}, },
@ -340,7 +324,6 @@
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
"integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==", "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
"dev": true,
"optional": true, "optional": true,
"bin": { "bin": {
"detect-libc": "bin/detect-libc.js" "detect-libc": "bin/detect-libc.js"
@ -353,7 +336,6 @@
"version": "7.1.1", "version": "7.1.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
"dev": true,
"optional": true, "optional": true,
"dependencies": { "dependencies": {
"to-regex-range": "^5.0.1" "to-regex-range": "^5.0.1"
@ -365,14 +347,12 @@
"node_modules/immutable": { "node_modules/immutable": {
"version": "4.3.7", "version": "4.3.7",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz", "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
"integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==", "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw=="
"dev": true
}, },
"node_modules/is-extglob": { "node_modules/is-extglob": {
"version": "2.1.1", "version": "2.1.1",
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
"dev": true,
"optional": true, "optional": true,
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
@ -382,7 +362,6 @@
"version": "4.0.3", "version": "4.0.3",
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
"dev": true,
"optional": true, "optional": true,
"dependencies": { "dependencies": {
"is-extglob": "^2.1.1" "is-extglob": "^2.1.1"
@ -395,7 +374,6 @@
"version": "7.0.0", "version": "7.0.0",
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
"dev": true,
"optional": true, "optional": true,
"engines": { "engines": {
"node": ">=0.12.0" "node": ">=0.12.0"
@ -405,7 +383,6 @@
"version": "4.0.8", "version": "4.0.8",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
"integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
"dev": true,
"optional": true, "optional": true,
"dependencies": { "dependencies": {
"braces": "^3.0.3", "braces": "^3.0.3",
@ -419,14 +396,12 @@
"version": "7.1.1", "version": "7.1.1",
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
"integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
"dev": true,
"optional": true "optional": true
}, },
"node_modules/picomatch": { "node_modules/picomatch": {
"version": "2.3.1", "version": "2.3.1",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
"dev": true,
"optional": true, "optional": true,
"engines": { "engines": {
"node": ">=8.6" "node": ">=8.6"
@ -439,7 +414,6 @@
"version": "4.0.2", "version": "4.0.2",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",
"integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==", "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
"dev": true,
"engines": { "engines": {
"node": ">= 14.16.0" "node": ">= 14.16.0"
}, },
@ -452,7 +426,6 @@
"version": "1.80.6", "version": "1.80.6",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.80.6.tgz", "resolved": "https://registry.npmjs.org/sass/-/sass-1.80.6.tgz",
"integrity": "sha512-ccZgdHNiBF1NHBsWvacvT5rju3y1d/Eu+8Ex6c21nHp2lZGLBEtuwc415QfiI1PJa1TpCo3iXwwSRjRpn2Ckjg==", "integrity": "sha512-ccZgdHNiBF1NHBsWvacvT5rju3y1d/Eu+8Ex6c21nHp2lZGLBEtuwc415QfiI1PJa1TpCo3iXwwSRjRpn2Ckjg==",
"dev": true,
"dependencies": { "dependencies": {
"chokidar": "^4.0.0", "chokidar": "^4.0.0",
"immutable": "^4.0.0", "immutable": "^4.0.0",
@ -472,7 +445,6 @@
"version": "1.2.1", "version": "1.2.1",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
"dev": true,
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
} }
@ -481,7 +453,6 @@
"version": "5.0.1", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
"dev": true,
"optional": true, "optional": true,
"dependencies": { "dependencies": {
"is-number": "^7.0.0" "is-number": "^7.0.0"

2
package.json
View File

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

61
src/main.scss
View File

@ -16,7 +16,6 @@
--theme-white: white; --theme-white: white;
// Misc // Misc
--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;
@ -48,22 +47,30 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
// 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:not(:disabled) {
cursor: pointer; cursor: pointer;
} }
} }
.fix-dom, .fix:not(.no-dom-fix) { .fix-code code, code.fix {
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 +81,29 @@ $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 {
border-bottom: 1px solid black;
width: 100%;
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,6 +112,8 @@ $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; }
} }
option { color: black !important; }
// Misc ===================================================================================================== // Misc =====================================================================================================
// Center // Center
@ -111,6 +127,7 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
// Clamp (Restrict page width for large screens) // Clamp (Restrict page width for large screens)
.clamp { width: min(var(--theme-content-width), calc(100% - map.get($sizes, 3))); } .clamp { width: min(var(--theme-content-width), calc(100% - map.get($sizes, 3))); }
// Utilities ================================================================================================ // Utilities ================================================================================================
// Anchor // Anchor
@ -153,7 +170,7 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
.bg-black { background-color: var(--theme-black) !important; } .bg-black { background-color: var(--theme-black) !important; }
.bg-white { background-color: var(--theme-white) !important; } .bg-white { background-color: var(--theme-white) !important; }
.bg-transparent { background-color: transparent !important; } .bg-transparent { background-color: transparent !important; }
.bg-container { .bg-clear {
background-color: var(--theme-clear) !important; background-color: var(--theme-clear) !important;
color: var(--theme-text) !important; color: var(--theme-text) !important;
} }
@ -178,10 +195,7 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
// Colors - Foreground // Colors - Foreground
@each $color in ('black', 'clear', 'white', 'text', 'primary', 'accent', 'info', 'success', 'warn', 'danger', 'muted') { @each $color in ('black', 'clear', 'white', 'text', 'primary', 'accent', '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
@ -196,10 +210,9 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
.fs-italic { font-style: italic !important; } .fs-italic { font-style: italic !important; }
.fs-none { font-style: normal !important; } .fs-none { font-style: normal !important; }
.fs-lighter { font-weight: lighter !important; } .fs-lighter { font-weight: lighter !important; }
.fs-line-through { text-decoration: line-through !important; }
.fs-no-dec { text-decoration: none !important; } .fs-no-dec { text-decoration: none !important; }
.fs-strike { text-decoration: line-through !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; }
@ -401,7 +414,7 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
.hidden#{$bp} { visibility: hidden !important; } .hidden#{$bp} { visibility: hidden !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 var(--theme-muted) !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
.mx#{$bp}-#{$s} { // Margin .mx#{$bp}-#{$s} { // Margin
@ -428,7 +441,7 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
.m#{$d}#{$bp}-auto { margin-#{$dir}: auto !important; } // Margin .m#{$d}#{$bp}-auto { margin-#{$dir}: auto !important; } // Margin
@each $s, $size in $sizes { @each $s, $size in $sizes {
.b#{$d}#{$bp}-#{$s} { border-#{$dir}: #{$s}px solid var(--theme-border) !important; } // Border .b#{$d}#{$bp}-#{$s} { border-#{$dir}: #{$s}px solid var(--theme-muted) !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
} }