Add square option to status lights
This commit is contained in:
parent
501759134e
commit
bf15f86ade
|
@ -18,11 +18,13 @@
|
||||||
export let disabled = false
|
export let disabled = false
|
||||||
export let active = false
|
export let active = false
|
||||||
export let color = null
|
export let color = null
|
||||||
|
export let square = false
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="spectrum-StatusLight spectrum-StatusLight--size{size}"
|
class="spectrum-StatusLight spectrum-StatusLight--size{size}"
|
||||||
class:custom={!!color}
|
class:custom={!!color}
|
||||||
|
class:square
|
||||||
style={`--color: ${color};`}
|
style={`--color: ${color};`}
|
||||||
class:spectrum-StatusLight--celery={celery}
|
class:spectrum-StatusLight--celery={celery}
|
||||||
class:spectrum-StatusLight--yellow={yellow}
|
class:spectrum-StatusLight--yellow={yellow}
|
||||||
|
@ -61,4 +63,10 @@
|
||||||
.custom::before {
|
.custom::before {
|
||||||
background: var(--color) !important;
|
background: var(--color) !important;
|
||||||
}
|
}
|
||||||
|
.square::before {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue