hrm_ui_lib 2.2.4 → 2.3.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/assets/styles/styles.css +139 -0
- package/assets/styles/styles.scss +1 -1
- package/components/Card/Card.d.ts +10 -0
- package/components/Card/Card.js +26 -0
- package/components/Card/CardComponent/Card.d.ts +4 -0
- package/components/Card/CardComponent/Card.js +9 -0
- package/components/Card/CardComponent/CardBody.d.ts +4 -0
- package/components/Card/CardComponent/CardBody.js +11 -0
- package/components/Card/CardComponent/CardHead.d.ts +4 -0
- package/components/Card/CardComponent/CardHead.js +15 -0
- package/components/Card/CardContext.d.ts +7 -0
- package/components/Card/CardContext.js +6 -0
- package/components/Card/index.d.ts +1 -0
- package/components/Card/index.js +1 -0
- package/components/Card/types.d.ts +16 -0
- package/components/Card/types.js +1 -0
- package/index.d.ts +1 -0
- package/index.js +1 -0
- package/package.json +1 -1
- /package/{Alert-n_ce-aCm.js → Alert-j4hwfl9U.js} +0 -0
package/assets/styles/styles.css
CHANGED
|
@@ -3462,6 +3462,145 @@ body {
|
|
|
3462
3462
|
width: var(--ds-button-icon-size-sm);
|
|
3463
3463
|
}
|
|
3464
3464
|
|
|
3465
|
+
.card {
|
|
3466
|
+
border: 1px solid var(--grey-200);
|
|
3467
|
+
border-radius: var(--size-8);
|
|
3468
|
+
display: flex;
|
|
3469
|
+
height: 56px;
|
|
3470
|
+
position: relative;
|
|
3471
|
+
}
|
|
3472
|
+
|
|
3473
|
+
.card--expanded, .card--expanded .card__content--header {
|
|
3474
|
+
height: auto;
|
|
3475
|
+
}
|
|
3476
|
+
|
|
3477
|
+
.card--title--alignment__body {
|
|
3478
|
+
border: 1px solid var(--grey-200);
|
|
3479
|
+
}
|
|
3480
|
+
|
|
3481
|
+
.card--title--alignment--left {
|
|
3482
|
+
flex-direction: row;
|
|
3483
|
+
}
|
|
3484
|
+
|
|
3485
|
+
.card--title--alignment--left .card__body {
|
|
3486
|
+
border-bottom-right-radius: var(--size-8);
|
|
3487
|
+
border-top-right-radius: var(--size-8);
|
|
3488
|
+
}
|
|
3489
|
+
|
|
3490
|
+
.card--title--alignment--left .card__title {
|
|
3491
|
+
border-bottom-left-radius: var(--size-8);
|
|
3492
|
+
border-top-left-radius: var(--size-8);
|
|
3493
|
+
writing-mode: sideways-lr;
|
|
3494
|
+
}
|
|
3495
|
+
|
|
3496
|
+
.card--title--alignment--right {
|
|
3497
|
+
flex-direction: row-reverse;
|
|
3498
|
+
}
|
|
3499
|
+
|
|
3500
|
+
.card--title--alignment--right .card__body {
|
|
3501
|
+
border-bottom-left-radius: var(--size-8);
|
|
3502
|
+
border-top-left-radius: var(--size-8);
|
|
3503
|
+
}
|
|
3504
|
+
|
|
3505
|
+
.card--title--alignment--right .card__title {
|
|
3506
|
+
border-bottom-right-radius: var(--size-8);
|
|
3507
|
+
border-top-right-radius: var(--size-8);
|
|
3508
|
+
writing-mode: sideways-rl;
|
|
3509
|
+
}
|
|
3510
|
+
|
|
3511
|
+
.card--title--alignment--top {
|
|
3512
|
+
flex-direction: column;
|
|
3513
|
+
}
|
|
3514
|
+
|
|
3515
|
+
.card--title--alignment--top .card__body {
|
|
3516
|
+
border-bottom-left-radius: var(--size-8);
|
|
3517
|
+
border-bottom-right-radius: var(--size-8);
|
|
3518
|
+
}
|
|
3519
|
+
|
|
3520
|
+
.card--title--alignment--top .card__title {
|
|
3521
|
+
border-top-left-radius: var(--size-8);
|
|
3522
|
+
border-top-right-radius: var(--size-8);
|
|
3523
|
+
}
|
|
3524
|
+
|
|
3525
|
+
.card--title--alignment--bottom {
|
|
3526
|
+
flex-direction: column-reverse;
|
|
3527
|
+
}
|
|
3528
|
+
|
|
3529
|
+
.card--title--alignment--bottom .card__body {
|
|
3530
|
+
border-top-left-radius: var(--size-8);
|
|
3531
|
+
border-top-right-radius: var(--size-8);
|
|
3532
|
+
}
|
|
3533
|
+
|
|
3534
|
+
.card--title--alignment--bottom .card__title {
|
|
3535
|
+
border-bottom-left-radius: var(--size-8);
|
|
3536
|
+
border-bottom-right-radius: var(--size-8);
|
|
3537
|
+
}
|
|
3538
|
+
|
|
3539
|
+
.card__title {
|
|
3540
|
+
font-size: var(--font-size-12);
|
|
3541
|
+
font-weight: var(--font-weight-700);
|
|
3542
|
+
line-height: 16px;
|
|
3543
|
+
text-align: center;
|
|
3544
|
+
text-transform: capitalize;
|
|
3545
|
+
}
|
|
3546
|
+
|
|
3547
|
+
.card__title--blue {
|
|
3548
|
+
background-color: var(--blue-100);
|
|
3549
|
+
border: 1px solid var(--blue-100);
|
|
3550
|
+
color: var(--blue-900);
|
|
3551
|
+
}
|
|
3552
|
+
|
|
3553
|
+
.card__title--purple {
|
|
3554
|
+
background-color: var(--purple-100);
|
|
3555
|
+
border: 1px solid var(--purple-100);
|
|
3556
|
+
color: var(--purple-900);
|
|
3557
|
+
}
|
|
3558
|
+
|
|
3559
|
+
.card__title--yellow {
|
|
3560
|
+
background-color: var(--yellow-100);
|
|
3561
|
+
border: 1px solid var(--yellow-100);
|
|
3562
|
+
color: var(--yellow-900);
|
|
3563
|
+
}
|
|
3564
|
+
|
|
3565
|
+
.card__title--pink {
|
|
3566
|
+
background-color: var(--pink-100);
|
|
3567
|
+
border: 1px solid var(--pink-100);
|
|
3568
|
+
color: var(--pink-900);
|
|
3569
|
+
}
|
|
3570
|
+
|
|
3571
|
+
.card__title--green {
|
|
3572
|
+
background-color: var(--green-100);
|
|
3573
|
+
border: 1px solid var(--green-100);
|
|
3574
|
+
color: var(--green-900);
|
|
3575
|
+
}
|
|
3576
|
+
|
|
3577
|
+
.card__title--grey {
|
|
3578
|
+
background-color: var(--grey-100);
|
|
3579
|
+
border: 1px solid var(--grey-100);
|
|
3580
|
+
color: var(--grey-900);
|
|
3581
|
+
}
|
|
3582
|
+
|
|
3583
|
+
.card__content {
|
|
3584
|
+
display: flex;
|
|
3585
|
+
flex-grow: 1;
|
|
3586
|
+
flex: 1;
|
|
3587
|
+
flex-direction: column;
|
|
3588
|
+
}
|
|
3589
|
+
|
|
3590
|
+
.card__content--header {
|
|
3591
|
+
display: flex;
|
|
3592
|
+
flex: auto;
|
|
3593
|
+
justify-content: space-between;
|
|
3594
|
+
}
|
|
3595
|
+
|
|
3596
|
+
.card__content--header--expand {
|
|
3597
|
+
align-content: center;
|
|
3598
|
+
}
|
|
3599
|
+
|
|
3600
|
+
.card__content .card__divider {
|
|
3601
|
+
background-color: var(--grey-200);
|
|
3602
|
+
}
|
|
3603
|
+
|
|
3465
3604
|
.chips {
|
|
3466
3605
|
--ds-chips-height-lg:var(--ds-size-32);
|
|
3467
3606
|
--ds-chips-height-md:var(--ds-size-24);
|