MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update label component to use spectrum

This commit is contained in:
Andrew Kingston 2021-05-06 15:33:16 +01:00
parent db9f3d15d1
commit f84cf90192
1 changed files with 7 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
packages/bbui/src/Label/Label.svelte
View File

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