From a41c898756b6175e64553789485776fb189d08f4 Mon Sep 17 00:00:00 2001 From: mricoul Date: Tue, 5 Nov 2024 15:22:44 +0100 Subject: [PATCH 1/7] chore (scss): replace all deprecated rules in latest dart sass changes --- src/scss/01-abstract/_variables.scss | 2 + src/scss/01-abstract/abstract.scss | 4 +- src/scss/02-tools/_f-column.scss | 17 +++-- src/scss/02-tools/_f-context-align.scss | 6 +- src/scss/02-tools/_f-context-selector.scss | 11 ++- src/scss/02-tools/_f-em.scss | 13 ++-- src/scss/02-tools/_f-fluid-size.scss | 9 ++- src/scss/02-tools/_f-get-gutter-width.scss | 4 +- src/scss/02-tools/_f-get-svg-url.scss | 12 ++- src/scss/02-tools/_m-bg-fullwidth.scss | 7 +- .../02-tools/_m-block-vertical-spacing.scss | 2 + src/scss/02-tools/_m-breakpoint.scss | 12 ++- src/scss/02-tools/_m-btn.scss | 17 +++-- src/scss/02-tools/_m-checkbox-custom.scss | 14 ++-- src/scss/02-tools/_m-container-query.scss | 12 ++- src/scss/02-tools/_m-container.scss | 4 +- src/scss/02-tools/_m-editor-only.scss | 4 +- src/scss/02-tools/_m-heading.scss | 4 +- src/scss/02-tools/_m-hover.scss | 5 +- src/scss/02-tools/_m-not-acf.scss | 4 +- src/scss/02-tools/_m-radio-custom.scss | 9 ++- src/scss/02-tools/_m-scrollbar.scss | 4 +- src/scss/02-tools/_m-select-custom.scss | 22 +++--- src/scss/02-tools/_m-style-only.scss | 4 +- src/scss/02-tools/_m-text-icon.scss | 7 +- src/scss/02-tools/tools.scss | 74 +++++++++---------- src/scss/03-base/_body.scss | 17 +++-- src/scss/03-base/_forms.scss | 39 ++++++---- src/scss/03-base/_links.scss | 9 ++- src/scss/03-base/_print.scss | 4 +- src/scss/03-base/_variables-css.scss | 41 +++++----- src/scss/03-base/base.scss | 20 ++--- src/scss/04-utilities/_container.scss | 7 +- src/scss/04-utilities/_focus.scss | 11 --- src/scss/04-utilities/_js-animation.scss | 6 +- src/scss/04-utilities/_lazyload.scss | 8 +- src/scss/04-utilities/_palette.scss | 4 +- src/scss/04-utilities/_seo.scss | 11 +++ src/scss/04-utilities/_sr-only.scss | 6 +- src/scss/04-utilities/_wp-admin-bar.scss | 4 +- src/scss/04-utilities/utilities.scss | 20 ++--- src/scss/05-components/_btn.scss | 8 +- src/scss/05-components/_skip-links.scss | 9 ++- src/scss/05-components/components.scss | 6 +- src/scss/06-blocks/_gutenberg.scss | 59 +++++++++++---- src/scss/06-blocks/blocks.scss | 44 +++++------ src/scss/06-blocks/core/_audio.scss | 6 +- src/scss/06-blocks/core/_buttons.scss | 2 + src/scss/06-blocks/core/_columns.scss | 7 +- src/scss/06-blocks/core/_cover.scss | 7 +- src/scss/06-blocks/core/_file.scss | 2 + src/scss/06-blocks/core/_freeform.scss | 7 +- src/scss/06-blocks/core/_gallery.scss | 4 +- src/scss/06-blocks/core/_group.scss | 7 +- src/scss/06-blocks/core/_heading.scss | 8 +- src/scss/06-blocks/core/_image.scss | 6 +- src/scss/06-blocks/core/_list.scss | 20 +++-- src/scss/06-blocks/core/_media-text.scss | 10 ++- src/scss/06-blocks/core/_paragraph.scss | 6 +- src/scss/06-blocks/core/_preformatted.scss | 7 +- src/scss/06-blocks/core/_search.scss | 2 + src/scss/06-blocks/core/_separator.scss | 4 +- src/scss/06-blocks/core/_table.scss | 4 +- src/scss/08-template-parts/_header.scss | 63 ++++++++++------ src/scss/08-template-parts/_hero.scss | 10 ++- .../08-template-parts/template-parts.scss | 6 +- src/scss/09-templates/templates.scss | 6 +- src/scss/editor.scss | 28 +++---- src/scss/style.scss | 24 +++--- 69 files changed, 529 insertions(+), 333 deletions(-) diff --git a/src/scss/01-abstract/_variables.scss b/src/scss/01-abstract/_variables.scss index cf98840c..f2b137eb 100644 --- a/src/scss/01-abstract/_variables.scss +++ b/src/scss/01-abstract/_variables.scss @@ -1,6 +1,8 @@ @use "sass:map"; @use "sass:math"; +$entry-file-name: "style"; + /** * Variables */ diff --git a/src/scss/01-abstract/abstract.scss b/src/scss/01-abstract/abstract.scss index 398847bc..b78920fe 100644 --- a/src/scss/01-abstract/abstract.scss +++ b/src/scss/01-abstract/abstract.scss @@ -1,2 +1,2 @@ -@import "./constants"; -@import "./variables"; +@use "constants"; +@use "variables"; diff --git a/src/scss/02-tools/_f-column.scss b/src/scss/02-tools/_f-column.scss index 8ddb7f2b..91216a48 100644 --- a/src/scss/02-tools/_f-column.scss +++ b/src/scss/02-tools/_f-column.scss @@ -1,3 +1,6 @@ +@use "sass:meta"; +@use "../01-abstract/variables"; + @use "sass:map"; @use "sass:math"; @@ -55,7 +58,7 @@ @if not $var { - @return map.get(map.get($column-preset, $device), $prop); + @return map.get(map.get(variables.$column-preset, $device), $prop); } @else { @return $var; @@ -68,7 +71,7 @@ @function column($device, $nb-column: null, $nb-gutter: null, $total-column: null, $total-gutter: null) { // shift vars if $device is number - @if type-of($device) == "number" { + @if meta.type-of($device) == "number" { $total-gutter: $total-column; $total-column: $nb-gutter; $nb-gutter: $nb-column; @@ -76,7 +79,7 @@ $device: d; } - $preset: map.get($column-preset, $device); + $preset: map.get(variables.$column-preset, $device); $gutter-width: map.get($preset, gutter-width); $column-width: map.get($preset, column-width); $total-column: column-set-var($total-column, $device, total-column); @@ -98,13 +101,13 @@ @function column-px($device, $nb-column: null, $nb-gutter: null, $unitless: false) { // shift vars if $device is number - @if type-of($device) == "number" { + @if meta.type-of($device) == "number" { $nb-gutter: $nb-column; $nb-column: $device; $device: d; } - $preset: map.get($column-preset, $device); + $preset: map.get(variables.$column-preset, $device); $gutter-width: map.get($preset, gutter-width); $column-width: map.get($preset, column-width); @@ -125,13 +128,13 @@ @function column-full($device, $nb-column: null, $nb-gutter: null) { // shift vars if $device is number - @if type-of($device) == "number" { + @if meta.type-of($device) == "number" { $nb-gutter: $nb-column; $nb-column: $device; $device: d; } - $preset: map.get($column-preset, $device); + $preset: map.get(variables.$column-preset, $device); $gutter-width: map.get($preset, gutter-width); $column-width: map.get($preset, column-width); $total-column: map.get($preset, total-column); diff --git a/src/scss/02-tools/_f-context-align.scss b/src/scss/02-tools/_f-context-align.scss index cec4c732..d3e740ee 100644 --- a/src/scss/02-tools/_f-context-align.scss +++ b/src/scss/02-tools/_f-context-align.scss @@ -1,3 +1,5 @@ +@use "../01-abstract/variables"; + /** * Align - Make a context align (editor / style) * @@ -27,13 +29,13 @@ $function-context-align-last-value: ""; @function context-align($value: null, $suffix: " > ") { @if not $value { - @if ($entry-file-name == "style") { + @if (variables.$entry-file-name == "style") { @return ".align" + $function-context-align-last-value; } } @else { $function-context-align-last-value: $value !global; - @if ($entry-file-name == "editor") { + @if (variables.$entry-file-name == "editor") { @return "[data-align=\"" + $value + "\"]" + $suffix; } } diff --git a/src/scss/02-tools/_f-context-selector.scss b/src/scss/02-tools/_f-context-selector.scss index 1c8b91d3..47ee915f 100644 --- a/src/scss/02-tools/_f-context-selector.scss +++ b/src/scss/02-tools/_f-context-selector.scss @@ -1,3 +1,6 @@ +@use "sass:meta"; +@use "../01-abstract/variables"; + /** * Context selector - Make a context selector (editor / style) * @@ -53,17 +56,17 @@ $full-selector: ""; $parent: ""; - @if ($entry-file-name == "editor" and $editor) { + @if (variables.$entry-file-name == "editor" and $editor) { $parent: $editor; - } @else if ($entry-file-name == "style" and $default) { + } @else if (variables.$entry-file-name == "style" and $default) { $parent: $default; } @else { @return $selector; } - @if (type-of($selector) == "string") { + @if (meta.type-of($selector) == "string") { $full-selector: $parent + " " + $selector; - } @else if (type-of($selector) == "list") { + } @else if (meta.type-of($selector) == "list") { @each $s in $selector { $full-selector: $full-selector + $parent + " " + $s; } diff --git a/src/scss/02-tools/_f-em.scss b/src/scss/02-tools/_f-em.scss index 4622fb79..b1ba9fec 100644 --- a/src/scss/02-tools/_f-em.scss +++ b/src/scss/02-tools/_f-em.scss @@ -1,3 +1,6 @@ +@use "../01-abstract/variables"; +@use "f-strip-units"; + @use "sass:math"; /** @@ -20,14 +23,14 @@ * */ -@function em($pxval, $base: $font-size-base) { +@function em($pxval, $base: variables.$font-size-base) { - @if not unitless($pxval) { - $pxval: strip-units($pxval); + @if not math.is-unitless($pxval) { + $pxval: f-strip-units.strip-units($pxval); } - @if not unitless($base) { - $base: strip-units($base); + @if not math.is-unitless($base) { + $base: f-strip-units.strip-units($base); } @return math.div($pxval, $base) * 1em; diff --git a/src/scss/02-tools/_f-fluid-size.scss b/src/scss/02-tools/_f-fluid-size.scss index 1b797bf4..bb9e932f 100644 --- a/src/scss/02-tools/_f-fluid-size.scss +++ b/src/scss/02-tools/_f-fluid-size.scss @@ -1,3 +1,6 @@ +@use "../01-abstract/variables"; +@use "f-strip-units"; + /** * Fluid size * @@ -25,8 +28,8 @@ @use "sass:math"; @function fluid-size($min, $max, $start: xs, $end: sm) { - $start: math.div(map.get($breakpoints, $start), 100); - $end: math.div(map.get($breakpoints, $end), 100); + $start: math.div(map.get(variables.$breakpoints, $start), 100); + $end: math.div(map.get(variables.$breakpoints, $end), 100); - @return clamp(#{$min}, #{$min} + (1vw - #{$start}px) / #{$end - $start} * #{strip-units($max - $min)}, #{$max}); + @return clamp(#{$min}, #{$min} + (1vw - #{$start}px) / #{$end - $start} * #{f-strip-units.strip-units($max - $min)}, #{$max}); } diff --git a/src/scss/02-tools/_f-get-gutter-width.scss b/src/scss/02-tools/_f-get-gutter-width.scss index 48cef979..58c52fa1 100644 --- a/src/scss/02-tools/_f-get-gutter-width.scss +++ b/src/scss/02-tools/_f-get-gutter-width.scss @@ -1,3 +1,5 @@ +@use "../01-abstract/variables"; + @use "sass:map"; /** @@ -24,7 +26,7 @@ */ @function get-gutter($preset: d) { - @return map.get(map.get($column-preset, $preset), gutter-width); + @return map.get(map.get(variables.$column-preset, $preset), gutter-width); } @function get-gutter-width($preset: d) { diff --git a/src/scss/02-tools/_f-get-svg-url.scss b/src/scss/02-tools/_f-get-svg-url.scss index da25dce2..5d996762 100644 --- a/src/scss/02-tools/_f-get-svg-url.scss +++ b/src/scss/02-tools/_f-get-svg-url.scss @@ -1,3 +1,7 @@ +@use "sass:color"; +@use "sass:list"; +@use "../01-abstract/variables"; + @use "sass:map"; /** @@ -30,7 +34,7 @@ * */ -@function get-svg-url($name: null, $fill: $color-dark, $opacity: 1, $style: "") { +@function get-svg-url($name: null, $fill: variables.$color-dark, $opacity: 1, $style: "") { $svgs: ( // name-of-the-svg: (viewBox, content of the svg element) @@ -40,7 +44,7 @@ "close": ("0 0 20 20", "3Cpath d='M5.442 5.442 5 5.883l2.058 2.059L9.116 10l-2.058 2.058L5 14.117l.442.441.441.442 2.059-2.058L10 10.884l2.058 2.058L14.117 15l.441-.442.442-.441-2.058-2.059L10.884 10l2.058-2.058L15 5.883l-.442-.441L14.117 5l-2.059 2.058L10 9.116 7.942 7.058 5.883 5l-.441.442'/%3E"), ); - @if not map-has-key($svgs, $name) { + @if not map.has-key($svgs, $name) { @return ""; } @@ -49,8 +53,8 @@ } @if ($fill != "") { - $fill: " fill='rgba(#{red($fill), green($fill), blue($fill), $opacity})'"; + $fill: " fill='rgba(#{color.channel($fill, 'red'), color.channel($fill, 'green'), color.channel($fill, 'blue'), $opacity})'"; } - @return url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg'" + $fill + $style + " viewBox='" + nth(map.get($svgs, $name), 1) + "'%3E%" + nth(map.get($svgs, $name), 2) + "%3C/svg%3E"); /* stylelint-disable-line */ + @return url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg'" + $fill + $style + " viewBox='" + list.nth(map.get($svgs, $name), 1) + "'%3E%" + list.nth(map.get($svgs, $name), 2) + "%3C/svg%3E"); /* stylelint-disable-line */ } diff --git a/src/scss/02-tools/_m-bg-fullwidth.scss b/src/scss/02-tools/_m-bg-fullwidth.scss index 5bf20e9e..0411d17f 100644 --- a/src/scss/02-tools/_m-bg-fullwidth.scss +++ b/src/scss/02-tools/_m-bg-fullwidth.scss @@ -1,3 +1,6 @@ +@use "../01-abstract/variables"; +@use "m-style-only"; + /** * Background fullwidth - Make a fullwidth background in a container element * @@ -13,7 +16,7 @@ * */ -@mixin bg-fullwidth($color: $color-grey-100) { +@mixin bg-fullwidth($color: variables.$color-grey-100) { position: relative; &::before { @@ -27,7 +30,7 @@ background-color: $color; transform: translate3d(-50%, 0, 0); - @include style-only { + @include m-style-only.style-only { z-index: -1; } } diff --git a/src/scss/02-tools/_m-block-vertical-spacing.scss b/src/scss/02-tools/_m-block-vertical-spacing.scss index b6ee5832..7e490bbe 100644 --- a/src/scss/02-tools/_m-block-vertical-spacing.scss +++ b/src/scss/02-tools/_m-block-vertical-spacing.scss @@ -1,3 +1,5 @@ +@use "f-context-selector"; + /** * Block vertical spacing */ diff --git a/src/scss/02-tools/_m-breakpoint.scss b/src/scss/02-tools/_m-breakpoint.scss index 3b99c70e..2cf6a0fe 100644 --- a/src/scss/02-tools/_m-breakpoint.scss +++ b/src/scss/02-tools/_m-breakpoint.scss @@ -1,3 +1,7 @@ +@use "sass:meta"; +@use "../01-abstract/variables"; +@use "f-em"; + @use "sass:map"; /** @@ -24,19 +28,19 @@ @mixin breakpoints($breakpoint, $min-or-max-or-breakpoint: min) { $font-size: 16px; // don't use em function whitout param, $font-size-base can be modified - @if (type-of(map.get($breakpoints, $min-or-max-or-breakpoint)) == "number") { + @if (meta.type-of(map.get(variables.$breakpoints, $min-or-max-or-breakpoint)) == "number") { - @media screen and (min-width: em(map.get($breakpoints, $breakpoint), $font-size)) and (max-width: em(map.get($breakpoints, $min-or-max-or-breakpoint) - 1, $font-size)) { + @media screen and (min-width: f-em.em(map.get(variables.$breakpoints, $breakpoint), $font-size)) and (max-width: f-em.em(map.get(variables.$breakpoints, $min-or-max-or-breakpoint) - 1, $font-size)) { @content; } } @else if ($min-or-max-or-breakpoint == max) { - @media screen and (max-width: em(map.get($breakpoints, $breakpoint) - 1, $font-size)) { + @media screen and (max-width: f-em.em(map.get(variables.$breakpoints, $breakpoint) - 1, $font-size)) { @content; } } @else { - @media screen and (min-width: em(map.get($breakpoints, $breakpoint), $font-size)) { + @media screen and (min-width: f-em.em(map.get(variables.$breakpoints, $breakpoint), $font-size)) { @content; } } diff --git a/src/scss/02-tools/_m-btn.scss b/src/scss/02-tools/_m-btn.scss index bb464bcc..15461912 100644 --- a/src/scss/02-tools/_m-btn.scss +++ b/src/scss/02-tools/_m-btn.scss @@ -1,3 +1,6 @@ +@use "../01-abstract/variables"; +@use "m-hover"; + /** * Button - All mixins for buttons - Used in src/scss/05-components/_btn.scss * @@ -31,12 +34,12 @@ font-size: 12px; font-weight: 700; line-height: 16px; - color: $color-dark; + color: variables.$color-dark; text-align: center; - background-color: $color-primary; + background-color: variables.$color-primary; border-radius: 10px; - @include hover { + @include m-hover.hover { @include btn-block-hover; } } @@ -44,8 +47,8 @@ // hover of the button block @mixin btn-block-hover { - color: $color-primary; - background-color: $color-dark; + color: variables.$color-primary; + background-color: variables.$color-dark; } // Coloring @@ -54,7 +57,7 @@ color: $color; background-color: $background-color; - @include hover { + @include m-hover.hover { color: $background-color; background-color: $color; } @@ -67,7 +70,7 @@ background-color: transparent; border: 2px solid currentColor; // Force button width VS Gutenberg CSS - @include hover { + @include m-hover.hover { @include btn-block-outline-hover; } } diff --git a/src/scss/02-tools/_m-checkbox-custom.scss b/src/scss/02-tools/_m-checkbox-custom.scss index 3fc8e849..0de9c702 100644 --- a/src/scss/02-tools/_m-checkbox-custom.scss +++ b/src/scss/02-tools/_m-checkbox-custom.scss @@ -1,3 +1,7 @@ +@use "../01-abstract/variables"; +@use "m-rtl"; +@use "m-sr-only"; + @use "sass:math"; /** @@ -21,8 +25,8 @@ * */ -@mixin checkbox-custom($color: $color-primary, $size: 18px, $border-width: 1px) { - @include sr-only; +@mixin checkbox-custom($color: variables.$color-primary, $size: 18px, $border-width: 1px) { + @include m-sr-only.sr-only; + label { position: relative; @@ -38,10 +42,10 @@ height: $size; margin: 0; content: ""; - background-color: $color-light; + background-color: variables.$color-light; border: $border-width solid $color; - @include rtl { + @include m-rtl.rtl { right: 0; left: auto; } @@ -61,7 +65,7 @@ transition: opacity .2s; transform: translate(-50%, -50%) rotate(-45deg); - @include rtl { + @include m-rtl.rtl { right: math.round(math.div($size, 2)); left: auto; transform: translate(50%, -50%) rotate(-45deg); diff --git a/src/scss/02-tools/_m-container-query.scss b/src/scss/02-tools/_m-container-query.scss index d8d9669c..b016cea6 100644 --- a/src/scss/02-tools/_m-container-query.scss +++ b/src/scss/02-tools/_m-container-query.scss @@ -1,3 +1,7 @@ +@use "sass:meta"; +@use "../01-abstract/variables"; +@use "f-em"; + @use "sass:map"; /** @@ -25,21 +29,21 @@ @mixin container-query($breakpoint, $min-or-max-or-breakpoint: min, $container-name: "") { $font-size: 16px; // don't use em function whitout param, $font-size-base can be modified - @if (type-of(map.get($breakpoints, $min-or-max-or-breakpoint)) == "number") { + @if (meta.type-of(map.get(variables.$breakpoints, $min-or-max-or-breakpoint)) == "number") { - @container #{$container-name} (min-width: #{em(map.get($breakpoints, $breakpoint), $font-size)}) and (max-width: #{em(map.get($breakpoints, $min-or-max-or-breakpoint) - 1, $font-size)}) { + @container #{$container-name} (min-width: #{f-em.em(map.get(variables.$breakpoints, $breakpoint), $font-size)}) and (max-width: #{f-em.em(map.get(variables.$breakpoints, $min-or-max-or-breakpoint) - 1, $font-size)}) { @content; } } @else if ($min-or-max-or-breakpoint == max) { - @container #{$container-name} (max-width: #{em(map.get($breakpoints, $breakpoint) - 1, $font-size)}) { + @container #{$container-name} (max-width: #{f-em.em(map.get(variables.$breakpoints, $breakpoint) - 1, $font-size)}) { @content; } } @else { - @container #{$container-name} (min-width: #{em(map.get($breakpoints, $breakpoint), $font-size)}) { + @container #{$container-name} (min-width: #{f-em.em(map.get(variables.$breakpoints, $breakpoint), $font-size)}) { @content; } diff --git a/src/scss/02-tools/_m-container.scss b/src/scss/02-tools/_m-container.scss index 88258062..8984fe86 100644 --- a/src/scss/02-tools/_m-container.scss +++ b/src/scss/02-tools/_m-container.scss @@ -1,3 +1,5 @@ +@use "../01-abstract/variables"; + /** * Container * @@ -13,7 +15,7 @@ * */ -@mixin container($size: $container-wide) { +@mixin container($size: variables.$container-wide) { width: min(#{$size}, 100% - calc(var(--responsive--gutter) * 2)); margin-inline: auto; } diff --git a/src/scss/02-tools/_m-editor-only.scss b/src/scss/02-tools/_m-editor-only.scss index dd1d273f..b9746300 100644 --- a/src/scss/02-tools/_m-editor-only.scss +++ b/src/scss/02-tools/_m-editor-only.scss @@ -1,3 +1,5 @@ +@use "../01-abstract/variables"; + /** * Editor style only * @@ -18,7 +20,7 @@ */ @mixin editor-only { - @if ($entry-file-name == "editor") { + @if (variables.$entry-file-name == "editor") { @content; } } diff --git a/src/scss/02-tools/_m-heading.scss b/src/scss/02-tools/_m-heading.scss index 1341158e..28d93d2c 100644 --- a/src/scss/02-tools/_m-heading.scss +++ b/src/scss/02-tools/_m-heading.scss @@ -1,3 +1,5 @@ +@use "../01-abstract/variables"; + /** * Heading - Used in src/scss/06-blocks/core/_heading.scss * @@ -42,7 +44,7 @@ */ @mixin heading($name: h1, $style: default) { - font-family: $font-family-primary; + font-family: variables.$font-family-primary; font-weight: 400; @if $name == h1 { diff --git a/src/scss/02-tools/_m-hover.scss b/src/scss/02-tools/_m-hover.scss index b549ca64..c3e60c79 100644 --- a/src/scss/02-tools/_m-hover.scss +++ b/src/scss/02-tools/_m-hover.scss @@ -1,3 +1,4 @@ +@use "sass:meta"; @use "sass:list"; /** @@ -44,10 +45,10 @@ $selectors: "&:hover", "&:active", "&:focus"; @if ($additionalSelectors) { - @if (type-of($additionalSelectors) == "string") { + @if (meta.type-of($additionalSelectors) == "string") { $selectors: $selectors "," $additionalSelectors; } - @else if (type-of($additionalSelectors) == "list") { + @else if (meta.type-of($additionalSelectors) == "list") { $selectors: list.join($selectors, $additionalSelectors, comma); } } diff --git a/src/scss/02-tools/_m-not-acf.scss b/src/scss/02-tools/_m-not-acf.scss index 4a99f4e6..06b51057 100644 --- a/src/scss/02-tools/_m-not-acf.scss +++ b/src/scss/02-tools/_m-not-acf.scss @@ -1,3 +1,5 @@ +@use "f-context-selector"; + /** * Not apply style to ACF fields * @@ -14,7 +16,7 @@ */ @mixin not-acf() { - #{context-selector(":where(body)", ":where(*:not([class*="acf-"])) >")} { + #{f-context-selector.context-selector(":where(body)", ":where(*:not([class*="acf-"])) >")} { @content; } } diff --git a/src/scss/02-tools/_m-radio-custom.scss b/src/scss/02-tools/_m-radio-custom.scss index 8d1478e8..0faf4872 100644 --- a/src/scss/02-tools/_m-radio-custom.scss +++ b/src/scss/02-tools/_m-radio-custom.scss @@ -1,3 +1,6 @@ +@use "../01-abstract/variables"; +@use "m-checkbox-custom"; + @use "sass:math"; /** @@ -26,9 +29,9 @@ * */ -@mixin radio-custom($include-checkbox-style: false, $color: $color-primary, $size: 18px, $border-width: 1px) { +@mixin radio-custom($include-checkbox-style: false, $color: variables.$color-primary, $size: 18px, $border-width: 1px) { @if ($include-checkbox-style) { - @include checkbox-custom($color, $size, $border-width); + @include m-checkbox-custom.checkbox-custom($color, $size, $border-width); } + label { @@ -48,5 +51,5 @@ } @mixin radio-custom-checked() { - @include checkbox-custom-checked; + @include m-checkbox-custom.checkbox-custom-checked; } diff --git a/src/scss/02-tools/_m-scrollbar.scss b/src/scss/02-tools/_m-scrollbar.scss index 01ff74f3..08fe5df7 100644 --- a/src/scss/02-tools/_m-scrollbar.scss +++ b/src/scss/02-tools/_m-scrollbar.scss @@ -1,3 +1,5 @@ +@use "m-hover"; + /** * Scrollbar - Make an invisible scrollbar and custom the scrollbar color * @@ -55,7 +57,7 @@ border-radius: 20px; } - @include hover { + @include m-hover.hover { &::-webkit-scrollbar { display: block; } diff --git a/src/scss/02-tools/_m-select-custom.scss b/src/scss/02-tools/_m-select-custom.scss index 2b5ef9ea..8c0ba279 100644 --- a/src/scss/02-tools/_m-select-custom.scss +++ b/src/scss/02-tools/_m-select-custom.scss @@ -1,3 +1,7 @@ +@use "../01-abstract/variables"; +@use "f-get-svg-url"; +@use "m-rtl"; + @use "sass:color"; /** @@ -21,17 +25,17 @@ margin: 0; font-size: 16px; // prevent iOS zoom line-height: 1.15; - color: $color-text; - background-color: $color-light; - background-image: get-svg-url("down"), linear-gradient(to bottom, $color-light 0%, $color-light 100%); + color: variables.$color-text; + background-color: variables.$color-light; + background-image: f-get-svg-url.get-svg-url("down"), linear-gradient(to bottom, variables.$color-light 0%, variables.$color-light 100%); background-repeat: no-repeat, repeat; background-position: right 10px top 50%, 0 0; background-size: 10px auto, 100%; - border: 1px solid $color-grey-500; + border: 1px solid variables.$color-grey-500; border-radius: 10px; appearance: none; - @include rtl { + @include m-rtl.rtl { background-position: left 10px top 50%, 0 0; } @@ -47,13 +51,13 @@ // Hover style &:hover { - border-color: color.adjust($color-grey-500, $lightness: -10%); + border-color: color.adjust(variables.$color-grey-500, $lightness: -10%); } // Focus style &:focus { - color: color.adjust($color-text, $lightness: -10%); - border-color: color.adjust($color-grey-500, $lightness: -20%); + color: color.adjust(variables.$color-text, $lightness: -10%); + border-color: color.adjust(variables.$color-grey-500, $lightness: -20%); outline: none; box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7); box-shadow: 0 0 0 3px -moz-mac-focusring; @@ -63,7 +67,7 @@ } } - @include rtl { + @include m-rtl.rtl { background-position: left 10px top 50%, 0 0; } } diff --git a/src/scss/02-tools/_m-style-only.scss b/src/scss/02-tools/_m-style-only.scss index 69a34dca..f0e43190 100644 --- a/src/scss/02-tools/_m-style-only.scss +++ b/src/scss/02-tools/_m-style-only.scss @@ -1,3 +1,5 @@ +@use "../01-abstract/variables"; + /** * Style for Frontend UI only * @@ -18,7 +20,7 @@ */ @mixin style-only { - @if ($entry-file-name == "style") { + @if (variables.$entry-file-name == "style") { @content; } } diff --git a/src/scss/02-tools/_m-text-icon.scss b/src/scss/02-tools/_m-text-icon.scss index 2da4d73a..69af4a1b 100644 --- a/src/scss/02-tools/_m-text-icon.scss +++ b/src/scss/02-tools/_m-text-icon.scss @@ -1,3 +1,6 @@ +@use "../01-abstract/constants"; +@use "f-get-svg-url"; + /** * Add icon before text with mask to have the same color of the text * @@ -25,10 +28,10 @@ height: $size; content: ""; background-color: $color; - mask-image: get-svg-url($icon); + mask-image: f-get-svg-url.get-svg-url($icon); mask-position: center; mask-repeat: no-repeat; - transition: background-color .5s $ease-out-expo; + transition: background-color .5s constants.$ease-out-expo; } } diff --git a/src/scss/02-tools/tools.scss b/src/scss/02-tools/tools.scss index b2a540e4..20a3afcf 100644 --- a/src/scss/02-tools/tools.scss +++ b/src/scss/02-tools/tools.scss @@ -2,40 +2,40 @@ * Abstract folder entry file */ -@import "./f-assign-inputs"; -@import "./f-column"; -@import "./f-context-align"; -@import "./f-context-selector"; -@import "./f-easings"; -@import "./f-em"; -@import "./f-get-gutter-width"; -@import "./f-get-svg-url"; -@import "./f-strip-units"; -@import "./f-fluid-size"; -@import "./m-align"; -@import "./m-autofill"; -@import "./m-breakpoint"; -@import "./m-btn"; -@import "./m-checkbox-custom"; -@import "./m-container"; -@import "./m-container-query"; -@import "./m-declare-font-face"; -@import "./m-editor-only"; -@import "./m-heading"; -@import "./m-hover"; -@import "./m-line-clamp"; -@import "./m-placeholder-media"; -@import "./m-radio-custom"; -@import "./m-row-fullwidth"; -@import "./m-scrollbar"; -@import "./m-select-custom"; -@import "./m-sr-only"; -@import "./m-style-only"; -@import "./m-reduced-motion"; -@import "./m-bg-fullwidth"; -@import "./m-block-vertical-spacing"; -@import "./m-background-static"; -@import "./m-not-acf"; -@import "./m-rtl"; -@import "./m-text"; -@import "./m-text-icon"; +@use "f-assign-inputs"; +@use "f-column"; +@use "f-context-align"; +@use "f-context-selector"; +@use "f-easings"; +@use "f-em"; +@use "f-get-gutter-width"; +@use "f-get-svg-url"; +@use "f-strip-units"; +@use "f-fluid-size"; +@use "m-align"; +@use "m-autofill"; +@use "m-breakpoint"; +@use "m-btn"; +@use "m-checkbox-custom"; +@use "m-container"; +@use "m-container-query"; +@use "m-declare-font-face"; +@use "m-editor-only"; +@use "m-heading"; +@use "m-hover"; +@use "m-line-clamp"; +@use "m-placeholder-media"; +@use "m-radio-custom"; +@use "m-row-fullwidth"; +@use "m-scrollbar"; +@use "m-select-custom"; +@use "m-sr-only"; +@use "m-style-only"; +@use "m-reduced-motion"; +@use "m-bg-fullwidth"; +@use "m-block-vertical-spacing"; +@use "m-background-static"; +@use "m-not-acf"; +@use "m-rtl"; +@use "m-text"; +@use "m-text-icon"; diff --git a/src/scss/03-base/_body.scss b/src/scss/03-base/_body.scss index 6af8bb46..646c4d33 100644 --- a/src/scss/03-base/_body.scss +++ b/src/scss/03-base/_body.scss @@ -1,13 +1,16 @@ +@use "../01-abstract/variables"; +@use "../02-tools/m-rtl"; + html { /* Set automatic RTL direction depending on lang attribute */ - @include set-rtl-direction; + @include m-rtl.set-rtl-direction; /* Apply border-box across the entire page. */ box-sizing: border-box; // HTML resets - font-family: $font-family-primary; - line-height: $line-height-base; + font-family: variables.$font-family-primary; + line-height: variables.$line-height-base; // Scroll resets -webkit-overflow-scrolling: touch; @@ -31,9 +34,9 @@ html { } body { - font-family: $font-family-primary; - font-size: $font-size-base; + font-family: variables.$font-family-primary; + font-size: variables.$font-size-base; font-weight: normal; - color: $color-text; - background-color: $color-light; + color: variables.$color-text; + background-color: variables.$color-light; } diff --git a/src/scss/03-base/_forms.scss b/src/scss/03-base/_forms.scss index fb124761..a078ae14 100644 --- a/src/scss/03-base/_forms.scss +++ b/src/scss/03-base/_forms.scss @@ -1,3 +1,12 @@ +@use "../01-abstract/variables"; +@use "../02-tools/f-assign-inputs"; +@use "../02-tools/f-get-svg-url"; +@use "../02-tools/m-checkbox-custom"; +@use "../02-tools/m-not-acf"; +@use "../02-tools/m-radio-custom"; +@use "../02-tools/m-select-custom"; +@use "../05-components/btn"; + @use "sass:color"; // All inputs variables @@ -8,10 +17,10 @@ $text-inputs-list: 'input[type="color"]', 'input[type="date"]', 'input[type="text"]', 'input[type="time"]', 'input[type="url"]', 'input[type="week"]', "input:not([type])", "textarea"; -$all-text-inputs: assign-inputs($text-inputs-list); +$all-text-inputs: f-assign-inputs.assign-inputs($text-inputs-list); // Not apply style to ACF fields -@include not-acf { +@include m-not-acf.not-acf { // Textarea textarea { resize: vertical; @@ -22,26 +31,26 @@ $all-text-inputs: assign-inputs($text-inputs-list); box-sizing: border-box; width: 100%; padding: 15px 25px; - font-family: $font-family-primary; + font-family: variables.$font-family-primary; line-height: 1; - color: $color-text; - background: color.adjust($color-light, $lightness: -5%); - border: 1px solid $color-grey-500; + color: variables.$color-text; + background: color.adjust(variables.$color-light, $lightness: -5%); + border: 1px solid variables.$color-grey-500; border-radius: 10px; //reset border radius for ios transition: border-color .5s ease; appearance: none; &::placeholder { - color: color.adjust($color-text, $lightness: 50%); + color: color.adjust(variables.$color-text, $lightness: 50%); } &:hover { - border-color: color.adjust($color-grey-500, $lightness: -10%); + border-color: color.adjust(variables.$color-grey-500, $lightness: -10%); } &:focus { - color: color.adjust($color-text, $lightness: -10%); - border-color: color.adjust($color-grey-500, $lightness: -20%); + color: color.adjust(variables.$color-text, $lightness: -10%); + border-color: color.adjust(variables.$color-grey-500, $lightness: -20%); } } @@ -53,20 +62,20 @@ $all-text-inputs: assign-inputs($text-inputs-list); // Custom select select { - @include select-custom; + @include m-select-custom.select-custom; } input[type="checkbox"], input[type="radio"] { - @include checkbox-custom; + @include m-checkbox-custom.checkbox-custom; &:checked { - @include checkbox-custom-checked; + @include m-checkbox-custom.checkbox-custom-checked; } } input[type="radio"] { - @include radio-custom(true); + @include m-radio-custom.radio-custom(true); } /* @@ -100,7 +109,7 @@ $all-text-inputs: assign-inputs($text-inputs-list); width: 16px; height: 16px; cursor: pointer; - background-image: get-svg-url("close", $color-dark); + background-image: f-get-svg-url.get-svg-url("close", variables.$color-dark); background-repeat: no-repeat; background-size: contain; -webkit-appearance: none; diff --git a/src/scss/03-base/_links.scss b/src/scss/03-base/_links.scss index f25b2fe5..be1577af 100644 --- a/src/scss/03-base/_links.scss +++ b/src/scss/03-base/_links.scss @@ -1,17 +1,20 @@ +@use "../02-tools/m-hover"; +@use "../02-tools/m-text-icon"; + a { color: currentColor; text-decoration: underline; cursor: pointer; &[target="_blank"] { - @include text-external-icon; + @include m-text-icon.text-icon("external"); } - @include hover { + @include m-hover.hover { text-decoration: none; } } .link-external { - @include text-external-icon; + @include m-text-icon.text-icon("external"); } diff --git a/src/scss/03-base/_print.scss b/src/scss/03-base/_print.scss index dbc8c65a..f3f31738 100644 --- a/src/scss/03-base/_print.scss +++ b/src/scss/03-base/_print.scss @@ -1,7 +1,9 @@ +@use "../01-abstract/variables"; + @media print { * { font-family: Arial, Helvetica, sans-serif !important; - color: $color-dark !important; + color: variables.$color-dark !important; text-decoration: none; text-shadow: none !important; background: transparent !important; diff --git a/src/scss/03-base/_variables-css.scss b/src/scss/03-base/_variables-css.scss index ba475ff3..e0db4252 100644 --- a/src/scss/03-base/_variables-css.scss +++ b/src/scss/03-base/_variables-css.scss @@ -1,3 +1,8 @@ +@use "../01-abstract/variables"; +@use "../02-tools/f-fluid-size"; +@use "../02-tools/m-breakpoint"; +@use "../02-tools/m-reduced-motion"; + :root { /* * Heading @@ -13,11 +18,11 @@ /** * Font size fluid -> /!\ IMPORTANT /!\ : no add media query to defined different values. The function make it * - * --heading--font-size-h1: #{fluid-size(58px, 156px)}; - * --heading--font-size-h2: #{fluid-size(47px, 96px)}; - * --heading--font-size-h3: #{fluid-size(38px, 52px)}; - * --heading--font-size-h4: #{fluid-size(32px, 45px)}; - * --heading--font-size-h5: #{fluid-size(28px, 34px)}; + * --heading--font-size-h1: #{f-fluid-size.fluid-size(58px, 156px)}; + * --heading--font-size-h2: #{f-fluid-size.fluid-size(47px, 96px)}; + * --heading--font-size-h3: #{f-fluid-size.fluid-size(38px, 52px)}; + * --heading--font-size-h4: #{f-fluid-size.fluid-size(32px, 45px)}; + * --heading--font-size-h5: #{f-fluid-size.fluid-size(28px, 34px)}; */ // Line height @@ -40,10 +45,10 @@ /** * Font size fluid -> /!\ IMPORTANT /!\ : no add media query to defined different values. The function make it * - * --paragraph--font-size-huge: #{fluid-size(28px, 32px)}; - * --paragraph--font-size-large: #{fluid-size(20px, 24px)}; - * --paragraph--font-size-small: #{fluid-size(12px, 14px)}; - * --paragraph--font-size-default: #{fluid-size(14px, 16px)}; + * --paragraph--font-size-huge: #{f-fluid-size.fluid-size(28px, 32px)}; + * --paragraph--font-size-large: #{f-fluid-size.fluid-size(20px, 24px)}; + * --paragraph--font-size-small: #{f-fluid-size.fluid-size(12px, 14px)}; + * --paragraph--font-size-default: #{f-fluid-size.fluid-size(14px, 16px)}; */ // line height @@ -64,10 +69,10 @@ * Spacing fluid -> /!\ IMPORTANT /!\ : no add media query to defined different values. The function make it * * Fluid spacing : - * --spacing--block-1: #{fluid-size(16px, 32px)}; - * --spacing--block-2: #{fluid-size(32px, 64px)}; - * --spacing--block-3: #{fluid-size(48px, 96px)}; - * --spacing--block-4: #{fluid-size(64px, 128px)}; + * --spacing--block-1: #{f-fluid-size.fluid-size(16px, 32px)}; + * --spacing--block-2: #{f-fluid-size.fluid-size(32px, 64px)}; + * --spacing--block-3: #{f-fluid-size.fluid-size(48px, 96px)}; + * --spacing--block-4: #{f-fluid-size.fluid-size(64px, 128px)}; * * Fixed spacings : * --spacing--fixed--block-1: 16px; @@ -77,7 +82,7 @@ /* * Gutters */ - --responsive--gutter: #{$external-gutter-mobile}; + --responsive--gutter: #{variables.$external-gutter-mobile}; /* * Alignments @@ -99,7 +104,7 @@ /* * A11y reduced motion */ - @include reduced-motion { + @include m-reduced-motion.reduced-motion { --speed: 0s; } @@ -107,7 +112,7 @@ * Global breakpoints */ - @include breakpoints(s, max) { + @include m-breakpoint.breakpoints(s, max) { /* * Admin bar become not sticky */ @@ -118,7 +123,7 @@ } } - @include breakpoints(md) { + @include m-breakpoint.breakpoints(md) { /* * Spacing * /!\ IMPORTANT : Remove it if you use fluid size function instead /!\ @@ -131,6 +136,6 @@ /* * Gutters */ - --responsive--gutter: #{$external-gutter}; + --responsive--gutter: #{variables.$external-gutter}; } } diff --git a/src/scss/03-base/base.scss b/src/scss/03-base/base.scss index b09c00ad..bad2f584 100644 --- a/src/scss/03-base/base.scss +++ b/src/scss/03-base/base.scss @@ -2,13 +2,13 @@ * Base folder entry file */ -@import "./fonts"; -@import "./variables-css"; -@import "./normalize"; -@import "./body"; -@import "./svg-icons"; -@import "./forms"; -@import "./links"; -@import "./media"; -@import "./text"; -@import "./print"; +@use "fonts"; +@use "variables-css"; +@use "normalize"; +@use "body"; +@use "svg-icons"; +@use "forms"; +@use "links"; +@use "media"; +@use "text"; +@use "print"; diff --git a/src/scss/04-utilities/_container.scss b/src/scss/04-utilities/_container.scss index c10d2f52..cfdeda7b 100644 --- a/src/scss/04-utilities/_container.scss +++ b/src/scss/04-utilities/_container.scss @@ -1,9 +1,12 @@ +@use "../01-abstract/variables"; +@use "../02-tools/m-container"; + /* Main Layout */ .container, .container-wide { - @include container; + @include m-container.container; } .container-default { - @include container($container-default); + @include m-container.container(variables.$container-default); } diff --git a/src/scss/04-utilities/_focus.scss b/src/scss/04-utilities/_focus.scss index 82747d14..9100934e 100644 --- a/src/scss/04-utilities/_focus.scss +++ b/src/scss/04-utilities/_focus.scss @@ -11,14 +11,3 @@ html { } } } - -%focus-seo-container { - &:has(:focus-visible) { - outline: 2px solid currentColor; - outline-offset: .5rem; - } - - *:focus { - outline: none; - } -} diff --git a/src/scss/04-utilities/_js-animation.scss b/src/scss/04-utilities/_js-animation.scss index db2ef44b..4dcc67dc 100644 --- a/src/scss/04-utilities/_js-animation.scss +++ b/src/scss/04-utilities/_js-animation.scss @@ -1,3 +1,5 @@ +@use "../01-abstract/constants"; + /** * js-animation * @@ -39,7 +41,7 @@ %js-animation-translation-init { > * { opacity: 0; - transition: opacity .5s, transform .5s $ease-out-expo; + transition: opacity .5s, transform .5s constants.$ease-out-expo; transform: translateY(100px); } } @@ -79,7 +81,7 @@ > span { display: inline-block; - transition: transform .75s $ease-out-expo; + transition: transform .75s constants.$ease-out-expo; transform: translateY(150%); } } diff --git a/src/scss/04-utilities/_lazyload.scss b/src/scss/04-utilities/_lazyload.scss index df725030..6ef983f4 100644 --- a/src/scss/04-utilities/_lazyload.scss +++ b/src/scss/04-utilities/_lazyload.scss @@ -1,8 +1,10 @@ +@use "../01-abstract/variables"; + @use "sass:math"; .lazyload, .lazyloading { - background: $color-primary; + background: variables.$color-primary; opacity: 0; } @@ -30,7 +32,7 @@ $loading-dimensions: 50px; left: 0; z-index: 2; content: ""; - background: $color-primary; + background: variables.$color-primary; transition: opacity .5s, z-index .5s ease .5s; } @@ -42,7 +44,7 @@ $loading-dimensions: 50px; width: $loading-dimensions; height: $loading-dimensions; content: ""; - border: 5px solid $color-light; + border: 5px solid variables.$color-light; border-top-color: transparent; border-radius: $loading-dimensions; opacity: 1; diff --git a/src/scss/04-utilities/_palette.scss b/src/scss/04-utilities/_palette.scss index 26f4426a..c7827d60 100644 --- a/src/scss/04-utilities/_palette.scss +++ b/src/scss/04-utilities/_palette.scss @@ -1,6 +1,8 @@ +@use "../01-abstract/variables"; + @use "sass:map"; -@each $name, $colors in $palette { +@each $name, $colors in variables.$palette { .has-#{$name}-color { color: map.get($colors, color); } diff --git a/src/scss/04-utilities/_seo.scss b/src/scss/04-utilities/_seo.scss index 7d3aedd5..1972f556 100644 --- a/src/scss/04-utilities/_seo.scss +++ b/src/scss/04-utilities/_seo.scss @@ -1,3 +1,14 @@ +%focus-seo-container { + &:has(:focus-visible) { + outline: 2px solid currentColor; + outline-offset: .5rem; + } + + *:focus { + outline: none; + } +} + %seo-container { @extend %focus-seo-container; position: relative; diff --git a/src/scss/04-utilities/_sr-only.scss b/src/scss/04-utilities/_sr-only.scss index 856fb6bb..87eaf522 100644 --- a/src/scss/04-utilities/_sr-only.scss +++ b/src/scss/04-utilities/_sr-only.scss @@ -1,9 +1,11 @@ +@use "../02-tools/m-sr-only"; + %sr-only { - @include sr-only; + @include m-sr-only.sr-only; } %sr-only-focusable { - @include sr-only(true); + @include m-sr-only.sr-only(true); } .sr-only { diff --git a/src/scss/04-utilities/_wp-admin-bar.scss b/src/scss/04-utilities/_wp-admin-bar.scss index b09db67a..37a1998d 100644 --- a/src/scss/04-utilities/_wp-admin-bar.scss +++ b/src/scss/04-utilities/_wp-admin-bar.scss @@ -1,5 +1,7 @@ +@use "../02-tools/m-breakpoint"; + #wpadminbar { - @include breakpoints(sm, max) { + @include m-breakpoint.breakpoints(sm, max) { overflow: scroll; } } diff --git a/src/scss/04-utilities/utilities.scss b/src/scss/04-utilities/utilities.scss index a86ff752..e17147b9 100644 --- a/src/scss/04-utilities/utilities.scss +++ b/src/scss/04-utilities/utilities.scss @@ -1,10 +1,10 @@ -@import "./wp-admin-bar"; -@import "./focus"; -@import "./lazyload"; -@import "./seo"; -@import "./video-wrapper"; -@import "./palette"; -@import "./container"; -@import "./sr-only"; -@import "./js-animation"; -@import "./aria"; +@use "wp-admin-bar"; +@use "focus"; +@use "lazyload"; +@use "seo"; +@use "video-wrapper"; +@use "palette"; +@use "container"; +@use "sr-only"; +@use "js-animation"; +@use "aria"; diff --git a/src/scss/05-components/_btn.scss b/src/scss/05-components/_btn.scss index 65ba6377..aaae5e7c 100644 --- a/src/scss/05-components/_btn.scss +++ b/src/scss/05-components/_btn.scss @@ -1,15 +1,17 @@ +@use "../02-tools/m-btn"; + %btn { - @include btn; + @include m-btn.btn; } %btn-block { @extend %btn; - @include btn-block; + @include m-btn.btn-block; } %btn-block-outline { @extend %btn-block; - @include btn-block-outline; + @include m-btn.btn-block-outline; } .btn { diff --git a/src/scss/05-components/_skip-links.scss b/src/scss/05-components/_skip-links.scss index 9a96aae0..e0c4e362 100644 --- a/src/scss/05-components/_skip-links.scss +++ b/src/scss/05-components/_skip-links.scss @@ -1,3 +1,6 @@ +@use "../01-abstract/constants"; +@use "../01-abstract/variables"; + .skip-links { position: fixed; top: var(--wp-admin-bar-height); @@ -5,9 +8,9 @@ z-index: 11; // Under header width: 100%; padding: 8px 10px 10px; - background-color: $color-primary; + background-color: variables.$color-primary; opacity: 0; - transition: transform .3s $ease-out-expo, opacity .3s; + transition: transform .3s constants.$ease-out-expo, opacity .3s; transform: translate3d(0, -100%, 0); ul { @@ -17,7 +20,7 @@ a { font-size: 13px; - color: $color-text; + color: variables.$color-text; text-decoration: none; &:focus { diff --git a/src/scss/05-components/components.scss b/src/scss/05-components/components.scss index 436e5ae0..469c635e 100644 --- a/src/scss/05-components/components.scss +++ b/src/scss/05-components/components.scss @@ -2,6 +2,6 @@ * Elements folder entry file */ -@import "./btn"; -@import "./searchform"; -@import "./skip-links"; +@use "btn"; +@use "searchform"; +@use "skip-links"; diff --git a/src/scss/06-blocks/_gutenberg.scss b/src/scss/06-blocks/_gutenberg.scss index 7dc34fe0..223a35ac 100644 --- a/src/scss/06-blocks/_gutenberg.scss +++ b/src/scss/06-blocks/_gutenberg.scss @@ -1,12 +1,19 @@ -@include editor-only { +@use "../01-abstract/variables"; +@use "../02-tools/f-context-selector"; +@use "../02-tools/f-get-gutter-width"; +@use "../02-tools/m-align"; +@use "../02-tools/m-editor-only"; +@use "../02-tools/m-heading"; + +@include m-editor-only.editor-only { // ---- // Post title style // ---- .editor-post-title { - @include heading(h1); + @include m-heading.heading(h1); - width: #{$container-wide}; + width: #{variables.$container-wide}; max-width: var(--responsive--alignwide-width); margin-bottom: var(--spacing--block-3); } @@ -16,7 +23,7 @@ // ---- .wp-block.block-editor-default-block-appender > textarea { font-family: var(--global--font-secondary); - font-size: $font-size-md; + font-size: variables.$font-size-md; } // ---- @@ -39,7 +46,7 @@ .has-drop-cap:not(:focus)::first-letter { float: left; margin: .1em .1em 0 0; - font-family: var($font-family-primary); + font-family: var(variables.$font-family-primary); font-size: calc(1.2 * var(--heading--font-size-h1)); font-style: normal; font-weight: var(--heading--font-weight); @@ -47,35 +54,59 @@ text-transform: uppercase; } -#{context-selector(".blocks-container", ".is-root-container")} { +#{f-context-selector.context-selector(".blocks-container", ".is-root-container")} { // ---- // Alignements horizontaux // ---- > :where(*) { - width: #{$container-default}; + width: #{variables.$container-default}; max-width: var(--responsive--aligndefault-width); margin-right: auto; margin-left: auto; } - #{context-selector(".alignwide", "[data-align='wide']")} { - width: #{$container-wide}; + @include m-editor-only.editor-only { + > .wp-block[class*="wp-block-acf"], + > .wp-block[class*="wp-block-beapi-manual-block"], + > .wp-block[class*="wp-block-beapi-dynamic-block"] { + width: 100%; + max-width: none; + } + + > .wp-block[class*="wp-block-acf"].is-selected { + width: #{variables.$container-wide}; + max-width: var(--responsive--alignwide-width); + } + + // The template block must have a ".block" class. Example :
+ > :where(.wp-block[class*="wp-block-acf"]) :where(.block), + > :where(.wp-block[class*="wp-block-beapi-manual-block"]) :where(.block), + > :where(.wp-block[class*="wp-block-beapi-dynamic-block"]) :where(.block) { + width: variables.$container-default; + max-width: var(--responsive--aligndefault-width); + margin-right: auto; + margin-left: auto; + } + } + + #{f-context-selector.context-selector(".alignwide", "[data-align='wide']")} { + width: #{variables.$container-wide}; max-width: var(--responsive--alignwide-width); } - #{context-selector(".alignfull", "[data-align='full']")} { + #{f-context-selector.context-selector(".alignfull", "[data-align='full']")} { width: 100%; max-width: var(--responsive--alignfull-width); } .alignleft { - @include align; + @include m-align.align; } .alignright { - @include align(right); + @include m-align.align(right); } .aligncenter { @@ -93,7 +124,7 @@ :where(.is-layout-flex), :where(.is-layout-grid) { - gap: get-gutter-width(); + gap: f-get-gutter-width.get-gutter-width(); } // ---- @@ -132,7 +163,7 @@ } } - @include editor-only { + @include m-editor-only.editor-only { > * { diff --git a/src/scss/06-blocks/blocks.scss b/src/scss/06-blocks/blocks.scss index bd90a76a..58eb15f7 100644 --- a/src/scss/06-blocks/blocks.scss +++ b/src/scss/06-blocks/blocks.scss @@ -4,25 +4,25 @@ // - In the future the Block styles may get compiled to individual .css // files and conditionally loaded -@import "./core/audio"; -@import "./core/buttons"; -@import "./core/code"; -@import "./core/columns"; -@import "./core/cover"; -@import "./core/file"; -@import "./core/freeform"; -@import "./core/gallery"; -@import "./core/group"; -@import "./core/heading"; -@import "./core/image"; -@import "./core/list"; -@import "./core/media-text"; -@import "./core/paragraph"; -@import "./core/preformatted"; -@import "./core/pullquote"; -@import "./core/quote"; -@import "./core/separator"; -@import "./core/search"; -@import "./core/spacer"; -@import "./core/table"; -@import "./core/video"; +@use "core/audio"; +@use "core/buttons"; +@use "core/code"; +@use "core/columns"; +@use "core/cover"; +@use "core/file"; +@use "core/freeform"; +@use "core/gallery"; +@use "core/group"; +@use "core/heading"; +@use "core/image"; +@use "core/list"; +@use "core/media-text"; +@use "core/paragraph"; +@use "core/preformatted"; +@use "core/pullquote"; +@use "core/quote"; +@use "core/separator"; +@use "core/search"; +@use "core/spacer"; +@use "core/table"; +@use "core/video"; diff --git a/src/scss/06-blocks/core/_audio.scss b/src/scss/06-blocks/core/_audio.scss index d0c76ab9..93f59332 100644 --- a/src/scss/06-blocks/core/_audio.scss +++ b/src/scss/06-blocks/core/_audio.scss @@ -1,11 +1,13 @@ +@use "../../01-abstract/variables"; + .wp-block-audio { audio { &::-webkit-media-controls-panel { - background-color: $color-primary; + background-color: variables.$color-primary; } &:focus { - outline: 2px solid $color-primary; + outline: 2px solid variables.$color-primary; outline-offset: 5px; } } diff --git a/src/scss/06-blocks/core/_buttons.scss b/src/scss/06-blocks/core/_buttons.scss index 92fa30ab..e0dd6c9a 100644 --- a/src/scss/06-blocks/core/_buttons.scss +++ b/src/scss/06-blocks/core/_buttons.scss @@ -1,3 +1,5 @@ +@use "../../05-components/btn"; + .wp-block { // ---- // container diff --git a/src/scss/06-blocks/core/_columns.scss b/src/scss/06-blocks/core/_columns.scss index cbde4b1e..74550723 100644 --- a/src/scss/06-blocks/core/_columns.scss +++ b/src/scss/06-blocks/core/_columns.scss @@ -1,8 +1,11 @@ +@use "../../02-tools/m-block-vertical-spacing"; +@use "../../02-tools/m-breakpoint"; + .wp-block-columns { --wp-block-columns-row-gap: var(--spacing--block-2); --wp-block-columns-column-gap: #{get_gutter-width()}; - @include block-vertical-spacing(); + @include m-block-vertical-spacing.block-vertical-spacing(); row-gap: var(--wp-block-columns-row-gap); column-gap: var(--wp-block-columns-column-gap) !important; @@ -19,7 +22,7 @@ margin-left: 0 !important; } - @include breakpoints(md, max) { + @include m-breakpoint.breakpoints(md, max) { flex-wrap: wrap !important; .wp-block-column { diff --git a/src/scss/06-blocks/core/_cover.scss b/src/scss/06-blocks/core/_cover.scss index c822270d..b768ff49 100644 --- a/src/scss/06-blocks/core/_cover.scss +++ b/src/scss/06-blocks/core/_cover.scss @@ -1,17 +1,20 @@ +@use "../../02-tools/m-editor-only"; +@use "../../02-tools/m-style-only"; + .wp-block-cover, .wp-block-cover-image { &:not(.alignwide):not(.alignfull) { clear: both; } - @include style-only { + @include m-style-only.style-only { &.alignfull { margin-top: 0; margin-bottom: 0; } } - @include editor-only { + @include m-editor-only.editor-only { [data-align="full"] & { margin-top: 0; margin-bottom: 0; diff --git a/src/scss/06-blocks/core/_file.scss b/src/scss/06-blocks/core/_file.scss index ec51aac2..8e8403f8 100644 --- a/src/scss/06-blocks/core/_file.scss +++ b/src/scss/06-blocks/core/_file.scss @@ -1,3 +1,5 @@ +@use "../../05-components/btn"; + .wp-block-file { $el: &; diff --git a/src/scss/06-blocks/core/_freeform.scss b/src/scss/06-blocks/core/_freeform.scss index 6d1f5848..8a34dbe4 100644 --- a/src/scss/06-blocks/core/_freeform.scss +++ b/src/scss/06-blocks/core/_freeform.scss @@ -1,5 +1,8 @@ +@use "../../01-abstract/variables"; +@use "../../02-tools/m-editor-only"; + .wp-block-freeform { - @include editor-only { + @include m-editor-only.editor-only { // Remove the border of blockquotes inside the classic block. &.block-library-rich-text__tinymce blockquote { border: none; @@ -12,7 +15,7 @@ // Backend Classic editor container .mce-content-body { - width: #{$container-wide}; + width: #{variables.$container-wide}; max-width: var(--responsive--alignwide-width); margin: 0; } diff --git a/src/scss/06-blocks/core/_gallery.scss b/src/scss/06-blocks/core/_gallery.scss index 75a7afaa..cf066295 100644 --- a/src/scss/06-blocks/core/_gallery.scss +++ b/src/scss/06-blocks/core/_gallery.scss @@ -1,3 +1,5 @@ +@use "../../02-tools/f-get-gutter-width"; + .wp-block-gallery { - --wp--style--gallery-gap-default: #{get-gutter-width()} !important; + --wp--style--gallery-gap-default: #{f-get-gutter-width.get-gutter-width()} !important; } diff --git a/src/scss/06-blocks/core/_group.scss b/src/scss/06-blocks/core/_group.scss index 03878e2c..77f56021 100644 --- a/src/scss/06-blocks/core/_group.scss +++ b/src/scss/06-blocks/core/_group.scss @@ -1,3 +1,6 @@ +@use "../../02-tools/m-breakpoint"; +@use "../../02-tools/m-editor-only"; + .wp-block-group { $el: &; @@ -14,14 +17,14 @@ } } - @include breakpoints(sm, max) { + @include m-breakpoint.breakpoints(sm, max) { &--full-mobile { max-width: 100% !important; } } } -@include editor-only { +@include m-editor-only.editor-only { .wp-block-group { &:not(.is-layout-grid) { display: flow-root; diff --git a/src/scss/06-blocks/core/_heading.scss b/src/scss/06-blocks/core/_heading.scss index 47b388ba..e35d4304 100644 --- a/src/scss/06-blocks/core/_heading.scss +++ b/src/scss/06-blocks/core/_heading.scss @@ -1,3 +1,5 @@ +@use "../../02-tools/m-heading"; + /** * Headings * @@ -33,17 +35,17 @@ $headings: ( @each $i, $styles in $headings { h#{$i} { - @include heading(h#{$i}); + @include m-heading.heading(h#{$i}); @each $style in $styles { &.is-style-#{$style} { - @include heading(h#{$i}, $style); + @include m-heading.heading(h#{$i}, $style); } } } .is-style-h#{$i} { - @include heading(h#{$i}); + @include m-heading.heading(h#{$i}); } .has-h-#{$i}-font-size { diff --git a/src/scss/06-blocks/core/_image.scss b/src/scss/06-blocks/core/_image.scss index cab35af6..c73f2ca2 100644 --- a/src/scss/06-blocks/core/_image.scss +++ b/src/scss/06-blocks/core/_image.scss @@ -1,3 +1,5 @@ +@use "../../01-abstract/variables"; + .wp-block-image { > img { max-width: 100%; @@ -5,7 +7,7 @@ } figcaption { - font-size: $font-size-xs; - color: $color-grey-600; + font-size: variables.$font-size-xs; + color: variables.$color-grey-600; } } diff --git a/src/scss/06-blocks/core/_list.scss b/src/scss/06-blocks/core/_list.scss index 2b7746f5..c23d1425 100644 --- a/src/scss/06-blocks/core/_list.scss +++ b/src/scss/06-blocks/core/_list.scss @@ -1,10 +1,14 @@ +@use "../../01-abstract/variables"; +@use "../../02-tools/f-context-selector"; +@use "../../02-tools/m-rtl"; + // Use the no-list-style class in your theme if you want the basic style %marker-ol-default { font-size: 16px; font-weight: 700; line-height: 1.3; - color: $color-dark; + color: variables.$color-dark; } %marker-ul-default { @@ -14,24 +18,24 @@ width: 6px; height: 6px; content: ""; - background-color: $color-dark; + background-color: variables.$color-dark; border-radius: 100%; - @include rtl { + @include m-rtl.rtl { right: -15px; left: inherit; } } -#{context-selector('.blocks-container', '.is-root-container')} { +#{f-context-selector.context-selector('.blocks-container', '.is-root-container')} { --offset-item: 30px; --vertical-spaging-item: 16px; ul, ol { &:not([class*="no-list-style"]):not([role="list"]):not(.chosen-choices):not(.chosen-results) { - font-size: var(--paragraph--font-size-default, $font-size-base); - line-height: var(--paragraph--line-height-default, $line-height-base); + font-size: var(--paragraph--font-size-default, variables.$font-size-base); + line-height: var(--paragraph--line-height-default, variables.$line-height-base); ul, ol { @@ -50,7 +54,7 @@ padding-left: var(--offset-item); margin-bottom: var(--vertical-spaging-item); - @include rtl { + @include m-rtl.rtl { padding-right: var(--offset-item); padding-left: 0; } @@ -76,7 +80,7 @@ margin-bottom: var(--vertical-spaging-item); margin-left: calc(var(--offset-item) * .5); - @include rtl { + @include m-rtl.rtl { padding-right: calc(var(--offset-item) * .5); padding-left: 0; margin-right: calc(var(--offset-item) * .5); diff --git a/src/scss/06-blocks/core/_media-text.scss b/src/scss/06-blocks/core/_media-text.scss index efd47a97..f5db90ea 100644 --- a/src/scss/06-blocks/core/_media-text.scss +++ b/src/scss/06-blocks/core/_media-text.scss @@ -1,16 +1,20 @@ +@use "../../02-tools/m-editor-only"; +@use "../../02-tools/m-rtl"; +@use "../../02-tools/m-style-only"; + .wp-block-media-text { - @include rtl { + @include m-rtl.rtl { direction: rtl; // Force direction RTL, because WP force LTR direction on RTL view } - @include style-only { + @include m-style-only.style-only { &.alignfull { margin-top: 0; margin-bottom: 0; } } - @include editor-only { + @include m-editor-only.editor-only { [data-align="full"] & { margin-top: 0; margin-bottom: 0; diff --git a/src/scss/06-blocks/core/_paragraph.scss b/src/scss/06-blocks/core/_paragraph.scss index b408979b..f8c0b947 100644 --- a/src/scss/06-blocks/core/_paragraph.scss +++ b/src/scss/06-blocks/core/_paragraph.scss @@ -1,7 +1,9 @@ +@use "../../02-tools/m-text"; + $paragraphs: "default", "small", "large", "huge"; p { - @include text(default); + @include m-text.text(default); &.has-background { padding: 20px; @@ -9,7 +11,7 @@ p { @each $style in $paragraphs { &.is-style-#{$style} { - @include text(#{$style}); + @include m-text.text(#{$style}); } } } diff --git a/src/scss/06-blocks/core/_preformatted.scss b/src/scss/06-blocks/core/_preformatted.scss index 3ec6b650..172ccdca 100644 --- a/src/scss/06-blocks/core/_preformatted.scss +++ b/src/scss/06-blocks/core/_preformatted.scss @@ -1,11 +1,14 @@ +@use "../../02-tools/m-editor-only"; +@use "../../02-tools/m-style-only"; + .wp-block-preformatted { overflow-x: auto; - @include style-only { + @include m-style-only.style-only { white-space: pre; } - @include editor-only { + @include m-editor-only.editor-only { white-space: pre !important; } } diff --git a/src/scss/06-blocks/core/_search.scss b/src/scss/06-blocks/core/_search.scss index 5002363f..785871c7 100644 --- a/src/scss/06-blocks/core/_search.scss +++ b/src/scss/06-blocks/core/_search.scss @@ -1,3 +1,5 @@ +@use "../../05-components/btn"; + .wp-block-search { $el: &; diff --git a/src/scss/06-blocks/core/_separator.scss b/src/scss/06-blocks/core/_separator.scss index d221bd04..dd49a986 100644 --- a/src/scss/06-blocks/core/_separator.scss +++ b/src/scss/06-blocks/core/_separator.scss @@ -1,3 +1,5 @@ +@use "../../02-tools/m-editor-only"; + hr { margin-right: auto; margin-left: auto; @@ -9,7 +11,7 @@ hr { } } -@include editor-only { +@include m-editor-only.editor-only { .wp-block-separator, hr { clear: both; diff --git a/src/scss/06-blocks/core/_table.scss b/src/scss/06-blocks/core/_table.scss index f0b6b714..0b45f21c 100644 --- a/src/scss/06-blocks/core/_table.scss +++ b/src/scss/06-blocks/core/_table.scss @@ -1,3 +1,5 @@ +@use "../../02-tools/m-not-acf"; + %table { width: 100%; min-width: 240px; @@ -9,7 +11,7 @@ } // Not apply style to ACF fields -@include not-acf { +@include m-not-acf.not-acf { table { @extend %table; } diff --git a/src/scss/08-template-parts/_header.scss b/src/scss/08-template-parts/_header.scss index 26c3da95..f335e07a 100644 --- a/src/scss/08-template-parts/_header.scss +++ b/src/scss/08-template-parts/_header.scss @@ -1,3 +1,10 @@ +@use "../01-abstract/constants"; +@use "../01-abstract/variables"; +@use "../02-tools/f-column"; +@use "../02-tools/m-breakpoint"; +@use "../02-tools/m-hover"; +@use "../02-tools/m-rtl"; + /** * Header */ @@ -39,11 +46,11 @@ height: 46px; padding: 0; cursor: pointer; - background: $color-text; + background: variables.$color-text; border: none; border-radius: 50%; - @include rtl { + @include m-rtl.rtl { right: auto; left: var(--responsive--gutter); } @@ -55,9 +62,9 @@ width: 20px; height: 2px; margin: -1px 0 0 -10px; - background: $color-light; + background: variables.$color-light; border-radius: 2px; - transition: background-color .5s $ease-in-out-expo; + transition: background-color .5s constants.$ease-in-out-expo; &::before, &::after { @@ -67,9 +74,9 @@ width: 100%; height: 100%; content: ""; - background: $color-light; + background: variables.$color-light; border-radius: inherit; - transition: transform .5s $ease-in-out-expo; + transition: transform .5s constants.$ease-in-out-expo; } &::before { @@ -120,7 +127,7 @@ width: 50px; height: 50px; padding: 0; - color: $color-dark; + color: variables.$color-dark; text-indent: -10000px; vertical-align: middle; cursor: pointer; @@ -160,7 +167,7 @@ &--menu-is-open { #{$el}__menu-toggle { > span { - background: rgba($color-light, 0); + background: rgba(variables.$color-light, 0); &::before { transform: rotate(135deg); @@ -173,7 +180,7 @@ } } - @include breakpoints(mdl, max) { + @include m-breakpoint.breakpoints(mdl, max) { &__menu { position: absolute; top: 0; @@ -183,10 +190,10 @@ width: 100%; height: 100vh; overflow: auto; - background: $color-primary; + background: variables.$color-primary; transform: translateX(-100%); - @include rtl { + @include m-rtl.rtl { transform: translateX(100%); } @@ -203,7 +210,7 @@ padding-top: 22px; + li { - border-top: 1px solid $color-dark; + border-top: 1px solid variables.$color-dark; } } } @@ -214,7 +221,7 @@ } } - @include breakpoints(sm) { + @include m-breakpoint.breakpoints(sm) { &__menu { #{$el}__logo-link { display: none; @@ -222,26 +229,26 @@ } } - @include breakpoints(sm, mdl) { + @include m-breakpoint.breakpoints(sm, mdl) { #{$el}__menu { right: 0; left: auto; - width: column(6); + width: f-column.column(6); transform: translateX(100%); - @include rtl { + @include m-rtl.rtl { right: auto; left: 0; transform: translateX(-100%); } > div { - padding: column(2, 2) column(1, 1, 6); + padding: f-column.column(2, 2) f-column.column(1, 1, 6); } } } - @include breakpoints(mdl) { + @include m-breakpoint.breakpoints(mdl) { .container { display: flex; align-items: flex-start; @@ -257,15 +264,19 @@ } &__menu { - width: column(9); + width: f-column.column(9); > div { - text-align: end; + text-align: right; + + @include m-rtl.rtl { + text-align: left; + } } } &__menu-list { - color: $color-text; + color: variables.$color-text; li + li { margin-top: 12px; @@ -275,6 +286,10 @@ display: inline; text-align: start; + @include m-rtl.rtl { + text-align: right; + } + + li { margin-inline-start: 28px; } @@ -290,7 +305,7 @@ } .menu-item-has-children { - @include hover { + @include m-hover.hover { > #{$el}__sub-menu { .no-js & { display: block; @@ -306,7 +321,7 @@ width: 6px; height: 6px; - @include rtl { + @include m-rtl.rtl { right: auto; left: 0; } @@ -330,7 +345,7 @@ &::after { position: absolute; content: ""; - background: $color-primary; + background: variables.$color-primary; } &::before { diff --git a/src/scss/08-template-parts/_hero.scss b/src/scss/08-template-parts/_hero.scss index 6f092217..3b102b46 100644 --- a/src/scss/08-template-parts/_hero.scss +++ b/src/scss/08-template-parts/_hero.scss @@ -1,9 +1,13 @@ +@use "../01-abstract/variables"; +@use "../02-tools/m-breakpoint"; +@use "../02-tools/m-row-fullwidth"; + /** * Hero */ .hero { - @include row-fullwidth; + @include m-row-fullwidth.row-fullwidth; padding: var(--spacing--block-1) 0; margin-bottom: var(--spacing--block-1); @@ -12,7 +16,7 @@ position: relative; z-index: 4; padding: 20px; - background: rgba($color-light, .5); + background: rgba(variables.$color-light, .5); } &__img { @@ -26,7 +30,7 @@ height: 100%; } - @include breakpoints(md) { + @include m-breakpoint.breakpoints(md) { padding: 100px 0; } } diff --git a/src/scss/08-template-parts/template-parts.scss b/src/scss/08-template-parts/template-parts.scss index 1e4aafcf..46bf5015 100644 --- a/src/scss/08-template-parts/template-parts.scss +++ b/src/scss/08-template-parts/template-parts.scss @@ -1,3 +1,3 @@ -@import "./header"; -@import "./footer"; -@import "./hero"; +@use "header"; +@use "footer"; +@use "hero"; diff --git a/src/scss/09-templates/templates.scss b/src/scss/09-templates/templates.scss index e9d186f8..175baf0e 100644 --- a/src/scss/09-templates/templates.scss +++ b/src/scss/09-templates/templates.scss @@ -1,3 +1,3 @@ -@import "./404"; -@import "./home"; -@import "./default"; +// @use "404"; +@use "home"; +@use "default"; diff --git a/src/scss/editor.scss b/src/scss/editor.scss index 8365e9bc..34d79364 100644 --- a/src/scss/editor.scss +++ b/src/scss/editor.scss @@ -5,59 +5,59 @@ $entry-file-name: "editor"; * == Contain SCSS and CSS variables and webfonts declarations. */ -@import "./01-abstract/abstract"; +@use "01-abstract/abstract"; /** * Tools * == Contains functions and mixins. */ -@import "./02-tools/tools"; +@use "02-tools/tools"; /** * Base * == Contain generic styles such as normalize or reset. */ -@import "./03-base/fonts"; -@import "./03-base/variables-css"; -@import "./03-base/body"; -@import "./03-base/svg-icons"; -@import "./03-base/links"; -@import "./03-base/text"; +@use "03-base/fonts"; +@use "03-base/variables-css"; +@use "03-base/body"; +@use "03-base/svg-icons"; +@use "03-base/links"; +@use "03-base/text"; /** * Utilities * == Utility classes that are not assigned to a specific component. */ -@import "./04-utilities/utilities"; +@use "04-utilities/utilities"; /** * Blocks * == Gutenberg core blocks styles, style for front-end layout and editor. */ -@import "./05-components/btn"; +@use "05-components/btn"; /** * Gutenberg * == Gutenberg core/custom blocks and patterns styles, style for front-end layout and editor. */ -@import "./06-blocks/gutenberg"; -@import "./06-blocks/blocks"; +@use "06-blocks/gutenberg"; +@use "06-blocks/blocks"; /** * Patterns * == Contains styles for gutenberg patterns. */ -@import "./07-patterns/patterns"; +@use "07-patterns/patterns"; /** * Vendor * == Plugins or libraries custom styles. */ -@import "./10-vendor/vendor"; +@use "10-vendor/vendor"; diff --git a/src/scss/style.scss b/src/scss/style.scss index 25fe1dd4..b9d60030 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -1,72 +1,70 @@ -$entry-file-name: "style"; - /** * Abstract * == Contain SCSS and CSS variables and webfonts declarations. */ -@import "./01-abstract/abstract"; +@use "01-abstract/abstract"; /** * Tools * == Contains functions and mixins. */ -@import "./02-tools/tools"; +@use "02-tools/tools"; /** * Base * == Contain generic styles such as normalize or reset. */ -@import "./03-base/base"; +@use "03-base/base"; /** * Utilities * == Utility classes that are not assigned to a specific component. */ -@import "./04-utilities/utilities"; +@use "04-utilities/utilities"; /** * Components * == Contain any default component. Just give the components some basic styles. */ -@import "./05-components/components"; +@use "05-components/components"; /** * Gutenberg * == Gutenberg core/custom blocks and patterns styles, style for front-end layout and editor. */ -@import "./06-blocks/gutenberg"; -@import "./06-blocks/blocks"; +@use "06-blocks/gutenberg"; +@use "06-blocks/blocks"; /** * Patterns * == Contains styles for gutenberg patterns. */ -@import "./07-patterns/patterns"; +@use "07-patterns/patterns"; /** * Template parts * == If you want to add custom styles for specific page templates parts. */ -@import "./08-template-parts/template-parts"; +@use "08-template-parts/template-parts"; /** * Pages * == If you want to add custom styles for specific page templates. */ -@import "./09-templates/templates"; +@use "09-templates/templates"; /** * Vendor * == Plugins or libraries custom styles. */ -@import "./10-vendor/vendor"; +@use "10-vendor/vendor"; From 1ae061afd2918f9c407c53a524e8088072b4e02a Mon Sep 17 00:00:00 2001 From: mricoul Date: Tue, 5 Nov 2024 15:30:10 +0100 Subject: [PATCH 2/7] chore (sass): update sass and sass-loader --- package.json | 4 +- yarn.lock | 184 ++++++++++++++++++++++++++++++++++----------------- 2 files changed, 125 insertions(+), 63 deletions(-) diff --git a/package.json b/package.json index bf699137..aaa3f4d8 100644 --- a/package.json +++ b/package.json @@ -51,8 +51,8 @@ "postcss-scss": "^4.0.6", "postcss-sort-media-queries": "^5.2.0", "prettier": "^2.2.1", - "sass": "^1.52.3", - "sass-loader": "^11.0.1", + "sass": "^1.80.6", + "sass-loader": "^16.0.3", "sharp": "^0.32.1", "style-loader": "^2.0.0", "stylelint": "^14.13.0", diff --git a/yarn.lock b/yarn.lock index dacf4d2b..8ea63665 100644 --- a/yarn.lock +++ b/yarn.lock @@ -574,13 +574,20 @@ __metadata: languageName: node linkType: hard -"@eslint-community/regexpp@npm:^4.4.0, @eslint-community/regexpp@npm:^4.6.1": +"@eslint-community/regexpp@npm:^4.4.0": version: 4.12.1 resolution: "@eslint-community/regexpp@npm:4.12.1" checksum: 10/c08f1dd7dd18fbb60bdd0d85820656d1374dd898af9be7f82cb00451313402a22d5e30569c150315b4385907cdbca78c22389b2a72ab78883b3173be317620cc languageName: node linkType: hard +"@eslint-community/regexpp@npm:^4.6.1": + version: 4.10.0 + resolution: "@eslint-community/regexpp@npm:4.10.0" + checksum: 10/8c36169c815fc5d726078e8c71a5b592957ee60d08c6470f9ce0187c8046af1a00afbda0a065cc40ff18d5d83f82aed9793c6818f7304a74a7488dc9f3ecbd42 + languageName: node + linkType: hard + "@eslint/eslintrc@npm:^2.0.1, @eslint/eslintrc@npm:^2.1.4": version: 2.1.4 resolution: "@eslint/eslintrc@npm:2.1.4" @@ -1002,12 +1009,12 @@ __metadata: linkType: hard "@types/eslint@npm:*": - version: 9.6.1 - resolution: "@types/eslint@npm:9.6.1" + version: 8.56.10 + resolution: "@types/eslint@npm:8.56.10" dependencies: "@types/estree": "npm:*" "@types/json-schema": "npm:*" - checksum: 10/719fcd255760168a43d0e306ef87548e1e15bffe361d5f4022b0f266575637acc0ecb85604ac97879ee8ae83c6a6d0613b0ed31d0209ddf22a0fe6d608fc56fe + checksum: 10/0cdd914b944ebba51c35827d3ef95bc3e16eb82b4c2741f6437fa57cdb00a4407c77f89c220afe9e4c9566982ec8a0fb9b97c956ac3bd4623a3b6af32eed8424 languageName: node linkType: hard @@ -1076,11 +1083,11 @@ __metadata: linkType: hard "@types/node@npm:*": - version: 22.14.0 - resolution: "@types/node@npm:22.14.0" + version: 20.12.12 + resolution: "@types/node@npm:20.12.12" dependencies: - undici-types: "npm:~6.21.0" - checksum: 10/d0669a8a37a18532c886ccfa51eb3fe1e46088deb4d3d27ebcd5d7d68bd6343ad1c7a3fcb85164780a57629359c33a6c917ecff748ea232bceac7692acc96537 + undici-types: "npm:~5.26.4" + checksum: 10/e3945da0a3017bdc1f88f15bdfb823f526b2a717bd58d4640082d6eb0bd2794b5c99bfb914b9e9324ec116dce36066990353ed1c777e8a7b0641f772575793c4 languageName: node linkType: hard @@ -1669,7 +1676,16 @@ __metadata: languageName: node linkType: hard -"acorn@npm:^8.0.4, acorn@npm:^8.11.0, acorn@npm:^8.14.0, acorn@npm:^8.8.2, acorn@npm:^8.9.0": +"acorn@npm:^8.0.4, acorn@npm:^8.8.2, acorn@npm:^8.9.0": + version: 8.11.3 + resolution: "acorn@npm:8.11.3" + bin: + acorn: bin/acorn + checksum: 10/b688e7e3c64d9bfb17b596e1b35e4da9d50553713b3b3630cf5690f2b023a84eac90c56851e6912b483fe60e8b4ea28b254c07e92f17ef83d72d78745a8352dd + languageName: node + linkType: hard + +"acorn@npm:^8.11.0, acorn@npm:^8.14.0": version: 8.14.1 resolution: "acorn@npm:8.14.1" bin: @@ -2132,8 +2148,8 @@ __metadata: postcss-scss: "npm:^4.0.6" postcss-sort-media-queries: "npm:^5.2.0" prettier: "npm:^2.2.1" - sass: "npm:^1.52.3" - sass-loader: "npm:^11.0.1" + sass: "npm:^1.80.6" + sass-loader: "npm:^16.0.3" sharp: "npm:^0.32.1" style-loader: "npm:^2.0.0" stylelint: "npm:^14.13.0" @@ -2423,7 +2439,7 @@ __metadata: languageName: node linkType: hard -"call-bind-apply-helpers@npm:^1.0.0, call-bind-apply-helpers@npm:^1.0.1, call-bind-apply-helpers@npm:^1.0.2": +"call-bind-apply-helpers@npm:^1.0.0, call-bind-apply-helpers@npm:^1.0.2": version: 1.0.2 resolution: "call-bind-apply-helpers@npm:1.0.2" dependencies: @@ -2433,6 +2449,16 @@ __metadata: languageName: node linkType: hard +"call-bind-apply-helpers@npm:^1.0.1": + version: 1.0.1 + resolution: "call-bind-apply-helpers@npm:1.0.1" + dependencies: + es-errors: "npm:^1.3.0" + function-bind: "npm:^1.1.2" + checksum: 10/6e30c621170e45f1fd6735e84d02ee8e02a3ab95cb109499d5308cbe5d1e84d0cd0e10b48cc43c76aa61450ae1b03a7f89c37c10fc0de8d4998b42aab0f268cc + languageName: node + linkType: hard + "call-bind@npm:^1.0.7, call-bind@npm:^1.0.8": version: 1.0.8 resolution: "call-bind@npm:1.0.8" @@ -3281,15 +3307,15 @@ __metadata: languageName: node linkType: hard -"debug@npm:4, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.4, debug@npm:^4.3.6": - version: 4.4.0 - resolution: "debug@npm:4.4.0" +"debug@npm:4, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.4": + version: 4.3.4 + resolution: "debug@npm:4.3.4" dependencies: - ms: "npm:^2.1.3" + ms: "npm:2.1.2" peerDependenciesMeta: supports-color: optional: true - checksum: 10/1847944c2e3c2c732514b93d11886575625686056cd765336212dc15de2d2b29612b6cd80e1afba767bb8e1803b778caf9973e98169ef1a24a7a7009e1820367 + checksum: 10/0073c3bcbd9cb7d71dd5f6b55be8701af42df3e56e911186dfa46fac3a5b9eb7ce7f377dd1d3be6db8977221f8eb333d945216f645cf56f6b688cd484837d255 languageName: node linkType: hard @@ -3302,6 +3328,18 @@ __metadata: languageName: node linkType: hard +"debug@npm:^4.3.6": + version: 4.4.0 + resolution: "debug@npm:4.4.0" + dependencies: + ms: "npm:^2.1.3" + peerDependenciesMeta: + supports-color: + optional: true + checksum: 10/1847944c2e3c2c732514b93d11886575625686056cd765336212dc15de2d2b29612b6cd80e1afba767bb8e1803b778caf9973e98169ef1a24a7a7009e1820367 + languageName: node + linkType: hard + "decamelize-keys@npm:^1.1.0": version: 1.1.1 resolution: "decamelize-keys@npm:1.1.1" @@ -4756,12 +4794,12 @@ __metadata: linkType: hard "follow-redirects@npm:^1.0.0": - version: 1.15.9 - resolution: "follow-redirects@npm:1.15.9" + version: 1.15.6 + resolution: "follow-redirects@npm:1.15.6" peerDependenciesMeta: debug: optional: true - checksum: 10/e3ab42d1097e90d28b913903841e6779eb969b62a64706a3eb983e894a5db000fbd89296f45f08885a0e54cd558ef62e81be1165da9be25a6c44920da10f424c + checksum: 10/70c7612c4cab18e546e36b991bbf8009a1a41cf85354afe04b113d1117569abf760269409cb3eb842d9f7b03d62826687086b081c566ea7b1e6613cf29030bf7 languageName: node linkType: hard @@ -4875,7 +4913,7 @@ __metadata: languageName: node linkType: hard -"get-intrinsic@npm:^1.2.4, get-intrinsic@npm:^1.2.5, get-intrinsic@npm:^1.2.6, get-intrinsic@npm:^1.2.7, get-intrinsic@npm:^1.3.0": +"get-intrinsic@npm:^1.2.4, get-intrinsic@npm:^1.2.7, get-intrinsic@npm:^1.3.0": version: 1.3.0 resolution: "get-intrinsic@npm:1.3.0" dependencies: @@ -4893,6 +4931,24 @@ __metadata: languageName: node linkType: hard +"get-intrinsic@npm:^1.2.5, get-intrinsic@npm:^1.2.6": + version: 1.2.7 + resolution: "get-intrinsic@npm:1.2.7" + dependencies: + call-bind-apply-helpers: "npm:^1.0.1" + es-define-property: "npm:^1.0.1" + es-errors: "npm:^1.3.0" + es-object-atoms: "npm:^1.0.0" + function-bind: "npm:^1.1.2" + get-proto: "npm:^1.0.0" + gopd: "npm:^1.2.0" + has-symbols: "npm:^1.1.0" + hasown: "npm:^2.0.2" + math-intrinsics: "npm:^1.1.0" + checksum: 10/4f7149c9a826723f94c6d49f70bcb3df1d3f9213994fab3668f12f09fa72074681460fb29ebb6f135556ec6372992d63802386098791a8f09cfa6f27090fa67b + languageName: node + linkType: hard + "get-proto@npm:^1.0.0, get-proto@npm:^1.0.1": version: 1.0.1 resolution: "get-proto@npm:1.0.1" @@ -5026,18 +5082,17 @@ __metadata: linkType: hard "glob@npm:^10.2.2": - version: 10.4.5 - resolution: "glob@npm:10.4.5" + version: 10.4.1 + resolution: "glob@npm:10.4.1" dependencies: foreground-child: "npm:^3.1.0" jackspeak: "npm:^3.1.2" minimatch: "npm:^9.0.4" minipass: "npm:^7.1.2" - package-json-from-dist: "npm:^1.0.0" path-scurry: "npm:^1.11.1" bin: glob: dist/esm/bin.mjs - checksum: 10/698dfe11828b7efd0514cd11e573eaed26b2dff611f0400907281ce3eab0c1e56143ef9b35adc7c77ecc71fba74717b510c7c223d34ca8a98ec81777b293d4ac + checksum: 10/d7bb49d2b413f77bdd59fea4ca86dcc12450deee221af0ca93e09534b81b9ef68fe341345751d8ff0c5b54bad422307e0e44266ff8ad7fbbd0c200e8ec258b16 languageName: node linkType: hard @@ -5651,14 +5706,14 @@ __metadata: languageName: node linkType: hard -"immutable@npm:^5.0.2": - version: 5.1.1 - resolution: "immutable@npm:5.1.1" - checksum: 10/7506ca692039195d1b467d68a68b39f10699940d49a737deab801d43e095eb790e931e4cf5e1fe83be8862c106406d22dfe7b0df1c2556c8f3b1e4c73c9f47bf +"immutable@npm:^4.0.0": + version: 4.3.6 + resolution: "immutable@npm:4.3.6" + checksum: 10/59fedb67f26e265035616b27e33ef90b53b434cf76fb09212ec2d6ae32ee8d2fe2641e6dc32dbc78498c521fbf5f72c6740d39affba63a0a36a3884272371857 languageName: node linkType: hard -"import-fresh@npm:^3.0.0, import-fresh@npm:^3.2.1, import-fresh@npm:^3.3.0": +"import-fresh@npm:^3.0.0": version: 3.3.1 resolution: "import-fresh@npm:3.3.1" dependencies: @@ -5668,6 +5723,16 @@ __metadata: languageName: node linkType: hard +"import-fresh@npm:^3.2.1, import-fresh@npm:^3.3.0": + version: 3.3.0 + resolution: "import-fresh@npm:3.3.0" + dependencies: + parent-module: "npm:^1.0.0" + resolve-from: "npm:^4.0.0" + checksum: 10/2cacfad06e652b1edc50be650f7ec3be08c5e5a6f6d12d035c440a42a8cc028e60a5b99ca08a77ab4d6b1346da7d971915828f33cdab730d3d42f08242d09baa + languageName: node + linkType: hard + "import-lazy@npm:^3.1.0": version: 3.1.0 resolution: "import-lazy@npm:3.1.0" @@ -6552,13 +6617,6 @@ __metadata: languageName: node linkType: hard -"klona@npm:^2.0.4": - version: 2.0.6 - resolution: "klona@npm:2.0.6" - checksum: 10/ed7e2c9af58cb646e758e60b75dec24bf72466066290f78c515a2bae23a06fa280f11ff3210c43b94a18744954aa5358f9d46583d5e4c36da073ecc3606355c4 - languageName: node - linkType: hard - "known-css-properties@npm:^0.26.0": version: 0.26.0 resolution: "known-css-properties@npm:0.26.0" @@ -7241,6 +7299,13 @@ __metadata: languageName: node linkType: hard +"ms@npm:2.1.2": + version: 2.1.2 + resolution: "ms@npm:2.1.2" + checksum: 10/673cdb2c3133eb050c745908d8ce632ed2c02d85640e2edb3ace856a2266a813b30c613569bf3354fdf4ea7d1a1494add3bfa95e2713baa27d0c2c71fc44f58f + languageName: node + linkType: hard + "ms@npm:^2.1.3": version: 2.1.3 resolution: "ms@npm:2.1.3" @@ -7782,13 +7847,6 @@ __metadata: languageName: node linkType: hard -"package-json-from-dist@npm:^1.0.0": - version: 1.0.1 - resolution: "package-json-from-dist@npm:1.0.1" - checksum: 10/58ee9538f2f762988433da00e26acc788036914d57c71c246bf0be1b60cdbd77dd60b6a3e1a30465f0b248aeb80079e0b34cb6050b1dfa18c06953bb1cbc7602 - languageName: node - linkType: hard - "param-case@npm:^3.0.4": version: 3.0.4 resolution: "param-case@npm:3.0.4" @@ -9694,42 +9752,46 @@ __metadata: languageName: node linkType: hard -"sass-loader@npm:^11.0.1": - version: 11.1.1 - resolution: "sass-loader@npm:11.1.1" +"sass-loader@npm:^16.0.3": + version: 16.0.3 + resolution: "sass-loader@npm:16.0.3" dependencies: - klona: "npm:^2.0.4" neo-async: "npm:^2.6.2" peerDependencies: - fibers: ">= 3.1.0" - node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 + "@rspack/core": 0.x || 1.x + node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 sass: ^1.3.0 + sass-embedded: "*" webpack: ^5.0.0 peerDependenciesMeta: - fibers: + "@rspack/core": optional: true node-sass: optional: true sass: optional: true - checksum: 10/3a9d09d1ea88cc29220952ff883e685e20d3e68203b5cf28fe5b7c8ee99d8685aa7d005f8b8df50f4d4ba0b33e6c91650e12b54714b3262f9a9b8ec314ffce3c + sass-embedded: + optional: true + webpack: + optional: true + checksum: 10/cd49635013efae80b3a24b7e655a6f2334078006f270d50ac9e6ed19a44a80d689b402b5584b64ca737c3f948366a47e2896d07cead19015de7b2bd03f778d2b languageName: node linkType: hard -"sass@npm:^1.52.3": - version: 1.86.3 - resolution: "sass@npm:1.86.3" +"sass@npm:^1.80.6": + version: 1.80.6 + resolution: "sass@npm:1.80.6" dependencies: "@parcel/watcher": "npm:^2.4.1" chokidar: "npm:^4.0.0" - immutable: "npm:^5.0.2" + immutable: "npm:^4.0.0" source-map-js: "npm:>=0.6.2 <2.0.0" dependenciesMeta: "@parcel/watcher": optional: true bin: sass: sass.js - checksum: 10/97c1c06aa6eab34b732fc1ce0c6816c0d63c4b68e1f5927981fdeba6d5b69765c318e455db2111f4ee616ae0b5015cc5c25f05db68ad03a052fd043ec97624c1 + checksum: 10/a01996fa06bb9249cdae623b9b86930cebfe98fd39bba8700bb76b022e436b83085ef84c22310d44ee6ea5992e13ea86d6422c4b687323bb17ad88597cb39e81 languageName: node linkType: hard @@ -11429,10 +11491,10 @@ __metadata: languageName: node linkType: hard -"undici-types@npm:~6.21.0": - version: 6.21.0 - resolution: "undici-types@npm:6.21.0" - checksum: 10/ec8f41aa4359d50f9b59fa61fe3efce3477cc681908c8f84354d8567bb3701fafdddf36ef6bff307024d3feb42c837cf6f670314ba37fc8145e219560e473d14 +"undici-types@npm:~5.26.4": + version: 5.26.5 + resolution: "undici-types@npm:5.26.5" + checksum: 10/0097779d94bc0fd26f0418b3a05472410408877279141ded2bd449167be1aed7ea5b76f756562cb3586a07f251b90799bab22d9019ceba49c037c76445f7cddd languageName: node linkType: hard From 5ac685ae920fc98860680a6baf703a8713299478 Mon Sep 17 00:00:00 2001 From: Nicolas Langle Date: Tue, 19 Nov 2024 14:32:45 +0100 Subject: [PATCH 3/7] fix (theme); entry file name --- src/scss/01-abstract/_variables.scss | 2 +- src/scss/01-abstract/abstract.scss | 2 - src/scss/02-tools/tools.scss | 41 ----------- src/scss/03-base/base.scss | 14 ---- src/scss/04-utilities/utilities.scss | 10 --- src/scss/05-components/components.scss | 7 -- src/scss/06-blocks/blocks.scss | 28 -------- src/scss/07-patterns/.gitkeep | 0 src/scss/07-patterns/patterns.scss | 2 - .../08-template-parts/template-parts.scss | 3 - src/scss/09-templates/templates.scss | 3 - src/scss/10-vendor/.gitkeep | 0 src/scss/10-vendor/vendor.scss | 1 - src/scss/editor.scss | 50 +++++++++---- src/scss/style.scss | 70 +++++++++++++++---- 15 files changed, 93 insertions(+), 140 deletions(-) delete mode 100644 src/scss/01-abstract/abstract.scss delete mode 100644 src/scss/02-tools/tools.scss delete mode 100644 src/scss/03-base/base.scss delete mode 100644 src/scss/04-utilities/utilities.scss delete mode 100644 src/scss/05-components/components.scss delete mode 100644 src/scss/06-blocks/blocks.scss create mode 100644 src/scss/07-patterns/.gitkeep delete mode 100644 src/scss/07-patterns/patterns.scss delete mode 100644 src/scss/08-template-parts/template-parts.scss delete mode 100644 src/scss/09-templates/templates.scss create mode 100644 src/scss/10-vendor/.gitkeep delete mode 100644 src/scss/10-vendor/vendor.scss diff --git a/src/scss/01-abstract/_variables.scss b/src/scss/01-abstract/_variables.scss index f2b137eb..5a98947b 100644 --- a/src/scss/01-abstract/_variables.scss +++ b/src/scss/01-abstract/_variables.scss @@ -1,7 +1,7 @@ @use "sass:map"; @use "sass:math"; -$entry-file-name: "style"; +$entry-file-name: "undefined"; /** * Variables diff --git a/src/scss/01-abstract/abstract.scss b/src/scss/01-abstract/abstract.scss deleted file mode 100644 index b78920fe..00000000 --- a/src/scss/01-abstract/abstract.scss +++ /dev/null @@ -1,2 +0,0 @@ -@use "constants"; -@use "variables"; diff --git a/src/scss/02-tools/tools.scss b/src/scss/02-tools/tools.scss deleted file mode 100644 index 20a3afcf..00000000 --- a/src/scss/02-tools/tools.scss +++ /dev/null @@ -1,41 +0,0 @@ -/** - * Abstract folder entry file - */ - -@use "f-assign-inputs"; -@use "f-column"; -@use "f-context-align"; -@use "f-context-selector"; -@use "f-easings"; -@use "f-em"; -@use "f-get-gutter-width"; -@use "f-get-svg-url"; -@use "f-strip-units"; -@use "f-fluid-size"; -@use "m-align"; -@use "m-autofill"; -@use "m-breakpoint"; -@use "m-btn"; -@use "m-checkbox-custom"; -@use "m-container"; -@use "m-container-query"; -@use "m-declare-font-face"; -@use "m-editor-only"; -@use "m-heading"; -@use "m-hover"; -@use "m-line-clamp"; -@use "m-placeholder-media"; -@use "m-radio-custom"; -@use "m-row-fullwidth"; -@use "m-scrollbar"; -@use "m-select-custom"; -@use "m-sr-only"; -@use "m-style-only"; -@use "m-reduced-motion"; -@use "m-bg-fullwidth"; -@use "m-block-vertical-spacing"; -@use "m-background-static"; -@use "m-not-acf"; -@use "m-rtl"; -@use "m-text"; -@use "m-text-icon"; diff --git a/src/scss/03-base/base.scss b/src/scss/03-base/base.scss deleted file mode 100644 index bad2f584..00000000 --- a/src/scss/03-base/base.scss +++ /dev/null @@ -1,14 +0,0 @@ -/** - * Base folder entry file - */ - -@use "fonts"; -@use "variables-css"; -@use "normalize"; -@use "body"; -@use "svg-icons"; -@use "forms"; -@use "links"; -@use "media"; -@use "text"; -@use "print"; diff --git a/src/scss/04-utilities/utilities.scss b/src/scss/04-utilities/utilities.scss deleted file mode 100644 index e17147b9..00000000 --- a/src/scss/04-utilities/utilities.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use "wp-admin-bar"; -@use "focus"; -@use "lazyload"; -@use "seo"; -@use "video-wrapper"; -@use "palette"; -@use "container"; -@use "sr-only"; -@use "js-animation"; -@use "aria"; diff --git a/src/scss/05-components/components.scss b/src/scss/05-components/components.scss deleted file mode 100644 index 469c635e..00000000 --- a/src/scss/05-components/components.scss +++ /dev/null @@ -1,7 +0,0 @@ -/** - * Elements folder entry file - */ - -@use "btn"; -@use "searchform"; -@use "skip-links"; diff --git a/src/scss/06-blocks/blocks.scss b/src/scss/06-blocks/blocks.scss deleted file mode 100644 index 58eb15f7..00000000 --- a/src/scss/06-blocks/blocks.scss +++ /dev/null @@ -1,28 +0,0 @@ -// Blocks -// - These styles replace key Gutenberg Block styles with font, color, and -// spacing with CSS-variables overrides -// - In the future the Block styles may get compiled to individual .css -// files and conditionally loaded - -@use "core/audio"; -@use "core/buttons"; -@use "core/code"; -@use "core/columns"; -@use "core/cover"; -@use "core/file"; -@use "core/freeform"; -@use "core/gallery"; -@use "core/group"; -@use "core/heading"; -@use "core/image"; -@use "core/list"; -@use "core/media-text"; -@use "core/paragraph"; -@use "core/preformatted"; -@use "core/pullquote"; -@use "core/quote"; -@use "core/separator"; -@use "core/search"; -@use "core/spacer"; -@use "core/table"; -@use "core/video"; diff --git a/src/scss/07-patterns/.gitkeep b/src/scss/07-patterns/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/src/scss/07-patterns/patterns.scss b/src/scss/07-patterns/patterns.scss deleted file mode 100644 index 9eafdfcb..00000000 --- a/src/scss/07-patterns/patterns.scss +++ /dev/null @@ -1,2 +0,0 @@ -// @import "./my-pattern"; - diff --git a/src/scss/08-template-parts/template-parts.scss b/src/scss/08-template-parts/template-parts.scss deleted file mode 100644 index 46bf5015..00000000 --- a/src/scss/08-template-parts/template-parts.scss +++ /dev/null @@ -1,3 +0,0 @@ -@use "header"; -@use "footer"; -@use "hero"; diff --git a/src/scss/09-templates/templates.scss b/src/scss/09-templates/templates.scss deleted file mode 100644 index 175baf0e..00000000 --- a/src/scss/09-templates/templates.scss +++ /dev/null @@ -1,3 +0,0 @@ -// @use "404"; -@use "home"; -@use "default"; diff --git a/src/scss/10-vendor/.gitkeep b/src/scss/10-vendor/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/src/scss/10-vendor/vendor.scss b/src/scss/10-vendor/vendor.scss deleted file mode 100644 index 09080ae9..00000000 --- a/src/scss/10-vendor/vendor.scss +++ /dev/null @@ -1 +0,0 @@ -// @import vendor styles here diff --git a/src/scss/editor.scss b/src/scss/editor.scss index 34d79364..6e86ec30 100644 --- a/src/scss/editor.scss +++ b/src/scss/editor.scss @@ -1,18 +1,12 @@ -$entry-file-name: "editor"; - /** * Abstract * == Contain SCSS and CSS variables and webfonts declarations. */ -@use "01-abstract/abstract"; - -/** - * Tools - * == Contains functions and mixins. - */ +@use "01-abstract/constants"; +@use "01-abstract/variables"; -@use "02-tools/tools"; +variables.$entry-file-name: "editor"; /** * Base @@ -31,7 +25,16 @@ $entry-file-name: "editor"; * == Utility classes that are not assigned to a specific component. */ -@use "04-utilities/utilities"; +@use "04-utilities/wp-admin-bar"; +@use "04-utilities/focus"; +@use "04-utilities/lazyload"; +@use "04-utilities/seo"; +@use "04-utilities/video-wrapper"; +@use "04-utilities/palette"; +@use "04-utilities/container"; +@use "04-utilities/sr-only"; +@use "04-utilities/js-animation"; +@use "04-utilities/aria"; /** * Blocks @@ -46,18 +49,39 @@ $entry-file-name: "editor"; */ @use "06-blocks/gutenberg"; -@use "06-blocks/blocks"; +@use "06-blocks/core/audio"; +@use "06-blocks/core/buttons"; +@use "06-blocks/core/code"; +@use "06-blocks/core/columns"; +@use "06-blocks/core/cover"; +@use "06-blocks/core/file"; +@use "06-blocks/core/freeform"; +@use "06-blocks/core/gallery"; +@use "06-blocks/core/group"; +@use "06-blocks/core/heading"; +@use "06-blocks/core/image"; +@use "06-blocks/core/list"; +@use "06-blocks/core/media-text"; +@use "06-blocks/core/paragraph"; +@use "06-blocks/core/preformatted"; +@use "06-blocks/core/pullquote"; +@use "06-blocks/core/quote"; +@use "06-blocks/core/separator"; +@use "06-blocks/core/search"; +@use "06-blocks/core/spacer"; +@use "06-blocks/core/table"; +@use "06-blocks/core/video"; /** * Patterns * == Contains styles for gutenberg patterns. */ -@use "07-patterns/patterns"; +// @use "07-patterns/..."; /** * Vendor * == Plugins or libraries custom styles. */ -@use "10-vendor/vendor"; +// @use "10-vendor/..."; diff --git a/src/scss/style.scss b/src/scss/style.scss index b9d60030..4ee6e41e 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -3,35 +3,51 @@ * == Contain SCSS and CSS variables and webfonts declarations. */ -@use "01-abstract/abstract"; +@use "01-abstract/constants"; +@use "01-abstract/variables"; -/** - * Tools - * == Contains functions and mixins. - */ - -@use "02-tools/tools"; +variables.$entry-file-name: "style"; /** * Base * == Contain generic styles such as normalize or reset. */ -@use "03-base/base"; +@use "03-base/fonts"; +@use "03-base/variables-css"; +@use "03-base/normalize"; +@use "03-base/body"; +@use "03-base/svg-icons"; +@use "03-base/forms"; +@use "03-base/links"; +@use "03-base/media"; +@use "03-base/text"; +@use "03-base/print"; /** * Utilities * == Utility classes that are not assigned to a specific component. */ -@use "04-utilities/utilities"; +@use "04-utilities/wp-admin-bar"; +@use "04-utilities/focus"; +@use "04-utilities/lazyload"; +@use "04-utilities/seo"; +@use "04-utilities/video-wrapper"; +@use "04-utilities/palette"; +@use "04-utilities/container"; +@use "04-utilities/sr-only"; +@use "04-utilities/js-animation"; +@use "04-utilities/aria"; /** * Components * == Contain any default component. Just give the components some basic styles. */ -@use "05-components/components"; +@use "05-components/btn"; +@use "05-components/searchform"; +@use "05-components/skip-links"; /** * Gutenberg @@ -39,32 +55,56 @@ */ @use "06-blocks/gutenberg"; -@use "06-blocks/blocks"; +@use "06-blocks/core/audio"; +@use "06-blocks/core/buttons"; +@use "06-blocks/core/code"; +@use "06-blocks/core/columns"; +@use "06-blocks/core/cover"; +@use "06-blocks/core/file"; +@use "06-blocks/core/freeform"; +@use "06-blocks/core/gallery"; +@use "06-blocks/core/group"; +@use "06-blocks/core/heading"; +@use "06-blocks/core/image"; +@use "06-blocks/core/list"; +@use "06-blocks/core/media-text"; +@use "06-blocks/core/paragraph"; +@use "06-blocks/core/preformatted"; +@use "06-blocks/core/pullquote"; +@use "06-blocks/core/quote"; +@use "06-blocks/core/separator"; +@use "06-blocks/core/search"; +@use "06-blocks/core/spacer"; +@use "06-blocks/core/table"; +@use "06-blocks/core/video"; /** * Patterns * == Contains styles for gutenberg patterns. */ -@use "07-patterns/patterns"; +// @use "07-patterns/..."; /** * Template parts * == If you want to add custom styles for specific page templates parts. */ -@use "08-template-parts/template-parts"; +@use "08-template-parts/header"; +@use "08-template-parts/footer"; +@use "08-template-parts/hero"; /** * Pages * == If you want to add custom styles for specific page templates. */ -@use "09-templates/templates"; +@use "09-templates/home"; +@use "09-templates/default"; /** * Vendor * == Plugins or libraries custom styles. */ -@use "10-vendor/vendor"; +// @use "10-vendor/..."; From ebb0c08bbe1796b5ffacb0d5f2d7d0adbbdf4313 Mon Sep 17 00:00:00 2001 From: mricoul Date: Fri, 7 Mar 2025 16:13:23 +0100 Subject: [PATCH 4/7] chore (package): update sass and sass-loader --- package.json | 4 ++-- src/scss/02-tools/_f-get-svg-url.scss | 3 +-- yarn.lock | 30 +++++++++++++-------------- 3 files changed, 18 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index aaa3f4d8..d0362d5b 100644 --- a/package.json +++ b/package.json @@ -51,8 +51,8 @@ "postcss-scss": "^4.0.6", "postcss-sort-media-queries": "^5.2.0", "prettier": "^2.2.1", - "sass": "^1.80.6", - "sass-loader": "^16.0.3", + "sass": "^1.85.1", + "sass-loader": "^16.0.5", "sharp": "^0.32.1", "style-loader": "^2.0.0", "stylelint": "^14.13.0", diff --git a/src/scss/02-tools/_f-get-svg-url.scss b/src/scss/02-tools/_f-get-svg-url.scss index 5d996762..0fb4a41d 100644 --- a/src/scss/02-tools/_f-get-svg-url.scss +++ b/src/scss/02-tools/_f-get-svg-url.scss @@ -1,7 +1,6 @@ +@use "../01-abstract/variables"; @use "sass:color"; @use "sass:list"; -@use "../01-abstract/variables"; - @use "sass:map"; /** diff --git a/yarn.lock b/yarn.lock index 8ea63665..a313ba09 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2148,8 +2148,8 @@ __metadata: postcss-scss: "npm:^4.0.6" postcss-sort-media-queries: "npm:^5.2.0" prettier: "npm:^2.2.1" - sass: "npm:^1.80.6" - sass-loader: "npm:^16.0.3" + sass: "npm:^1.85.1" + sass-loader: "npm:^16.0.5" sharp: "npm:^0.32.1" style-loader: "npm:^2.0.0" stylelint: "npm:^14.13.0" @@ -5706,10 +5706,10 @@ __metadata: languageName: node linkType: hard -"immutable@npm:^4.0.0": - version: 4.3.6 - resolution: "immutable@npm:4.3.6" - checksum: 10/59fedb67f26e265035616b27e33ef90b53b434cf76fb09212ec2d6ae32ee8d2fe2641e6dc32dbc78498c521fbf5f72c6740d39affba63a0a36a3884272371857 +"immutable@npm:^5.0.2": + version: 5.0.3 + resolution: "immutable@npm:5.0.3" + checksum: 10/9aca1c783951bb204d7036fbcefac6dd42e7c8ad77ff54b38c5fc0924e6e16ce2d123c95db47c1170ba63dd3f6fc7aa74a29be7adef984031936c4cd1e9e8554 languageName: node linkType: hard @@ -9752,9 +9752,9 @@ __metadata: languageName: node linkType: hard -"sass-loader@npm:^16.0.3": - version: 16.0.3 - resolution: "sass-loader@npm:16.0.3" +"sass-loader@npm:^16.0.5": + version: 16.0.5 + resolution: "sass-loader@npm:16.0.5" dependencies: neo-async: "npm:^2.6.2" peerDependencies: @@ -9774,24 +9774,24 @@ __metadata: optional: true webpack: optional: true - checksum: 10/cd49635013efae80b3a24b7e655a6f2334078006f270d50ac9e6ed19a44a80d689b402b5584b64ca737c3f948366a47e2896d07cead19015de7b2bd03f778d2b + checksum: 10/978b553900427c3fc24ed16b8258829d6a851bc5b0ab226cf43143fc08a0386e8cd07db367104d190a6cf0945af071805f70773525a970673c5b61fda4b7a59e languageName: node linkType: hard -"sass@npm:^1.80.6": - version: 1.80.6 - resolution: "sass@npm:1.80.6" +"sass@npm:^1.85.1": + version: 1.85.1 + resolution: "sass@npm:1.85.1" dependencies: "@parcel/watcher": "npm:^2.4.1" chokidar: "npm:^4.0.0" - immutable: "npm:^4.0.0" + immutable: "npm:^5.0.2" source-map-js: "npm:>=0.6.2 <2.0.0" dependenciesMeta: "@parcel/watcher": optional: true bin: sass: sass.js - checksum: 10/a01996fa06bb9249cdae623b9b86930cebfe98fd39bba8700bb76b022e436b83085ef84c22310d44ee6ea5992e13ea86d6422c4b687323bb17ad88597cb39e81 + checksum: 10/2803b8d4d256a5ab6e7711776714e5bfaee957bd47d05489994d1d88e38307dc76f15ec8e35708d6f5701cf981a48cd005db574063242fcceaf056123ad644d5 languageName: node linkType: hard From 21246593da958bfd6aa0d91da32ded073a5a1c82 Mon Sep 17 00:00:00 2001 From: mricoul Date: Fri, 7 Mar 2025 16:22:07 +0100 Subject: [PATCH 5/7] fix (02-tools): fix function name --- src/scss/02-tools/_m-block-vertical-spacing.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/02-tools/_m-block-vertical-spacing.scss b/src/scss/02-tools/_m-block-vertical-spacing.scss index 7e490bbe..fee401cc 100644 --- a/src/scss/02-tools/_m-block-vertical-spacing.scss +++ b/src/scss/02-tools/_m-block-vertical-spacing.scss @@ -24,7 +24,7 @@ * */ @mixin block-vertical-spacing($type : margin, $spacing : var(--spacing--block-3)) { - #{context-selector(".blocks-container > &", ".is-root-container > &, .is-root-container > .wp-block[data-align] > &, .is-root-container > .acf-block-preview > &, .is-root-container > .wp-block-beapi-dynamic-block &, .is-root-container > .wp-block-beapi-manual-block &, .is-root-container > .wp-block[data-align] > .acf-block-preview > &, .is-root-container > .wp-block[data-align] > .wp-block-beapi-dynamic-block &, .is-root-container > .wp-block[data-align] > .wp-block-beapi-manual-block &")} { + #{f-context-selector.context-selector(".blocks-container > &", ".is-root-container > &, .is-root-container > .wp-block[data-align] > &, .is-root-container > .acf-block-preview > &, .is-root-container > .wp-block-beapi-dynamic-block &, .is-root-container > .wp-block-beapi-manual-block &, .is-root-container > .wp-block[data-align] > .acf-block-preview > &, .is-root-container > .wp-block[data-align] > .wp-block-beapi-dynamic-block &, .is-root-container > .wp-block[data-align] > .wp-block-beapi-manual-block &")} { #{$type}-top: $spacing; #{$type}-bottom: $spacing; From 8c84f07d7717cf7da6c6f8f6361eaf38b6a8c534 Mon Sep 17 00:00:00 2001 From: mricoul Date: Tue, 8 Apr 2025 22:10:48 +0200 Subject: [PATCH 6/7] refactor (scss): use @use as * --- src/scss/02-tools/_f-column.scss | 10 ++-- src/scss/02-tools/_f-context-align.scss | 6 +-- src/scss/02-tools/_f-context-selector.scss | 6 +-- src/scss/02-tools/_f-em.scss | 10 ++-- src/scss/02-tools/_f-fluid-size.scss | 10 ++-- src/scss/02-tools/_f-get-gutter-width.scss | 5 +- src/scss/02-tools/_f-get-svg-url.scss | 4 +- src/scss/02-tools/_m-bg-fullwidth.scss | 8 +-- src/scss/02-tools/_m-breakpoint.scss | 12 ++--- src/scss/02-tools/_m-btn.scss | 18 +++---- src/scss/02-tools/_m-checkbox-custom.scss | 16 +++--- src/scss/02-tools/_m-container-query.scss | 12 ++--- src/scss/02-tools/_m-container.scss | 4 +- src/scss/02-tools/_m-editor-only.scss | 4 +- src/scss/02-tools/_m-heading.scss | 4 +- src/scss/02-tools/_m-radio-custom.scss | 4 +- src/scss/02-tools/_m-select-custom.scss | 25 +++++---- src/scss/02-tools/_m-style-only.scss | 4 +- src/scss/02-tools/_m-text-icon.scss | 8 +-- src/scss/03-base/_body.scss | 18 +++---- src/scss/03-base/_forms.scss | 44 +++++++-------- src/scss/03-base/_links.scss | 10 ++-- src/scss/03-base/_print.scss | 4 +- src/scss/03-base/_variables-css.scss | 44 +++++++-------- src/scss/04-utilities/_container.scss | 8 +-- src/scss/04-utilities/_js-animation.scss | 6 +-- src/scss/04-utilities/_lazyload.scss | 9 ++-- src/scss/04-utilities/_palette.scss | 5 +- src/scss/04-utilities/_sr-only.scss | 6 +-- src/scss/04-utilities/_wp-admin-bar.scss | 4 +- src/scss/05-components/_btn.scss | 8 +-- src/scss/05-components/_skip-links.scss | 10 ++-- src/scss/06-blocks/_gutenberg.scss | 48 ++++++++--------- src/scss/06-blocks/core/_audio.scss | 6 +-- src/scss/06-blocks/core/_columns.scss | 8 +-- src/scss/06-blocks/core/_cover.scss | 8 +-- src/scss/06-blocks/core/_freeform.scss | 8 +-- src/scss/06-blocks/core/_gallery.scss | 4 +- src/scss/06-blocks/core/_group.scss | 8 +-- src/scss/06-blocks/core/_heading.scss | 8 +-- src/scss/06-blocks/core/_image.scss | 6 +-- src/scss/06-blocks/core/_list.scss | 22 ++++---- src/scss/06-blocks/core/_media-text.scss | 12 ++--- src/scss/06-blocks/core/_paragraph.scss | 6 +-- src/scss/06-blocks/core/_preformatted.scss | 8 +-- src/scss/06-blocks/core/_separator.scss | 4 +- src/scss/06-blocks/core/_table.scss | 4 +- src/scss/08-template-parts/_header.scss | 62 +++++++++++----------- src/scss/08-template-parts/_hero.scss | 12 ++--- 49 files changed, 288 insertions(+), 292 deletions(-) diff --git a/src/scss/02-tools/_f-column.scss b/src/scss/02-tools/_f-column.scss index 91216a48..f5c42cea 100644 --- a/src/scss/02-tools/_f-column.scss +++ b/src/scss/02-tools/_f-column.scss @@ -1,5 +1,5 @@ @use "sass:meta"; -@use "../01-abstract/variables"; +@use "../01-abstract/variables" as *; @use "sass:map"; @use "sass:math"; @@ -58,7 +58,7 @@ @if not $var { - @return map.get(map.get(variables.$column-preset, $device), $prop); + @return map.get(map.get($column-preset, $device), $prop); } @else { @return $var; @@ -79,7 +79,7 @@ $device: d; } - $preset: map.get(variables.$column-preset, $device); + $preset: map.get($column-preset, $device); $gutter-width: map.get($preset, gutter-width); $column-width: map.get($preset, column-width); $total-column: column-set-var($total-column, $device, total-column); @@ -107,7 +107,7 @@ $device: d; } - $preset: map.get(variables.$column-preset, $device); + $preset: map.get($column-preset, $device); $gutter-width: map.get($preset, gutter-width); $column-width: map.get($preset, column-width); @@ -134,7 +134,7 @@ $device: d; } - $preset: map.get(variables.$column-preset, $device); + $preset: map.get($column-preset, $device); $gutter-width: map.get($preset, gutter-width); $column-width: map.get($preset, column-width); $total-column: map.get($preset, total-column); diff --git a/src/scss/02-tools/_f-context-align.scss b/src/scss/02-tools/_f-context-align.scss index d3e740ee..ecda8724 100644 --- a/src/scss/02-tools/_f-context-align.scss +++ b/src/scss/02-tools/_f-context-align.scss @@ -1,4 +1,4 @@ -@use "../01-abstract/variables"; +@use "../01-abstract/variables" as *; /** * Align - Make a context align (editor / style) @@ -29,13 +29,13 @@ $function-context-align-last-value: ""; @function context-align($value: null, $suffix: " > ") { @if not $value { - @if (variables.$entry-file-name == "style") { + @if ($entry-file-name == "style") { @return ".align" + $function-context-align-last-value; } } @else { $function-context-align-last-value: $value !global; - @if (variables.$entry-file-name == "editor") { + @if ($entry-file-name == "editor") { @return "[data-align=\"" + $value + "\"]" + $suffix; } } diff --git a/src/scss/02-tools/_f-context-selector.scss b/src/scss/02-tools/_f-context-selector.scss index 47ee915f..361ffc5d 100644 --- a/src/scss/02-tools/_f-context-selector.scss +++ b/src/scss/02-tools/_f-context-selector.scss @@ -1,5 +1,5 @@ @use "sass:meta"; -@use "../01-abstract/variables"; +@use "../01-abstract/variables" as *; /** * Context selector - Make a context selector (editor / style) @@ -56,9 +56,9 @@ $full-selector: ""; $parent: ""; - @if (variables.$entry-file-name == "editor" and $editor) { + @if ($entry-file-name == "editor" and $editor) { $parent: $editor; - } @else if (variables.$entry-file-name == "style" and $default) { + } @else if ($entry-file-name == "style" and $default) { $parent: $default; } @else { @return $selector; diff --git a/src/scss/02-tools/_f-em.scss b/src/scss/02-tools/_f-em.scss index b1ba9fec..1c5f5f3c 100644 --- a/src/scss/02-tools/_f-em.scss +++ b/src/scss/02-tools/_f-em.scss @@ -1,5 +1,5 @@ -@use "../01-abstract/variables"; -@use "f-strip-units"; +@use "../01-abstract/variables" as *; +@use "f-strip-units" as *; @use "sass:math"; @@ -23,14 +23,14 @@ * */ -@function em($pxval, $base: variables.$font-size-base) { +@function em($pxval, $base: $font-size-base) { @if not math.is-unitless($pxval) { - $pxval: f-strip-units.strip-units($pxval); + $pxval: strip-units($pxval); } @if not math.is-unitless($base) { - $base: f-strip-units.strip-units($base); + $base: strip-units($base); } @return math.div($pxval, $base) * 1em; diff --git a/src/scss/02-tools/_f-fluid-size.scss b/src/scss/02-tools/_f-fluid-size.scss index bb9e932f..f97acf8e 100644 --- a/src/scss/02-tools/_f-fluid-size.scss +++ b/src/scss/02-tools/_f-fluid-size.scss @@ -1,5 +1,5 @@ -@use "../01-abstract/variables"; -@use "f-strip-units"; +@use "../01-abstract/variables" as *; +@use "f-strip-units" as *; /** * Fluid size @@ -28,8 +28,8 @@ @use "sass:math"; @function fluid-size($min, $max, $start: xs, $end: sm) { - $start: math.div(map.get(variables.$breakpoints, $start), 100); - $end: math.div(map.get(variables.$breakpoints, $end), 100); + $start: math.div(map.get($breakpoints, $start), 100); + $end: math.div(map.get($breakpoints, $end), 100); - @return clamp(#{$min}, #{$min} + (1vw - #{$start}px) / #{$end - $start} * #{f-strip-units.strip-units($max - $min)}, #{$max}); + @return clamp(#{$min}, #{$min} + (1vw - #{$start}px) / #{$end - $start} * #{strip-units($max - $min)}, #{$max}); } diff --git a/src/scss/02-tools/_f-get-gutter-width.scss b/src/scss/02-tools/_f-get-gutter-width.scss index 58c52fa1..98580b19 100644 --- a/src/scss/02-tools/_f-get-gutter-width.scss +++ b/src/scss/02-tools/_f-get-gutter-width.scss @@ -1,5 +1,4 @@ -@use "../01-abstract/variables"; - +@use "../01-abstract/variables" as *; @use "sass:map"; /** @@ -26,7 +25,7 @@ */ @function get-gutter($preset: d) { - @return map.get(map.get(variables.$column-preset, $preset), gutter-width); + @return map.get(map.get($column-preset, $preset), gutter-width); } @function get-gutter-width($preset: d) { diff --git a/src/scss/02-tools/_f-get-svg-url.scss b/src/scss/02-tools/_f-get-svg-url.scss index 0fb4a41d..e0456fa5 100644 --- a/src/scss/02-tools/_f-get-svg-url.scss +++ b/src/scss/02-tools/_f-get-svg-url.scss @@ -1,4 +1,4 @@ -@use "../01-abstract/variables"; +@use "../01-abstract/variables" as *; @use "sass:color"; @use "sass:list"; @use "sass:map"; @@ -33,7 +33,7 @@ * */ -@function get-svg-url($name: null, $fill: variables.$color-dark, $opacity: 1, $style: "") { +@function get-svg-url($name: null, $fill: $color-dark, $opacity: 1, $style: "") { $svgs: ( // name-of-the-svg: (viewBox, content of the svg element) diff --git a/src/scss/02-tools/_m-bg-fullwidth.scss b/src/scss/02-tools/_m-bg-fullwidth.scss index 0411d17f..dd0ae202 100644 --- a/src/scss/02-tools/_m-bg-fullwidth.scss +++ b/src/scss/02-tools/_m-bg-fullwidth.scss @@ -1,5 +1,5 @@ -@use "../01-abstract/variables"; -@use "m-style-only"; +@use "../01-abstract/variables" as *; +@use "m-style-only" as *; /** * Background fullwidth - Make a fullwidth background in a container element @@ -16,7 +16,7 @@ * */ -@mixin bg-fullwidth($color: variables.$color-grey-100) { +@mixin bg-fullwidth($color: $color-grey-100) { position: relative; &::before { @@ -30,7 +30,7 @@ background-color: $color; transform: translate3d(-50%, 0, 0); - @include m-style-only.style-only { + @include style-only { z-index: -1; } } diff --git a/src/scss/02-tools/_m-breakpoint.scss b/src/scss/02-tools/_m-breakpoint.scss index 2cf6a0fe..b1644d23 100644 --- a/src/scss/02-tools/_m-breakpoint.scss +++ b/src/scss/02-tools/_m-breakpoint.scss @@ -1,6 +1,6 @@ @use "sass:meta"; -@use "../01-abstract/variables"; -@use "f-em"; +@use "../01-abstract/variables" as *; +@use "f-em" as *; @use "sass:map"; @@ -28,19 +28,19 @@ @mixin breakpoints($breakpoint, $min-or-max-or-breakpoint: min) { $font-size: 16px; // don't use em function whitout param, $font-size-base can be modified - @if (meta.type-of(map.get(variables.$breakpoints, $min-or-max-or-breakpoint)) == "number") { + @if (meta.type-of(map.get($breakpoints, $min-or-max-or-breakpoint)) == "number") { - @media screen and (min-width: f-em.em(map.get(variables.$breakpoints, $breakpoint), $font-size)) and (max-width: f-em.em(map.get(variables.$breakpoints, $min-or-max-or-breakpoint) - 1, $font-size)) { + @media screen and (min-width: em(map.get($breakpoints, $breakpoint), $font-size)) and (max-width: em(map.get($breakpoints, $min-or-max-or-breakpoint) - 1, $font-size)) { @content; } } @else if ($min-or-max-or-breakpoint == max) { - @media screen and (max-width: f-em.em(map.get(variables.$breakpoints, $breakpoint) - 1, $font-size)) { + @media screen and (max-width: em(map.get($breakpoints, $breakpoint) - 1, $font-size)) { @content; } } @else { - @media screen and (min-width: f-em.em(map.get(variables.$breakpoints, $breakpoint), $font-size)) { + @media screen and (min-width: em(map.get($breakpoints, $breakpoint), $font-size)) { @content; } } diff --git a/src/scss/02-tools/_m-btn.scss b/src/scss/02-tools/_m-btn.scss index 15461912..934d4114 100644 --- a/src/scss/02-tools/_m-btn.scss +++ b/src/scss/02-tools/_m-btn.scss @@ -1,5 +1,5 @@ -@use "../01-abstract/variables"; -@use "m-hover"; +@use "../01-abstract/variables" as *; +@use "m-hover" as *; /** * Button - All mixins for buttons - Used in src/scss/05-components/_btn.scss @@ -34,12 +34,12 @@ font-size: 12px; font-weight: 700; line-height: 16px; - color: variables.$color-dark; + color: $color-dark; text-align: center; - background-color: variables.$color-primary; + background-color: $color-primary; border-radius: 10px; - @include m-hover.hover { + @include hover { @include btn-block-hover; } } @@ -47,8 +47,8 @@ // hover of the button block @mixin btn-block-hover { - color: variables.$color-primary; - background-color: variables.$color-dark; + color: $color-primary; + background-color: $color-dark; } // Coloring @@ -57,7 +57,7 @@ color: $color; background-color: $background-color; - @include m-hover.hover { + @include hover { color: $background-color; background-color: $color; } @@ -70,7 +70,7 @@ background-color: transparent; border: 2px solid currentColor; // Force button width VS Gutenberg CSS - @include m-hover.hover { + @include hover { @include btn-block-outline-hover; } } diff --git a/src/scss/02-tools/_m-checkbox-custom.scss b/src/scss/02-tools/_m-checkbox-custom.scss index 0de9c702..45d8d890 100644 --- a/src/scss/02-tools/_m-checkbox-custom.scss +++ b/src/scss/02-tools/_m-checkbox-custom.scss @@ -1,6 +1,6 @@ -@use "../01-abstract/variables"; -@use "m-rtl"; -@use "m-sr-only"; +@use "../01-abstract/variables" as *; +@use "m-rtl" as *; +@use "m-sr-only" as *; @use "sass:math"; @@ -25,8 +25,8 @@ * */ -@mixin checkbox-custom($color: variables.$color-primary, $size: 18px, $border-width: 1px) { - @include m-sr-only.sr-only; +@mixin checkbox-custom($color: $color-primary, $size: 18px, $border-width: 1px) { + @include sr-only; + label { position: relative; @@ -42,10 +42,10 @@ height: $size; margin: 0; content: ""; - background-color: variables.$color-light; + background-color: $color-light; border: $border-width solid $color; - @include m-rtl.rtl { + @include rtl { right: 0; left: auto; } @@ -65,7 +65,7 @@ transition: opacity .2s; transform: translate(-50%, -50%) rotate(-45deg); - @include m-rtl.rtl { + @include rtl { right: math.round(math.div($size, 2)); left: auto; transform: translate(50%, -50%) rotate(-45deg); diff --git a/src/scss/02-tools/_m-container-query.scss b/src/scss/02-tools/_m-container-query.scss index b016cea6..e2a4b1f7 100644 --- a/src/scss/02-tools/_m-container-query.scss +++ b/src/scss/02-tools/_m-container-query.scss @@ -1,6 +1,6 @@ @use "sass:meta"; -@use "../01-abstract/variables"; -@use "f-em"; +@use "../01-abstract/variables" as *; +@use "f-em" as *; @use "sass:map"; @@ -29,21 +29,21 @@ @mixin container-query($breakpoint, $min-or-max-or-breakpoint: min, $container-name: "") { $font-size: 16px; // don't use em function whitout param, $font-size-base can be modified - @if (meta.type-of(map.get(variables.$breakpoints, $min-or-max-or-breakpoint)) == "number") { + @if (meta.type-of(map.get($breakpoints, $min-or-max-or-breakpoint)) == "number") { - @container #{$container-name} (min-width: #{f-em.em(map.get(variables.$breakpoints, $breakpoint), $font-size)}) and (max-width: #{f-em.em(map.get(variables.$breakpoints, $min-or-max-or-breakpoint) - 1, $font-size)}) { + @container #{$container-name} (min-width: #{em(map.get($breakpoints, $breakpoint), $font-size)}) and (max-width: #{em(map.get($breakpoints, $min-or-max-or-breakpoint) - 1, $font-size)}) { @content; } } @else if ($min-or-max-or-breakpoint == max) { - @container #{$container-name} (max-width: #{f-em.em(map.get(variables.$breakpoints, $breakpoint) - 1, $font-size)}) { + @container #{$container-name} (max-width: #{em(map.get($breakpoints, $breakpoint) - 1, $font-size)}) { @content; } } @else { - @container #{$container-name} (min-width: #{f-em.em(map.get(variables.$breakpoints, $breakpoint), $font-size)}) { + @container #{$container-name} (min-width: #{em(map.get($breakpoints, $breakpoint), $font-size)}) { @content; } diff --git a/src/scss/02-tools/_m-container.scss b/src/scss/02-tools/_m-container.scss index 8984fe86..e3eef693 100644 --- a/src/scss/02-tools/_m-container.scss +++ b/src/scss/02-tools/_m-container.scss @@ -1,4 +1,4 @@ -@use "../01-abstract/variables"; +@use "../01-abstract/variables" as *; /** * Container @@ -15,7 +15,7 @@ * */ -@mixin container($size: variables.$container-wide) { +@mixin container($size: $container-wide) { width: min(#{$size}, 100% - calc(var(--responsive--gutter) * 2)); margin-inline: auto; } diff --git a/src/scss/02-tools/_m-editor-only.scss b/src/scss/02-tools/_m-editor-only.scss index b9746300..1348832e 100644 --- a/src/scss/02-tools/_m-editor-only.scss +++ b/src/scss/02-tools/_m-editor-only.scss @@ -1,4 +1,4 @@ -@use "../01-abstract/variables"; +@use "../01-abstract/variables" as *; /** * Editor style only @@ -20,7 +20,7 @@ */ @mixin editor-only { - @if (variables.$entry-file-name == "editor") { + @if ($entry-file-name == "editor") { @content; } } diff --git a/src/scss/02-tools/_m-heading.scss b/src/scss/02-tools/_m-heading.scss index 28d93d2c..e3b57137 100644 --- a/src/scss/02-tools/_m-heading.scss +++ b/src/scss/02-tools/_m-heading.scss @@ -1,4 +1,4 @@ -@use "../01-abstract/variables"; +@use "../01-abstract/variables" as *; /** * Heading - Used in src/scss/06-blocks/core/_heading.scss @@ -44,7 +44,7 @@ */ @mixin heading($name: h1, $style: default) { - font-family: variables.$font-family-primary; + font-family: $font-family-primary; font-weight: 400; @if $name == h1 { diff --git a/src/scss/02-tools/_m-radio-custom.scss b/src/scss/02-tools/_m-radio-custom.scss index 0faf4872..97b899d1 100644 --- a/src/scss/02-tools/_m-radio-custom.scss +++ b/src/scss/02-tools/_m-radio-custom.scss @@ -1,4 +1,4 @@ -@use "../01-abstract/variables"; +@use "../01-abstract/variables" as *; @use "m-checkbox-custom"; @use "sass:math"; @@ -29,7 +29,7 @@ * */ -@mixin radio-custom($include-checkbox-style: false, $color: variables.$color-primary, $size: 18px, $border-width: 1px) { +@mixin radio-custom($include-checkbox-style: false, $color: $color-primary, $size: 18px, $border-width: 1px) { @if ($include-checkbox-style) { @include m-checkbox-custom.checkbox-custom($color, $size, $border-width); } diff --git a/src/scss/02-tools/_m-select-custom.scss b/src/scss/02-tools/_m-select-custom.scss index 8c0ba279..026afc47 100644 --- a/src/scss/02-tools/_m-select-custom.scss +++ b/src/scss/02-tools/_m-select-custom.scss @@ -1,7 +1,6 @@ -@use "../01-abstract/variables"; -@use "f-get-svg-url"; -@use "m-rtl"; - +@use "../01-abstract/variables" as *; +@use "f-get-svg-url" as *; +@use "m-rtl" as *; @use "sass:color"; /** @@ -25,17 +24,17 @@ margin: 0; font-size: 16px; // prevent iOS zoom line-height: 1.15; - color: variables.$color-text; - background-color: variables.$color-light; - background-image: f-get-svg-url.get-svg-url("down"), linear-gradient(to bottom, variables.$color-light 0%, variables.$color-light 100%); + color: $color-text; + background-color: $color-light; + background-image: get-svg-url("down"), linear-gradient(to bottom, $color-light 0%, $color-light 100%); background-repeat: no-repeat, repeat; background-position: right 10px top 50%, 0 0; background-size: 10px auto, 100%; - border: 1px solid variables.$color-grey-500; + border: 1px solid $color-grey-500; border-radius: 10px; appearance: none; - @include m-rtl.rtl { + @include rtl { background-position: left 10px top 50%, 0 0; } @@ -51,13 +50,13 @@ // Hover style &:hover { - border-color: color.adjust(variables.$color-grey-500, $lightness: -10%); + border-color: color.adjust($color-grey-500, $lightness: -10%); } // Focus style &:focus { - color: color.adjust(variables.$color-text, $lightness: -10%); - border-color: color.adjust(variables.$color-grey-500, $lightness: -20%); + color: color.adjust($color-text, $lightness: -10%); + border-color: color.adjust($color-grey-500, $lightness: -20%); outline: none; box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7); box-shadow: 0 0 0 3px -moz-mac-focusring; @@ -67,7 +66,7 @@ } } - @include m-rtl.rtl { + @include rtl { background-position: left 10px top 50%, 0 0; } } diff --git a/src/scss/02-tools/_m-style-only.scss b/src/scss/02-tools/_m-style-only.scss index f0e43190..dc777104 100644 --- a/src/scss/02-tools/_m-style-only.scss +++ b/src/scss/02-tools/_m-style-only.scss @@ -1,4 +1,4 @@ -@use "../01-abstract/variables"; +@use "../01-abstract/variables" as *; /** * Style for Frontend UI only @@ -20,7 +20,7 @@ */ @mixin style-only { - @if (variables.$entry-file-name == "style") { + @if ($entry-file-name == "style") { @content; } } diff --git a/src/scss/02-tools/_m-text-icon.scss b/src/scss/02-tools/_m-text-icon.scss index 69af4a1b..f06323ad 100644 --- a/src/scss/02-tools/_m-text-icon.scss +++ b/src/scss/02-tools/_m-text-icon.scss @@ -1,5 +1,5 @@ -@use "../01-abstract/constants"; -@use "f-get-svg-url"; +@use "../01-abstract/constants" as *; +@use "f-get-svg-url" as *; /** * Add icon before text with mask to have the same color of the text @@ -28,10 +28,10 @@ height: $size; content: ""; background-color: $color; - mask-image: f-get-svg-url.get-svg-url($icon); + mask-image: get-svg-url($icon); mask-position: center; mask-repeat: no-repeat; - transition: background-color .5s constants.$ease-out-expo; + transition: background-color .5s $ease-out-expo; } } diff --git a/src/scss/03-base/_body.scss b/src/scss/03-base/_body.scss index 646c4d33..dcd662ed 100644 --- a/src/scss/03-base/_body.scss +++ b/src/scss/03-base/_body.scss @@ -1,16 +1,16 @@ -@use "../01-abstract/variables"; -@use "../02-tools/m-rtl"; +@use "../01-abstract/variables" as *; +@use "../02-tools/m-rtl" as *; html { /* Set automatic RTL direction depending on lang attribute */ - @include m-rtl.set-rtl-direction; + @include set-rtl-direction; /* Apply border-box across the entire page. */ box-sizing: border-box; // HTML resets - font-family: variables.$font-family-primary; - line-height: variables.$line-height-base; + font-family: $font-family-primary; + line-height: $line-height-base; // Scroll resets -webkit-overflow-scrolling: touch; @@ -34,9 +34,9 @@ html { } body { - font-family: variables.$font-family-primary; - font-size: variables.$font-size-base; + font-family: $font-family-primary; + font-size: $font-size-base; font-weight: normal; - color: variables.$color-text; - background-color: variables.$color-light; + color: $color-text; + background-color: $color-light; } diff --git a/src/scss/03-base/_forms.scss b/src/scss/03-base/_forms.scss index a078ae14..d6b2c8ec 100644 --- a/src/scss/03-base/_forms.scss +++ b/src/scss/03-base/_forms.scss @@ -1,10 +1,10 @@ -@use "../01-abstract/variables"; -@use "../02-tools/f-assign-inputs"; -@use "../02-tools/f-get-svg-url"; -@use "../02-tools/m-checkbox-custom"; -@use "../02-tools/m-not-acf"; -@use "../02-tools/m-radio-custom"; -@use "../02-tools/m-select-custom"; +@use "../01-abstract/variables" as *; +@use "../02-tools/f-assign-inputs" as *; +@use "../02-tools/f-get-svg-url" as *; +@use "../02-tools/m-checkbox-custom" as *; +@use "../02-tools/m-not-acf" as *; +@use "../02-tools/m-radio-custom" as *; +@use "../02-tools/m-select-custom" as *; @use "../05-components/btn"; @use "sass:color"; @@ -17,10 +17,10 @@ $text-inputs-list: 'input[type="color"]', 'input[type="date"]', 'input[type="text"]', 'input[type="time"]', 'input[type="url"]', 'input[type="week"]', "input:not([type])", "textarea"; -$all-text-inputs: f-assign-inputs.assign-inputs($text-inputs-list); +$all-text-inputs: assign-inputs($text-inputs-list); // Not apply style to ACF fields -@include m-not-acf.not-acf { +@include not-acf { // Textarea textarea { resize: vertical; @@ -31,26 +31,26 @@ $all-text-inputs: f-assign-inputs.assign-inputs($text-inputs-list); box-sizing: border-box; width: 100%; padding: 15px 25px; - font-family: variables.$font-family-primary; + font-family: $font-family-primary; line-height: 1; - color: variables.$color-text; - background: color.adjust(variables.$color-light, $lightness: -5%); - border: 1px solid variables.$color-grey-500; + color: $color-text; + background: color.adjust($color-light, $lightness: -5%); + border: 1px solid $color-grey-500; border-radius: 10px; //reset border radius for ios transition: border-color .5s ease; appearance: none; &::placeholder { - color: color.adjust(variables.$color-text, $lightness: 50%); + color: color.adjust($color-text, $lightness: 50%); } &:hover { - border-color: color.adjust(variables.$color-grey-500, $lightness: -10%); + border-color: color.adjust($color-grey-500, $lightness: -10%); } &:focus { - color: color.adjust(variables.$color-text, $lightness: -10%); - border-color: color.adjust(variables.$color-grey-500, $lightness: -20%); + color: color.adjust($color-text, $lightness: -10%); + border-color: color.adjust($color-grey-500, $lightness: -20%); } } @@ -62,20 +62,20 @@ $all-text-inputs: f-assign-inputs.assign-inputs($text-inputs-list); // Custom select select { - @include m-select-custom.select-custom; + @include select-custom; } input[type="checkbox"], input[type="radio"] { - @include m-checkbox-custom.checkbox-custom; + @include checkbox-custom; &:checked { - @include m-checkbox-custom.checkbox-custom-checked; + @include checkbox-custom-checked; } } input[type="radio"] { - @include m-radio-custom.radio-custom(true); + @include radio-custom(true); } /* @@ -109,7 +109,7 @@ $all-text-inputs: f-assign-inputs.assign-inputs($text-inputs-list); width: 16px; height: 16px; cursor: pointer; - background-image: f-get-svg-url.get-svg-url("close", variables.$color-dark); + background-image: get-svg-url("close", $color-dark); background-repeat: no-repeat; background-size: contain; -webkit-appearance: none; diff --git a/src/scss/03-base/_links.scss b/src/scss/03-base/_links.scss index be1577af..a842168a 100644 --- a/src/scss/03-base/_links.scss +++ b/src/scss/03-base/_links.scss @@ -1,5 +1,5 @@ -@use "../02-tools/m-hover"; -@use "../02-tools/m-text-icon"; +@use "../02-tools/m-hover" as *; +@use "../02-tools/m-text-icon" as *; a { color: currentColor; @@ -7,14 +7,14 @@ a { cursor: pointer; &[target="_blank"] { - @include m-text-icon.text-icon("external"); + @include text-icon("external"); } - @include m-hover.hover { + @include hover { text-decoration: none; } } .link-external { - @include m-text-icon.text-icon("external"); + @include text-icon("external"); } diff --git a/src/scss/03-base/_print.scss b/src/scss/03-base/_print.scss index f3f31738..9cf87883 100644 --- a/src/scss/03-base/_print.scss +++ b/src/scss/03-base/_print.scss @@ -1,9 +1,9 @@ -@use "../01-abstract/variables"; +@use "../01-abstract/variables" as *; @media print { * { font-family: Arial, Helvetica, sans-serif !important; - color: variables.$color-dark !important; + color: $color-dark !important; text-decoration: none; text-shadow: none !important; background: transparent !important; diff --git a/src/scss/03-base/_variables-css.scss b/src/scss/03-base/_variables-css.scss index e0db4252..ac487c81 100644 --- a/src/scss/03-base/_variables-css.scss +++ b/src/scss/03-base/_variables-css.scss @@ -1,7 +1,7 @@ -@use "../01-abstract/variables"; -@use "../02-tools/f-fluid-size"; -@use "../02-tools/m-breakpoint"; -@use "../02-tools/m-reduced-motion"; +@use "../01-abstract/variables" as *; +@use "../02-tools/f-fluid-size" as *; +@use "../02-tools/m-breakpoint" as *; +@use "../02-tools/m-reduced-motion" as *; :root { /* @@ -18,11 +18,11 @@ /** * Font size fluid -> /!\ IMPORTANT /!\ : no add media query to defined different values. The function make it * - * --heading--font-size-h1: #{f-fluid-size.fluid-size(58px, 156px)}; - * --heading--font-size-h2: #{f-fluid-size.fluid-size(47px, 96px)}; - * --heading--font-size-h3: #{f-fluid-size.fluid-size(38px, 52px)}; - * --heading--font-size-h4: #{f-fluid-size.fluid-size(32px, 45px)}; - * --heading--font-size-h5: #{f-fluid-size.fluid-size(28px, 34px)}; + * --heading--font-size-h1: #{fluid-size(58px, 156px)}; + * --heading--font-size-h2: #{fluid-size(47px, 96px)}; + * --heading--font-size-h3: #{fluid-size(38px, 52px)}; + * --heading--font-size-h4: #{fluid-size(32px, 45px)}; + * --heading--font-size-h5: #{fluid-size(28px, 34px)}; */ // Line height @@ -45,10 +45,10 @@ /** * Font size fluid -> /!\ IMPORTANT /!\ : no add media query to defined different values. The function make it * - * --paragraph--font-size-huge: #{f-fluid-size.fluid-size(28px, 32px)}; - * --paragraph--font-size-large: #{f-fluid-size.fluid-size(20px, 24px)}; - * --paragraph--font-size-small: #{f-fluid-size.fluid-size(12px, 14px)}; - * --paragraph--font-size-default: #{f-fluid-size.fluid-size(14px, 16px)}; + * --paragraph--font-size-huge: #{fluid-size(28px, 32px)}; + * --paragraph--font-size-large: #{fluid-size(20px, 24px)}; + * --paragraph--font-size-small: #{fluid-size(12px, 14px)}; + * --paragraph--font-size-default: #{fluid-size(14px, 16px)}; */ // line height @@ -69,10 +69,10 @@ * Spacing fluid -> /!\ IMPORTANT /!\ : no add media query to defined different values. The function make it * * Fluid spacing : - * --spacing--block-1: #{f-fluid-size.fluid-size(16px, 32px)}; - * --spacing--block-2: #{f-fluid-size.fluid-size(32px, 64px)}; - * --spacing--block-3: #{f-fluid-size.fluid-size(48px, 96px)}; - * --spacing--block-4: #{f-fluid-size.fluid-size(64px, 128px)}; + * --spacing--block-1: #{fluid-size(16px, 32px)}; + * --spacing--block-2: #{fluid-size(32px, 64px)}; + * --spacing--block-3: #{fluid-size(48px, 96px)}; + * --spacing--block-4: #{fluid-size(64px, 128px)}; * * Fixed spacings : * --spacing--fixed--block-1: 16px; @@ -82,7 +82,7 @@ /* * Gutters */ - --responsive--gutter: #{variables.$external-gutter-mobile}; + --responsive--gutter: #{$external-gutter-mobile}; /* * Alignments @@ -104,7 +104,7 @@ /* * A11y reduced motion */ - @include m-reduced-motion.reduced-motion { + @include reduced-motion { --speed: 0s; } @@ -112,7 +112,7 @@ * Global breakpoints */ - @include m-breakpoint.breakpoints(s, max) { + @include breakpoints(s, max) { /* * Admin bar become not sticky */ @@ -123,7 +123,7 @@ } } - @include m-breakpoint.breakpoints(md) { + @include breakpoints(md) { /* * Spacing * /!\ IMPORTANT : Remove it if you use fluid size function instead /!\ @@ -136,6 +136,6 @@ /* * Gutters */ - --responsive--gutter: #{variables.$external-gutter}; + --responsive--gutter: #{$external-gutter}; } } diff --git a/src/scss/04-utilities/_container.scss b/src/scss/04-utilities/_container.scss index cfdeda7b..40c26d01 100644 --- a/src/scss/04-utilities/_container.scss +++ b/src/scss/04-utilities/_container.scss @@ -1,12 +1,12 @@ -@use "../01-abstract/variables"; -@use "../02-tools/m-container"; +@use "../01-abstract/variables" as *; +@use "../02-tools/m-container" as *; /* Main Layout */ .container, .container-wide { - @include m-container.container; + @include container; } .container-default { - @include m-container.container(variables.$container-default); + @include container($container-default); } diff --git a/src/scss/04-utilities/_js-animation.scss b/src/scss/04-utilities/_js-animation.scss index 4dcc67dc..0adc6791 100644 --- a/src/scss/04-utilities/_js-animation.scss +++ b/src/scss/04-utilities/_js-animation.scss @@ -1,4 +1,4 @@ -@use "../01-abstract/constants"; +@use "../01-abstract/constants" as *; /** * js-animation @@ -41,7 +41,7 @@ %js-animation-translation-init { > * { opacity: 0; - transition: opacity .5s, transform .5s constants.$ease-out-expo; + transition: opacity .5s, transform .5s $ease-out-expo; transform: translateY(100px); } } @@ -81,7 +81,7 @@ > span { display: inline-block; - transition: transform .75s constants.$ease-out-expo; + transition: transform .75s $ease-out-expo; transform: translateY(150%); } } diff --git a/src/scss/04-utilities/_lazyload.scss b/src/scss/04-utilities/_lazyload.scss index 6ef983f4..c2a4753e 100644 --- a/src/scss/04-utilities/_lazyload.scss +++ b/src/scss/04-utilities/_lazyload.scss @@ -1,10 +1,9 @@ -@use "../01-abstract/variables"; - +@use "../01-abstract/variables" as *; @use "sass:math"; .lazyload, .lazyloading { - background: variables.$color-primary; + background: $color-primary; opacity: 0; } @@ -32,7 +31,7 @@ $loading-dimensions: 50px; left: 0; z-index: 2; content: ""; - background: variables.$color-primary; + background: $color-primary; transition: opacity .5s, z-index .5s ease .5s; } @@ -44,7 +43,7 @@ $loading-dimensions: 50px; width: $loading-dimensions; height: $loading-dimensions; content: ""; - border: 5px solid variables.$color-light; + border: 5px solid $color-light; border-top-color: transparent; border-radius: $loading-dimensions; opacity: 1; diff --git a/src/scss/04-utilities/_palette.scss b/src/scss/04-utilities/_palette.scss index c7827d60..736a6944 100644 --- a/src/scss/04-utilities/_palette.scss +++ b/src/scss/04-utilities/_palette.scss @@ -1,8 +1,7 @@ -@use "../01-abstract/variables"; - +@use "../01-abstract/variables" as *; @use "sass:map"; -@each $name, $colors in variables.$palette { +@each $name, $colors in $palette { .has-#{$name}-color { color: map.get($colors, color); } diff --git a/src/scss/04-utilities/_sr-only.scss b/src/scss/04-utilities/_sr-only.scss index 87eaf522..e8962007 100644 --- a/src/scss/04-utilities/_sr-only.scss +++ b/src/scss/04-utilities/_sr-only.scss @@ -1,11 +1,11 @@ -@use "../02-tools/m-sr-only"; +@use "../02-tools/m-sr-only" as *; %sr-only { - @include m-sr-only.sr-only; + @include sr-only; } %sr-only-focusable { - @include m-sr-only.sr-only(true); + @include sr-only(true); } .sr-only { diff --git a/src/scss/04-utilities/_wp-admin-bar.scss b/src/scss/04-utilities/_wp-admin-bar.scss index 37a1998d..3062aa92 100644 --- a/src/scss/04-utilities/_wp-admin-bar.scss +++ b/src/scss/04-utilities/_wp-admin-bar.scss @@ -1,7 +1,7 @@ -@use "../02-tools/m-breakpoint"; +@use "../02-tools/m-breakpoint" as *; #wpadminbar { - @include m-breakpoint.breakpoints(sm, max) { + @include breakpoints(sm, max) { overflow: scroll; } } diff --git a/src/scss/05-components/_btn.scss b/src/scss/05-components/_btn.scss index aaae5e7c..ba10c974 100644 --- a/src/scss/05-components/_btn.scss +++ b/src/scss/05-components/_btn.scss @@ -1,17 +1,17 @@ -@use "../02-tools/m-btn"; +@use "../02-tools/m-btn" as *; %btn { - @include m-btn.btn; + @include btn; } %btn-block { @extend %btn; - @include m-btn.btn-block; + @include btn-block; } %btn-block-outline { @extend %btn-block; - @include m-btn.btn-block-outline; + @include btn-block-outline; } .btn { diff --git a/src/scss/05-components/_skip-links.scss b/src/scss/05-components/_skip-links.scss index e0c4e362..33d67a4a 100644 --- a/src/scss/05-components/_skip-links.scss +++ b/src/scss/05-components/_skip-links.scss @@ -1,5 +1,5 @@ -@use "../01-abstract/constants"; -@use "../01-abstract/variables"; +@use "../01-abstract/constants" as *; +@use "../01-abstract/variables" as *; .skip-links { position: fixed; @@ -8,9 +8,9 @@ z-index: 11; // Under header width: 100%; padding: 8px 10px 10px; - background-color: variables.$color-primary; + background-color: $color-primary; opacity: 0; - transition: transform .3s constants.$ease-out-expo, opacity .3s; + transition: transform .3s $ease-out-expo, opacity .3s; transform: translate3d(0, -100%, 0); ul { @@ -20,7 +20,7 @@ a { font-size: 13px; - color: variables.$color-text; + color: $color-text; text-decoration: none; &:focus { diff --git a/src/scss/06-blocks/_gutenberg.scss b/src/scss/06-blocks/_gutenberg.scss index 223a35ac..f05ff73a 100644 --- a/src/scss/06-blocks/_gutenberg.scss +++ b/src/scss/06-blocks/_gutenberg.scss @@ -1,19 +1,19 @@ -@use "../01-abstract/variables"; -@use "../02-tools/f-context-selector"; -@use "../02-tools/f-get-gutter-width"; -@use "../02-tools/m-align"; -@use "../02-tools/m-editor-only"; -@use "../02-tools/m-heading"; - -@include m-editor-only.editor-only { +@use "../01-abstract/variables" as *; +@use "../02-tools/f-context-selector" as *; +@use "../02-tools/f-get-gutter-width" as *; +@use "../02-tools/m-align" as *; +@use "../02-tools/m-editor-only" as *; +@use "../02-tools/m-heading" as *; + +@include editor-only { // ---- // Post title style // ---- .editor-post-title { - @include m-heading.heading(h1); + @include heading(h1); - width: #{variables.$container-wide}; + width: #{$container-wide}; max-width: var(--responsive--alignwide-width); margin-bottom: var(--spacing--block-3); } @@ -23,7 +23,7 @@ // ---- .wp-block.block-editor-default-block-appender > textarea { font-family: var(--global--font-secondary); - font-size: variables.$font-size-md; + font-size: $font-size-md; } // ---- @@ -46,7 +46,7 @@ .has-drop-cap:not(:focus)::first-letter { float: left; margin: .1em .1em 0 0; - font-family: var(variables.$font-family-primary); + font-family: var($font-family-primary); font-size: calc(1.2 * var(--heading--font-size-h1)); font-style: normal; font-weight: var(--heading--font-weight); @@ -54,18 +54,18 @@ text-transform: uppercase; } -#{f-context-selector.context-selector(".blocks-container", ".is-root-container")} { +#{context-selector(".blocks-container", ".is-root-container")} { // ---- // Alignements horizontaux // ---- > :where(*) { - width: #{variables.$container-default}; + width: #{$container-default}; max-width: var(--responsive--aligndefault-width); margin-right: auto; margin-left: auto; } - @include m-editor-only.editor-only { + @include editor-only { > .wp-block[class*="wp-block-acf"], > .wp-block[class*="wp-block-beapi-manual-block"], > .wp-block[class*="wp-block-beapi-dynamic-block"] { @@ -74,7 +74,7 @@ } > .wp-block[class*="wp-block-acf"].is-selected { - width: #{variables.$container-wide}; + width: #{$container-wide}; max-width: var(--responsive--alignwide-width); } @@ -82,31 +82,31 @@ > :where(.wp-block[class*="wp-block-acf"]) :where(.block), > :where(.wp-block[class*="wp-block-beapi-manual-block"]) :where(.block), > :where(.wp-block[class*="wp-block-beapi-dynamic-block"]) :where(.block) { - width: variables.$container-default; + width: $container-default; max-width: var(--responsive--aligndefault-width); margin-right: auto; margin-left: auto; } } - #{f-context-selector.context-selector(".alignwide", "[data-align='wide']")} { - width: #{variables.$container-wide}; + #{context-selector(".alignwide", "[data-align='wide']")} { + width: #{$container-wide}; max-width: var(--responsive--alignwide-width); } - #{f-context-selector.context-selector(".alignfull", "[data-align='full']")} { + #{context-selector(".alignfull", "[data-align='full']")} { width: 100%; max-width: var(--responsive--alignfull-width); } .alignleft { - @include m-align.align; + @include align; } .alignright { - @include m-align.align(right); + @include align(right); } .aligncenter { @@ -124,7 +124,7 @@ :where(.is-layout-flex), :where(.is-layout-grid) { - gap: f-get-gutter-width.get-gutter-width(); + gap: get-gutter-width(); } // ---- @@ -163,7 +163,7 @@ } } - @include m-editor-only.editor-only { + @include editor-only { > * { diff --git a/src/scss/06-blocks/core/_audio.scss b/src/scss/06-blocks/core/_audio.scss index 93f59332..dfddf360 100644 --- a/src/scss/06-blocks/core/_audio.scss +++ b/src/scss/06-blocks/core/_audio.scss @@ -1,13 +1,13 @@ -@use "../../01-abstract/variables"; +@use "../../01-abstract/variables" as *; .wp-block-audio { audio { &::-webkit-media-controls-panel { - background-color: variables.$color-primary; + background-color: $color-primary; } &:focus { - outline: 2px solid variables.$color-primary; + outline: 2px solid $color-primary; outline-offset: 5px; } } diff --git a/src/scss/06-blocks/core/_columns.scss b/src/scss/06-blocks/core/_columns.scss index 74550723..5ee1ee58 100644 --- a/src/scss/06-blocks/core/_columns.scss +++ b/src/scss/06-blocks/core/_columns.scss @@ -1,11 +1,11 @@ -@use "../../02-tools/m-block-vertical-spacing"; -@use "../../02-tools/m-breakpoint"; +@use "../../02-tools/m-block-vertical-spacing" as *; +@use "../../02-tools/m-breakpoint" as *; .wp-block-columns { --wp-block-columns-row-gap: var(--spacing--block-2); --wp-block-columns-column-gap: #{get_gutter-width()}; - @include m-block-vertical-spacing.block-vertical-spacing(); + @include block-vertical-spacing(); row-gap: var(--wp-block-columns-row-gap); column-gap: var(--wp-block-columns-column-gap) !important; @@ -22,7 +22,7 @@ margin-left: 0 !important; } - @include m-breakpoint.breakpoints(md, max) { + @include breakpoints(md, max) { flex-wrap: wrap !important; .wp-block-column { diff --git a/src/scss/06-blocks/core/_cover.scss b/src/scss/06-blocks/core/_cover.scss index b768ff49..6331ed44 100644 --- a/src/scss/06-blocks/core/_cover.scss +++ b/src/scss/06-blocks/core/_cover.scss @@ -1,5 +1,5 @@ -@use "../../02-tools/m-editor-only"; -@use "../../02-tools/m-style-only"; +@use "../../02-tools/m-editor-only" as *; +@use "../../02-tools/m-style-only" as *; .wp-block-cover, .wp-block-cover-image { @@ -7,14 +7,14 @@ clear: both; } - @include m-style-only.style-only { + @include style-only { &.alignfull { margin-top: 0; margin-bottom: 0; } } - @include m-editor-only.editor-only { + @include editor-only { [data-align="full"] & { margin-top: 0; margin-bottom: 0; diff --git a/src/scss/06-blocks/core/_freeform.scss b/src/scss/06-blocks/core/_freeform.scss index 8a34dbe4..e73152eb 100644 --- a/src/scss/06-blocks/core/_freeform.scss +++ b/src/scss/06-blocks/core/_freeform.scss @@ -1,8 +1,8 @@ -@use "../../01-abstract/variables"; -@use "../../02-tools/m-editor-only"; +@use "../../01-abstract/variables" as *; +@use "../../02-tools/m-editor-only" as *; .wp-block-freeform { - @include m-editor-only.editor-only { + @include editor-only { // Remove the border of blockquotes inside the classic block. &.block-library-rich-text__tinymce blockquote { border: none; @@ -15,7 +15,7 @@ // Backend Classic editor container .mce-content-body { - width: #{variables.$container-wide}; + width: #{$container-wide}; max-width: var(--responsive--alignwide-width); margin: 0; } diff --git a/src/scss/06-blocks/core/_gallery.scss b/src/scss/06-blocks/core/_gallery.scss index cf066295..e1a4c4fb 100644 --- a/src/scss/06-blocks/core/_gallery.scss +++ b/src/scss/06-blocks/core/_gallery.scss @@ -1,5 +1,5 @@ -@use "../../02-tools/f-get-gutter-width"; +@use "../../02-tools/f-get-gutter-width" as *; .wp-block-gallery { - --wp--style--gallery-gap-default: #{f-get-gutter-width.get-gutter-width()} !important; + --wp--style--gallery-gap-default: #{get-gutter-width()} !important; } diff --git a/src/scss/06-blocks/core/_group.scss b/src/scss/06-blocks/core/_group.scss index 77f56021..2709b959 100644 --- a/src/scss/06-blocks/core/_group.scss +++ b/src/scss/06-blocks/core/_group.scss @@ -1,5 +1,5 @@ -@use "../../02-tools/m-breakpoint"; -@use "../../02-tools/m-editor-only"; +@use "../../02-tools/m-breakpoint" as *; +@use "../../02-tools/m-editor-only" as *; .wp-block-group { $el: &; @@ -17,14 +17,14 @@ } } - @include m-breakpoint.breakpoints(sm, max) { + @include breakpoints(sm, max) { &--full-mobile { max-width: 100% !important; } } } -@include m-editor-only.editor-only { +@include editor-only { .wp-block-group { &:not(.is-layout-grid) { display: flow-root; diff --git a/src/scss/06-blocks/core/_heading.scss b/src/scss/06-blocks/core/_heading.scss index e35d4304..4f906c69 100644 --- a/src/scss/06-blocks/core/_heading.scss +++ b/src/scss/06-blocks/core/_heading.scss @@ -1,4 +1,4 @@ -@use "../../02-tools/m-heading"; +@use "../../02-tools/m-heading" as *; /** * Headings @@ -35,17 +35,17 @@ $headings: ( @each $i, $styles in $headings { h#{$i} { - @include m-heading.heading(h#{$i}); + @include heading(h#{$i}); @each $style in $styles { &.is-style-#{$style} { - @include m-heading.heading(h#{$i}, $style); + @include heading(h#{$i}, $style); } } } .is-style-h#{$i} { - @include m-heading.heading(h#{$i}); + @include heading(h#{$i}); } .has-h-#{$i}-font-size { diff --git a/src/scss/06-blocks/core/_image.scss b/src/scss/06-blocks/core/_image.scss index c73f2ca2..3959134d 100644 --- a/src/scss/06-blocks/core/_image.scss +++ b/src/scss/06-blocks/core/_image.scss @@ -1,4 +1,4 @@ -@use "../../01-abstract/variables"; +@use "../../01-abstract/variables" as *; .wp-block-image { > img { @@ -7,7 +7,7 @@ } figcaption { - font-size: variables.$font-size-xs; - color: variables.$color-grey-600; + font-size: $font-size-xs; + color: $color-grey-600; } } diff --git a/src/scss/06-blocks/core/_list.scss b/src/scss/06-blocks/core/_list.scss index c23d1425..7a581bfe 100644 --- a/src/scss/06-blocks/core/_list.scss +++ b/src/scss/06-blocks/core/_list.scss @@ -1,6 +1,6 @@ -@use "../../01-abstract/variables"; -@use "../../02-tools/f-context-selector"; -@use "../../02-tools/m-rtl"; +@use "../../01-abstract/variables" as *; +@use "../../02-tools/f-context-selector" as *; +@use "../../02-tools/m-rtl" as *; // Use the no-list-style class in your theme if you want the basic style @@ -8,7 +8,7 @@ font-size: 16px; font-weight: 700; line-height: 1.3; - color: variables.$color-dark; + color: $color-dark; } %marker-ul-default { @@ -18,24 +18,24 @@ width: 6px; height: 6px; content: ""; - background-color: variables.$color-dark; + background-color: $color-dark; border-radius: 100%; - @include m-rtl.rtl { + @include rtl { right: -15px; left: inherit; } } -#{f-context-selector.context-selector('.blocks-container', '.is-root-container')} { +#{context-selector(".blocks-container", ".is-root-container")} { --offset-item: 30px; --vertical-spaging-item: 16px; ul, ol { &:not([class*="no-list-style"]):not([role="list"]):not(.chosen-choices):not(.chosen-results) { - font-size: var(--paragraph--font-size-default, variables.$font-size-base); - line-height: var(--paragraph--line-height-default, variables.$line-height-base); + font-size: var(--paragraph--font-size-default, $font-size-base); + line-height: var(--paragraph--line-height-default, $line-height-base); ul, ol { @@ -54,7 +54,7 @@ padding-left: var(--offset-item); margin-bottom: var(--vertical-spaging-item); - @include m-rtl.rtl { + @include rtl { padding-right: var(--offset-item); padding-left: 0; } @@ -80,7 +80,7 @@ margin-bottom: var(--vertical-spaging-item); margin-left: calc(var(--offset-item) * .5); - @include m-rtl.rtl { + @include rtl { padding-right: calc(var(--offset-item) * .5); padding-left: 0; margin-right: calc(var(--offset-item) * .5); diff --git a/src/scss/06-blocks/core/_media-text.scss b/src/scss/06-blocks/core/_media-text.scss index f5db90ea..86417a4e 100644 --- a/src/scss/06-blocks/core/_media-text.scss +++ b/src/scss/06-blocks/core/_media-text.scss @@ -1,20 +1,20 @@ -@use "../../02-tools/m-editor-only"; -@use "../../02-tools/m-rtl"; -@use "../../02-tools/m-style-only"; +@use "../../02-tools/m-editor-only" as *; +@use "../../02-tools/m-rtl" as *; +@use "../../02-tools/m-style-only" as *; .wp-block-media-text { - @include m-rtl.rtl { + @include rtl { direction: rtl; // Force direction RTL, because WP force LTR direction on RTL view } - @include m-style-only.style-only { + @include style-only { &.alignfull { margin-top: 0; margin-bottom: 0; } } - @include m-editor-only.editor-only { + @include editor-only { [data-align="full"] & { margin-top: 0; margin-bottom: 0; diff --git a/src/scss/06-blocks/core/_paragraph.scss b/src/scss/06-blocks/core/_paragraph.scss index f8c0b947..998df4d7 100644 --- a/src/scss/06-blocks/core/_paragraph.scss +++ b/src/scss/06-blocks/core/_paragraph.scss @@ -1,9 +1,9 @@ -@use "../../02-tools/m-text"; +@use "../../02-tools/m-text" as *; $paragraphs: "default", "small", "large", "huge"; p { - @include m-text.text(default); + @include text(default); &.has-background { padding: 20px; @@ -11,7 +11,7 @@ p { @each $style in $paragraphs { &.is-style-#{$style} { - @include m-text.text(#{$style}); + @include text(#{$style}); } } } diff --git a/src/scss/06-blocks/core/_preformatted.scss b/src/scss/06-blocks/core/_preformatted.scss index 172ccdca..37f2b7a4 100644 --- a/src/scss/06-blocks/core/_preformatted.scss +++ b/src/scss/06-blocks/core/_preformatted.scss @@ -1,14 +1,14 @@ -@use "../../02-tools/m-editor-only"; -@use "../../02-tools/m-style-only"; +@use "../../02-tools/m-editor-only" as *; +@use "../../02-tools/m-style-only" as *; .wp-block-preformatted { overflow-x: auto; - @include m-style-only.style-only { + @include style-only { white-space: pre; } - @include m-editor-only.editor-only { + @include editor-only { white-space: pre !important; } } diff --git a/src/scss/06-blocks/core/_separator.scss b/src/scss/06-blocks/core/_separator.scss index dd49a986..8141eb38 100644 --- a/src/scss/06-blocks/core/_separator.scss +++ b/src/scss/06-blocks/core/_separator.scss @@ -1,4 +1,4 @@ -@use "../../02-tools/m-editor-only"; +@use "../../02-tools/m-editor-only" as *; hr { margin-right: auto; @@ -11,7 +11,7 @@ hr { } } -@include m-editor-only.editor-only { +@include editor-only { .wp-block-separator, hr { clear: both; diff --git a/src/scss/06-blocks/core/_table.scss b/src/scss/06-blocks/core/_table.scss index 0b45f21c..effc2c9f 100644 --- a/src/scss/06-blocks/core/_table.scss +++ b/src/scss/06-blocks/core/_table.scss @@ -1,4 +1,4 @@ -@use "../../02-tools/m-not-acf"; +@use "../../02-tools/m-not-acf" as *; %table { width: 100%; @@ -11,7 +11,7 @@ } // Not apply style to ACF fields -@include m-not-acf.not-acf { +@include not-acf { table { @extend %table; } diff --git a/src/scss/08-template-parts/_header.scss b/src/scss/08-template-parts/_header.scss index f335e07a..e2e818cd 100644 --- a/src/scss/08-template-parts/_header.scss +++ b/src/scss/08-template-parts/_header.scss @@ -1,9 +1,9 @@ -@use "../01-abstract/constants"; -@use "../01-abstract/variables"; -@use "../02-tools/f-column"; -@use "../02-tools/m-breakpoint"; -@use "../02-tools/m-hover"; -@use "../02-tools/m-rtl"; +@use "../01-abstract/constants" as *; +@use "../01-abstract/variables" as *; +@use "../02-tools/f-column" as *; +@use "../02-tools/m-breakpoint" as *; +@use "../02-tools/m-hover" as *; +@use "../02-tools/m-rtl" as *; /** * Header @@ -46,11 +46,11 @@ height: 46px; padding: 0; cursor: pointer; - background: variables.$color-text; + background: $color-text; border: none; border-radius: 50%; - @include m-rtl.rtl { + @include rtl { right: auto; left: var(--responsive--gutter); } @@ -62,9 +62,9 @@ width: 20px; height: 2px; margin: -1px 0 0 -10px; - background: variables.$color-light; + background: $color-light; border-radius: 2px; - transition: background-color .5s constants.$ease-in-out-expo; + transition: background-color .5s $ease-in-out-expo; &::before, &::after { @@ -74,9 +74,9 @@ width: 100%; height: 100%; content: ""; - background: variables.$color-light; + background: $color-light; border-radius: inherit; - transition: transform .5s constants.$ease-in-out-expo; + transition: transform .5s $ease-in-out-expo; } &::before { @@ -127,7 +127,7 @@ width: 50px; height: 50px; padding: 0; - color: variables.$color-dark; + color: $color-dark; text-indent: -10000px; vertical-align: middle; cursor: pointer; @@ -167,7 +167,7 @@ &--menu-is-open { #{$el}__menu-toggle { > span { - background: rgba(variables.$color-light, 0); + background: rgba($color-light, 0); &::before { transform: rotate(135deg); @@ -180,7 +180,7 @@ } } - @include m-breakpoint.breakpoints(mdl, max) { + @include breakpoints(mdl, max) { &__menu { position: absolute; top: 0; @@ -190,10 +190,10 @@ width: 100%; height: 100vh; overflow: auto; - background: variables.$color-primary; + background: $color-primary; transform: translateX(-100%); - @include m-rtl.rtl { + @include rtl { transform: translateX(100%); } @@ -210,7 +210,7 @@ padding-top: 22px; + li { - border-top: 1px solid variables.$color-dark; + border-top: 1px solid $color-dark; } } } @@ -221,7 +221,7 @@ } } - @include m-breakpoint.breakpoints(sm) { + @include breakpoints(sm) { &__menu { #{$el}__logo-link { display: none; @@ -229,26 +229,26 @@ } } - @include m-breakpoint.breakpoints(sm, mdl) { + @include breakpoints(sm, mdl) { #{$el}__menu { right: 0; left: auto; - width: f-column.column(6); + width: column(6); transform: translateX(100%); - @include m-rtl.rtl { + @include rtl { right: auto; left: 0; transform: translateX(-100%); } > div { - padding: f-column.column(2, 2) f-column.column(1, 1, 6); + padding: column(2, 2) column(1, 1, 6); } } } - @include m-breakpoint.breakpoints(mdl) { + @include breakpoints(mdl) { .container { display: flex; align-items: flex-start; @@ -264,19 +264,19 @@ } &__menu { - width: f-column.column(9); + width: column(9); > div { text-align: right; - @include m-rtl.rtl { + @include rtl { text-align: left; } } } &__menu-list { - color: variables.$color-text; + color: $color-text; li + li { margin-top: 12px; @@ -286,7 +286,7 @@ display: inline; text-align: start; - @include m-rtl.rtl { + @include rtl { text-align: right; } @@ -305,7 +305,7 @@ } .menu-item-has-children { - @include m-hover.hover { + @include hover { > #{$el}__sub-menu { .no-js & { display: block; @@ -321,7 +321,7 @@ width: 6px; height: 6px; - @include m-rtl.rtl { + @include rtl { right: auto; left: 0; } @@ -345,7 +345,7 @@ &::after { position: absolute; content: ""; - background: variables.$color-primary; + background: $color-primary; } &::before { diff --git a/src/scss/08-template-parts/_hero.scss b/src/scss/08-template-parts/_hero.scss index 3b102b46..b77f2f08 100644 --- a/src/scss/08-template-parts/_hero.scss +++ b/src/scss/08-template-parts/_hero.scss @@ -1,13 +1,13 @@ -@use "../01-abstract/variables"; -@use "../02-tools/m-breakpoint"; -@use "../02-tools/m-row-fullwidth"; +@use "../01-abstract/variables" as *; +@use "../02-tools/m-breakpoint" as *; +@use "../02-tools/m-row-fullwidth" as *; /** * Hero */ .hero { - @include m-row-fullwidth.row-fullwidth; + @include row-fullwidth; padding: var(--spacing--block-1) 0; margin-bottom: var(--spacing--block-1); @@ -16,7 +16,7 @@ position: relative; z-index: 4; padding: 20px; - background: rgba(variables.$color-light, .5); + background: rgba($color-light, .5); } &__img { @@ -30,7 +30,7 @@ height: 100%; } - @include m-breakpoint.breakpoints(md) { + @include breakpoints(md) { padding: 100px 0; } } From 6e4b987ea2a7daabf81cc5055a3500aec2e7540a Mon Sep 17 00:00:00 2001 From: mricoul Date: Mon, 2 Jun 2025 14:28:07 +0200 Subject: [PATCH 7/7] fix (gutenberg): removes editor-only styles for ACF and BEAPI blocks Removes specific styling rules applied only within the Gutenberg editor for ACF and BEAPI blocks. These styles were causing inconsistencies between the editor and the front-end display. --- src/scss/06-blocks/_gutenberg.scss | 24 ------------------------ 1 file changed, 24 deletions(-) diff --git a/src/scss/06-blocks/_gutenberg.scss b/src/scss/06-blocks/_gutenberg.scss index f05ff73a..e39d92d4 100644 --- a/src/scss/06-blocks/_gutenberg.scss +++ b/src/scss/06-blocks/_gutenberg.scss @@ -65,30 +65,6 @@ margin-left: auto; } - @include editor-only { - > .wp-block[class*="wp-block-acf"], - > .wp-block[class*="wp-block-beapi-manual-block"], - > .wp-block[class*="wp-block-beapi-dynamic-block"] { - width: 100%; - max-width: none; - } - - > .wp-block[class*="wp-block-acf"].is-selected { - width: #{$container-wide}; - max-width: var(--responsive--alignwide-width); - } - - // The template block must have a ".block" class. Example :
- > :where(.wp-block[class*="wp-block-acf"]) :where(.block), - > :where(.wp-block[class*="wp-block-beapi-manual-block"]) :where(.block), - > :where(.wp-block[class*="wp-block-beapi-dynamic-block"]) :where(.block) { - width: $container-default; - max-width: var(--responsive--aligndefault-width); - margin-right: auto; - margin-left: auto; - } - } - #{context-selector(".alignwide", "[data-align='wide']")} { width: #{$container-wide}; max-width: var(--responsive--alignwide-width);