Updated
This commit is contained in:
parent
8e724b166a
commit
b5e92165c8
33 changed files with 82 additions and 223 deletions
|
|
@ -9,7 +9,7 @@ interface Props {
|
|||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
const boxClass = createMemo(() => (props.curved ? 'curvedbox' : 'box'))
|
||||
const boxClass = createMemo(() => (props.curved ? 'dasig-curvedbox' : 'dasig-box'))
|
||||
|
||||
return (
|
||||
<section class={boxClass()} style={{ border: `${props.thickness}px solid ${props.color || 'white'}` }}>
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ export default (props: Props) => {
|
|||
</Match>
|
||||
<Match when={!props.design}>
|
||||
<a href={props.to} aria-label={props.label} rel="noopener" target={props.newtab ? '_blank' : '_self'} data-astro-prefetch>
|
||||
<button class="button" style={borderRadius}>
|
||||
<button class="dasig-button" style={borderRadius}>
|
||||
{props.label || 'Click Me!'}
|
||||
</button>
|
||||
</a>
|
||||
|
|
@ -65,13 +65,13 @@ export default (props: Props) => {
|
|||
</Match>
|
||||
<Match when={!props.design}>
|
||||
<Show when={props.submit}>
|
||||
<button class="button" type="submit" style={borderRadius}>
|
||||
<button class="dasig-button" type="submit" style={borderRadius}>
|
||||
{props.label || 'Click Me!'}
|
||||
</button>
|
||||
</Show>
|
||||
|
||||
<Show when={!props.submit}>
|
||||
<button class="button" onClick={props.onClick} style={borderRadius}>
|
||||
<button class="dasig-button" onClick={props.onClick} style={borderRadius}>
|
||||
{props.label || 'Click Me!'}
|
||||
</button>
|
||||
</Show>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ interface Props {
|
|||
export default (props: Props) => {
|
||||
return (
|
||||
<>
|
||||
<section class={`column-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
|
||||
<section class={`dasig-column-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
|
||||
{props.children}
|
||||
</section>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ interface Props {
|
|||
export default (props: Props) => {
|
||||
return (
|
||||
<>
|
||||
<footer class="footer">
|
||||
<footer class="dasig-footer">
|
||||
<small>{props.children}</small>
|
||||
</footer>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -8,12 +8,10 @@ interface Props {
|
|||
|
||||
export default (props: Props) => {
|
||||
return (
|
||||
<>
|
||||
<picture>
|
||||
<source srcset={props.avif} type="image/avif" />
|
||||
<source srcset={props.webp} type="image/webp" />
|
||||
<img style={`border-radius: ${props.radius}rem`} width={props.size} height="auto" decoding="async" loading="lazy" alt={props.alt} />
|
||||
</picture>
|
||||
</>
|
||||
<picture>
|
||||
<source srcset={props.avif} type="image/avif" />
|
||||
<source srcset={props.webp} type="image/webp" />
|
||||
<img style={`border-radius: ${props.radius}rem`} width={props.size} height="auto" decoding="async" loading="lazy" alt={props.alt} />
|
||||
</picture>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export default (props: Props) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<input class="input" type="text" placeholder={props.placeholder} value={inputValue()} onInput={handleChange} />
|
||||
<input class="dasig-input" type="text" placeholder={props.placeholder} value={inputValue()} onInput={handleChange} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { type JSXElement } from 'solid-js'
|
||||
import type { JSXElement } from 'solid-js'
|
||||
|
||||
interface Props {
|
||||
left: number
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { Show } from 'solid-js'
|
|||
|
||||
interface Props {
|
||||
children?: any
|
||||
alignment?: 'row' | 'column'
|
||||
alignment?: 'dasig-page-row' | 'dasig-page-column'
|
||||
}
|
||||
|
||||
export default (props: Props) => {
|
||||
|
|
@ -13,7 +13,7 @@ export default (props: Props) => {
|
|||
<main class={props.alignment}>{props.children}</main>
|
||||
</Show>
|
||||
<Show when={!props.alignment}>
|
||||
<main class="page">{props.children}</main>
|
||||
<main class="dasig-page">{props.children}</main>
|
||||
</Show>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -11,13 +11,13 @@ export default (props: Props) => {
|
|||
return (
|
||||
<>
|
||||
<Show when={props.gap}>
|
||||
<section class={`row-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
|
||||
<section class={`dasig-row-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
|
||||
{props.children}
|
||||
</section>
|
||||
</Show>
|
||||
|
||||
<Show when={!props.gap}>
|
||||
<section class={`row-${props.content || 'center'}`}>{props.children}</section>
|
||||
<section class={`dasig-row-${props.content || 'center'}`}>{props.children}</section>
|
||||
</Show>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue