diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss index af429b07a2d..9304853df4f 100644 --- a/packages/styles/scss/components/card/_card.scss +++ b/packages/styles/scss/components/card/_card.scss @@ -51,9 +51,7 @@ } ::slotted(#{$c4d-prefix}-image), - ::slotted(#{$c4d-prefix}-card-cta-image), - .#{$prefix}--card__img, - .#{$prefix}--image { + ::slotted(#{$c4d-prefix}-card-cta-image) { z-index: -1; } } @@ -65,8 +63,7 @@ z-index: 2; text-decoration: none; - ::slotted(#{$c4d-prefix}-image), - .#{$prefix}--image { + ::slotted(#{$c4d-prefix}-image) { z-index: -1; } } @@ -133,13 +130,6 @@ inline-size: 100%; } - .#{$prefix}--card__heading { - @include type-style('fluid-heading-03', true); - - margin-block-end: $spacing-10; - } - - .#{$prefix}--card__heading, .#{$prefix}--card__copy { @include content-width; @@ -152,10 +142,6 @@ margin-block-end: $spacing-07; } - .#{$prefix}--card__img { - transition: $duration-moderate-01 motion(standard, productive); - } - .#{$prefix}--card__link::after { position: absolute; content: ''; @@ -291,19 +277,6 @@ :host(#{$c4d-prefix}-card[aspect-ratio='16:9']) .#{$prefix}--card__wrapper { @include ratio-base(16, 9, false); } - .#{$prefix}--card.#{$prefix}--card--light { - background-color: $layer-02; - } - - .#{$prefix}--card--border { - border: 1px solid $layer-accent-01; - } - - // FIXME: CardLink is being used as Card in React, need to separate this - .#{$prefix}--card__CTA.#{$prefix}--card__CardCTA .#{$prefix}--card__heading { - @include type-style('fluid-heading-03', true); - } - // static card :host(#{$c4d-prefix}-card), @@ -415,8 +388,7 @@ outline: none; } - :host(#{$c4d-prefix}-card-eyebrow), - .#{$prefix}--card__eyebrow { + :host(#{$c4d-prefix}-card-eyebrow) { @include content-width; @include type-style('label-02'); @@ -485,11 +457,6 @@ @include type-style('body-02'); } - .#{$prefix}--card__footer__copy { - margin-block-end: -$spacing-01; - max-inline-size: calc(100% - 20px); - } - svg, ::slotted(svg[slot='icon']) { display: block; @@ -572,15 +539,10 @@ background-color: $background-inverse-hover; } - .#{$prefix}--card__heading, .#{$prefix}--card__copy { color: $icon-inverse; } - .#{$prefix}--card__eyebrow { - color: $text-placeholder; - } - &:focus-within { &::after { position: absolute; @@ -655,13 +617,6 @@ .#{$prefix}--card { border: 1px solid $layer-accent-01; background-color: $layer-02; - - .#{$prefix}--card__img, - .#{$prefix}--card__image_img, - .#{$prefix}--image, - .#{$prefix}--card__video-thumbnail { - display: none; - } } } diff --git a/packages/styles/scss/components/content-block-horizontal/_content-block-horizontal.scss b/packages/styles/scss/components/content-block-horizontal/_content-block-horizontal.scss index 0deea45cfd3..ace6acc7933 100644 --- a/packages/styles/scss/components/content-block-horizontal/_content-block-horizontal.scss +++ b/packages/styles/scss/components/content-block-horizontal/_content-block-horizontal.scss @@ -25,16 +25,6 @@ } } - .#{$prefix}--content-block-horizontal { - .#{$prefix}--content-block { - padding-block: $spacing-07 $spacing-05; - - @include breakpoint(lg) { - padding-block: $spacing-10 $spacing-09; - } - } - } - :host(#{$c4d-prefix}-content-block-horizontal) ::slotted([slot='heading']), .#{$prefix}--content-block-horizontal .#{$prefix}--content-block__heading { margin-block-end: $spacing-07; diff --git a/packages/styles/scss/components/content-block-media/_content-block-media.scss b/packages/styles/scss/components/content-block-media/_content-block-media.scss index 2373848f2d3..020199625d5 100644 --- a/packages/styles/scss/components/content-block-media/_content-block-media.scss +++ b/packages/styles/scss/components/content-block-media/_content-block-media.scss @@ -18,32 +18,13 @@ @use '../feature-card'; @mixin themed-items { - background: $background; color: $text-primary; - - &.#{$prefix}--content-block-media--with-border - .#{$prefix}--content-block-media__divider { - border-block-end-color: $toggle-off; - } + background: $background; } @mixin content-block-media { .#{$prefix}--content-block-media, :host(#{$c4d-prefix}-content-block-media) { @include themed-items; - - .#{$prefix}--content-group:last-child { - margin-block-end: 0; - } - - .#{$prefix}--feature-card { - max-inline-size: to-rem(640px); - } - } - - .#{$prefix}--content-block-media--g100 { - @include theme($g100, true); - - @include themed-items; } } diff --git a/packages/styles/scss/components/content-block-mixed/_content-block-mixed.scss b/packages/styles/scss/components/content-block-mixed/_content-block-mixed.scss index 4fe884d1746..f8ca31040fa 100644 --- a/packages/styles/scss/components/content-block-mixed/_content-block-mixed.scss +++ b/packages/styles/scss/components/content-block-mixed/_content-block-mixed.scss @@ -26,20 +26,5 @@ max-inline-size: calc(100% + $spacing-05); } } - - .#{$prefix}--layout-1-3 { - @include breakpoint-down(md) { - .#{$prefix}--link-list__list.#{$prefix}--link-list__list--card { - margin-inline-end: -$spacing-05; - } - } - @include breakpoint(lg) { - @include make-col-offset(1, 12); - } - } - - .#{$prefix}--content-block__cta-col { - max-inline-size: carbon--mini-units(40); - } } } diff --git a/packages/styles/scss/components/content-block-segmented/_content-block-segmented.scss b/packages/styles/scss/components/content-block-segmented/_content-block-segmented.scss index 05fcd683ee2..748593ce81d 100755 --- a/packages/styles/scss/components/content-block-segmented/_content-block-segmented.scss +++ b/packages/styles/scss/components/content-block-segmented/_content-block-segmented.scss @@ -22,66 +22,10 @@ @include breakpoint(lg) { padding-block-end: $spacing-13; } - - .#{$prefix}--content-block__cta-row { - margin-block-end: 0; - } - - .#{$prefix}--layout-2-3 { - padding-inline-start: 0; - } - } - } - - .#{$prefix}--content-group__cta-row { - @include breakpoint-down(md) { - margin-inline-start: 0; - } - } - - .#{$prefix}--content-block__cta-row { - margin-block-end: $spacing-07; - @include breakpoint(lg) { - margin-block-end: $spacing-13; - } - } - } - - // React specific classes to manage bottom spacing - .#{$prefix}--content-block-segmented { - &-border { - .#{$prefix}--content-block { - padding-block-end: 0; - } - } - - .#{$prefix}--content-block__cta-row { - margin-block-end: 0; - - &-border { - margin-block-end: $spacing-07; - @include breakpoint(lg) { - margin-block-end: $spacing-13; - } } } } - :host(#{$c4d-prefix}-content-block-segmented) - .#{$prefix}--content-block__children - .#{$prefix}--content-block-segmented__media - ::slotted(:not([slot])) { - display: block; - margin-block: $spacing-10; - } - - :host(#{$c4d-prefix}-content-block-segmented) - .#{$prefix}--content-block__children - .#{$prefix}--content-block-segmented__media - ::slotted(:not([slot]):last-of-type) { - margin-block-end: 0; - } - .#{$prefix}--content-block-segmented .#{$prefix}--content-group { display: block; margin-block: $spacing-10; diff --git a/packages/styles/scss/components/content-block-simple/_content-block-simple.scss b/packages/styles/scss/components/content-block-simple/_content-block-simple.scss index 4dd4e2c5c18..b13329fa100 100644 --- a/packages/styles/scss/components/content-block-simple/_content-block-simple.scss +++ b/packages/styles/scss/components/content-block-simple/_content-block-simple.scss @@ -12,15 +12,4 @@ @use '../image'; @mixin content-block-simple { - .#{$prefix}--content-block-simple__media-video { - max-inline-size: to-rem(640px); - } - - .#{$prefix}--content-block-simple__content { - .#{$prefix}--content-item { - &:first-of-type { - margin-block-start: 0; - } - } - } } diff --git a/packages/styles/scss/components/content-group-cards/_content-group-cards.scss b/packages/styles/scss/components/content-group-cards/_content-group-cards.scss index 3502194b6f1..f09bc9801d5 100644 --- a/packages/styles/scss/components/content-group-cards/_content-group-cards.scss +++ b/packages/styles/scss/components/content-group-cards/_content-group-cards.scss @@ -22,10 +22,8 @@ } @mixin content-group-cards { - :host(#{$c4d-prefix}-content-group-cards), - .#{$prefix}--content-group-cards { - ::slotted([slot='copy']), - .#{$prefix}--content-group__copy { + :host(#{$c4d-prefix}-content-group-cards) { + ::slotted([slot='copy']) { margin-block-end: $spacing-09; @include breakpoint(md) { @@ -46,8 +44,7 @@ } } - :host(#{$c4d-prefix}-content-group-cards-item), - .#{$prefix}--content-group-cards-item__col { + :host(#{$c4d-prefix}-content-group-cards-item) { margin-block: list.slash($grid-gutter, 2); padding-inline: list.slash($grid-gutter, 2); diff --git a/packages/styles/scss/components/content-group-pictograms/_content-group-pictograms.scss b/packages/styles/scss/components/content-group-pictograms/_content-group-pictograms.scss index cfb5891da1e..ee5e7d334f5 100644 --- a/packages/styles/scss/components/content-group-pictograms/_content-group-pictograms.scss +++ b/packages/styles/scss/components/content-group-pictograms/_content-group-pictograms.scss @@ -25,15 +25,5 @@ div.#{$prefix}--content-group-pictograms { padding-inline: 0; - - .#{$prefix}--content-group__title { - padding-inline: $spacing-05; - } - } - - .#{$prefix}--content-group-pictograms__item:last-child { - .#{$prefix}--content-item { - margin-block-end: 0; - } } } diff --git a/packages/styles/scss/components/content-group-simple/_content-group-simple.scss b/packages/styles/scss/components/content-group-simple/_content-group-simple.scss index 927919efb3a..6ba054576f1 100644 --- a/packages/styles/scss/components/content-group-simple/_content-group-simple.scss +++ b/packages/styles/scss/components/content-group-simple/_content-group-simple.scss @@ -13,13 +13,7 @@ @mixin content-group-simple { :host(#{$c4d-prefix}-content-group-simple) - ::slotted(#{$c4d-prefix}-content-group-copy), - .#{$prefix}--content-group-simple .#{$prefix}--content-group__copy { + ::slotted(#{$c4d-prefix}-content-group-copy) { margin-block-end: $spacing-07; } - - .bx--content-group__cta { - max-inline-size: calc(320px + $spacing-05); - padding-inline-end: 0; - } } diff --git a/packages/styles/scss/components/content-item-row/_content-item-row.scss b/packages/styles/scss/components/content-item-row/_content-item-row.scss index a7f5375457a..3976ddfa2b8 100644 --- a/packages/styles/scss/components/content-item-row/_content-item-row.scss +++ b/packages/styles/scss/components/content-item-row/_content-item-row.scss @@ -142,15 +142,6 @@ } } - .#{$prefix}--content-item-row__content-wrapper_with-media { - inline-size: 100%; - @include breakpoint(lg) { - @include make-col(8, 12); - - padding-inline-start: $spacing-04; - } - } - :host(#{$c4d-prefix}-content-item-row) ::slotted([slot='media']) { display: block; padding-block-start: $spacing-07; @@ -244,20 +235,6 @@ } } - :host(#{$c4d-prefix}-content-item-row) .#{$prefix}--content-item__cta { - .#{$prefix}--link-list { - padding: 0; - - &:first-of-type { - padding: 0; - } - } - - .#{$prefix}--link-list li:last-of-type { - margin-block-end: 0; - } - } - :host(#{$c4d-prefix}-content-item-row) ::slotted([slot='thumbnail']) { @include breakpoint(md) { @include make-col(3, 3); diff --git a/packages/styles/scss/components/cta-block/_cta-block.scss b/packages/styles/scss/components/cta-block/_cta-block.scss index e0416f84834..6eb8c03b108 100644 --- a/packages/styles/scss/components/cta-block/_cta-block.scss +++ b/packages/styles/scss/components/cta-block/_cta-block.scss @@ -21,176 +21,22 @@ background: $background; color: $text-primary; - .#{$prefix}--content-item__heading { - color: $text-primary; - } - - .#{$prefix}--content-item__copy { - p { - color: $text-primary; - } - } - .#{$prefix}--content-item__cta { color: $link-primary; } } @mixin cta-block { - :host(#{$c4d-prefix}-cta-block), - .#{$prefix}--cta-block { + :host(#{$c4d-prefix}-cta-block) { padding-block: $spacing-07 $spacing-10; @include breakpoint(lg) { padding-block-start: $spacing-10; } - .#{$prefix}--cta-block__cta { - padding-block-end: $spacing-10; - @include breakpoint(md) { - padding-block-end: $spacing-12; - } - @include breakpoint(lg) { - padding-block-end: $spacing-13; - } - - .#{$prefix}--buttongroup { - @include breakpoint(md) { - flex-direction: row; - } - } - - .#{$prefix}--buttongroup-item { - @include breakpoint(md) { - padding-inline-end: $spacing-07; - } - } - } - - .#{$prefix}--content-block { - padding-block: $spacing-07 0; - - @include breakpoint(lg) { - padding-block-start: $spacing-10; - } - } - - .#{$prefix}--content-block__heading, - .#{$prefix}--content-block__copy { - inline-size: 90%; - max-inline-size: to-rem(640px); - - @include breakpoint(sm) { - inline-size: 100%; - } - } - - .#{$prefix}--content-block__heading { - @include type-style('fluid-heading-05', true); - } - - .#{$prefix}--content-block__copy { - p { - margin-block-end: 0; - @include type-style('fluid-heading-03', true); - } - } - - .#{$prefix}--content-block__cta-col { - margin-block-start: 0; - } - .#{$prefix}--helper-wrapper { .#{$prefix}--content-item-wrapper { @include make-row; - - .#{$prefix}--content-item { - position: relative; - inline-size: 100%; - margin-block-end: 0; - padding-block-end: $spacing-05; - - @include make-col-ready; - - @include breakpoint(md) { - @include make-col(4, 8); - } - - &:last-of-type { - margin-block-start: $spacing-05; - - @include breakpoint(md) { - margin-block-start: $spacing-07; - } - } - } - - .#{$prefix}--content-item__heading { - inline-size: 100%; - - @include type-style('heading-02', true); - - @include breakpoint(md) { - inline-size: 90%; - } - } - - .#{$prefix}--content-item__copy { - inline-size: 100%; - - @include breakpoint(md) { - inline-size: 90%; - } - - p { - inline-size: 100%; - margin-block-end: $spacing-05; - - @include type-style('body-02', true); - } - } } } - - &.#{$prefix}--cta-block__has-items { - padding-block-end: $spacing-09; - - @include breakpoint(lg) { - padding-block-end: carbon--mini-units(10); - } - - .#{$prefix}--cta-block__cta { - padding-block-end: $spacing-07; - - @include breakpoint(md) { - padding-block-end: $spacing-10; - } - - @include breakpoint(lg) { - padding-block-end: $spacing-12; - } - } - - .#{$prefix}--content-block { - padding-block-end: 0; - } - } - } - - .#{$prefix}--cta-block--g10 { - @include theme($g10, feature-flag-enabled('enable-css-custom-properties')); - - @include themed-items; - } - - .#{$prefix}--cta-block--g90 { - @include theme($g90, feature-flag-enabled('enable-css-custom-properties')); - - @include themed-items; - } - - .#{$prefix}--cta-block--g100 { - @include theme($g100, feature-flag-enabled('enable-css-custom-properties')); - - @include themed-items; } } diff --git a/packages/styles/scss/components/cta-section/_cta-section.scss b/packages/styles/scss/components/cta-section/_cta-section.scss index 28b1f671e02..ac51b43f1b0 100644 --- a/packages/styles/scss/components/cta-section/_cta-section.scss +++ b/packages/styles/scss/components/cta-section/_cta-section.scss @@ -20,157 +20,14 @@ @mixin themed-items { background: $background; color: $text-primary; - - .#{$prefix}--content-item__heading { - color: $text-primary; - } - - .#{$prefix}--content-item__copy { - p { - color: $text-primary; - } - } - - .#{$prefix}--content-item__cta { - color: $link-primary; - } } @mixin cta-section { - :host(#{$c4d-prefix}-cta-section), - .#{$prefix}--cta-section { - .#{$prefix}--cta-section__cta { - padding-block-end: $spacing-10; - - @include breakpoint(md) { - padding-block-end: $spacing-12; - } - - @include breakpoint(lg) { - padding-block-end: $spacing-13; - } - - .#{$prefix}--buttongroup { - @include breakpoint(md) { - flex-direction: row; - } - } - - .#{$prefix}--buttongroup-item { - @include breakpoint(md) { - padding-inline-end: $spacing-05; - } - } - } - - .#{$prefix}--content-block { - padding-block: $spacing-07 0; - - @include breakpoint(lg) { - padding-block-start: $spacing-10; - } - } - - .#{$prefix}--content-block__heading, - .#{$prefix}--content-block__copy { - inline-size: 90%; - max-inline-size: 640px; - - @include breakpoint(sm) { - inline-size: 100%; - } - } - - .#{$prefix}--content-block__heading { - @include type-style('fluid-heading-05', true); - } - - .#{$prefix}--content-block__copy { - p { - margin-block-end: 0; - @include type-style('fluid-heading-03', true); - } - } - - .#{$prefix}--content-block__cta-col { - margin-block-start: 0; - } - + :host(#{$c4d-prefix}-cta-section) { .#{$prefix}--helper-wrapper { .#{$prefix}--content-item-wrapper { border-block-start: 1px solid $layer-accent-01; - @include make-row; - - .#{$prefix}--content-item { - position: relative; - inline-size: 100%; - margin-block-end: 0; - padding-block-end: $spacing-05; - - @include make-col-ready; - - @include breakpoint(md) { - @include make-col(4, 8); - } - - &:last-of-type { - margin-block-start: $spacing-05; - - @include breakpoint(md) { - margin-block-start: $spacing-07; - } - } - } - - .#{$prefix}--content-item__heading { - inline-size: 100%; - - @include type-style('heading-02', true); - - @include breakpoint(md) { - inline-size: 90%; - } - } - - .#{$prefix}--content-item__copy { - inline-size: 100%; - - @include breakpoint(md) { - inline-size: 90%; - } - - p { - inline-size: 100%; - margin-block-end: $spacing-05; - - @include type-style('body-02', true); - } - } - } - } - - &.#{$prefix}--cta-section__has-items { - padding-block-end: $spacing-09; - - @include breakpoint(lg) { - padding-block-end: carbon--mini-units(10); - } - - .#{$prefix}--cta-section__cta { - padding-block-end: $spacing-07; - - @include breakpoint(md) { - padding-block-end: $spacing-10; - } - - @include breakpoint(lg) { - padding-block-end: $spacing-12; - } - } - - .#{$prefix}--content-block { - padding-block-end: 0; } } @@ -178,19 +35,4 @@ padding-block-end: $spacing-10; } } - - .#{$prefix}--cta-section--g10 { - @include theme($g10, true); - @include themed-items; - } - - .#{$prefix}--cta-section--g90 { - @include theme($g90, true); - @include themed-items; - } - - .#{$prefix}--cta-section--g100 { - @include theme($g100, true); - @include themed-items; - } } diff --git a/packages/styles/scss/components/dotcom-shell/_dotcom-shell.scss b/packages/styles/scss/components/dotcom-shell/_dotcom-shell.scss index d8acf21b4d6..839f2e816a3 100644 --- a/packages/styles/scss/components/dotcom-shell/_dotcom-shell.scss +++ b/packages/styles/scss/components/dotcom-shell/_dotcom-shell.scss @@ -12,8 +12,7 @@ @use '../masthead'; @mixin dotcom-shell { - :host(#{$c4d-prefix}-dotcom-shell), - .#{$prefix}--dotcom-shell { + :host(#{$c4d-prefix}-dotcom-shell) { display: flex; flex-direction: column; inline-size: 100%; diff --git a/packages/styles/scss/components/expressive-modal/_expressive-modal.scss b/packages/styles/scss/components/expressive-modal/_expressive-modal.scss index 8e70caa0624..9d37fa3c3b8 100644 --- a/packages/styles/scss/components/expressive-modal/_expressive-modal.scss +++ b/packages/styles/scss/components/expressive-modal/_expressive-modal.scss @@ -75,11 +75,6 @@ } } - :host(#{$c4d-prefix}-expressive-modal-footer) .#{$prefix}--modal-footer { - justify-content: flex-start; - block-size: $spacing-09; - } - :host(#{$c4d-prefix}-expressive-modal-close-button) { @extend .#{$prefix}--modal-close-button !optional; @@ -106,8 +101,7 @@ @include type-style('body-02'); } - :host(#{$c4d-prefix}-expressive-modal)[expressive-size='full-width'], - .#{$prefix}--modal--expressive--fullwidth { + :host(#{$c4d-prefix}-expressive-modal)[expressive-size='full-width'] { @include breakpoint(md) { .#{$prefix}--modal-container { block-size: calc(100% - #{$spacing-07}); @@ -135,8 +129,7 @@ :host(#{$c4d-prefix}-expressive-modal[size='full-width']) ::slotted(#{$c4d-prefix}-expressive-modal-body), :host(#{$c4d-prefix}-expressive-modal[size='full-width']) - ::slotted(#{$c4d-prefix}-lightbox-media-viewer-body), - .#{$prefix}--modal--expressive--fullwidth .#{$prefix}--modal-content { + ::slotted(#{$c4d-prefix}-lightbox-media-viewer-body) { block-size: auto; min-block-size: to-rem(500px); padding-inline-end: 0; diff --git a/packages/styles/scss/components/feature-card/_feature-card.scss b/packages/styles/scss/components/feature-card/_feature-card.scss index dc652a6ad9e..52ec97975b5 100644 --- a/packages/styles/scss/components/feature-card/_feature-card.scss +++ b/packages/styles/scss/components/feature-card/_feature-card.scss @@ -42,7 +42,6 @@ $feature-flags: ( flex-direction: row; } - .#{$prefix}--card__heading, ::slotted(#{$c4d-prefix}-card-heading) { margin-block-end: $spacing-07; } @@ -71,9 +70,7 @@ $feature-flags: ( @mixin feature-card { // all feature cards :host(#{$c4d-prefix}-feature-card), - :host(#{$c4d-prefix}-feature-cta), - .#{$prefix}--feature-card-large, - .#{$prefix}--feature-card { + :host(#{$c4d-prefix}-feature-cta) { position: relative; // breaks on Firefox with `rem` function border-width: 1px; @@ -83,8 +80,7 @@ $feature-flags: ( &:hover { ::slotted([slot='image']), - #{$c4d-prefix}-image, - .#{$prefix}--image { + #{$c4d-prefix}-image { &::before { opacity: 0.08; } @@ -105,8 +101,7 @@ $feature-flags: ( } ::slotted([slot='image']), - #{$c4d-prefix}-image, - .#{$prefix}--image { + #{$c4d-prefix}-image { block-size: aspect-ratio(2, 1); inline-size: 100%; @media screen and (prefers-reduced-motion: reduce) { @@ -173,14 +168,6 @@ $feature-flags: ( block-size: 100%; } - #{$prefix}--card__heading { - padding: carbon--mini-units(2); - margin: 0; - inline-size: 100%; - padding-block-end: $spacing-07; - padding-inline-end: 10%; - } - .#{$prefix}--card__footer { margin-block-start: carbon--mini-units(-4); padding-block-start: 0; @@ -202,10 +189,6 @@ $feature-flags: ( margin: 0; } - .#{$prefix}--card__heading { - margin-block-end: $spacing-07; - } - .#{$prefix}--card__wrapper { block-size: aspect-ratio(2, 1); inline-size: 100%; @@ -224,8 +207,7 @@ $feature-flags: ( // image ::slotted([slot='image']), - #{$c4d-prefix}-image, - .#{$prefix}--image { + #{$c4d-prefix}-image { z-index: 0; @include breakpoint(md) { @@ -319,8 +301,7 @@ $feature-flags: ( } ::slotted([slot='image']), - #{$c4d-prefix}-image, - .#{$prefix}--image { + #{$c4d-prefix}-image { z-index: 0; @include breakpoint(md) { @@ -333,10 +314,7 @@ $feature-flags: ( block-size: 100%; } } - - .#{$prefix}--image { - overflow-y: hidden; - } + } .#{$prefix}--card__wrapper { @@ -351,8 +329,6 @@ $feature-flags: ( } } - .#{$prefix}--card__eyebrow, - .#{$prefix}--card__heading, .#{$prefix}--card__copy, ::slotted(#{$c4d-prefix}-card-eyebrow), ::slotted(#{$c4d-prefix}-card-heading) { @@ -376,12 +352,6 @@ $feature-flags: ( } } - .#{$prefix}--card__eyebrow, - ::slotted(#{$c4d-prefix}-card-eyebrow) { - margin: 0 0 $spacing-03 0; - } - - .#{$prefix}--card__heading, ::slotted(#{$c4d-prefix}-card-heading) { margin-block-end: $spacing-07; @@ -431,38 +401,12 @@ $feature-flags: ( flex-direction: row-reverse; } } - - // special breakpoint for no copy present - &.#{$prefix}--feature-card-large_no-copy-text { - @include breakpoint($fcb-large-custom-bp-nocopy) { - padding-block-start: aspect-ratio(2, 1); - } - - .#{$prefix}--card { - @include breakpoint($fcb-large-custom-bp-nocopy) { - position: absolute; - flex-direction: row; - inset: 0; - - &__wrapper, - .#{$prefix}--image { - block-size: 100%; - inline-size: 50%; - } - } - } - } } :host(#{$c4d-prefix}-feature-card-footer) .#{$c4d-prefix}-ce--card__footer - ::slotted(svg[slot='icon']), - .#{$prefix}--feature-card-large - .#{$prefix}--feature-card-large__card.#{$prefix}--tile - .#{$prefix}--card__cta, - .#{$prefix}--feature-card-large - .#{$prefix}--feature-card-large__card.#{$prefix}--tile - .#{$prefix}--card__cta:visited { + ::slotted(svg[slot='icon']) { + margin-top: auto; float: none; margin-block-start: auto; @@ -489,7 +433,6 @@ $feature-flags: ( :host(#{$c4d-prefix}-feature-cta)[color-scheme='inverse'] { border-color: $border-inverse; - .#{$prefix}--card__heading, ::slotted(#{$c4d-prefix}-card-heading) { color: $icon-inverse; } @@ -503,8 +446,7 @@ $feature-flags: ( } ::slotted([slot='image']), - #{$c4d-prefix}-image, - .#{$prefix}--image { + #{$c4d-prefix}-image { &::before { background-color: $icon-inverse; } @@ -518,10 +460,7 @@ $feature-flags: ( :host( #{$c4d-prefix}-feature-cta:not([size='large']) )[color-scheme='inverse'] { - .#{$prefix}--card__heading { - color: $icon-inverse; - } - + .#{$prefix}--card__wrapper { background-color: $background-inverse; } @@ -542,19 +481,15 @@ $feature-flags: ( .#{$prefix}--card__wrapper { background-color: $background-inverse; - .#{$prefix}--card__eyebrow, - .#{$prefix}--card__heading, .#{$prefix}--card__copy, ::slotted(#{$c4d-prefix}-card-eyebrow), ::slotted(#{$c4d-prefix}-card-heading) { color: $icon-inverse; } - .#{$prefix}--card__eyebrow, ::slotted(#{$c4d-prefix}-card-eyebrow) { color: $icon-inverse; } - .#{$prefix}--card__heading, ::slotted(#{$c4d-prefix}-card-heading) { color: $icon-inverse; } diff --git a/packages/styles/scss/components/footer/_footer-logo.scss b/packages/styles/scss/components/footer/_footer-logo.scss index 302f31339d2..90f4372d52f 100644 --- a/packages/styles/scss/components/footer/_footer-logo.scss +++ b/packages/styles/scss/components/footer/_footer-logo.scss @@ -22,8 +22,7 @@ /// @group footer @mixin footer-logo { - :host(#{$c4d-prefix}-footer-logo), - .#{$prefix}--footer-logo { + :host(#{$c4d-prefix}-footer-logo) { @include theme($g100, feature-flag-enabled('enable-css-custom-properties')); &:focus-visible { diff --git a/packages/styles/scss/components/footer/_footer-nav-group.scss b/packages/styles/scss/components/footer/_footer-nav-group.scss index 8ef9aae98b6..12ec7bd67d7 100644 --- a/packages/styles/scss/components/footer/_footer-nav-group.scss +++ b/packages/styles/scss/components/footer/_footer-nav-group.scss @@ -19,9 +19,7 @@ /// @group footer @mixin footer-nav-group { - :host(#{$c4d-prefix}-footer-nav-group), - .#{$prefix}--footer-nav-group, - .#{$prefix}--footer-nav-group.#{$prefix}--accordion__item { + :host(#{$c4d-prefix}-footer-nav-group) { @include theme($g100, feature-flag-enabled('enable-css-custom-properties')); display: block; @@ -47,10 +45,6 @@ } } - .#{$prefix}--accordion__arrow { - margin: 2px $spacing-05 0 0; - } - @include breakpoint(md) { @include make-col-ready; @@ -59,14 +53,6 @@ padding-inline-start: 0; - &.#{$prefix}--accordion__item { - border-block-start: 0 transparent; - } - - .#{$prefix}--accordion__heading { - display: none; - } - .#{$prefix}--accordion__content { display: block; block-size: auto; diff --git a/packages/styles/scss/components/footer/_footer-nav.scss b/packages/styles/scss/components/footer/_footer-nav.scss index 5d19c02c1b8..fcc80ba880f 100644 --- a/packages/styles/scss/components/footer/_footer-nav.scss +++ b/packages/styles/scss/components/footer/_footer-nav.scss @@ -39,13 +39,6 @@ @include make-col(12, 16); } - .#{$prefix}--accordion__heading { - display: flex; - align-items: center; - padding: 0; - min-block-size: $spacing-09; - } - ::slotted([slot='locale-button']), ::slotted([slot='language-selector']) { display: inline-block; diff --git a/packages/styles/scss/components/footer/_footer.scss b/packages/styles/scss/components/footer/_footer.scss index 6067cc52356..70ba55d39b4 100644 --- a/packages/styles/scss/components/footer/_footer.scss +++ b/packages/styles/scss/components/footer/_footer.scss @@ -38,15 +38,6 @@ @include theme($g100, feature-flag-enabled('enable-css-custom-properties')); - .#{$prefix}--modal-content { - .#{$prefix}--link { - &, - &:visited { - color: $icon-inverse; - } - } - } - @include breakpoint-down(md) { ::slotted([slot='brand']) { margin-block-end: $spacing-09; @@ -93,18 +84,6 @@ } } - .#{$prefix}--language-selector__container { - padding: 0; - } - - .#{$prefix}--locale-btn__container { - flex-basis: auto; - - button { - border: none; - } - } - .#{$prefix}--legal-nav { border-block-start: 0; } @@ -144,18 +123,6 @@ :host(#{$c4d-prefix}-legal-nav) { @include theme($g100, feature-flag-enabled('enable-css-custom-properties')); - - .#{$prefix}--legal-nav__list { - .#{$prefix}--legal-nav__list-item { - .#{$prefix}--link { - color: $text-secondary; - - &:hover { - color: $text-primary; - } - } - } - } } .#{$prefix}--footer__main { @@ -168,8 +135,7 @@ flex-direction: column; - :host(#{$c4d-prefix}-footer[size='short']) &, - .#{$prefix}--footer--short & { + :host(#{$c4d-prefix}-footer[size='short']) & { flex-direction: row; } @@ -234,15 +200,6 @@ padding-block-start: 0; } - :host(#{$c4d-prefix}-footer-nav-group) { - .#{$prefix}--accordion__heading { - align-items: center; - padding: 0; - border-block-start: 1px solid $border-subtle-01; - min-block-size: $spacing-09; - } - } - :host(#{$c4d-prefix}-footer-nav-group:last-of-type) { @include breakpoint-down(md) { border-block-end: 1px solid $border-subtle-01; diff --git a/packages/styles/scss/components/footer/_legal-nav.scss b/packages/styles/scss/components/footer/_legal-nav.scss index aa288f338f8..ea6d562914e 100644 --- a/packages/styles/scss/components/footer/_legal-nav.scss +++ b/packages/styles/scss/components/footer/_legal-nav.scss @@ -96,110 +96,12 @@ @include breakpoint(lg) { border-block-start: none; } - - .#{$prefix}--legal-nav__list-item { - display: flex; - align-items: center; - block-size: $spacing-09; - margin-inline-end: 0; - padding-block-start: 0; - - @include breakpoint(md) { - margin-inline-end: $spacing-07; - } - - a { - display: flex; - align-items: center; - inline-size: 100%; - } - } } - - .#{$prefix}--locale-btn__container, - .#{$prefix}--language-selector__container { - margin: 0; - - @include breakpoint(md) { - align-self: flex-end; - border-inline-start: 1px solid $layer-accent-01; - inline-size: 50%; - } - - @include breakpoint(lg) { - margin: 0; - } - - .#{$prefix}--btn--secondary, - .#{$prefix}--list-box, - .#{$prefix}--select-input { - background-color: $background; - max-inline-size: 100%; - - &:hover { - background-color: $background-hover; - } - - &:active { - background-color: $layer-active-01; - } - } - - .#{$prefix}--select { - max-inline-size: 100%; - } - - .#{$prefix}--text-input, - .#{$prefix}--list-box, - .#{$prefix}--select-input { - border-block-end: none; - } - } - } - } - - .#{$prefix}--legal-nav__holder { - margin-inline-start: 0; - padding-block-start: 0; - - @include breakpoint(md) { - column-count: 2; - padding-block-start: $spacing-03; - } - - @include breakpoint(lg) { - column-count: 3; - } - } - - .#{$prefix}--adjunct-links__holder { - padding: 0 $spacing-09 0 $spacing-05; - inline-size: 100%; - margin-block-start: $spacing-09; - margin-inline-start: 0; - - @include breakpoint(md) { - inline-size: 50%; - } - - @include breakpoint(lg) { - inline-size: 25%; - margin-inline-start: 25%; - } - - .#{$prefix}--legal-nav__list-item { - margin-inline-end: 0; - padding-block-start: 0; - } - - .#{$prefix}--legal-nav__list-item:not(:first-of-type) { - padding-block-start: $spacing-03; } } :host(#{$c4d-prefix}-legal-nav-item), - :host(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder) div, - .#{$prefix}--legal-nav__list-item { + :host(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder) div { padding: $spacing-03 0 0 0; margin-inline-end: $spacing-07; @include type-style('body-01'); diff --git a/packages/styles/scss/components/footer/_locale-button.scss b/packages/styles/scss/components/footer/_locale-button.scss index 917e3abfcc3..a317ace4b0c 100644 --- a/packages/styles/scss/components/footer/_locale-button.scss +++ b/packages/styles/scss/components/footer/_locale-button.scss @@ -21,8 +21,7 @@ /// @group footer @mixin locale-button { - :host(#{$c4d-prefix}-locale-button), - .#{$prefix}--locale-btn__container { + :host(#{$c4d-prefix}-locale-button) { @include theme($g100, feature-flag-enabled('enable-css-custom-properties')); @include button; @include make-col-ready; @@ -63,8 +62,7 @@ } :host(#{$c4d-prefix}-footer[size='short']) - ::slotted(#{$c4d-prefix}-locale-button), - .#{$prefix}--footer--short .#{$prefix}--locale-btn__container { + ::slotted(#{$c4d-prefix}-locale-button) { margin-block-start: $spacing-09; @include breakpoint(md) { @@ -80,17 +78,4 @@ @include make-col-offset(10, 16); } } - - .#{$prefix}--footer--micro { - .#{$prefix}--locale-btn__container { - padding: 0; - .#{$prefix}--btn--tertiary { - &:hover, - &:focus { - background-color: $background-hover; - color: $text-primary; - } - } - } - } } diff --git a/packages/styles/scss/components/in-page-banner/_in-page-banner.scss b/packages/styles/scss/components/in-page-banner/_in-page-banner.scss index 3e898ac3d12..beccf8295a0 100644 --- a/packages/styles/scss/components/in-page-banner/_in-page-banner.scss +++ b/packages/styles/scss/components/in-page-banner/_in-page-banner.scss @@ -24,8 +24,7 @@ } ::slotted(#{$c4d-prefix}-content-group-heading), - .#{$prefix}--content-layout ::slotted([slot='heading']), - .#{$prefix}--content-group__title { + .#{$prefix}--content-layout ::slotted([slot='heading']) { margin-block-end: 0; @include breakpoint(md) { @@ -38,8 +37,7 @@ } ::slotted(#{$c4d-prefix}-link-list), - .#{$prefix}--content-layout ::slotted([slot='complementary']), - .#{$prefix}--link-list__list { + .#{$prefix}--content-layout ::slotted([slot='complementary']) { position: relative; grid-area: auto; margin-block: $spacing-07 0; diff --git a/packages/styles/scss/components/leadspace-block/_leadspace-block.scss b/packages/styles/scss/components/leadspace-block/_leadspace-block.scss index 2d90540752e..26db7ed0f6b 100644 --- a/packages/styles/scss/components/leadspace-block/_leadspace-block.scss +++ b/packages/styles/scss/components/leadspace-block/_leadspace-block.scss @@ -78,8 +78,7 @@ } :host(#{$c4d-prefix}-leadspace-block-content) - ::slotted(#{$c4d-prefix}-link-list), - .#{$prefix}--leadspace-block .#{$prefix}--link-list { + ::slotted(#{$c4d-prefix}-link-list) { display: block; margin-inline-end: 0; max-inline-size: none; @@ -90,8 +89,7 @@ } } - :host(#{$c4d-prefix}-leadspace-block-media), - .#{$prefix}--leadspace-block .#{$prefix}--leadspace-block__media { + :host(#{$c4d-prefix}-leadspace-block-media) { display: block; max-inline-size: carbon--mini-units(80); padding-block-end: $spacing-07; diff --git a/packages/styles/scss/components/lightbox-media-viewer/_lightbox-media-viewer.scss b/packages/styles/scss/components/lightbox-media-viewer/_lightbox-media-viewer.scss index 56d638d6675..d3cdd3e8c5e 100644 --- a/packages/styles/scss/components/lightbox-media-viewer/_lightbox-media-viewer.scss +++ b/packages/styles/scss/components/lightbox-media-viewer/_lightbox-media-viewer.scss @@ -63,18 +63,6 @@ padding-block-start: Min(calc(100vh - #{$spacing-13}), 56.25%); } } - - @include breakpoint(md) { - .#{$prefix}--model-container { - padding-block: $spacing-10 0; - } - } - - @include breakpoint(lg) { - .#{$prefix}--model-container { - padding-block: $spacing-09 $spacing-05; - } - } } :host(#{$c4d-prefix}-lightbox-media-viewer-body), diff --git a/packages/styles/scss/components/link-with-icon/_link-with-icon.scss b/packages/styles/scss/components/link-with-icon/_link-with-icon.scss index 43efdb358c8..f5435132bc1 100644 --- a/packages/styles/scss/components/link-with-icon/_link-with-icon.scss +++ b/packages/styles/scss/components/link-with-icon/_link-with-icon.scss @@ -48,7 +48,6 @@ .#{$prefix}--link--disabled { color: $text-disabled; } - &.#{$prefix}--link-with-icon__icon-left, .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon.#{$prefix}--link-with-icon__icon-left { display: flex; @@ -65,7 +64,6 @@ } } - .#{$prefix}--link-with-icon__container, :host(#{$c4d-prefix}-callout-link-with-icon), :host(#{$c4d-prefix}-card-cta-footer), :host(#{$c4d-prefix}-card-footer), @@ -130,8 +128,7 @@ } } - :host(#{$c4d-prefix}-link-with-icon), - .#{$prefix}--link-with-icon__container { + :host(#{$c4d-prefix}-link-with-icon) { display: table; } } diff --git a/packages/styles/scss/components/logo-grid/_logo-grid.scss b/packages/styles/scss/components/logo-grid/_logo-grid.scss index e0a79a24f1f..7ec75708ce0 100644 --- a/packages/styles/scss/components/logo-grid/_logo-grid.scss +++ b/packages/styles/scss/components/logo-grid/_logo-grid.scss @@ -20,7 +20,6 @@ @use '../../internal/content-block'; @mixin logo-grid { - .#{$prefix}--logo-grid, :host(#{$c4d-prefix}-logo-grid) { .#{$prefix}--content-block { background: $icon-inverse; @@ -38,10 +37,6 @@ } } - .#{$prefix}--card__wrapper { - inline-size: 100%; - } - .#{$prefix}--content-block__cta { margin-block-start: $spacing-09; @@ -54,32 +49,6 @@ @include make-col(1, 3); } } - - .#{$prefix}--card__CTA { - margin-inline-start: 0; - max-inline-size: 100%; - } - - .#{$prefix}--image { - position: relative; - display: block; - background: $icon-inverse; - overflow-y: hidden; - padding-block: aspect-ratio(288px, 216px); - - &:active img { - border: 1px $layer-accent-01 solid; - } - - img { - position: absolute; - display: block; - block-size: auto; - inline-size: 100%; - inset-block-start: 0; - object-fit: cover; - } - } } :host(#{$c4d-prefix}-logo-grid) { @@ -88,37 +57,13 @@ } } - .#{$prefix}--logo-grid__no-border { - .#{$prefix}--logo-grid__container { - border-block-end: none; - } - } - - .#{$prefix}--logo-grid__link { - display: block; - - &:active .#{$prefix}--logo-grid__logo { - box-shadow: inset 0 0 0 1px $layer-accent-01; - } - } - .#{$prefix}--logo-grid__row { display: grid; grid-template-columns: repeat(2, 1fr); margin-inline: calc(-1 * math.div($grid-gutter, 2)); - @include breakpoint(md) { - &.#{$prefix}--logo-grid__4-columns { - grid-template-columns: repeat(4, 1fr); - } - } - @include breakpoint(lg) { grid-template-columns: repeat(3, 1fr); - - &.#{$prefix}--logo-grid__4-columns { - grid-template-columns: repeat(4, 1fr); - } } } @@ -142,18 +87,10 @@ } } - .#{$prefix}--logo-grid__heading { - @include type-style('fluid-heading-05', true); - - inline-size: 90%; - margin-block: $spacing-07; - } - .#{$prefix}--content-layout__body { display: block; } - .#{$prefix}--logo-grid__wrapper, .#{$prefix}--content-layout--logo-grid { inline-size: 100%; margin-block-end: $spacing-13; diff --git a/packages/styles/scss/components/quote/_quote.scss b/packages/styles/scss/components/quote/_quote.scss index 3095e98cefa..a0941ce072c 100644 --- a/packages/styles/scss/components/quote/_quote.scss +++ b/packages/styles/scss/components/quote/_quote.scss @@ -22,11 +22,6 @@ background: $background; padding-block-end: $spacing-10; @include hang; - - .#{$prefix}--link-with-icon__container { - max-inline-size: 80%; - padding-inline-start: $spacing-05; - } } .#{$prefix}--quote__container { @@ -71,24 +66,6 @@ inset-inline-start: 0.6rem; } - .#{$prefix}--quote__mark-corner-bracket { - @include breakpoint(sm) { - inset-inline-start: 0.6rem; - } - - @include breakpoint(md) { - inset-inline-start: calc(-1 * #{$spacing-03}); - } - - @include breakpoint(lg) { - inset-inline-start: calc(-1 * #{$spacing-05}); - } - - @include breakpoint(max) { - inset-inline-start: calc(-1 * #{$spacing-07}); - } - } - .#{$prefix}--quote__source { @include make-col-ready; @@ -137,35 +114,10 @@ } } - .#{$prefix}--callout__container, :host(#{$c4d-prefix}-callout) { @include make-row; } - .#{$prefix}--callout__column { - @include make-col-ready; - } - - .#{$prefix}--callout__content { - @include breakpoint(sm) { - padding-block-start: $spacing-07; - } - - @include breakpoint(md) { - @include make-col-offset(1, 8); - @include make-col(6, 8); - - padding-block-start: $spacing-10; - padding-inline: $spacing-02; - } - - @include breakpoint(lg) { - padding-inline: $spacing-01; - @include make-col-offset(1, 12); - @include make-col(10, 12); - } - } - :host(#{$c4d-prefix}-quote) #{$c4d-prefix}-hr { margin: $spacing-05; @include breakpoint(md) { diff --git a/packages/styles/scss/components/tableofcontents/_table-of-contents.scss b/packages/styles/scss/components/tableofcontents/_table-of-contents.scss index 92c0fd0d70f..00f6d305b01 100644 --- a/packages/styles/scss/components/tableofcontents/_table-of-contents.scss +++ b/packages/styles/scss/components/tableofcontents/_table-of-contents.scss @@ -360,18 +360,6 @@ $hover-transition-timing: 95ms; } } - .#{$prefix}--tableofcontents--g100 { - @include theme($g100, feature-flag-enabled('enable-css-custom-properties')); - - @include themed-items; - } - - .#{$prefix}--tableofcontents--g10 { - @include theme($g10, feature-flag-enabled('enable-css-custom-properties')); - - @include themed-items; - } - .#{$prefix}--toc__print-styles { display: none; }