Pull in new status light from new design UI
This commit is contained in:
parent
271b274b27
commit
465ef6ab57
|
@ -17,10 +17,13 @@
|
||||||
export let negative = false
|
export let negative = false
|
||||||
export let disabled = false
|
export let disabled = false
|
||||||
export let active = false
|
export let active = false
|
||||||
|
export let color = null
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="spectrum-StatusLight spectrum-StatusLight--size{size}"
|
class="spectrum-StatusLight spectrum-StatusLight--size{size}"
|
||||||
|
class:custom={!!color}
|
||||||
|
style={`--color: ${color};`}
|
||||||
class:spectrum-StatusLight--celery={celery}
|
class:spectrum-StatusLight--celery={celery}
|
||||||
class:spectrum-StatusLight--yellow={yellow}
|
class:spectrum-StatusLight--yellow={yellow}
|
||||||
class:spectrum-StatusLight--fuchsia={fuchsia}
|
class:spectrum-StatusLight--fuchsia={fuchsia}
|
||||||
|
@ -36,6 +39,26 @@
|
||||||
class:spectrum-StatusLight--negative={negative}
|
class:spectrum-StatusLight--negative={negative}
|
||||||
class:spectrum-StatusLight--disabled={disabled}
|
class:spectrum-StatusLight--disabled={disabled}
|
||||||
class:spectrum-StatusLight--active={active}
|
class:spectrum-StatusLight--active={active}
|
||||||
|
class:withText={!!$$slots.default}
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.spectrum-StatusLight {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
--spectrum-statuslight-info-text-gap: 4px;
|
||||||
|
min-height: 0;
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
.spectrum-StatusLight.withText::before {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.custom::before {
|
||||||
|
background: var(--color) !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue