Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adjust spacing and size of logo section and deprecate the dense variant #5252

Merged
4 changes: 4 additions & 0 deletions releases.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
46 changes: 4 additions & 42 deletions scss/_patterns_logo-section.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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
pastelcyborg marked this conversation as resolved.
Show resolved Hide resolved
.p-logo-section,
.p-logo-section--dense {
pastelcyborg marked this conversation as resolved.
Show resolved Hide resolved
.p-logo-section__item {
Expand All @@ -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);
}
Expand All @@ -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;
}
}
Expand All @@ -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 {
Expand All @@ -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;
}
}
Expand Down
3 changes: 3 additions & 0 deletions scss/standalone/patterns_logo-section.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
7 changes: 7 additions & 0 deletions templates/docs/patterns/logo-section/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,13 @@ View example of the logo section pattern inside a six column parent container

## Dense

<div class="p-notification--caution">
<div class="p-notification__content">
<h3 class="p-notification__title">Deprecated</h3>
<p class="p-notification__message">The dense variant is deprecated. Use the default <code>.p-logo-section</code> instead.</p>
</div>
</div>

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

<div class="embedded-example"><a href="/docs/examples/patterns/logo-section/logo-section-dense/" class="js-example">
Expand Down
Loading