@vector-business-services/cristal-ds-web 0.21.0 → 0.22.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/dist/index.cjs +329 -183
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +120 -87
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +41 -28
- package/dist/index.d.ts +41 -28
- package/dist/index.js +329 -183
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -1380,54 +1380,6 @@
|
|
|
1380
1380
|
}
|
|
1381
1381
|
}
|
|
1382
1382
|
|
|
1383
|
-
/* src/components/DatePicker/DatePicker.css */
|
|
1384
|
-
.cr-datepicker__root {
|
|
1385
|
-
position: relative;
|
|
1386
|
-
display: flex;
|
|
1387
|
-
}
|
|
1388
|
-
.cr-datepicker__input {
|
|
1389
|
-
flex: 1;
|
|
1390
|
-
box-sizing: border-box;
|
|
1391
|
-
min-width: 0;
|
|
1392
|
-
padding-right: calc(var(--cr-padding-padding-5) + 20px + var(--cr-spacing-spacing-3));
|
|
1393
|
-
outline: none;
|
|
1394
|
-
}
|
|
1395
|
-
.cr-datepicker__input::placeholder {
|
|
1396
|
-
color: var(--cr-color-text-neutral-subtlest);
|
|
1397
|
-
opacity: 1;
|
|
1398
|
-
}
|
|
1399
|
-
.cr-field--disabled .cr-datepicker__input {
|
|
1400
|
-
cursor: not-allowed;
|
|
1401
|
-
}
|
|
1402
|
-
.cr-datepicker__button {
|
|
1403
|
-
position: absolute;
|
|
1404
|
-
top: 50%;
|
|
1405
|
-
right: var(--cr-padding-padding-5);
|
|
1406
|
-
display: inline-flex;
|
|
1407
|
-
padding: 0;
|
|
1408
|
-
border: 0;
|
|
1409
|
-
background: none;
|
|
1410
|
-
color: inherit;
|
|
1411
|
-
font-size: 20px;
|
|
1412
|
-
cursor: pointer;
|
|
1413
|
-
transform: translateY(-50%);
|
|
1414
|
-
}
|
|
1415
|
-
.cr-datepicker__button:disabled {
|
|
1416
|
-
color: var(--cr-color-icon-disabled-base);
|
|
1417
|
-
cursor: not-allowed;
|
|
1418
|
-
}
|
|
1419
|
-
.cr-datepicker__panel {
|
|
1420
|
-
padding: var(--cr-padding-padding-6);
|
|
1421
|
-
border: var(--cr-stroke-x-small) solid var(--cr-color-stroke-neutral-base);
|
|
1422
|
-
border-radius: var(--cr-radius-large);
|
|
1423
|
-
background-color: var(--cr-color-fill-neutral-container);
|
|
1424
|
-
box-shadow: var(--cr-elevation-gray-bottom-5);
|
|
1425
|
-
margin-top: var(--cr-spacing-spacing-3);
|
|
1426
|
-
}
|
|
1427
|
-
.cr-datepicker__panel[data-cr-lado=acima] {
|
|
1428
|
-
margin-top: calc(-1 * var(--cr-spacing-spacing-3));
|
|
1429
|
-
}
|
|
1430
|
-
|
|
1431
1383
|
/* src/components/Radio/Radio.css */
|
|
1432
1384
|
.cr-radio {
|
|
1433
1385
|
display: inline-flex;
|
|
@@ -1506,6 +1458,126 @@
|
|
|
1506
1458
|
cursor: not-allowed;
|
|
1507
1459
|
}
|
|
1508
1460
|
|
|
1461
|
+
/* src/components/Calendar/DataPicker.css */
|
|
1462
|
+
.cr-data-picker__periods {
|
|
1463
|
+
box-sizing: border-box;
|
|
1464
|
+
display: flex;
|
|
1465
|
+
flex-direction: column;
|
|
1466
|
+
flex-shrink: 0;
|
|
1467
|
+
width: 231px;
|
|
1468
|
+
padding: var(--cr-padding-padding-6);
|
|
1469
|
+
border-right: var(--cr-stroke-x-small) solid var(--cr-color-stroke-neutral-base);
|
|
1470
|
+
}
|
|
1471
|
+
.cr-data-picker__period {
|
|
1472
|
+
gap: var(--cr-spacing-spacing-6);
|
|
1473
|
+
padding: var(--cr-padding-padding-5) var(--cr-padding-padding-3);
|
|
1474
|
+
}
|
|
1475
|
+
.cr-data-picker__period:hover {
|
|
1476
|
+
background-color: var(--cr-color-fill-neutral-subtlest);
|
|
1477
|
+
}
|
|
1478
|
+
.cr-data-picker__period .cr-radio__label {
|
|
1479
|
+
flex: 1;
|
|
1480
|
+
cursor: pointer;
|
|
1481
|
+
}
|
|
1482
|
+
.cr-data-picker__inputs {
|
|
1483
|
+
display: flex;
|
|
1484
|
+
align-items: center;
|
|
1485
|
+
gap: var(--cr-spacing-spacing-4);
|
|
1486
|
+
}
|
|
1487
|
+
.cr-data-picker__inputs > .cr-field {
|
|
1488
|
+
flex: 1;
|
|
1489
|
+
}
|
|
1490
|
+
.cr-data-picker__dash {
|
|
1491
|
+
font-family: var(--cr-typography-body-small-14-regular-font-family);
|
|
1492
|
+
font-size: var(--cr-typography-body-small-14-regular-font-size);
|
|
1493
|
+
line-height: var(--cr-typography-body-small-14-regular-line-height);
|
|
1494
|
+
}
|
|
1495
|
+
.cr-data-picker__footer {
|
|
1496
|
+
display: flex;
|
|
1497
|
+
justify-content: space-between;
|
|
1498
|
+
padding: var(--cr-padding-padding-6);
|
|
1499
|
+
border-top: var(--cr-stroke-x-small) solid var(--cr-color-stroke-neutral-base);
|
|
1500
|
+
}
|
|
1501
|
+
|
|
1502
|
+
/* src/components/DatePicker/DatePicker.css */
|
|
1503
|
+
.cr-datepicker__root {
|
|
1504
|
+
position: relative;
|
|
1505
|
+
display: flex;
|
|
1506
|
+
}
|
|
1507
|
+
.cr-datepicker__input {
|
|
1508
|
+
flex: 1;
|
|
1509
|
+
box-sizing: border-box;
|
|
1510
|
+
min-width: 0;
|
|
1511
|
+
padding-right: calc(var(--cr-padding-padding-5) + 20px + var(--cr-spacing-spacing-3));
|
|
1512
|
+
outline: none;
|
|
1513
|
+
}
|
|
1514
|
+
.cr-datepicker__input::placeholder {
|
|
1515
|
+
color: var(--cr-color-text-neutral-subtlest);
|
|
1516
|
+
opacity: 1;
|
|
1517
|
+
}
|
|
1518
|
+
.cr-field--disabled .cr-datepicker__input {
|
|
1519
|
+
cursor: not-allowed;
|
|
1520
|
+
}
|
|
1521
|
+
.cr-datepicker__button {
|
|
1522
|
+
position: absolute;
|
|
1523
|
+
top: 50%;
|
|
1524
|
+
right: var(--cr-padding-padding-5);
|
|
1525
|
+
display: inline-flex;
|
|
1526
|
+
padding: 0;
|
|
1527
|
+
border: 0;
|
|
1528
|
+
background: none;
|
|
1529
|
+
color: inherit;
|
|
1530
|
+
font-size: 20px;
|
|
1531
|
+
cursor: pointer;
|
|
1532
|
+
transform: translateY(-50%);
|
|
1533
|
+
}
|
|
1534
|
+
.cr-datepicker__button:disabled {
|
|
1535
|
+
color: var(--cr-color-icon-disabled-base);
|
|
1536
|
+
cursor: not-allowed;
|
|
1537
|
+
}
|
|
1538
|
+
.cr-datepicker__panel {
|
|
1539
|
+
padding: var(--cr-padding-padding-6);
|
|
1540
|
+
border: var(--cr-stroke-x-small) solid var(--cr-color-stroke-neutral-base);
|
|
1541
|
+
border-radius: var(--cr-radius-large);
|
|
1542
|
+
background-color: var(--cr-color-fill-neutral-container);
|
|
1543
|
+
box-shadow: var(--cr-elevation-gray-bottom-5);
|
|
1544
|
+
margin-top: var(--cr-spacing-spacing-3);
|
|
1545
|
+
}
|
|
1546
|
+
.cr-datepicker__panel[data-cr-lado=acima] {
|
|
1547
|
+
margin-top: calc(-1 * var(--cr-spacing-spacing-3));
|
|
1548
|
+
}
|
|
1549
|
+
.cr-datepicker__panel--data-picker {
|
|
1550
|
+
display: grid;
|
|
1551
|
+
grid-template-areas: "periodos campos" "periodos meses" "periodos visao" "rodape rodape";
|
|
1552
|
+
grid-template-columns: auto auto;
|
|
1553
|
+
padding: 0;
|
|
1554
|
+
overflow: hidden;
|
|
1555
|
+
}
|
|
1556
|
+
.cr-datepicker__extras {
|
|
1557
|
+
display: contents;
|
|
1558
|
+
}
|
|
1559
|
+
.cr-datepicker__panel--data-picker .cr-data-picker__periods {
|
|
1560
|
+
grid-area: periodos;
|
|
1561
|
+
}
|
|
1562
|
+
.cr-datepicker__panel--data-picker .cr-data-picker__inputs {
|
|
1563
|
+
grid-area: campos;
|
|
1564
|
+
padding: var(--cr-padding-padding-6) var(--cr-padding-padding-6) 0;
|
|
1565
|
+
}
|
|
1566
|
+
.cr-datepicker__panel--data-picker > .cr-calendar__months {
|
|
1567
|
+
grid-area: meses;
|
|
1568
|
+
padding: var(--cr-padding-padding-6);
|
|
1569
|
+
}
|
|
1570
|
+
.cr-datepicker__panel--data-picker > .cr-calendar__picker {
|
|
1571
|
+
grid-area: visao;
|
|
1572
|
+
margin: var(--cr-spacing-spacing-6) var(--cr-padding-padding-6) var(--cr-padding-padding-6);
|
|
1573
|
+
}
|
|
1574
|
+
.cr-datepicker__panel--data-picker > .cr-calendar__months:has(+ .cr-calendar__picker) {
|
|
1575
|
+
padding-bottom: 0;
|
|
1576
|
+
}
|
|
1577
|
+
.cr-datepicker__panel--data-picker .cr-data-picker__footer {
|
|
1578
|
+
grid-area: rodape;
|
|
1579
|
+
}
|
|
1580
|
+
|
|
1509
1581
|
/* src/components/DateRangeButton/DateRangeButton.css */
|
|
1510
1582
|
.cr-date-range-field {
|
|
1511
1583
|
display: inline-flex;
|
|
@@ -1584,51 +1656,12 @@
|
|
|
1584
1656
|
.cr-date-range__body {
|
|
1585
1657
|
display: flex;
|
|
1586
1658
|
}
|
|
1587
|
-
.cr-date-range__periods {
|
|
1588
|
-
box-sizing: border-box;
|
|
1589
|
-
display: flex;
|
|
1590
|
-
flex-direction: column;
|
|
1591
|
-
flex-shrink: 0;
|
|
1592
|
-
width: 231px;
|
|
1593
|
-
padding: var(--cr-padding-padding-6);
|
|
1594
|
-
border-right: var(--cr-stroke-x-small) solid var(--cr-color-stroke-neutral-base);
|
|
1595
|
-
}
|
|
1596
|
-
.cr-date-range__period {
|
|
1597
|
-
gap: var(--cr-spacing-spacing-6);
|
|
1598
|
-
padding: var(--cr-padding-padding-5) var(--cr-padding-padding-3);
|
|
1599
|
-
}
|
|
1600
|
-
.cr-date-range__period:hover {
|
|
1601
|
-
background-color: var(--cr-color-fill-neutral-subtlest);
|
|
1602
|
-
}
|
|
1603
|
-
.cr-date-range__period .cr-radio__label {
|
|
1604
|
-
flex: 1;
|
|
1605
|
-
cursor: pointer;
|
|
1606
|
-
}
|
|
1607
1659
|
.cr-date-range__calendars {
|
|
1608
1660
|
display: flex;
|
|
1609
1661
|
flex-direction: column;
|
|
1610
1662
|
gap: var(--cr-spacing-spacing-6);
|
|
1611
1663
|
padding: var(--cr-padding-padding-6);
|
|
1612
1664
|
}
|
|
1613
|
-
.cr-date-range__inputs {
|
|
1614
|
-
display: flex;
|
|
1615
|
-
align-items: center;
|
|
1616
|
-
gap: var(--cr-spacing-spacing-4);
|
|
1617
|
-
}
|
|
1618
|
-
.cr-date-range__inputs > .cr-field {
|
|
1619
|
-
flex: 1;
|
|
1620
|
-
}
|
|
1621
|
-
.cr-date-range__dash {
|
|
1622
|
-
font-family: var(--cr-typography-body-small-14-regular-font-family);
|
|
1623
|
-
font-size: var(--cr-typography-body-small-14-regular-font-size);
|
|
1624
|
-
line-height: var(--cr-typography-body-small-14-regular-line-height);
|
|
1625
|
-
}
|
|
1626
|
-
.cr-date-range__footer {
|
|
1627
|
-
display: flex;
|
|
1628
|
-
justify-content: space-between;
|
|
1629
|
-
padding: var(--cr-padding-padding-6);
|
|
1630
|
-
border-top: var(--cr-stroke-x-small) solid var(--cr-color-stroke-neutral-base);
|
|
1631
|
-
}
|
|
1632
1665
|
|
|
1633
1666
|
/* src/components/Divider/Divider.css */
|
|
1634
1667
|
.cr-divider {
|