diff --git a/releases.yml b/releases.yml index 46160a486..39d3de082 100644 --- a/releases.yml +++ b/releases.yml @@ -20,6 +20,10 @@ url: /docs/patterns/hero#layouts status: New notes: We've added new layout options and detailed documentation to the hero pattern. + - component: Logo Section / Dense + url: /docs/patterns/logo-section#dense + status: Deprecated + notes: We've deprecated the dense version of the logo section component. - version: 4.14.0 features: - component: Links / Anchor headings diff --git a/scss/_patterns_logo-section.scss b/scss/_patterns_logo-section.scss index d49a38ac3..cdc820101 100644 --- a/scss/_patterns_logo-section.scss +++ b/scss/_patterns_logo-section.scss @@ -4,17 +4,16 @@ @extend %small-caps-text; } - $logo-section-item-size: 8rem; // height of the logos on large screens - $logo-section-item-size-medium: 6rem; // height of the logos on medium screens + $logo-section-item-size: 6.5rem; // height of the logos on large screens $logo-section-item-size-small: 4rem; // height of the logos on small screens $logo-section-offset: 1rem; // offset by which rows are pulled closer together - $logo-section-offset-medium: 0.75rem; // height of the logos on medium screens $logo-section-offset-small: 0.5rem; // height of the logos on small screens - $logo-section-item-gap: 3rem; - $logo-section-item-gap-dense: calc(0.5 * $logo-section-item-gap); + $logo-section-item-gap: 2rem; + // TODO: Remove .p-logo-section--dense since it's been deprecated in favor + // of just using .p-logo-section instead .p-logo-section, .p-logo-section--dense { .p-logo-section__item { @@ -25,11 +24,6 @@ margin-top: calc(-1 * $logo-section-offset-small); // pull the previous row of logos down @media (min-width: $breakpoint-small) { - margin-bottom: calc(-1 * $logo-section-offset-medium); - margin-top: calc(-1 * $logo-section-offset-medium); - } - - @media (min-width: $breakpoint-large) { margin-bottom: calc(-1 * $logo-section-offset); margin-top: calc(-1 * $logo-section-offset); } @@ -42,10 +36,6 @@ width: auto; @media (min-width: $breakpoint-small) { - height: $logo-section-item-size-medium; - } - - @media (min-width: $breakpoint-large) { height: $logo-section-item-size; } } @@ -58,36 +48,12 @@ padding-top: $logo-section-offset-small; @media (min-width: $breakpoint-small) { - padding-bottom: $logo-section-offset-medium; - padding-top: $logo-section-offset-medium; - } - - @media (min-width: $breakpoint-large) { padding-bottom: $logo-section-offset; padding-top: $logo-section-offset; } } } - .p-logo-section--dense { - .p-logo-section__item { - display: inline-block; - margin: 0; - margin-bottom: calc(-1 * $logo-section-offset-small); // pull the next row of logos up - margin-right: $logo-section-item-gap-dense; - margin-top: calc(-1 * $logo-section-offset-small); // pull the previous row of logos down - } - - .p-logo-section__logo { - height: $logo-section-item-size-small; - } - - .p-logo-section__items { - padding-bottom: $logo-section-offset-small; - padding-top: $logo-section-offset-small; - } - } - // fallback for old logo sections that may have logos not properly aligned by design team .p-logo-section.has-misaligned-images, .p-logo-section--dense.has-misaligned-images { @@ -98,10 +64,6 @@ width: $logo-section-item-size-small; @media (min-width: $breakpoint-small) { - width: $logo-section-item-size-medium; - } - - @media (min-width: $breakpoint-large) { width: $logo-section-item-size; } } diff --git a/scss/standalone/patterns_logo-section.scss b/scss/standalone/patterns_logo-section.scss index 1bcf1b4d8..a43c70366 100644 --- a/scss/standalone/patterns_logo-section.scss +++ b/scss/standalone/patterns_logo-section.scss @@ -6,5 +6,8 @@ // Used to keep the background dark on the dark logo section @include vf-p-strip; +// Needed for .u-align--center +@include vf-u-align; + // Needed for .u-fixed-width @include vf-u-layout; diff --git a/templates/docs/patterns/logo-section/index.md b/templates/docs/patterns/logo-section/index.md index 8449040dd..212aeac34 100644 --- a/templates/docs/patterns/logo-section/index.md +++ b/templates/docs/patterns/logo-section/index.md @@ -25,6 +25,13 @@ View example of the logo section pattern inside a six column parent container ## Dense +
+
+

Deprecated

+

The dense variant is deprecated. Use the default .p-logo-section instead.

+
+
+ If you need to show more smaller logos you can use dense version of logo section with `p-logo-section--dense`.