Update label component to use spectrum
This commit is contained in:
parent
4d69e8c5c2
commit
3d838a4c48
|
@ -1,62 +1,16 @@
|
||||||
<script>
|
<script>
|
||||||
export let forAttr = "",
|
import "@spectrum-css/fieldlabel/dist/index-vars.css"
|
||||||
extraSmall = false,
|
|
||||||
small = false,
|
export let size = "M"
|
||||||
medium = false,
|
|
||||||
large = false,
|
|
||||||
extraLarge = false,
|
|
||||||
white = false,
|
|
||||||
grey = false,
|
|
||||||
black = false
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<label
|
<label class={`spectrum-FieldLabel spectrum-FieldLabel--size${size}`}>
|
||||||
class="bb-label"
|
|
||||||
class:extraSmall
|
|
||||||
class:small
|
|
||||||
class:medium
|
|
||||||
class:large
|
|
||||||
class:extraLarge
|
|
||||||
class:white
|
|
||||||
class:grey
|
|
||||||
class:black
|
|
||||||
for={forAttr}
|
|
||||||
>
|
|
||||||
<slot />
|
<slot />
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.bb-label {
|
label {
|
||||||
font-family: var(--font-sans);
|
padding: 0;
|
||||||
font-weight: 500;
|
white-space: nowrap;
|
||||||
text-rendering: var(--text-render);
|
|
||||||
color: var(--ink);
|
|
||||||
font-size: var(--font-size-s);
|
|
||||||
margin-bottom: var(--spacing-s);
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.extraSmall {
|
|
||||||
font-size: var(--font-size-xs);
|
|
||||||
}
|
|
||||||
.small {
|
|
||||||
font-size: var(--font-size-s);
|
|
||||||
}
|
|
||||||
.medium {
|
|
||||||
font-size: var(--font-size-m);
|
|
||||||
}
|
|
||||||
.large {
|
|
||||||
font-size: var(--font-size-l);
|
|
||||||
}
|
|
||||||
.extraLarge {
|
|
||||||
font-size: var(--font-size-xl);
|
|
||||||
}
|
|
||||||
.white {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.grey {
|
|
||||||
color: var(--grey-6);
|
|
||||||
}
|
|
||||||
.black {
|
|
||||||
color: var(--ink);
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue