draft-components 1.4.1 → 1.4.2
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/css/draft-components-utilities.css +247 -179
- package/package.json +1 -1
|
@@ -1,149 +1,151 @@
|
|
|
1
|
-
|
|
1
|
+
.bg-primary {
|
|
2
|
+
background: var(--dc-primary-bg) !important;
|
|
3
|
+
}
|
|
2
4
|
|
|
3
|
-
.
|
|
4
|
-
|
|
5
|
+
.bg-transparent-1 {
|
|
6
|
+
background: var(--dc-bg-transparent-1) !important;
|
|
5
7
|
}
|
|
6
8
|
|
|
7
|
-
.
|
|
8
|
-
|
|
9
|
+
.bg-transparent-2 {
|
|
10
|
+
background: var(--dc-bg-transparent-2) !important;
|
|
9
11
|
}
|
|
10
12
|
|
|
11
|
-
.
|
|
12
|
-
|
|
13
|
+
.bg-transparent-3 {
|
|
14
|
+
background: var(--dc-bg-transparent-3) !important;
|
|
13
15
|
}
|
|
14
16
|
|
|
15
|
-
.
|
|
16
|
-
|
|
17
|
+
.border-0 {
|
|
18
|
+
border: 0 !important;
|
|
17
19
|
}
|
|
18
20
|
|
|
19
|
-
.
|
|
20
|
-
|
|
21
|
+
.border-transparent-1 {
|
|
22
|
+
border: 1px solid var(--dc-border-color-transparent-1) !important;
|
|
21
23
|
}
|
|
22
24
|
|
|
23
|
-
.
|
|
24
|
-
|
|
25
|
+
.border-transparent-2 {
|
|
26
|
+
border: 1px solid var(--dc-border-color-transparent-2) !important;
|
|
25
27
|
}
|
|
26
28
|
|
|
27
|
-
.
|
|
28
|
-
|
|
29
|
+
.border-transparent-3 {
|
|
30
|
+
border: 1px solid var(--dc-border-color-transparent-3) !important;
|
|
29
31
|
}
|
|
30
32
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
+
/* Border top */
|
|
34
|
+
|
|
35
|
+
.border-top-transparent-1 {
|
|
36
|
+
border-top: 1px solid var(--dc-border-color-transparent-1) !important;
|
|
33
37
|
}
|
|
34
38
|
|
|
35
|
-
.
|
|
36
|
-
|
|
39
|
+
.border-top-transparent-2 {
|
|
40
|
+
border-top: 1px solid var(--dc-border-color-transparent-2) !important;
|
|
37
41
|
}
|
|
38
42
|
|
|
39
|
-
.
|
|
40
|
-
|
|
43
|
+
.border-top-transparent-3 {
|
|
44
|
+
border-top: 1px solid var(--dc-border-color-transparent-3) !important;
|
|
41
45
|
}
|
|
42
46
|
|
|
43
|
-
/*
|
|
47
|
+
/* Border right */
|
|
44
48
|
|
|
45
|
-
.
|
|
46
|
-
|
|
49
|
+
.border-right-transparent-1 {
|
|
50
|
+
border-right: 1px solid var(--dc-border-color-transparent-1) !important;
|
|
47
51
|
}
|
|
48
52
|
|
|
49
|
-
.
|
|
50
|
-
|
|
53
|
+
.border-right-transparent-2 {
|
|
54
|
+
border-right: 1px solid var(--dc-border-color-transparent-2) !important;
|
|
51
55
|
}
|
|
52
56
|
|
|
53
|
-
.
|
|
54
|
-
|
|
57
|
+
.border-right-transparent-3 {
|
|
58
|
+
border-right: 1px solid var(--dc-border-color-transparent-3) !important;
|
|
55
59
|
}
|
|
56
60
|
|
|
57
|
-
|
|
58
|
-
|
|
61
|
+
/* Border bottom */
|
|
62
|
+
|
|
63
|
+
.border-bottom-transparent-1 {
|
|
64
|
+
border-bottom: 1px solid var(--dc-border-color-transparent-1) !important;
|
|
59
65
|
}
|
|
60
66
|
|
|
61
|
-
.
|
|
62
|
-
|
|
67
|
+
.border-bottom-transparent-2 {
|
|
68
|
+
border-bottom: 1px solid var(--dc-border-color-transparent-2) !important;
|
|
63
69
|
}
|
|
64
70
|
|
|
65
|
-
.
|
|
66
|
-
|
|
71
|
+
.border-bottom-transparent-3 {
|
|
72
|
+
border-bottom: 1px solid var(--dc-border-color-transparent-3) !important;
|
|
67
73
|
}
|
|
68
74
|
|
|
69
|
-
/*
|
|
75
|
+
/* Border left */
|
|
70
76
|
|
|
71
|
-
.
|
|
72
|
-
|
|
77
|
+
.border-left-transparent-1 {
|
|
78
|
+
border-left: 1px solid var(--dc-border-color-transparent-1) !important;
|
|
73
79
|
}
|
|
74
80
|
|
|
75
|
-
.
|
|
76
|
-
|
|
81
|
+
.border-left-transparent-2 {
|
|
82
|
+
border-left: 1px solid var(--dc-border-color-transparent-2) !important;
|
|
77
83
|
}
|
|
78
84
|
|
|
79
|
-
.
|
|
80
|
-
|
|
85
|
+
.border-left-transparent-3 {
|
|
86
|
+
border-left: 1px solid var(--dc-border-color-transparent-3) !important;
|
|
81
87
|
}
|
|
82
88
|
|
|
83
|
-
/*
|
|
89
|
+
/* Rounded corners */
|
|
84
90
|
|
|
85
|
-
.
|
|
86
|
-
|
|
91
|
+
.rounded-none {
|
|
92
|
+
border-radius: 0 !important;
|
|
87
93
|
}
|
|
88
94
|
|
|
89
|
-
.
|
|
90
|
-
|
|
95
|
+
.rounded-sm {
|
|
96
|
+
border-radius: 2px !important;
|
|
91
97
|
}
|
|
92
98
|
|
|
93
|
-
.
|
|
94
|
-
|
|
99
|
+
.rounded {
|
|
100
|
+
border-radius: 4px !important;
|
|
95
101
|
}
|
|
96
102
|
|
|
97
|
-
.
|
|
98
|
-
|
|
103
|
+
.rounded-md {
|
|
104
|
+
border-radius: 6px !important;
|
|
99
105
|
}
|
|
100
106
|
|
|
101
|
-
.
|
|
102
|
-
|
|
107
|
+
.rounded-lg {
|
|
108
|
+
border-radius: 8px !important;
|
|
103
109
|
}
|
|
104
110
|
|
|
105
|
-
.
|
|
106
|
-
|
|
111
|
+
.rounded-xl {
|
|
112
|
+
border-radius: 12px !important;
|
|
107
113
|
}
|
|
108
114
|
|
|
109
|
-
.
|
|
110
|
-
|
|
115
|
+
.rounded-circle {
|
|
116
|
+
border-radius: 50% !important;
|
|
111
117
|
}
|
|
112
118
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
.text-truncate {
|
|
116
|
-
overflow: hidden;
|
|
117
|
-
white-space: nowrap;
|
|
118
|
-
text-overflow: ellipsis;
|
|
119
|
+
.color-inherit {
|
|
120
|
+
color: inherit !important;
|
|
119
121
|
}
|
|
120
122
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
123
|
+
.color-primary {
|
|
124
|
+
color: var(--dc-primary-text-color) !important;
|
|
125
|
+
}
|
|
124
126
|
|
|
125
|
-
.
|
|
126
|
-
|
|
127
|
+
.color-secondary {
|
|
128
|
+
color: var(--dc-secondary-text-color) !important;
|
|
127
129
|
}
|
|
128
130
|
|
|
129
|
-
.
|
|
130
|
-
|
|
131
|
+
.color-tertiary {
|
|
132
|
+
color: var(--dc-tertiary-text-color) !important;
|
|
131
133
|
}
|
|
132
134
|
|
|
133
|
-
.
|
|
134
|
-
|
|
135
|
+
.color-info {
|
|
136
|
+
color: var(--dc-info-text-color) !important;
|
|
135
137
|
}
|
|
136
138
|
|
|
137
|
-
.
|
|
138
|
-
|
|
139
|
+
.color-success {
|
|
140
|
+
color: var(--dc-success-text-color) !important;
|
|
139
141
|
}
|
|
140
142
|
|
|
141
|
-
.
|
|
142
|
-
|
|
143
|
+
.color-error {
|
|
144
|
+
color: var(--dc-error-text-color) !important;
|
|
143
145
|
}
|
|
144
146
|
|
|
145
|
-
.
|
|
146
|
-
|
|
147
|
+
.color-warning {
|
|
148
|
+
color: var(--dc-warning-text-color) !important;
|
|
147
149
|
}
|
|
148
150
|
|
|
149
151
|
/* Box sizing */
|
|
@@ -186,33 +188,6 @@
|
|
|
186
188
|
display: none !important;
|
|
187
189
|
}
|
|
188
190
|
|
|
189
|
-
.visually-hidden,
|
|
190
|
-
.visually-hidden-focusable:not(:focus, :focus-within) {
|
|
191
|
-
position: absolute !important;
|
|
192
|
-
overflow: hidden !important;
|
|
193
|
-
width: 1px !important;
|
|
194
|
-
height: 1px !important;
|
|
195
|
-
margin: -1px !important;
|
|
196
|
-
padding: 0 !important;
|
|
197
|
-
white-space: nowrap !important;
|
|
198
|
-
border: 0 !important;
|
|
199
|
-
clip: rect(0, 0, 0, 0) !important;
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
.h-stack {
|
|
203
|
-
display: flex;
|
|
204
|
-
flex-direction: row;
|
|
205
|
-
align-items: center;
|
|
206
|
-
align-self: stretch;
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
.v-stack {
|
|
210
|
-
display: flex;
|
|
211
|
-
flex: 1 1 auto;
|
|
212
|
-
flex-direction: column;
|
|
213
|
-
align-self: stretch;
|
|
214
|
-
}
|
|
215
|
-
|
|
216
191
|
.flex-fill {
|
|
217
192
|
flex: 1 1 auto !important;
|
|
218
193
|
}
|
|
@@ -470,6 +445,20 @@
|
|
|
470
445
|
column-gap: 32px !important;
|
|
471
446
|
}
|
|
472
447
|
|
|
448
|
+
.h-stack {
|
|
449
|
+
display: flex;
|
|
450
|
+
flex-direction: row;
|
|
451
|
+
align-items: center;
|
|
452
|
+
align-self: stretch;
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
.v-stack {
|
|
456
|
+
display: flex;
|
|
457
|
+
flex: 1 1 auto;
|
|
458
|
+
flex-direction: column;
|
|
459
|
+
align-self: stretch;
|
|
460
|
+
}
|
|
461
|
+
|
|
473
462
|
/* Margin */
|
|
474
463
|
|
|
475
464
|
.m-0 {
|
|
@@ -1428,152 +1417,231 @@
|
|
|
1428
1417
|
padding-left: 96px !important;
|
|
1429
1418
|
}
|
|
1430
1419
|
|
|
1431
|
-
|
|
1432
|
-
|
|
1420
|
+
/* Width */
|
|
1421
|
+
|
|
1422
|
+
.w-25 {
|
|
1423
|
+
width: 25% !important;
|
|
1433
1424
|
}
|
|
1434
1425
|
|
|
1435
|
-
.
|
|
1436
|
-
|
|
1426
|
+
.w-50 {
|
|
1427
|
+
width: 50% !important;
|
|
1437
1428
|
}
|
|
1438
1429
|
|
|
1439
|
-
.
|
|
1440
|
-
|
|
1430
|
+
.w-75 {
|
|
1431
|
+
width: 75% !important;
|
|
1441
1432
|
}
|
|
1442
1433
|
|
|
1443
|
-
.
|
|
1444
|
-
|
|
1434
|
+
.w-100 {
|
|
1435
|
+
width: 100% !important;
|
|
1445
1436
|
}
|
|
1446
1437
|
|
|
1447
|
-
.
|
|
1448
|
-
|
|
1438
|
+
.w-auto {
|
|
1439
|
+
width: auto !important;
|
|
1449
1440
|
}
|
|
1450
1441
|
|
|
1451
|
-
.
|
|
1452
|
-
|
|
1442
|
+
.mw-100 {
|
|
1443
|
+
max-width: 100% !important;
|
|
1453
1444
|
}
|
|
1454
1445
|
|
|
1455
|
-
.
|
|
1456
|
-
|
|
1446
|
+
.vw-100 {
|
|
1447
|
+
width: 100vw !important;
|
|
1457
1448
|
}
|
|
1458
1449
|
|
|
1459
|
-
.
|
|
1460
|
-
|
|
1450
|
+
.min-vw-100 {
|
|
1451
|
+
min-width: 100vw !important;
|
|
1461
1452
|
}
|
|
1462
1453
|
|
|
1463
|
-
|
|
1464
|
-
|
|
1454
|
+
/* Height */
|
|
1455
|
+
|
|
1456
|
+
.h-25 {
|
|
1457
|
+
height: 25% !important;
|
|
1465
1458
|
}
|
|
1466
1459
|
|
|
1467
|
-
.
|
|
1468
|
-
|
|
1460
|
+
.h-50 {
|
|
1461
|
+
height: 50% !important;
|
|
1469
1462
|
}
|
|
1470
1463
|
|
|
1471
|
-
.
|
|
1472
|
-
|
|
1464
|
+
.h-75 {
|
|
1465
|
+
height: 75% !important;
|
|
1473
1466
|
}
|
|
1474
1467
|
|
|
1475
|
-
.
|
|
1476
|
-
|
|
1468
|
+
.h-100 {
|
|
1469
|
+
height: 100% !important;
|
|
1477
1470
|
}
|
|
1478
1471
|
|
|
1479
|
-
|
|
1472
|
+
.h-auto {
|
|
1473
|
+
height: auto !important;
|
|
1474
|
+
}
|
|
1480
1475
|
|
|
1481
|
-
.
|
|
1482
|
-
|
|
1476
|
+
.mh-100 {
|
|
1477
|
+
max-height: 100% !important;
|
|
1483
1478
|
}
|
|
1484
1479
|
|
|
1485
|
-
.
|
|
1486
|
-
|
|
1480
|
+
.vh-100 {
|
|
1481
|
+
height: 100vh !important;
|
|
1487
1482
|
}
|
|
1488
1483
|
|
|
1489
|
-
.
|
|
1490
|
-
|
|
1484
|
+
.min-vh-100 {
|
|
1485
|
+
min-height: 100vh !important;
|
|
1491
1486
|
}
|
|
1492
1487
|
|
|
1493
|
-
/*
|
|
1488
|
+
/* Font */
|
|
1494
1489
|
|
|
1495
|
-
.
|
|
1496
|
-
|
|
1490
|
+
.text-2xs {
|
|
1491
|
+
font: var(--dc-text-2xs);
|
|
1497
1492
|
}
|
|
1498
1493
|
|
|
1499
|
-
.
|
|
1500
|
-
|
|
1494
|
+
.text-xs {
|
|
1495
|
+
font: var(--dc-text-xs);
|
|
1501
1496
|
}
|
|
1502
1497
|
|
|
1503
|
-
.
|
|
1504
|
-
|
|
1498
|
+
.text-sm {
|
|
1499
|
+
font: var(--dc-text-sm);
|
|
1505
1500
|
}
|
|
1506
1501
|
|
|
1507
|
-
|
|
1502
|
+
.text-md {
|
|
1503
|
+
font: var(--dc-text-md);
|
|
1504
|
+
}
|
|
1508
1505
|
|
|
1509
|
-
.
|
|
1510
|
-
|
|
1506
|
+
.text-lg {
|
|
1507
|
+
font: var(--dc-text-lg);
|
|
1511
1508
|
}
|
|
1512
1509
|
|
|
1513
|
-
.
|
|
1514
|
-
|
|
1510
|
+
.text-xl {
|
|
1511
|
+
font: var(--dc-text-xl);
|
|
1515
1512
|
}
|
|
1516
1513
|
|
|
1517
|
-
.
|
|
1518
|
-
|
|
1514
|
+
.text-2xl {
|
|
1515
|
+
font: var(--dc-text-2xl);
|
|
1519
1516
|
}
|
|
1520
1517
|
|
|
1521
|
-
|
|
1518
|
+
.text-3xl {
|
|
1519
|
+
font: var(--dc-text-3xl);
|
|
1520
|
+
}
|
|
1522
1521
|
|
|
1523
|
-
.
|
|
1524
|
-
|
|
1522
|
+
.text-4xl {
|
|
1523
|
+
font: var(--dc-text-4xl);
|
|
1525
1524
|
}
|
|
1526
1525
|
|
|
1527
|
-
.
|
|
1528
|
-
|
|
1526
|
+
.text-5xl {
|
|
1527
|
+
font: var(--dc-text-5xl);
|
|
1529
1528
|
}
|
|
1530
1529
|
|
|
1531
|
-
|
|
1532
|
-
|
|
1530
|
+
/* Text style */
|
|
1531
|
+
|
|
1532
|
+
.text-no-decoration {
|
|
1533
|
+
text-decoration: none !important;
|
|
1533
1534
|
}
|
|
1534
1535
|
|
|
1535
|
-
|
|
1536
|
+
.text-no-style {
|
|
1537
|
+
font-style: normal !important;
|
|
1538
|
+
}
|
|
1536
1539
|
|
|
1537
|
-
.
|
|
1538
|
-
|
|
1540
|
+
.text-italic {
|
|
1541
|
+
font-style: italic !important;
|
|
1539
1542
|
}
|
|
1540
1543
|
|
|
1541
|
-
.
|
|
1542
|
-
|
|
1544
|
+
.text-underline {
|
|
1545
|
+
text-decoration: underline !important;
|
|
1543
1546
|
}
|
|
1544
1547
|
|
|
1545
|
-
.
|
|
1546
|
-
|
|
1548
|
+
.text-uppercase {
|
|
1549
|
+
text-transform: uppercase !important;
|
|
1547
1550
|
}
|
|
1548
1551
|
|
|
1549
|
-
.
|
|
1550
|
-
|
|
1552
|
+
.text-capitalize {
|
|
1553
|
+
text-transform: capitalize !important;
|
|
1551
1554
|
}
|
|
1552
1555
|
|
|
1553
|
-
|
|
1554
|
-
|
|
1556
|
+
/* Text alignment */
|
|
1557
|
+
|
|
1558
|
+
.text-right {
|
|
1559
|
+
text-align: right !important;
|
|
1555
1560
|
}
|
|
1556
1561
|
|
|
1557
|
-
.
|
|
1558
|
-
|
|
1562
|
+
.text-center {
|
|
1563
|
+
text-align: center !important;
|
|
1559
1564
|
}
|
|
1560
1565
|
|
|
1561
|
-
.
|
|
1562
|
-
|
|
1566
|
+
.text-left {
|
|
1567
|
+
text-align: left !important;
|
|
1563
1568
|
}
|
|
1564
1569
|
|
|
1565
|
-
|
|
1566
|
-
|
|
1570
|
+
/* Font weight */
|
|
1571
|
+
|
|
1572
|
+
.text-light {
|
|
1573
|
+
font-weight: 300 !important;
|
|
1567
1574
|
}
|
|
1568
1575
|
|
|
1569
|
-
.
|
|
1570
|
-
|
|
1576
|
+
.text-normal {
|
|
1577
|
+
font-weight: 400 !important;
|
|
1571
1578
|
}
|
|
1572
1579
|
|
|
1573
|
-
.
|
|
1574
|
-
|
|
1580
|
+
.text-medium {
|
|
1581
|
+
font-weight: 500 !important;
|
|
1575
1582
|
}
|
|
1576
1583
|
|
|
1577
|
-
.
|
|
1578
|
-
|
|
1584
|
+
.text-semi-bold {
|
|
1585
|
+
font-weight: 600 !important;
|
|
1586
|
+
}
|
|
1587
|
+
|
|
1588
|
+
.text-bold {
|
|
1589
|
+
font-weight: 700 !important;
|
|
1590
|
+
}
|
|
1591
|
+
|
|
1592
|
+
.text-extra-bold {
|
|
1593
|
+
font-weight: 800 !important;
|
|
1594
|
+
}
|
|
1595
|
+
|
|
1596
|
+
.text-no-wrap {
|
|
1597
|
+
white-space: nowrap;
|
|
1598
|
+
}
|
|
1599
|
+
|
|
1600
|
+
/* Text truncation */
|
|
1601
|
+
|
|
1602
|
+
.text-truncate {
|
|
1603
|
+
overflow: hidden;
|
|
1604
|
+
white-space: nowrap;
|
|
1605
|
+
text-overflow: ellipsis;
|
|
1606
|
+
}
|
|
1607
|
+
|
|
1608
|
+
/* Line height */
|
|
1609
|
+
|
|
1610
|
+
/* https://tailwindcss.com/docs/line-height */
|
|
1611
|
+
|
|
1612
|
+
.leading-none {
|
|
1613
|
+
line-height: 1 !important;
|
|
1614
|
+
}
|
|
1615
|
+
|
|
1616
|
+
.leading-tight {
|
|
1617
|
+
line-height: 1.25 !important;
|
|
1618
|
+
}
|
|
1619
|
+
|
|
1620
|
+
.leading-snug {
|
|
1621
|
+
line-height: 1.375 !important;
|
|
1622
|
+
}
|
|
1623
|
+
|
|
1624
|
+
.leading-normal {
|
|
1625
|
+
line-height: 1.5 !important;
|
|
1626
|
+
}
|
|
1627
|
+
|
|
1628
|
+
.leading-relaxed {
|
|
1629
|
+
line-height: 1.625 !important;
|
|
1630
|
+
}
|
|
1631
|
+
|
|
1632
|
+
.leading-loose {
|
|
1633
|
+
line-height: 2 !important;
|
|
1634
|
+
}
|
|
1635
|
+
|
|
1636
|
+
.visually-hidden,
|
|
1637
|
+
.visually-hidden-focusable:not(:focus, :focus-within) {
|
|
1638
|
+
position: absolute !important;
|
|
1639
|
+
overflow: hidden !important;
|
|
1640
|
+
width: 1px !important;
|
|
1641
|
+
height: 1px !important;
|
|
1642
|
+
margin: -1px !important;
|
|
1643
|
+
padding: 0 !important;
|
|
1644
|
+
white-space: nowrap !important;
|
|
1645
|
+
border: 0 !important;
|
|
1646
|
+
clip: rect(0, 0, 0, 0) !important;
|
|
1579
1647
|
}
|