@henriquepetrelli/hp-design-system 1.1.28 → 1.1.30
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/dist/hp-design-system.es.js +369 -215
- package/dist/hp-design-system.es.js.map +1 -1
- package/dist/hp-design-system.umd.js +372 -217
- package/dist/hp-design-system.umd.js.map +1 -1
- package/dist/style.css +87 -31
- package/package.json +1 -1
package/dist/style.css
CHANGED
|
@@ -1539,13 +1539,13 @@ body {
|
|
|
1539
1539
|
100% {
|
|
1540
1540
|
left: 1px;
|
|
1541
1541
|
}
|
|
1542
|
-
}.input[data-v-
|
|
1542
|
+
}.input[data-v-e05af4c2] {
|
|
1543
1543
|
position: relative;
|
|
1544
1544
|
margin-bottom: 1.5rem;
|
|
1545
1545
|
--icon-padding-left: 0px; /* Fallback */
|
|
1546
1546
|
--icon-padding-right: 0px; /* Fallback */
|
|
1547
1547
|
}
|
|
1548
|
-
.input__fieldset[data-v-
|
|
1548
|
+
.input__fieldset[data-v-e05af4c2] {
|
|
1549
1549
|
display: block;
|
|
1550
1550
|
min-inline-size: min-content;
|
|
1551
1551
|
border-width: 0;
|
|
@@ -1556,12 +1556,12 @@ body {
|
|
|
1556
1556
|
padding: 0;
|
|
1557
1557
|
margin: 0;
|
|
1558
1558
|
}
|
|
1559
|
-
.input__wrapper[data-v-
|
|
1559
|
+
.input__wrapper[data-v-e05af4c2] {
|
|
1560
1560
|
position: relative;
|
|
1561
1561
|
display: flex;
|
|
1562
1562
|
align-items: center;
|
|
1563
1563
|
}
|
|
1564
|
-
.input__field[data-v-
|
|
1564
|
+
.input__field[data-v-e05af4c2] {
|
|
1565
1565
|
width: 100%;
|
|
1566
1566
|
padding: 1rem;
|
|
1567
1567
|
font-size: 16px;
|
|
@@ -1574,25 +1574,25 @@ body {
|
|
|
1574
1574
|
padding-right: calc(1rem + var(--icon-padding-right));
|
|
1575
1575
|
font-family: "Nunito", sans-serif;
|
|
1576
1576
|
}
|
|
1577
|
-
.input__field[data-v-
|
|
1577
|
+
.input__field[data-v-e05af4c2]:focus {
|
|
1578
1578
|
outline: none;
|
|
1579
1579
|
border-color: #333;
|
|
1580
1580
|
}
|
|
1581
|
-
.input__field[data-v-
|
|
1581
|
+
.input__field[data-v-e05af4c2]:focus-visible {
|
|
1582
1582
|
border: 1px solid #333;
|
|
1583
1583
|
outline: none;
|
|
1584
1584
|
}
|
|
1585
|
-
.input__field[data-v-
|
|
1585
|
+
.input__field[data-v-e05af4c2]:disabled {
|
|
1586
1586
|
background-color: #f5f5f5;
|
|
1587
1587
|
cursor: not-allowed;
|
|
1588
1588
|
opacity: 0.7;
|
|
1589
1589
|
}
|
|
1590
|
-
.input__field[readonly][data-v-
|
|
1590
|
+
.input__field[readonly][data-v-e05af4c2] {
|
|
1591
1591
|
background-color: #f9f9f9;
|
|
1592
1592
|
border-color: #eee;
|
|
1593
1593
|
cursor: default;
|
|
1594
1594
|
}
|
|
1595
|
-
.input__label[data-v-
|
|
1595
|
+
.input__label[data-v-e05af4c2] {
|
|
1596
1596
|
position: absolute;
|
|
1597
1597
|
left: 1rem;
|
|
1598
1598
|
top: 1rem;
|
|
@@ -1604,56 +1604,56 @@ body {
|
|
|
1604
1604
|
padding: 0 0.25rem;
|
|
1605
1605
|
z-index: 1;
|
|
1606
1606
|
}
|
|
1607
|
-
.input__label--required[data-v-
|
|
1607
|
+
.input__label--required[data-v-e05af4c2]::after {
|
|
1608
1608
|
content: "*";
|
|
1609
1609
|
color: #d32f2f;
|
|
1610
1610
|
margin-left: 0.25rem;
|
|
1611
1611
|
}
|
|
1612
|
-
.input__icon[data-v-
|
|
1612
|
+
.input__icon[data-v-e05af4c2] {
|
|
1613
1613
|
position: absolute;
|
|
1614
1614
|
display: flex;
|
|
1615
1615
|
align-items: center;
|
|
1616
1616
|
justify-content: center;
|
|
1617
1617
|
color: #666;
|
|
1618
1618
|
}
|
|
1619
|
-
.input__icon--leading[data-v-
|
|
1619
|
+
.input__icon--leading[data-v-e05af4c2] {
|
|
1620
1620
|
left: 1rem;
|
|
1621
1621
|
pointer-events: none;
|
|
1622
1622
|
}
|
|
1623
|
-
.input__icon--trailing[data-v-
|
|
1623
|
+
.input__icon--trailing[data-v-e05af4c2] {
|
|
1624
1624
|
right: 1rem;
|
|
1625
1625
|
pointer-events: auto;
|
|
1626
1626
|
background: none;
|
|
1627
1627
|
border: none;
|
|
1628
1628
|
padding: 0;
|
|
1629
1629
|
}
|
|
1630
|
-
.input__icon[data-v-
|
|
1630
|
+
.input__icon[data-v-e05af4c2]:disabled {
|
|
1631
1631
|
opacity: 0.5;
|
|
1632
1632
|
cursor: not-allowed;
|
|
1633
1633
|
}
|
|
1634
|
-
.input__footer[data-v-
|
|
1634
|
+
.input__footer[data-v-e05af4c2] {
|
|
1635
1635
|
display: flex;
|
|
1636
1636
|
justify-content: space-between;
|
|
1637
1637
|
margin-top: 0.25rem;
|
|
1638
1638
|
}
|
|
1639
|
-
.input__helper-text[data-v-
|
|
1639
|
+
.input__helper-text[data-v-e05af4c2] {
|
|
1640
1640
|
display: block;
|
|
1641
1641
|
font-size: 0.75rem;
|
|
1642
1642
|
color: #666;
|
|
1643
1643
|
margin-left: 10px;
|
|
1644
1644
|
}
|
|
1645
|
-
.input__helper-text--error[data-v-
|
|
1645
|
+
.input__helper-text--error[data-v-e05af4c2] {
|
|
1646
1646
|
color: #d32f2f;
|
|
1647
1647
|
}
|
|
1648
|
-
.input__helper-text--success[data-v-
|
|
1648
|
+
.input__helper-text--success[data-v-e05af4c2] {
|
|
1649
1649
|
color: #388e3c;
|
|
1650
1650
|
}
|
|
1651
|
-
.input__counter[data-v-
|
|
1651
|
+
.input__counter[data-v-e05af4c2] {
|
|
1652
1652
|
font-size: 0.75rem;
|
|
1653
1653
|
color: #666;
|
|
1654
1654
|
margin-right: 5px;
|
|
1655
1655
|
}
|
|
1656
|
-
.input--has-value .input__label[data-v-
|
|
1656
|
+
.input--has-value .input__label[data-v-e05af4c2], .input--is-focused .input__label[data-v-e05af4c2], .input--has-placeholder .input__label[data-v-e05af4c2] {
|
|
1657
1657
|
top: -1.5rem;
|
|
1658
1658
|
left: 0.5rem;
|
|
1659
1659
|
font-size: 14px;
|
|
@@ -1661,37 +1661,37 @@ body {
|
|
|
1661
1661
|
background-color: transparent;
|
|
1662
1662
|
z-index: 999;
|
|
1663
1663
|
}
|
|
1664
|
-
.input--is-focused .input__label[data-v-
|
|
1664
|
+
.input--is-focused .input__label[data-v-e05af4c2] {
|
|
1665
1665
|
color: #333 !important;
|
|
1666
1666
|
}
|
|
1667
|
-
.input--error .input__label[data-v-
|
|
1667
|
+
.input--error .input__label[data-v-e05af4c2]:not(.input--is-focused) {
|
|
1668
1668
|
color: #d32f2f;
|
|
1669
1669
|
}
|
|
1670
|
-
.input--success .input__label[data-v-
|
|
1670
|
+
.input--success .input__label[data-v-e05af4c2]:not(.input--is-focused) {
|
|
1671
1671
|
color: #388e3c;
|
|
1672
1672
|
}
|
|
1673
|
-
.input--has-value .input__label[data-v-
|
|
1673
|
+
.input--has-value .input__label[data-v-e05af4c2]:not(.input--is-focused) {
|
|
1674
1674
|
color: #666;
|
|
1675
1675
|
}
|
|
1676
|
-
.input--disabled[data-v-
|
|
1676
|
+
.input--disabled[data-v-e05af4c2] {
|
|
1677
1677
|
opacity: 0.7;
|
|
1678
1678
|
cursor: not-allowed;
|
|
1679
1679
|
}
|
|
1680
|
-
.input--readonly .input__field[data-v-
|
|
1680
|
+
.input--readonly .input__field[data-v-e05af4c2] {
|
|
1681
1681
|
background-color: #f9f9f9;
|
|
1682
1682
|
border-color: #eee;
|
|
1683
1683
|
cursor: default;
|
|
1684
1684
|
}
|
|
1685
|
-
.input--error .input__field[data-v-
|
|
1685
|
+
.input--error .input__field[data-v-e05af4c2] {
|
|
1686
1686
|
border-color: #d32f2f;
|
|
1687
1687
|
}
|
|
1688
|
-
.input--error .input__field[data-v-
|
|
1688
|
+
.input--error .input__field[data-v-e05af4c2]:focus {
|
|
1689
1689
|
border-color: #d32f2f;
|
|
1690
1690
|
}
|
|
1691
|
-
.input--success .input__field[data-v-
|
|
1691
|
+
.input--success .input__field[data-v-e05af4c2] {
|
|
1692
1692
|
border-color: #388e3c;
|
|
1693
1693
|
}
|
|
1694
|
-
.input--success .input__field[data-v-
|
|
1694
|
+
.input--success .input__field[data-v-e05af4c2]:focus {
|
|
1695
1695
|
border-color: #388e3c;
|
|
1696
1696
|
}.input[data-v-7f20743b] {
|
|
1697
1697
|
position: relative;
|
|
@@ -2295,7 +2295,7 @@ body {
|
|
|
2295
2295
|
.progress-bar__header[data-v-80b0b9cd] {
|
|
2296
2296
|
display: flex;
|
|
2297
2297
|
justify-content: space-between;
|
|
2298
|
-
font-size: 0.
|
|
2298
|
+
font-size: 0.875rem;
|
|
2299
2299
|
font-weight: 500;
|
|
2300
2300
|
}
|
|
2301
2301
|
.progress-bar__label[data-v-80b0b9cd], .progress-bar__value[data-v-80b0b9cd] {
|
|
@@ -2330,4 +2330,60 @@ body {
|
|
|
2330
2330
|
background-color: var(--bar-color);
|
|
2331
2331
|
border-radius: 999px;
|
|
2332
2332
|
transition: width 0.3s ease;
|
|
2333
|
+
}.data-table[data-v-a06a935f] {
|
|
2334
|
+
background-color: var(--color-surface);
|
|
2335
|
+
border-radius: 12px;
|
|
2336
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
2337
|
+
padding: 16px;
|
|
2338
|
+
/* ===== Search ===== */
|
|
2339
|
+
}
|
|
2340
|
+
.data-table__search[data-v-a06a935f] {
|
|
2341
|
+
width: 100%;
|
|
2342
|
+
margin-bottom: 16px;
|
|
2343
|
+
}
|
|
2344
|
+
.data-table[data-v-a06a935f] {
|
|
2345
|
+
/* ===== Table ===== */
|
|
2346
|
+
}
|
|
2347
|
+
.data-table__table[data-v-a06a935f] {
|
|
2348
|
+
width: 100%;
|
|
2349
|
+
border-collapse: separate;
|
|
2350
|
+
border-spacing: 0;
|
|
2351
|
+
}
|
|
2352
|
+
.data-table[data-v-a06a935f] {
|
|
2353
|
+
/* ===== Header ===== */
|
|
2354
|
+
}
|
|
2355
|
+
.data-table__header-cell[data-v-a06a935f] {
|
|
2356
|
+
background-color: var(--color-background);
|
|
2357
|
+
padding: 12px 24px;
|
|
2358
|
+
text-align: left;
|
|
2359
|
+
font-weight: 600;
|
|
2360
|
+
font-size: 12px;
|
|
2361
|
+
letter-spacing: 0.04em;
|
|
2362
|
+
text-transform: uppercase;
|
|
2363
|
+
color: var(--color-text-tertiary);
|
|
2364
|
+
}
|
|
2365
|
+
.data-table__header-cell--right[data-v-a06a935f] {
|
|
2366
|
+
text-align: right;
|
|
2367
|
+
}
|
|
2368
|
+
.data-table[data-v-a06a935f] {
|
|
2369
|
+
/* ===== Body ===== */
|
|
2370
|
+
}
|
|
2371
|
+
.data-table__cell[data-v-a06a935f] {
|
|
2372
|
+
padding: 16px 24px;
|
|
2373
|
+
font-size: 14px;
|
|
2374
|
+
vertical-align: middle;
|
|
2375
|
+
}
|
|
2376
|
+
.data-table__cell--right[data-v-a06a935f] {
|
|
2377
|
+
text-align: right;
|
|
2378
|
+
}
|
|
2379
|
+
.data-table__cell--actions[data-v-a06a935f] {
|
|
2380
|
+
display: flex;
|
|
2381
|
+
justify-content: flex-end;
|
|
2382
|
+
gap: 8px;
|
|
2383
|
+
}
|
|
2384
|
+
.data-table[data-v-a06a935f] {
|
|
2385
|
+
/* ===== Modifiers ===== */
|
|
2386
|
+
}
|
|
2387
|
+
.data-table--has-row-line .data-table__row:not(:last-child) .data-table__cell[data-v-a06a935f] {
|
|
2388
|
+
border-bottom: 1px solid rgba(0, 0, 0, 0.1019607843);
|
|
2333
2389
|
}
|