From f7429709b478828f0da66b6a164034a48b3a2442 Mon Sep 17 00:00:00 2001 From: mricoul Date: Tue, 5 Nov 2024 15:22:44 +0100 Subject: [PATCH 1/6] 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 10b21752..bd57bc8c 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 e82fb48fd61b26d5f46cbab77701b86073c7bada Mon Sep 17 00:00:00 2001 From: mricoul Date: Tue, 5 Nov 2024 15:30:10 +0100 Subject: [PATCH 2/6] 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 3671dd98..3eadb659 100644 --- a/package.json +++ b/package.json @@ -50,8 +50,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 efb2bffa..61d54133 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 @@ -1662,7 +1669,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: @@ -2124,8 +2140,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" @@ -2415,7 +2431,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: @@ -2425,6 +2441,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" @@ -3273,15 +3299,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 @@ -3294,6 +3320,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" @@ -4748,12 +4786,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 @@ -4867,7 +4905,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: @@ -4885,6 +4923,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" @@ -5018,18 +5074,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 @@ -5643,14 +5698,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: @@ -5660,6 +5715,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" @@ -6544,13 +6609,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" @@ -7233,6 +7291,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" @@ -7774,13 +7839,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" @@ -9686,42 +9744,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 @@ -11421,10 +11483,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 a47c633c9334a71b883ea962444f97f18f981c91 Mon Sep 17 00:00:00 2001 From: Nicolas Langle Date: Tue, 19 Nov 2024 14:32:45 +0100 Subject: [PATCH 3/6] 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 7f7d35521bcbcd0187c4e53da7bfa006ba1cccf8 Mon Sep 17 00:00:00 2001 From: mricoul Date: Fri, 7 Mar 2025 16:13:23 +0100 Subject: [PATCH 4/6] 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 3eadb659..5e0817c3 100644 --- a/package.json +++ b/package.json @@ -50,8 +50,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 61d54133..3f9572a4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2140,8 +2140,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" @@ -5698,10 +5698,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 @@ -9744,9 +9744,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: @@ -9766,24 +9766,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 42ee67349c82783409bd3899f6713ccfc8e1624c Mon Sep 17 00:00:00 2001 From: mricoul Date: Fri, 7 Mar 2025 16:22:07 +0100 Subject: [PATCH 5/6] 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 0ff2c5b3b1c7bbb05ce6d170c55d8c7ea3c3c70b Mon Sep 17 00:00:00 2001 From: mricoul Date: Tue, 8 Apr 2025 22:10:48 +0200 Subject: [PATCH 6/6] 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/_fonts.scss | 2 +- 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 ++--- 50 files changed, 289 insertions(+), 293 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 bd57bc8c..c3e916a1 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/_fonts.scss b/src/scss/03-base/_fonts.scss index b5e77e7a..674dd2b9 100644 --- a/src/scss/03-base/_fonts.scss +++ b/src/scss/03-base/_fonts.scss @@ -25,7 +25,7 @@ * ... */ -@use "~@fontsource/poppins/scss/mixins" as Poppins; +@use "../../../node_modules/@fontsource/poppins/scss/mixins" as Poppins; @include Poppins.faces($weights: (300, 400, 500, 700), $styles: normal); @include Poppins.faces($weights: (300, 400, 500, 700), $styles: italic); 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; } }