@coderundebug/ui-web/ui-pattern.js

A collection of UI web components that can be used in any web project.

/* By Stephen Paul Hassall (web: https://coderundebug.com) */
import{UiTools as r}from"./ui-tools.js";export class UiPattern extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=UiPattern.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiPattern.uiCssStyleSheet]}}UiPattern.uiCss=" :host{display:block;--ui-pattern-color1:hsl( from var(--ui-pattern-color, var(--ui-midground, hsl(0 0% 90% / 1))) h s calc(l - var(--ui-pattern-color-spread, 4)) );--ui-pattern-color2:hsl( from var(--ui-pattern-color, var(--ui-midground, hsl(0 0% 90% / 1))) h s calc(l + var(--ui-pattern-color-spread, 4)) );--ui-pattern-scale:1;}:host([horizontal-bars]){--size:calc(var(--ui-pattern-scale, 1) * 0.5rem);background-image:linear-gradient( to right, var(--ui-pattern-color1), var(--ui-pattern-color1) calc(var(--size) / 2), var(--ui-pattern-color2) calc(var(--size) / 2), var(--ui-pattern-color2));background-size:var(--size) 100%;}:host([vertical-bars]){--size:calc(var(--ui-pattern-scale, 1) * 0.5rem);background:linear-gradient( 0deg, var(--ui-pattern-color1) 50%, var(--ui-pattern-color2) 50%);background-size:var(--size) var(--size);}:host([triangles]){--size:calc(var(--ui-pattern-scale, 1) * 0.5rem);background-image:linear-gradient( 45deg, var(--ui-pattern-color1) 50%, var(--ui-pattern-color2) 50%);background-size:var(--size) var(--size);}:host([checker]){--size:calc(var(--ui-pattern-scale, 1) * 0.5rem);background-color:var(--ui-pattern-color2);background-image:repeating-linear-gradient( 45deg, var(--ui-pattern-color1) 25%, transparent 25%, transparent 75%, var(--ui-pattern-color1) 75%, var(--ui-pattern-color1)), repeating-linear-gradient( 45deg, var(--ui-pattern-color1) 25%, transparent 25%, transparent 75%, var(--ui-pattern-color1) 75%, var(--ui-pattern-color1));background-position:0 0, var(--size) var(--size);background-size:calc(2 * var(--size)) calc(2 * var(--size)) ;}:host([cross]){--size:calc(var(--ui-pattern-scale, 1) * 1rem);background:radial-gradient( circle, transparent 20%, var(--ui-pattern-color2) 20%, var(--ui-pattern-color2) 80%, transparent 80%, transparent), radial-gradient( circle, transparent 20%, var(--ui-pattern-color2) 20%, var(--ui-pattern-color2) 80%, transparent 80%, transparent) var(--size) var(--size), linear-gradient( var(--ui-pattern-color1) 2px, transparent 2px) 0 -1px, linear-gradient( 90deg, var(--ui-pattern-color1) 2px, var(--ui-pattern-color2) 2px) -1px 0;background-size:calc(2 * var(--size)) calc(2 * var(--size)), calc(2 * var(--size)) calc(2 * var(--size)), var(--size) var(--size), var(--size) var(--size);}:host([checker-angle]){--size:calc(var(--ui-pattern-scale, 1) * 1rem);background-image:linear-gradient( 135deg, var(--ui-pattern-color1) 25%, transparent 25%), linear-gradient( 225deg, var(--ui-pattern-color1) 25%, transparent 25%), linear-gradient( 45deg, var(--ui-pattern-color1) 25%, transparent 25%), linear-gradient(315deg, var(--ui-pattern-color1) 25%, var(--ui-pattern-color2) 25%);background-position:var(--size) 0, var(--size) 0, 0 0, 0 0;background-size:var(--size) var(--size);background-repeat:repeat;}::slotted(*:not(:defined)){display:none;}@media (forced-colors:active) or (prefers-contrast:more){:host{background-image:none;}} ",UiPattern.uiHtml="<slot></slot>",r.createUi(UiPattern,"ui-pattern",import.meta.url);