Updated
This commit is contained in:
parent
efc045bebd
commit
db48b587db
12 changed files with 434 additions and 455 deletions
297
@dasig/components/Button.astro
Normal file
297
@dasig/components/Button.astro
Normal file
|
|
@ -0,0 +1,297 @@
|
||||||
|
---
|
||||||
|
interface Props {
|
||||||
|
label?: string
|
||||||
|
to?: string
|
||||||
|
onClick?: () => void
|
||||||
|
edges?: 'curved' | 'rounded' | 'flat'
|
||||||
|
design?: 'bu-primary' | 'bu-link' | 'bu-info' | 'bu-success' | 'bu-warning' | 'bu-danger' | 'bu-dark' | 'bu-light' | 'bu-text' | 'bu-ghost' | 'bo-primary' | 'bo-secondary' | 'bo-success' | 'bo-danger' | 'bo-warning' | 'bo-info' | 'bo-light' | 'bo-dark' | 'bo-link'
|
||||||
|
submit?: boolean
|
||||||
|
newtab?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const getBorderRadius = (edge: Props['edges']) => {
|
||||||
|
switch (edge) {
|
||||||
|
case 'curved':
|
||||||
|
return 'border-radius: 6px'
|
||||||
|
case 'rounded':
|
||||||
|
return 'border-radius: 32px'
|
||||||
|
case 'flat':
|
||||||
|
return 'border-radius: 0'
|
||||||
|
default:
|
||||||
|
return 'border-radius: 0'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const { label, to, edges, design, submit, newtab } = Astro.props
|
||||||
|
const borderRadius = getBorderRadius(edges)
|
||||||
|
---
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const button = document.getElementById('button')!
|
||||||
|
button.addEventListener('click', () => {
|
||||||
|
onClick
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{
|
||||||
|
to ? (
|
||||||
|
design ? (
|
||||||
|
<a href={to} aria-label={label} rel="noopener" target={newtab ? '_blank' : '_self'} data-astro-prefetch>
|
||||||
|
<button class={design} style={borderRadius}>
|
||||||
|
{label || 'Click Me!'}
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
) : (
|
||||||
|
<a href={to} aria-label={label} rel="noopener" target={newtab ? '_blank' : '_self'} data-astro-prefetch>
|
||||||
|
<button class="dasig-button" style={borderRadius}>
|
||||||
|
{label || 'Click Me!'}
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
)
|
||||||
|
) : design ? (
|
||||||
|
submit ? (
|
||||||
|
<button class={design} type="submit" style={borderRadius}>
|
||||||
|
{label || 'Click Me!'}
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<button class={design} id="button" style={borderRadius}>
|
||||||
|
{label || 'Click Me!'}
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
) : submit ? (
|
||||||
|
<button class="dasig-button" type="submit" style={borderRadius}>
|
||||||
|
{label || 'Click Me!'}
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<button class="dasig-button" id="button" style={borderRadius}>
|
||||||
|
{label || 'Click Me!'}
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
<style lang="sass">
|
||||||
|
@use '/src/styles/fonts.sass' as fonts
|
||||||
|
@use 'sass:color'
|
||||||
|
|
||||||
|
$primaryColor: #0075BB
|
||||||
|
|
||||||
|
$bulmaPrimary: rgb(0, 235, 199)
|
||||||
|
$bulmaPrimaryText: rgb(0, 31, 26)
|
||||||
|
$bulmaLink: rgb(92, 111, 255)
|
||||||
|
$bulmaLinkText: rgb(245, 246, 255)
|
||||||
|
$bulmaInfo: rgb(128, 217, 255)
|
||||||
|
$bulmaInfoText: rgb(0, 36, 51)
|
||||||
|
$bulmaSuccess: rgb(91, 205, 154)
|
||||||
|
$bulmaSuccessText: rgb(10, 31, 21)
|
||||||
|
$bulmaWarning: rgb(255, 191, 41)
|
||||||
|
$bulmaWarningText: rgb(41, 29, 0)
|
||||||
|
$bulmaDanger: rgb(255, 128, 153)
|
||||||
|
$bulmaDangerText: rgb(26, 0, 5)
|
||||||
|
$bulmaLight: rgb(255, 255, 255)
|
||||||
|
$bulmaLightText: rgb(46, 51, 61)
|
||||||
|
$bulmaDark: rgb(57, 63, 76)
|
||||||
|
$bulmaDarkText: rgb(243, 244, 246)
|
||||||
|
$bulmaText: rgb(31, 34, 41)
|
||||||
|
$bulmaTextText: rgb(235, 236, 240)
|
||||||
|
$bulmaGhost: rgba(0,0,0,0)
|
||||||
|
$bulmaGhostText: rgb(66, 88, 255)
|
||||||
|
|
||||||
|
$bootstrapTextLight: rgb(255, 255, 253)
|
||||||
|
$bootstrapTextDark: rgb(0, 0, 2)
|
||||||
|
$bootstrapTextLink: rgb(139, 185, 254)
|
||||||
|
$bootstrapPrimary: rgb(13, 110, 253)
|
||||||
|
$bootstrapSecondary: rgb(92, 99, 106)
|
||||||
|
$bootstrapSuccess: rgb(21, 115, 71)
|
||||||
|
$bootstrapDanger: rgb(187, 45, 59)
|
||||||
|
$bootstrapWarning: rgb(255, 202, 44)
|
||||||
|
$bootstrapInfo: rgb(49, 210, 242)
|
||||||
|
$bootstrapLight: rgb(211, 212, 213)
|
||||||
|
$bootstrapDark: rgb(33, 37, 41)
|
||||||
|
|
||||||
|
.dasig-button
|
||||||
|
background-color: $primaryColor
|
||||||
|
border: none
|
||||||
|
color: white
|
||||||
|
padding: 0.5rem 1.25rem
|
||||||
|
text-align: center
|
||||||
|
text-decoration: none
|
||||||
|
display: inline-block
|
||||||
|
font-size: 1rem
|
||||||
|
font-weight: 500
|
||||||
|
cursor: pointer
|
||||||
|
transition: all 0.2s ease-out
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: color.adjust($primaryColor, $blackness: 20%)
|
||||||
|
|
||||||
|
&:active
|
||||||
|
transform: scale(0.95)
|
||||||
|
|
||||||
|
.bu-primary
|
||||||
|
@extend .dasig-button
|
||||||
|
font-family: fonts.$Inter
|
||||||
|
background-color: $bulmaPrimary
|
||||||
|
color: $bulmaPrimaryText
|
||||||
|
border: none
|
||||||
|
font-size: 1rem
|
||||||
|
border-radius: 0.375rem
|
||||||
|
font-weight: 500
|
||||||
|
padding: 0.5rem 1.25rem
|
||||||
|
height: 2.5rem
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: color.adjust($bulmaPrimary, $lightness: 10%)
|
||||||
|
|
||||||
|
.bu-link
|
||||||
|
@extend .bu-primary
|
||||||
|
background-color: $bulmaLink
|
||||||
|
color: $bulmaLinkText
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: color.adjust($bulmaLink, $lightness: 5%)
|
||||||
|
|
||||||
|
.bu-info
|
||||||
|
@extend .bu-primary
|
||||||
|
background-color: $bulmaInfo
|
||||||
|
color: $bulmaInfoText
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: color.adjust($bulmaInfo, $lightness: 5%)
|
||||||
|
|
||||||
|
.bu-success
|
||||||
|
@extend .bu-primary
|
||||||
|
background-color: $bulmaSuccess
|
||||||
|
color: $bulmaSuccessText
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: color.adjust($bulmaSuccess, $lightness: 5%)
|
||||||
|
|
||||||
|
.bu-warning
|
||||||
|
@extend .bu-primary
|
||||||
|
background-color: $bulmaWarning
|
||||||
|
color: $bulmaWarningText
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: color.adjust($bulmaWarning, $lightness: 5%)
|
||||||
|
|
||||||
|
.bu-danger
|
||||||
|
@extend .bu-primary
|
||||||
|
background-color: $bulmaDanger
|
||||||
|
color: $bulmaDangerText
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: color.adjust($bulmaDanger, $lightness: 5%)
|
||||||
|
|
||||||
|
.bu-light
|
||||||
|
@extend .bu-primary
|
||||||
|
background-color: $bulmaLight
|
||||||
|
color: $bulmaLightText
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: color.adjust($bulmaLight, $lightness: 5%)
|
||||||
|
|
||||||
|
.bu-dark
|
||||||
|
@extend .bu-primary
|
||||||
|
background-color: $bulmaDark
|
||||||
|
color: $bulmaDarkText
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: color.adjust($bulmaDark, $lightness: 5%)
|
||||||
|
|
||||||
|
.bu-text
|
||||||
|
@extend .bu-primary
|
||||||
|
background-color: rgba(0,0,0,0)
|
||||||
|
color: $bulmaTextText
|
||||||
|
text-decoration: underline
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: hsl(221,14%,14%)
|
||||||
|
|
||||||
|
.bu-ghost
|
||||||
|
@extend .bu-primary
|
||||||
|
background-color: $bulmaGhost
|
||||||
|
color: $bulmaGhostText
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: transparent
|
||||||
|
text-decoration: underline
|
||||||
|
|
||||||
|
.bo-primary
|
||||||
|
@extend .dasig-button
|
||||||
|
font-family: 'Segoe UI', fonts.$Roboto
|
||||||
|
background-color: $bootstrapPrimary
|
||||||
|
color: $bootstrapTextLight
|
||||||
|
border: none
|
||||||
|
font-size: 1rem
|
||||||
|
border-radius: 0.375rem
|
||||||
|
font-weight: 400
|
||||||
|
padding: 0.5rem 1.25rem
|
||||||
|
height: 2.5rem
|
||||||
|
margin: 0.25rem 0.125rem
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: color.adjust($bootstrapPrimary, $blackness: 10%)
|
||||||
|
|
||||||
|
.bo-secondary
|
||||||
|
@extend .bo-primary
|
||||||
|
background-color: $bootstrapSecondary
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: color.adjust($bootstrapSecondary, $blackness: 10%)
|
||||||
|
|
||||||
|
.bo-success
|
||||||
|
@extend .bo-primary
|
||||||
|
background-color: $bootstrapSuccess
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: color.adjust($bootstrapSuccess, $blackness: 10%)
|
||||||
|
|
||||||
|
.bo-danger
|
||||||
|
@extend .bo-primary
|
||||||
|
background-color: $bootstrapDanger
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: color.adjust($bootstrapDanger, $blackness: 10%)
|
||||||
|
|
||||||
|
.bo-warning
|
||||||
|
@extend .bo-primary
|
||||||
|
background-color: $bootstrapWarning
|
||||||
|
color: $bootstrapTextDark
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: color.adjust($bootstrapWarning, $lightness: 5%)
|
||||||
|
|
||||||
|
.bo-info
|
||||||
|
@extend .bo-primary
|
||||||
|
background-color: $bootstrapInfo
|
||||||
|
color: $bootstrapTextDark
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: color.adjust($bootstrapInfo, $lightness: 5%)
|
||||||
|
|
||||||
|
.bo-light
|
||||||
|
@extend .bo-primary
|
||||||
|
background-color: $bootstrapLight
|
||||||
|
color: $bootstrapTextDark
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: color.adjust($bootstrapLight, $blackness: 10%)
|
||||||
|
|
||||||
|
.bo-dark
|
||||||
|
@extend .bo-primary
|
||||||
|
background-color: $bootstrapDark
|
||||||
|
// color: $bootstrapTextDark
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: color.adjust($bootstrapDark, $lightness: 10%)
|
||||||
|
|
||||||
|
.bo-link
|
||||||
|
@extend .bo-primary
|
||||||
|
background-color: transparent
|
||||||
|
color: $bootstrapTextLink
|
||||||
|
text-decoration: underline
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
color: color.adjust($bootstrapTextLink, $lightness: 5%)
|
||||||
|
background-color: transparent
|
||||||
|
</style>
|
||||||
|
|
@ -1,83 +0,0 @@
|
||||||
import '../styles/Button.sass'
|
|
||||||
import { Show, Switch, Match } from 'solid-js'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
label?: string
|
|
||||||
to?: string
|
|
||||||
onClick?: () => void
|
|
||||||
edges?: 'curved' | 'rounded' | 'flat'
|
|
||||||
design?: 'bu-primary' | 'bu-link' | 'bu-info' | 'bu-success' | 'bu-warning' | 'bu-danger' | 'bu-dark' | 'bu-light' | 'bu-text' | 'bu-ghost' | 'bo-primary' | 'bo-secondary' | 'bo-success' | 'bo-danger' | 'bo-warning' | 'bo-info' | 'bo-light' | 'bo-dark' | 'bo-link'
|
|
||||||
submit?: boolean
|
|
||||||
newtab?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
const getBorderRadius = (edge: Props['edges']) => {
|
|
||||||
switch (edge) {
|
|
||||||
case 'curved':
|
|
||||||
return 'border-radius: 6px'
|
|
||||||
case 'rounded':
|
|
||||||
return 'border-radius: 32px'
|
|
||||||
case 'flat':
|
|
||||||
return 'border-radius: 0'
|
|
||||||
default:
|
|
||||||
return 'border-radius: 0'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default (props: Props) => {
|
|
||||||
const borderRadius = getBorderRadius(props.edges)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Show when={props.to}>
|
|
||||||
<Switch>
|
|
||||||
<Match when={props.design}>
|
|
||||||
<a href={props.to} aria-label={props.label} rel="noopener" target={props.newtab ? '_blank' : '_self'} data-astro-prefetch>
|
|
||||||
<button class={props.design} style={borderRadius}>
|
|
||||||
{props.label || 'Click Me!'}
|
|
||||||
</button>
|
|
||||||
</a>
|
|
||||||
</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="dasig-button" style={borderRadius}>
|
|
||||||
{props.label || 'Click Me!'}
|
|
||||||
</button>
|
|
||||||
</a>
|
|
||||||
</Match>
|
|
||||||
</Switch>
|
|
||||||
</Show>
|
|
||||||
|
|
||||||
<Show when={!props.to}>
|
|
||||||
<Switch>
|
|
||||||
<Match when={props.design}>
|
|
||||||
<Show when={props.submit}>
|
|
||||||
<button class={props.design} type="submit" style={borderRadius}>
|
|
||||||
{props.label || 'Click Me!'}
|
|
||||||
</button>
|
|
||||||
</Show>
|
|
||||||
|
|
||||||
<Show when={!props.submit}>
|
|
||||||
<button class={props.design} onClick={props.onClick} style={borderRadius}>
|
|
||||||
{props.label || 'Click Me!'}
|
|
||||||
</button>
|
|
||||||
</Show>
|
|
||||||
</Match>
|
|
||||||
<Match when={!props.design}>
|
|
||||||
<Show when={props.submit}>
|
|
||||||
<button class="dasig-button" type="submit" style={borderRadius}>
|
|
||||||
{props.label || 'Click Me!'}
|
|
||||||
</button>
|
|
||||||
</Show>
|
|
||||||
|
|
||||||
<Show when={!props.submit}>
|
|
||||||
<button class="dasig-button" onClick={props.onClick} style={borderRadius}>
|
|
||||||
{props.label || 'Click Me!'}
|
|
||||||
</button>
|
|
||||||
</Show>
|
|
||||||
</Match>
|
|
||||||
</Switch>
|
|
||||||
</Show>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
52
@dasig/components/Input.astro
Normal file
52
@dasig/components/Input.astro
Normal file
|
|
@ -0,0 +1,52 @@
|
||||||
|
---
|
||||||
|
interface Props {
|
||||||
|
placeholder?: string
|
||||||
|
value?: string
|
||||||
|
onChange?: (value: string) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const { placeholder, value, onChange } = Astro.props
|
||||||
|
|
||||||
|
let inputValue = value
|
||||||
|
|
||||||
|
const handleChange = (event: Event) => {
|
||||||
|
const target = event.target as HTMLInputElement
|
||||||
|
const newValue = target.value
|
||||||
|
setInputValue(newValue)
|
||||||
|
if (props.onChange) {
|
||||||
|
props.onChange(newValue)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
<input class="dasig-input" type="text" placeholder={props.placeholder} value={inputValue()} onInput={handleChange} />
|
||||||
|
|
||||||
|
<style lang="sass">
|
||||||
|
.dasig-input
|
||||||
|
font-size: 1rem
|
||||||
|
padding: 0.5rem 1rem
|
||||||
|
width: 100%
|
||||||
|
border: 2px solid #ccc
|
||||||
|
border-radius: 4px
|
||||||
|
outline: none
|
||||||
|
transition: border-color 0.3s, box-shadow 0.3s
|
||||||
|
|
||||||
|
&:focus
|
||||||
|
border-color: #3377AC
|
||||||
|
box-shadow: 0 0 5px rgba(51, 119, 168, 0.3)
|
||||||
|
|
||||||
|
&::placeholder
|
||||||
|
color: #888
|
||||||
|
font-style: italic
|
||||||
|
|
||||||
|
&:disabled
|
||||||
|
background-color: #f0f0f0
|
||||||
|
border-color: #ddd
|
||||||
|
|
||||||
|
&--error
|
||||||
|
border-color: #ff4d4f
|
||||||
|
box-shadow: 0 0 5px rgba(255, 77, 79, 0.3)
|
||||||
|
|
||||||
|
&:focus
|
||||||
|
border-color: #e81123
|
||||||
|
</style>
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
import '../styles/Input.sass'
|
|
||||||
import { createSignal } from 'solid-js'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
placeholder?: string
|
|
||||||
value?: string
|
|
||||||
onChange?: (value: string) => void
|
|
||||||
}
|
|
||||||
|
|
||||||
export default (props: Props) => {
|
|
||||||
const [inputValue, setInputValue] = createSignal(props.value || '')
|
|
||||||
|
|
||||||
const handleChange = (event: Event) => {
|
|
||||||
const target = event.target as HTMLInputElement
|
|
||||||
const newValue = target.value
|
|
||||||
setInputValue(newValue)
|
|
||||||
if (props.onChange) {
|
|
||||||
props.onChange(newValue)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<input class="dasig-input" type="text" placeholder={props.placeholder} value={inputValue()} onInput={handleChange} />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
export { default as Background } from './components/Background.astro'
|
export { default as Background } from './components/Background.astro'
|
||||||
export { default as Box } from './components/Box.astro'
|
export { default as Box } from './components/Box.astro'
|
||||||
export { default as Button } from './components/Button'
|
export { default as Button } from './components/Button.astro'
|
||||||
export { default as Column } from './components/Column.astro'
|
export { default as Column } from './components/Column.astro'
|
||||||
export { default as Copyright } from './components/Copyright.astro'
|
export { default as Copyright } from './components/Copyright.astro'
|
||||||
export { default as Footer } from './components/Footer.astro'
|
export { default as Footer } from './components/Footer.astro'
|
||||||
|
|
@ -15,6 +15,7 @@ export { default as Row } from './components/Row.astro'
|
||||||
export { default as Display } from './components/Display.astro'
|
export { default as Display } from './components/Display.astro'
|
||||||
export { default as Padding } from './components/Padding.astro'
|
export { default as Padding } from './components/Padding.astro'
|
||||||
export { default as Modal } from './components/Modal.astro'
|
export { default as Modal } from './components/Modal.astro'
|
||||||
|
export { default as Input } from './components/Input.astro'
|
||||||
|
|
||||||
// export { default as OptimizeBackground } from './Optimizers/OptimizeBackground'
|
// export { default as OptimizeBackground } from './Optimizers/OptimizeBackground'
|
||||||
// export { default as OptimizeImage } from './Optimizers/OptimizeImage'
|
// export { default as OptimizeImage } from './Optimizers/OptimizeImage'
|
||||||
|
|
|
||||||
|
|
@ -1,224 +0,0 @@
|
||||||
@use '/src/styles/fonts.sass' as fonts
|
|
||||||
@use 'sass:color'
|
|
||||||
|
|
||||||
$primaryColor: #0075BB
|
|
||||||
|
|
||||||
$bulmaPrimary: rgb(0, 235, 199)
|
|
||||||
$bulmaPrimaryText: rgb(0, 31, 26)
|
|
||||||
$bulmaLink: rgb(92, 111, 255)
|
|
||||||
$bulmaLinkText: rgb(245, 246, 255)
|
|
||||||
$bulmaInfo: rgb(128, 217, 255)
|
|
||||||
$bulmaInfoText: rgb(0, 36, 51)
|
|
||||||
$bulmaSuccess: rgb(91, 205, 154)
|
|
||||||
$bulmaSuccessText: rgb(10, 31, 21)
|
|
||||||
$bulmaWarning: rgb(255, 191, 41)
|
|
||||||
$bulmaWarningText: rgb(41, 29, 0)
|
|
||||||
$bulmaDanger: rgb(255, 128, 153)
|
|
||||||
$bulmaDangerText: rgb(26, 0, 5)
|
|
||||||
$bulmaLight: rgb(255, 255, 255)
|
|
||||||
$bulmaLightText: rgb(46, 51, 61)
|
|
||||||
$bulmaDark: rgb(57, 63, 76)
|
|
||||||
$bulmaDarkText: rgb(243, 244, 246)
|
|
||||||
$bulmaText: rgb(31, 34, 41)
|
|
||||||
$bulmaTextText: rgb(235, 236, 240)
|
|
||||||
$bulmaGhost: rgba(0,0,0,0)
|
|
||||||
$bulmaGhostText: rgb(66, 88, 255)
|
|
||||||
|
|
||||||
$bootstrapTextLight: rgb(255, 255, 253)
|
|
||||||
$bootstrapTextDark: rgb(0, 0, 2)
|
|
||||||
$bootstrapTextLink: rgb(139, 185, 254)
|
|
||||||
$bootstrapPrimary: rgb(13, 110, 253)
|
|
||||||
$bootstrapSecondary: rgb(92, 99, 106)
|
|
||||||
$bootstrapSuccess: rgb(21, 115, 71)
|
|
||||||
$bootstrapDanger: rgb(187, 45, 59)
|
|
||||||
$bootstrapWarning: rgb(255, 202, 44)
|
|
||||||
$bootstrapInfo: rgb(49, 210, 242)
|
|
||||||
$bootstrapLight: rgb(211, 212, 213)
|
|
||||||
$bootstrapDark: rgb(33, 37, 41)
|
|
||||||
|
|
||||||
.dasig-button
|
|
||||||
background-color: $primaryColor
|
|
||||||
border: none
|
|
||||||
color: white
|
|
||||||
padding: 0.5rem 1.25rem
|
|
||||||
text-align: center
|
|
||||||
text-decoration: none
|
|
||||||
display: inline-block
|
|
||||||
font-size: 1rem
|
|
||||||
font-weight: 500
|
|
||||||
cursor: pointer
|
|
||||||
transition: all 0.2s ease-out
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background-color: color.adjust($primaryColor, $blackness: 20%)
|
|
||||||
|
|
||||||
&:active
|
|
||||||
transform: scale(0.95)
|
|
||||||
|
|
||||||
.bu-primary
|
|
||||||
@extend .dasig-button
|
|
||||||
font-family: fonts.$Inter
|
|
||||||
background-color: $bulmaPrimary
|
|
||||||
color: $bulmaPrimaryText
|
|
||||||
border: none
|
|
||||||
font-size: 1rem
|
|
||||||
border-radius: 0.375rem
|
|
||||||
font-weight: 500
|
|
||||||
padding: 0.5rem 1.25rem
|
|
||||||
height: 2.5rem
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background-color: color.adjust($bulmaPrimary, $lightness: 10%)
|
|
||||||
|
|
||||||
.bu-link
|
|
||||||
@extend .bu-primary
|
|
||||||
background-color: $bulmaLink
|
|
||||||
color: $bulmaLinkText
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background-color: color.adjust($bulmaLink, $lightness: 5%)
|
|
||||||
|
|
||||||
.bu-info
|
|
||||||
@extend .bu-primary
|
|
||||||
background-color: $bulmaInfo
|
|
||||||
color: $bulmaInfoText
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background-color: color.adjust($bulmaInfo, $lightness: 5%)
|
|
||||||
|
|
||||||
.bu-success
|
|
||||||
@extend .bu-primary
|
|
||||||
background-color: $bulmaSuccess
|
|
||||||
color: $bulmaSuccessText
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background-color: color.adjust($bulmaSuccess, $lightness: 5%)
|
|
||||||
|
|
||||||
.bu-warning
|
|
||||||
@extend .bu-primary
|
|
||||||
background-color: $bulmaWarning
|
|
||||||
color: $bulmaWarningText
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background-color: color.adjust($bulmaWarning, $lightness: 5%)
|
|
||||||
|
|
||||||
.bu-danger
|
|
||||||
@extend .bu-primary
|
|
||||||
background-color: $bulmaDanger
|
|
||||||
color: $bulmaDangerText
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background-color: color.adjust($bulmaDanger, $lightness: 5%)
|
|
||||||
|
|
||||||
.bu-light
|
|
||||||
@extend .bu-primary
|
|
||||||
background-color: $bulmaLight
|
|
||||||
color: $bulmaLightText
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background-color: color.adjust($bulmaLight, $lightness: 5%)
|
|
||||||
|
|
||||||
.bu-dark
|
|
||||||
@extend .bu-primary
|
|
||||||
background-color: $bulmaDark
|
|
||||||
color: $bulmaDarkText
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background-color: color.adjust($bulmaDark, $lightness: 5%)
|
|
||||||
|
|
||||||
.bu-text
|
|
||||||
@extend .bu-primary
|
|
||||||
background-color: rgba(0,0,0,0)
|
|
||||||
color: $bulmaTextText
|
|
||||||
text-decoration: underline
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background-color: hsl(221,14%,14%)
|
|
||||||
|
|
||||||
.bu-ghost
|
|
||||||
@extend .bu-primary
|
|
||||||
background-color: $bulmaGhost
|
|
||||||
color: $bulmaGhostText
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background-color: transparent
|
|
||||||
text-decoration: underline
|
|
||||||
|
|
||||||
.bo-primary
|
|
||||||
@extend .dasig-button
|
|
||||||
font-family: 'Segoe UI', fonts.$Roboto
|
|
||||||
background-color: $bootstrapPrimary
|
|
||||||
color: $bootstrapTextLight
|
|
||||||
border: none
|
|
||||||
font-size: 1rem
|
|
||||||
border-radius: 0.375rem
|
|
||||||
font-weight: 400
|
|
||||||
padding: 0.5rem 1.25rem
|
|
||||||
height: 2.5rem
|
|
||||||
margin: 0.25rem 0.125rem
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background-color: color.adjust($bootstrapPrimary, $blackness: 10%)
|
|
||||||
|
|
||||||
.bo-secondary
|
|
||||||
@extend .bo-primary
|
|
||||||
background-color: $bootstrapSecondary
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background-color: color.adjust($bootstrapSecondary, $blackness: 10%)
|
|
||||||
|
|
||||||
.bo-success
|
|
||||||
@extend .bo-primary
|
|
||||||
background-color: $bootstrapSuccess
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background-color: color.adjust($bootstrapSuccess, $blackness: 10%)
|
|
||||||
|
|
||||||
.bo-danger
|
|
||||||
@extend .bo-primary
|
|
||||||
background-color: $bootstrapDanger
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background-color: color.adjust($bootstrapDanger, $blackness: 10%)
|
|
||||||
|
|
||||||
.bo-warning
|
|
||||||
@extend .bo-primary
|
|
||||||
background-color: $bootstrapWarning
|
|
||||||
color: $bootstrapTextDark
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background-color: color.adjust($bootstrapWarning, $lightness: 5%)
|
|
||||||
|
|
||||||
.bo-info
|
|
||||||
@extend .bo-primary
|
|
||||||
background-color: $bootstrapInfo
|
|
||||||
color: $bootstrapTextDark
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background-color: color.adjust($bootstrapInfo, $lightness: 5%)
|
|
||||||
|
|
||||||
.bo-light
|
|
||||||
@extend .bo-primary
|
|
||||||
background-color: $bootstrapLight
|
|
||||||
color: $bootstrapTextDark
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background-color: color.adjust($bootstrapLight, $blackness: 10%)
|
|
||||||
|
|
||||||
.bo-dark
|
|
||||||
@extend .bo-primary
|
|
||||||
background-color: $bootstrapDark
|
|
||||||
// color: $bootstrapTextDark
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background-color: color.adjust($bootstrapDark, $lightness: 10%)
|
|
||||||
|
|
||||||
.bo-link
|
|
||||||
@extend .bo-primary
|
|
||||||
background-color: transparent
|
|
||||||
color: $bootstrapTextLink
|
|
||||||
text-decoration: underline
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
color: color.adjust($bootstrapTextLink, $lightness: 5%)
|
|
||||||
background-color: transparent
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
.dasig-input
|
|
||||||
font-size: 1rem
|
|
||||||
padding: 0.5rem 1rem
|
|
||||||
width: 100%
|
|
||||||
border: 2px solid #ccc
|
|
||||||
border-radius: 4px
|
|
||||||
outline: none
|
|
||||||
transition: border-color 0.3s, box-shadow 0.3s
|
|
||||||
|
|
||||||
&:focus
|
|
||||||
border-color: #3377AC
|
|
||||||
box-shadow: 0 0 5px rgba(51, 119, 168, 0.3)
|
|
||||||
|
|
||||||
&::placeholder
|
|
||||||
color: #888
|
|
||||||
font-style: italic
|
|
||||||
|
|
||||||
&:disabled
|
|
||||||
background-color: #f0f0f0
|
|
||||||
border-color: #ddd
|
|
||||||
|
|
||||||
&--error
|
|
||||||
border-color: #ff4d4f
|
|
||||||
box-shadow: 0 0 5px rgba(255, 77, 79, 0.3)
|
|
||||||
|
|
||||||
&:focus
|
|
||||||
border-color: #e81123
|
|
||||||
79
src/components/Counter.astro
Normal file
79
src/components/Counter.astro
Normal file
|
|
@ -0,0 +1,79 @@
|
||||||
|
---
|
||||||
|
const count = 0
|
||||||
|
---
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let count = 0
|
||||||
|
|
||||||
|
// }
|
||||||
|
const updateDisplay = () => {
|
||||||
|
const countdisplay = document.getElementById('countdisplay')!
|
||||||
|
countdisplay.textContent = count
|
||||||
|
}
|
||||||
|
|
||||||
|
const decrement = document.getElementById('decrement')!
|
||||||
|
decrement.addEventListener('click', () => {
|
||||||
|
count--
|
||||||
|
updateDisplay()
|
||||||
|
})
|
||||||
|
|
||||||
|
const increment = document.getElementById('increment')!
|
||||||
|
increment.addEventListener('click', () => {
|
||||||
|
count++
|
||||||
|
updateDisplay()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section class="counter">
|
||||||
|
<div class="counter__display" id="countdisplay">{count}</div>
|
||||||
|
<div class="counter__buttons">
|
||||||
|
<button class="counter__decrement" id="decrement"> - </button>
|
||||||
|
<button class="counter__increment" id="increment"> + </button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style lang="sass">
|
||||||
|
.counter
|
||||||
|
display: flex
|
||||||
|
flex-direction: column
|
||||||
|
align-items: center
|
||||||
|
gap: 1rem
|
||||||
|
margin: 2rem
|
||||||
|
color: white
|
||||||
|
border: 1px solid rgba(22, 34, 60, 0.5)
|
||||||
|
padding: 1rem 2rem
|
||||||
|
border-radius: 16px
|
||||||
|
background: rgba(134, 152, 217, 0.1)
|
||||||
|
|
||||||
|
&__display
|
||||||
|
font-size: 1.75rem
|
||||||
|
font-weight: bold
|
||||||
|
|
||||||
|
&__buttons
|
||||||
|
display: flex
|
||||||
|
justify-content: center
|
||||||
|
gap: 0.25rem
|
||||||
|
|
||||||
|
&__decrement
|
||||||
|
width: 2rem
|
||||||
|
height: 2.25rem
|
||||||
|
padding: auto
|
||||||
|
font-size: 1rem
|
||||||
|
font-weight: bold
|
||||||
|
cursor: pointer
|
||||||
|
text-decoration: none
|
||||||
|
background-color: rgba(86, 14, 14, 0.915)
|
||||||
|
border-radius: 8px
|
||||||
|
color: white
|
||||||
|
border: 1px solid rgba(255,255,255,0.2)
|
||||||
|
|
||||||
|
&:active
|
||||||
|
transform: scale(0.95)
|
||||||
|
|
||||||
|
&__increment
|
||||||
|
@extend .counter__decrement
|
||||||
|
background-color: rgb(14, 42, 86, 0.915)
|
||||||
|
|
||||||
|
&:active
|
||||||
|
transform: scale(0.95)
|
||||||
|
</style>
|
||||||
|
|
@ -1,47 +0,0 @@
|
||||||
.counter
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
align-items: center
|
|
||||||
gap: 1rem
|
|
||||||
margin: 2rem
|
|
||||||
color: white
|
|
||||||
border: 1px solid rgba(22, 34, 60, 0.5)
|
|
||||||
padding: 1rem 2rem
|
|
||||||
border-radius: 16px
|
|
||||||
background: rgba(134, 152, 217, 0.1)
|
|
||||||
|
|
||||||
&__display
|
|
||||||
font-size: 1.75rem
|
|
||||||
font-weight: bold
|
|
||||||
|
|
||||||
&__buttons
|
|
||||||
display: flex
|
|
||||||
justify-content: center
|
|
||||||
gap: 0.25rem
|
|
||||||
|
|
||||||
// &:hover
|
|
||||||
// background: color.adjust(vars.$primaryColor, $blackness: 20%)
|
|
||||||
|
|
||||||
|
|
||||||
&__decrement
|
|
||||||
width: 2rem
|
|
||||||
height: 2.25rem
|
|
||||||
padding: auto
|
|
||||||
font-size: 1rem
|
|
||||||
font-weight: bold
|
|
||||||
cursor: pointer
|
|
||||||
text-decoration: none
|
|
||||||
background-color: rgba(86, 14, 14, 0.915)
|
|
||||||
border-radius: 8px
|
|
||||||
color: white
|
|
||||||
border: 1px solid rgba(255,255,255,0.2)
|
|
||||||
|
|
||||||
&:active
|
|
||||||
transform: scale(0.95)
|
|
||||||
|
|
||||||
&__increment
|
|
||||||
@extend .counter__decrement
|
|
||||||
background-color: rgb(14, 42, 86, 0.915)
|
|
||||||
|
|
||||||
&:active
|
|
||||||
transform: scale(0.95)
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
import './Counter.sass'
|
|
||||||
import { createSignal } from 'solid-js'
|
|
||||||
|
|
||||||
let [count, setCount] = createSignal(0)
|
|
||||||
|
|
||||||
const increment = () => {
|
|
||||||
setCount(count() + 1)
|
|
||||||
}
|
|
||||||
|
|
||||||
const decrement = () => {
|
|
||||||
setCount(count() - 1)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<section class="counter">
|
|
||||||
<div class="counter__display">{count()}</div>
|
|
||||||
<div class="counter__buttons">
|
|
||||||
<button class="counter__decrement" onClick={decrement}>
|
|
||||||
-
|
|
||||||
</button>
|
|
||||||
<button class="counter__increment" onClick={increment}>
|
|
||||||
+
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
import Input from '../../../@dasig/components/Input'
|
|
||||||
import { createSignal } from 'solid-js'
|
|
||||||
|
|
||||||
const [sample, setSample] = createSignal('')
|
|
||||||
|
|
||||||
export default () => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Input onChange={(val) => setSample(val)}></Input>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
---
|
---
|
||||||
import Layout from '../layouts/Layout.astro'
|
import Layout from '../layouts/Layout.astro'
|
||||||
import { Logo, Page, Footer, Row, Image, Copyright, Column } from '../../@dasig'
|
import { Logo, Page, Footer, Row, Image, Copyright, Column, Button } from '../../@dasig'
|
||||||
import Counter from '../components/Counter/Counter'
|
import Counter from '../components/Counter.astro'
|
||||||
import PA1 from '../../@dasig/images/pat-alcala.avif'
|
import PA1 from '../../@dasig/images/pat-alcala.avif'
|
||||||
import PA2 from '../../@dasig/images/pat-alcala.webp'
|
import PA2 from '../../@dasig/images/pat-alcala.webp'
|
||||||
---
|
---
|
||||||
|
|
@ -11,8 +11,8 @@ import PA2 from '../../@dasig/images/pat-alcala.webp'
|
||||||
<Column>
|
<Column>
|
||||||
<Logo size={250} />
|
<Logo size={250} />
|
||||||
|
|
||||||
<h1>Dasig - Astro</h1>
|
<h1>Dasig - Static</h1>
|
||||||
<Counter client:idle />
|
<Counter />
|
||||||
|
|
||||||
<Footer>
|
<Footer>
|
||||||
<Row content="center" gap={0.5}>
|
<Row content="center" gap={0.5}>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue