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

Updated styles & docs
All checks were successful
Publish Library / Tag Version (push) Successful in 12s
Details
Publish Library / Build NPM Project (push) Successful in 20s
Details
Publish Library / Publish CDN & Docs (push) Successful in 32s
Details

Browse Source
This commit is contained in:
Zakary Timson 2024-11-19 19:32:46 -05:00
parent c305577fec
commit 00f290c861
4 changed files with 53 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
index.html
View File

@ -13,6 +13,22 @@
<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;
@ -34,11 +50,14 @@
} }
.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;
@ -50,6 +69,7 @@
display: inline-block; display: inline-block;
padding: 5px; padding: 5px;
background: #f3f3f3; background: #f3f3f3;
word-break: break-word;
} }
</style> </style>
@ -58,7 +78,7 @@
<script>hljs.highlightAll();</script> <script>hljs.highlightAll();</script>
</head> </head>
<body class="theme-light p-3 flex-r justify-center"> <body class="theme-light p-4 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-clear 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>
@ -672,29 +692,31 @@ $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-clear shadow p-3"> <div class="mt-4 flex-grow-1 bg-clear shadow">
<h3 id="overflow">Overflow</h3> <div class="overflow-hidden p-3">
<div class="inline-code">.overflow-[x|y]-[auto|hidden|scroll|visible]</div> <h3 id="overflow">Overflow</h3>
<br><br> <div class="inline-code">.overflow-[x|y]-[auto|hidden|scroll|visible]</div>
<div class="flex-r"> <br><br>
<div class="b-1 m-2 overflow-auto" style="width: 150px; height: 150px;"> <div class="flex-r">
<div style="width: 300px; height: 300px;" class="pos-rel"> <div class="b-1 m-2 overflow-auto" style="width: 150px; height: 150px;">
<span class="pos-abs" style="left: 50%; top: 25%; transform: translate(-50%, -50%)">.overflow-auto</span> <div style="width: 300px; height: 300px;" class="pos-rel">
<span class="pos-abs" style="left: 50%; top: 25%; transform: translate(-50%, -50%)">.overflow-auto</span>
</div>
</div> </div>
</div> <div class="b-1 m-2 overflow-hidden" style="width: 150px; height: 150px;">
<div class="b-1 m-2 overflow-hidden" style="width: 150px; height: 150px;"> <div style="width: 300px; height: 300px;" class="pos-rel">
<div style="width: 300px; height: 300px;" class="pos-rel"> <span class="pos-abs" style="left: 50%; top: 25%; transform: translate(-50%, -50%)">.overflow-hidden</span>
<span class="pos-abs" style="left: 50%; top: 25%; transform: translate(-50%, -50%)">.overflow-hidden</span> </div>
</div> </div>
</div> <div class="b-1 m-2 overflow-scroll" style="width: 150px; height: 150px;">
<div class="b-1 m-2 overflow-scroll" style="width: 150px; height: 150px;"> <div style="width: 300px; height: 300px;" class="pos-rel">
<div style="width: 300px; height: 300px;" class="pos-rel"> <span class="pos-abs" style="left: 50%; top: 25%; transform: translate(-50%, -50%)">.overflow-scroll</span>
<span class="pos-abs" style="left: 50%; top: 25%; transform: translate(-50%, -50%)">.overflow-scroll</span> </div>
</div> </div>
</div> <div class="b-1 m-2 overflow-visible" style="width: 150px; height: 150px;">
<div class="b-1 m-2 overflow-visible" style="width: 150px; height: 150px;"> <div style="width: 300px; height: 300px;" class="pos-rel">
<div style="width: 300px; height: 300px;" class="pos-rel"> <span class="pos-abs" style="left: 50%; top: 25%; transform: translate(-50%, -50%)">.overflow-visible</span>
<span class="pos-abs" style="left: 50%; top: 25%; transform: translate(-50%, -50%)">.overflow-visible</span> </div>
</div> </div>
</div> </div>
</div> </div>
@ -938,10 +960,7 @@ $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-clear z-5 pos-fix animate b-1" style="right: 0; top: 50px; transform: translateX(calc(100% - 26px))"> <div id="toc" class="flex-r shadow bg-clear z-5 pos-fix animate b-1" style="left: 0; top: 25px; 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>
@ -983,13 +1002,16 @@ $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;
} }

4
package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "@ztimson/css-utils", "name": "@ztimson/css-utils",
"version": "1.0.3", "version": "1.0.4",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@ztimson/css-utils", "name": "@ztimson/css-utils",
"version": "1.0.3", "version": "1.0.4",
"license": "MIT", "license": "MIT",
"devDependencies": { "devDependencies": {
"sass": "^1.80.6" "sass": "^1.80.6"

2
package.json
View File

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

2
src/main.scss
View File

@ -187,7 +187,7 @@ option { color: black !important; }
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: var(--theme-#{$color}); background-color: var(--theme-#{$color});
filter: saturate(.5) brightness(150%); filter: saturate(.5) brightness(250%);
border-radius: inherit; border-radius: inherit;
z-index: -1; z-index: -1;
} }