generated from ztimson/template
Compare commits
12 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 3e48cd5ba2 | |||
| 0363593568 | |||
| 07cf090976 | |||
| 049d3f8a49 | |||
| ed8fb032e5 | |||
| 150bfd7278 | |||
| 715d686171 | |||
| e98ed586f5 | |||
| c046b16b69 | |||
| 344585e6dc | |||
| 0ec350aae7 | |||
| 00f290c861 |
80
index.html
80
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 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>
|
||||||
@ -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">
|
<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|line-through|none|underline]</div>
|
<div class="inline-code">.fs-[italic|none|strike|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>
|
||||||
@ -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
4
package-lock.json
generated
@ -1,12 +1,12 @@
|
|||||||
{
|
{
|
||||||
"name": "@ztimson/css-utils",
|
"name": "@ztimson/css-utils",
|
||||||
"version": "1.0.3",
|
"version": "1.2.1",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "@ztimson/css-utils",
|
"name": "@ztimson/css-utils",
|
||||||
"version": "1.0.3",
|
"version": "1.2.1",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"sass": "^1.80.6"
|
"sass": "^1.80.6"
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@ztimson/css-utils",
|
"name": "@ztimson/css-utils",
|
||||||
"version": "1.0.3",
|
"version": "1.3.0",
|
||||||
"description": "CSS Utility Classes",
|
"description": "CSS Utility Classes",
|
||||||
"readme": "README.md",
|
"readme": "README.md",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
@ -16,6 +16,7 @@
|
|||||||
--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;
|
||||||
@ -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
|
// Optional opinionated styling to clean up CSS defaults
|
||||||
|
|
||||||
.fix-anchor, .fix {
|
.fix-anchor, .fix:not(.no-anchor-fix) {
|
||||||
a, a:not([href]) {
|
a, a:not([href]) {
|
||||||
|
cursor: pointer;
|
||||||
color: var(--theme-primary);
|
color: var(--theme-primary);
|
||||||
&:not(:hover) { text-decoration: none; }
|
&:not(:hover):not(:focus) { text-decoration: none; }
|
||||||
&:hover { text-decoration: underline; }
|
&:hover, &:focus { text-decoration: underline; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.fix-button, .fix {
|
.fix-button, .fix:not(.no-button-fix) {
|
||||||
button:not(:disabled) {
|
button:not(:disabled) {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.fix-code code, code.fix {
|
.fix-dom, .fix:not(.no-dom-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%;
|
||||||
@ -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);
|
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 {
|
.fix-focus, .fix:not(.no-focus-fix) {
|
||||||
* {
|
* {
|
||||||
outline: none !important;
|
outline: inherit;
|
||||||
box-shadow: none !important;
|
-webkit-tap-highlight-color: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.fix-font, .fix {
|
.fix-font, .fix:not(.no-font-fix) {
|
||||||
* { font-family: var(--theme-font), sans-serif; }
|
color: var(--theme-text);
|
||||||
|
font-family: var(--theme-font), sans-serif;
|
||||||
|
|
||||||
p, input, select, textarea, button { font-size: 1rem; }
|
p, input, select, textarea, button { font-size: 1rem; }
|
||||||
span { font-size: inherit; }
|
h1, h2, h3, h4, h5, h6, p { margin: 0 0 0.5rem 0; }
|
||||||
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; }
|
||||||
@ -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; }
|
h6 { font-weight: 500; font-size: 1rem; }
|
||||||
}
|
}
|
||||||
|
|
||||||
option { color: black !important; }
|
|
||||||
|
|
||||||
// Misc =====================================================================================================
|
// Misc =====================================================================================================
|
||||||
|
|
||||||
// Center
|
// Center
|
||||||
@ -127,7 +111,6 @@ option { color: black !important; }
|
|||||||
// 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
|
||||||
@ -170,7 +153,7 @@ option { color: black !important; }
|
|||||||
.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-clear {
|
.bg-container {
|
||||||
background-color: var(--theme-clear) !important;
|
background-color: var(--theme-clear) !important;
|
||||||
color: var(--theme-text) !important;
|
color: var(--theme-text) !important;
|
||||||
}
|
}
|
||||||
@ -195,7 +178,10 @@ option { color: black !important; }
|
|||||||
|
|
||||||
// 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} { color: var(--theme-#{$color}) !important; }
|
.fg-#{$color} {
|
||||||
|
color: var(--theme-#{$color}) !important;
|
||||||
|
text-decoration-color: var(--theme-#{$color}) !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Cursors
|
// Cursors
|
||||||
@ -210,8 +196,8 @@ option { color: black !important; }
|
|||||||
.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-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; }
|
||||||
@ -414,7 +400,7 @@ option { color: black !important; }
|
|||||||
.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-muted) !important; } // Border
|
.b#{$bp}-#{$s} { border: #{$s}px solid var(--theme-border) !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
|
||||||
|
|||||||
Reference in New Issue
Block a user