71 lines
1.9 KiB
HTML
71 lines
1.9 KiB
HTML
<script props>
|
|
// https://maizzle.com/docs/components/divider
|
|
let styles = [
|
|
`height: ${props.height || '1px'};`,
|
|
`line-height: ${props.height || '1px'};`,
|
|
]
|
|
|
|
/**
|
|
* Color
|
|
*
|
|
* If a Tailwind background color class was passed, use it.
|
|
* Otherwise, the `color` prop will take precedence if
|
|
* as long as it was passed.
|
|
*/
|
|
let hasBgClass = () => props.class && props.class.split(' ').some(c => c.startsWith('bg-'))
|
|
|
|
if (props.color) {
|
|
styles.push(`background-color: ${props.color};`)
|
|
}
|
|
if (!props.color && !hasBgClass()) {
|
|
styles.push(`background-color: #cbd5e1;`)
|
|
}
|
|
|
|
/**
|
|
* Margins
|
|
*
|
|
* If any margin prop was passed, add `margin: 0` first.
|
|
* It's important that this comes first, so inlining
|
|
* does not use it to override existing margins.
|
|
*/
|
|
if (props.top || props.bottom || props.left || props.right || props['space-y'] || props['space-x']) {
|
|
styles.push('margin: 0;')
|
|
}
|
|
|
|
props['space-y'] = props['space-y'] === 0 ? '0px' : props['space-y'] || '24px'
|
|
if (props['space-y']) {
|
|
styles.push(`margin-top: ${props['space-y']}; margin-bottom: ${props['space-y']};`)
|
|
}
|
|
|
|
props['space-x'] = props['space-x'] === 0 ? '0px' : props['space-x']
|
|
if (props['space-x']) {
|
|
styles.push(`margin-left: ${props['space-x']}; margin-right: ${props['space-x']};`)
|
|
}
|
|
|
|
props.top = props.top === 0 ? '0px' : props.top
|
|
if (props.top) {
|
|
styles.push(`margin-top: ${props.top};`)
|
|
}
|
|
|
|
props.bottom = props.bottom === 0 ? '0px' : props.bottom
|
|
if (props.bottom) {
|
|
styles.push(`margin-bottom: ${props.bottom};`)
|
|
}
|
|
|
|
props.left = props.left === 0 ? '0px' : props.left
|
|
if (props.left) {
|
|
styles.push(`margin-left: ${props.left};`)
|
|
}
|
|
|
|
props.right = props.right === 0 ? '0px' : props.right
|
|
if (props.right) {
|
|
styles.push(`margin-right: ${props.right};`)
|
|
}
|
|
|
|
module.exports = {
|
|
styles: styles.join(''),
|
|
}
|
|
</script>
|
|
|
|
<div role="separator" style="{{ styles }}">‍</div>
|