@carbon/ibmdotcom-styles 2.17.0-rc.0 → 2.18.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.
Files changed (6) hide show
  1. package/dist/ibm-dotcom-styles.css +144 -0
  2. package/dist/ibm-dotcom-styles.min.css +1 -1
  3. package/package.json +2 -2
  4. package/scss/components/card/_card.scss +95 -1
  5. package/scss/components/card-group/_card-group.scss +8 -0
  6. package/scss/components/card-in-card/_card-in-card.scss +14 -1
package/dist/ibm-dotcom-styles.css CHANGED
@@ -10192,6 +10192,12 @@ screen and (prefers-contrast) {
10192
10192
  -webkit-margin-before: auto;
10193
10193
  margin-block-start: auto
10194
10194
  }
10195
+ @media (max-width:41.98rem) {
10196
+ :host(c4d-content-group-cards-item) {
10197
+ inline-size: auto;
10198
+ margin-inline: 1rem
10199
+ }
10200
+ }
10195
10201
  :host(c4d-card),
10196
10202
  :host(c4d-card-cta),
10197
10203
  :host(c4d-card-group-item),
@@ -10403,6 +10409,136 @@ screen and (prefers-contrast) {
10403
10409
  :host(c4d-card-in-card) .cds--card__copy[hidden] {
10404
10410
  display: none!important
10405
10411
  }
10412
+ @media (pointer:fine) {
10413
+ :host(c4d-card)[pictogram-placement=bottom] .cds--card .cds--card__motion ::slotted(c4d-card-heading),
10414
+ :host(c4d-card)[pictogram-placement=top] .cds--card .cds--card__motion ::slotted(c4d-card-heading),
10415
+ :host(c4d-card-cta)[pictogram-placement=bottom] .cds--card .cds--card__motion ::slotted(c4d-card-heading),
10416
+ :host(c4d-card-cta)[pictogram-placement=top] .cds--card .cds--card__motion ::slotted(c4d-card-heading),
10417
+ :host(c4d-card-group-item)[pictogram-placement=bottom] .cds--card .cds--card__motion ::slotted(c4d-card-heading),
10418
+ :host(c4d-card-group-item)[pictogram-placement=top] .cds--card .cds--card__motion ::slotted(c4d-card-heading),
10419
+ :host(c4d-card-in-card)[pictogram-placement=bottom] .cds--card .cds--card__motion ::slotted(c4d-card-heading),
10420
+ :host(c4d-card-in-card)[pictogram-placement=top] .cds--card .cds--card__motion ::slotted(c4d-card-heading) {
10421
+ -webkit-padding-before: 0;
10422
+ padding-block-start: 0
10423
+ }
10424
+ :host(c4d-card)[pictogram-placement=bottom] .cds--card .cds--card__motion .cds--card__copy,
10425
+ :host(c4d-card)[pictogram-placement=top] .cds--card .cds--card__motion .cds--card__copy,
10426
+ :host(c4d-card-cta)[pictogram-placement=bottom] .cds--card .cds--card__motion .cds--card__copy,
10427
+ :host(c4d-card-cta)[pictogram-placement=top] .cds--card .cds--card__motion .cds--card__copy,
10428
+ :host(c4d-card-group-item)[pictogram-placement=bottom] .cds--card .cds--card__motion .cds--card__copy,
10429
+ :host(c4d-card-group-item)[pictogram-placement=top] .cds--card .cds--card__motion .cds--card__copy,
10430
+ :host(c4d-card-in-card)[pictogram-placement=bottom] .cds--card .cds--card__motion .cds--card__copy,
10431
+ :host(c4d-card-in-card)[pictogram-placement=top] .cds--card .cds--card__motion .cds--card__copy {
10432
+ margin-block: 2rem 0
10433
+ }
10434
+ }
10435
+ @media (pointer:fine) and (min-width:42rem) {
10436
+ :host(c4d-card)[pictogram-placement=bottom] .cds--card .cds--card__motion ::slotted(c4d-card-heading),
10437
+ :host(c4d-card)[pictogram-placement=top] .cds--card .cds--card__motion ::slotted(c4d-card-heading),
10438
+ :host(c4d-card-cta)[pictogram-placement=bottom] .cds--card .cds--card__motion ::slotted(c4d-card-heading),
10439
+ :host(c4d-card-cta)[pictogram-placement=top] .cds--card .cds--card__motion ::slotted(c4d-card-heading),
10440
+ :host(c4d-card-group-item)[pictogram-placement=bottom] .cds--card .cds--card__motion ::slotted(c4d-card-heading),
10441
+ :host(c4d-card-group-item)[pictogram-placement=top] .cds--card .cds--card__motion ::slotted(c4d-card-heading),
10442
+ :host(c4d-card-in-card)[pictogram-placement=bottom] .cds--card .cds--card__motion ::slotted(c4d-card-heading),
10443
+ :host(c4d-card-in-card)[pictogram-placement=top] .cds--card .cds--card__motion ::slotted(c4d-card-heading) {
10444
+ display: -webkit-box;
10445
+ overflow: hidden;
10446
+ -webkit-box-orient: vertical;
10447
+ -webkit-line-clamp: 3;
10448
+ max-inline-size: calc(100% - 4rem);
10449
+ opacity: 1;
10450
+ -webkit-transform: translate3d(0,0,0);
10451
+ transform: translate3d(0,0,0);
10452
+ -webkit-transition: 240ms cubic-bezier(.2,0,.38,.9) .25s;
10453
+ transition: 240ms cubic-bezier(.2,0,.38,.9) .25s
10454
+ }
10455
+ :host(c4d-card)[pictogram-placement=bottom] .cds--card .cds--card__motion .cds--card__copy,
10456
+ :host(c4d-card)[pictogram-placement=top] .cds--card .cds--card__motion .cds--card__copy,
10457
+ :host(c4d-card-cta)[pictogram-placement=bottom] .cds--card .cds--card__motion .cds--card__copy,
10458
+ :host(c4d-card-cta)[pictogram-placement=top] .cds--card .cds--card__motion .cds--card__copy,
10459
+ :host(c4d-card-group-item)[pictogram-placement=bottom] .cds--card .cds--card__motion .cds--card__copy,
10460
+ :host(c4d-card-group-item)[pictogram-placement=top] .cds--card .cds--card__motion .cds--card__copy,
10461
+ :host(c4d-card-in-card)[pictogram-placement=bottom] .cds--card .cds--card__motion .cds--card__copy,
10462
+ :host(c4d-card-in-card)[pictogram-placement=top] .cds--card .cds--card__motion .cds--card__copy {
10463
+ -webkit-margin-before: 0;
10464
+ margin-block-start: 0;
10465
+ opacity: 0;
10466
+ -webkit-transform: translate3d(0,-16px,0);
10467
+ transform: translate3d(0,-16px,0);
10468
+ -webkit-transition: 240ms cubic-bezier(.2,0,.38,.9);
10469
+ transition: 240ms cubic-bezier(.2,0,.38,.9);
10470
+ visibility: hidden
10471
+ }
10472
+ :host(c4d-card)[pictogram-placement=bottom] .cds--card:focus .cds--card__motion ::slotted(c4d-card-heading),
10473
+ :host(c4d-card)[pictogram-placement=bottom] .cds--card:hover .cds--card__motion ::slotted(c4d-card-heading),
10474
+ :host(c4d-card)[pictogram-placement=top] .cds--card:focus .cds--card__motion ::slotted(c4d-card-heading),
10475
+ :host(c4d-card)[pictogram-placement=top] .cds--card:hover .cds--card__motion ::slotted(c4d-card-heading),
10476
+ :host(c4d-card-cta)[pictogram-placement=bottom] .cds--card:focus .cds--card__motion ::slotted(c4d-card-heading),
10477
+ :host(c4d-card-cta)[pictogram-placement=bottom] .cds--card:hover .cds--card__motion ::slotted(c4d-card-heading),
10478
+ :host(c4d-card-cta)[pictogram-placement=top] .cds--card:focus .cds--card__motion ::slotted(c4d-card-heading),
10479
+ :host(c4d-card-cta)[pictogram-placement=top] .cds--card:hover .cds--card__motion ::slotted(c4d-card-heading),
10480
+ :host(c4d-card-group-item)[pictogram-placement=bottom] .cds--card:focus .cds--card__motion ::slotted(c4d-card-heading),
10481
+ :host(c4d-card-group-item)[pictogram-placement=bottom] .cds--card:hover .cds--card__motion ::slotted(c4d-card-heading),
10482
+ :host(c4d-card-group-item)[pictogram-placement=top] .cds--card:focus .cds--card__motion ::slotted(c4d-card-heading),
10483
+ :host(c4d-card-group-item)[pictogram-placement=top] .cds--card:hover .cds--card__motion ::slotted(c4d-card-heading),
10484
+ :host(c4d-card-in-card)[pictogram-placement=bottom] .cds--card:focus .cds--card__motion ::slotted(c4d-card-heading),
10485
+ :host(c4d-card-in-card)[pictogram-placement=bottom] .cds--card:hover .cds--card__motion ::slotted(c4d-card-heading),
10486
+ :host(c4d-card-in-card)[pictogram-placement=top] .cds--card:focus .cds--card__motion ::slotted(c4d-card-heading),
10487
+ :host(c4d-card-in-card)[pictogram-placement=top] .cds--card:hover .cds--card__motion ::slotted(c4d-card-heading) {
10488
+ opacity: 0;
10489
+ -webkit-transform: translate3d(0,16px,0);
10490
+ transform: translate3d(0,16px,0);
10491
+ -webkit-transition-delay: 0s;
10492
+ transition-delay: 0s
10493
+ }
10494
+ :host(c4d-card)[pictogram-placement=bottom] .cds--card:focus .cds--card__motion .cds--card__copy,
10495
+ :host(c4d-card)[pictogram-placement=bottom] .cds--card:hover .cds--card__motion .cds--card__copy,
10496
+ :host(c4d-card)[pictogram-placement=top] .cds--card:focus .cds--card__motion .cds--card__copy,
10497
+ :host(c4d-card)[pictogram-placement=top] .cds--card:hover .cds--card__motion .cds--card__copy,
10498
+ :host(c4d-card-cta)[pictogram-placement=bottom] .cds--card:focus .cds--card__motion .cds--card__copy,
10499
+ :host(c4d-card-cta)[pictogram-placement=bottom] .cds--card:hover .cds--card__motion .cds--card__copy,
10500
+ :host(c4d-card-cta)[pictogram-placement=top] .cds--card:focus .cds--card__motion .cds--card__copy,
10501
+ :host(c4d-card-cta)[pictogram-placement=top] .cds--card:hover .cds--card__motion .cds--card__copy,
10502
+ :host(c4d-card-group-item)[pictogram-placement=bottom] .cds--card:focus .cds--card__motion .cds--card__copy,
10503
+ :host(c4d-card-group-item)[pictogram-placement=bottom] .cds--card:hover .cds--card__motion .cds--card__copy,
10504
+ :host(c4d-card-group-item)[pictogram-placement=top] .cds--card:focus .cds--card__motion .cds--card__copy,
10505
+ :host(c4d-card-group-item)[pictogram-placement=top] .cds--card:hover .cds--card__motion .cds--card__copy,
10506
+ :host(c4d-card-in-card)[pictogram-placement=bottom] .cds--card:focus .cds--card__motion .cds--card__copy,
10507
+ :host(c4d-card-in-card)[pictogram-placement=bottom] .cds--card:hover .cds--card__motion .cds--card__copy,
10508
+ :host(c4d-card-in-card)[pictogram-placement=top] .cds--card:focus .cds--card__motion .cds--card__copy,
10509
+ :host(c4d-card-in-card)[pictogram-placement=top] .cds--card:hover .cds--card__motion .cds--card__copy {
10510
+ display: block;
10511
+ overflow: hidden;
10512
+ opacity: 1;
10513
+ -webkit-transform: translate3d(0,0,0);
10514
+ transform: translate3d(0,0,0);
10515
+ -webkit-transition-delay: .2s;
10516
+ transition-delay: .2s;
10517
+ visibility: visible
10518
+ }
10519
+ :host(c4d-card)[pictogram-placement=top] .cds--card .cds--card__motion ::slotted(c4d-card-heading),
10520
+ :host(c4d-card-cta)[pictogram-placement=top] .cds--card .cds--card__motion ::slotted(c4d-card-heading),
10521
+ :host(c4d-card-group-item)[pictogram-placement=top] .cds--card .cds--card__motion ::slotted(c4d-card-heading),
10522
+ :host(c4d-card-in-card)[pictogram-placement=top] .cds--card .cds--card__motion ::slotted(c4d-card-heading) {
10523
+ position: absolute;
10524
+ display: flow-root;
10525
+ inset-block-end: 1rem
10526
+ }
10527
+ :host(c4d-card)[pictogram-placement=top] .cds--card .cds--card__motion .cds--card__copy,
10528
+ :host(c4d-card-cta)[pictogram-placement=top] .cds--card .cds--card__motion .cds--card__copy,
10529
+ :host(c4d-card-group-item)[pictogram-placement=top] .cds--card .cds--card__motion .cds--card__copy,
10530
+ :host(c4d-card-in-card)[pictogram-placement=top] .cds--card .cds--card__motion .cds--card__copy {
10531
+ -webkit-margin-before: 2rem;
10532
+ margin-block-start: 2rem
10533
+ }
10534
+ :host(c4d-card)[pictogram-placement=top] .cds--card .cds--card__motion ::slotted(svg[slot=pictogram]),
10535
+ :host(c4d-card-cta)[pictogram-placement=top] .cds--card .cds--card__motion ::slotted(svg[slot=pictogram]),
10536
+ :host(c4d-card-group-item)[pictogram-placement=top] .cds--card .cds--card__motion ::slotted(svg[slot=pictogram]),
10537
+ :host(c4d-card-in-card)[pictogram-placement=top] .cds--card .cds--card__motion ::slotted(svg[slot=pictogram]) {
10538
+ -webkit-margin-after: 0;
10539
+ margin-block-end: 0
10540
+ }
10541
+ }
10406
10542
  :host(c4d-card[aspect-ratio="1:1"]) .cds--card__wrapper {
10407
10543
  display: -webkit-box;
10408
10544
  display: -ms-flexbox;
@@ -12510,6 +12646,14 @@ screen and (prefers-contrast) {
12510
12646
  padding-block-start: 0;
12511
12647
  padding-inline: 1px
12512
12648
  }
12649
+ @media (max-width:41.98rem) {
12650
+ :host(c4d-card-group) {
12651
+ padding-inline: 1rem
12652
+ }
12653
+ :host(c4d-card-group[with-card-in-card][grid-mode]) {
12654
+ padding-inline: 1rem
12655
+ }
12656
+ }
12513
12657
  :host(c4d-card-group[with-card-in-card][grid-mode=default]) {
12514
12658
  -webkit-padding-before: 2rem;
12515
12659
  padding-block-start: 2rem