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

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

Browse Source
This commit is contained in:
Zakary Timson 2025-03-06 16:23:33 -05:00
parent 0363593568
commit 3e48cd5ba2
2 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

6
src/main.scss
View File

@ -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;
@ -110,7 +111,6 @@ $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 +153,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-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;
} }
@ -400,7 +400,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-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