@rarui/components 1.9.0 → 1.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/custom-elements.json +257 -121
- package/dist/index.d.ts +279 -0
- package/dist/index.js +194 -108
- package/package.json +1 -1
package/custom-elements.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.
|
|
2
|
+
"version": "1.10.0",
|
|
3
3
|
"tags": [
|
|
4
4
|
{
|
|
5
5
|
"name": "rarui-avatar",
|
|
@@ -128,7 +128,7 @@
|
|
|
128
128
|
{
|
|
129
129
|
"name": "type",
|
|
130
130
|
"default": "solid",
|
|
131
|
-
"description": "The **`type`** shorthand CSS property sets the line style for all four sides of an element's.\n\nThis property supports responsive values. You can pass a single value like `\"$dashed\"`.\n\
|
|
131
|
+
"description": "The **`type`** shorthand CSS property sets the line style for all four sides of an element's.\n\nThis property supports responsive values. You can pass a single value like `\"$dashed\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$dashed\",\n \"md\": \"$solid\",\n \"lg\": \"$dashed\",\n \"xl\": \"$solid\"\n}\n```\n\n- $dashed\n- $solid",
|
|
132
132
|
"values": [
|
|
133
133
|
{
|
|
134
134
|
"name": "$dashed"
|
|
@@ -141,7 +141,7 @@
|
|
|
141
141
|
{
|
|
142
142
|
"name": "thickness",
|
|
143
143
|
"default": "$1",
|
|
144
|
-
"description": "The **`thickness`** shorthand CSS property sets the width of an element's.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\
|
|
144
|
+
"description": "The **`thickness`** shorthand CSS property sets the width of an element's.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$1\",\n \"md\": \"$2\",\n \"lg\": \"$1\",\n \"xl\": \"$2\"\n}\n```\n\n- $1\n- $2",
|
|
145
145
|
"values": [
|
|
146
146
|
{
|
|
147
147
|
"name": "$1",
|
|
@@ -155,7 +155,7 @@
|
|
|
155
155
|
{
|
|
156
156
|
"name": "color",
|
|
157
157
|
"default": "$divider",
|
|
158
|
-
"description": "The **`color`** CSS property sets an element's color.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\
|
|
158
|
+
"description": "The **`color`** CSS property sets an element's color.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$brand\",\n \"md\": \"$brand-alt\",\n \"lg\": \"$disabled\",\n \"xl\": \"$divider\"\n}\n```\n\n- $brand\n- $brand-alt\n- $disabled\n- $divider\n- $error\n- $info\n- $invert\n- $invert-disabled\n- $primary\n- $secondary\n- $subdued\n- $success\n- $transparent\n- $warning",
|
|
159
159
|
"values": [
|
|
160
160
|
{
|
|
161
161
|
"name": "$brand"
|
|
@@ -209,7 +209,7 @@
|
|
|
209
209
|
"attributes": [
|
|
210
210
|
{
|
|
211
211
|
"name": "color",
|
|
212
|
-
"description": "The color property sets the icon.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\
|
|
212
|
+
"description": "The color property sets the icon.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$brand\",\n \"md\": \"$brand-alt\",\n \"lg\": \"$currentColor\",\n \"xl\": \"$disabled\"\n}\n```\n\n- $brand\n- $brand-alt\n- $currentColor\n- $disabled\n- $error\n- $info\n- $invert\n- $invert-disabled\n- $invert-secondary\n- $on-brand\n- $on-error\n- $on-info\n- $on-success\n- $on-warning\n- $primary\n- $secondary\n- $success\n- $warning\n- $warning-alt",
|
|
213
213
|
"values": [
|
|
214
214
|
{
|
|
215
215
|
"name": "$brand"
|
|
@@ -272,7 +272,7 @@
|
|
|
272
272
|
},
|
|
273
273
|
{
|
|
274
274
|
"name": "cursor",
|
|
275
|
-
"description": "The **`cursor`** CSS property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"alias\"`.\n\
|
|
275
|
+
"description": "The **`cursor`** CSS property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"alias\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"alias\",\n \"md\": \"all-scroll\",\n \"lg\": \"auto\",\n \"xl\": \"cell\"\n}\n```\n\n- alias\n- all-scroll\n- auto\n- cell\n- col-resize\n- context-menu\n- copy\n- crosshair\n- default\n- e-resize\n- ew-resize\n- grab\n- grabbing\n- help\n- move\n- n-resize\n- ne-resize\n- nesw-resize\n- no-drop\n- none\n- not-allowed\n- ns-resize\n- nw-resize\n- nwse-resize\n- pointer\n- progress\n- row-resize\n- s-resize\n- se-resize\n- sw-resize\n- text\n- vertical-text\n- w-resize\n- wait\n- zoom-in\n- zoom-out",
|
|
276
276
|
"values": [
|
|
277
277
|
{
|
|
278
278
|
"name": "alias"
|
|
@@ -1355,13 +1355,62 @@
|
|
|
1355
1355
|
}
|
|
1356
1356
|
]
|
|
1357
1357
|
},
|
|
1358
|
+
{
|
|
1359
|
+
"name": "rarui-stepper",
|
|
1360
|
+
"description": "## Rarui Stepper\n---\nStepper transmit progress through steps.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/stepper) for more details.",
|
|
1361
|
+
"attributes": [
|
|
1362
|
+
{
|
|
1363
|
+
"name": "direction",
|
|
1364
|
+
"default": "horizontal",
|
|
1365
|
+
"description": "Specifies the direction of the stepper. This prop accepts one of the following values: vertical or horizontal.\n\n- horizontal\n- vertical",
|
|
1366
|
+
"type": "string",
|
|
1367
|
+
"values": [
|
|
1368
|
+
{
|
|
1369
|
+
"name": "horizontal",
|
|
1370
|
+
"description": "(default)"
|
|
1371
|
+
},
|
|
1372
|
+
{
|
|
1373
|
+
"name": "vertical"
|
|
1374
|
+
}
|
|
1375
|
+
]
|
|
1376
|
+
}
|
|
1377
|
+
]
|
|
1378
|
+
},
|
|
1379
|
+
{
|
|
1380
|
+
"name": "rarui-stepper-step",
|
|
1381
|
+
"description": "## Rarui Stepper Step\n---\nStepper transmit progress through steps.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/stepper) for more details.",
|
|
1382
|
+
"attributes": [
|
|
1383
|
+
{
|
|
1384
|
+
"name": "title",
|
|
1385
|
+
"description": "The title of the step. This provides a brief summary of the step's purpose.",
|
|
1386
|
+
"type": "string"
|
|
1387
|
+
},
|
|
1388
|
+
{
|
|
1389
|
+
"name": "description",
|
|
1390
|
+
"description": "A more detailed description of the step. This can provide additional context or instructions.",
|
|
1391
|
+
"type": "string"
|
|
1392
|
+
},
|
|
1393
|
+
{
|
|
1394
|
+
"name": "active",
|
|
1395
|
+
"default": false,
|
|
1396
|
+
"description": "Indicates whether the step is currently active. An active step is typically highlighted to show that it is the current step.",
|
|
1397
|
+
"type": "boolean"
|
|
1398
|
+
},
|
|
1399
|
+
{
|
|
1400
|
+
"name": "done",
|
|
1401
|
+
"default": false,
|
|
1402
|
+
"description": "Indicates whether the step has been completed. A completed step is usually marked with a checkmark or other indicator.",
|
|
1403
|
+
"type": "boolean"
|
|
1404
|
+
}
|
|
1405
|
+
]
|
|
1406
|
+
},
|
|
1358
1407
|
{
|
|
1359
1408
|
"name": "rarui-text",
|
|
1360
1409
|
"description": "## Rarui Text\n---\nText is a basic component that allows us to write blocks of text and give it formatting to use within other components, sections and pages of our application or website.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/exhibition/typography) for more details.",
|
|
1361
1410
|
"attributes": [
|
|
1362
1411
|
{
|
|
1363
1412
|
"name": "color",
|
|
1364
|
-
"description": "The color property is used to set the color of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\
|
|
1413
|
+
"description": "The color property is used to set the color of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$brand\",\n \"md\": \"$brand-alt\",\n \"lg\": \"$currentColor\",\n \"xl\": \"$disabled\"\n}\n```\n\n- $brand\n- $brand-alt\n- $currentColor\n- $disabled\n- $error\n- $info\n- $invert\n- $invert-disabled\n- $invert-secondary\n- $on-brand\n- $on-error\n- $on-info\n- $on-success\n- $on-warning\n- $primary\n- $secondary\n- $success\n- $warning\n- $warning-alt",
|
|
1365
1414
|
"values": [
|
|
1366
1415
|
{
|
|
1367
1416
|
"name": "$brand"
|
|
@@ -1425,7 +1474,7 @@
|
|
|
1425
1474
|
{
|
|
1426
1475
|
"name": "font-weight",
|
|
1427
1476
|
"default": "$regular",
|
|
1428
|
-
"description": "The color property is used to set the color of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$bold\"`.\n\
|
|
1477
|
+
"description": "The color property is used to set the color of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$bold\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$bold\",\n \"md\": \"$medium\",\n \"lg\": \"$regular\",\n \"xl\": \"$semiBold\"\n}\n```\n\n- $bold\n- $medium\n- $regular\n- $semiBold",
|
|
1429
1478
|
"values": [
|
|
1430
1479
|
{
|
|
1431
1480
|
"name": "$bold"
|
|
@@ -1444,7 +1493,7 @@
|
|
|
1444
1493
|
},
|
|
1445
1494
|
{
|
|
1446
1495
|
"name": "line-height",
|
|
1447
|
-
"description": "The lineHeight property specifies the line height of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$l\"`.\n\
|
|
1496
|
+
"description": "The lineHeight property specifies the line height of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$l\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$l\",\n \"md\": \"$m\",\n \"lg\": \"$s\",\n \"xl\": \"$xl\"\n}\n```\n\n- $l\n- $m\n- $s\n- $xl\n- $xs\n- $xxs",
|
|
1448
1497
|
"values": [
|
|
1449
1498
|
{
|
|
1450
1499
|
"name": "$l"
|
|
@@ -1468,7 +1517,7 @@
|
|
|
1468
1517
|
},
|
|
1469
1518
|
{
|
|
1470
1519
|
"name": "font-size",
|
|
1471
|
-
"description": "The fontSize property sets the size of the text.\n\nThis property supports responsive values. You can pass a single value like `\"$l\"`.\n\
|
|
1520
|
+
"description": "The fontSize property sets the size of the text.\n\nThis property supports responsive values. You can pass a single value like `\"$l\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$l\",\n \"md\": \"$m\",\n \"lg\": \"$s\",\n \"xl\": \"$xl\"\n}\n```\n\n- $l\n- $m\n- $s\n- $xl\n- $xs\n- $xxs",
|
|
1472
1521
|
"values": [
|
|
1473
1522
|
{
|
|
1474
1523
|
"name": "$l"
|
|
@@ -1492,7 +1541,7 @@
|
|
|
1492
1541
|
},
|
|
1493
1542
|
{
|
|
1494
1543
|
"name": "text-align",
|
|
1495
|
-
"description": "The **`text-align`** CSS property sets the horizontal alignment of a block element or table-cell box. This means it works like `vertical-align` but in the horizontal direction.\n\n\n**Initial value**: `start`, or a nameless value that acts as `left` if _direction_ is `ltr`, `right` if _direction_ is `rtl` if `start` is not supported by the browser.\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\
|
|
1544
|
+
"description": "The **`text-align`** CSS property sets the horizontal alignment of a block element or table-cell box. This means it works like `vertical-align` but in the horizontal direction.\n\n\n**Initial value**: `start`, or a nameless value that acts as `left` if _direction_ is `ltr`, `right` if _direction_ is `rtl` if `start` is not supported by the browser.\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"center\",\n \"md\": \"end\",\n \"lg\": \"justify\",\n \"xl\": \"left\"\n}\n```\n\n- center\n- end\n- justify\n- left\n- match-parent\n- right\n- start",
|
|
1496
1545
|
"values": [
|
|
1497
1546
|
{
|
|
1498
1547
|
"name": "center"
|
|
@@ -1519,7 +1568,7 @@
|
|
|
1519
1568
|
},
|
|
1520
1569
|
{
|
|
1521
1570
|
"name": "word-break",
|
|
1522
|
-
"description": "The **`word-break`** CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"break-all\"`.\n\
|
|
1571
|
+
"description": "The **`word-break`** CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"break-all\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"break-all\",\n \"md\": \"break-word\",\n \"lg\": \"keep-all\",\n \"xl\": \"normal\"\n}\n```\n\n- break-all\n- break-word\n- keep-all\n- normal",
|
|
1523
1572
|
"values": [
|
|
1524
1573
|
{
|
|
1525
1574
|
"name": "break-all"
|
|
@@ -1537,7 +1586,7 @@
|
|
|
1537
1586
|
},
|
|
1538
1587
|
{
|
|
1539
1588
|
"name": "text-transform",
|
|
1540
|
-
"description": "The **`text-transform`** CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"capitalize\"`.\n\
|
|
1589
|
+
"description": "The **`text-transform`** CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"capitalize\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"capitalize\",\n \"md\": \"full-size-kana\",\n \"lg\": \"full-width\",\n \"xl\": \"lowercase\"\n}\n```\n\n- capitalize\n- full-size-kana\n- full-width\n- lowercase\n- none\n- uppercase",
|
|
1541
1590
|
"values": [
|
|
1542
1591
|
{
|
|
1543
1592
|
"name": "capitalize"
|
|
@@ -1561,7 +1610,7 @@
|
|
|
1561
1610
|
},
|
|
1562
1611
|
{
|
|
1563
1612
|
"name": "text-decoration",
|
|
1564
|
-
"description": "The **`text-decoration`** shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for `text-decoration-line`, `text-decoration-color`, `text-decoration-style`, and the newer `text-decoration-thickness` property.\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\
|
|
1613
|
+
"description": "The **`text-decoration`** shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for `text-decoration-line`, `text-decoration-color`, `text-decoration-style`, and the newer `text-decoration-thickness` property.\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"blink\",\n \"lg\": \"dashed\",\n \"xl\": \"dotted\"\n}\n```\n\n- auto\n- blink\n- dashed\n- dotted\n- double\n- from-font\n- grammar-error\n- line-through\n- none\n- overline\n- solid\n- spelling-error\n- underline\n- wavy",
|
|
1565
1614
|
"values": [
|
|
1566
1615
|
{
|
|
1567
1616
|
"name": "auto"
|
|
@@ -1609,7 +1658,7 @@
|
|
|
1609
1658
|
},
|
|
1610
1659
|
{
|
|
1611
1660
|
"name": "text-overflow",
|
|
1612
|
-
"description": "The **`text-overflow`** CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('`…`'), or display a custom string.\n\n\n**Initial value**: `clip`\n\nThis property supports responsive values. You can pass a single value like `\"clip\"`.\n\
|
|
1661
|
+
"description": "The **`text-overflow`** CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('`…`'), or display a custom string.\n\n\n**Initial value**: `clip`\n\nThis property supports responsive values. You can pass a single value like `\"clip\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"clip\",\n \"md\": \"ellipsis\",\n \"lg\": \"clip\",\n \"xl\": \"ellipsis\"\n}\n```\n\n- clip\n- ellipsis",
|
|
1613
1662
|
"values": [
|
|
1614
1663
|
{
|
|
1615
1664
|
"name": "clip"
|
|
@@ -1621,7 +1670,7 @@
|
|
|
1621
1670
|
},
|
|
1622
1671
|
{
|
|
1623
1672
|
"name": "width",
|
|
1624
|
-
"description": "The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\
|
|
1673
|
+
"description": "The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"fit-content\",\n \"lg\": \"intrinsic\",\n \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- min-intrinsic\n- stretch",
|
|
1625
1674
|
"values": [
|
|
1626
1675
|
{
|
|
1627
1676
|
"name": "auto"
|
|
@@ -1648,7 +1697,7 @@
|
|
|
1648
1697
|
},
|
|
1649
1698
|
{
|
|
1650
1699
|
"name": "overflow",
|
|
1651
|
-
"description": "The **`overflow`** CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\
|
|
1700
|
+
"description": "The **`overflow`** CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"clip\",\n \"lg\": \"hidden\",\n \"xl\": \"scroll\"\n}\n```\n\n- auto\n- clip\n- hidden\n- scroll\n- visible",
|
|
1652
1701
|
"values": [
|
|
1653
1702
|
{
|
|
1654
1703
|
"name": "auto"
|
|
@@ -1669,7 +1718,7 @@
|
|
|
1669
1718
|
},
|
|
1670
1719
|
{
|
|
1671
1720
|
"name": "white-space",
|
|
1672
|
-
"description": "The **`white-space`** CSS property sets how white space inside an element is handled.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"break-spaces\"`.\n\
|
|
1721
|
+
"description": "The **`white-space`** CSS property sets how white space inside an element is handled.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"break-spaces\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"break-spaces\",\n \"md\": \"normal\",\n \"lg\": \"nowrap\",\n \"xl\": \"pre\"\n}\n```\n\n- break-spaces\n- normal\n- nowrap\n- pre\n- pre-line\n- pre-wrap",
|
|
1673
1722
|
"values": [
|
|
1674
1723
|
{
|
|
1675
1724
|
"name": "break-spaces"
|
|
@@ -1731,7 +1780,7 @@
|
|
|
1731
1780
|
},
|
|
1732
1781
|
{
|
|
1733
1782
|
"name": "color",
|
|
1734
|
-
"description": "The color property is used to set the color of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\
|
|
1783
|
+
"description": "The color property is used to set the color of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$brand\",\n \"md\": \"$brand-alt\",\n \"lg\": \"$currentColor\",\n \"xl\": \"$disabled\"\n}\n```\n\n- $brand\n- $brand-alt\n- $currentColor\n- $disabled\n- $error\n- $info\n- $invert\n- $invert-disabled\n- $invert-secondary\n- $on-brand\n- $on-error\n- $on-info\n- $on-success\n- $on-warning\n- $primary\n- $secondary\n- $success\n- $warning\n- $warning-alt",
|
|
1735
1784
|
"values": [
|
|
1736
1785
|
{
|
|
1737
1786
|
"name": "$brand"
|
|
@@ -1795,7 +1844,7 @@
|
|
|
1795
1844
|
{
|
|
1796
1845
|
"name": "font-weight",
|
|
1797
1846
|
"default": "$regular",
|
|
1798
|
-
"description": "The color property is used to set the color of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$bold\"`.\n\
|
|
1847
|
+
"description": "The color property is used to set the color of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$bold\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$bold\",\n \"md\": \"$medium\",\n \"lg\": \"$regular\",\n \"xl\": \"$semiBold\"\n}\n```\n\n- $bold\n- $medium\n- $regular\n- $semiBold",
|
|
1799
1848
|
"values": [
|
|
1800
1849
|
{
|
|
1801
1850
|
"name": "$bold"
|
|
@@ -1814,7 +1863,7 @@
|
|
|
1814
1863
|
},
|
|
1815
1864
|
{
|
|
1816
1865
|
"name": "font-size",
|
|
1817
|
-
"description": "The fontSize property sets the size of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$hero\"`.\n\
|
|
1866
|
+
"description": "The fontSize property sets the size of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$hero\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$hero\",\n \"md\": \"$l\",\n \"lg\": \"$m\",\n \"xl\": \"$s\"\n}\n```\n\n- $hero\n- $l\n- $m\n- $s\n- $xl\n- $xs",
|
|
1818
1867
|
"values": [
|
|
1819
1868
|
{
|
|
1820
1869
|
"name": "$hero"
|
|
@@ -1838,7 +1887,7 @@
|
|
|
1838
1887
|
},
|
|
1839
1888
|
{
|
|
1840
1889
|
"name": "line-height",
|
|
1841
|
-
"description": "The lineHeight property specifies the line height of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$hero\"`.\n\
|
|
1890
|
+
"description": "The lineHeight property specifies the line height of the title.\n\nThis property supports responsive values. You can pass a single value like `\"$hero\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$hero\",\n \"md\": \"$l\",\n \"lg\": \"$m\",\n \"xl\": \"$s\"\n}\n```\n\n- $hero\n- $l\n- $m\n- $s\n- $xl\n- $xs",
|
|
1842
1891
|
"values": [
|
|
1843
1892
|
{
|
|
1844
1893
|
"name": "$hero"
|
|
@@ -1862,7 +1911,7 @@
|
|
|
1862
1911
|
},
|
|
1863
1912
|
{
|
|
1864
1913
|
"name": "text-align",
|
|
1865
|
-
"description": "The **`text-align`** CSS property sets the horizontal alignment of a block element or table-cell box. This means it works like `vertical-align` but in the horizontal direction.\n\n\n**Initial value**: `start`, or a nameless value that acts as `left` if _direction_ is `ltr`, `right` if _direction_ is `rtl` if `start` is not supported by the browser.\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\
|
|
1914
|
+
"description": "The **`text-align`** CSS property sets the horizontal alignment of a block element or table-cell box. This means it works like `vertical-align` but in the horizontal direction.\n\n\n**Initial value**: `start`, or a nameless value that acts as `left` if _direction_ is `ltr`, `right` if _direction_ is `rtl` if `start` is not supported by the browser.\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"center\",\n \"md\": \"end\",\n \"lg\": \"justify\",\n \"xl\": \"left\"\n}\n```\n\n- center\n- end\n- justify\n- left\n- match-parent\n- right\n- start",
|
|
1866
1915
|
"values": [
|
|
1867
1916
|
{
|
|
1868
1917
|
"name": "center"
|
|
@@ -1889,7 +1938,7 @@
|
|
|
1889
1938
|
},
|
|
1890
1939
|
{
|
|
1891
1940
|
"name": "text-transform",
|
|
1892
|
-
"description": "The **`text-transform`** CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"capitalize\"`.\n\
|
|
1941
|
+
"description": "The **`text-transform`** CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"capitalize\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"capitalize\",\n \"md\": \"full-size-kana\",\n \"lg\": \"full-width\",\n \"xl\": \"lowercase\"\n}\n```\n\n- capitalize\n- full-size-kana\n- full-width\n- lowercase\n- none\n- uppercase",
|
|
1893
1942
|
"values": [
|
|
1894
1943
|
{
|
|
1895
1944
|
"name": "capitalize"
|
|
@@ -1913,7 +1962,7 @@
|
|
|
1913
1962
|
},
|
|
1914
1963
|
{
|
|
1915
1964
|
"name": "text-decoration",
|
|
1916
|
-
"description": "The **`text-decoration`** shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for `text-decoration-line`, `text-decoration-color`, `text-decoration-style`, and the newer `text-decoration-thickness` property.\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\
|
|
1965
|
+
"description": "The **`text-decoration`** shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for `text-decoration-line`, `text-decoration-color`, `text-decoration-style`, and the newer `text-decoration-thickness` property.\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"blink\",\n \"lg\": \"dashed\",\n \"xl\": \"dotted\"\n}\n```\n\n- auto\n- blink\n- dashed\n- dotted\n- double\n- from-font\n- grammar-error\n- line-through\n- none\n- overline\n- solid\n- spelling-error\n- underline\n- wavy",
|
|
1917
1966
|
"values": [
|
|
1918
1967
|
{
|
|
1919
1968
|
"name": "auto"
|
|
@@ -2173,7 +2222,7 @@
|
|
|
2173
2222
|
},
|
|
2174
2223
|
{
|
|
2175
2224
|
"name": "width",
|
|
2176
|
-
"description": "The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\
|
|
2225
|
+
"description": "The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"fit-content\",\n \"lg\": \"intrinsic\",\n \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- min-intrinsic\n- stretch",
|
|
2177
2226
|
"values": [
|
|
2178
2227
|
{
|
|
2179
2228
|
"name": "auto"
|
|
@@ -2200,7 +2249,7 @@
|
|
|
2200
2249
|
},
|
|
2201
2250
|
{
|
|
2202
2251
|
"name": "height",
|
|
2203
|
-
"description": "The **`height`** CSS property specifies the height of an element. By default, the property defines the height of the content area. If `box-sizing` is set to `border-box`, however, it instead determines the height of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\
|
|
2252
|
+
"description": "The **`height`** CSS property specifies the height of an element. By default, the property defines the height of the content area. If `box-sizing` is set to `border-box`, however, it instead determines the height of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"fit-content\",\n \"lg\": \"max-content\",\n \"xl\": \"min-content\"\n}\n```\n\n- auto\n- fit-content\n- max-content\n- min-content\n- stretch",
|
|
2204
2253
|
"values": [
|
|
2205
2254
|
{
|
|
2206
2255
|
"name": "auto"
|
|
@@ -2221,7 +2270,7 @@
|
|
|
2221
2270
|
},
|
|
2222
2271
|
{
|
|
2223
2272
|
"name": "max-width",
|
|
2224
|
-
"description": "The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\
|
|
2273
|
+
"description": "The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"fit-content\",\n \"md\": \"intrinsic\",\n \"lg\": \"max-content\",\n \"xl\": \"min-content\"\n}\n```\n\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- none\n- stretch",
|
|
2225
2274
|
"values": [
|
|
2226
2275
|
{
|
|
2227
2276
|
"name": "fit-content"
|
|
@@ -2245,7 +2294,7 @@
|
|
|
2245
2294
|
},
|
|
2246
2295
|
{
|
|
2247
2296
|
"name": "max-height",
|
|
2248
|
-
"description": "The **`max-height`** CSS property sets the maximum height of an element. It prevents the used value of the `height` property from becoming larger than the value specified for `max-height`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\
|
|
2297
|
+
"description": "The **`max-height`** CSS property sets the maximum height of an element. It prevents the used value of the `height` property from becoming larger than the value specified for `max-height`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"fit-content\",\n \"md\": \"intrinsic\",\n \"lg\": \"max-content\",\n \"xl\": \"min-content\"\n}\n```\n\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- none\n- stretch",
|
|
2249
2298
|
"values": [
|
|
2250
2299
|
{
|
|
2251
2300
|
"name": "fit-content"
|
|
@@ -2269,7 +2318,7 @@
|
|
|
2269
2318
|
},
|
|
2270
2319
|
{
|
|
2271
2320
|
"name": "min-width",
|
|
2272
|
-
"description": "The **`min-width`** CSS property sets the minimum width of an element. It prevents the used value of the `width` property from becoming smaller than the value specified for `min-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\
|
|
2321
|
+
"description": "The **`min-width`** CSS property sets the minimum width of an element. It prevents the used value of the `width` property from becoming smaller than the value specified for `min-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"fit-content\",\n \"lg\": \"intrinsic\",\n \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- min-intrinsic\n- stretch",
|
|
2273
2322
|
"values": [
|
|
2274
2323
|
{
|
|
2275
2324
|
"name": "auto"
|
|
@@ -2296,7 +2345,7 @@
|
|
|
2296
2345
|
},
|
|
2297
2346
|
{
|
|
2298
2347
|
"name": "min-height",
|
|
2299
|
-
"description": "The **`min-height`** CSS property sets the minimum height of an element. It prevents the used value of the `height` property from becoming smaller than the value specified for `min-height`. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\
|
|
2348
|
+
"description": "The **`min-height`** CSS property sets the minimum height of an element. It prevents the used value of the `height` property from becoming smaller than the value specified for `min-height`. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"fit-content\",\n \"lg\": \"intrinsic\",\n \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- stretch",
|
|
2300
2349
|
"values": [
|
|
2301
2350
|
{
|
|
2302
2351
|
"name": "auto"
|
|
@@ -2460,6 +2509,93 @@
|
|
|
2460
2509
|
}
|
|
2461
2510
|
]
|
|
2462
2511
|
},
|
|
2512
|
+
{
|
|
2513
|
+
"name": "rarui-chip",
|
|
2514
|
+
"description": "## Rarui Chip\n---\nChip component helps people enter information, make selections, filter content or trigger actions.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/input/button) for more details.",
|
|
2515
|
+
"attributes": [
|
|
2516
|
+
{
|
|
2517
|
+
"name": "closeable",
|
|
2518
|
+
"default": false,
|
|
2519
|
+
"description": "Displays a delete icon and adds user interaction.",
|
|
2520
|
+
"type": "boolean"
|
|
2521
|
+
},
|
|
2522
|
+
{
|
|
2523
|
+
"name": "padding",
|
|
2524
|
+
"description": "The padding properties are used to generate space around an chip's content area.\n\nThis property supports responsive values. You can pass a single value like `\"$medium\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$medium\",\n \"md\": \"$small\",\n \"lg\": \"$medium\",\n \"xl\": \"$small\"\n}\n```\n\n- $medium\n- $small",
|
|
2525
|
+
"values": [
|
|
2526
|
+
{
|
|
2527
|
+
"name": "$medium"
|
|
2528
|
+
},
|
|
2529
|
+
{
|
|
2530
|
+
"name": "$small"
|
|
2531
|
+
}
|
|
2532
|
+
]
|
|
2533
|
+
},
|
|
2534
|
+
{
|
|
2535
|
+
"name": "text-transform",
|
|
2536
|
+
"description": "The **`text-transform`** CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"capitalize\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"capitalize\",\n \"md\": \"full-size-kana\",\n \"lg\": \"full-width\",\n \"xl\": \"lowercase\"\n}\n```\n\n- capitalize\n- full-size-kana\n- full-width\n- lowercase\n- none\n- uppercase",
|
|
2537
|
+
"values": [
|
|
2538
|
+
{
|
|
2539
|
+
"name": "capitalize"
|
|
2540
|
+
},
|
|
2541
|
+
{
|
|
2542
|
+
"name": "full-size-kana"
|
|
2543
|
+
},
|
|
2544
|
+
{
|
|
2545
|
+
"name": "full-width"
|
|
2546
|
+
},
|
|
2547
|
+
{
|
|
2548
|
+
"name": "lowercase"
|
|
2549
|
+
},
|
|
2550
|
+
{
|
|
2551
|
+
"name": "none"
|
|
2552
|
+
},
|
|
2553
|
+
{
|
|
2554
|
+
"name": "uppercase"
|
|
2555
|
+
}
|
|
2556
|
+
]
|
|
2557
|
+
},
|
|
2558
|
+
{
|
|
2559
|
+
"name": "pill",
|
|
2560
|
+
"default": false,
|
|
2561
|
+
"description": "Specifies whether the chip will be displayed in the pill shape",
|
|
2562
|
+
"type": "boolean"
|
|
2563
|
+
},
|
|
2564
|
+
{
|
|
2565
|
+
"name": "selected",
|
|
2566
|
+
"default": false,
|
|
2567
|
+
"description": "Specifies whether the chip is selected",
|
|
2568
|
+
"type": "boolean"
|
|
2569
|
+
},
|
|
2570
|
+
{
|
|
2571
|
+
"name": "size",
|
|
2572
|
+
"default": "medium",
|
|
2573
|
+
"description": "Specifies the size of the chip\n\n- medium\n- small",
|
|
2574
|
+
"type": "string",
|
|
2575
|
+
"values": [
|
|
2576
|
+
{
|
|
2577
|
+
"name": "medium",
|
|
2578
|
+
"description": "(default)"
|
|
2579
|
+
},
|
|
2580
|
+
{
|
|
2581
|
+
"name": "small"
|
|
2582
|
+
}
|
|
2583
|
+
]
|
|
2584
|
+
},
|
|
2585
|
+
{
|
|
2586
|
+
"name": "text-overflow",
|
|
2587
|
+
"default": false,
|
|
2588
|
+
"description": "Specifies whether to handle text overflow within the chip.\nWhen true, overflowing text is typically truncated with an ellipsis.",
|
|
2589
|
+
"type": "boolean"
|
|
2590
|
+
},
|
|
2591
|
+
{
|
|
2592
|
+
"name": "disabled",
|
|
2593
|
+
"default": false,
|
|
2594
|
+
"description": "Disables the chip, disallowing user interaction.",
|
|
2595
|
+
"type": "boolean"
|
|
2596
|
+
}
|
|
2597
|
+
]
|
|
2598
|
+
},
|
|
2463
2599
|
{
|
|
2464
2600
|
"name": "rarui-icon-button",
|
|
2465
2601
|
"description": "## Rarui Icon Button\n---\nButton allows the user to perform actions, such as sending a file, advancing a form, sharing a document, or making a comment.\n\nSee [a complete document](https://rarui.rarolabs.com.br/docs/components/input/button) for more details.",
|
|
@@ -2624,7 +2760,7 @@
|
|
|
2624
2760
|
"attributes": [
|
|
2625
2761
|
{
|
|
2626
2762
|
"name": "background-color",
|
|
2627
|
-
"description": "The backgroundColor property sets the background color of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$background\"`.\n\
|
|
2763
|
+
"description": "The backgroundColor property sets the background color of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$background\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$background\",\n \"md\": \"$brand\",\n \"lg\": \"$brand-hover\",\n \"xl\": \"$brand-press\"\n}\n```\n\n- $background\n- $brand\n- $brand-hover\n- $brand-press\n- $brand-subdued\n- $disabled\n- $error\n- $error-hover\n- $error-press\n- $error-subdued\n- $hover\n- $info\n- $info-hover\n- $info-press\n- $info-subdued\n- $invert\n- $invert-disabled\n- $invert-hover\n- $invert-press\n- $invert-secondary\n- $overlay\n- $press\n- $primary\n- $secondary\n- $success\n- $success-hover\n- $success-press\n- $success-subdued\n- $transparent\n- $warning\n- $warning-hover\n- $warning-press\n- $warning-subdued",
|
|
2628
2764
|
"values": [
|
|
2629
2765
|
{
|
|
2630
2766
|
"name": "$background"
|
|
@@ -2729,7 +2865,7 @@
|
|
|
2729
2865
|
},
|
|
2730
2866
|
{
|
|
2731
2867
|
"name": "fill",
|
|
2732
|
-
"description": "The fill color property is used to set the color of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$background\"`.\n\
|
|
2868
|
+
"description": "The fill color property is used to set the color of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$background\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$background\",\n \"md\": \"$brand\",\n \"lg\": \"$brand-hover\",\n \"xl\": \"$brand-press\"\n}\n```\n\n- $background\n- $brand\n- $brand-hover\n- $brand-press\n- $brand-subdued\n- $currentColor\n- $disabled\n- $error\n- $error-hover\n- $error-press\n- $error-subdued\n- $hover\n- $info\n- $info-hover\n- $info-press\n- $info-subdued\n- $invert\n- $invert-disabled\n- $invert-hover\n- $invert-press\n- $invert-secondary\n- $overlay\n- $press\n- $primary\n- $secondary\n- $success\n- $success-hover\n- $success-press\n- $success-subdued\n- $transparent\n- $warning\n- $warning-hover\n- $warning-press\n- $warning-subdued",
|
|
2733
2869
|
"values": [
|
|
2734
2870
|
{
|
|
2735
2871
|
"name": "$background"
|
|
@@ -2837,7 +2973,7 @@
|
|
|
2837
2973
|
},
|
|
2838
2974
|
{
|
|
2839
2975
|
"name": "border-color",
|
|
2840
|
-
"description": "The borderColor property sets the color of the box's four borders.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\
|
|
2976
|
+
"description": "The borderColor property sets the color of the box's four borders.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$brand\",\n \"md\": \"$brand-alt\",\n \"lg\": \"$disabled\",\n \"xl\": \"$divider\"\n}\n```\n\n- $brand\n- $brand-alt\n- $disabled\n- $divider\n- $error\n- $info\n- $invert\n- $invert-disabled\n- $primary\n- $secondary\n- $subdued\n- $success\n- $transparent\n- $warning",
|
|
2841
2977
|
"values": [
|
|
2842
2978
|
{
|
|
2843
2979
|
"name": "$brand"
|
|
@@ -2885,7 +3021,7 @@
|
|
|
2885
3021
|
},
|
|
2886
3022
|
{
|
|
2887
3023
|
"name": "color",
|
|
2888
|
-
"description": "The color property is used to set the color of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\
|
|
3024
|
+
"description": "The color property is used to set the color of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$brand\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$brand\",\n \"md\": \"$brand-alt\",\n \"lg\": \"$currentColor\",\n \"xl\": \"$disabled\"\n}\n```\n\n- $brand\n- $brand-alt\n- $currentColor\n- $disabled\n- $error\n- $info\n- $invert\n- $invert-disabled\n- $invert-secondary\n- $on-brand\n- $on-error\n- $on-info\n- $on-success\n- $on-warning\n- $primary\n- $secondary\n- $success\n- $warning\n- $warning-alt",
|
|
2889
3025
|
"values": [
|
|
2890
3026
|
{
|
|
2891
3027
|
"name": "$brand"
|
|
@@ -2948,7 +3084,7 @@
|
|
|
2948
3084
|
},
|
|
2949
3085
|
{
|
|
2950
3086
|
"name": "border-radius",
|
|
2951
|
-
"description": "The borderRadius property rounds the corners of an box's outer border edge.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
3087
|
+
"description": "The borderRadius property rounds the corners of an box's outer border edge.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$button\",\n \"xl\": \"$input\"\n}\n```\n\n- $2xl\n- $2xs\n- $button\n- $input\n- $lg\n- $md\n- $none\n- $pill\n- $sm\n- $xl\n- $xs",
|
|
2952
3088
|
"values": [
|
|
2953
3089
|
{
|
|
2954
3090
|
"name": "$2xl"
|
|
@@ -2987,7 +3123,7 @@
|
|
|
2987
3123
|
},
|
|
2988
3124
|
{
|
|
2989
3125
|
"name": "border-top-left-radius",
|
|
2990
|
-
"description": "The borderTopLeftRadius property rounds the corners of an box's outer border edge.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
3126
|
+
"description": "The borderTopLeftRadius property rounds the corners of an box's outer border edge.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$button\",\n \"xl\": \"$input\"\n}\n```\n\n- $2xl\n- $2xs\n- $button\n- $input\n- $lg\n- $md\n- $none\n- $pill\n- $sm\n- $xl\n- $xs",
|
|
2991
3127
|
"values": [
|
|
2992
3128
|
{
|
|
2993
3129
|
"name": "$2xl"
|
|
@@ -3026,7 +3162,7 @@
|
|
|
3026
3162
|
},
|
|
3027
3163
|
{
|
|
3028
3164
|
"name": "border-top-right-radius",
|
|
3029
|
-
"description": "The borderTopRightRadius property rounds the corners of an box's outer border edge.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
3165
|
+
"description": "The borderTopRightRadius property rounds the corners of an box's outer border edge.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$button\",\n \"xl\": \"$input\"\n}\n```\n\n- $2xl\n- $2xs\n- $button\n- $input\n- $lg\n- $md\n- $none\n- $pill\n- $sm\n- $xl\n- $xs",
|
|
3030
3166
|
"values": [
|
|
3031
3167
|
{
|
|
3032
3168
|
"name": "$2xl"
|
|
@@ -3065,7 +3201,7 @@
|
|
|
3065
3201
|
},
|
|
3066
3202
|
{
|
|
3067
3203
|
"name": "border-bottom-left-radius",
|
|
3068
|
-
"description": "The borderBottomLeftRadius property rounds the corners of an box's outer border edge.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
3204
|
+
"description": "The borderBottomLeftRadius property rounds the corners of an box's outer border edge.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$button\",\n \"xl\": \"$input\"\n}\n```\n\n- $2xl\n- $2xs\n- $button\n- $input\n- $lg\n- $md\n- $none\n- $pill\n- $sm\n- $xl\n- $xs",
|
|
3069
3205
|
"values": [
|
|
3070
3206
|
{
|
|
3071
3207
|
"name": "$2xl"
|
|
@@ -3104,7 +3240,7 @@
|
|
|
3104
3240
|
},
|
|
3105
3241
|
{
|
|
3106
3242
|
"name": "border-bottom-right-radius",
|
|
3107
|
-
"description": "The borderBottomRightRadius property rounds the corners of an box's outer border edge.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
3243
|
+
"description": "The borderBottomRightRadius property rounds the corners of an box's outer border edge.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$button\",\n \"xl\": \"$input\"\n}\n```\n\n- $2xl\n- $2xs\n- $button\n- $input\n- $lg\n- $md\n- $none\n- $pill\n- $sm\n- $xl\n- $xs",
|
|
3108
3244
|
"values": [
|
|
3109
3245
|
{
|
|
3110
3246
|
"name": "$2xl"
|
|
@@ -3143,7 +3279,7 @@
|
|
|
3143
3279
|
},
|
|
3144
3280
|
{
|
|
3145
3281
|
"name": "border-width",
|
|
3146
|
-
"description": "The borderWidth property sets the width of an box's border.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\
|
|
3282
|
+
"description": "The borderWidth property sets the width of an box's border.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$1\",\n \"md\": \"$2\",\n \"lg\": \"$3\",\n \"xl\": \"$4\"\n}\n```\n\n- $1\n- $2\n- $3\n- $4\n- $5\n- $none",
|
|
3147
3283
|
"values": [
|
|
3148
3284
|
{
|
|
3149
3285
|
"name": "$1"
|
|
@@ -3167,7 +3303,7 @@
|
|
|
3167
3303
|
},
|
|
3168
3304
|
{
|
|
3169
3305
|
"name": "border-top-width",
|
|
3170
|
-
"description": "The borderTopWidth property defines the width of the border at the top of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\
|
|
3306
|
+
"description": "The borderTopWidth property defines the width of the border at the top of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$1\",\n \"md\": \"$2\",\n \"lg\": \"$3\",\n \"xl\": \"$4\"\n}\n```\n\n- $1\n- $2\n- $3\n- $4\n- $5\n- $none",
|
|
3171
3307
|
"values": [
|
|
3172
3308
|
{
|
|
3173
3309
|
"name": "$1"
|
|
@@ -3191,7 +3327,7 @@
|
|
|
3191
3327
|
},
|
|
3192
3328
|
{
|
|
3193
3329
|
"name": "border-bottom-width",
|
|
3194
|
-
"description": "The borderBottomWidth property defines the width of the border at the bottom of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\
|
|
3330
|
+
"description": "The borderBottomWidth property defines the width of the border at the bottom of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$1\",\n \"md\": \"$2\",\n \"lg\": \"$3\",\n \"xl\": \"$4\"\n}\n```\n\n- $1\n- $2\n- $3\n- $4\n- $5\n- $none",
|
|
3195
3331
|
"values": [
|
|
3196
3332
|
{
|
|
3197
3333
|
"name": "$1"
|
|
@@ -3215,7 +3351,7 @@
|
|
|
3215
3351
|
},
|
|
3216
3352
|
{
|
|
3217
3353
|
"name": "border-left-width",
|
|
3218
|
-
"description": "The borderLeftWidth property defines the width of the border at the left of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\
|
|
3354
|
+
"description": "The borderLeftWidth property defines the width of the border at the left of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$1\",\n \"md\": \"$2\",\n \"lg\": \"$3\",\n \"xl\": \"$4\"\n}\n```\n\n- $1\n- $2\n- $3\n- $4\n- $5\n- $none",
|
|
3219
3355
|
"values": [
|
|
3220
3356
|
{
|
|
3221
3357
|
"name": "$1"
|
|
@@ -3239,7 +3375,7 @@
|
|
|
3239
3375
|
},
|
|
3240
3376
|
{
|
|
3241
3377
|
"name": "border-right-width",
|
|
3242
|
-
"description": "The borderRightWidth property defines the width of the border at the right of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\
|
|
3378
|
+
"description": "The borderRightWidth property defines the width of the border at the right of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$1\",\n \"md\": \"$2\",\n \"lg\": \"$3\",\n \"xl\": \"$4\"\n}\n```\n\n- $1\n- $2\n- $3\n- $4\n- $5\n- $none",
|
|
3243
3379
|
"values": [
|
|
3244
3380
|
{
|
|
3245
3381
|
"name": "$1"
|
|
@@ -3263,7 +3399,7 @@
|
|
|
3263
3399
|
},
|
|
3264
3400
|
{
|
|
3265
3401
|
"name": "box-shadow",
|
|
3266
|
-
"description": "The boxShadow property adds shadow effects around an box's frame.\n\nThis property supports responsive values. You can pass a single value like `\"$bottom-1\"`.\n\
|
|
3402
|
+
"description": "The boxShadow property adds shadow effects around an box's frame.\n\nThis property supports responsive values. You can pass a single value like `\"$bottom-1\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$bottom-1\",\n \"md\": \"$bottom-2\",\n \"lg\": \"$bottom-3\",\n \"xl\": \"$bottom-4\"\n}\n```\n\n- $bottom-1\n- $bottom-2\n- $bottom-3\n- $bottom-4\n- $bottom-5\n- $none\n- $top-1\n- $top-2\n- $top-3\n- $top-4\n- $top-5",
|
|
3267
3403
|
"values": [
|
|
3268
3404
|
{
|
|
3269
3405
|
"name": "$bottom-1"
|
|
@@ -3302,7 +3438,7 @@
|
|
|
3302
3438
|
},
|
|
3303
3439
|
{
|
|
3304
3440
|
"name": "padding",
|
|
3305
|
-
"description": "The padding properties are used to generate space around an box's content area.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
3441
|
+
"description": "The padding properties are used to generate space around an box's content area.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
3306
3442
|
"values": [
|
|
3307
3443
|
{
|
|
3308
3444
|
"name": "$2xl"
|
|
@@ -3356,7 +3492,7 @@
|
|
|
3356
3492
|
},
|
|
3357
3493
|
{
|
|
3358
3494
|
"name": "padding-top",
|
|
3359
|
-
"description": "The paddingTop property sets the height of the padding area on the top of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
3495
|
+
"description": "The paddingTop property sets the height of the padding area on the top of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
3360
3496
|
"values": [
|
|
3361
3497
|
{
|
|
3362
3498
|
"name": "$2xl"
|
|
@@ -3410,7 +3546,7 @@
|
|
|
3410
3546
|
},
|
|
3411
3547
|
{
|
|
3412
3548
|
"name": "padding-bottom",
|
|
3413
|
-
"description": "The paddingBottom property sets the height of the padding area on the bottom of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
3549
|
+
"description": "The paddingBottom property sets the height of the padding area on the bottom of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
3414
3550
|
"values": [
|
|
3415
3551
|
{
|
|
3416
3552
|
"name": "$2xl"
|
|
@@ -3464,7 +3600,7 @@
|
|
|
3464
3600
|
},
|
|
3465
3601
|
{
|
|
3466
3602
|
"name": "padding-left",
|
|
3467
|
-
"description": "The paddingLeft property sets the width of the padding area to the left of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
3603
|
+
"description": "The paddingLeft property sets the width of the padding area to the left of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
3468
3604
|
"values": [
|
|
3469
3605
|
{
|
|
3470
3606
|
"name": "$2xl"
|
|
@@ -3518,7 +3654,7 @@
|
|
|
3518
3654
|
},
|
|
3519
3655
|
{
|
|
3520
3656
|
"name": "padding-right",
|
|
3521
|
-
"description": "The paddingLeft property sets the width of the padding area to the right of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
3657
|
+
"description": "The paddingLeft property sets the width of the padding area to the right of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
3522
3658
|
"values": [
|
|
3523
3659
|
{
|
|
3524
3660
|
"name": "$2xl"
|
|
@@ -3572,7 +3708,7 @@
|
|
|
3572
3708
|
},
|
|
3573
3709
|
{
|
|
3574
3710
|
"name": "margin",
|
|
3575
|
-
"description": "The margin shorthand property sets the margin area on all four sides of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
3711
|
+
"description": "The margin shorthand property sets the margin area on all four sides of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
3576
3712
|
"values": [
|
|
3577
3713
|
{
|
|
3578
3714
|
"name": "$2xl"
|
|
@@ -3629,7 +3765,7 @@
|
|
|
3629
3765
|
},
|
|
3630
3766
|
{
|
|
3631
3767
|
"name": "margin-top",
|
|
3632
|
-
"description": "The marginTop property sets the margin area on the top of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
3768
|
+
"description": "The marginTop property sets the margin area on the top of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
3633
3769
|
"values": [
|
|
3634
3770
|
{
|
|
3635
3771
|
"name": "$2xl"
|
|
@@ -3686,7 +3822,7 @@
|
|
|
3686
3822
|
},
|
|
3687
3823
|
{
|
|
3688
3824
|
"name": "margin-bottom",
|
|
3689
|
-
"description": "The marginBottom property sets the margin area on the bottom of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
3825
|
+
"description": "The marginBottom property sets the margin area on the bottom of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
3690
3826
|
"values": [
|
|
3691
3827
|
{
|
|
3692
3828
|
"name": "$2xl"
|
|
@@ -3743,7 +3879,7 @@
|
|
|
3743
3879
|
},
|
|
3744
3880
|
{
|
|
3745
3881
|
"name": "margin-left",
|
|
3746
|
-
"description": "The marginLeft property sets the margin area on the left side of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
3882
|
+
"description": "The marginLeft property sets the margin area on the left side of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
3747
3883
|
"values": [
|
|
3748
3884
|
{
|
|
3749
3885
|
"name": "$2xl"
|
|
@@ -3800,7 +3936,7 @@
|
|
|
3800
3936
|
},
|
|
3801
3937
|
{
|
|
3802
3938
|
"name": "margin-right",
|
|
3803
|
-
"description": "The marginRight property sets the margin area on the right side of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
3939
|
+
"description": "The marginRight property sets the margin area on the right side of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
3804
3940
|
"values": [
|
|
3805
3941
|
{
|
|
3806
3942
|
"name": "$2xl"
|
|
@@ -3857,7 +3993,7 @@
|
|
|
3857
3993
|
},
|
|
3858
3994
|
{
|
|
3859
3995
|
"name": "gap",
|
|
3860
|
-
"description": "The gap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
3996
|
+
"description": "The gap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
3861
3997
|
"values": [
|
|
3862
3998
|
{
|
|
3863
3999
|
"name": "$2xl"
|
|
@@ -3911,7 +4047,7 @@
|
|
|
3911
4047
|
},
|
|
3912
4048
|
{
|
|
3913
4049
|
"name": "grid-gap",
|
|
3914
|
-
"description": "The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
4050
|
+
"description": "The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
3915
4051
|
"values": [
|
|
3916
4052
|
{
|
|
3917
4053
|
"name": "$2xl"
|
|
@@ -3965,7 +4101,7 @@
|
|
|
3965
4101
|
},
|
|
3966
4102
|
{
|
|
3967
4103
|
"name": "z-index",
|
|
3968
|
-
"description": "The zIndex property specifies the stack order of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$100\"`.\n\
|
|
4104
|
+
"description": "The zIndex property specifies the stack order of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$100\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$100\",\n \"md\": \"$200\",\n \"lg\": \"$300\",\n \"xl\": \"$400\"\n}\n```\n\n- $100\n- $200\n- $300\n- $400\n- $500\n- $600\n- $700\n- $800\n- $900",
|
|
3969
4105
|
"values": [
|
|
3970
4106
|
{
|
|
3971
4107
|
"name": "$100"
|
|
@@ -3999,7 +4135,7 @@
|
|
|
3999
4135
|
{
|
|
4000
4136
|
"name": "line-height",
|
|
4001
4137
|
"default": "base",
|
|
4002
|
-
"description": "The lineHeight property specifies the line height of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$body-l\"`.\n\
|
|
4138
|
+
"description": "The lineHeight property specifies the line height of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$body-l\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$body-l\",\n \"md\": \"$body-m\",\n \"lg\": \"$body-s\",\n \"xl\": \"$body-xl\"\n}\n```\n\n- $body-l\n- $body-m\n- $body-s\n- $body-xl\n- $body-xs\n- $body-xxs\n- $button-l\n- $button-m\n- $button-s\n- $heading-hero\n- $heading-l\n- $heading-m\n- $heading-s\n- $heading-xl\n- $heading-xs\n- $label-l\n- $label-m\n- $label-s",
|
|
4003
4139
|
"values": [
|
|
4004
4140
|
{
|
|
4005
4141
|
"name": "$body-l"
|
|
@@ -4059,7 +4195,7 @@
|
|
|
4059
4195
|
},
|
|
4060
4196
|
{
|
|
4061
4197
|
"name": "font-weight",
|
|
4062
|
-
"description": "The fontWeight property sets how thick or thin characters in box should be displayed.\n\nThis property supports responsive values. You can pass a single value like `\"$bold\"`.\n\
|
|
4198
|
+
"description": "The fontWeight property sets how thick or thin characters in box should be displayed.\n\nThis property supports responsive values. You can pass a single value like `\"$bold\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$bold\",\n \"md\": \"$medium\",\n \"lg\": \"$regular\",\n \"xl\": \"$semiBold\"\n}\n```\n\n- $bold\n- $medium\n- $regular\n- $semiBold",
|
|
4063
4199
|
"values": [
|
|
4064
4200
|
{
|
|
4065
4201
|
"name": "$bold"
|
|
@@ -4077,7 +4213,7 @@
|
|
|
4077
4213
|
},
|
|
4078
4214
|
{
|
|
4079
4215
|
"name": "font-size",
|
|
4080
|
-
"description": "The fontSize property sets the size of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$body-l\"`.\n\
|
|
4216
|
+
"description": "The fontSize property sets the size of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$body-l\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$body-l\",\n \"md\": \"$body-m\",\n \"lg\": \"$body-s\",\n \"xl\": \"$body-xl\"\n}\n```\n\n- $body-l\n- $body-m\n- $body-s\n- $body-xl\n- $body-xs\n- $body-xxs\n- $button-l\n- $button-m\n- $button-s\n- $heading-hero\n- $heading-l\n- $heading-m\n- $heading-s\n- $heading-xl\n- $heading-xs\n- $label-l\n- $label-m\n- $label-s",
|
|
4081
4217
|
"values": [
|
|
4082
4218
|
{
|
|
4083
4219
|
"name": "$body-l"
|
|
@@ -4137,7 +4273,7 @@
|
|
|
4137
4273
|
},
|
|
4138
4274
|
{
|
|
4139
4275
|
"name": "font-family",
|
|
4140
|
-
"description": "The fontFamily property sets the font family of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$body\"`.\n\
|
|
4276
|
+
"description": "The fontFamily property sets the font family of the box.\n\nThis property supports responsive values. You can pass a single value like `\"$body\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$body\",\n \"md\": \"$button\",\n \"lg\": \"$heading\",\n \"xl\": \"$body\"\n}\n```\n\n- $body\n- $button\n- $heading",
|
|
4141
4277
|
"values": [
|
|
4142
4278
|
{
|
|
4143
4279
|
"name": "$body"
|
|
@@ -4152,7 +4288,7 @@
|
|
|
4152
4288
|
},
|
|
4153
4289
|
{
|
|
4154
4290
|
"name": "width",
|
|
4155
|
-
"description": "The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\
|
|
4291
|
+
"description": "The **`width`** CSS property sets an element's width. By default, it sets the width of the content area, but if `box-sizing` is set to `border-box`, it sets the width of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"fit-content\",\n \"lg\": \"intrinsic\",\n \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- min-intrinsic\n- stretch",
|
|
4156
4292
|
"values": [
|
|
4157
4293
|
{
|
|
4158
4294
|
"name": "auto"
|
|
@@ -4179,7 +4315,7 @@
|
|
|
4179
4315
|
},
|
|
4180
4316
|
{
|
|
4181
4317
|
"name": "height",
|
|
4182
|
-
"description": "The **`height`** CSS property specifies the height of an element. By default, the property defines the height of the content area. If `box-sizing` is set to `border-box`, however, it instead determines the height of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\
|
|
4318
|
+
"description": "The **`height`** CSS property specifies the height of an element. By default, the property defines the height of the content area. If `box-sizing` is set to `border-box`, however, it instead determines the height of the border area. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"fit-content\",\n \"lg\": \"max-content\",\n \"xl\": \"min-content\"\n}\n```\n\n- auto\n- fit-content\n- max-content\n- min-content\n- stretch",
|
|
4183
4319
|
"values": [
|
|
4184
4320
|
{
|
|
4185
4321
|
"name": "auto"
|
|
@@ -4200,7 +4336,7 @@
|
|
|
4200
4336
|
},
|
|
4201
4337
|
{
|
|
4202
4338
|
"name": "max-width",
|
|
4203
|
-
"description": "The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\
|
|
4339
|
+
"description": "The **`max-width`** CSS property sets the maximum width of an element. It prevents the used value of the `width` property from becoming larger than the value specified by `max-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"fit-content\",\n \"md\": \"intrinsic\",\n \"lg\": \"max-content\",\n \"xl\": \"min-content\"\n}\n```\n\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- none\n- stretch",
|
|
4204
4340
|
"values": [
|
|
4205
4341
|
{
|
|
4206
4342
|
"name": "fit-content"
|
|
@@ -4224,7 +4360,7 @@
|
|
|
4224
4360
|
},
|
|
4225
4361
|
{
|
|
4226
4362
|
"name": "max-height",
|
|
4227
|
-
"description": "The **`max-height`** CSS property sets the maximum height of an element. It prevents the used value of the `height` property from becoming larger than the value specified for `max-height`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\
|
|
4363
|
+
"description": "The **`max-height`** CSS property sets the maximum height of an element. It prevents the used value of the `height` property from becoming larger than the value specified for `max-height`. It is also possible to pass a specific value.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"fit-content\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"fit-content\",\n \"md\": \"intrinsic\",\n \"lg\": \"max-content\",\n \"xl\": \"min-content\"\n}\n```\n\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- none\n- stretch",
|
|
4228
4364
|
"values": [
|
|
4229
4365
|
{
|
|
4230
4366
|
"name": "fit-content"
|
|
@@ -4248,7 +4384,7 @@
|
|
|
4248
4384
|
},
|
|
4249
4385
|
{
|
|
4250
4386
|
"name": "min-width",
|
|
4251
|
-
"description": "The **`min-width`** CSS property sets the minimum width of an element. It prevents the used value of the `width` property from becoming smaller than the value specified for `min-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\
|
|
4387
|
+
"description": "The **`min-width`** CSS property sets the minimum width of an element. It prevents the used value of the `width` property from becoming smaller than the value specified for `min-width`. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"fit-content\",\n \"lg\": \"intrinsic\",\n \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- min-intrinsic\n- stretch",
|
|
4252
4388
|
"values": [
|
|
4253
4389
|
{
|
|
4254
4390
|
"name": "auto"
|
|
@@ -4275,7 +4411,7 @@
|
|
|
4275
4411
|
},
|
|
4276
4412
|
{
|
|
4277
4413
|
"name": "min-height",
|
|
4278
|
-
"description": "The **`min-height`** CSS property sets the minimum height of an element. It prevents the used value of the `height` property from becoming smaller than the value specified for `min-height`. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\
|
|
4414
|
+
"description": "The **`min-height`** CSS property sets the minimum height of an element. It prevents the used value of the `height` property from becoming smaller than the value specified for `min-height`. It is also possible to pass a specific value.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"fit-content\",\n \"lg\": \"intrinsic\",\n \"xl\": \"max-content\"\n}\n```\n\n- auto\n- fit-content\n- intrinsic\n- max-content\n- min-content\n- stretch",
|
|
4279
4415
|
"values": [
|
|
4280
4416
|
{
|
|
4281
4417
|
"name": "auto"
|
|
@@ -4319,7 +4455,7 @@
|
|
|
4319
4455
|
},
|
|
4320
4456
|
{
|
|
4321
4457
|
"name": "flex",
|
|
4322
|
-
"description": "The **`flex`** CSS shorthand property sets how a flex _item_ will grow or shrink to fit the space available in its flex container.\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\
|
|
4458
|
+
"description": "The **`flex`** CSS shorthand property sets how a flex _item_ will grow or shrink to fit the space available in its flex container.\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"content\",\n \"lg\": \"fit-content\",\n \"xl\": \"max-content\"\n}\n```\n\n- auto\n- content\n- fit-content\n- max-content\n- min-content\n- none\n- stretch",
|
|
4323
4459
|
"values": [
|
|
4324
4460
|
{
|
|
4325
4461
|
"name": "auto"
|
|
@@ -4351,7 +4487,7 @@
|
|
|
4351
4487
|
},
|
|
4352
4488
|
{
|
|
4353
4489
|
"name": "grid-template-columns",
|
|
4354
|
-
"description": "The **`grid-template-columns`** CSS property defines the line names and track sizing functions of the grid columns.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\
|
|
4490
|
+
"description": "The **`grid-template-columns`** CSS property defines the line names and track sizing functions of the grid columns.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"max-content\",\n \"lg\": \"min-content\",\n \"xl\": \"none\"\n}\n```\n\n- auto\n- max-content\n- min-content\n- none\n- subgrid",
|
|
4355
4491
|
"values": [
|
|
4356
4492
|
{
|
|
4357
4493
|
"name": "auto"
|
|
@@ -4372,7 +4508,7 @@
|
|
|
4372
4508
|
},
|
|
4373
4509
|
{
|
|
4374
4510
|
"name": "grid-template-rows",
|
|
4375
|
-
"description": "The **`grid-template-rows`** CSS property defines the line names and track sizing functions of the grid rows.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\
|
|
4511
|
+
"description": "The **`grid-template-rows`** CSS property defines the line names and track sizing functions of the grid rows.\n\n\n**Initial value**: `none`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"max-content\",\n \"lg\": \"min-content\",\n \"xl\": \"none\"\n}\n```\n\n- auto\n- max-content\n- min-content\n- none\n- subgrid",
|
|
4376
4512
|
"values": [
|
|
4377
4513
|
{
|
|
4378
4514
|
"name": "auto"
|
|
@@ -4418,7 +4554,7 @@
|
|
|
4418
4554
|
},
|
|
4419
4555
|
{
|
|
4420
4556
|
"name": "transition-property",
|
|
4421
|
-
"description": "The **`transition-property`** CSS property sets the CSS properties to which a transition effect should be applied.\n\n\n**Initial value**: all\n\nThis property supports responsive values. You can pass a single value like `\"all\"`.\n\
|
|
4557
|
+
"description": "The **`transition-property`** CSS property sets the CSS properties to which a transition effect should be applied.\n\n\n**Initial value**: all\n\nThis property supports responsive values. You can pass a single value like `\"all\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"all\",\n \"md\": \"none\",\n \"lg\": \"all\",\n \"xl\": \"none\"\n}\n```\n\n- all\n- none",
|
|
4422
4558
|
"values": [
|
|
4423
4559
|
{
|
|
4424
4560
|
"name": "all"
|
|
@@ -4435,7 +4571,7 @@
|
|
|
4435
4571
|
},
|
|
4436
4572
|
{
|
|
4437
4573
|
"name": "background-position",
|
|
4438
|
-
"description": "The **`background-position`** CSS property sets the initial position for each background image. The position is relative to the position layer set by `background-origin`.\n\n\n**Initial value**: `0% 0%`\n\nThis property supports responsive values. You can pass a single value like `\"bottom\"`.\n\
|
|
4574
|
+
"description": "The **`background-position`** CSS property sets the initial position for each background image. The position is relative to the position layer set by `background-origin`.\n\n\n**Initial value**: `0% 0%`\n\nThis property supports responsive values. You can pass a single value like `\"bottom\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"bottom\",\n \"md\": \"center\",\n \"lg\": \"left\",\n \"xl\": \"right\"\n}\n```\n\n- bottom\n- center\n- left\n- right\n- top",
|
|
4439
4575
|
"values": [
|
|
4440
4576
|
{
|
|
4441
4577
|
"name": "bottom"
|
|
@@ -4456,7 +4592,7 @@
|
|
|
4456
4592
|
},
|
|
4457
4593
|
{
|
|
4458
4594
|
"name": "background-position-x",
|
|
4459
|
-
"description": "The **`background-position-x`** CSS property sets the initial horizontal position for each background image. The position is relative to the position layer set by `background-origin`.\n\n\n**Initial value**: `left`\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\
|
|
4595
|
+
"description": "The **`background-position-x`** CSS property sets the initial horizontal position for each background image. The position is relative to the position layer set by `background-origin`.\n\n\n**Initial value**: `left`\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"center\",\n \"md\": \"left\",\n \"lg\": \"right\",\n \"xl\": \"x-end\"\n}\n```\n\n- center\n- left\n- right\n- x-end\n- x-start",
|
|
4460
4596
|
"values": [
|
|
4461
4597
|
{
|
|
4462
4598
|
"name": "center"
|
|
@@ -4477,7 +4613,7 @@
|
|
|
4477
4613
|
},
|
|
4478
4614
|
{
|
|
4479
4615
|
"name": "background-position-y",
|
|
4480
|
-
"description": "The **`background-position-y`** CSS property sets the initial vertical position for each background image. The position is relative to the position layer set by `background-origin`.\n\n\n**Initial value**: `top`\n\nThis property supports responsive values. You can pass a single value like `\"bottom\"`.\n\
|
|
4616
|
+
"description": "The **`background-position-y`** CSS property sets the initial vertical position for each background image. The position is relative to the position layer set by `background-origin`.\n\n\n**Initial value**: `top`\n\nThis property supports responsive values. You can pass a single value like `\"bottom\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"bottom\",\n \"md\": \"center\",\n \"lg\": \"top\",\n \"xl\": \"y-end\"\n}\n```\n\n- bottom\n- center\n- top\n- y-end\n- y-start",
|
|
4481
4617
|
"values": [
|
|
4482
4618
|
{
|
|
4483
4619
|
"name": "bottom"
|
|
@@ -4498,7 +4634,7 @@
|
|
|
4498
4634
|
},
|
|
4499
4635
|
{
|
|
4500
4636
|
"name": "background-blend-mode",
|
|
4501
|
-
"description": "The **`background-blend-mode`** CSS property sets how an element's background images should blend with each other and with the element's background color.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"color\"`.\n\
|
|
4637
|
+
"description": "The **`background-blend-mode`** CSS property sets how an element's background images should blend with each other and with the element's background color.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"color\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"color\",\n \"md\": \"color-burn\",\n \"lg\": \"color-dodge\",\n \"xl\": \"darken\"\n}\n```\n\n- color\n- color-burn\n- color-dodge\n- darken\n- difference\n- exclusion\n- hard-light\n- hue\n- lighten\n- luminosity\n- multiply\n- normal\n- overlay\n- saturation\n- screen\n- soft-light",
|
|
4502
4638
|
"values": [
|
|
4503
4639
|
{
|
|
4504
4640
|
"name": "color"
|
|
@@ -4552,7 +4688,7 @@
|
|
|
4552
4688
|
},
|
|
4553
4689
|
{
|
|
4554
4690
|
"name": "background-repeat",
|
|
4555
|
-
"description": "The **`background-repeat`** CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.\n\n\n**Initial value**: `repeat`\n\nThis property supports responsive values. You can pass a single value like `\"no-repeat\"`.\n\
|
|
4691
|
+
"description": "The **`background-repeat`** CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.\n\n\n**Initial value**: `repeat`\n\nThis property supports responsive values. You can pass a single value like `\"no-repeat\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"no-repeat\",\n \"md\": \"repeat\",\n \"lg\": \"repeat-x\",\n \"xl\": \"repeat-y\"\n}\n```\n\n- no-repeat\n- repeat\n- repeat-x\n- repeat-y\n- round\n- space",
|
|
4556
4692
|
"values": [
|
|
4557
4693
|
{
|
|
4558
4694
|
"name": "no-repeat"
|
|
@@ -4576,7 +4712,7 @@
|
|
|
4576
4712
|
},
|
|
4577
4713
|
{
|
|
4578
4714
|
"name": "background-size",
|
|
4579
|
-
"description": "The **`background-size`** CSS property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.\n\n\n**Initial value**: `auto auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\
|
|
4715
|
+
"description": "The **`background-size`** CSS property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.\n\n\n**Initial value**: `auto auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"contain\",\n \"lg\": \"cover\",\n \"xl\": \"auto\"\n}\n```\n\n- auto\n- contain\n- cover",
|
|
4580
4716
|
"values": [
|
|
4581
4717
|
{
|
|
4582
4718
|
"name": "auto"
|
|
@@ -4591,7 +4727,7 @@
|
|
|
4591
4727
|
},
|
|
4592
4728
|
{
|
|
4593
4729
|
"name": "display",
|
|
4594
|
-
"description": "The **`display`** CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.\n\n\n**Initial value**: `inline`\n\nThis property supports responsive values. You can pass a single value like `\"block\"`.\n\
|
|
4730
|
+
"description": "The **`display`** CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.\n\n\n**Initial value**: `inline`\n\nThis property supports responsive values. You can pass a single value like `\"block\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"block\",\n \"md\": \"contents\",\n \"lg\": \"flex\",\n \"xl\": \"flow\"\n}\n```\n\n- block\n- contents\n- flex\n- flow\n- flow-root\n- grid\n- inline\n- inline-block\n- inline-flex\n- inline-grid\n- inline-list-item\n- inline-table\n- list-item\n- none\n- ruby\n- ruby-base\n- ruby-base-container\n- ruby-text\n- ruby-text-container\n- run-in\n- table\n- table-caption\n- table-cell\n- table-column\n- table-column-group\n- table-footer-group\n- table-header-group\n- table-row\n- table-row-group",
|
|
4595
4731
|
"values": [
|
|
4596
4732
|
{
|
|
4597
4733
|
"name": "block"
|
|
@@ -4684,7 +4820,7 @@
|
|
|
4684
4820
|
},
|
|
4685
4821
|
{
|
|
4686
4822
|
"name": "flex-direction",
|
|
4687
|
-
"description": "The **`flex-direction`** CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).\n\n\n**Initial value**: `row`\n\nThis property supports responsive values. You can pass a single value like `\"column\"`.\n\
|
|
4823
|
+
"description": "The **`flex-direction`** CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).\n\n\n**Initial value**: `row`\n\nThis property supports responsive values. You can pass a single value like `\"column\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"column\",\n \"md\": \"column-reverse\",\n \"lg\": \"row\",\n \"xl\": \"row-reverse\"\n}\n```\n\n- column\n- column-reverse\n- row\n- row-reverse",
|
|
4688
4824
|
"values": [
|
|
4689
4825
|
{
|
|
4690
4826
|
"name": "column"
|
|
@@ -4702,7 +4838,7 @@
|
|
|
4702
4838
|
},
|
|
4703
4839
|
{
|
|
4704
4840
|
"name": "flex-wrap",
|
|
4705
|
-
"description": "The **`flex-wrap`** CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.\n\n\n**Initial value**: `nowrap`\n\nThis property supports responsive values. You can pass a single value like `\"nowrap\"`.\n\
|
|
4841
|
+
"description": "The **`flex-wrap`** CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.\n\n\n**Initial value**: `nowrap`\n\nThis property supports responsive values. You can pass a single value like `\"nowrap\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"nowrap\",\n \"md\": \"wrap\",\n \"lg\": \"wrap-reverse\",\n \"xl\": \"nowrap\"\n}\n```\n\n- nowrap\n- wrap\n- wrap-reverse",
|
|
4706
4842
|
"values": [
|
|
4707
4843
|
{
|
|
4708
4844
|
"name": "nowrap"
|
|
@@ -4717,7 +4853,7 @@
|
|
|
4717
4853
|
},
|
|
4718
4854
|
{
|
|
4719
4855
|
"name": "flex-basis",
|
|
4720
|
-
"description": "The **`flex-basis`** CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with `box-sizing`.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\
|
|
4856
|
+
"description": "The **`flex-basis`** CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with `box-sizing`.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"content\",\n \"lg\": \"fit-content\",\n \"xl\": \"max-content\"\n}\n```\n\n- auto\n- content\n- fit-content\n- max-content\n- min-content\n- stretch",
|
|
4721
4857
|
"values": [
|
|
4722
4858
|
{
|
|
4723
4859
|
"name": "auto"
|
|
@@ -4741,7 +4877,7 @@
|
|
|
4741
4877
|
},
|
|
4742
4878
|
{
|
|
4743
4879
|
"name": "flex-flow",
|
|
4744
|
-
"description": "The **`flex-flow`** CSS shorthand property specifies the direction of a flex container, as well as its wrapping behavior.\n\nThis property supports responsive values. You can pass a single value like `\"column\"`.\n\
|
|
4880
|
+
"description": "The **`flex-flow`** CSS shorthand property specifies the direction of a flex container, as well as its wrapping behavior.\n\nThis property supports responsive values. You can pass a single value like `\"column\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"column\",\n \"md\": \"column-reverse\",\n \"lg\": \"nowrap\",\n \"xl\": \"row\"\n}\n```\n\n- column\n- column-reverse\n- nowrap\n- row\n- row-reverse\n- wrap\n- wrap-reverse",
|
|
4745
4881
|
"values": [
|
|
4746
4882
|
{
|
|
4747
4883
|
"name": "column"
|
|
@@ -4768,7 +4904,7 @@
|
|
|
4768
4904
|
},
|
|
4769
4905
|
{
|
|
4770
4906
|
"name": "justify-content",
|
|
4771
|
-
"description": "The CSS **`justify-content`** property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\
|
|
4907
|
+
"description": "The CSS **`justify-content`** property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"center\",\n \"md\": \"end\",\n \"lg\": \"flex-end\",\n \"xl\": \"flex-start\"\n}\n```\n\n- center\n- end\n- flex-end\n- flex-start\n- left\n- normal\n- right\n- space-around\n- space-between\n- space-evenly\n- start\n- stretch",
|
|
4772
4908
|
"values": [
|
|
4773
4909
|
{
|
|
4774
4910
|
"name": "center"
|
|
@@ -4810,7 +4946,7 @@
|
|
|
4810
4946
|
},
|
|
4811
4947
|
{
|
|
4812
4948
|
"name": "justify-items",
|
|
4813
|
-
"description": "The CSS **`justify-items`** property defines the default `justify-self` for all items of the box, giving them all a default way of justifying each box along the appropriate axis.\n\n\n**Initial value**: `legacy`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\
|
|
4949
|
+
"description": "The CSS **`justify-items`** property defines the default `justify-self` for all items of the box, giving them all a default way of justifying each box along the appropriate axis.\n\n\n**Initial value**: `legacy`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"baseline\",\n \"md\": \"center\",\n \"lg\": \"end\",\n \"xl\": \"flex-end\"\n}\n```\n\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- left\n- legacy\n- normal\n- right\n- self-end\n- self-start\n- start\n- stretch",
|
|
4814
4950
|
"values": [
|
|
4815
4951
|
{
|
|
4816
4952
|
"name": "baseline"
|
|
@@ -4855,7 +4991,7 @@
|
|
|
4855
4991
|
},
|
|
4856
4992
|
{
|
|
4857
4993
|
"name": "align-content",
|
|
4858
|
-
"description": "The CSS **`align-content`** property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\
|
|
4994
|
+
"description": "The CSS **`align-content`** property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"baseline\",\n \"md\": \"center\",\n \"lg\": \"end\",\n \"xl\": \"flex-end\"\n}\n```\n\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- normal\n- space-around\n- space-between\n- space-evenly\n- start\n- stretch",
|
|
4859
4995
|
"values": [
|
|
4860
4996
|
{
|
|
4861
4997
|
"name": "baseline"
|
|
@@ -4894,7 +5030,7 @@
|
|
|
4894
5030
|
},
|
|
4895
5031
|
{
|
|
4896
5032
|
"name": "align-items",
|
|
4897
|
-
"description": "The CSS **`align-items`** property sets the `align-self` value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\
|
|
5033
|
+
"description": "The CSS **`align-items`** property sets the `align-self` value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.\n\n\n**Initial value**: `normal`\n\nThis property supports responsive values. You can pass a single value like `\"baseline\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"baseline\",\n \"md\": \"center\",\n \"lg\": \"end\",\n \"xl\": \"flex-end\"\n}\n```\n\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- normal\n- self-end\n- self-start\n- start\n- stretch",
|
|
4898
5034
|
"values": [
|
|
4899
5035
|
{
|
|
4900
5036
|
"name": "baseline"
|
|
@@ -4930,7 +5066,7 @@
|
|
|
4930
5066
|
},
|
|
4931
5067
|
{
|
|
4932
5068
|
"name": "align-self",
|
|
4933
|
-
"description": "The **`align-self`** CSS property overrides a grid or flex item's `align-items` value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\
|
|
5069
|
+
"description": "The **`align-self`** CSS property overrides a grid or flex item's `align-items` value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"baseline\",\n \"lg\": \"center\",\n \"xl\": \"end\"\n}\n```\n\n- auto\n- baseline\n- center\n- end\n- flex-end\n- flex-start\n- normal\n- self-end\n- self-start\n- start\n- stretch",
|
|
4934
5070
|
"values": [
|
|
4935
5071
|
{
|
|
4936
5072
|
"name": "auto"
|
|
@@ -4969,7 +5105,7 @@
|
|
|
4969
5105
|
},
|
|
4970
5106
|
{
|
|
4971
5107
|
"name": "pointer-events",
|
|
4972
|
-
"description": "The **`pointer-events`** CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"all\"`.\n\
|
|
5108
|
+
"description": "The **`pointer-events`** CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"all\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"all\",\n \"md\": \"auto\",\n \"lg\": \"fill\",\n \"xl\": \"inherit\"\n}\n```\n\n- all\n- auto\n- fill\n- inherit\n- none\n- painted\n- stroke\n- visible\n- visibleFill\n- visiblePainted\n- visibleStroke",
|
|
4973
5109
|
"values": [
|
|
4974
5110
|
{
|
|
4975
5111
|
"name": "all"
|
|
@@ -5008,7 +5144,7 @@
|
|
|
5008
5144
|
},
|
|
5009
5145
|
{
|
|
5010
5146
|
"name": "position",
|
|
5011
|
-
"description": "The **`position`** CSS property sets how an element is positioned in a document. The `top`, `right`, `bottom`, and `left` properties determine the final location of positioned elements.\n\n\n**Initial value**: `static`\n\nThis property supports responsive values. You can pass a single value like `\"absolute\"`.\n\
|
|
5147
|
+
"description": "The **`position`** CSS property sets how an element is positioned in a document. The `top`, `right`, `bottom`, and `left` properties determine the final location of positioned elements.\n\n\n**Initial value**: `static`\n\nThis property supports responsive values. You can pass a single value like `\"absolute\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"absolute\",\n \"md\": \"fixed\",\n \"lg\": \"relative\",\n \"xl\": \"static\"\n}\n```\n\n- absolute\n- fixed\n- relative\n- static\n- sticky",
|
|
5012
5148
|
"values": [
|
|
5013
5149
|
{
|
|
5014
5150
|
"name": "absolute"
|
|
@@ -5029,7 +5165,7 @@
|
|
|
5029
5165
|
},
|
|
5030
5166
|
{
|
|
5031
5167
|
"name": "border-style",
|
|
5032
|
-
"description": "The **`border-style`** shorthand CSS property sets the line style for all four sides of an element's border.\n\nThis property supports responsive values. You can pass a single value like `\"dashed\"`.\n\
|
|
5168
|
+
"description": "The **`border-style`** shorthand CSS property sets the line style for all four sides of an element's border.\n\nThis property supports responsive values. You can pass a single value like `\"dashed\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"dashed\",\n \"md\": \"dotted\",\n \"lg\": \"double\",\n \"xl\": \"groove\"\n}\n```\n\n- dashed\n- dotted\n- double\n- groove\n- hidden\n- inset\n- none\n- outset\n- ridge\n- solid",
|
|
5033
5169
|
"values": [
|
|
5034
5170
|
{
|
|
5035
5171
|
"name": "dashed"
|
|
@@ -5065,7 +5201,7 @@
|
|
|
5065
5201
|
},
|
|
5066
5202
|
{
|
|
5067
5203
|
"name": "box-sizing",
|
|
5068
|
-
"description": "The **`box-sizing`** CSS property sets how the total width and height of an element is calculated.\n\n\n**Initial value**: `content-box`\n\nThis property supports responsive values. You can pass a single value like `\"border-box\"`.\n\
|
|
5204
|
+
"description": "The **`box-sizing`** CSS property sets how the total width and height of an element is calculated.\n\n\n**Initial value**: `content-box`\n\nThis property supports responsive values. You can pass a single value like `\"border-box\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"border-box\",\n \"md\": \"content-box\",\n \"lg\": \"border-box\",\n \"xl\": \"content-box\"\n}\n```\n\n- border-box\n- content-box",
|
|
5069
5205
|
"values": [
|
|
5070
5206
|
{
|
|
5071
5207
|
"name": "border-box"
|
|
@@ -5077,7 +5213,7 @@
|
|
|
5077
5213
|
},
|
|
5078
5214
|
{
|
|
5079
5215
|
"name": "cursor",
|
|
5080
|
-
"description": "The **`cursor`** CSS property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"alias\"`.\n\
|
|
5216
|
+
"description": "The **`cursor`** CSS property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element.\n\n\n**Initial value**: `auto`\n\nThis property supports responsive values. You can pass a single value like `\"alias\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"alias\",\n \"md\": \"all-scroll\",\n \"lg\": \"auto\",\n \"xl\": \"cell\"\n}\n```\n\n- alias\n- all-scroll\n- auto\n- cell\n- col-resize\n- context-menu\n- copy\n- crosshair\n- default\n- e-resize\n- ew-resize\n- grab\n- grabbing\n- help\n- move\n- n-resize\n- ne-resize\n- nesw-resize\n- no-drop\n- none\n- not-allowed\n- ns-resize\n- nw-resize\n- nwse-resize\n- pointer\n- progress\n- row-resize\n- s-resize\n- se-resize\n- sw-resize\n- text\n- vertical-text\n- w-resize\n- wait\n- zoom-in\n- zoom-out",
|
|
5081
5217
|
"values": [
|
|
5082
5218
|
{
|
|
5083
5219
|
"name": "alias"
|
|
@@ -5191,7 +5327,7 @@
|
|
|
5191
5327
|
},
|
|
5192
5328
|
{
|
|
5193
5329
|
"name": "overflow",
|
|
5194
|
-
"description": "The **`overflow`** CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\
|
|
5330
|
+
"description": "The **`overflow`** CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"clip\",\n \"lg\": \"hidden\",\n \"xl\": \"scroll\"\n}\n```\n\n- auto\n- clip\n- hidden\n- scroll\n- visible",
|
|
5195
5331
|
"values": [
|
|
5196
5332
|
{
|
|
5197
5333
|
"name": "auto"
|
|
@@ -5212,7 +5348,7 @@
|
|
|
5212
5348
|
},
|
|
5213
5349
|
{
|
|
5214
5350
|
"name": "overflow-x",
|
|
5215
|
-
"description": "The **`overflow-x`** CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\
|
|
5351
|
+
"description": "The **`overflow-x`** CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"clip\",\n \"lg\": \"hidden\",\n \"xl\": \"scroll\"\n}\n```\n\n- auto\n- clip\n- hidden\n- scroll\n- visible",
|
|
5216
5352
|
"values": [
|
|
5217
5353
|
{
|
|
5218
5354
|
"name": "auto"
|
|
@@ -5233,7 +5369,7 @@
|
|
|
5233
5369
|
},
|
|
5234
5370
|
{
|
|
5235
5371
|
"name": "overflow-y",
|
|
5236
|
-
"description": "The **`overflow-y`** CSS property sets what shows when content overflows a block-level element's top and bottom edges. This may be nothing, a scroll bar, or the overflow content.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\
|
|
5372
|
+
"description": "The **`overflow-y`** CSS property sets what shows when content overflows a block-level element's top and bottom edges. This may be nothing, a scroll bar, or the overflow content.\n\n\n**Initial value**: `visible`\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"clip\",\n \"lg\": \"hidden\",\n \"xl\": \"scroll\"\n}\n```\n\n- auto\n- clip\n- hidden\n- scroll\n- visible",
|
|
5237
5373
|
"values": [
|
|
5238
5374
|
{
|
|
5239
5375
|
"name": "auto"
|
|
@@ -5254,7 +5390,7 @@
|
|
|
5254
5390
|
},
|
|
5255
5391
|
{
|
|
5256
5392
|
"name": "transition-timing-function",
|
|
5257
|
-
"description": "The **`transition-timing-function`** CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect.\n\n\n**Initial value**: `ease`\n\nThis property supports responsive values. You can pass a single value like `\"ease\"`.\n\
|
|
5393
|
+
"description": "The **`transition-timing-function`** CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect.\n\n\n**Initial value**: `ease`\n\nThis property supports responsive values. You can pass a single value like `\"ease\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"ease\",\n \"md\": \"ease-in\",\n \"lg\": \"ease-in-out\",\n \"xl\": \"ease-out\"\n}\n```\n\n- ease\n- ease-in\n- ease-in-out\n- ease-out\n- linear\n- step-end\n- step-start",
|
|
5258
5394
|
"values": [
|
|
5259
5395
|
{
|
|
5260
5396
|
"name": "ease"
|
|
@@ -5281,7 +5417,7 @@
|
|
|
5281
5417
|
},
|
|
5282
5418
|
{
|
|
5283
5419
|
"name": "text-decoration",
|
|
5284
|
-
"description": "The **`text-decoration`** shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for `text-decoration-line`, `text-decoration-color`, `text-decoration-style`, and the newer `text-decoration-thickness` property.\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\
|
|
5420
|
+
"description": "The **`text-decoration`** shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for `text-decoration-line`, `text-decoration-color`, `text-decoration-style`, and the newer `text-decoration-thickness` property.\n\nThis property supports responsive values. You can pass a single value like `\"auto\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"auto\",\n \"md\": \"blink\",\n \"lg\": \"dashed\",\n \"xl\": \"dotted\"\n}\n```\n\n- auto\n- blink\n- dashed\n- dotted\n- double\n- from-font\n- grammar-error\n- line-through\n- none\n- overline\n- solid\n- spelling-error\n- underline\n- wavy",
|
|
5285
5421
|
"values": [
|
|
5286
5422
|
{
|
|
5287
5423
|
"name": "auto"
|
|
@@ -5329,7 +5465,7 @@
|
|
|
5329
5465
|
},
|
|
5330
5466
|
{
|
|
5331
5467
|
"name": "text-align",
|
|
5332
|
-
"description": "The **`text-align`** CSS property sets the horizontal alignment of a block element or table-cell box. This means it works like `vertical-align` but in the horizontal direction.\n\n\n**Initial value**: `start`, or a nameless value that acts as `left` if _direction_ is `ltr`, `right` if _direction_ is `rtl` if `start` is not supported by the browser.\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\
|
|
5468
|
+
"description": "The **`text-align`** CSS property sets the horizontal alignment of a block element or table-cell box. This means it works like `vertical-align` but in the horizontal direction.\n\n\n**Initial value**: `start`, or a nameless value that acts as `left` if _direction_ is `ltr`, `right` if _direction_ is `rtl` if `start` is not supported by the browser.\n\nThis property supports responsive values. You can pass a single value like `\"center\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"center\",\n \"md\": \"end\",\n \"lg\": \"justify\",\n \"xl\": \"left\"\n}\n```\n\n- center\n- end\n- justify\n- left\n- match-parent\n- right\n- start",
|
|
5333
5469
|
"values": [
|
|
5334
5470
|
{
|
|
5335
5471
|
"name": "center"
|
|
@@ -5361,7 +5497,7 @@
|
|
|
5361
5497
|
},
|
|
5362
5498
|
{
|
|
5363
5499
|
"name": "border-width-x",
|
|
5364
|
-
"description": "The borderWidthX shorthand property defines the width of the element's border on the left and right.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\
|
|
5500
|
+
"description": "The borderWidthX shorthand property defines the width of the element's border on the left and right.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$1\",\n \"md\": \"$2\",\n \"lg\": \"$3\",\n \"xl\": \"$4\"\n}\n```\n\n- $1\n- $2\n- $3\n- $4\n- $5\n- $none",
|
|
5365
5501
|
"values": [
|
|
5366
5502
|
{
|
|
5367
5503
|
"name": "$1"
|
|
@@ -5385,7 +5521,7 @@
|
|
|
5385
5521
|
},
|
|
5386
5522
|
{
|
|
5387
5523
|
"name": "border-width-y",
|
|
5388
|
-
"description": "The borderWidthY shorthand property defines the width of the element's border on the top and bottom.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\
|
|
5524
|
+
"description": "The borderWidthY shorthand property defines the width of the element's border on the top and bottom.\n\nThis property supports responsive values. You can pass a single value like `\"$1\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$1\",\n \"md\": \"$2\",\n \"lg\": \"$3\",\n \"xl\": \"$4\"\n}\n```\n\n- $1\n- $2\n- $3\n- $4\n- $5\n- $none",
|
|
5389
5525
|
"values": [
|
|
5390
5526
|
{
|
|
5391
5527
|
"name": "$1"
|
|
@@ -5409,7 +5545,7 @@
|
|
|
5409
5545
|
},
|
|
5410
5546
|
{
|
|
5411
5547
|
"name": "padding-x",
|
|
5412
|
-
"description": "The paddingX shorthand property defines the width of the left and right padding area of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
5548
|
+
"description": "The paddingX shorthand property defines the width of the left and right padding area of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
5413
5549
|
"values": [
|
|
5414
5550
|
{
|
|
5415
5551
|
"name": "$2xl"
|
|
@@ -5463,7 +5599,7 @@
|
|
|
5463
5599
|
},
|
|
5464
5600
|
{
|
|
5465
5601
|
"name": "padding-y",
|
|
5466
|
-
"description": "The paddingY pt shorthand property sets the height of the padding area at the top and bottom of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
5602
|
+
"description": "The paddingY pt shorthand property sets the height of the padding area at the top and bottom of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
5467
5603
|
"values": [
|
|
5468
5604
|
{
|
|
5469
5605
|
"name": "$2xl"
|
|
@@ -5517,7 +5653,7 @@
|
|
|
5517
5653
|
},
|
|
5518
5654
|
{
|
|
5519
5655
|
"name": "p",
|
|
5520
|
-
"description": "The p shorthand property sets the margin area on all four sides of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
5656
|
+
"description": "The p shorthand property sets the margin area on all four sides of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
5521
5657
|
"values": [
|
|
5522
5658
|
{
|
|
5523
5659
|
"name": "$2xl"
|
|
@@ -5571,7 +5707,7 @@
|
|
|
5571
5707
|
},
|
|
5572
5708
|
{
|
|
5573
5709
|
"name": "pl",
|
|
5574
|
-
"description": "The pl shorthand property sets the width of the padding area to the left of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
5710
|
+
"description": "The pl shorthand property sets the width of the padding area to the left of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
5575
5711
|
"values": [
|
|
5576
5712
|
{
|
|
5577
5713
|
"name": "$2xl"
|
|
@@ -5625,7 +5761,7 @@
|
|
|
5625
5761
|
},
|
|
5626
5762
|
{
|
|
5627
5763
|
"name": "pr",
|
|
5628
|
-
"description": "The pl shorthand property sets the width of the padding area to the right of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
5764
|
+
"description": "The pl shorthand property sets the width of the padding area to the right of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
5629
5765
|
"values": [
|
|
5630
5766
|
{
|
|
5631
5767
|
"name": "$2xl"
|
|
@@ -5679,7 +5815,7 @@
|
|
|
5679
5815
|
},
|
|
5680
5816
|
{
|
|
5681
5817
|
"name": "pt",
|
|
5682
|
-
"description": "The pt shorthand property sets the height of the padding area on the top of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
5818
|
+
"description": "The pt shorthand property sets the height of the padding area on the top of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
5683
5819
|
"values": [
|
|
5684
5820
|
{
|
|
5685
5821
|
"name": "$2xl"
|
|
@@ -5733,7 +5869,7 @@
|
|
|
5733
5869
|
},
|
|
5734
5870
|
{
|
|
5735
5871
|
"name": "pb",
|
|
5736
|
-
"description": "The pb shorthand property sets the height of the padding area on the botton of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
5872
|
+
"description": "The pb shorthand property sets the height of the padding area on the botton of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
5737
5873
|
"values": [
|
|
5738
5874
|
{
|
|
5739
5875
|
"name": "$2xl"
|
|
@@ -5787,7 +5923,7 @@
|
|
|
5787
5923
|
},
|
|
5788
5924
|
{
|
|
5789
5925
|
"name": "px",
|
|
5790
|
-
"description": "The px shorthand property defines the width of the left and right padding area of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
5926
|
+
"description": "The px shorthand property defines the width of the left and right padding area of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
5791
5927
|
"values": [
|
|
5792
5928
|
{
|
|
5793
5929
|
"name": "$2xl"
|
|
@@ -5841,7 +5977,7 @@
|
|
|
5841
5977
|
},
|
|
5842
5978
|
{
|
|
5843
5979
|
"name": "py",
|
|
5844
|
-
"description": "The py pt shorthand property sets the height of the padding area at the top and bottom of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
5980
|
+
"description": "The py pt shorthand property sets the height of the padding area at the top and bottom of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
5845
5981
|
"values": [
|
|
5846
5982
|
{
|
|
5847
5983
|
"name": "$2xl"
|
|
@@ -5895,7 +6031,7 @@
|
|
|
5895
6031
|
},
|
|
5896
6032
|
{
|
|
5897
6033
|
"name": "margin-x",
|
|
5898
|
-
"description": "The marginX property defines the margin area on the left and right side of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
6034
|
+
"description": "The marginX property defines the margin area on the left and right side of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
5899
6035
|
"values": [
|
|
5900
6036
|
{
|
|
5901
6037
|
"name": "$2xl"
|
|
@@ -5952,7 +6088,7 @@
|
|
|
5952
6088
|
},
|
|
5953
6089
|
{
|
|
5954
6090
|
"name": "margin-y",
|
|
5955
|
-
"description": "The marginY property defines the margin area on the top and bottom of a box\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
6091
|
+
"description": "The marginY property defines the margin area on the top and bottom of a box\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
5956
6092
|
"values": [
|
|
5957
6093
|
{
|
|
5958
6094
|
"name": "$2xl"
|
|
@@ -6009,7 +6145,7 @@
|
|
|
6009
6145
|
},
|
|
6010
6146
|
{
|
|
6011
6147
|
"name": "m",
|
|
6012
|
-
"description": "The m shorthand property sets the margin area on all four sides of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
6148
|
+
"description": "The m shorthand property sets the margin area on all four sides of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
6013
6149
|
"values": [
|
|
6014
6150
|
{
|
|
6015
6151
|
"name": "$2xl"
|
|
@@ -6066,7 +6202,7 @@
|
|
|
6066
6202
|
},
|
|
6067
6203
|
{
|
|
6068
6204
|
"name": "mr",
|
|
6069
|
-
"description": "The mr property sets the margin area on the right side of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
6205
|
+
"description": "The mr property sets the margin area on the right side of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
6070
6206
|
"values": [
|
|
6071
6207
|
{
|
|
6072
6208
|
"name": "$2xl"
|
|
@@ -6123,7 +6259,7 @@
|
|
|
6123
6259
|
},
|
|
6124
6260
|
{
|
|
6125
6261
|
"name": "ml",
|
|
6126
|
-
"description": "The ml property sets the margin area on the left side of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
6262
|
+
"description": "The ml property sets the margin area on the left side of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
6127
6263
|
"values": [
|
|
6128
6264
|
{
|
|
6129
6265
|
"name": "$2xl"
|
|
@@ -6180,7 +6316,7 @@
|
|
|
6180
6316
|
},
|
|
6181
6317
|
{
|
|
6182
6318
|
"name": "mt",
|
|
6183
|
-
"description": "The mt property sets the margin area on the top of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
6319
|
+
"description": "The mt property sets the margin area on the top of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
6184
6320
|
"values": [
|
|
6185
6321
|
{
|
|
6186
6322
|
"name": "$2xl"
|
|
@@ -6237,7 +6373,7 @@
|
|
|
6237
6373
|
},
|
|
6238
6374
|
{
|
|
6239
6375
|
"name": "mb",
|
|
6240
|
-
"description": "The marginBottom property sets the margin area on the bottom of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
6376
|
+
"description": "The marginBottom property sets the margin area on the bottom of an box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
6241
6377
|
"values": [
|
|
6242
6378
|
{
|
|
6243
6379
|
"name": "$2xl"
|
|
@@ -6294,7 +6430,7 @@
|
|
|
6294
6430
|
},
|
|
6295
6431
|
{
|
|
6296
6432
|
"name": "mx",
|
|
6297
|
-
"description": "The mx property defines the margin area on the left and right side of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
6433
|
+
"description": "The mx property defines the margin area on the left and right side of a box.\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
6298
6434
|
"values": [
|
|
6299
6435
|
{
|
|
6300
6436
|
"name": "$2xl"
|
|
@@ -6351,7 +6487,7 @@
|
|
|
6351
6487
|
},
|
|
6352
6488
|
{
|
|
6353
6489
|
"name": "my",
|
|
6354
|
-
"description": "The my property defines the margin area on the top and bottom of a box\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\
|
|
6490
|
+
"description": "The my property defines the margin area on the top and bottom of a box\n\nThis property supports responsive values. You can pass a single value like `\"$2xl\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$2xl\",\n \"md\": \"$2xs\",\n \"lg\": \"$3xl\",\n \"xl\": \"$3xs\"\n}\n```\n\n- $2xl\n- $2xs\n- $3xl\n- $3xs\n- $4xl\n- $4xs\n- $5xl\n- $6xl\n- $7xl\n- $8xl\n- $auto\n- $lg\n- $md\n- $none\n- $s\n- $xl\n- $xs",
|
|
6355
6491
|
"values": [
|
|
6356
6492
|
{
|
|
6357
6493
|
"name": "$2xl"
|
|
@@ -6474,7 +6610,7 @@
|
|
|
6474
6610
|
{
|
|
6475
6611
|
"name": "background-color",
|
|
6476
6612
|
"default": "$primary",
|
|
6477
|
-
"description": "Specifies the background color of the card.\nThis prop accepts one of the following values: \"$transparent\", \"$background\", \"$primary\", or \"$secondary\"\n\nThis property supports responsive values. You can pass a single value like `\"$background\"`.\n\
|
|
6613
|
+
"description": "Specifies the background color of the card.\nThis prop accepts one of the following values: \"$transparent\", \"$background\", \"$primary\", or \"$secondary\"\n\nThis property supports responsive values. You can pass a single value like `\"$background\"`.\n\n Or an object like:\n \n ```\n{\n \"xs\": \"$background\",\n \"md\": \"$primary\",\n \"lg\": \"$secondary\",\n \"xl\": \"$transparent\"\n}\n```\n\n- $background\n- $primary\n- $secondary\n- $transparent",
|
|
6478
6614
|
"values": [
|
|
6479
6615
|
{
|
|
6480
6616
|
"name": "$background"
|