Add square option to status lights

This commit is contained in:
Andrew Kingston 2022-07-25 17:04:29 +01:00
parent 501759134e
commit bf15f86ade
1 changed files with 8 additions and 0 deletions

View File

@ -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>