Add more size options for paragraphs and headings
This commit is contained in:
parent
5990b050e0
commit
cc65aff391
|
@ -595,6 +595,9 @@
|
|||
"showInBar": true,
|
||||
"barStyle": "picker",
|
||||
"options": [{
|
||||
"label": "Extra Small",
|
||||
"value": "XS"
|
||||
}, {
|
||||
"label": "Small",
|
||||
"value": "S"
|
||||
}, {
|
||||
|
@ -603,6 +606,15 @@
|
|||
}, {
|
||||
"label": "Large",
|
||||
"value": "L"
|
||||
}, {
|
||||
"label": "Extra Large",
|
||||
"value": "XL"
|
||||
}, {
|
||||
"label": "2XL",
|
||||
"value": "XXL"
|
||||
}, {
|
||||
"label": "3XL",
|
||||
"value": "XXXL"
|
||||
}]
|
||||
},
|
||||
{
|
||||
|
@ -689,6 +701,9 @@
|
|||
"showInBar": true,
|
||||
"barStyle": "picker",
|
||||
"options": [{
|
||||
"label": "Extra Small",
|
||||
"value": "XS"
|
||||
}, {
|
||||
"label": "Small",
|
||||
"value": "S"
|
||||
}, {
|
||||
|
@ -697,6 +712,15 @@
|
|||
}, {
|
||||
"label": "Large",
|
||||
"value": "L"
|
||||
}, {
|
||||
"label": "Extra Large",
|
||||
"value": "XL"
|
||||
}, {
|
||||
"label": "2XL",
|
||||
"value": "XXL"
|
||||
}, {
|
||||
"label": "3XL",
|
||||
"value": "XXXL"
|
||||
}]
|
||||
},
|
||||
{
|
||||
|
|
|
@ -16,6 +16,8 @@
|
|||
$: componentText = $builderStore.inBuilder
|
||||
? text || $component.name || "Placeholder text"
|
||||
: text || ""
|
||||
$: sizeClass = `spectrum-Body--size${size || "M"}`
|
||||
$: alignClass = `align--${align || "left"}`
|
||||
|
||||
// Add color styles to main styles object, otherwise the styleable helper
|
||||
// overrides the color when it's passed as inline style.
|
||||
|
@ -41,7 +43,7 @@
|
|||
class:bold
|
||||
class:italic
|
||||
class:underline
|
||||
class="align--{align || 'left'} size--{size || 'M'}"
|
||||
class="spectrum-Body {sizeClass} {alignClass}"
|
||||
>
|
||||
{componentText}
|
||||
</p>
|
||||
|
@ -65,15 +67,6 @@
|
|||
.underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.size--S {
|
||||
font-size: 14px;
|
||||
}
|
||||
.size--M {
|
||||
font-size: 16px;
|
||||
}
|
||||
.size--L {
|
||||
font-size: 18px;
|
||||
}
|
||||
.align--left {
|
||||
text-align: left;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue