Skip to content

Commit

Permalink
Merge pull request #1789 from cfpb/ans_dupe_margin
Browse files Browse the repository at this point in the history 
Remove redundant margin | add responsive style code comments
  • Loading branch information
@anselmbradford
anselmbradford authored Oct 24, 2023
2 parents c8711b7 + 116d54a commit 9f95519
Show file tree
Hide file tree
Showing 16 changed files with 55 additions and 5 deletions.
1 change: 1 addition & 0 deletions packages/cfpb-buttons/src/atoms/buttons.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,7 @@
// Full width button on x-small screens
//
&__full-on-xs {
// Mobile size.
.respond-to-max( @bp-xs-max, {
display: block;
width: 100%;
Expand Down
9 changes: 7 additions & 2 deletions packages/cfpb-core/src/base.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ h1,
margin-top: unit((60px / @font-size), em);
}

// Mobile size.
.respond-to-max( @bp-xs-max, {
.heading-2();

Expand Down Expand Up @@ -177,6 +178,7 @@ h2,
margin-top: unit((30px / @font-size), em);
}

// Mobile size.
.respond-to-max( @bp-xs-max, {
.heading-3();

Expand Down Expand Up @@ -218,6 +220,7 @@ h3,
margin-top: unit((30px / @font-size), em);
}

// Mobile size.
.respond-to-max( @bp-xs-max, {
.heading-4();
} );
Expand Down Expand Up @@ -248,6 +251,7 @@ h4,
margin-top: unit((30px / @font-size), em);
}

// Mobile size.
.respond-to-max( @bp-xs-max, {
@h4-font-size-on-xs: @base-font-size-px;

Expand Down Expand Up @@ -315,9 +319,9 @@ h6,
margin-top: 0;
margin-bottom: 15px;

.respond-to-max(@bp-xs-max, {
// Mobile size.
.respond-to-max( @bp-xs-max, {
// Use the same regular weight but reduce the sizes to h4 size
margin-top: 0;
font-size: unit( ( 18px / @base-font-size-px ), em );
} );
}
Expand Down Expand Up @@ -544,6 +548,7 @@ blockquote {
margin-right: unit((15px / @base-font-size-px), em);
margin-left: unit((15px / @base-font-size-px), em);

// Desktop and tablet size.
.respond-to-min( @bp-sm-min, {
margin-right: unit( ( 30px / @base-font-size-px ), em );
margin-left: unit( ( 30px / @base-font-size-px ), em );
Expand Down
2 changes: 2 additions & 0 deletions packages/cfpb-core/src/utilities.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@
//

.u-hide-on-mobile {
// Mobile size.
.respond-to-max( @bp-xs-max, {
display: none;
} );
Expand All @@ -69,6 +70,7 @@
.u-show-on-mobile {
display: none;

// Mobile size.
.respond-to-max( @bp-xs-max, {
display: block;
} );
Expand Down
16 changes: 15 additions & 1 deletion packages/cfpb-layout/src/cfpb-layout.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@
// Used to position __divider modifiers
position: relative;

// Desktop and tablet size.
.respond-to-min( @bp-sm-min, {
.grid_nested-col-group();
} );
Expand Down Expand Up @@ -96,13 +97,15 @@
}

.content-l_col {
// Mobile size.
.respond-to-max( @bp-xs-max, {
& + & {
margin-top: unit( ( @grid_gutter-width / @base-font-size-px ), em );
}
} );
}

// Desktop and tablet size.
.respond-to-min( @bp-sm-min, {
.content-l_col-1 {
.grid_column( 12 );
Expand Down Expand Up @@ -142,20 +145,24 @@
//

.content-l_col__before-divider.content-l_col-1-2 {
// Mobile size.
.respond-to-max( @bp-xs-max, {
.grid_column__top-divider();
} );

// Desktop and tablet size.
.respond-to-min( @bp-sm-min, {
.grid_column__left-divider();
} );
}

.content-l_col__before-divider.content-l_col-1-3 {
// Mobile size.
.respond-to-max( @bp-xs-max, {
.grid_column__top-divider();
} );

// Desktop and tablet size.
.respond-to-min( @bp-sm-min, {
.grid_column__left-divider();
} );
Expand Down Expand Up @@ -229,6 +236,7 @@
padding: unit((@grid_gutter-width / @base-font-size-px), em)
unit((@grid_gutter-width / 2 / @base-font-size-px), em);

// Desktop and tablet size.
.respond-to-min( @bp-sm-min, {
.grid_column( 12 );

Expand Down Expand Up @@ -366,6 +374,7 @@
margin-right: -(@grid_gutter-width / 2);
margin-left: -(@grid_gutter-width / 2);

// Mobile size.
.respond-to-max( @bp-xs-max, {
&.block__border,
&.block__border-right,
Expand All @@ -375,6 +384,7 @@
}
} );

// Desktop and tablet size.
.respond-to-min( @bp-sm-min, {
margin-right: -@grid_gutter-width;
margin-left: -@grid_gutter-width;
Expand All @@ -394,6 +404,7 @@
border-bottom: none;
}

// Mobile size.
.respond-to-max( @bp-xs-max, {
&.block__border,
&.block__border-right,
Expand All @@ -403,6 +414,7 @@
}
} );

// Desktop and tablet size.
.respond-to-min( @bp-sm-min, {
margin-right: -@grid_gutter-width;
margin-left: -@grid_gutter-width;
Expand All @@ -415,6 +427,7 @@
padding-bottom: unit(((@grid_gutter-width * 2) / @base-font-size-px), em);
background: @block__bg;

// Desktop and tablet size.
.respond-to-min( @bp-sm-min, {
padding: unit( ( ( @grid_gutter-width * 1.5 ) / @base-font-size-px ), em )
unit( ( @grid_gutter-width / @base-font-size-px ), em );
Expand All @@ -439,6 +452,7 @@
// Overrides for when .block is also a column
.content-l_col&,
.content-l_col&__sub {
// Desktop and tablet size.
.respond-to-min( @bp-sm-min, {
margin-top: 0;
} );
Expand Down Expand Up @@ -522,7 +536,7 @@
padding-left: @grid_gutter-width / 2;
padding-right: @grid_gutter-width / 2;

// Tablet and above.
// Desktop and tablet size.
.respond-to-min( @bp-sm-min, {
padding-left: @grid_gutter-width;
padding-right: @grid_gutter-width;
Expand Down
11 changes: 11 additions & 0 deletions packages/cfpb-layout/src/molecules/heroes.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
padding-top: @grid_gutter-width;
padding-bottom: @grid_gutter-width;

// Desktop and tablet size.
.respond-to-min( @bp-sm-min, {
grid-template-columns: 7fr 5fr;
padding-right: ( @grid_gutter-width / 2);
Expand All @@ -33,6 +34,7 @@
padding-right: (@grid_gutter-width / 2);
padding-left: (@grid_gutter-width / 2);

// Desktop and tablet size.
.respond-to-min( @bp-sm-min, {
margin: auto;
} );
Expand Down Expand Up @@ -61,6 +63,7 @@
box-sizing: border-box;
overflow: hidden;

// Desktop and tablet size.
.respond-to-min( @bp-sm-min, {
padding-right: ( @grid_gutter-width / 2 );
padding-left: ( @grid_gutter-width / 2 );
Expand All @@ -70,6 +73,7 @@
align-items: center;
} );

// Mobile size.
.respond-to-max( @bp-xs-max, {
margin-top: unit( ( @grid_gutter-width / @base-font-size-px ), em );
} );
Expand Down Expand Up @@ -98,6 +102,7 @@
}

&__bleeding {
// Desktop and tablet size.
.respond-to-min( @bp-sm-min, {

.m-hero_image-wrapper {
Expand Down Expand Up @@ -130,6 +135,7 @@
background-size: cover;
}

// Mobile size.
.respond-to-max( @bp-xs-max, {
.m-hero_wrapper {
// Overwrite the image that is set in the markup because
Expand All @@ -138,6 +144,7 @@
}
} );

// Desktop and tablet size.
.respond-to-min( @bp-sm-min, {
.m-hero_image {
display: none;
Expand All @@ -150,6 +157,7 @@

.u-jumbo-text();

// Desktop and tablet size.
.respond-to-min( @bp-sm-min, {
.m-hero_wrapper {
background-position: 50%;
Expand All @@ -162,6 +170,7 @@
}
} );

// Mobile size.
.respond-to-max( @bp-xs-max, {
.m-hero_wrapper {
// Keep hero image flush with container on mobile
Expand All @@ -175,6 +184,7 @@

.u-jumbo-text();

// Desktop and tablet size.
.respond-to-min( @bp-sm-min, {
.m-hero_wrapper {
grid-template-columns: 1fr 1fr;
Expand Down Expand Up @@ -208,6 +218,7 @@
.lead-paragraph();
}

// Desktop and tablet size.
.respond-to-min( @bp-sm-min, {
.m-hero_subhead {
.heading-3();
Expand Down
1 change: 1 addition & 0 deletions packages/cfpb-layout/src/organisms/card-group.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
grid-column-gap: unit((20px / @base-font-size-px), em);
grid-row-gap: unit((20px / @base-font-size-px), em);

// Mobile size.
.respond-to-max( @bp-xs-max, {
// Make sure cards are stacked at mobile size.
grid-template-columns: 100% !important;
Expand Down
1 change: 1 addition & 0 deletions packages/cfpb-layout/src/organisms/email-signup.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
text-align: inherit;
}

// Mobile size.
.respond-to-max( @bp-xs-max, {
.a-label__heading {
font-size: 1em;
Expand Down
3 changes: 3 additions & 0 deletions packages/cfpb-layout/src/organisms/featured-content-module.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
display: block;
}

// Mobile size.
.respond-to-max( @bp-xs-max, {
&_text {
padding-right: unit( ( @grid_gutter-width / 2 / @base-font-size-px ), em );
Expand All @@ -35,6 +36,7 @@
}
} );

// Desktop and tablet size.
.respond-to-min( @bp-sm-min, {
&_text {
padding-right: @fcm-visual-width + @grid_gutter-width;
Expand Down Expand Up @@ -77,6 +79,7 @@
}

.o-featured-content-module_text {
// Desktop and tablet size.
.respond-to-min( @bp-sm-min, {
padding-left: @fcm-visual-width + @grid_gutter-width;
padding-right: unit( ( @grid_gutter-width / @base-font-size-px ), em );
Expand Down
1 change: 1 addition & 0 deletions packages/cfpb-layout/src/organisms/wells.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
border: 1px solid @gray-40;
background-color: @gray-5;

// Desktop and tablet size.
.respond-to-min( @bp-sm-min, {
padding-left: unit( ( @grid_gutter-width / @base-font-size-px ), em );
padding-right: unit( ( @grid_gutter-width / @base-font-size-px ), em );
Expand Down
3 changes: 2 additions & 1 deletion packages/cfpb-notifications/src/molecules/notification.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,9 @@
margin-top: unit((15px / @base-font-size-px), em);
}

// Make adjustments to the icon, explanation, and links if at non-mobile.
// Desktop and tablet size.
.respond-to-min( @bp-sm-min, {
// Make adjustments to the icon, explanation, and links if at non-mobile.

// Increase the icon size.
.cf-icon-svg {
Expand Down
1 change: 1 addition & 0 deletions packages/cfpb-notifications/src/organisms/banner.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@
}
}

// Desktop and tablet size.
.respond-to-min( @bp-sm-min, {
font-size: 1em;
} );
Expand Down
2 changes: 2 additions & 0 deletions packages/cfpb-pagination/src/molecules/pagination.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,13 +58,15 @@
right: 0;
}

// Mobile size.
.respond-to-max( @bp-xs-max, {
&_btn-prev,
&_btn-next {
margin-bottom: unit( ( 15px / @base-font-size-px ), em );
}
} );

// Desktop and tablet size.
.respond-to-min( @bp-sm-min, {
&_btn-prev,
&_btn-next {
Expand Down
1 change: 1 addition & 0 deletions packages/cfpb-tables/src/cfpb-tables.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
}
}

// Desktop and tablet size.
.respond-to-min( @bp-sm-min, {
.o-table__striped {
.striped-table();
Expand Down
2 changes: 2 additions & 0 deletions packages/cfpb-typography/src/molecules/list.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@

.m-list__links {
.m-list_item {
// Mobile size.
.respond-to-max( @bp-xs-max, {
margin-bottom: 0;

Expand All @@ -59,6 +60,7 @@
.m-list_link {
font-weight: 500;

// Mobile size.
.respond-to-max( @bp-xs-max, {
.u-block-link();
} );
Expand Down
Loading

0 comments on commit 9f95519

Please sign in to comment.