@carbon/ibmdotcom-styles 2.16.0-rc.0 → 2.16.0-rc.2
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/ibm-dotcom-styles.css +70 -28
- package/dist/ibm-dotcom-styles.min.css +3 -3
- package/package.json +2 -2
- package/scss/components/callout-with-media/_callout-with-media.scss +4 -2
- package/scss/components/card/_card.scss +0 -6
- package/scss/components/card-group/_card-group.scss +8 -1
- package/scss/components/feature-card/_feature-card.scss +26 -4
- package/scss/components/feature-section/_feature-section.scss +2 -1
- package/scss/components/footer/_footer.scss +9 -3
- package/scss/components/footer/_legal-nav.scss +2 -2
- package/scss/components/leadspace/_leadspace.scss +1 -0
- package/scss/components/notice-choice/_notice-choice.scss +4 -0
- package/scss/components/tableofcontents/_table-of-contents.scss +0 -1
- package/scss/internal/content-block/_content-block.scss +1 -0
|
@@ -6087,7 +6087,8 @@ screen and (prefers-contrast) {
|
|
|
6087
6087
|
}
|
|
6088
6088
|
.cds--content-layout ::slotted([data-autoid^=c4d--card]:not([slot])),
|
|
6089
6089
|
.cds--content-layout ::slotted([data-autoid^=c4d--tabs-]:not([slot])),
|
|
6090
|
-
.cds--content-layout ::slotted(c4d-content-group:not([slot]))
|
|
6090
|
+
.cds--content-layout ::slotted(c4d-content-group:not([slot])),
|
|
6091
|
+
.cds--content-layout ::slotted(c4d-cta-block-item-row:not([slot])) {
|
|
6091
6092
|
-webkit-margin-start: 0;
|
|
6092
6093
|
margin-inline-start: 0
|
|
6093
6094
|
}
|
|
@@ -6921,6 +6922,11 @@ screen and (prefers-contrast) {
|
|
|
6921
6922
|
:host(c4d-callout-with-media) ::slotted([slot=media]) {
|
|
6922
6923
|
margin: 0 0 2rem
|
|
6923
6924
|
}
|
|
6925
|
+
:host(c4d-callout-with-media-image) .c4d--image__caption,
|
|
6926
|
+
:host(c4d-callout-with-media-video) ::slotted(c4d-video-player) {
|
|
6927
|
+
-webkit-margin-after: 0;
|
|
6928
|
+
margin-block-end: 0
|
|
6929
|
+
}
|
|
6924
6930
|
:host(c4d-callout-with-media) ::slotted([slot=copy]),
|
|
6925
6931
|
:host(c4d-callout-with-media) ::slotted([slot=heading]) {
|
|
6926
6932
|
inline-size: auto;
|
|
@@ -6954,8 +6960,8 @@ screen and (prefers-contrast) {
|
|
|
6954
6960
|
}
|
|
6955
6961
|
.cds--callout-with-media .cds--callout__content .cds--content-block,
|
|
6956
6962
|
:host(c4d-callout-with-media) .cds--callout__content {
|
|
6957
|
-
-webkit-padding-after:
|
|
6958
|
-
padding-block-end:
|
|
6963
|
+
-webkit-padding-after: 2rem;
|
|
6964
|
+
padding-block-end: 2rem
|
|
6959
6965
|
}
|
|
6960
6966
|
.cds--callout-with-media .cds--callout__content .cds--content-block .cds--image__caption,
|
|
6961
6967
|
:host(c4d-callout-with-media-image) .cds--image__caption {
|
|
@@ -10150,13 +10156,6 @@ screen and (prefers-contrast) {
|
|
|
10150
10156
|
flex-direction: column;
|
|
10151
10157
|
gap: 1rem
|
|
10152
10158
|
}
|
|
10153
|
-
:host(c4d-card) ::slotted(div),
|
|
10154
|
-
:host(c4d-card-cta) ::slotted(div),
|
|
10155
|
-
:host(c4d-card-group-item) ::slotted(div),
|
|
10156
|
-
:host(c4d-card-in-card) ::slotted(div) {
|
|
10157
|
-
-webkit-margin-start: -.25rem!important;
|
|
10158
|
-
margin-inline-start: -.25rem!important
|
|
10159
|
-
}
|
|
10160
10159
|
:host(c4d-card[aspect-ratio="1:1"]) .cds--card__wrapper {
|
|
10161
10160
|
display: -webkit-box;
|
|
10162
10161
|
display: -ms-flexbox;
|
|
@@ -12292,9 +12291,15 @@ screen and (prefers-contrast) {
|
|
|
12292
12291
|
:host(c4d-card-group-item) .cds--card .cds--card__wrapper::before {
|
|
12293
12292
|
content: revert
|
|
12294
12293
|
}
|
|
12294
|
+
:host(c4d-card-group-item) .cds--card .cds--card__wrapper::after {
|
|
12295
|
+
display: block;
|
|
12296
|
+
aspect-ratio: 16/9;
|
|
12297
|
+
content: "";
|
|
12298
|
+
grid-area: 1/1/-1/-1
|
|
12299
|
+
}
|
|
12295
12300
|
:host(c4d-card-group-item) .cds--card .cds--card__content {
|
|
12296
12301
|
display: grid;
|
|
12297
|
-
grid-
|
|
12302
|
+
grid-area: 1/1/-1/-1;
|
|
12298
12303
|
grid-template-rows: subgrid;
|
|
12299
12304
|
row-gap: 0
|
|
12300
12305
|
}
|
|
@@ -13563,6 +13568,10 @@ screen and (prefers-contrast) {
|
|
|
13563
13568
|
-ms-flex: 1 0 50%;
|
|
13564
13569
|
flex: 1 0 50%
|
|
13565
13570
|
}
|
|
13571
|
+
:host(c4d-feature-card) .cds--card__image-wrapper,
|
|
13572
|
+
:host(c4d-feature-cta) .cds--card__image-wrapper {
|
|
13573
|
+
aspect-ratio: 1/1
|
|
13574
|
+
}
|
|
13566
13575
|
:host(c4d-feature-card) .cds--card__wrapper::after,
|
|
13567
13576
|
:host(c4d-feature-card) .cds--card__wrapper::before,
|
|
13568
13577
|
:host(c4d-feature-cta) .cds--card__wrapper::after,
|
|
@@ -13618,7 +13627,8 @@ screen and (prefers-contrast) {
|
|
|
13618
13627
|
:host(c4d-feature-card) c4d-image,
|
|
13619
13628
|
:host(c4d-feature-cta) ::slotted([slot=image]),
|
|
13620
13629
|
:host(c4d-feature-cta) c4d-image {
|
|
13621
|
-
z-index: 0
|
|
13630
|
+
z-index: 0;
|
|
13631
|
+
block-size: 100%
|
|
13622
13632
|
}
|
|
13623
13633
|
:host(c4d-feature-card) ::slotted([slot=image])::before,
|
|
13624
13634
|
:host(c4d-feature-card) c4d-image::before,
|
|
@@ -13716,9 +13726,18 @@ screen and (prefers-contrast) {
|
|
|
13716
13726
|
:host(c4d-feature-cta[size=large])[color-scheme=inverse] .cds--card__wrapper ::slotted(c4d-card-heading) {
|
|
13717
13727
|
color: var(--cds-icon-inverse,#fff)
|
|
13718
13728
|
}
|
|
13729
|
+
:host(c4d-feature-card-footer)[color-scheme=inverse] .c4d-ce--card__footer .c4d-ce--cta__icon,
|
|
13719
13730
|
:host(c4d-feature-card-footer)[color-scheme=inverse] .c4d-ce--card__footer ::slotted(svg[slot=icon]) {
|
|
13720
13731
|
fill: var(--cds-link-inverse,#78a9ff)
|
|
13721
13732
|
}
|
|
13733
|
+
:host(c4d-feature-card-footer)[color-scheme=inverse] .c4d-ce--card__footer:hover .c4d-ce--cta__icon,
|
|
13734
|
+
:host(c4d-feature-card-footer)[color-scheme=inverse] .c4d-ce--card__footer:hover ::slotted(svg[slot=icon]) {
|
|
13735
|
+
fill: var(--cds-link-inverse-hover,#a6c8ff)
|
|
13736
|
+
}
|
|
13737
|
+
:host(c4d-feature-card-footer)[color-scheme=inverse] .c4d-ce--card__footer:active .c4d-ce--cta__icon,
|
|
13738
|
+
:host(c4d-feature-card-footer)[color-scheme=inverse] .c4d-ce--card__footer:active ::slotted(svg[slot=icon]) {
|
|
13739
|
+
fill: var(--cds-link-inverse-active,#f4f4f4)
|
|
13740
|
+
}
|
|
13722
13741
|
:host(c4d-feature-card[size=large]) ::slotted(c4d-feature-card-footer) {
|
|
13723
13742
|
display: -webkit-box;
|
|
13724
13743
|
display: -ms-flexbox;
|
|
@@ -19867,7 +19886,7 @@ optgroup.cds--select-optgroup:disabled {
|
|
|
19867
19886
|
border-block-start: 0
|
|
19868
19887
|
}
|
|
19869
19888
|
:host(c4d-footer-nav-item),
|
|
19870
|
-
:host(c4d-legal-nav-cookie-preferences-placeholder)
|
|
19889
|
+
:host(c4d-legal-nav-cookie-preferences-placeholder),
|
|
19871
19890
|
:host(c4d-legal-nav-item) {
|
|
19872
19891
|
--cds-ai-aura-end: rgba(0, 0, 0, 0);
|
|
19873
19892
|
--cds-ai-aura-hover-background: #333333;
|
|
@@ -20335,7 +20354,7 @@ optgroup.cds--select-optgroup:disabled {
|
|
|
20335
20354
|
outline: 0
|
|
20336
20355
|
}
|
|
20337
20356
|
:host(c4d-footer-nav-item) .cds--footer__link.cds--link,
|
|
20338
|
-
:host(c4d-legal-nav-cookie-preferences-placeholder)
|
|
20357
|
+
:host(c4d-legal-nav-cookie-preferences-placeholder) .cds--footer__link.cds--link,
|
|
20339
20358
|
:host(c4d-legal-nav-item) .cds--footer__link.cds--link {
|
|
20340
20359
|
font-size: var(--cds-body-01-font-size,.875rem);
|
|
20341
20360
|
font-weight: var(--cds-body-01-font-weight,400);
|
|
@@ -20344,31 +20363,34 @@ optgroup.cds--select-optgroup:disabled {
|
|
|
20344
20363
|
}
|
|
20345
20364
|
:host(c4d-footer-nav-item) .cds--footer__link.cds--link,
|
|
20346
20365
|
:host(c4d-footer-nav-item) .cds--footer__link.cds--link:visited,
|
|
20347
|
-
:host(c4d-legal-nav-cookie-preferences-placeholder)
|
|
20348
|
-
:host(c4d-legal-nav-cookie-preferences-placeholder)
|
|
20366
|
+
:host(c4d-legal-nav-cookie-preferences-placeholder) .cds--footer__link.cds--link,
|
|
20367
|
+
:host(c4d-legal-nav-cookie-preferences-placeholder) .cds--footer__link.cds--link:visited,
|
|
20349
20368
|
:host(c4d-legal-nav-item) .cds--footer__link.cds--link,
|
|
20350
20369
|
:host(c4d-legal-nav-item) .cds--footer__link.cds--link:visited {
|
|
20351
20370
|
color: var(--cds-text-secondary,#525252)
|
|
20352
20371
|
}
|
|
20353
20372
|
:host(c4d-footer-nav-item) .cds--footer__link.cds--link:focus,
|
|
20354
|
-
:host(c4d-legal-nav-cookie-preferences-placeholder)
|
|
20373
|
+
:host(c4d-legal-nav-cookie-preferences-placeholder) .cds--footer__link.cds--link:focus,
|
|
20355
20374
|
:host(c4d-legal-nav-item) .cds--footer__link.cds--link:focus {
|
|
20356
20375
|
outline-color: var(--cds-focus,#0f62fe);
|
|
20357
20376
|
outline-offset: -1px
|
|
20358
20377
|
}
|
|
20359
20378
|
:host(c4d-footer-nav-item) .cds--footer__link.cds--link:active,
|
|
20360
|
-
:host(c4d-legal-nav-cookie-preferences-placeholder)
|
|
20379
|
+
:host(c4d-legal-nav-cookie-preferences-placeholder) .cds--footer__link.cds--link:active,
|
|
20361
20380
|
:host(c4d-legal-nav-item) .cds--footer__link.cds--link:active {
|
|
20362
20381
|
color: var(--cds-text-on-color,#fff)
|
|
20363
20382
|
}
|
|
20364
20383
|
:host(c4d-footer-nav-item) .cds--footer__link.cds--link:hover,
|
|
20365
20384
|
:host(c4d-footer-nav-item) .cds--footer__link.cds--link:visited:hover,
|
|
20366
|
-
:host(c4d-legal-nav-cookie-preferences-placeholder)
|
|
20367
|
-
:host(c4d-legal-nav-cookie-preferences-placeholder)
|
|
20385
|
+
:host(c4d-legal-nav-cookie-preferences-placeholder) .cds--footer__link.cds--link:hover,
|
|
20386
|
+
:host(c4d-legal-nav-cookie-preferences-placeholder) .cds--footer__link.cds--link:visited:hover,
|
|
20368
20387
|
:host(c4d-legal-nav-item) .cds--footer__link.cds--link:hover,
|
|
20369
20388
|
:host(c4d-legal-nav-item) .cds--footer__link.cds--link:visited:hover {
|
|
20370
20389
|
color: var(--cds-text-primary,#161616)
|
|
20371
20390
|
}
|
|
20391
|
+
:host(c4d-legal-nav-cookie-preferences-placeholder) .cds--footer__link.cds--link {
|
|
20392
|
+
cursor: pointer
|
|
20393
|
+
}
|
|
20372
20394
|
:host(c4d-legal-nav) .cds--legal-nav__list .cds--legal-nav__list-item .cds--link {
|
|
20373
20395
|
color: var(--cds-text-secondary,#525252)
|
|
20374
20396
|
}
|
|
@@ -20506,8 +20528,8 @@ optgroup.cds--select-optgroup:disabled {
|
|
|
20506
20528
|
padding-inline: 2.5rem
|
|
20507
20529
|
}
|
|
20508
20530
|
}
|
|
20509
|
-
:host(c4d-footer) .
|
|
20510
|
-
:host(c4d-legal-nav) .
|
|
20531
|
+
:host(c4d-footer) .c4d--adjunct-links__container--hidden,
|
|
20532
|
+
:host(c4d-legal-nav) .c4d--adjunct-links__container--hidden {
|
|
20511
20533
|
display: none
|
|
20512
20534
|
}
|
|
20513
20535
|
:host(c4d-footer-nav-group[open]) .cds--accordion__content {
|
|
@@ -27146,7 +27168,7 @@ screen and (prefers-contrast) {
|
|
|
27146
27168
|
padding-block-start: .5rem
|
|
27147
27169
|
}
|
|
27148
27170
|
.cds--legal-nav__list-item,
|
|
27149
|
-
:host(c4d-legal-nav-cookie-preferences-placeholder)
|
|
27171
|
+
:host(c4d-legal-nav-cookie-preferences-placeholder),
|
|
27150
27172
|
:host(c4d-legal-nav-item) {
|
|
27151
27173
|
padding: .5rem 0 0;
|
|
27152
27174
|
-webkit-margin-end: 2rem;
|
|
@@ -27158,14 +27180,14 @@ screen and (prefers-contrast) {
|
|
|
27158
27180
|
}
|
|
27159
27181
|
@media (max-width:41.98rem) {
|
|
27160
27182
|
.cds--legal-nav__list-item:first-child,
|
|
27161
|
-
:host(c4d-legal-nav-cookie-preferences-placeholder)
|
|
27183
|
+
:host(c4d-legal-nav-cookie-preferences-placeholder):first-child,
|
|
27162
27184
|
:host(c4d-legal-nav-item):first-child {
|
|
27163
27185
|
-webkit-padding-before: 0;
|
|
27164
27186
|
padding-block-start: 0
|
|
27165
27187
|
}
|
|
27166
27188
|
}
|
|
27167
27189
|
.cds--legal-nav__list-item:last-child,
|
|
27168
|
-
:host(c4d-legal-nav-cookie-preferences-placeholder)
|
|
27190
|
+
:host(c4d-legal-nav-cookie-preferences-placeholder):last-child,
|
|
27169
27191
|
:host(c4d-legal-nav-item):last-child {
|
|
27170
27192
|
-webkit-margin-end: 0;
|
|
27171
27193
|
margin-inline-end: 0
|
|
@@ -38766,6 +38788,7 @@ button.cds--side-nav__link > .cds--side-nav__link-text {
|
|
|
38766
38788
|
}
|
|
38767
38789
|
:host(c4d-leadspace) ::slotted([slot=navigation]) {
|
|
38768
38790
|
z-index: 1;
|
|
38791
|
+
max-inline-size: 40rem;
|
|
38769
38792
|
-webkit-padding-after: 1rem!important;
|
|
38770
38793
|
padding-block-end: 1rem!important;
|
|
38771
38794
|
padding-inline: 1rem!important
|
|
@@ -44642,13 +44665,33 @@ button.cds--side-nav__link > .cds--side-nav__link-text {
|
|
|
44642
44665
|
cds-hr {
|
|
44643
44666
|
margin-inline: 2rem/-2
|
|
44644
44667
|
}
|
|
44668
|
+
html {
|
|
44669
|
+
font-size: 100%
|
|
44670
|
+
}
|
|
44671
|
+
body {
|
|
44672
|
+
font-weight: 400;
|
|
44673
|
+
font-family: 'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;
|
|
44674
|
+
-moz-osx-font-smoothing: grayscale;
|
|
44675
|
+
-webkit-font-smoothing: antialiased;
|
|
44676
|
+
text-rendering: optimizeLegibility
|
|
44677
|
+
}
|
|
44678
|
+
code {
|
|
44679
|
+
font-family: 'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace
|
|
44680
|
+
}
|
|
44681
|
+
strong {
|
|
44682
|
+
font-weight: 600
|
|
44683
|
+
}
|
|
44645
44684
|
.cds--nc {
|
|
44646
44685
|
max-inline-size: 640px
|
|
44647
44686
|
}
|
|
44648
44687
|
.cds--nc .cds--checkbox-group,
|
|
44649
44688
|
.cds--nc p {
|
|
44650
44689
|
-webkit-margin-after: 1.5rem;
|
|
44651
|
-
margin-block-end: 1.5rem
|
|
44690
|
+
margin-block-end: 1.5rem;
|
|
44691
|
+
font-size: var(--cds-legal-02-font-size,.875rem);
|
|
44692
|
+
font-weight: var(--cds-legal-02-font-weight,400);
|
|
44693
|
+
line-height: var(--cds-legal-02-line-height,1.28572);
|
|
44694
|
+
letter-spacing: var(--cds-legal-02-letter-spacing,.16px)
|
|
44652
44695
|
}
|
|
44653
44696
|
.cds--nc a {
|
|
44654
44697
|
color: var(--cds-link-primary,#0f62fe)
|
|
@@ -48642,8 +48685,7 @@ cds-hr {
|
|
|
48642
48685
|
}
|
|
48643
48686
|
.cds--tableofcontents__content {
|
|
48644
48687
|
-webkit-box-sizing: border-box;
|
|
48645
|
-
box-sizing: border-box
|
|
48646
|
-
padding-block: 1rem 3rem
|
|
48688
|
+
box-sizing: border-box
|
|
48647
48689
|
}
|
|
48648
48690
|
.cds--tableofcontents {
|
|
48649
48691
|
-webkit-margin-before: 2rem;
|