js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Utils: Add Cosmetic Backgrounds (#1634)

Browse Source 
* adding bg-wa-pattern.svg asset

* adding background-wa-pattern to utils.css

* as a repeating background image
* defining customizable elements

* adding background-dot-grid to utils.css
This commit is contained in:
Brian Talbot
2025-10-21 09:44:06 -04:00
committed by GitHub
parent 205e3bf131
commit bac343f900
2 changed files with 34 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/webawesome/docs/assets/images/bg-wa-pattern.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

33
packages/webawesome/docs/assets/styles/utils.css
View File

@@ -166,6 +166,39 @@
calc(var(--grid-spacing) / 2) calc(var(--grid-spacing) / 2),
calc(var(--grid-spacing) / 2) calc(var(--grid-spacing) / 2);
}
/* dot grid background */
.background-dot-grid {
--dot-spacing: 1.5rem;
--dot-radius: 1.5px;
--dot-color: color-mix(in oklab, var(--wa-color-text-normal), transparent 85%);
background-image: radial-gradient(circle, var(--dot-color) var(--dot-radius), transparent var(--dot-radius));
background-size: var(--dot-spacing) var(--dot-spacing);
}
/* wa illustration background pattern */
.background-wa-pattern {
position: relative;
& > * {
position: relative;
z-index: 1;
}
&::after {
--background-pattern-image: url('/assets/images/bg-wa-pattern.svg');
position: absolute;
inset: 0;
background-color: var(--background-pattern-color, transparent);
background-image: var(--background-pattern-image);
background-repeat: repeat;
content: '';
opacity: var(--background-pattern-opacity, 0.3);
z-index: 0;
}
}
/* #endregion */
/* buttons with icon toggle on hover */