@henriquepetrelli/hp-design-system 1.1.29 → 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/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;
|
|
@@ -2330,29 +2330,29 @@ 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-
|
|
2333
|
+
}.data-table[data-v-a06a935f] {
|
|
2334
2334
|
background-color: var(--color-surface);
|
|
2335
2335
|
border-radius: 12px;
|
|
2336
2336
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
2337
2337
|
padding: 16px;
|
|
2338
2338
|
/* ===== Search ===== */
|
|
2339
2339
|
}
|
|
2340
|
-
.data-table__search[data-v-
|
|
2340
|
+
.data-table__search[data-v-a06a935f] {
|
|
2341
2341
|
width: 100%;
|
|
2342
2342
|
margin-bottom: 16px;
|
|
2343
2343
|
}
|
|
2344
|
-
.data-table[data-v-
|
|
2344
|
+
.data-table[data-v-a06a935f] {
|
|
2345
2345
|
/* ===== Table ===== */
|
|
2346
2346
|
}
|
|
2347
|
-
.data-table__table[data-v-
|
|
2347
|
+
.data-table__table[data-v-a06a935f] {
|
|
2348
2348
|
width: 100%;
|
|
2349
2349
|
border-collapse: separate;
|
|
2350
2350
|
border-spacing: 0;
|
|
2351
2351
|
}
|
|
2352
|
-
.data-table[data-v-
|
|
2352
|
+
.data-table[data-v-a06a935f] {
|
|
2353
2353
|
/* ===== Header ===== */
|
|
2354
2354
|
}
|
|
2355
|
-
.data-table__header-cell[data-v-
|
|
2355
|
+
.data-table__header-cell[data-v-a06a935f] {
|
|
2356
2356
|
background-color: var(--color-background);
|
|
2357
2357
|
padding: 12px 24px;
|
|
2358
2358
|
text-align: left;
|
|
@@ -2362,28 +2362,28 @@ body {
|
|
|
2362
2362
|
text-transform: uppercase;
|
|
2363
2363
|
color: var(--color-text-tertiary);
|
|
2364
2364
|
}
|
|
2365
|
-
.data-table__header-cell--right[data-v-
|
|
2365
|
+
.data-table__header-cell--right[data-v-a06a935f] {
|
|
2366
2366
|
text-align: right;
|
|
2367
2367
|
}
|
|
2368
|
-
.data-table[data-v-
|
|
2368
|
+
.data-table[data-v-a06a935f] {
|
|
2369
2369
|
/* ===== Body ===== */
|
|
2370
2370
|
}
|
|
2371
|
-
.data-table__cell[data-v-
|
|
2371
|
+
.data-table__cell[data-v-a06a935f] {
|
|
2372
2372
|
padding: 16px 24px;
|
|
2373
2373
|
font-size: 14px;
|
|
2374
2374
|
vertical-align: middle;
|
|
2375
2375
|
}
|
|
2376
|
-
.data-table__cell--right[data-v-
|
|
2376
|
+
.data-table__cell--right[data-v-a06a935f] {
|
|
2377
2377
|
text-align: right;
|
|
2378
2378
|
}
|
|
2379
|
-
.data-table__cell--actions[data-v-
|
|
2379
|
+
.data-table__cell--actions[data-v-a06a935f] {
|
|
2380
2380
|
display: flex;
|
|
2381
2381
|
justify-content: flex-end;
|
|
2382
2382
|
gap: 8px;
|
|
2383
2383
|
}
|
|
2384
|
-
.data-table[data-v-
|
|
2384
|
+
.data-table[data-v-a06a935f] {
|
|
2385
2385
|
/* ===== Modifiers ===== */
|
|
2386
2386
|
}
|
|
2387
|
-
.data-table--has-row-line .data-table__row:not(:last-child) .data-table__cell[data-v-
|
|
2387
|
+
.data-table--has-row-line .data-table__row:not(:last-child) .data-table__cell[data-v-a06a935f] {
|
|
2388
2388
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1019607843);
|
|
2389
2389
|
}
|