From 106daacb35135238b9801144554846e5218d0209 Mon Sep 17 00:00:00 2001 From: Thibaud Colas Date: Wed, 20 Nov 2024 23:48:35 +0000 Subject: [PATCH] Switch variables and mixins to global scope --- wagtailio/static/sass/abstracts/_mixins.scss | 10 +-- wagtailio/static/sass/base/_base.scss | 4 +- wagtailio/static/sass/base/_container.scss | 22 +++--- wagtailio/static/sass/base/_print.scss | 6 +- wagtailio/static/sass/base/_typography.scss | 40 +++++------ wagtailio/static/sass/components/_author.scss | 8 +-- wagtailio/static/sass/components/_backer.scss | 4 +- .../static/sass/components/_backers.scss | 14 ++-- .../static/sass/components/_blog-post.scss | 30 ++++---- wagtailio/static/sass/components/_blog.scss | 22 +++--- wagtailio/static/sass/components/_burger.scss | 6 +- .../static/sass/components/_button-align.scss | 8 +-- .../static/sass/components/_buttons.scss | 42 +++++------ .../static/sass/components/_card-grid.scss | 18 ++--- wagtailio/static/sass/components/_card.scss | 12 ++-- .../static/sass/components/_code-block.scss | 16 ++--- .../static/sass/components/_code-snippet.scss | 22 +++--- .../sass/components/_comparison-table.scss | 22 +++--- .../sass/components/_cookie-message.scss | 12 ++-- .../static/sass/components/_cta-block.scss | 6 +- wagtailio/static/sass/components/_cta.scss | 16 ++--- .../static/sass/components/_document.scss | 12 ++-- wagtailio/static/sass/components/_embed.scss | 8 +-- .../static/sass/components/_error-404.scss | 14 ++-- .../static/sass/components/_feature.scss | 6 +- .../static/sass/components/_features.scss | 24 +++---- .../static/sass/components/_footer-menu.scss | 30 ++++---- wagtailio/static/sass/components/_form.scss | 12 ++-- .../static/sass/components/_get-started.scss | 20 +++--- wagtailio/static/sass/components/_grid.scss | 18 ++--- .../static/sass/components/_heading.scss | 6 +- .../static/sass/components/_headline.scss | 42 +++++------ wagtailio/static/sass/components/_hero.scss | 40 +++++------ .../static/sass/components/_highlight.scss | 22 +++--- .../static/sass/components/_home-embed.scss | 10 +-- .../static/sass/components/_icon-bullet.scss | 8 +-- .../static/sass/components/_icon-bullets.scss | 4 +- .../static/sass/components/_icon-link.scss | 26 +++---- wagtailio/static/sass/components/_icon.scss | 6 +- wagtailio/static/sass/components/_image.scss | 8 +-- .../static/sass/components/_jump-links.scss | 8 +-- .../sass/components/_logo-card-grid.scss | 14 ++-- .../static/sass/components/_logo-card.scss | 14 ++-- wagtailio/static/sass/components/_logos.scss | 20 +++--- wagtailio/static/sass/components/_meta.scss | 4 +- .../sass/components/_milestone-item.scss | 30 ++++---- .../static/sass/components/_milestones.scss | 24 +++---- wagtailio/static/sass/components/_modal.scss | 36 +++++----- .../static/sass/components/_nav-cta.scss | 36 +++++----- .../sass/components/_newsletter-cta.scss | 10 +-- .../sass/components/_overview-item.scss | 6 +- .../static/sass/components/_overview.scss | 18 ++--- .../static/sass/components/_pagination.scss | 16 ++--- .../static/sass/components/_primary-nav.scss | 40 +++++------ wagtailio/static/sass/components/_quotes.scss | 26 +++---- .../sass/components/_related-content.scss | 16 ++--- .../static/sass/components/_rich-text.scss | 10 +-- .../sass/components/_search-result.scss | 4 +- wagtailio/static/sass/components/_search.scss | 18 ++--- .../sass/components/_select-wrapper.scss | 16 ++--- .../sass/components/_showcase-card.scss | 16 ++--- .../static/sass/components/_sign-up-form.scss | 68 +++++++++--------- .../sass/components/_sitewide-alert.scss | 18 ++--- .../static/sass/components/_skip-link.scss | 6 +- .../sass/components/_standalone-quote.scss | 16 ++--- .../static/sass/components/_sub-nav.scss | 64 ++++++++--------- wagtailio/static/sass/components/_teaser.scss | 16 ++--- .../static/sass/components/_text-media.scss | 14 ++-- .../static/sass/components/_theme-toggle.scss | 40 +++++------ .../static/sass/components/_wagtail-logo.scss | 6 +- .../static/sass/layout/_blog-listing.scss | 16 ++--- wagtailio/static/sass/layout/_footer.scss | 72 +++++++++---------- wagtailio/static/sass/layout/_header.scss | 48 ++++++------- .../static/sass/layout/_search-page.scss | 6 +- .../static/sass/layout/_showcase-page.scss | 8 +-- .../static/sass/utilities/_utilities.scss | 8 +-- 76 files changed, 722 insertions(+), 722 deletions(-) diff --git a/wagtailio/static/sass/abstracts/_mixins.scss b/wagtailio/static/sass/abstracts/_mixins.scss index 206d51a2a..a12df3eb4 100644 --- a/wagtailio/static/sass/abstracts/_mixins.scss +++ b/wagtailio/static/sass/abstracts/_mixins.scss @@ -1,4 +1,4 @@ -@use "variables"; +@use "variables" as *; @use 'sass:list'; @use 'sass:map'; @@ -6,7 +6,7 @@ // Media queries @mixin media-query($queries...) { @each $query in $queries { - @each $breakpoint in variables.$breakpoints { + @each $breakpoint in $breakpoints { $name: list.nth($breakpoint, 1); $declaration: list.nth($breakpoint, 2); @@ -107,7 +107,7 @@ // z-index // Map z-index keys @function z-index($key) { - @return map.get(variables.$z-index, $key); + @return map.get($z-index, $key); } @mixin z-index($key) { @@ -126,7 +126,7 @@ } b { - font-weight: variables.$weight--bold; + font-weight: $weight--bold; } ul, @@ -157,4 +157,4 @@ > :last-child { margin-bottom: 0; } -} \ No newline at end of file +} diff --git a/wagtailio/static/sass/base/_base.scss b/wagtailio/static/sass/base/_base.scss index a07b6350b..e4023c72e 100644 --- a/wagtailio/static/sass/base/_base.scss +++ b/wagtailio/static/sass/base/_base.scss @@ -1,4 +1,4 @@ -@use "../abstracts/variables"; +@use "../abstracts/variables" as *; // Box Sizing *, @@ -9,7 +9,7 @@ // Prevent text size change on orientation change. html { - font-family: variables.$font--primary; + font-family: $font--primary; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; diff --git a/wagtailio/static/sass/base/_container.scss b/wagtailio/static/sass/base/_container.scss index bf4e91203..911db5051 100644 --- a/wagtailio/static/sass/base/_container.scss +++ b/wagtailio/static/sass/base/_container.scss @@ -1,19 +1,19 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .container { - max-width: variables.$site-width; + max-width: $site-width; margin: 0 auto; - padding-left: variables.$gutter-sm; - padding-right: variables.$gutter-sm; + padding-left: $gutter-sm; + padding-right: $gutter-sm; - @include mixins.media-query(medium) { - padding-left: variables.$gutter; - padding-right: variables.$gutter; + @include media-query(medium) { + padding-left: $gutter; + padding-right: $gutter; } - @include mixins.media-query(large) { - padding-left: variables.$gutter-lg; - padding-right: variables.$gutter-lg; + @include media-query(large) { + padding-left: $gutter-lg; + padding-right: $gutter-lg; } } diff --git a/wagtailio/static/sass/base/_print.scss b/wagtailio/static/sass/base/_print.scss index 03f20136b..980d0bfd6 100644 --- a/wagtailio/static/sass/base/_print.scss +++ b/wagtailio/static/sass/base/_print.scss @@ -1,4 +1,4 @@ -@use "../abstracts/variables"; +@use "../abstracts/variables" as *; // Print styles // stylelint-disable declaration-no-important @@ -6,8 +6,8 @@ @media print { * { background: transparent !important; - color: variables.$color--black !important; - border-color: variables.$color--black !important; + color: $color--black !important; + border-color: $color--black !important; box-shadow: none !important; text-shadow: none !important; } diff --git a/wagtailio/static/sass/base/_typography.scss b/wagtailio/static/sass/base/_typography.scss index dec4243d5..ffb42e691 100644 --- a/wagtailio/static/sass/base/_typography.scss +++ b/wagtailio/static/sass/base/_typography.scss @@ -1,11 +1,11 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; html { font-size: 1rem; line-height: 1.5; - @include mixins.media-query(large) { + @include media-query(large) { font-size: 1.25rem; line-height: 1.6; } @@ -18,7 +18,7 @@ h4, h5, h6 { margin: 0 0 15px; - font-weight: variables.$weight--bold; + font-weight: $weight--bold; } p { @@ -40,7 +40,7 @@ h1, line-height: 3.375rem; letter-spacing: -0.01em; - @include mixins.media-query(large) { + @include media-query(large) { font-size: 3.8rem; line-height: 4.8rem; } @@ -51,7 +51,7 @@ h2, font-size: 1.7rem; line-height: 2.125rem; - @include mixins.media-query(large) { + @include media-query(large) { font-size: 1.7rem; line-height: 2.3rem; } @@ -62,7 +62,7 @@ h3, font-size: 1.375rem; line-height: 2.0625rem; - @include mixins.media-query(large) { + @include media-query(large) { font-size: 1.5rem; line-height: 1.2; } @@ -73,7 +73,7 @@ h4, font-size: 1.37rem; line-height: 2.063rem; - @include mixins.media-query(large) { + @include media-query(large) { font-size: 1.1rem; line-height: 1.65rem; } @@ -82,9 +82,9 @@ h4, .intro-small { font-size: 1.25rem; line-height: 1.9375rem; - font-weight: variables.$weight--regular; + font-weight: $weight--regular; - @include mixins.media-query(large) { + @include media-query(large) { font-size: 1.25rem; line-height: 1.85rem; } @@ -93,9 +93,9 @@ h4, .teaser-heading { font-size: 1.875rem; line-height: 2.125rem; - font-weight: variables.$weight--bold; + font-weight: $weight--bold; - @include mixins.media-query(large) { + @include media-query(large) { font-size: 1.5rem; line-height: 1.95rem; } @@ -105,7 +105,7 @@ h4, font-size: 1rem; line-height: 1.5rem; - @include mixins.media-query(large) { + @include media-query(large) { font-size: 1rem; line-height: 1.4rem; } @@ -114,10 +114,10 @@ h4, .intro-big { font-size: 1.5625rem; line-height: 2.3125rem; - font-weight: variables.$weight--regular; + font-weight: $weight--regular; margin: 0 0 20px; - @include mixins.media-query(large) { + @include media-query(large) { font-size: 1.7rem; line-height: 2.3rem; } @@ -127,13 +127,13 @@ h4, font-size: 0.875rem; line-height: 1.3125rem; - @include mixins.media-query(large) { + @include media-query(large) { font-size: 0.7rem; line-height: 1.05rem; } &--bold { - font-weight: variables.$weight--bold; + font-weight: $weight--bold; } } @@ -141,7 +141,7 @@ h4, font-size: 2.25rem; line-height: 2.9rem; - @include mixins.media-query(large) { + @include media-query(large) { font-size: 3.25rem; line-height: 3.9rem; } @@ -151,7 +151,7 @@ h4, font-size: 1rem; line-height: 1.5rem; - @include mixins.media-query(large) { + @include media-query(large) { font-size: 0.8rem; line-height: 1.2rem; } @@ -161,7 +161,7 @@ h4, font-size: 0.75rem; line-height: 1.125rem; - @include mixins.media-query(large) { + @include media-query(large) { font-size: 0.6rem; line-height: 0.9rem; } diff --git a/wagtailio/static/sass/components/_author.scss b/wagtailio/static/sass/components/_author.scss index a3c3783cd..fa102801e 100644 --- a/wagtailio/static/sass/components/_author.scss +++ b/wagtailio/static/sass/components/_author.scss @@ -1,4 +1,4 @@ -@use "../abstracts/variables"; +@use "../abstracts/variables" as *; .author { $root: &; @@ -19,19 +19,19 @@ } &__name { - font-weight: variables.$weight--bold; + font-weight: $weight--bold; font-size: 16px; margin-bottom: 0; line-height: 1; a { text-decoration: none; - color: variables.$color--off-black; + color: $color--off-black; } .blog-post__content & { font-size: 14px; - font-weight: variables.$weight--regular; + font-weight: $weight--regular; } } diff --git a/wagtailio/static/sass/components/_backer.scss b/wagtailio/static/sass/components/_backer.scss index 847a006bb..8016dac3b 100644 --- a/wagtailio/static/sass/components/_backer.scss +++ b/wagtailio/static/sass/components/_backer.scss @@ -1,8 +1,8 @@ -@use "../abstracts/variables"; +@use "../abstracts/variables" as *; .backer { &__link { - color: variables.$color--teal; + color: $color--teal; transition: color 0.3s; &:hover { diff --git a/wagtailio/static/sass/components/_backers.scss b/wagtailio/static/sass/components/_backers.scss index edf13f10e..08bd55392 100644 --- a/wagtailio/static/sass/components/_backers.scss +++ b/wagtailio/static/sass/components/_backers.scss @@ -1,15 +1,15 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .backers { - @include mixins.sf-spacing(2); + @include sf-spacing(2); grid-column: 2 / span 2; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 3 / span 3; } @@ -21,7 +21,7 @@ &--bronze { padding-bottom: 20px; margin-bottom: 20px; - border-bottom: 2px solid variables.$color--light-grey; + border-bottom: 2px solid $color--light-grey; } } @@ -30,7 +30,7 @@ grid-template-columns: 1fr; gap: 15px; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-template-columns: 1fr 1fr 1fr; } } diff --git a/wagtailio/static/sass/components/_blog-post.scss b/wagtailio/static/sass/components/_blog-post.scss index 21ea23e22..ca9fc8aff 100644 --- a/wagtailio/static/sass/components/_blog-post.scss +++ b/wagtailio/static/sass/components/_blog-post.scss @@ -1,5 +1,5 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .blog-post { $root: &; @@ -35,12 +35,12 @@ &__content { position: relative; - left: -(variables.$gutter-sm); // offset padding for vertical alignment + left: -($gutter-sm); // offset padding for vertical alignment display: flex; flex-direction: column; gap: 15px; background: var(--color--background); - padding: variables.$gutter-sm; + padding: $gutter-sm; } &__image { @@ -52,7 +52,7 @@ max-width: none; width: 100%; - @include mixins.media-query(large) { + @include media-query(large) { position: static; transform: none; display: block; @@ -81,7 +81,7 @@ display: grid; margin-bottom: 30px; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 1 / span 2; margin-bottom: 0; @@ -90,7 +90,7 @@ } } - @include mixins.media-query(large) { + @include media-query(large) { grid-template-columns: 2fr 3fr; } @@ -98,10 +98,10 @@ border-radius: 0 15px 15px 0; gap: 20px; background: var(--color--light-dark); - @include mixins.offset-bg-right(); + @include offset-bg-right(); - @include mixins.media-query(medium) { - padding: variables.$gutter variables.$gutter-lg; + @include media-query(medium) { + padding: $gutter $gutter-lg; // stylelint-disable-next-line max-nesting-depth &::after { @@ -110,8 +110,8 @@ } } - @include mixins.media-query(large) { - padding: variables.$gutter-lg variables.$gutter-xl; + @include media-query(large) { + padding: $gutter-lg $gutter-xl; // stylelint-disable-next-line max-nesting-depth &::after { @@ -123,13 +123,13 @@ &--small { #{$root}__content { - @include mixins.offset-bg-left(); + @include offset-bg-left(); } #{$root}__listing-text { font-size: 1rem; - @include mixins.media-query(large) { + @include media-query(large) { font-size: 0.8rem; } } @@ -139,7 +139,7 @@ &:active, &:focus { #{$root}__content { - @include mixins.offset-bg-hover-left(); + @include offset-bg-hover-left(); } } } diff --git a/wagtailio/static/sass/components/_blog.scss b/wagtailio/static/sass/components/_blog.scss index d191dd77e..9c2fbeca3 100644 --- a/wagtailio/static/sass/components/_blog.scss +++ b/wagtailio/static/sass/components/_blog.scss @@ -1,5 +1,5 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .blog { &__meta, @@ -8,19 +8,19 @@ &__heading { grid-column: 2 / span 2; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 2 / span 4; } } &__intro { - font-weight: variables.$weight--regular; + font-weight: $weight--regular; - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 2 / span 3; } } @@ -31,7 +31,7 @@ &__intro, &__heading { - @include mixins.media-query(large) { + @include media-query(large) { margin-bottom: 30px; } } @@ -39,12 +39,12 @@ &__header { padding-bottom: 50px; - @include mixins.media-query(medium) { + @include media-query(medium) { padding-bottom: 80px; padding-top: 80px; } - @include mixins.media-query(large) { + @include media-query(large) { padding-bottom: (20vh); } @@ -54,11 +54,11 @@ grid-column: 2 / span 2; margin-bottom: 25px; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 3 / span 3; margin-bottom: 75px; } diff --git a/wagtailio/static/sass/components/_burger.scss b/wagtailio/static/sass/components/_burger.scss index 498097f3a..35aa1cd1e 100644 --- a/wagtailio/static/sass/components/_burger.scss +++ b/wagtailio/static/sass/components/_burger.scss @@ -1,4 +1,4 @@ -@use "../abstracts/variables"; +@use "../abstracts/variables" as *; .burger { $root: &; @@ -31,12 +31,12 @@ background-color: var(--color--dark-light); opacity: 1; transform: translateX(-50%) rotate(0deg); - transition: top variables.$transition, width variables.$transition, opacity variables.$transition, transform variables.$transition, background-color variables.$transition, left variables.$transition; + transition: top $transition, width $transition, opacity $transition, transform $transition, background-color $transition, left $transition; @media (forced-colors: active) { background-color: ButtonText; } - + .is-open & { width: 27px; height: 4px; diff --git a/wagtailio/static/sass/components/_button-align.scss b/wagtailio/static/sass/components/_button-align.scss index 2475c6aa0..4966c120e 100644 --- a/wagtailio/static/sass/components/_button-align.scss +++ b/wagtailio/static/sass/components/_button-align.scss @@ -1,4 +1,4 @@ -@use "../abstracts/mixins"; +@use "../abstracts/mixins" as *; // For aligning buttons side-by-side .button-align { @@ -8,7 +8,7 @@ gap: 15px; align-items: flex-start; - @include mixins.media-query(medium) { + @include media-query(medium) { flex-direction: row; grid-column: 2 / span 3; } @@ -17,7 +17,7 @@ width: 100%; justify-content: space-between; - @include mixins.media-query(medium) { + @include media-query(medium) { width: auto; justify-content: flex-start; } @@ -26,7 +26,7 @@ &--home { margin-bottom: 50px; - @include mixins.media-query(medium) { + @include media-query(medium) { margin-bottom: 100px; } } diff --git a/wagtailio/static/sass/components/_buttons.scss b/wagtailio/static/sass/components/_buttons.scss index c638d3089..ade16af5d 100644 --- a/wagtailio/static/sass/components/_buttons.scss +++ b/wagtailio/static/sass/components/_buttons.scss @@ -1,5 +1,5 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .button { display: inline-flex; @@ -8,19 +8,19 @@ border-radius: 6px; border: 1px solid var(--color--highlight); padding: 15px 30px; - color: variables.$color--off-black; + color: $color--off-black; outline-offset: 4px; transition: background-color 0.3s, color 0.3s, border-color 0.3s; - background-color: variables.$color--white; + background-color: $color--white; - @include mixins.media-query(large) { + @include media-query(large) { font-size: 0.8rem; } > svg { transition: transform 0.3s; margin: 0 0 0 15px; - fill: variables.$color--teal; + fill: $color--teal; @media (forced-colors: active) { fill: currentColor; @@ -29,11 +29,11 @@ &:hover { background-color: var(--color--highlight); - color: variables.$color--white; + color: $color--white; > svg { transform: translateX(6px) scale(1.05); - fill: variables.$color--teal-100; + fill: $color--teal-100; @media (forced-colors: active) { fill: currentColor; @@ -43,12 +43,12 @@ &--dark, .theme-dark & { - border-color: variables.$color--white; + border-color: $color--white; background-color: transparent; - color: variables.$color--white; + color: $color--white; > svg { - fill: variables.$color--teal-100; + fill: $color--teal-100; @media (forced-colors: active) { fill: currentColor; @@ -57,12 +57,12 @@ &:hover, &:focus { - background-color: variables.$color--white; - border-color: variables.$color--white; + background-color: $color--white; + border-color: $color--white; color: var(--color--highlight); > svg { - fill: variables.$color--teal; + fill: $color--teal; // stylelint-disable-next-line max-nesting-depth @media (forced-colors: active) { @@ -74,11 +74,11 @@ &--secondary { background-color: var(--color--highlight); - color: variables.$color--white; + color: $color--white; &:hover, &:focus { - background-color: variables.$color--white; + background-color: $color--white; border-color: var(--color--highlight); color: var(--color--highlight); } @@ -89,7 +89,7 @@ &:focus { background-color: var(--color--highlight); border-color: var(--color--highlight); - color: variables.$color--white; + color: $color--white; } } @@ -109,18 +109,18 @@ } &--disabled { - background-color: variables.$color--light-grey; - border-color: variables.$color--light-grey; + background-color: $color--light-grey; + border-color: $color--light-grey; pointer-events: none; > p { opacity: 0.5; - color: variables.$color--off-black; + color: $color--off-black; } } &__text { - font-weight: variables.$weight--bold; + font-weight: $weight--bold; line-height: 1.25rem; } } diff --git a/wagtailio/static/sass/components/_card-grid.scss b/wagtailio/static/sass/components/_card-grid.scss index d1d008b07..2982df186 100644 --- a/wagtailio/static/sass/components/_card-grid.scss +++ b/wagtailio/static/sass/components/_card-grid.scss @@ -1,36 +1,36 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .card-grid { display: grid; grid-column: 2 / span 2; - @include mixins.sf-spacing(2); + @include sf-spacing(2); - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 2 / span 5; } &__item { padding: 0 0 50px 0; - @include mixins.media-query(medium) { + @include media-query(medium) { padding-bottom: 100px; &:nth-child(odd) { - padding-right: variables.$gutter-xl; + padding-right: $gutter-xl; } &:nth-child(even) { - padding-left: variables.$gutter-xl; + padding-left: $gutter-xl; } } - @include mixins.media-query(large) { + @include media-query(large) { &:nth-child(odd) { grid-column: 2 / span 2; } diff --git a/wagtailio/static/sass/components/_card.scss b/wagtailio/static/sass/components/_card.scss index 175eb56d3..f2b56258a 100644 --- a/wagtailio/static/sass/components/_card.scss +++ b/wagtailio/static/sass/components/_card.scss @@ -1,5 +1,5 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .card { $root: &; @@ -10,13 +10,13 @@ &__meta { margin-bottom: 10px; - @include mixins.media-query(large) { + @include media-query(large) { margin-bottom: 20px; } p { font-size: 1rem; - font-weight: variables.$weight--regular; + font-weight: $weight--regular; } } @@ -29,7 +29,7 @@ color: var(--color--meta); padding-bottom: 30px; - @include mixins.media-query(large) { + @include media-query(large) { padding-bottom: 40px; font-size: 0.8rem; line-height: 1.5; @@ -39,7 +39,7 @@ &__cta { margin: 30px auto auto auto; - @include mixins.media-query(medium) { + @include media-query(medium) { margin: 40px auto 0 0; } } diff --git a/wagtailio/static/sass/components/_code-block.scss b/wagtailio/static/sass/components/_code-block.scss index 955cab2db..53fe0abe3 100644 --- a/wagtailio/static/sass/components/_code-block.scss +++ b/wagtailio/static/sass/components/_code-block.scss @@ -1,25 +1,25 @@ -@use "../abstracts/mixins"; +@use "../abstracts/mixins" as *; .code-block { - @include mixins.sf-spacing(2); - + @include sf-spacing(2); + grid-column: 2 / span 2; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 3 / span 3; } &--markdownblock { // Ensure HTML components are styled correctly. - @include mixins.richtext(); - + @include richtext(); + // Make `CodeBlock` and code blocks within `MarkDownBlock` look the same. pre { - @include mixins.sf-spacing(2); + @include sf-spacing(2); } } } diff --git a/wagtailio/static/sass/components/_code-snippet.scss b/wagtailio/static/sass/components/_code-snippet.scss index 45c18a8a0..61076758d 100644 --- a/wagtailio/static/sass/components/_code-snippet.scss +++ b/wagtailio/static/sass/components/_code-snippet.scss @@ -1,10 +1,10 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .code-snippet { $root: &; background-color: var(--color--highlight); - color: variables.$color--white; + color: $color--white; display: flex; align-items: center; padding: 15px 20px; @@ -16,7 +16,7 @@ font-size: 0.9375rem; justify-content: space-between; - @include mixins.media-query(medium) { + @include media-query(medium) { justify-content: flex-start; grid-column: 2; font-size: 1rem; @@ -26,16 +26,16 @@ pre { margin: 0 15px 0 0; white-space: nowrap; - font-weight: variables.$weight--bold; - font-family: variables.$font--code; + font-weight: $weight--bold; + font-family: $font--code; - @include mixins.media-query(medium) { + @include media-query(medium) { margin: 0 70px 0 0; } } &__icon { - fill: variables.$color--eggshell; + fill: $color--eggshell; width: 20px; height: 20px; transition: color 0.3s; @@ -47,7 +47,7 @@ &:hover, &:active, &:focus { - fill: variables.$color--white; + fill: $color--white; @media (forced-colors: active) { fill: currentColor; @@ -76,7 +76,7 @@ z-index: -1; visibility: hidden; - @include mixins.media-query(large) { + @include media-query(large) { font-size: 0.7rem; } @@ -89,7 +89,7 @@ &--bottom-space { margin-bottom: 50px; - @include mixins.media-query(medium) { + @include media-query(medium) { margin-bottom: 100px; } } diff --git a/wagtailio/static/sass/components/_comparison-table.scss b/wagtailio/static/sass/components/_comparison-table.scss index 3c065b67c..96f2dc907 100644 --- a/wagtailio/static/sass/components/_comparison-table.scss +++ b/wagtailio/static/sass/components/_comparison-table.scss @@ -1,17 +1,17 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .comparison-table { padding: 0 0 20px 0; grid-column: 2 / span 2; width: 700px; - @include mixins.media-query(medium) { + @include media-query(medium) { width: auto; grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { padding: 0 0 100px 0; grid-column: 2 / span 5; } @@ -20,21 +20,21 @@ grid-column: 2 / span 2; grid-gap: 20px; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 2 / span 5; } th { // stylelint-disable-next-line declaration-property-value-allowed-list text-align: left; - font-weight: variables.$weight--bold; + font-weight: $weight--bold; width: 150px; - @include mixins.media-query(large) { + @include media-query(large) { width: 250px } } @@ -49,21 +49,21 @@ td, th { padding: 20px 20px 20px 0; - border: 1px variables.$color--cool-grey; + border: 1px $color--cool-grey; border-style: none none dashed none; > div > p { font-size: 1rem; line-height: 1.5rem; - @include mixins.media-query(large) { + @include media-query(large) { font-size: 0.8rem; line-height: 1.2rem; } } .theme-dark & { - border-color: variables.$color--black; + border-color: $color--black; } } } diff --git a/wagtailio/static/sass/components/_cookie-message.scss b/wagtailio/static/sass/components/_cookie-message.scss index 662dae9a1..e2f2afe81 100644 --- a/wagtailio/static/sass/components/_cookie-message.scss +++ b/wagtailio/static/sass/components/_cookie-message.scss @@ -1,9 +1,9 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .cookie { $root: &; - @include mixins.z-index(modal); + @include z-index(modal); margin: 0 10px 10px; position: fixed; right: auto; @@ -25,11 +25,11 @@ } &__container { - padding: variables.$gutter-sm; + padding: $gutter-sm; display: flex; align-items: center; justify-content: space-between; - max-width: (variables.$gutter-sm * 35); + max-width: ($gutter-sm * 35); margin: 0 auto; line-height: 1.4; color: var(--color--text); @@ -38,7 +38,7 @@ border-radius: 5px; .theme-dark & { - border-color: variables.$color--grey; + border-color: $color--grey; } } diff --git a/wagtailio/static/sass/components/_cta-block.scss b/wagtailio/static/sass/components/_cta-block.scss index cead2aea0..e0120eb85 100644 --- a/wagtailio/static/sass/components/_cta-block.scss +++ b/wagtailio/static/sass/components/_cta-block.scss @@ -1,10 +1,10 @@ -@use "../abstracts/mixins"; +@use "../abstracts/mixins" as *; .cta-block { - @include mixins.sf-spacing(2); + @include sf-spacing(2); grid-column: 2 / span 3; - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 2 / span 5; } } diff --git a/wagtailio/static/sass/components/_cta.scss b/wagtailio/static/sass/components/_cta.scss index 2aab9781f..c6dbff656 100644 --- a/wagtailio/static/sass/components/_cta.scss +++ b/wagtailio/static/sass/components/_cta.scss @@ -1,9 +1,9 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .cta { $root: &; - @include mixins.sf-spacing(3); + @include sf-spacing(3); padding: 30px; text-decoration: none; display: flex; @@ -15,11 +15,11 @@ grid-column: 2 / span 2; transition: background-color 0.3s; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { padding: 25px 30px; grid-column: 3 / span 3; @@ -43,11 +43,11 @@ #{$root}__title, #{$root}__description { - color: variables.$color--white; + color: $color--white; } > svg { - color: variables.$color--white; + color: $color--white; transform: translateX(10px) scale(1.1); @media (forced-colors: active) { @@ -60,7 +60,7 @@ color: var(--color--interaction); margin-bottom: 10px; - @include mixins.media-query(medium) { + @include media-query(medium) { margin-bottom: 5px; } } diff --git a/wagtailio/static/sass/components/_document.scss b/wagtailio/static/sass/components/_document.scss index 0a75725bf..859d89f47 100644 --- a/wagtailio/static/sass/components/_document.scss +++ b/wagtailio/static/sass/components/_document.scss @@ -1,21 +1,21 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .document { - @include mixins.sf-spacing(2); + @include sf-spacing(2); grid-column: 2 / span 2; - color: variables.$color--teal; + color: $color--teal; transition: color 0.3s; &:hover { color: var(--color--highlight); } - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 2 / span 5; } } diff --git a/wagtailio/static/sass/components/_embed.scss b/wagtailio/static/sass/components/_embed.scss index 6fe356ead..f46514a85 100644 --- a/wagtailio/static/sass/components/_embed.scss +++ b/wagtailio/static/sass/components/_embed.scss @@ -1,14 +1,14 @@ -@use "../abstracts/mixins"; +@use "../abstracts/mixins" as *; .embed { - @include mixins.sf-spacing(2); + @include sf-spacing(2); grid-column: 2 / span 2; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 3 / span 3; } } diff --git a/wagtailio/static/sass/components/_error-404.scss b/wagtailio/static/sass/components/_error-404.scss index 47a787cd2..fb286f8a5 100644 --- a/wagtailio/static/sass/components/_error-404.scss +++ b/wagtailio/static/sass/components/_error-404.scss @@ -1,9 +1,9 @@ -@use "../abstracts/mixins"; +@use "../abstracts/mixins" as *; .error-404 { position: relative; - @include mixins.media-query(large) { + @include media-query(large) { min-height: 700px; } @@ -11,11 +11,11 @@ &__heading { grid-column: 2 / span 2; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 2 / span 4; } } @@ -28,12 +28,12 @@ grid-column: 2 / span 2; margin: 0 0 50px 0; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 3; margin: 0 0 100px 0; } - @include mixins.media-query(large) { + @include media-query(large) { margin: 0 20% 150px 0; } } @@ -47,7 +47,7 @@ inset: 30% 70%; display: none; - @include mixins.media-query(large) { + @include media-query(large) { display: block; } } diff --git a/wagtailio/static/sass/components/_feature.scss b/wagtailio/static/sass/components/_feature.scss index 7cb5645fe..30ffcfff8 100644 --- a/wagtailio/static/sass/components/_feature.scss +++ b/wagtailio/static/sass/components/_feature.scss @@ -1,4 +1,4 @@ -@use "../abstracts/variables"; +@use "../abstracts/variables" as *; .feature { $root: &; @@ -12,8 +12,8 @@ } &__link { - font-weight: variables.$weight--bold; - color: variables.$color--teal; + font-weight: $weight--bold; + color: $color--teal; transition: color 0.3s; text-decoration: none; diff --git a/wagtailio/static/sass/components/_features.scss b/wagtailio/static/sass/components/_features.scss index a754537c5..2637e328d 100644 --- a/wagtailio/static/sass/components/_features.scss +++ b/wagtailio/static/sass/components/_features.scss @@ -1,8 +1,8 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .features { - @include mixins.sf-spacing(2); + @include sf-spacing(2); &__filters { display: flex; @@ -11,12 +11,12 @@ margin-bottom: 40px; flex-direction: column; - @include mixins.media-query(medium) { + @include media-query(medium) { flex-flow: row wrap; grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { margin-bottom: 100px; grid-column: 2 / span 5; } @@ -40,7 +40,7 @@ &:checked + label { border-color: var(--color--active); background-color: var(--color--active); - color: variables.$color--white; + color: $color--white; } &:checked + label::before { @@ -58,7 +58,7 @@ padding: 10px 10px 10px 40px; border-radius: 6px; position: relative; - font-weight: variables.$weight--bold; + font-weight: $weight--bold; &:hover { cursor: pointer; @@ -93,19 +93,19 @@ &__list-item { grid-column: 2 / span 2; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 3; } &:nth-child(odd) { - @include mixins.media-query(large) { + @include media-query(large) { padding-right: 20%; grid-column: 2 / span 2; } } &:nth-child(even) { - @include mixins.media-query(large) { + @include media-query(large) { padding-right: 20%; grid-column: 4 / span 2; } @@ -115,11 +115,11 @@ &__section-heading { grid-column: 2 / span 2; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 2 / span 5; } } diff --git a/wagtailio/static/sass/components/_footer-menu.scss b/wagtailio/static/sass/components/_footer-menu.scss index 489d63e78..5b20c94e9 100644 --- a/wagtailio/static/sass/components/_footer-menu.scss +++ b/wagtailio/static/sass/components/_footer-menu.scss @@ -1,5 +1,5 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .footer-menu { $root: &; @@ -8,12 +8,12 @@ border-top: 1px solid transparent; border-bottom: 1px solid transparent; - @include mixins.media-query(medium) { + @include media-query(medium) { padding: 80px 0; } &__grid { - @include mixins.media-query(large) { + @include media-query(large) { grid-column-gap: 15px; } } @@ -22,14 +22,14 @@ grid-column: 2 / span 2; margin-bottom: 17px; - @include mixins.media-query(large) { + @include media-query(large) { display: flex; flex-direction: column; grid-column: auto; } &:first-child { - @include mixins.media-query(large) { + @include media-query(large) { grid-column-start: 2; } } @@ -41,7 +41,7 @@ margin-top: 18px; margin-left: 40px; - @include mixins.media-query(large) { + @include media-query(large) { display: block; margin-left: 0; } @@ -53,7 +53,7 @@ fill: var(--color--interaction); flex-shrink: 0; - @include mixins.media-query(large) { + @include media-query(large) { display: none; } @@ -68,7 +68,7 @@ padding: 5px; cursor: pointer; - @include mixins.media-query(large) { + @include media-query(large) { display: none; } } @@ -76,7 +76,7 @@ &__item { margin-bottom: 10px; - @include mixins.media-query(large) { + @include media-query(large) { font-size: 0.7rem; line-height: 1.05rem; } @@ -85,7 +85,7 @@ &__link { color: var(--color--text); text-decoration: none; - transition: color variables.$transition; + transition: color $transition; &:hover { text-decoration: underline; @@ -96,13 +96,13 @@ &__column-header { display: flex; - @include mixins.media-query(large) { + @include media-query(large) { display: block; } } &__column-heading { - font-weight: variables.$weight--bold; + font-weight: $weight--bold; font-size: 1.25rem; margin-left: 10px; display: none; @@ -112,7 +112,7 @@ display: block; } - @include mixins.media-query(large) { + @include media-query(large) { font-size: 1rem; margin-left: 0; display: block; @@ -142,7 +142,7 @@ &__logo { display: none; - @include mixins.media-query(large) { + @include media-query(large) { margin-top: auto; width: 155px; height: 65px; diff --git a/wagtailio/static/sass/components/_form.scss b/wagtailio/static/sass/components/_form.scss index 3a6e85d47..c24b356bc 100644 --- a/wagtailio/static/sass/components/_form.scss +++ b/wagtailio/static/sass/components/_form.scss @@ -1,5 +1,5 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .form { $root: &; @@ -11,7 +11,7 @@ background-color: var(--color--light-dark); font-size: 1rem; padding: 11px 20px; - border-radius: variables.$rounded-md; + border-radius: $rounded-md; &::placeholder { font-size: 16px; @@ -24,17 +24,17 @@ flex-wrap: wrap; gap: 20px; - @include mixins.media-query(medium) { + @include media-query(medium) { gap: 0; // stylelint-disable max-nesting-depth #{$root}__input { - border-radius: variables.$rounded-md 0 0 variables.$rounded-md; + border-radius: $rounded-md 0 0 $rounded-md; border-right: 0; } .button { - border-radius: 0 variables.$rounded-md variables.$rounded-md 0; + border-radius: 0 $rounded-md $rounded-md 0; } } } diff --git a/wagtailio/static/sass/components/_get-started.scss b/wagtailio/static/sass/components/_get-started.scss index ac7e56474..01cd6c543 100644 --- a/wagtailio/static/sass/components/_get-started.scss +++ b/wagtailio/static/sass/components/_get-started.scss @@ -1,26 +1,26 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .get-started { padding-bottom: 50px; - @include mixins.media-query(medium) { + @include media-query(medium) { padding-bottom: 100px; } - @include mixins.media-query(large) { + @include media-query(large) { padding-bottom: 200px; } &__heading { grid-column: 2 / span 2; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 3; margin-bottom: 40px; } - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 2 / span 5; margin-bottom: 100px; } @@ -33,12 +33,12 @@ row-gap: 20px; grid-column: 2 / span 2; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 3; row-gap: 50px; } - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 2 / span 5; flex-flow: row wrap; row-gap: 100px; @@ -46,9 +46,9 @@ } &__list-item { - margin-bottom: variables.$gutter; + margin-bottom: $gutter; - @include mixins.media-query(large) { + @include media-query(large) { margin-bottom: 0; flex-basis: 50%; padding: 0 calc(5% + 40px) 0 40px; diff --git a/wagtailio/static/sass/components/_grid.scss b/wagtailio/static/sass/components/_grid.scss index 80c8863fb..b4fef9972 100644 --- a/wagtailio/static/sass/components/_grid.scss +++ b/wagtailio/static/sass/components/_grid.scss @@ -1,18 +1,18 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .grid { display: grid; - grid-template-columns: variables.$gutter 1fr 1fr variables.$gutter; - max-width: variables.$site-width; + grid-template-columns: $gutter 1fr 1fr $gutter; + max-width: $site-width; margin: 0 auto; - @include mixins.media-query(medium) { - grid-template-columns: calc(variables.$gutter * 2) 1fr 1fr 1fr calc(variables.$gutter * 2); + @include media-query(medium) { + grid-template-columns: calc($gutter * 2) 1fr 1fr 1fr calc($gutter * 2); } - @include mixins.media-query(large) { - grid-template-columns: calc(variables.$gutter * 3) 1fr 1fr 1fr 1fr 1fr calc(variables.$gutter * 3); + @include media-query(large) { + grid-template-columns: calc($gutter * 3) 1fr 1fr 1fr 1fr 1fr calc($gutter * 3); } // allow scrolling on mobile tables @@ -20,7 +20,7 @@ margin: 0 auto 50px; overflow-x: scroll; - @include mixins.media-query(medium) { + @include media-query(medium) { margin: 0 auto; overflow-x: auto; } diff --git a/wagtailio/static/sass/components/_heading.scss b/wagtailio/static/sass/components/_heading.scss index 690f7b104..511d1598e 100644 --- a/wagtailio/static/sass/components/_heading.scss +++ b/wagtailio/static/sass/components/_heading.scss @@ -1,13 +1,13 @@ -@use "../abstracts/mixins"; +@use "../abstracts/mixins" as *; .heading { grid-column: 2 / span 2; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 3 / span 4; } } diff --git a/wagtailio/static/sass/components/_headline.scss b/wagtailio/static/sass/components/_headline.scss index ff44b7e8b..38e35a524 100644 --- a/wagtailio/static/sass/components/_headline.scss +++ b/wagtailio/static/sass/components/_headline.scss @@ -1,17 +1,17 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .headline { $root: &; - @include mixins.sf-spacing(2); + @include sf-spacing(2); position: relative; padding: 80px 0 0; - @include mixins.media-query(medium) { + @include media-query(medium) { padding: 130px 0 0; } - @include mixins.media-query(large) { + @include media-query(large) { padding: 230px 0 0; } @@ -24,23 +24,23 @@ } &__inner { - @include mixins.z-index(overlap); + @include z-index(overlap); grid-column: 2 / span 2; - - @include mixins.media-query(medium) { + + @include media-query(medium) { grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 2 / span 3; } } &__heading { - - @include mixins.media-query(large) { + + @include media-query(large) { width: 120%; // to get a bit of overlap on the icon - padding-top: variables.$gutter-lg; + padding-top: $gutter-lg; } } @@ -52,7 +52,7 @@ margin-bottom: 20px; grid-column: 2 / span 2; - @include mixins.media-query(medium) { + @include media-query(medium) { margin-bottom: 40px; } } @@ -60,20 +60,20 @@ &__button-wrap { margin: 0; - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 2 / span 2; } } &__icon { - @include mixins.z-index(base); + @include z-index(base); position: absolute; width: 230px; height: 300px; right: -70px; top: -110px; - @include mixins.media-query(large) { + @include media-query(large) { width: 500px; height: 545px; right: 70px; @@ -90,28 +90,28 @@ background-color: var(--color--highlight); padding: 80px 0; - @include mixins.media-query(medium) { + @include media-query(medium) { padding: 130px 0 100px; } - @include mixins.media-query(large) { + @include media-query(large) { padding: 130px 0 130px; } #{$root}__intro, #{$root}__heading, #{$root}__subheading { - color: variables.$color--white; + color: $color--white; } // Icon overrides .icon__svg-bg { - stroke: rgba(variables.$color--teal-200, 0.2); + stroke: rgba($color--teal-200, 0.2); fill: transparent; } .icon__svg-fg { - fill: variables.$color--teal-200; + fill: $color--teal-200; stroke: none; opacity: 0.5; transform: rotate(3deg) translate(40px, -20px) scale(0.9); diff --git a/wagtailio/static/sass/components/_hero.scss b/wagtailio/static/sass/components/_hero.scss index 321b851ec..67028d079 100644 --- a/wagtailio/static/sass/components/_hero.scss +++ b/wagtailio/static/sass/components/_hero.scss @@ -1,17 +1,17 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .hero { $root: &; - @include mixins.sf-spacing(6); + @include sf-spacing(6); position: relative; grid-column: 2 / span 2; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 2 / span 5; } @@ -22,12 +22,12 @@ &__inner { padding-top: 20px; - @include mixins.media-query(medium) { + @include media-query(medium) { padding-top: 40px; max-width: 80%; } - @include mixins.media-query(large) { + @include media-query(large) { padding-top: 80px; max-width: 70%; } @@ -36,29 +36,29 @@ &__intro { margin-bottom: 20px; - @include mixins.media-query(medium) { + @include media-query(medium) { margin-bottom: 40px; } - @include mixins.media-query(large) { + @include media-query(large) { margin-right: 80px; } a { - transition: color variables.$transition; + transition: color $transition; } } &__heading { - @include mixins.media-query(large) { + @include media-query(large) { width: 110%; // to get a bit of overlap on the icon max-width: 92vw; // prevent off screen } } &__subheading { - font-weight: variables.$weight--regular; + font-weight: $weight--regular; } &__icon { @@ -69,14 +69,14 @@ width: 170px; height: 170px; - @include mixins.media-query(medium) { + @include media-query(medium) { right: -50px; top: 40px; width: 250px; height: 250px; } - @include mixins.media-query(large) { + @include media-query(large) { right: 0; width: 410px; height: 410px; @@ -93,7 +93,7 @@ width: 670px; height: 460px; - @include mixins.media-query(large) { + @include media-query(large) { top: -36px; width: 760px; height: 600px; @@ -136,12 +136,12 @@ &--features { margin-bottom: 20px; - @include mixins.media-query(large) { + @include media-query(large) { margin-bottom: 50px; } #{$root}__subheading { - font-weight: variables.$weight--regular; + font-weight: $weight--regular; } } @@ -153,13 +153,13 @@ } #{$root}__subheading { - font-weight: variables.$weight--regular; + font-weight: $weight--regular; } #{$root}__intro { margin-bottom: 50px; - @include mixins.media-query(medium) { + @include media-query(medium) { max-width: 60%; } } @@ -167,7 +167,7 @@ #{$root}__icon { display: none; - @include mixins.media-query(medium) { + @include media-query(medium) { display: block; } } diff --git a/wagtailio/static/sass/components/_highlight.scss b/wagtailio/static/sass/components/_highlight.scss index 17becba5d..9ac413cab 100644 --- a/wagtailio/static/sass/components/_highlight.scss +++ b/wagtailio/static/sass/components/_highlight.scss @@ -1,8 +1,8 @@ -@use "../abstracts/mixins"; +@use "../abstracts/mixins" as *; .highlight { $root: &; - @include mixins.sf-spacing(2); + @include sf-spacing(2); align-items: center; grid-auto-flow: dense; @@ -10,11 +10,11 @@ grid-column: 2 / span 2; margin-bottom: 20px; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 2 / span 3; grid-row: auto; padding-right: 100px; @@ -26,11 +26,11 @@ &__content { grid-column: 2 / span 2; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 5 / span 2; } } @@ -40,7 +40,7 @@ align-items: center; margin-bottom: 10px; - @include mixins.media-query(medium) { + @include media-query(medium) { margin-bottom: 20px; } } @@ -51,7 +51,7 @@ height: 40px; - @include mixins.media-query(large) { + @include media-query(large) { width: 60px; height: 60px; } @@ -68,7 +68,7 @@ &__description { margin-bottom: 20px; - @include mixins.media-query(large) { + @include media-query(large) { margin-bottom: 40px; } } @@ -76,7 +76,7 @@ // image on right / content on left &--reverse { #{$root}__image { - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 4 / span 3; margin-left: auto; padding-left: 100px; @@ -85,7 +85,7 @@ } #{$root}__content { - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 2 / span 2; } } diff --git a/wagtailio/static/sass/components/_home-embed.scss b/wagtailio/static/sass/components/_home-embed.scss index 4af0ced3a..17acfd4f4 100644 --- a/wagtailio/static/sass/components/_home-embed.scss +++ b/wagtailio/static/sass/components/_home-embed.scss @@ -1,12 +1,12 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .home-embed { max-width: 1024px; margin: 0 auto; - padding: 0 variables.$gutter 50px; + padding: 0 $gutter 50px; - @include mixins.media-query(medium) { - padding: 0 calc(variables.$gutter * 2) 100px; + @include media-query(medium) { + padding: 0 calc($gutter * 2) 100px; } } diff --git a/wagtailio/static/sass/components/_icon-bullet.scss b/wagtailio/static/sass/components/_icon-bullet.scss index cc9db214f..0b2d837a3 100644 --- a/wagtailio/static/sass/components/_icon-bullet.scss +++ b/wagtailio/static/sass/components/_icon-bullet.scss @@ -1,4 +1,4 @@ -@use "../abstracts/mixins"; +@use "../abstracts/mixins" as *; .icon-bullet { margin-bottom: 50px; @@ -9,7 +9,7 @@ height: 60px; margin-bottom: 10px; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 1; width: 75px; height: 75px; @@ -25,11 +25,11 @@ &__content { grid-column: 2 / span 2; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 3 / span 2; } - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 3 / span 3; } } diff --git a/wagtailio/static/sass/components/_icon-bullets.scss b/wagtailio/static/sass/components/_icon-bullets.scss index 17a676ead..8fdc459cb 100644 --- a/wagtailio/static/sass/components/_icon-bullets.scss +++ b/wagtailio/static/sass/components/_icon-bullets.scss @@ -1,6 +1,6 @@ -@use "../abstracts/mixins"; +@use "../abstracts/mixins" as *; .icon-bullets { - @include mixins.sf-spacing(2); + @include sf-spacing(2); padding: 0; } diff --git a/wagtailio/static/sass/components/_icon-link.scss b/wagtailio/static/sass/components/_icon-link.scss index 5cc5a6e69..8c3e077c2 100644 --- a/wagtailio/static/sass/components/_icon-link.scss +++ b/wagtailio/static/sass/components/_icon-link.scss @@ -1,5 +1,5 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .icon-link { $root: &; @@ -8,7 +8,7 @@ display: flex; column-gap: 15px; - @include mixins.media-query(medium) { + @include media-query(medium) { column-gap: 20px; } @@ -17,7 +17,7 @@ height: 45px; flex-shrink: 0; - @include mixins.media-query(medium) { + @include media-query(medium) { width: 70px; height: 85px; } @@ -29,7 +29,7 @@ } &__content { - @include mixins.media-query(medium) { + @include media-query(medium) { margin-left: 30px; } } @@ -40,7 +40,7 @@ } &__subheading { - font-weight: variables.$weight--regular; + font-weight: $weight--regular; color: var(--color--meta); margin-bottom: 5px; } @@ -53,7 +53,7 @@ // Icon overrides .icon__svg-bg { transform: rotate(5deg) scale(0.95); - fill: variables.$color--teal-200; + fill: $color--teal-200; } } @@ -61,7 +61,7 @@ .modal__grid--get-started & { #{$root}__svg { - @include mixins.media-query(medium) { + @include media-query(medium) { width: 100px; height: 95px; } @@ -72,14 +72,14 @@ .modal__grid--get-started & { #{$root}__heading { - @include mixins.media-query(smallonly) { + @include media-query(smallonly) { font-size: 21px; line-height: 1.4; } } #{$root}__subheading { - @include mixins.media-query(smallonly) { + @include media-query(smallonly) { font-size: 16px; line-height: 1.4; } @@ -88,7 +88,7 @@ #{$root}__svg { display: none; - @include mixins.media-query(medium) { + @include media-query(medium) { display: block; } } @@ -98,14 +98,14 @@ .get-started & { flex-direction: column; - @include mixins.media-query(medium) { + @include media-query(medium) { flex-direction: row; } #{$root}__svg { width: 100px; height: 95px; - margin-bottom: variables.$gutter-sm; + margin-bottom: $gutter-sm; } } } diff --git a/wagtailio/static/sass/components/_icon.scss b/wagtailio/static/sass/components/_icon.scss index 0c768bfd2..82efb4cbe 100644 --- a/wagtailio/static/sass/components/_icon.scss +++ b/wagtailio/static/sass/components/_icon.scss @@ -1,4 +1,4 @@ -@use "../abstracts/variables"; +@use "../abstracts/variables" as *; // Hover states should be handled on a component basis - not in here .icon { @@ -11,7 +11,7 @@ &__svg { position: absolute; overflow: visible; - fill: variables.$color--primary; + fill: $color--primary; .sub-nav & { inset: 0 auto auto 0; @@ -32,7 +32,7 @@ &__svg-fg { fill: transparent; - stroke: variables.$color--black; + stroke: $color--black; stroke-width: 2px; .hero &, diff --git a/wagtailio/static/sass/components/_image.scss b/wagtailio/static/sass/components/_image.scss index 493c825f1..5d1a0bd98 100644 --- a/wagtailio/static/sass/components/_image.scss +++ b/wagtailio/static/sass/components/_image.scss @@ -1,14 +1,14 @@ -@use "../abstracts/mixins"; +@use "../abstracts/mixins" as *; .image { - @include mixins.sf-spacing(2); + @include sf-spacing(2); grid-column: 2 / span 2; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 3 / span 3; } } diff --git a/wagtailio/static/sass/components/_jump-links.scss b/wagtailio/static/sass/components/_jump-links.scss index d839295c9..d1ddf50b1 100644 --- a/wagtailio/static/sass/components/_jump-links.scss +++ b/wagtailio/static/sass/components/_jump-links.scss @@ -1,10 +1,10 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .jump-links { grid-column: 2/span 2; - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 2/span 5; } @@ -29,7 +29,7 @@ &__link { color: var(--color--text); - transition: color variables.$transition; + transition: color $transition; &:hover, &:focus { diff --git a/wagtailio/static/sass/components/_logo-card-grid.scss b/wagtailio/static/sass/components/_logo-card-grid.scss index d97eeef50..d213297e7 100644 --- a/wagtailio/static/sass/components/_logo-card-grid.scss +++ b/wagtailio/static/sass/components/_logo-card-grid.scss @@ -1,18 +1,18 @@ -@use "../abstracts/mixins"; +@use "../abstracts/mixins" as *; .logo-card-grid { - @include mixins.sf-spacing(2); + @include sf-spacing(2); &__heading { margin-bottom: 20px; grid-column: 2 / span 2; - @include mixins.media-query(medium) { + @include media-query(medium) { margin-bottom: 40px; grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 2 / span 4; } } @@ -21,11 +21,11 @@ list-style: none; row-gap: 20px; - @include mixins.media-query(medium) { + @include media-query(medium) { row-gap: 50px; } - @include mixins.media-query(large) { + @include media-query(large) { row-gap: 100px; } } @@ -34,7 +34,7 @@ &__item { grid-column: 2 / span 2; - @include mixins.media-query(large) { + @include media-query(large) { &:nth-child(odd) { grid-column: 2 / span 2; max-width: 75%; diff --git a/wagtailio/static/sass/components/_logo-card.scss b/wagtailio/static/sass/components/_logo-card.scss index 7e7a62888..00d527757 100644 --- a/wagtailio/static/sass/components/_logo-card.scss +++ b/wagtailio/static/sass/components/_logo-card.scss @@ -1,5 +1,5 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .logo-card { $root: &; @@ -18,7 +18,7 @@ margin-bottom: 10px; p { - font-weight: variables.$weight--regular; + font-weight: $weight--regular; } } @@ -32,7 +32,7 @@ margin-top: 10px; padding-bottom: 20px; - @include mixins.media-query(large) { + @include media-query(large) { padding-bottom: 35px; font-size: 0.8rem; } @@ -52,10 +52,10 @@ } &:is(a) { - @include mixins.offset-bg-left(); + @include offset-bg-left(); &:hover { - @include mixins.offset-bg-hover-left(); + @include offset-bg-hover-left(); #{$root}__heading { color: var(--color--interaction); @@ -72,7 +72,7 @@ .theme-dark & { #{$root}__image { padding: 10px 20px; - background-color: variables.$color--white; + background-color: $color--white; } #{$root}__author-wrap #{$root}__image { diff --git a/wagtailio/static/sass/components/_logos.scss b/wagtailio/static/sass/components/_logos.scss index e125df757..dbc4aeb0e 100644 --- a/wagtailio/static/sass/components/_logos.scss +++ b/wagtailio/static/sass/components/_logos.scss @@ -1,9 +1,9 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .logos { - @include mixins.sf-spacing(4); - @include mixins.z-index(overlap); // so they sit above the large icons + @include sf-spacing(4); + @include z-index(overlap); // so they sit above the large icons $root: &; position: relative; @@ -11,11 +11,11 @@ margin-bottom: 60px; grid-column: 2 / span 2; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 2 / span 4; } } @@ -28,18 +28,18 @@ gap: 20px; justify-content: center; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 3; gap: 55px; justify-content: flex-start; } - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 2 / span 5; } .theme-dark & { - @include mixins.media-query(medium) { + @include media-query(medium) { gap: 30px; } } @@ -66,7 +66,7 @@ display: flex; align-items: center; padding: 10px 20px; - background-color: variables.$color--white; + background-color: $color--white; border-radius: 3px; } } diff --git a/wagtailio/static/sass/components/_meta.scss b/wagtailio/static/sass/components/_meta.scss index 541f88f9e..759b867ff 100644 --- a/wagtailio/static/sass/components/_meta.scss +++ b/wagtailio/static/sass/components/_meta.scss @@ -1,4 +1,4 @@ -@use "../abstracts/variables"; +@use "../abstracts/variables" as *; .meta { display: flex; @@ -27,7 +27,7 @@ // Overrides .logo-card--article & { &__text { - font-weight: variables.$weight--bold; + font-weight: $weight--bold; } } } diff --git a/wagtailio/static/sass/components/_milestone-item.scss b/wagtailio/static/sass/components/_milestone-item.scss index 8fcfe19ff..c866b8784 100644 --- a/wagtailio/static/sass/components/_milestone-item.scss +++ b/wagtailio/static/sass/components/_milestone-item.scss @@ -1,4 +1,4 @@ -@use "../abstracts/variables"; +@use "../abstracts/variables" as *; .milestone-item { $root: &; @@ -10,7 +10,7 @@ padding: 20px; background-color: var(--color--card); border: 1px solid transparent; - border-radius: variables.$rounded-md; + border-radius: $rounded-md; &__heading { $padding: 18px; @@ -21,12 +21,12 @@ margin-top: -$padding; padding: $padding; margin-bottom: 6px; - font-weight: variables.$weight--semibold; + font-weight: $weight--semibold; } &__external-link { color: var(--color--text); - transition: color variables.$transition; + transition: color $transition; text-decoration: none; &:hover, @@ -60,13 +60,13 @@ } &__label { - font-weight: variables.$weight--regular; - color: variables.$color--teal; - border: 1px solid variables.$color--teal-100; + font-weight: $weight--regular; + color: $color--teal; + border: 1px solid $color--teal-100; background-color: var(--color--tag); padding: 2px 8px; white-space: nowrap; - border-radius: variables.$rounded-xl; + border-radius: $rounded-xl; } &__sponsor-label { @@ -77,9 +77,9 @@ margin-inline: auto -22px; width: max-content; white-space: nowrap; - font-weight: variables.$weight--semibold; + font-weight: $weight--semibold; text-decoration: none; - color: variables.$color--white; + color: $color--white; border: 1px solid transparent; background-color: var(--color--highlight); padding: 2px 8px; @@ -90,7 +90,7 @@ } &:hover, &:focus-visible { - color: variables.$color--teal-100; + color: $color--teal-100; outline-offset: 4px; } } @@ -98,16 +98,16 @@ .theme-dark & { #{$root}__label { border-color: var(--color--border); - color: variables.$color--cool-grey; + color: $color--cool-grey; } #{$root}__sponsor-label { - background-color: variables.$color--teal-200; - color: variables.$color--black; + background-color: $color--teal-200; + color: $color--black; &:hover, &:focus { - background-color: variables.$color--white; + background-color: $color--white; } } } diff --git a/wagtailio/static/sass/components/_milestones.scss b/wagtailio/static/sass/components/_milestones.scss index f504804b6..8f8b3a428 100644 --- a/wagtailio/static/sass/components/_milestones.scss +++ b/wagtailio/static/sass/components/_milestones.scss @@ -1,11 +1,11 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .milestones { position: relative; &__border { - @include mixins.z-index(under); + @include z-index(under); position: absolute; top: 0; inset-inline-start: 24px; @@ -23,9 +23,9 @@ gap: 8px; grid-column: 2/-2; margin-inline-start: 20px; - margin-bottom: variables.$gutter-xl; + margin-bottom: $gutter-xl; - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 2/span 4; } } @@ -34,10 +34,10 @@ .milestone { grid-column: 2 / -2; width: 100%; - margin-bottom: variables.$gutter-xl; + margin-bottom: $gutter-xl; &__header { - margin-bottom: variables.$gutter; + margin-bottom: $gutter; display: flex; align-items: center; gap: 16px; @@ -59,13 +59,13 @@ &__heading-subtitle { color: var(--color--meta); - font-weight: variables.$weight--regular; + font-weight: $weight--regular; } &__heading-link { color: var(--color--text); text-decoration: none; - transition: color variables.$transition; + transition: color $transition; } &__items { @@ -74,15 +74,15 @@ grid-auto-rows: 1fr; gap: 20px; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-template-columns: 1fr 1fr; } - @include mixins.media-query(large) { + @include media-query(large) { grid-template-columns: 1fr 1fr 1fr; } - @include mixins.media-query(extra-large) { + @include media-query(extra-large) { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } } diff --git a/wagtailio/static/sass/components/_modal.scss b/wagtailio/static/sass/components/_modal.scss index 410dddcdf..1b2a584f3 100644 --- a/wagtailio/static/sass/components/_modal.scss +++ b/wagtailio/static/sass/components/_modal.scss @@ -1,9 +1,9 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .modal { $root: &; - @include mixins.z-index(modal); + @include z-index(modal); position: relative; &--get-started { @@ -14,7 +14,7 @@ #{$root}__content { padding: 0 10px 10px; - @include mixins.media-query(large) { + @include media-query(large) { padding: 0 40px 40px; } } @@ -31,7 +31,7 @@ padding: 10px; inset: 50px 0; - @include mixins.media-query(medium) { + @include media-query(medium) { padding: 25px; inset: 140px 0; } @@ -40,15 +40,15 @@ #{$root}__close-button { position: absolute; inset: -10px -10px auto auto; - background-color: variables.$color--off-black; + background-color: $color--off-black; border-radius: 50%; width: 30px; height: 30px; - border: 3px solid variables.$color--white; + border: 3px solid $color--white; } #{$root}__close-icon { - fill: variables.$color--white; + fill: $color--white; width: 12px; height: 22px; @@ -59,17 +59,17 @@ } &__overlay { - @include mixins.z-index(modal); + @include z-index(modal); position: fixed; inset: 0; - background: variables.$color--off-black-30; + background: $color--off-black-30; display: flex; justify-content: center; align-items: center; } &__header { - @include mixins.z-index(modal-controls); + @include z-index(modal-controls); position: relative; } @@ -85,7 +85,7 @@ position: relative; border: 2px solid transparent; - @include mixins.media-query(large) { + @include media-query(large) { padding: 30px; } } @@ -96,14 +96,14 @@ display: grid; row-gap: 40px; - @include mixins.media-query(large) { + @include media-query(large) { row-gap: 80px; grid-template-columns: 1fr 1fr; } #{$root}__grid-item { // stylelint-disable-next-line max-nesting-depth - @include mixins.media-query(large) { + @include media-query(large) { max-width: 75%; } } @@ -124,7 +124,7 @@ &:hover, &:focus { #{$root}__close-icon { - fill: variables.$color--teal-100; + fill: $color--teal-100; } } } @@ -135,19 +135,19 @@ width: 20px; height: 20px; pointer-events: none; - transition: fill variables.$transition; + transition: fill $transition; } &__title { margin-bottom: 30px; margin-top: -20px; - @include mixins.media-query(medium) { + @include media-query(medium) { margin-bottom: 40px; margin-top: 0; } - @include mixins.media-query(large) { + @include media-query(large) { margin-bottom: 60px; } } diff --git a/wagtailio/static/sass/components/_nav-cta.scss b/wagtailio/static/sass/components/_nav-cta.scss index 9947acc10..2bcfa38d1 100644 --- a/wagtailio/static/sass/components/_nav-cta.scss +++ b/wagtailio/static/sass/components/_nav-cta.scss @@ -1,21 +1,21 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .nav-cta { $root: &; display: block; position: relative; - color: variables.$color--white; + color: $color--white; text-decoration: none; padding: 20px 20px 50px 20px; background-color: var(--color--highlight); - @include mixins.media-query(medium) { + @include media-query(medium) { padding: 20px 50px 50px 50px; height: 100%; } - @media only screen and (min-width: variables.$header-desktop) { + @media only screen and (min-width: $header-desktop) { padding: 60px 60px 100px 60px; } @@ -24,12 +24,12 @@ color: var(--color--background); #{$root}__heading { - color: variables.$color--teal-100; + color: $color--teal-100; } #{$root}__arrow { transform: translate3d(20%, 0, 0) scale(1.1); - fill: variables.$color--white; + fill: $color--white; } .theme-dark & { @@ -39,15 +39,15 @@ } &__icon { - @include mixins.z-index(base); + @include z-index(base); position: absolute; top: 30px; right: 20px; width: 190px; height: auto; - fill: rgba(variables.$color--teal-200, 0.75); + fill: rgba($color--teal-200, 0.75); - @media only screen and (min-width: variables.$header-desktop) { + @media only screen and (min-width: $header-desktop) { top: 30px; right: 10px; width: 250px; @@ -55,12 +55,12 @@ } &__content { - @include mixins.z-index(overlap); + @include z-index(overlap); position: relative; padding-top: 40px; text-align: start; - @media only screen and (min-width: variables.$header-desktop) { + @media only screen and (min-width: $header-desktop) { padding-top: 100px; } } @@ -70,9 +70,9 @@ line-height: 1.1; margin-bottom: 10px; padding-right: 60px; - transition: color variables.$transition; + transition: color $transition; - @media only screen and (min-width: variables.$header-desktop) { + @media only screen and (min-width: $header-desktop) { padding-right: 0; font-size: 55px; } @@ -88,7 +88,7 @@ } &__description { - font-weight: variables.$weight--regular; + font-weight: $weight--regular; margin: 0; } @@ -96,14 +96,14 @@ position: absolute; bottom: 30px; right: 20px; - stroke: variables.$color--white; + stroke: $color--white; stroke-width: 4px; fill: transparent; width: 60px; height: 60px; - transition: transform variables.$transition, fill variables.$transition; + transition: transform $transition, fill $transition; - @media only screen and (min-width: variables.$header-desktop) { + @media only screen and (min-width: $header-desktop) { bottom: 50px; right: 60px; } diff --git a/wagtailio/static/sass/components/_newsletter-cta.scss b/wagtailio/static/sass/components/_newsletter-cta.scss index 9171fcdb1..5286b50bb 100644 --- a/wagtailio/static/sass/components/_newsletter-cta.scss +++ b/wagtailio/static/sass/components/_newsletter-cta.scss @@ -1,14 +1,14 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .newsletter-cta { grid-column: 2 / span 2; - border-radius: variables.$rounded-xl; + border-radius: $rounded-xl; border: 1px solid var(--color--text); margin-bottom: 50px; padding: 20px; - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 2 / span 5; padding: 60px; margin-bottom: 80px; @@ -16,7 +16,7 @@ &__form { - @include mixins.media-query(large) { + @include media-query(large) { display: flex; justify-content: stretch; max-width: 560px; diff --git a/wagtailio/static/sass/components/_overview-item.scss b/wagtailio/static/sass/components/_overview-item.scss index a1cdb4671..9e8280e40 100644 --- a/wagtailio/static/sass/components/_overview-item.scss +++ b/wagtailio/static/sass/components/_overview-item.scss @@ -1,4 +1,4 @@ -@use "../abstracts/variables"; +@use "../abstracts/variables" as *; .overview-item { display: flex; @@ -9,7 +9,7 @@ &__link { color: var(--color--text); - transition: color variables.$transition; + transition: color $transition; text-decoration: none; &:hover, @@ -49,7 +49,7 @@ font-size: 13px; text-decoration: none; color: var(--color--text); - transition: color variables.$transition; + transition: color $transition; &:hover, &:focus { diff --git a/wagtailio/static/sass/components/_overview.scss b/wagtailio/static/sass/components/_overview.scss index cc7789ab2..efe8df2e4 100644 --- a/wagtailio/static/sass/components/_overview.scss +++ b/wagtailio/static/sass/components/_overview.scss @@ -1,11 +1,11 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .overview { grid-column: 2 / span 2; width: 100%; - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 2 / span 5; } @@ -14,11 +14,11 @@ } &__section { - margin-bottom: variables.$gutter-xl; + margin-bottom: $gutter-xl; } &__section-title { - margin-bottom: variables.$gutter; + margin-bottom: $gutter; } &__sub-heading { @@ -28,12 +28,12 @@ &__sub-heading-link { color: var(--color--text); - transition: color variables.$transition; + transition: color $transition; text-decoration: none; &:hover, &:focus { - color: variables.$color--teal; + color: $color--teal; } &--edit { @@ -54,7 +54,7 @@ &__description-link { color: var(--color--text); text-decoration: none; - transition: color variables.$transition; + transition: color $transition; &:hover, &:focus { @@ -67,7 +67,7 @@ grid-template-columns: 1fr; gap: 20px; - @include mixins.media-query(large) { + @include media-query(large) { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } } diff --git a/wagtailio/static/sass/components/_pagination.scss b/wagtailio/static/sass/components/_pagination.scss index 23c2966dc..9fd22b28b 100644 --- a/wagtailio/static/sass/components/_pagination.scss +++ b/wagtailio/static/sass/components/_pagination.scss @@ -1,28 +1,28 @@ -@use "../abstracts/mixins"; +@use "../abstracts/mixins" as *; .pagination { $root: &; - @include mixins.sf-spacing(2); + @include sf-spacing(2); grid-column: 2 / span 2; display: flex; flex-direction: column; gap: 20px; align-items: center; - @include mixins.media-query(medium) { + @include media-query(medium) { display: block; grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 2 / span 5; } &__previous { padding: 10px; - @include mixins.media-query(medium) { + @include media-query(medium) { margin-right: 20px; padding: 15px 30px; } @@ -31,7 +31,7 @@ &__next { padding: 10px; - @include mixins.media-query(medium) { + @include media-query(medium) { padding: 15px 30px; margin-left: 20px; } @@ -43,8 +43,8 @@ justify-content: center; align-items: center; flex-direction: row; - - @include mixins.media-query(smallonly){ + + @include media-query(smallonly){ flex-direction: column; #{$root}__previous, #{$root}__next { diff --git a/wagtailio/static/sass/components/_primary-nav.scss b/wagtailio/static/sass/components/_primary-nav.scss index 8e0366114..6381d2392 100644 --- a/wagtailio/static/sass/components/_primary-nav.scss +++ b/wagtailio/static/sass/components/_primary-nav.scss @@ -1,5 +1,5 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .primary-nav { $root: &; @@ -14,7 +14,7 @@ margin: 0; list-style: none; - @media only screen and (min-width: variables.$header-desktop) { + @media only screen and (min-width: $header-desktop) { flex-direction: row; justify-content: flex-end; } @@ -25,15 +25,15 @@ cursor: pointer; width: 100%; padding: 15px 0; - font-weight: variables.$weight--bold; + font-weight: $weight--bold; text-align: center; border-bottom: 1px solid var(--color--border); - transition: color variables.$transition; + transition: color $transition; &:first-child { border-top: 1px solid var(--color--border); - @media only screen and (min-width: variables.$header-desktop) { + @media only screen and (min-width: $header-desktop) { border-top: 0; } } @@ -42,7 +42,7 @@ border-bottom: 0; } - @media only screen and (min-width: variables.$header-desktop) { + @media only screen and (min-width: $header-desktop) { width: auto; padding: 0; margin: 0 40px 0 0; @@ -72,7 +72,7 @@ } &__link { - color: rgba(variables.$color--off-black, -0.8); + color: rgba($color--off-black, -0.8); border-bottom: 1px solid transparent; transition: color, border 0.3s ease; @@ -80,25 +80,25 @@ &:focus { cursor: pointer; - @media only screen and (min-width: variables.$header-desktop) { - color: variables.$color--black; - border-bottom: 1px solid variables.$color--black; + @media only screen and (min-width: $header-desktop) { + color: $color--black; + border-bottom: 1px solid $color--black; } } - @media only screen and (min-width: variables.$header-desktop) { + @media only screen and (min-width: $header-desktop) { padding: 5px 0; margin: 0 10px; - color: variables.$color--black; + color: $color--black; } } &__label { padding-right: 10px; font-size: 16px; - font-weight: variables.$weight--bold; + font-weight: $weight--bold; - @media only screen and (min-width: variables.$header-desktop) { + @media only screen and (min-width: $header-desktop) { padding-right: 7px; } } @@ -106,17 +106,17 @@ &__icon { height: 12px; width: 12px; - fill: variables.$color--primary; - transition: fill variables.$transition; + fill: $color--primary; + transition: fill $transition; transform: rotate(-90deg); - @media only screen and (min-width: variables.$header-desktop) { + @media only screen and (min-width: $header-desktop) { display: inline-block; transform: none; } .active & { - @media only screen and (min-width: variables.$header-desktop) { + @media only screen and (min-width: $header-desktop) { transform: rotate(180deg); } } @@ -128,7 +128,7 @@ #{$root}__container { padding: 0 20px; - @include mixins.media-query(medium) { + @include media-query(medium) { padding: 0 50px; } } diff --git a/wagtailio/static/sass/components/_quotes.scss b/wagtailio/static/sass/components/_quotes.scss index f557ac698..dd95e232e 100644 --- a/wagtailio/static/sass/components/_quotes.scss +++ b/wagtailio/static/sass/components/_quotes.scss @@ -1,8 +1,8 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .quotes { - @include mixins.sf-spacing(2); + @include sf-spacing(2); position: relative; padding-top: 50px; overflow: hidden; @@ -13,11 +13,11 @@ grid-column: 2 / span 2; max-width: 950px; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 2 / span 5; padding-bottom: 60px; } @@ -27,11 +27,11 @@ grid-column: 2 / span 2; padding: 0 0 50px 0; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { padding: 0 100px 100px 0; &:nth-child(even) { @@ -51,7 +51,7 @@ padding: 15px 0 0; color: var(--color--meta); - @include mixins.media-query(large) { + @include media-query(large) { padding: 30px 0 0; } } @@ -64,19 +64,19 @@ } &__icon-container { - @include mixins.z-index(under); + @include z-index(under); position: absolute; inset: 5% 0 auto auto; width: 133px; height: 124px; - @include mixins.media-query(medium) { + @include media-query(medium) { inset: 0 5% auto auto; width: 220px; height: 220px; } - @include mixins.media-query(large) { + @include media-query(large) { height: 275px; width: 280px; } @@ -85,9 +85,9 @@ &__icon { display: none; position: relative; - fill: variables.$color--teal-200; + fill: $color--teal-200; - @include mixins.media-query(large) { + @include media-query(large) { display: block; } diff --git a/wagtailio/static/sass/components/_related-content.scss b/wagtailio/static/sass/components/_related-content.scss index 1268f8150..5d8cba051 100644 --- a/wagtailio/static/sass/components/_related-content.scss +++ b/wagtailio/static/sass/components/_related-content.scss @@ -1,19 +1,19 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .related-content { margin-bottom: 50px; - @include mixins.media-query(large) { + @include media-query(large) { margin-bottom: 100px; } &__heading { - font-weight: variables.$weight--regular; + font-weight: $weight--regular; grid-column: 2 / span 2; margin-bottom: 30px; - @include mixins.media-query(large) { + @include media-query(large) { margin-bottom: 50px; } } @@ -23,11 +23,11 @@ flex-direction: column; grid-column: 2 / span 2; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { flex-direction: row; gap: 170px; grid-column: 2 / span 5; @@ -39,7 +39,7 @@ max-width: 490px; margin-bottom: 30px; - @include mixins.media-query(large) { + @include media-query(large) { margin-bottom: 0; } } diff --git a/wagtailio/static/sass/components/_rich-text.scss b/wagtailio/static/sass/components/_rich-text.scss index a0f7d6ad9..d76722c31 100644 --- a/wagtailio/static/sass/components/_rich-text.scss +++ b/wagtailio/static/sass/components/_rich-text.scss @@ -1,17 +1,17 @@ -@use "../abstracts/mixins"; +@use "../abstracts/mixins" as *; .rich-text { - @include mixins.richtext(); + @include richtext(); &--sf { - @include mixins.sf-spacing(2); + @include sf-spacing(2); grid-column: 2 / span 2; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 3 / span 3; } } diff --git a/wagtailio/static/sass/components/_search-result.scss b/wagtailio/static/sass/components/_search-result.scss index 426cba56f..4bf702860 100644 --- a/wagtailio/static/sass/components/_search-result.scss +++ b/wagtailio/static/sass/components/_search-result.scss @@ -1,8 +1,8 @@ -@use "../abstracts/variables"; +@use "../abstracts/variables" as *; .search-result { padding-bottom: 40px; - border-bottom: 1px solid variables.$color--black; + border-bottom: 1px solid $color--black; &__title { color: var(--color--heading); diff --git a/wagtailio/static/sass/components/_search.scss b/wagtailio/static/sass/components/_search.scss index e706a3da3..ba2aa7740 100644 --- a/wagtailio/static/sass/components/_search.scss +++ b/wagtailio/static/sass/components/_search.scss @@ -1,5 +1,5 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .search { $root: &; @@ -13,9 +13,9 @@ border-top-left-radius: 0; padding: 10px; - @include mixins.focus-internal(); + @include focus-internal(); - @include mixins.media-query(medium) { + @include media-query(medium) { padding: 15px 30px; } @@ -23,7 +23,7 @@ // remove hover on mobile to save space transform: none; - @include mixins.media-query(medium) { + @include media-query(medium) { transform: translateX(10px) scale(1.25); } } @@ -37,8 +37,8 @@ color: var(--color--text); height: 100%; background-color: var(--color--light-dark); - - @include mixins.focus-internal(); + + @include focus-internal(); // remove rounded edges in ios &[type="search"] { @@ -48,13 +48,13 @@ } &--mobile { - @include mixins.z-index(modal); + @include z-index(modal); padding: 0 20px; position: absolute; inset: 0; opacity: 1; transform: translate3d(0, 100%, 0); - transition: opacity variables.$transition, transform variables.$transition; + transition: opacity $transition, transform $transition; &.is-hidden { opacity: 0; diff --git a/wagtailio/static/sass/components/_select-wrapper.scss b/wagtailio/static/sass/components/_select-wrapper.scss index 0daf362cc..6c4a05849 100644 --- a/wagtailio/static/sass/components/_select-wrapper.scss +++ b/wagtailio/static/sass/components/_select-wrapper.scss @@ -1,5 +1,5 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .select-wrapper { position: relative; @@ -11,13 +11,13 @@ position: absolute; transform: translateY(-50%); padding-right: 10px; - font-weight: variables.$weight--semibold; + font-weight: $weight--semibold; pointer-events: none; left: 10px; top: 50%; - @include mixins.media-query(medium) { + @include media-query(medium) { left: 20px; top: 50%; } @@ -31,7 +31,7 @@ appearance: none; border: 1px solid var(--color--text); border-radius: 5px; - font-weight: variables.$weight--semibold; + font-weight: $weight--semibold; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; @@ -40,17 +40,17 @@ color: var(--color--text); background-position-x: 95%; - @include mixins.media-query(smallonly) { + @include media-query(smallonly) { width: 100%; padding: 10px 25px 10px 70px; } - @include mixins.media-query(medium) { + @include media-query(medium) { width: 325px; padding: 10px 25px 10px 75px; } - @include mixins.media-query(large) { + @include media-query(large) { width: 350px; padding: 10px 25px 10px 90px; } diff --git a/wagtailio/static/sass/components/_showcase-card.scss b/wagtailio/static/sass/components/_showcase-card.scss index 9960f5172..d4e993ad2 100644 --- a/wagtailio/static/sass/components/_showcase-card.scss +++ b/wagtailio/static/sass/components/_showcase-card.scss @@ -1,5 +1,5 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .showcase-card { $root: &; @@ -10,8 +10,8 @@ position: relative; box-shadow: 0 10px 60px 0 rgba(0, 0, 0, 0.1); // Showcase cards use the same styles in light and dark mode. - background: variables.$color--white; - color: variables.$color--off-black; + background: $color--white; + color: $color--off-black; border-radius: 10px; @@ -40,7 +40,7 @@ } &__heading { - @include mixins.media-query(large) { + @include media-query(large) { font-size: 2.1875rem; } } @@ -50,11 +50,11 @@ grid-template-rows: min-content min-content 1fr; padding: 10px; - @include mixins.media-query(medium) { + @include media-query(medium) { padding: 20px; } - @include mixins.media-query(extra-large) { + @include media-query(extra-large) { padding: 60px; } } @@ -65,7 +65,7 @@ } &__link { - color: variables.$color--teal; + color: $color--teal; align-self: self-end; text-decoration: none; font-size: 1.25rem; diff --git a/wagtailio/static/sass/components/_sign-up-form.scss b/wagtailio/static/sass/components/_sign-up-form.scss index 4492dd890..2c191bad4 100644 --- a/wagtailio/static/sass/components/_sign-up-form.scss +++ b/wagtailio/static/sass/components/_sign-up-form.scss @@ -1,17 +1,17 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .sign-up-form { $root: &; - @include mixins.sf-spacing(2); + @include sf-spacing(2); grid-column: 2 / span 2; overflow: hidden; // prevent scrollbars from svg size - - @include mixins.media-query(medium) { + + @include media-query(medium) { grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 2 / span 5; } @@ -25,15 +25,15 @@ } &__icon { - @include mixins.z-index(under); + @include z-index(under); position: relative; width: auto; - @include mixins.media-query(medium) { + @include media-query(medium) { display: block; } - - @include mixins.media-query(large) { + + @include media-query(large) { flex-grow: 1.5; } @@ -45,7 +45,7 @@ } &__inner { - @include mixins.media-query(large) { + @include media-query(large) { flex-grow: 1.5; } } @@ -55,7 +55,7 @@ flex-direction: column; margin: 30px 0 0 0; - @include mixins.media-query(medium) { + @include media-query(medium) { flex-direction: row; } @@ -64,7 +64,7 @@ justify-content: flex-start; margin: 0; - @include mixins.media-query(medium) { + @include media-query(medium) { flex: 1; width: 50%; } @@ -75,32 +75,32 @@ flex: 1; height: 50px; border: 1px solid var(--color--text); - border-radius: variables.$rounded-md; + border-radius: $rounded-md; padding: 11px 20px; - @include mixins.focus-internal(); + @include focus-internal(); - @include mixins.media-query(medium) { - border-radius: variables.$rounded-md 0 0 variables.$rounded-md; + @include media-query(medium) { + border-radius: $rounded-md 0 0 $rounded-md; } &::placeholder { - color: variables.$color--off-black; + color: $color--off-black; } } &__button { - border-radius: variables.$rounded-md; + border-radius: $rounded-md; border-style: solid; height: 50px; margin: 15px 0 0 0; background-color: var(--color--highlight); - color: variables.$color--white; + color: $color--white; - @include mixins.focus-internal(); + @include focus-internal(); - @include mixins.media-query(medium) { - border-radius: 0 variables.$rounded-md variables.$rounded-md 0; + @include media-query(medium) { + border-radius: 0 $rounded-md $rounded-md 0; border-style: solid solid solid none; border-left-width: 0; margin: 0; @@ -114,41 +114,41 @@ border-radius: 15px; padding: 30px; - @include mixins.media-query(medium) { + @include media-query(medium) { flex-direction: row; } - @include mixins.media-query(large) { + @include media-query(large) { padding: 40px 60px; } } &--footer { background-color: var(--color--highlight); - color: variables.$color--white; + color: $color--white; #{$root}__input { background-color: var(--color--highlight); - border: 1px solid variables.$color--white; - color: variables.$color--white; + border: 1px solid $color--white; + color: $color--white; border-radius: 6px; - @include mixins.media-query(medium) { + @include media-query(medium) { border-radius: 6px 0 0 6px; } &::placeholder { - color: variables.$color--white; + color: $color--white; } } #{$root}__button { - background-color: variables.$color--white; + background-color: $color--white; color: var(--color--highlight); border-radius: 6px; border-style: solid none none none; - @include mixins.media-query(medium) { + @include media-query(medium) { border-radius: 0 6px 6px 0; border-style: none none none solid; } @@ -160,7 +160,7 @@ } .footer & { - @include mixins.media-query(large) { + @include media-query(large) { margin-bottom: 50px; } @@ -168,7 +168,7 @@ font-size: 16px; margin-bottom: 20px; padding-top: 0; - font-weight: variables.$weight--regular; + font-weight: $weight--regular; } &__container { diff --git a/wagtailio/static/sass/components/_sitewide-alert.scss b/wagtailio/static/sass/components/_sitewide-alert.scss index 5da5772f0..856a91521 100644 --- a/wagtailio/static/sass/components/_sitewide-alert.scss +++ b/wagtailio/static/sass/components/_sitewide-alert.scss @@ -1,8 +1,8 @@ -@use "../abstracts/variables"; +@use "../abstracts/variables" as *; .sitewide-alert { position: relative; - padding: variables.$gutter-sm variables.$gutter; + padding: $gutter-sm $gutter; opacity: 0; transition: opacity 0.5s ease; margin-top: calc(var(--banner-height) * -1); @@ -16,7 +16,7 @@ } p { - max-width: variables.$site-width; + max-width: $site-width; margin: 0 auto; font-size: 16px; text-align: center; @@ -32,21 +32,21 @@ } &--default { - background-color: variables.$color--pink; - color: variables.$color--white; + background-color: $color--pink; + color: $color--white; h2, h3 { color: var(--color--highlight); } a { - color: variables.$color--off-black-30; - border-bottom-color: variables.$color--grey; + color: $color--off-black-30; + border-bottom-color: $color--grey; &:hover, &:active { - color: variables.$color--grey; - border-bottom-color: variables.$color--cool-grey; + color: $color--grey; + border-bottom-color: $color--cool-grey; } } } diff --git a/wagtailio/static/sass/components/_skip-link.scss b/wagtailio/static/sass/components/_skip-link.scss index 7407f2335..aad14edc2 100644 --- a/wagtailio/static/sass/components/_skip-link.scss +++ b/wagtailio/static/sass/components/_skip-link.scss @@ -1,13 +1,13 @@ -@use "../abstracts/variables"; +@use "../abstracts/variables" as *; .skip-link { z-index: 20; position: absolute; inset: -500px auto auto 0; - color: variables.$color--white; + color: $color--white; background-color: var(--color--highlight); padding: 20px; - font-weight: variables.$weight--bold; + font-weight: $weight--bold; text-decoration: none; &:focus { diff --git a/wagtailio/static/sass/components/_standalone-quote.scss b/wagtailio/static/sass/components/_standalone-quote.scss index a6150e0c5..305ab5ccb 100644 --- a/wagtailio/static/sass/components/_standalone-quote.scss +++ b/wagtailio/static/sass/components/_standalone-quote.scss @@ -1,13 +1,13 @@ -@use "../abstracts/mixins"; +@use "../abstracts/mixins" as *; .standalone-quote { - @include mixins.sf-spacing(2); + @include sf-spacing(2); align-items: center; &__icon { display: none; - @include mixins.media-query(medium) { + @include media-query(medium) { margin: 0 auto; display: block; grid-column: 2 / span 1; @@ -15,7 +15,7 @@ height: 85px; } - @include mixins.media-query(large) { + @include media-query(large) { width: 150px; height: 125px; } @@ -30,11 +30,11 @@ margin: 0; grid-column: 2 / span 2; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 3 / span 2; } - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 3 / span 3; } } @@ -45,11 +45,11 @@ margin-top: 10px; grid-column: 2 / span 2; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 3 / span 2; } - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 3 / span 3; } } diff --git a/wagtailio/static/sass/components/_sub-nav.scss b/wagtailio/static/sass/components/_sub-nav.scss index 9520db593..bd6f38469 100644 --- a/wagtailio/static/sass/components/_sub-nav.scss +++ b/wagtailio/static/sass/components/_sub-nav.scss @@ -1,20 +1,20 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .sub-nav { - @include mixins.z-index(nav); + @include z-index(nav); $root: &; display: flex; align-items: center; flex-direction: column; width: 100%; - height: calc(100% - #{variables.$header-mobile-height}); + height: calc(100% - #{$header-mobile-height}); position: absolute; list-style: none; inset: 0 auto auto 0; padding: 0 20px; background-color: var(--color--background); - border-radius: variables.$rounded-xl; + border-radius: $rounded-xl; // Extra border for high-contrast mode users. border: 1px solid transparent; opacity: 0; @@ -22,15 +22,15 @@ overflow: hidden scroll; // visible to invisible transition: visibility 0ms ease-out 250ms, opacity 250ms ease-out 0ms; - box-shadow: 0 0 40px rgba(variables.$color--black, 0.2); + box-shadow: 0 0 40px rgba($color--black, 0.2); - @include mixins.media-query(medium) { + @include media-query(medium) { background-color: var(--color--background); padding: 0 50px; - height: calc(100% - #{variables.$header-tablet-height}); + height: calc(100% - #{$header-tablet-height}); } - @media only screen and (min-width: variables.$header-desktop) { + @media only screen and (min-width: $header-desktop) { display: none; align-items: stretch; width: auto; @@ -45,7 +45,7 @@ } .theme-dark & { - border: 1px solid variables.$color--black; + border: 1px solid $color--black; } // mobile active state @@ -67,9 +67,9 @@ padding-bottom: 10px; margin-bottom: 10px; text-align: center; - border-bottom: 1px solid rgba(variables.$color--black, -0.8); + border-bottom: 1px solid rgba($color--black, -0.8); - @media only screen and (min-width: variables.$header-desktop) { + @media only screen and (min-width: $header-desktop) { width: auto; flex-basis: 50%; min-width: 50%; @@ -83,7 +83,7 @@ display: block; width: 100%; - @media only screen and (min-width: variables.$header-desktop) { + @media only screen and (min-width: $header-desktop) { display: none; } } @@ -91,19 +91,19 @@ &--cta { position: relative; inset: auto auto auto -20px; - background-color: variables.$color--secondary; - color: variables.$color--white; + background-color: $color--secondary; + color: $color--white; margin-bottom: 0; align-self: stretch; width: calc(100% + 40px); - @include mixins.media-query(medium) { + @include media-query(medium) { inset: auto auto auto -50px; width: calc(100% + 100px); padding-bottom: 0; } - @media only screen and (min-width: variables.$header-desktop) { + @media only screen and (min-width: $header-desktop) { flex-basis: 30%; min-width: 30%; max-width: 30%; @@ -116,22 +116,22 @@ } &__link { - color: rgba(variables.$color--off-black, -0.3); + color: rgba($color--off-black, -0.3); border-bottom: 1px solid transparent; - transition: color, border variables.$transition; + transition: color, border $transition; &:hover { cursor: pointer; } - @media only screen and (min-width: variables.$header-desktop) { + @media only screen and (min-width: $header-desktop) { padding: 5px 0; margin: 0 10px; - color: variables.$color--white; + color: $color--white; &:hover { - color: variables.$color--teal; - border-bottom: 1px solid variables.$color--black; + color: $color--teal; + border-bottom: 1px solid $color--black; } } } @@ -139,7 +139,7 @@ &__links { width: 100%; - @media only screen and (min-width: variables.$header-desktop) { + @media only screen and (min-width: $header-desktop) { padding: 60px; flex-basis: 70%; min-width: 70%; @@ -153,7 +153,7 @@ flex-direction: column; margin-bottom: 20px; - @media only screen and (min-width: variables.$header-desktop) { + @media only screen and (min-width: $header-desktop) { flex-flow: row wrap; margin-bottom: 0; } @@ -162,7 +162,7 @@ &__heading { text-align: start; font-size: 25px; - font-weight: variables.$weight--regular; + font-weight: $weight--regular; margin-bottom: 20px; line-height: 1; color: var(--color--heading); @@ -174,7 +174,7 @@ align-items: center; text-decoration: none; color: var(--color--heading); - transition: color variables.$transition; + transition: color $transition; &:hover, &:focus { @@ -183,7 +183,7 @@ // Icon overrides .icon__svg-bg { transform: rotate(0) scale(0.95); - fill: variables.$color--teal-200; + fill: $color--teal-200; } } @@ -193,7 +193,7 @@ font-size: 14px; line-height: 1; padding: 10px 0; - font-weight: variables.$weight--regular; + font-weight: $weight--regular; width: 100%; } } @@ -204,7 +204,7 @@ &__item-heading { font-size: 18px; - font-weight: variables.$weight--bold; + font-weight: $weight--bold; margin-bottom: 0; line-height: 1.5; } @@ -213,9 +213,9 @@ display: none; font-size: 14px; color: var(--color--meta); - font-weight: variables.$weight--regular; + font-weight: $weight--regular; - @media only screen and (min-width: variables.$header-desktop) { + @media only screen and (min-width: $header-desktop) { display: block; } } diff --git a/wagtailio/static/sass/components/_teaser.scss b/wagtailio/static/sass/components/_teaser.scss index c0cfa22f1..fd2ef567c 100644 --- a/wagtailio/static/sass/components/_teaser.scss +++ b/wagtailio/static/sass/components/_teaser.scss @@ -1,4 +1,4 @@ -@use "../abstracts/mixins"; +@use "../abstracts/mixins" as *; .teaser { $root: &; @@ -12,7 +12,7 @@ } #{$root}__content { - @include mixins.offset-bg-hover-right(); + @include offset-bg-hover-right(); } } @@ -20,11 +20,11 @@ width: 100%; grid-column: 2 / span 2; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 2 / span 2; } } @@ -33,14 +33,14 @@ background-color: var(--color--light-dark); grid-column: 2 / span 2; padding: 20px; - @include mixins.offset-bg-right(); + @include offset-bg-right(); - @include mixins.media-query(medium) { + @include media-query(medium) { padding: 30px 40px; grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { padding: 60px 80px 60px 100px; grid-column: 4 / span 3; } @@ -57,7 +57,7 @@ &__intro { margin-bottom: 20px; - @include mixins.media-query(large) { + @include media-query(large) { margin-bottom: 35px; } } diff --git a/wagtailio/static/sass/components/_text-media.scss b/wagtailio/static/sass/components/_text-media.scss index 5443b24d0..9135c1697 100644 --- a/wagtailio/static/sass/components/_text-media.scss +++ b/wagtailio/static/sass/components/_text-media.scss @@ -1,8 +1,8 @@ -@use "../abstracts/mixins"; +@use "../abstracts/mixins" as *; .text-media { $root: &; - @include mixins.sf-spacing(2); + @include sf-spacing(2); &__content { margin: auto; @@ -10,12 +10,12 @@ grid-column: 2 /span 2; padding: 10px 10px 0 0; - @include mixins.media-query(medium) { + @include media-query(medium) { padding: 35px 0 0 0; margin: auto 0; } - @include mixins.media-query(large) { + @include media-query(large) { grid-row: 1; grid-column: 4 / span 3; padding: 0; @@ -32,14 +32,14 @@ grid-column: 2 /span 2; width: 100%; - @include mixins.media-query(medium) { + @include media-query(medium) { padding-right: 25%; } } &--right { #{$root}__content { - @include mixins.media-query(large) { + @include media-query(large) { padding: 0 95px 0 0; grid-column: 2 / span 3; } @@ -47,7 +47,7 @@ #{$root}__media, #{$root}__embed-wrap { - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 5 / span 2; } } diff --git a/wagtailio/static/sass/components/_theme-toggle.scss b/wagtailio/static/sass/components/_theme-toggle.scss index edc16efc9..1e5d9a444 100644 --- a/wagtailio/static/sass/components/_theme-toggle.scss +++ b/wagtailio/static/sass/components/_theme-toggle.scss @@ -1,23 +1,23 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .theme-toggle { $root: &; - margin-inline-end: variables.$gutter; + margin-inline-end: $gutter; display: flex; align-items: center; margin-top: 30px; - @include mixins.media-query(medium) { + @include media-query(medium) { margin-top: 0; } - @include mixins.media-query(large) { - margin-inline-end: (variables.$gutter * 1.5); + @include media-query(large) { + margin-inline-end: ($gutter * 1.5); } &__label { - color: variables.$color--white; + color: $color--white; } // Don't display toggle if in high contrast mode @@ -33,16 +33,16 @@ overflow: hidden; position: relative; border-radius: 14px; - margin: 0 (variables.$gutter * 0.5); + margin: 0 ($gutter * 0.5); display: inline-block; cursor: pointer; - background-color: rgba(variables.$color--black, 0.9); + background-color: rgba($color--black, 0.9); &:focus { - background-color: variables.$color--teal; + background-color: $color--teal; &::before { - background-color: variables.$color--teal-100; + background-color: $color--teal-100; } } @@ -55,8 +55,8 @@ display: block; position: absolute; border-radius: 12px; - background-color: variables.$color--light-grey; - transition: inset-inline-start variables.$transition; + background-color: $color--light-grey; + transition: inset-inline-start $transition; } &::after { @@ -68,7 +68,7 @@ display: block; position: absolute; border-radius: 0.5px; - background: variables.$color--off-black; + background: $color--off-black; } } @@ -86,24 +86,24 @@ } #{$root}__button { - background-color: variables.$color--light-grey; + background-color: $color--light-grey; &:focus { - background-color: variables.$color--teal-100; + background-color: $color--teal-100; // stylelint-disable-next-line max-nesting-depth &::after { - background-color: variables.$color--teal-100; + background-color: $color--teal-100; } } &::before { - background-color: variables.$color--black; + background-color: $color--black; inset-inline-start: 4px; } &::after { - background-color: variables.$color--light-grey; + background-color: $color--light-grey; top: -2px; inset-inline-end: 2px; width: 32px; @@ -113,7 +113,7 @@ } #{$root}__label { - color: variables.$color--light-grey; + color: $color--light-grey; } } diff --git a/wagtailio/static/sass/components/_wagtail-logo.scss b/wagtailio/static/sass/components/_wagtail-logo.scss index f8591820b..745704af7 100644 --- a/wagtailio/static/sass/components/_wagtail-logo.scss +++ b/wagtailio/static/sass/components/_wagtail-logo.scss @@ -1,11 +1,11 @@ -@use "../abstracts/variables"; +@use "../abstracts/variables" as *; .wagtail-logo { &__dark { - fill: variables.$color--black; + fill: $color--black; } &__light { - fill: variables.$color--white; + fill: $color--white; } } diff --git a/wagtailio/static/sass/layout/_blog-listing.scss b/wagtailio/static/sass/layout/_blog-listing.scss index f0b1613c2..3579a62f4 100644 --- a/wagtailio/static/sass/layout/_blog-listing.scss +++ b/wagtailio/static/sass/layout/_blog-listing.scss @@ -1,21 +1,21 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .blog-listing { - @include mixins.sf-spacing(2); + @include sf-spacing(2); grid-column: 2 / span 2; display: grid; grid-template-columns: 1fr; - gap: variables.$gutter; + gap: $gutter; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 3; - gap: variables.$gutter-lg; + gap: $gutter-lg; grid-template-columns: repeat(2, 1fr); } - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 2 / span 5; - gap: variables.$gutter-xl; + gap: $gutter-xl; } } diff --git a/wagtailio/static/sass/layout/_footer.scss b/wagtailio/static/sass/layout/_footer.scss index cf91228d8..b588afe42 100644 --- a/wagtailio/static/sass/layout/_footer.scss +++ b/wagtailio/static/sass/layout/_footer.scss @@ -1,5 +1,5 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .footer { $root: &; @@ -7,18 +7,18 @@ &__base { background-color: var(--color--highlight); padding: 60px 0; - color: variables.$color--white; + color: $color--white; } &__links-wrap { grid-column: 2 / span 2; margin-bottom: 60px; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { margin-bottom: 0; grid-column: 2 / span 2; padding-right: 20%; @@ -29,11 +29,11 @@ list-style: none; margin-bottom: 20px; - @include mixins.media-query(medium) { + @include media-query(medium) { margin-bottom: 40px; } - @include mixins.media-query(large) { + @include media-query(large) { margin-bottom: 60px; } @@ -45,11 +45,11 @@ &__sign-up { grid-column: 2 / span 2; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { grid-column: 4 / span 3; } } @@ -59,11 +59,11 @@ font-size: 1rem; margin-top: 30px; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { margin-top: 0; font-size: 0.8rem; grid-column: 2 / span 3; @@ -71,23 +71,23 @@ } &__icon-link { - color: variables.$color--white; + color: $color--white; text-decoration: none; display: flex; gap: 15px; &-content { - transition: color 0.3s; - + transition: color 0.3s; + } &:hover { #{$root}__icon-link-content { - color: variables.$color--teal-100; + color: $color--teal-100; } #{$root}__icon { - stroke: variables.$color--teal-100; + stroke: $color--teal-100; } } @@ -96,11 +96,11 @@ &::after { content: '200+'; - background-color: variables.$color--teal-100; - border: 2px solid variables.$color--off-black; - color: variables.$color--off-black; + background-color: $color--teal-100; + border: 2px solid $color--off-black; + color: $color--off-black; font-size: 0.5rem; - font-weight: variables.$weight--bold; + font-weight: $weight--bold; border-radius: 50%; position: absolute; width: 30px; @@ -116,12 +116,12 @@ } &__icon-link-heading { - font-weight: variables.$weight--bold; + font-weight: $weight--bold; line-height: 1.3rem; margin-bottom: 4px; font-size: 1.25rem; - @include mixins.media-query(large) { + @include media-query(large) { font-size: 1rem; } } @@ -137,18 +137,18 @@ } &__link { - color: variables.$color--teal-100; + color: $color--teal-100; text-decoration: underline; - transition: color variables.$transition; + transition: color $transition; &:hover { text-decoration: none; - color: variables.$color--white; + color: $color--white; } } &__social-heading { - font-weight: variables.$weight--bold; + font-weight: $weight--bold; } &__socials { @@ -156,7 +156,7 @@ align-items: center; gap: 10px; - @include mixins.media-query(medium) { + @include media-query(medium) { gap: 20px; } @@ -169,14 +169,14 @@ } &__social-icon { - fill: variables.$color--white; + fill: $color--white; width: 34px; height: 34px; transition: color 0.3s; &:hover { - fill: variables.$color--teal-100; - transition: fill variables.$transition; + fill: $color--teal-100; + transition: fill $transition; } @media (forced-colors: active) { @@ -185,18 +185,18 @@ } &__survey-link { - background-color: variables.$color--teal; + background-color: $color--teal; position: fixed; bottom: -2px; right: 2rem; padding: 12px 16px 10px; - color: variables.$color--white; + color: $color--white; display: flex; z-index: 10; border-radius: 10px 10px 0 0; transition: bottom 0.1s linear; font-size: 0.75rem; - font-family: variables.$font--primary; + font-family: $font--primary; width: 230px; justify-content: space-between; align-items: center; @@ -210,7 +210,7 @@ } &:hover { - color: variables.$color--white; + color: $color--white; bottom: 0; } } @@ -218,13 +218,13 @@ &__sub-footer { margin-bottom: 30px; - @include mixins.media-query(medium) { + @include media-query(medium) { display: flex; justify-content: space-between; align-items: center; } - @include mixins.media-query(large) { + @include media-query(large) { margin-bottom: 40px; } } diff --git a/wagtailio/static/sass/layout/_header.scss b/wagtailio/static/sass/layout/_header.scss index bae574a60..3b05abaf1 100644 --- a/wagtailio/static/sass/layout/_header.scss +++ b/wagtailio/static/sass/layout/_header.scss @@ -1,9 +1,9 @@ -@use "../abstracts/mixins"; -@use "../abstracts/variables"; +@use "../abstracts/mixins" as *; +@use "../abstracts/variables" as *; .header { $root: &; - max-width: variables.$site-width; + max-width: $site-width; margin: 0 auto 70px; padding: 15px; display: flex; @@ -11,7 +11,7 @@ align-items: center; position: relative; - @include mixins.media-query(medium) { + @include media-query(medium) { padding: 35px 50px; margin: 0 auto; } @@ -40,7 +40,7 @@ width: 100px; height: 40px; - @include mixins.media-query(medium) { + @include media-query(medium) { width: 153px; height: 65px; } @@ -56,29 +56,29 @@ &--desktop { display: none; - @media only screen and (min-width: variables.$header-desktop) { + @media only screen and (min-width: $header-desktop) { display: flex; } } &--mobile { - @include mixins.z-index(nav); + @include z-index(nav); display: flex; flex-direction: column; position: fixed; - inset: variables.$header-mobile-height auto auto 0; + inset: $header-mobile-height auto auto 0; width: 100%; height: 100%; background-color: var(--color--background); visibility: hidden; transform: translate3d(100%,0,0); - transition: transform variables.$transition; + transition: transform $transition; - @include mixins.media-query(medium) { - inset: variables.$header-tablet-height auto auto 0; + @include media-query(medium) { + inset: $header-tablet-height auto auto 0; } - @media only screen and (min-width: variables.$header-desktop) { + @media only screen and (min-width: $header-desktop) { display: none; } @@ -101,18 +101,18 @@ &--get-started { display: none; padding: 10px 13px; - font-weight: variables.$weight--bold; + font-weight: $weight--bold; font-size: 0.8rem; margin-right: 15px; - @media only screen and (min-width: variables.$header-desktop) { + @media only screen and (min-width: $header-desktop) { display: inline-flex; padding: 15px 20px; margin-right: 0; } svg { - color: variables.$color--teal; + color: $color--teal; width: 15px; height: 15px; transition: color 0.3s; @@ -121,7 +121,7 @@ &:hover { // stylelint-disable-next-line max-nesting-depth svg { - color: variables.$color--teal-100; + color: $color--teal-100; } } @@ -132,7 +132,7 @@ text-align: center; // stylelint-disable-next-line max-nesting-depth - @include mixins.media-query(medium) { + @include media-query(medium) { width: calc(100% - 80px); } } @@ -162,7 +162,7 @@ display: none; margin-right: 64px; - @media only screen and (min-width: variables.$header-github) { + @media only screen and (min-width: $header-github) { display: block; } } @@ -174,19 +174,19 @@ align-items: center; margin-right: 10px; - @include mixins.media-query(medium) { + @include media-query(medium) { margin-right: 20px; } - @include mixins.media-query(large) { + @include media-query(large) { top: -3px; } - @media only screen and (min-width: variables.$header-github) { + @media only screen and (min-width: $header-github) { margin-right: 40px; } - @media only screen and (min-width: variables.$header-desktop) { + @media only screen and (min-width: $header-desktop) { top: 1px; margin-right: 30px; } @@ -194,7 +194,7 @@ } &__search-icon { - transition: color variables.$transition; + transition: color $transition; &--open { color: var(--color--dark-light); @@ -226,7 +226,7 @@ position: relative; top: -7px; - @media only screen and (min-width: variables.$header-desktop) { + @media only screen and (min-width: $header-desktop) { display: none; } } diff --git a/wagtailio/static/sass/layout/_search-page.scss b/wagtailio/static/sass/layout/_search-page.scss index 20adabf3b..7c560d9d8 100644 --- a/wagtailio/static/sass/layout/_search-page.scss +++ b/wagtailio/static/sass/layout/_search-page.scss @@ -1,4 +1,4 @@ -@use "../abstracts/mixins"; +@use "../abstracts/mixins" as *; .search-page { &__results { @@ -7,12 +7,12 @@ margin: 40px 0; grid-column: 2 / span 2; - @include mixins.media-query(medium) { + @include media-query(medium) { margin: 60px 0; grid-column: 2 / span 3; } - @include mixins.media-query(large) { + @include media-query(large) { margin: 80px 0; grid-column: 2 / span 5; } diff --git a/wagtailio/static/sass/layout/_showcase-page.scss b/wagtailio/static/sass/layout/_showcase-page.scss index 9e4a1eb5f..647479dfe 100644 --- a/wagtailio/static/sass/layout/_showcase-page.scss +++ b/wagtailio/static/sass/layout/_showcase-page.scss @@ -1,4 +1,4 @@ -@use "../abstracts/mixins"; +@use "../abstracts/mixins" as *; .showcase-page { &__hero { @@ -14,11 +14,11 @@ &__content { grid-column: 2 / span 2; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-column-end: span 3; } - @include mixins.media-query(large) { + @include media-query(large) { grid-column-end: span 5; } } @@ -30,7 +30,7 @@ gap: 30px; padding: 50px 0; - @include mixins.media-query(medium) { + @include media-query(medium) { grid-template-columns: 1fr 1fr; } } diff --git a/wagtailio/static/sass/utilities/_utilities.scss b/wagtailio/static/sass/utilities/_utilities.scss index 354853d79..a857f618f 100644 --- a/wagtailio/static/sass/utilities/_utilities.scss +++ b/wagtailio/static/sass/utilities/_utilities.scss @@ -1,12 +1,12 @@ -@use "../abstracts/mixins"; +@use "../abstracts/mixins" as *; .u { &-sr-only { - @include mixins.hidden(); + @include hidden(); } &-mobile-only { - @include mixins.media-query(medium) { + @include media-query(medium) { display: none; } } @@ -14,7 +14,7 @@ &-desktop-only { display: none; - @include mixins.media-query(medium) { + @include media-query(medium) { display: block; } }