Visitar URL original
Build: Replace SASS division with function polyfill by aduth · Pull Request #4314 · uswds/uswds · GitHub
Skip to content

Build: Replace SASS division with function polyfill #4314

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.

Sign up for GitHub

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

Merged
thisisdano merged 5 commits into from
Dec 13, 2021
Merged

Build: Replace SASS division with function polyfill #4314

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
35e4423
Replace SASS division with function polyfill
aduth Sep 3, 2021
7f7ee98
Simplify spacing-multiple
aduth Sep 20, 2021
214463c
Define divide function before first usage
aduth Sep 20, 2021
dad2a78
Add rounding to divide function
aduth Sep 21, 2021
a4f1043
Rename next-depth to next-digit
aduth Sep 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/stylesheets/components/_alerts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
$alert-slim-icon-size: units(3);
$alert-icon-optical-factor: units($theme-alert-icon-size) / 6;
$alert-icon-optical-factor: divide(units($theme-alert-icon-size), 6);
$alert-icon-optical-padding: units($theme-alert-padding-x) -
$alert-icon-optical-factor;

Expand Down
2 changes: 1 addition & 1 deletion src/stylesheets/components/_banner.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ $banner-icon-close: (
.usa-banner__lock-image {
$lock-h: 64; // unitless height of svg
$lock-w: 52; // unitless width of svg
$lock-aspect: $lock-w / $lock-h;
$lock-aspect: divide($lock-w, $lock-h);
$icon-height: 1.5ex; // height of the lock icon; use ex for resilience

height: $icon-height;
Expand Down
2 changes: 1 addition & 1 deletion src/stylesheets/components/_breadcrumb.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ $breadcrumb-back-icon-aspect: (

// Defines spacing so back icon is optically placed
@mixin exdent-icon($dim: $breadcrumb-back-icon-aspect) {
$aspect: nth($dim, 1) / nth($dim, 2);
$aspect: divide(nth($dim, 1), nth($dim, 2));
$icon-width: $breadcrumb-icon-display-height * $aspect;
padding-left: calc(#{$icon-width} + #{$breadcrumb-icon-spacing});
text-indent: calc((#{$icon-width} + #{$breadcrumb-icon-spacing}) * -1);
Expand Down
8 changes: 4 additions & 4 deletions src/stylesheets/components/_button-groups.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
&:first-child > .usa-button {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
margin-right: -(units($theme-button-stroke-width)) / 2;
margin-right: divide(units($theme-button-stroke-width), -2);
}

&:last-child > .usa-button {
Expand All @@ -83,15 +83,15 @@
width: calc(100% + #{units($theme-button-stroke-width)});

@include at-media("mobile-lg") {
margin-left: -(units($theme-button-stroke-width)) / 2;
margin-left: divide(units($theme-button-stroke-width), -2);
width: auto;
}
}

&:not(:first-child):not(:last-child) > .usa-button {
border-radius: 0;
margin-right: -(units($theme-button-stroke-width)) / 2;
margin-left: -(units($theme-button-stroke-width)) / 2;
margin-right: divide(units($theme-button-stroke-width), -2);
margin-left: divide(units($theme-button-stroke-width), -2);
}

// Creates separators
Expand Down
14 changes: 7 additions & 7 deletions src/stylesheets/components/_card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
.usa-card-group {
@include u-display("flex");
@include u-flex("column", "wrap", "align-stretch");
@include u-margin-x($theme-card-gap / -2);
@include u-margin-x(divide($theme-card-gap, -2));
@include at-media($theme-card-flag-min-width) {
@include u-flex("row");
}
Expand Down Expand Up @@ -54,7 +54,7 @@
@include u-display("flex");
@include u-height("full");
@include u-flex("column");
@include u-margin-x($theme-card-gap / 2);
@include u-margin-x(divide($theme-card-gap, 2));
@include u-position("relative");
@include u-radius($theme-card-border-radius);
}
Expand All @@ -70,7 +70,7 @@
// Header
// ---------------------------------
.usa-card__header {
@include u-padding-bottom($theme-card-padding-y / 2);
@include u-padding-bottom(divide($theme-card-padding-y, 2));
@include u-padding-top($theme-card-padding-perimeter);
@include u-padding-x($theme-card-padding-perimeter);

Expand Down Expand Up @@ -121,7 +121,7 @@
.usa-card__body {
@include u-flex("fill");
@include u-padding-x($theme-card-padding-perimeter);
@include u-padding-y($theme-card-padding-y / 2);
@include u-padding-y(divide($theme-card-padding-y, 2));
// IE 11
flex-basis: auto;

Expand All @@ -143,7 +143,7 @@
// ---------------------------------
.usa-card__footer {
@include u-padding-bottom($theme-card-padding-perimeter);
@include u-padding-top($theme-card-padding-y / 2);
@include u-padding-top(divide($theme-card-padding-y, 2));
@include u-padding-x($theme-card-padding-perimeter);
}

Expand Down Expand Up @@ -279,10 +279,10 @@

&.usa-card--header-first {
.usa-card__header {
@include u-padding-bottom($theme-card-padding-y / 2);
@include u-padding-bottom(divide($theme-card-padding-y, 2));
}
.usa-card__body {
@include u-padding-top($theme-card-padding-y / 2);
@include u-padding-top(divide($theme-card-padding-y, 2));
}
.usa-card__media--inset {
@include u-padding-top($theme-card-padding-perimeter);
Expand Down
2 changes: 1 addition & 1 deletion src/stylesheets/components/_megamenu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
flex: 1 1 auto;
@include at-media($theme-header-min-width) {
// needs this round() to avoid a compile bug
@include u-flex(round(12 / $theme-megamenu-columns));
@include u-flex(round(divide(12, $theme-megamenu-columns)));
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/stylesheets/components/_pagination.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,13 +73,13 @@ $pagination-hover-token: nth($pagination-link-tokens, 2);

.usa-pagination__previous-page {
@include at-media($theme-pagination-breakpoint) {
margin-right: units($pagination-target-size / 2);
margin-right: units(divide($pagination-target-size, 2));
}
}

.usa-pagination__next-page {
@include at-media($theme-pagination-breakpoint) {
margin-left: units($pagination-target-size / 2);
margin-left: units(divide($pagination-target-size, 2));
}
}

Expand Down
24 changes: 12 additions & 12 deletions src/stylesheets/components/_step-indicator.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ $step-indicator-counter-size-sm: 3;
);
background-color: color($step-indicator-background-color);
margin-bottom: units($step-indicator-margin-bottom);
margin-left: units($theme-step-indicator-segment-gap) / -2;
margin-right: units($theme-step-indicator-segment-gap) / -2;
margin-left: divide(units($theme-step-indicator-segment-gap), -2);
margin-right: divide(units($theme-step-indicator-segment-gap), -2);

@include at-media($theme-step-indicator-min-width) {
@include u-margin-x(0);
Expand All @@ -33,8 +33,8 @@ $step-indicator-counter-size-sm: 3;
.usa-step-indicator__segment {
@include u-flex("fill");
counter-increment: usa-step-indicator;
margin-left: units($theme-step-indicator-segment-gap) / 2;
margin-right: units($theme-step-indicator-segment-gap) / 2;
margin-left: divide(units($theme-step-indicator-segment-gap), 2);
margin-right: divide(units($theme-step-indicator-segment-gap), 2);
max-width: units("card-lg");
min-height: units($theme-step-indicator-segment-height);
position: relative;
Expand Down Expand Up @@ -340,15 +340,15 @@ $step-indicator-counter-size-sm: 3;
}

.usa-step-indicator--no-labels {
margin-left: units($theme-step-indicator-segment-gap) / -2;
margin-right: units($theme-step-indicator-segment-gap) / -2;
margin-left: divide(units($theme-step-indicator-segment-gap), -2);
margin-right: divide(units($theme-step-indicator-segment-gap), -2);

.usa-step-indicator__segment {
// Remove extra counter margin
margin-top: 0;
// Add gap between segments
margin-left: units($theme-step-indicator-segment-gap) / 2;
margin-right: units($theme-step-indicator-segment-gap) / 2;
margin-left: divide(units($theme-step-indicator-segment-gap), 2);
margin-right: divide(units($theme-step-indicator-segment-gap), 2);
&:before {
// Don't show counters
display: none;
Expand All @@ -373,12 +373,12 @@ $step-indicator-counter-size-sm: 3;
}

.usa-step-indicator--center {
margin-left: units($theme-step-indicator-segment-gap) / -2;
margin-right: units($theme-step-indicator-segment-gap) / -2;
margin-left: divide(units($theme-step-indicator-segment-gap), -2);
margin-right: divide(units($theme-step-indicator-segment-gap), -2);

.usa-step-indicator__segment {
margin-left: units($theme-step-indicator-segment-gap) / 2;
margin-right: units($theme-step-indicator-segment-gap) / 2;
margin-left: divide(units($theme-step-indicator-segment-gap), 2);
margin-right: divide(units($theme-step-indicator-segment-gap), 2);

&:before {
@if $theme-step-indicator-counter-gap == 0 {
Expand Down
2 changes: 1 addition & 1 deletion src/stylesheets/components/_tooltip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ $triangle-size: 5px;
width: 100%;
white-space: normal;
text-align: center;
min-width: calc(100vw / 2);
min-width: 50vw;
}

.usa-tooltip__body.is-set {
Expand Down
Loading