Skip to content

Commit

Permalink
Update all instances of previous -spacing-* variables, T-20761
Browse files Browse the repository at this point in the history
  • Loading branch information
nadyahakkinen committed Oct 25, 2024
1 parent e07fde0 commit 1eba8a1
Show file tree
Hide file tree
Showing 17 changed files with 79 additions and 79 deletions.
4 changes: 2 additions & 2 deletions sass/features/_top.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
--color-background-top-hover: #f0f0f0;
background-color: var(--color-background-top);
border-radius: 2px;
bottom: var(--padding-container-horizontal);
bottom: var(--spacing-container-padding-inline);
color: var(--color-black);
cursor: pointer;
font-size: var(--typography-size-16);
Expand All @@ -13,7 +13,7 @@
line-height: 30px;
opacity: 0;
position: fixed;
right: var(--padding-container-horizontal);
right: var(--spacing-container-padding-inline);
text-align: center;
text-decoration: none;
transition: 500ms opacity;
Expand Down
12 changes: 6 additions & 6 deletions sass/gutenberg/_editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -81,8 +81,8 @@
.wp-block-gallery,
.wp-block.editor-post-title {
@media (max-width: $width-max-article + 40px) {
padding-left: var(--padding-container-horizontal);
padding-right: var(--padding-container-horizontal);
padding-left: var(--spacing-container-padding-inline);
padding-right: var(--spacing-container-padding-inline);
width: 100%;

&.alignleft,
Expand All @@ -103,12 +103,12 @@

// Full width gallery should be always be with paddings
.wp-block[data-align="full"] > .wp-block-gallery {
padding-left: var(--padding-container-horizontal);
padding-right: var(--padding-container-horizontal);
padding-left: var(--spacing-container-padding-inline);
padding-right: var(--spacing-container-padding-inline);

&.alignfull {
padding-left: var(--padding-container-horizontal);
padding-right: var(--padding-container-horizontal);
padding-left: var(--spacing-container-padding-inline);
padding-right: var(--spacing-container-padding-inline);
}
}

Expand Down
8 changes: 4 additions & 4 deletions sass/gutenberg/blocks/_core-blockquote.scss
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ blockquote {

@media (max-width: $width-max-article + 40px) {
padding: 3.5rem 2rem;
width: calc(100% - calc(var(--padding-container-horizontal) * 2));
width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
}

@media (max-width: $container-mobile) {
Expand All @@ -53,9 +53,9 @@ blockquote {

.wp-block-blockquote.alignwide,
.wp-block-blockquote.alignfull {
padding-left: var(--padding-container-horizontal);
padding-right: var(--padding-container-horizontal);
width: calc(100% - calc(var(--padding-container-horizontal) * 2));
padding-left: var(--spacing-container-padding-inline);
padding-right: var(--spacing-container-padding-inline);
width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
}

.wp-block-blockquote blockquote {
Expand Down
4 changes: 2 additions & 2 deletions sass/gutenberg/blocks/_core-columns.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ h3 {

@for $i from 1 through 9 {
.wp-block-columns.has-#{$i}-columns.alignfull {
padding-left: var(--padding-container-horizontal);
padding-right: var(--padding-container-horizontal);
padding-left: var(--spacing-container-padding-inline);
padding-right: var(--spacing-container-padding-inline);
width: 100%;
}

Expand Down
6 changes: 3 additions & 3 deletions sass/gutenberg/blocks/_core-image.scss
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
// Image block
.wp-block-image {
display: block;
margin-bottom: var(--margin-wp-block-image);
margin-top: var(--margin-wp-block-image);
margin-bottom: var(--spacing-wp-block-image-margin-block);
margin-top: var(--spacing-wp-block-image-margin-block);

&.alignwide,
&.alignfull {
Expand Down Expand Up @@ -48,7 +48,7 @@

@media (max-width: $width-grid-base + 40px) {
&.alignwide {
width: calc(100% - calc(var(--padding-container-horizontal) * 2));
width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
}
}

Expand Down
2 changes: 1 addition & 1 deletion sass/gutenberg/blocks/_core-list.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
ul,
ol {
list-style-position: outside;
width: calc((100% - calc(var(--padding-container-horizontal) * 2)));
width: calc((100% - calc(var(--spacing-container-padding-inline) * 2)));
}

ul {
Expand Down
2 changes: 1 addition & 1 deletion sass/gutenberg/blocks/_core-paragraph.scss
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,6 @@

@media (max-width: $width-grid-base + 40px) {
.has-background {
width: calc(100% - calc(var(--padding-container-horizontal) * 2));
width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
}
}
12 changes: 6 additions & 6 deletions sass/gutenberg/blocks/_core-pullquote.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
}

@media (max-width: $width-grid-base + 40px) {
width: calc(100% - calc(var(--padding-container-horizontal) * 2));
width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
}
}

Expand All @@ -25,13 +25,13 @@
}

@media (max-width: $width-grid-base + 40px) {
margin-left: var(--padding-container-horizontal);
margin-right: var(--padding-container-horizontal);
margin-left: var(--spacing-container-padding-inline);
margin-right: var(--spacing-container-padding-inline);
}
}

.wp-block-pullquote.alignfull {
margin-left: var(--padding-container-horizontal);
margin-right: var(--padding-container-horizontal);
width: calc(100% - calc(var(--padding-container-horizontal) * 2));
margin-left: var(--spacing-container-padding-inline);
margin-right: var(--spacing-container-padding-inline);
width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
}
14 changes: 7 additions & 7 deletions sass/gutenberg/blocks/_core-table.scss
Original file line number Diff line number Diff line change
Expand Up @@ -55,20 +55,20 @@ table {

.wp-block-table {
@media (max-width: $width-grid-base + 40px) {
width: calc(100% - calc(var(--padding-container-horizontal) * 2));
width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
}
}

.wp-block-table.alignfull {
margin-left: var(--padding-container-horizontal);
margin-right: var(--padding-container-horizontal);
width: calc(100% - calc(var(--padding-container-horizontal) * 2));
margin-left: var(--spacing-container-padding-inline);
margin-right: var(--spacing-container-padding-inline);
width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
}

@media (max-width: $width-grid-base + 40px) {
.wp-block-table.alignwide {
margin-left: var(--padding-container-horizontal);
margin-right: var(--padding-container-horizontal);
width: calc(100% - calc(var(--padding-container-horizontal) * 2));
margin-left: var(--spacing-container-padding-inline);
margin-right: var(--spacing-container-padding-inline);
width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
}
}
2 changes: 1 addition & 1 deletion sass/gutenberg/blocks/_core-video.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

@media (max-width: $width-grid-base + 40px) {
.wp-block-video.alignwide {
width: calc(100% - calc(var(--padding-container-horizontal) * 2));
width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
}
}

Expand Down
12 changes: 6 additions & 6 deletions sass/gutenberg/formatting/_align.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

.alignleft > img {
margin-bottom: var(--margin-between-paragraphs);
margin-right: var(--padding-container-horizontal);
margin-right: var(--spacing-container-padding-inline);
margin-top: var(--margin-between-paragraphs);

+ figcaption {
Expand All @@ -21,7 +21,7 @@

.alignright > img {
margin-bottom: var(--margin-between-paragraphs);
margin-left: var(--padding-container-horizontal);
margin-left: var(--spacing-container-padding-inline);
margin-top: var(--margin-between-paragraphs);

+ figcaption {
Expand All @@ -31,8 +31,8 @@

.alignwide {
max-width: $width-wide;
padding-left: var(--padding-container-horizontal);
padding-right: var(--padding-container-horizontal);
padding-left: var(--spacing-container-padding-inline);
padding-right: var(--spacing-container-padding-inline);
width: 100%;

@media (min-width: $width-wide + 40px) {
Expand All @@ -52,8 +52,8 @@
}

@media (min-width: $width-max-article + 40px) {
margin-bottom: var(--padding-block);
margin-top: var(--padding-block);
margin-bottom: var(--spacing-content-padding-block);
margin-top: var(--spacing-content-padding-block);
max-width: $width-full;
width: $width-full;
}
Expand Down
14 changes: 7 additions & 7 deletions sass/gutenberg/layout/_content.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
.editor-styles-wrapper,
.article-content {
max-width: 100%;
padding-bottom: var(--padding-block);
padding-bottom: var(--spacing-content-padding-block);
padding-left: 0;
padding-right: 0;
padding-top: var(--padding-block);
padding-top: var(--spacing-content-padding-block);
}

// Gutenberg core magic
Expand All @@ -18,13 +18,13 @@
max-width: $width-max-article;

@media (max-width: $width-max-article + 40px) {
padding-left: var(--padding-container-horizontal);
padding-right: var(--padding-container-horizontal);
padding-left: var(--spacing-container-padding-inline);
padding-right: var(--spacing-container-padding-inline);

&.alignfull {
padding-left: var(--padding-container-horizontal);
padding-right: var(--padding-container-horizontal);
width: calc(100% - calc(var(--padding-container-horizontal) * 2));
padding-left: var(--spacing-container-padding-inline);
padding-right: var(--spacing-container-padding-inline);
width: calc(100% - calc(var(--spacing-container-padding-inline) * 2));
}
}
}
12 changes: 6 additions & 6 deletions sass/layout/_general.scss
Original file line number Diff line number Diff line change
Expand Up @@ -45,16 +45,16 @@
margin-left: auto;
margin-right: auto;
max-width: $width-grid-base;
padding-bottom: var(--padding-container-vertical);
padding-left: var(--padding-container-horizontal);
padding-right: var(--padding-container-horizontal);
padding-top: var(--padding-container-vertical);
padding-bottom: var(--spacing-container-padding-block);
padding-left: var(--spacing-container-padding-inline);
padding-right: var(--spacing-container-padding-inline);
padding-top: var(--spacing-container-padding-block);

// If base grid is larger than Macbook Air screen
@if $width-grid-base > 1440 {
@media (min-width: $container-ipad-landscape) and (max-width: 140rem + 6.4rem) {
padding-left: var(--padding-container-horizontal-large);
padding-right: var(--padding-container-horizontal-large);
padding-left: var(--spacing-container-padding-inline-large);
padding-right: var(--spacing-container-padding-inline-large);
}
}
}
Expand Down
14 changes: 7 additions & 7 deletions sass/layout/_site-header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@
margin-left: auto;
margin-right: auto;
max-width: $width-grid-base;
padding-bottom: var(--padding-site-header-vertical);
padding-left: var(--padding-container-horizontal);
padding-right: var(--padding-container-horizontal);
padding-top: var(--padding-site-header-vertical);
padding-bottom: var(--spacing-site-header-padding-block);
padding-left: var(--spacing-container-padding-inline);
padding-right: var(--spacing-container-padding-inline);
padding-top: var(--spacing-site-header-padding-block);
position: relative;
z-index: 15;

@media (max-width: $width-max-mobile) {
--padding-container-horizontal: 2rem;
--spacing-container-padding-inline: 2rem;
}
}

Expand Down Expand Up @@ -51,10 +51,10 @@
font-size: clamp(.5rem, 3.4vw, 3rem);
font-weight: var(--typography-weight-semibold);
justify-content: center;
margin-bottom: var(--padding-container-vertical);
margin-bottom: var(--spacing-container-padding-block);
margin-left: auto;
margin-right: auto;
margin-top: calc(var(--padding-container-vertical) * 2);
margin-top: calc(var(--spacing-container-padding-block) * 2);
// stylelint-disable-next-line
max-width: $width-grid-base - 40px;
opacity: .7;
Expand Down
4 changes: 2 additions & 2 deletions sass/variables/_spacings-new.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@
--spacing-content-padding-block: 8rem;

// Margins
--spacing-margin-between-text-elements: 4rem;
--spacing-margin-wp-block-image: 4rem;
--spacing-text-margin-block: 4rem;
--spacing-wp-block-image-margin-block: 4rem;
--spacing-paragraphs-margin-block: 2.7rem;

// Mid-sized screens
Expand Down
34 changes: 17 additions & 17 deletions sass/variables/_spacings.scss
Original file line number Diff line number Diff line change
@@ -1,52 +1,52 @@
// CSS Variables for responsive paddings and margins
:root {
// Gaps
--grid-gap: 4.8rem;
--spacing-grid-gap: 4.8rem;

// Paddings
--padding-container-horizontal: 2rem;
--padding-container-horizontal-large: 6.4rem;
--padding-container-vertical: 6.4rem;
--padding-site-header-vertical: 2rem;
--padding-block: 8rem;
--spacing-container-padding-inline: 2rem;
--spacing-container-padding-inline-large: 6.4rem;
--spacing-container-padding-block: 6.4rem;
--spacing-site-header-padding-block: 2rem;
--spacing-content-padding-block: 8rem;

// Margins
--margin-between-text-elements: 4rem;
--margin-wp-block-image: 4rem;
--margin-between-paragraphs: 2.7rem;
--spacing-text-margin-block: 4rem;
--spacing-wp-block-image-margin-block: 4rem;
--spacing-paragraphs-margin-block: 2.7rem;

// Mid-sized screens
@media (max-width: $width-grid-base + 150px) {
--padding-container-horizontal: 6.4rem;
--spacing-container-padding-inline: 6.4rem;
}

// When there's no longer room for container to fit with wider white space
@media (max-width: 700px) {
--padding-container-horizontal: 2rem;
--spacing-container-padding-inline: 2rem;
}

// When navigation transforms to a responsive hamburger menu
@media (max-width: $width-max-mobile) {
--padding-site-header-vertical: 2rem;
--spacing-site-header-padding-block: 2rem;
}

// iPad
@media (max-width: $container-ipad-landscape) {
--grid-gap: 3.2rem;
--spacing-grid-gap: 3.2rem;
}

@media (max-width: $container-ipad) {
--grid-gap: var(--padding-container-horizontal);
--padding-container-vertical: 5rem;
--spacing-grid-gap: var(--spacing-container-padding-inline);
--spacing-container-padding-block: 5rem;
}

// Between iPad and a mobile phone
@media (max-width: 600px) {
--padding-block: 6rem;
--spacing-content-padding-block: 6rem;
}

// Vars in mobile
@media (max-width: $container-mobile) {
--padding-container-vertical: 4rem;
--spacing-container-padding-block: 4rem;
}
}
2 changes: 1 addition & 1 deletion sass/views/_single.scss
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-bottom: var(--margin-between-text-elements);
margin-bottom: var(--spacing-text-margin-block);
margin-top: 0;

// stylelint-disable a11y/font-size-is-readable
Expand Down

0 comments on commit 1eba8a1

Please sign in to comment.