Changed default border color & renamed bg-clear to bg-container

foreground now affects text-decoration
Renamed line-through to strike
2025-03-06 16:23:33 -05:00 · 2025-02-05 22:09:46 -05:00 · 2025-02-05 22:04:07 -05:00 · 2024-12-12 23:33:54 -05:00 · 2024-12-06 19:16:09 -05:00 · 2024-12-06 18:56:34 -05:00
4 changed files with 76 additions and 68 deletions
--- a/index.html
+++ b/index.html
@ -13,6 +13,22 @@
 		<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">
 		<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;
 				scroll-behavior: smooth;
@ -34,11 +50,14 @@
 			}

 			.animate-example.animated {
-				left: 110px;
 				background: var(--theme-accent);
 				transform: rotate(180deg);
 				opacity: 25%;
 			}
+			.animate-example.animated.animate,
+			.animate-example.animated.animate-pos {
+				left: 110px;
+			}

 			.box {
 				width: 20px;
@ -50,6 +69,7 @@
 				display: inline-block;
 				padding: 5px;
 				background: #f3f3f3;
+				word-break: break-word;
 			}
 		</style>

@ -58,7 +78,7 @@
 		<script>hljs.highlightAll();</script>
 	</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 id="top" class="flex-grow-1 bg-clear shadow p-3">
 				<h1 class="mb-0">@ztimson/css-utils</h1>
@ -569,12 +589,12 @@ $sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5re
 			<div class="mt-4 flex-grow-1 bg-clear shadow p-3">
 				<h3 id="font">Font Style</h3>
 				<h4>Decoration</h4>
-				<div class="inline-code">.fs-[italic|line-through|none|underline]</div>
+				<div class="inline-code">.fs-[italic|none|strike|underline]</div>
 				<br><br>
 				<div>
 					<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-strike inline-code b-1 p-2">.fs-strike</span>
 					<span class="fs-underline inline-code b-1 p-2">.fs-underline</span>
 				</div>
 				<br>
@ -672,7 +692,8 @@ $sizes: ('auto': auto, 0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 2.5re
 				</div>
 			</div>

-			<div class="mt-4 flex-grow-1 bg-clear shadow p-3">
+			<div class="mt-4 flex-grow-1 bg-clear shadow">
+				<div class="overflow-hidden p-3">
 					<h3 id="overflow">Overflow</h3>
 					<div class="inline-code">.overflow-[x|y]-[auto|hidden|scroll|visible]</div>
 					<br><br>
@ -699,6 +720,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-clear shadow p-3">
 				<h3 id="opacity">Opacity</h3>
@ -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>

-		<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 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 class="p-3 overflow-y-auto" style="max-height: 50vh;">
 				<ul class="p-0">
 					<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>
 				</ul>
 			</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>

 		<script>
 			let open = false;
 			const toc = document.querySelector('#toc')
 			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)';
 				open = !open;
 			}
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
 	"name": "@ztimson/css-utils",
-	"version": "1.0.3",
+	"version": "1.2.1",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "@ztimson/css-utils",
-			"version": "1.0.3",
+			"version": "1.2.1",
 			"license": "MIT",
 			"devDependencies": {
 				"sass": "^1.80.6"
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
 	"name": "@ztimson/css-utils",
-	"version": "1.0.3",
+	"version": "1.3.0",
 	"description": "CSS Utility Classes",
 	"readme": "README.md",
 	"scripts": {
--- a/src/main.scss
+++ b/src/main.scss
@ -16,6 +16,7 @@
 	--theme-white: white;

 	// Misc
+	--theme-border: black;
 	--theme-animation: 0.2s linear; // Animation style
 	--theme-content-width: 1100px; // Max width of clamped content
 	--theme-font: Arial, sans-serif;
@ -47,30 +48,22 @@ $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

-.fix-anchor, .fix {
+.fix-anchor, .fix:not(.no-anchor-fix) {
 	a, a:not([href]) {
+		cursor: pointer;
 		color: var(--theme-primary);
-		&:not(:hover) { text-decoration: none; }
-		&:hover { text-decoration: underline; }
+		&:not(:hover):not(:focus) { text-decoration: none; }
+		&:hover, &:focus { text-decoration: underline; }
 	}
 }

-.fix-button, .fix {
+.fix-button, .fix:not(.no-button-fix) {
 	button:not(:disabled) {
 		cursor: pointer;
 	}
 }

-.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 {
+.fix-dom, .fix:not(.no-dom-fix) {
 	&, html, body {
 		height: 100%;
 		width: 100%;
@ -81,29 +74,22 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
 		background-color: var(--theme-backdrop);
 	}

-	hr {
-		border-bottom: 1px solid black;
-		width: 100%;
-		opacity: 50%;
-	}
 	* { box-sizing: border-box; }
 }

-.fix-focus, .fix {
+.fix-focus, .fix:not(.no-focus-fix) {
 	* {
-		outline: none !important;
-		box-shadow: none !important;
+		outline: inherit;
+		-webkit-tap-highlight-color: transparent;
 	}
 }

-.fix-font, .fix {
-	* { font-family: var(--theme-font), sans-serif; }
+.fix-font, .fix:not(.no-font-fix) {
+	color: var(--theme-text);
+	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, h2, h3, h4, h5, h6, p { margin: 0 0 0.5rem 0; }
 	h1 { font-weight: 500; font-size: 2.5rem; }
 	h2 { font-weight: 500; font-size: 2rem; }
 	h3 { font-weight: 500; font-size: 1.75rem; }
@ -112,8 +98,6 @@ $divisible: (0, 10, 20, 25, 30, 33, 34, 40, 50, 60, 66, 70, 75, 80, 90, 100);
 	h6 { font-weight: 500; font-size: 1rem; }
 }

-option { color: black !important; }
-
 // Misc =====================================================================================================

 // Center
@ -127,7 +111,6 @@ option { color: black !important; }
 // Clamp (Restrict page width for large screens)
 .clamp { width: min(var(--theme-content-width), calc(100% - map.get($sizes, 3))); }

-
 // Utilities ================================================================================================

 // Anchor
@ -170,7 +153,7 @@ option { color: black !important; }
 .bg-black { background-color: var(--theme-black) !important; }
 .bg-white { background-color: var(--theme-white) !important; }
 .bg-transparent { background-color: transparent !important; }
-.bg-clear {
+.bg-container {
 	background-color: var(--theme-clear) !important;
 	color: var(--theme-text) !important;
 }
@ -195,7 +178,10 @@ option { color: black !important; }

 // Colors - Foreground
@each $color in ('black', 'clear', 'white', 'text', 'primary', 'accent', 'info', 'success', 'warn', 'danger', 'muted') {
-	.fg-#{$color} { color: var(--theme-#{$color}) !important; }
+	.fg-#{$color} {
+		color: var(--theme-#{$color}) !important;
+		text-decoration-color: var(--theme-#{$color}) !important;
+	}
 }

 // Cursors
@ -210,8 +196,8 @@ option { color: black !important; }
 .fs-italic { font-style: italic !important; }
 .fs-none { font-style: normal !important; }
 .fs-lighter { font-weight: lighter !important; }
-.fs-line-through { text-decoration: line-through !important; }
 .fs-no-dec { text-decoration: none !important; }
+.fs-strike { text-decoration: line-through !important; }
 .fs-underline { text-decoration: underline !important; }
 .fs-7 { font-size: 2.5rem !important; }
 .fs-6 { font-size: 2.25rem !important; }
@ -414,7 +400,7 @@ option { color: black !important; }
 	.hidden#{$bp} {  visibility: hidden !important; }

 	@each $s, $size in $sizes {
-		.b#{$bp}-#{$s} { border: #{$s}px solid var(--theme-muted) !important; } // Border
+		.b#{$bp}-#{$s} { border: #{$s}px solid var(--theme-border) !important; } // Border
 		.m#{$bp}-#{$s} { margin: $size !important; } // Margin
 		.p#{$bp}-#{$s} { padding: $size !important; } // Padding
 		.mx#{$bp}-#{$s} { // Margin
Author	SHA1	Message	Date
ztimson	3e48cd5ba2	Changed default border color & renamed bg-clear to bg-container All checks were successful Publish Library / Build NPM Project (push) Successful in 17s Details Publish Library / Tag Version (push) Successful in 6s Details Publish Library / Publish CDN & Docs (push) Successful in 20s Details	2025-03-06 16:23:33 -05:00
ztimson	0363593568	foreground now affects text-decoration All checks were successful Publish Library / Build NPM Project (push) Successful in 12s Details Publish Library / Tag Version (push) Successful in 6s Details Publish Library / Publish CDN & Docs (push) Successful in 18s Details	2025-02-05 22:09:46 -05:00
ztimson	07cf090976	Renamed line-through to strike All checks were successful Publish Library / Build NPM Project (push) Successful in 16s Details Publish Library / Tag Version (push) Successful in 6s Details Publish Library / Publish CDN & Docs (push) Successful in 20s Details	2025-02-05 22:04:07 -05:00
ztimson	049d3f8a49	fixed scss warning All checks were successful Publish Library / Build NPM Project (push) Successful in 1m6s Details Publish Library / Tag Version (push) Successful in 15s Details Publish Library / Publish CDN & Docs (push) Successful in 49s Details	2024-12-12 23:33:54 -05:00
ztimson	ed8fb032e5	Underline anchors on focus All checks were successful Publish Library / Build NPM Project (push) Successful in 17s Details Publish Library / Tag Version (push) Successful in 9s Details Publish Library / Publish CDN & Docs (push) Successful in 28s Details	2024-12-06 19:16:09 -05:00
ztimson	150bfd7278	Remove highlight with fix-focus All checks were successful Publish Library / Build NPM Project (push) Successful in 18s Details Publish Library / Tag Version (push) Successful in 8s Details Publish Library / Publish CDN & Docs (push) Successful in 29s Details	2024-12-06 18:56:34 -05:00
ztimson	715d686171	updated anchor fix to include pointer cursor All checks were successful Publish Library / Build NPM Project (push) Successful in 12s Details Publish Library / Tag Version (push) Successful in 6s Details Publish Library / Publish CDN & Docs (push) Successful in 19s Details	2024-11-29 20:44:22 -05:00
ztimson	e98ed586f5	Fixed font-family inheritance Some checks failed Publish Library / Build NPM Project (push) Successful in 11s Details Publish Library / Tag Version (push) Successful in 5s Details Publish Library / Publish CDN & Docs (push) Failing after 14s Details	2024-11-23 21:59:09 -05:00
ztimson	c046b16b69	Opt out of fix syntax All checks were successful Publish Library / Build NPM Project (push) Successful in 11s Details Publish Library / Tag Version (push) Successful in 5s Details Publish Library / Publish CDN & Docs (push) Successful in 17s Details	2024-11-23 21:43:26 -05:00
ztimson	344585e6dc	Fixed some of the fixes All checks were successful Publish Library / Publish CDN & Docs (push) Successful in 20s Details Publish Library / Tag Version (push) Successful in 6s Details Publish Library / Build NPM Project (push) Successful in 17s Details	2024-11-23 21:39:26 -05:00
ztimson	0ec350aae7	Fixed colors All checks were successful Publish Library / Build NPM Project (push) Successful in 11s Details Publish Library / Tag Version (push) Successful in 5s Details Publish Library / Publish CDN & Docs (push) Successful in 19s Details	2024-11-19 20:36:06 -05:00
ztimson	00f290c861	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	2024-11-19 19:32:46 -05:00