From 84d5e0685ed1efa58878b8fa548a7f4d9ef5241a Mon Sep 17 00:00:00 2001 From: mricoul Date: Tue, 3 Jun 2025 14:55:20 +0200 Subject: [PATCH 1/3] style (scss): use tabs for scss files --- .stylelintrc | 4 +- src/scss/01-abstract/_variables.scss | 92 +-- src/scss/02-tools/_f-assign-inputs.scss | 14 +- src/scss/02-tools/_f-column.scss | 120 +-- src/scss/02-tools/_f-context-align.scss | 22 +- src/scss/02-tools/_f-context-selector.scss | 38 +- src/scss/02-tools/_f-easings.scss | 216 ++--- src/scss/02-tools/_f-em.scss | 14 +- src/scss/02-tools/_f-fluid-size.scss | 6 +- src/scss/02-tools/_f-get-gutter-width.scss | 4 +- src/scss/02-tools/_f-get-svg-url.scss | 34 +- src/scss/02-tools/_f-strip-units.scss | 2 +- src/scss/02-tools/_f-to-number.scss | 46 +- src/scss/02-tools/_m-align.scss | 12 +- src/scss/02-tools/_m-autofill.scss | 10 +- src/scss/02-tools/_m-background-static.scss | 18 +- src/scss/02-tools/_m-bg-fullwidth.scss | 30 +- .../02-tools/_m-block-vertical-spacing.scss | 16 +- src/scss/02-tools/_m-breakpoint.scss | 28 +- src/scss/02-tools/_m-btn.scss | 80 +- src/scss/02-tools/_m-checkbox-custom.scss | 92 +-- src/scss/02-tools/_m-container-query.scss | 28 +- src/scss/02-tools/_m-container.scss | 4 +- src/scss/02-tools/_m-declare-font-face.scss | 19 +- src/scss/02-tools/_m-editor-only.scss | 6 +- src/scss/02-tools/_m-heading.scss | 52 +- src/scss/02-tools/_m-hover.scss | 40 +- src/scss/02-tools/_m-line-clamp.scss | 8 +- src/scss/02-tools/_m-not-acf.scss | 6 +- src/scss/02-tools/_m-placeholder-media.scss | 44 +- src/scss/02-tools/_m-radio-custom.scss | 34 +- src/scss/02-tools/_m-reduced-motion.scss | 18 +- src/scss/02-tools/_m-row-fullwidth.scss | 10 +- src/scss/02-tools/_m-rtl.scss | 44 +- src/scss/02-tools/_m-scrollbar.scss | 46 +- src/scss/02-tools/_m-select-custom.scss | 90 +-- src/scss/02-tools/_m-sr-only.scss | 48 +- src/scss/02-tools/_m-style-only.scss | 6 +- src/scss/02-tools/_m-text-icon.scss | 42 +- src/scss/02-tools/_m-text.scss | 40 +- src/scss/03-base/_body.scss | 48 +- src/scss/03-base/_fonts.scss | 2 +- src/scss/03-base/_forms.scss | 168 ++-- src/scss/03-base/_links.scss | 20 +- src/scss/03-base/_media.scss | 2 +- src/scss/03-base/_normalize.scss | 268 +++--- src/scss/03-base/_print.scss | 148 ++-- src/scss/03-base/_svg-icons.scss | 10 +- src/scss/03-base/_text.scss | 10 +- src/scss/03-base/_variables-css.scss | 150 ++-- src/scss/04-utilities/_aria.scss | 12 +- src/scss/04-utilities/_container.scss | 4 +- src/scss/04-utilities/_focus.scss | 22 +- src/scss/04-utilities/_js-animation.scss | 110 +-- src/scss/04-utilities/_palette.scss | 12 +- src/scss/04-utilities/_seo.scss | 48 +- src/scss/04-utilities/_sr-only.scss | 8 +- src/scss/04-utilities/_video-wrapper.scss | 24 +- src/scss/04-utilities/_wp-admin-bar.scss | 6 +- src/scss/05-components/_btn.scss | 16 +- src/scss/05-components/_searchform.scss | 26 +- src/scss/05-components/_skip-links.scss | 58 +- src/scss/06-blocks/_gutenberg.scss | 274 +++---- src/scss/06-blocks/core/_audio.scss | 18 +- src/scss/06-blocks/core/_buttons.scss | 38 +- src/scss/06-blocks/core/_columns.scss | 68 +- src/scss/06-blocks/core/_cover.scss | 30 +- src/scss/06-blocks/core/_file.scss | 8 +- src/scss/06-blocks/core/_freeform.scss | 32 +- src/scss/06-blocks/core/_gallery.scss | 2 +- src/scss/06-blocks/core/_group.scss | 52 +- src/scss/06-blocks/core/_heading.scss | 42 +- src/scss/06-blocks/core/_html.scss | 6 +- src/scss/06-blocks/core/_image.scss | 16 +- src/scss/06-blocks/core/_list.scss | 216 ++--- src/scss/06-blocks/core/_media-text.scss | 30 +- src/scss/06-blocks/core/_paragraph.scss | 18 +- src/scss/06-blocks/core/_preformatted.scss | 14 +- src/scss/06-blocks/core/_quote.scss | 24 +- src/scss/06-blocks/core/_search.scss | 14 +- src/scss/06-blocks/core/_separator.scss | 30 +- src/scss/06-blocks/core/_table.scss | 14 +- src/scss/06-blocks/core/_video.scss | 12 +- src/scss/08-template-parts/_footer.scss | 4 +- src/scss/08-template-parts/_header.scss | 761 +++++++++--------- src/scss/08-template-parts/_hero.scss | 44 +- src/scss/login.scss | 118 +-- 87 files changed, 2269 insertions(+), 2271 deletions(-) diff --git a/.stylelintrc b/.stylelintrc index 8f227234..d7d4d502 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -30,7 +30,7 @@ "scss/at-if-closing-brace-space-after": null, "no-invalid-position-at-import-rule": null, "custom-property-pattern": null, - "indentation": 4, + "indentation": "tab", "number-leading-zero": "never", "string-quotes": "double", "length-zero-no-unit": [ @@ -43,4 +43,4 @@ } } ] -} \ No newline at end of file +} diff --git a/src/scss/01-abstract/_variables.scss b/src/scss/01-abstract/_variables.scss index 5a98947b..37e80443 100644 --- a/src/scss/01-abstract/_variables.scss +++ b/src/scss/01-abstract/_variables.scss @@ -46,22 +46,22 @@ $color-text: $color-grey-900; // Gutenberg palette // ---- $palette: ( - "primary": ( - "color": $color-primary, - "isColorLight": true, - ), - "secondary": ( - "color": $color-secondary, - "isColorLight": false, - ), - "dark": ( - "color": $color-dark, - "isColorLight": false, - ), - "light": ( - "color": $color-light, - "isColorLight": true, - ), + "primary": ( + "color": $color-primary, + "isColorLight": true, + ), + "secondary": ( + "color": $color-secondary, + "isColorLight": false, + ), + "dark": ( + "color": $color-dark, + "isColorLight": false, + ), + "light": ( + "color": $color-light, + "isColorLight": true, + ), ); /** @@ -93,24 +93,24 @@ $palette: ( * ); */ $column-preset: ( - // preset for desktop - d : ( - column-width: 60, - gutter-width: 40, - total-column: 12 - ), - // preset for tablet - t : ( - column-width: 60, - gutter-width: 34, - total-column: 8 - ), - // preset for mobile - m : ( - column-width: 58, - gutter-width: 31, - total-column: 4 - ) + // preset for desktop + d : ( + column-width: 60, + gutter-width: 40, + total-column: 12 + ), + // preset for tablet + t : ( + column-width: 60, + gutter-width: 34, + total-column: 8 + ), + // preset for mobile + m : ( + column-width: 58, + gutter-width: 31, + total-column: 4 + ) ); // ---- @@ -118,10 +118,10 @@ $column-preset: ( // ---- $container-default-column-length: 8; $container-default: ( - map.get(map.get($column-preset, d), column-width) * $container-default-column-length + map.get(map.get($column-preset, d), gutter-width) * ($container-default-column-length - 1) + map.get(map.get($column-preset, d), column-width) * $container-default-column-length + map.get(map.get($column-preset, d), gutter-width) * ($container-default-column-length - 1) ) * 1px; $container-wide: ( - map.get(map.get($column-preset, d), column-width) * map.get(map.get($column-preset, d), total-column) + map.get(map.get($column-preset, d), gutter-width) * (map.get(map.get($column-preset, d), total-column) - 1) + map.get(map.get($column-preset, d), column-width) * map.get(map.get($column-preset, d), total-column) + map.get(map.get($column-preset, d), gutter-width) * (map.get(map.get($column-preset, d), total-column) - 1) ) * 1px; $external-gutter: 50px; $external-gutter-mobile: 20px; @@ -131,16 +131,16 @@ $external-gutter-mobile: 20px; // Based on WordPress breakpoints (https://github.com/WordPress/gutenberg/blob/trunk/packages/base-styles/_breakpoints.scss) // ---- $breakpoints: ( - xs: 480, - s: 601, // 601px is a wordpress breakpoint (admin-bar become sticky) - sm: 782, - admin-bar: 784, // admin bar height change - m: 960, - md: 1080, - mdl: 1279, // Do not use 1280px, it causes a bug under Window Edge with a device pixel ratio higher than 1 - l: 1440, - container-default: math.div($container-default + $external-gutter-mobile * 2, 1px), - container-wide: math.div($container-wide + $external-gutter * 2, 1px), + xs: 480, + s: 601, // 601px is a wordpress breakpoint (admin-bar become sticky) + sm: 782, + admin-bar: 784, // admin bar height change + m: 960, + md: 1080, + mdl: 1279, // Do not use 1280px, it causes a bug under Window Edge with a device pixel ratio higher than 1 + l: 1440, + container-default: math.div($container-default + $external-gutter-mobile * 2, 1px), + container-wide: math.div($container-wide + $external-gutter * 2, 1px), ); // ---- diff --git a/src/scss/02-tools/_f-assign-inputs.scss b/src/scss/02-tools/_f-assign-inputs.scss index dd7c4fcd..5deee2e2 100644 --- a/src/scss/02-tools/_f-assign-inputs.scss +++ b/src/scss/02-tools/_f-assign-inputs.scss @@ -27,13 +27,13 @@ */ @function assign-inputs($inputs, $pseudo: null) { - $list: (); + $list: (); - @each $input in $inputs { - $input: string.unquote($input); - $input: if($pseudo, $input + ":" + $pseudo, $input); - $list: list.append($list, $input, comma); - } + @each $input in $inputs { + $input: string.unquote($input); + $input: if($pseudo, $input + ":" + $pseudo, $input); + $list: list.append($list, $input, comma); + } - @return $list; + @return $list; } diff --git a/src/scss/02-tools/_f-column.scss b/src/scss/02-tools/_f-column.scss index f5c42cea..2e2085d6 100644 --- a/src/scss/02-tools/_f-column.scss +++ b/src/scss/02-tools/_f-column.scss @@ -56,13 +56,13 @@ @function column-set-var($var, $device, $prop) { - @if not $var { + @if not $var { - @return map.get(map.get($column-preset, $device), $prop); - } @else { + @return map.get(map.get($column-preset, $device), $prop); + } @else { - @return $var; - } + @return $var; + } } // ---- @@ -70,29 +70,29 @@ // ---- @function column($device, $nb-column: null, $nb-gutter: null, $total-column: null, $total-gutter: null) { - // shift vars if $device is number - @if meta.type-of($device) == "number" { - $total-gutter: $total-column; - $total-column: $nb-gutter; - $nb-gutter: $nb-column; - $nb-column: $device; - $device: d; - } - - $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); - - @if not $nb-gutter { - $nb-gutter: $nb-column - 1; - } - - @if not $total-gutter { - $total-gutter: $total-column - 1; - } - - @return math.div($nb-column * $column-width + $nb-gutter * $gutter-width, $total-column * $column-width + $total-gutter * $gutter-width) * 100%; + // shift vars if $device is number + @if meta.type-of($device) == "number" { + $total-gutter: $total-column; + $total-column: $nb-gutter; + $nb-gutter: $nb-column; + $nb-column: $device; + $device: d; + } + + $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); + + @if not $nb-gutter { + $nb-gutter: $nb-column - 1; + } + + @if not $total-gutter { + $total-gutter: $total-column - 1; + } + + @return math.div($nb-column * $column-width + $nb-gutter * $gutter-width, $total-column * $column-width + $total-gutter * $gutter-width) * 100%; } // ---- @@ -100,26 +100,26 @@ // ---- @function column-px($device, $nb-column: null, $nb-gutter: null, $unitless: false) { - // shift vars if $device is number - @if meta.type-of($device) == "number" { - $nb-gutter: $nb-column; - $nb-column: $device; - $device: d; - } - - $preset: map.get($column-preset, $device); - $gutter-width: map.get($preset, gutter-width); - $column-width: map.get($preset, column-width); - - @if not $nb-gutter { - $nb-gutter: $nb-column - 1; - } - - @if $unitless == true { - @return $nb-column * $column-width + $nb-gutter * $gutter-width; - } - - @return #{$nb-column * $column-width + $nb-gutter * $gutter-width}px; + // shift vars if $device is number + @if meta.type-of($device) == "number" { + $nb-gutter: $nb-column; + $nb-column: $device; + $device: d; + } + + $preset: map.get($column-preset, $device); + $gutter-width: map.get($preset, gutter-width); + $column-width: map.get($preset, column-width); + + @if not $nb-gutter { + $nb-gutter: $nb-column - 1; + } + + @if $unitless == true { + @return $nb-column * $column-width + $nb-gutter * $gutter-width; + } + + @return #{$nb-column * $column-width + $nb-gutter * $gutter-width}px; } // ---- @@ -127,19 +127,19 @@ // ---- @function column-full($device, $nb-column: null, $nb-gutter: null) { - // shift vars if $device is number - @if meta.type-of($device) == "number" { - $nb-gutter: $nb-column; - $nb-column: $device; - $device: d; - } + // shift vars if $device is number + @if meta.type-of($device) == "number" { + $nb-gutter: $nb-column; + $nb-column: $device; + $device: d; + } - $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); + $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); - $width: column-px($device, $nb-column, $nb-gutter, true); + $width: column-px($device, $nb-column, $nb-gutter, true); - @return calc((100% - calc(var(--responsive--gutter) * 2)) * #{math.div($width, ($gutter-width * ($total-column - 1) + $column-width * $total-column))}); + @return calc((100% - calc(var(--responsive--gutter) * 2)) * #{math.div($width, ($gutter-width * ($total-column - 1) + $column-width * $total-column))}); } diff --git a/src/scss/02-tools/_f-context-align.scss b/src/scss/02-tools/_f-context-align.scss index ecda8724..aafbb44c 100644 --- a/src/scss/02-tools/_f-context-align.scss +++ b/src/scss/02-tools/_f-context-align.scss @@ -28,17 +28,17 @@ $function-context-align-last-value: ""; @function context-align($value: null, $suffix: " > ") { - @if not $value { - @if ($entry-file-name == "style") { - @return ".align" + $function-context-align-last-value; - } - } @else { - $function-context-align-last-value: $value !global; + @if not $value { + @if ($entry-file-name == "style") { + @return ".align" + $function-context-align-last-value; + } + } @else { + $function-context-align-last-value: $value !global; - @if ($entry-file-name == "editor") { - @return "[data-align=\"" + $value + "\"]" + $suffix; - } - } + @if ($entry-file-name == "editor") { + @return "[data-align=\"" + $value + "\"]" + $suffix; + } + } - @return ""; + @return ""; } diff --git a/src/scss/02-tools/_f-context-selector.scss b/src/scss/02-tools/_f-context-selector.scss index 361ffc5d..c95acf1d 100644 --- a/src/scss/02-tools/_f-context-selector.scss +++ b/src/scss/02-tools/_f-context-selector.scss @@ -53,26 +53,26 @@ */ @function context-selector($default: null, $editor: null, $selector: null) { - $full-selector: ""; - $parent: ""; + $full-selector: ""; + $parent: ""; - @if ($entry-file-name == "editor" and $editor) { - $parent: $editor; - } @else if ($entry-file-name == "style" and $default) { - $parent: $default; - } @else { - @return $selector; - } + @if ($entry-file-name == "editor" and $editor) { + $parent: $editor; + } @else if ($entry-file-name == "style" and $default) { + $parent: $default; + } @else { + @return $selector; + } - @if (meta.type-of($selector) == "string") { - $full-selector: $parent + " " + $selector; - } @else if (meta.type-of($selector) == "list") { - @each $s in $selector { - $full-selector: $full-selector + $parent + " " + $s; - } - } @else { - $full-selector: $parent; - } + @if (meta.type-of($selector) == "string") { + $full-selector: $parent + " " + $selector; + } @else if (meta.type-of($selector) == "list") { + @each $s in $selector { + $full-selector: $full-selector + $parent + " " + $s; + } + } @else { + $full-selector: $parent; + } - @return $full-selector; + @return $full-selector; } diff --git a/src/scss/02-tools/_f-easings.scss b/src/scss/02-tools/_f-easings.scss index 660f6248..fa149e04 100644 --- a/src/scss/02-tools/_f-easings.scss +++ b/src/scss/02-tools/_f-easings.scss @@ -72,19 +72,19 @@ $easings-const-c5: math.div(2 * math.$pi, 4.5); // ========== @function ease-in-quad($x) { - @return $x * $x; + @return $x * $x; } @function ease-out-quad($x) { - @return 1 - (1 - $x) * (1 - $x); + @return 1 - (1 - $x) * (1 - $x); } @function ease-in-out-quad($x) { - @if ($x < .5) { - @return 2 * $x * $x; - } @else { - @return 1 - math.pow(-2 * $x + 2, 2) / 2; - } + @if ($x < .5) { + @return 2 * $x * $x; + } @else { + @return 1 - math.pow(-2 * $x + 2, 2) / 2; + } } // ========== @@ -92,19 +92,19 @@ $easings-const-c5: math.div(2 * math.$pi, 4.5); // ========== @function ease-in-cubic($x) { - @return $x * $x * $x; + @return $x * $x * $x; } @function ease-out-cubic($x) { - @return 1 - math.pow(1 - $x, 3); + @return 1 - math.pow(1 - $x, 3); } @function ease-in-out-cubic($x) { - @if ($x < .5) { - @return 4 * $x * $x * $x; - } @else { - @return 1 - math.pow(-2 * $x + 2, 2) / 2; - } + @if ($x < .5) { + @return 4 * $x * $x * $x; + } @else { + @return 1 - math.pow(-2 * $x + 2, 2) / 2; + } } // ========== @@ -112,19 +112,19 @@ $easings-const-c5: math.div(2 * math.$pi, 4.5); // ========== @function ease-in-quart($x) { - @return $x * $x * $x * $x; + @return $x * $x * $x * $x; } @function ease-out-quart($x) { - @return 1 - math.pow(1 - $x, 4); + @return 1 - math.pow(1 - $x, 4); } @function ease-in-out-quart($x) { - @if ($x < .5) { - @return 8 * $x * $x * $x * $x; - } @else { - @return 1 - math.pow(-2 * $x + 2, 4) / 2; - } + @if ($x < .5) { + @return 8 * $x * $x * $x * $x; + } @else { + @return 1 - math.pow(-2 * $x + 2, 4) / 2; + } } // ========== @@ -132,19 +132,19 @@ $easings-const-c5: math.div(2 * math.$pi, 4.5); // ========== @function ease-in-quint($x) { - @return $x * $x * $x * $x * $x; + @return $x * $x * $x * $x * $x; } @function ease-out-quint($x) { - @return 1 - math.pow(1 - $x, 5); + @return 1 - math.pow(1 - $x, 5); } @function ease-in-out-quint($x) { - @if ($x < .5) { - @return 16 * $x * $x * $x * $x * $x; - } @else { - @return 1 - math.div(math.pow(-2 * $x + 2, 5), 2); - } + @if ($x < .5) { + @return 16 * $x * $x * $x * $x * $x; + } @else { + @return 1 - math.div(math.pow(-2 * $x + 2, 5), 2); + } } // ========== @@ -152,15 +152,15 @@ $easings-const-c5: math.div(2 * math.$pi, 4.5); // ========== @function ease-in-sine($x) { - @return 1 - math.cos(math.div($x * math.$pi), 2); + @return 1 - math.cos(math.div($x * math.$pi), 2); } @function ease-out-sine($x) { - @return math.sin(math.div($x * math.$pi), 2); + @return math.sin(math.div($x * math.$pi), 2); } @function ease-in-out-sine($x) { - @return -math.div((math.cos(math.$pi * $x) - 1), 2); + @return -math.div((math.cos(math.$pi * $x) - 1), 2); } // ========== @@ -168,31 +168,31 @@ $easings-const-c5: math.div(2 * math.$pi, 4.5); // ========== @function ease-in-expo($x) { - @if ($x == 0) { - @return 0; - } @else { - @return math.pow(2, 10 * $x - 10); - } + @if ($x == 0) { + @return 0; + } @else { + @return math.pow(2, 10 * $x - 10); + } } @function ease-out-expo($x) { - @if ($x == 1) { - @return 1; - } @else { - @return 1 - math.pow(2, -10 * $x); - } + @if ($x == 1) { + @return 1; + } @else { + @return 1 - math.pow(2, -10 * $x); + } } @function ease-in-out-expo($x) { - @if ($x == 0) { - @return 0; - } @else if ($x == 1) { - @return 1; - } @else if ($x < .5) { - @return math.pow(2, 20 * $x - 10) / 2; - } @else { - @return (2 - math.pow(2, -20 * $x + 10)) / 2; - } + @if ($x == 0) { + @return 0; + } @else if ($x == 1) { + @return 1; + } @else if ($x < .5) { + @return math.pow(2, 20 * $x - 10) / 2; + } @else { + @return (2 - math.pow(2, -20 * $x + 10)) / 2; + } } // ========== @@ -200,19 +200,19 @@ $easings-const-c5: math.div(2 * math.$pi, 4.5); // ========== @function ease-in-circ($x) { - @return 1 - math.sqrt(1 - math.pow($x, 2)); + @return 1 - math.sqrt(1 - math.pow($x, 2)); } @function ease-out-circ($x) { - @return math.sqrt(1 - math.pow($x - 1, 2)); + @return math.sqrt(1 - math.pow($x - 1, 2)); } @function ease-in-out-circ($x) { - @if ($x < .5) { - @return (1 - math.sqrt(1 - math.pow(2 * $x, 2))) / 2; - } @else { - @return (math.sqrt(1 - math.pow(-2 * $x + 2, 2)) + 1) / 2; - } + @if ($x < .5) { + @return (1 - math.sqrt(1 - math.pow(2 * $x, 2))) / 2; + } @else { + @return (math.sqrt(1 - math.pow(-2 * $x + 2, 2)) + 1) / 2; + } } // ========== @@ -220,19 +220,19 @@ $easings-const-c5: math.div(2 * math.$pi, 4.5); // ========== @function ease-in-back($x) { - @return $easings-const-c3 * $x * $x * $x - $easings-const-c1 * $x * $x; + @return $easings-const-c3 * $x * $x * $x - $easings-const-c1 * $x * $x; } @function ease-out-back($x) { - @return 1 + $easings-const-c3 * math.pow($x - 1, 3) + $easings-const-c1 * math.pow($x - 1, 2); + @return 1 + $easings-const-c3 * math.pow($x - 1, 3) + $easings-const-c1 * math.pow($x - 1, 2); } @function ease-in-out-back($x) { - @if ($x < .5) { - @return (math.pow(2 * $x, 2) * (($easings-const-c2 + 1) * 2 * $x - $easings-const-c2)) / 2; - } @else { - @return (math.pow(2 * $x - 2, 2) * (($easings-const-c2 + 1) * ($x * 2 - 2) + $easings-const-c2) + 2) / 2; - } + @if ($x < .5) { + @return (math.pow(2 * $x, 2) * (($easings-const-c2 + 1) * 2 * $x - $easings-const-c2)) / 2; + } @else { + @return (math.pow(2 * $x - 2, 2) * (($easings-const-c2 + 1) * ($x * 2 - 2) + $easings-const-c2) + 2) / 2; + } } // ========== @@ -240,35 +240,35 @@ $easings-const-c5: math.div(2 * math.$pi, 4.5); // ========== @function ease-in-elastic($x) { - @if ($x == 0) { - @return 0; - } @else if ($x == 1) { - @return 1; - } @else if ($x < .5) { - @return -(math.pow(2, 10 * $x - 10)) * sin(($x * 10 - 10.75) * $easings-const-c4); - } + @if ($x == 0) { + @return 0; + } @else if ($x == 1) { + @return 1; + } @else if ($x < .5) { + @return -(math.pow(2, 10 * $x - 10)) * sin(($x * 10 - 10.75) * $easings-const-c4); + } } @function ease-out-elastic($x) { - @if ($x == 0) { - @return 0; - } @else if ($x == 1) { - @return 1; - } @else if ($x < .5) { - @return math.pow(2, -10 * $x) * math.sin(($x * 10 - .75) * $easings-const-c4) + 1; - } + @if ($x == 0) { + @return 0; + } @else if ($x == 1) { + @return 1; + } @else if ($x < .5) { + @return math.pow(2, -10 * $x) * math.sin(($x * 10 - .75) * $easings-const-c4) + 1; + } } @function ease-in-out-elastic($x) { - @if ($x == 0) { - @return 0; - } @else if ($x == 1) { - @return 1; - } @else if ($x < .5) { - @return -(math.pow(2, 20 * $x - 10) * math.sin((20 * $x - 11.125) * $easings-const-c5)) / 2; - } @else { - @return (math.pow(2, -20 * $x + 10) * math.sin((20 * $x - 11.125) * $easings-const-c5)) / 2 + 1; - } + @if ($x == 0) { + @return 0; + } @else if ($x == 1) { + @return 1; + } @else if ($x < .5) { + @return -(math.pow(2, 20 * $x - 10) * math.sin((20 * $x - 11.125) * $easings-const-c5)) / 2; + } @else { + @return (math.pow(2, -20 * $x + 10) * math.sin((20 * $x - 11.125) * $easings-const-c5)) / 2 + 1; + } } // ========== @@ -276,31 +276,31 @@ $easings-const-c5: math.div(2 * math.$pi, 4.5); // ========== @function ease-in-bounce($x) { - @return 1 - ease-out-bounce(1 - $x); + @return 1 - ease-out-bounce(1 - $x); } @function ease-out-bounce($x) { - $n1: 7.5625; - $d1: 2.75; - - @if ($x < 1 / $d1) { - @return $n1 * $x * $x; - } @else if ($x < 2 / $d1) { - $x: $x - 1.5 / $d1; - @return $n1 * $x * $x + .75; - } @else if ($x < 2.5 / $d1) { - $x: $x - 2.25 / $d1; - @return $n1 * $x * $x + .9375; - } @else { - $x: $x - 2.625 / $d1; - @return $n1 * $x * $x + .984375; - } + $n1: 7.5625; + $d1: 2.75; + + @if ($x < 1 / $d1) { + @return $n1 * $x * $x; + } @else if ($x < 2 / $d1) { + $x: $x - 1.5 / $d1; + @return $n1 * $x * $x + .75; + } @else if ($x < 2.5 / $d1) { + $x: $x - 2.25 / $d1; + @return $n1 * $x * $x + .9375; + } @else { + $x: $x - 2.625 / $d1; + @return $n1 * $x * $x + .984375; + } } @function ease-in-out-bounce($x) { - @if ($x < .5) { - @return (1 - ease-out-bounce(1 - 2 * $x)) / 2; - } @else { - @return (1 + ease-out-bounce(2 * $x - 1)) / 2; - } + @if ($x < .5) { + @return (1 - ease-out-bounce(1 - 2 * $x)) / 2; + } @else { + @return (1 + ease-out-bounce(2 * $x - 1)) / 2; + } } diff --git a/src/scss/02-tools/_f-em.scss b/src/scss/02-tools/_f-em.scss index 1c5f5f3c..f07ae5cf 100644 --- a/src/scss/02-tools/_f-em.scss +++ b/src/scss/02-tools/_f-em.scss @@ -25,13 +25,13 @@ @function em($pxval, $base: $font-size-base) { - @if not math.is-unitless($pxval) { - $pxval: strip-units($pxval); - } + @if not math.is-unitless($pxval) { + $pxval: strip-units($pxval); + } - @if not math.is-unitless($base) { - $base: strip-units($base); - } + @if not math.is-unitless($base) { + $base: strip-units($base); + } - @return math.div($pxval, $base) * 1em; + @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 f97acf8e..64357f61 100644 --- a/src/scss/02-tools/_f-fluid-size.scss +++ b/src/scss/02-tools/_f-fluid-size.scss @@ -28,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($breakpoints, $start), 100); + $end: math.div(map.get($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} * #{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 98580b19..4a1bc13b 100644 --- a/src/scss/02-tools/_f-get-gutter-width.scss +++ b/src/scss/02-tools/_f-get-gutter-width.scss @@ -25,9 +25,9 @@ */ @function get-gutter($preset: d) { - @return map.get(map.get($column-preset, $preset), gutter-width); + @return map.get(map.get($column-preset, $preset), gutter-width); } @function get-gutter-width($preset: d) { - @return get-gutter($preset) * 1px; + @return get-gutter($preset) * 1px; } diff --git a/src/scss/02-tools/_f-get-svg-url.scss b/src/scss/02-tools/_f-get-svg-url.scss index e0456fa5..b04a8810 100644 --- a/src/scss/02-tools/_f-get-svg-url.scss +++ b/src/scss/02-tools/_f-get-svg-url.scss @@ -35,25 +35,25 @@ @function get-svg-url($name: null, $fill: $color-dark, $opacity: 1, $style: "") { - $svgs: ( - // name-of-the-svg: (viewBox, content of the svg element) - "arrow": ("0 0 18 14", "%3Cpath d='M17.25 7 10.37.12l-.96.97 5.2 5.22H.76V7.7h13.87L9.4 12.9l.96.96L17.25 7Z'/%3E"), - "down": ("0 0 11.2 6.7", "3Cpath d='M0 .5C0 .4.1.2.2.1c.2-.2.5-.1.7.1l4.6 5.3.1.1s.1 0 .1-.1L10.3.1c.2-.1.5-.2.7 0 .2.2.2.5.1.7L6.5 6.2c-.2.3-.5.5-.9.5s-.7-.2-.9-.6L.1.8C0 .7 0 .6 0 .5z'/%3E"), - "external": ("0 0 20 20", "3Cpath d='M3.1 19.6A3.1 3.1 0 0 1 0 16.4V3.1A3.2 3.2 0 0 1 3.1 0H4c.4 0 .7.3.7.7 0 .4-.3.8-.7.8H3c-.9 0-1.6.7-1.6 1.6v13.3c0 1 .7 1.7 1.6 1.7h13.2c.9 0 1.6-.8 1.6-1.7v-.8c0-.4.4-.7.8-.7s.7.3.7.7v.8c0 1.7-1.4 3.2-3.1 3.2H3ZM18.7 0c.4 0 .7.3.7.7v10c0 .4-.4.7-.8.7s-.7-.3-.7-.8V2.5l-9.7 9.8c-.3.2-.8.3-1 0a.7.7 0 0 1 0-1l9.7-9.8H8.8c-.5 0-.8-.3-.8-.7 0-.4.3-.8.8-.8h9.9Z'/%3E"), - "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"), - ); + $svgs: ( + // name-of-the-svg: (viewBox, content of the svg element) + "arrow": ("0 0 18 14", "%3Cpath d='M17.25 7 10.37.12l-.96.97 5.2 5.22H.76V7.7h13.87L9.4 12.9l.96.96L17.25 7Z'/%3E"), + "down": ("0 0 11.2 6.7", "3Cpath d='M0 .5C0 .4.1.2.2.1c.2-.2.5-.1.7.1l4.6 5.3.1.1s.1 0 .1-.1L10.3.1c.2-.1.5-.2.7 0 .2.2.2.5.1.7L6.5 6.2c-.2.3-.5.5-.9.5s-.7-.2-.9-.6L.1.8C0 .7 0 .6 0 .5z'/%3E"), + "external": ("0 0 20 20", "3Cpath d='M3.1 19.6A3.1 3.1 0 0 1 0 16.4V3.1A3.2 3.2 0 0 1 3.1 0H4c.4 0 .7.3.7.7 0 .4-.3.8-.7.8H3c-.9 0-1.6.7-1.6 1.6v13.3c0 1 .7 1.7 1.6 1.7h13.2c.9 0 1.6-.8 1.6-1.7v-.8c0-.4.4-.7.8-.7s.7.3.7.7v.8c0 1.7-1.4 3.2-3.1 3.2H3ZM18.7 0c.4 0 .7.3.7.7v10c0 .4-.4.7-.8.7s-.7-.3-.7-.8V2.5l-9.7 9.8c-.3.2-.8.3-1 0a.7.7 0 0 1 0-1l9.7-9.8H8.8c-.5 0-.8-.3-.8-.7 0-.4.3-.8.8-.8h9.9Z'/%3E"), + "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) { - @return ""; - } + @if not map.has-key($svgs, $name) { + @return ""; + } - @if ($style != "") { - $style: " style='" + $style + "'"; - } + @if ($style != "") { + $style: " style='" + $style + "'"; + } - @if ($fill != "") { - $fill: " fill='rgba(#{color.channel($fill, 'red'), color.channel($fill, 'green'), color.channel($fill, 'blue'), $opacity})'"; - } + @if ($fill != "") { + $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='" + list.nth(map.get($svgs, $name), 1) + "'%3E%" + list.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/_f-strip-units.scss b/src/scss/02-tools/_f-strip-units.scss index 44269473..e4cff317 100644 --- a/src/scss/02-tools/_f-strip-units.scss +++ b/src/scss/02-tools/_f-strip-units.scss @@ -17,5 +17,5 @@ @function strip-units($value) { - @return math.div($value, ($value * 0 + 1)); + @return math.div($value, ($value * 0 + 1)); } diff --git a/src/scss/02-tools/_f-to-number.scss b/src/scss/02-tools/_f-to-number.scss index 22828520..a655fc56 100644 --- a/src/scss/02-tools/_f-to-number.scss +++ b/src/scss/02-tools/_f-to-number.scss @@ -20,31 +20,31 @@ */ @function to-number($value) { - @if type-of($value) == "number" { - @return $value; - } @else if type-of($value) != "string" { - @error "Value for `to-number` should be a number or a string."; - } + @if type-of($value) == "number" { + @return $value; + } @else if type-of($value) != "string" { + @error "Value for `to-number` should be a number or a string."; + } - $result: 0; - $digits: 0; - $minus: string.slice($value, 1, 1) == "-"; - $numbers: ("0": 0, "1": 1, "2": 2, "3": 3, "4": 4, "5": 5, "6": 6, "7": 7, "8": 8, "9": 9); + $result: 0; + $digits: 0; + $minus: string.slice($value, 1, 1) == "-"; + $numbers: ("0": 0, "1": 1, "2": 2, "3": 3, "4": 4, "5": 5, "6": 6, "7": 7, "8": 8, "9": 9); - @for $i from if($minus, 2, 1) through str-length($value) { - $character: string.slice($value, $i, $i); + @for $i from if($minus, 2, 1) through str-length($value) { + $character: string.slice($value, $i, $i); - @if (index(map-keys($numbers), $character) or $character == ".") { - @if $character == "." { - $digits: 1; - } @else if $digits == 0 { - $result: $result * 10 + map.get($numbers, $character); - } @else { - $digits: $digits * 10; - $result: $result + math.div(map.get($numbers, $character), $digits); - } - } - } + @if (index(map-keys($numbers), $character) or $character == ".") { + @if $character == "." { + $digits: 1; + } @else if $digits == 0 { + $result: $result * 10 + map.get($numbers, $character); + } @else { + $digits: $digits * 10; + $result: $result + math.div(map.get($numbers, $character), $digits); + } + } + } - @return if($minus, -$result, $result); + @return if($minus, -$result, $result); } diff --git a/src/scss/02-tools/_m-align.scss b/src/scss/02-tools/_m-align.scss index b4932ea5..a43c4536 100644 --- a/src/scss/02-tools/_m-align.scss +++ b/src/scss/02-tools/_m-align.scss @@ -18,11 +18,11 @@ */ @mixin align($direction: left) { - float: $direction; + float: $direction; - @if ($direction == left) { - margin-inline-end: var(--spacing--block-1); - } @else { - margin-inline-start: var(--spacing--block-1); - } + @if ($direction == left) { + margin-inline-end: var(--spacing--block-1); + } @else { + margin-inline-start: var(--spacing--block-1); + } } diff --git a/src/scss/02-tools/_m-autofill.scss b/src/scss/02-tools/_m-autofill.scss index a35f3fd1..ac056816 100644 --- a/src/scss/02-tools/_m-autofill.scss +++ b/src/scss/02-tools/_m-autofill.scss @@ -14,9 +14,9 @@ */ @mixin autofill { - &:-webkit-autofill, - &:-webkit-autofill:hover, - &:-webkit-autofill:focus { - @content; - } + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus { + @content; + } } diff --git a/src/scss/02-tools/_m-background-static.scss b/src/scss/02-tools/_m-background-static.scss index 4eb3de8f..0da1447e 100644 --- a/src/scss/02-tools/_m-background-static.scss +++ b/src/scss/02-tools/_m-background-static.scss @@ -14,14 +14,14 @@ */ @mixin background-static($filename, $retina: true, $position: center center, $size: auto 100%, $type: "png" ) { - background-image: url(../img/static/#{$filename}.#{$type}); - background-repeat: no-repeat; - background-position: $position; - background-size: $size; + background-image: url(../img/static/#{$filename}.#{$type}); + background-repeat: no-repeat; + background-position: $position; + background-size: $size; - @if ($retina) { - @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { - background-image: url(../img/static/#{$filename}@2x.#{$type}); - } - } + @if ($retina) { + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + background-image: url(../img/static/#{$filename}@2x.#{$type}); + } + } } diff --git a/src/scss/02-tools/_m-bg-fullwidth.scss b/src/scss/02-tools/_m-bg-fullwidth.scss index dd0ae202..fdbf6568 100644 --- a/src/scss/02-tools/_m-bg-fullwidth.scss +++ b/src/scss/02-tools/_m-bg-fullwidth.scss @@ -17,21 +17,21 @@ */ @mixin bg-fullwidth($color: $color-grey-100) { - position: relative; + position: relative; - &::before { - position: absolute; - top: 0; - left: 50%; - width: 100vw; - height: 100%; - pointer-events: none; - content: ""; - background-color: $color; - transform: translate3d(-50%, 0, 0); + &::before { + position: absolute; + top: 0; + left: 50%; + width: 100vw; + height: 100%; + pointer-events: none; + content: ""; + background-color: $color; + transform: translate3d(-50%, 0, 0); - @include style-only { - z-index: -1; - } - } + @include 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 fee401cc..13d440ce 100644 --- a/src/scss/02-tools/_m-block-vertical-spacing.scss +++ b/src/scss/02-tools/_m-block-vertical-spacing.scss @@ -24,13 +24,13 @@ * */ @mixin block-vertical-spacing($type : margin, $spacing : var(--spacing--block-3)) { - #{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; + #{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; - @if $type == padding { - margin-top: 0; - margin-bottom: 0; - } - } + @if $type == padding { + margin-top: 0; + margin-bottom: 0; + } + } } diff --git a/src/scss/02-tools/_m-breakpoint.scss b/src/scss/02-tools/_m-breakpoint.scss index b1644d23..d487510d 100644 --- a/src/scss/02-tools/_m-breakpoint.scss +++ b/src/scss/02-tools/_m-breakpoint.scss @@ -26,22 +26,22 @@ */ @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 + $font-size: 16px; // don't use em function whitout param, $font-size-base can be modified - @if (meta.type-of(map.get($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: 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 (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: em(map.get($breakpoints, $breakpoint) - 1, $font-size)) { - @content; - } - } @else { + @media screen and (max-width: em(map.get($breakpoints, $breakpoint) - 1, $font-size)) { + @content; + } + } @else { - @media screen and (min-width: em(map.get($breakpoints, $breakpoint), $font-size)) { - @content; - } - } + @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 934d4114..b120d59e 100644 --- a/src/scss/02-tools/_m-btn.scss +++ b/src/scss/02-tools/_m-btn.scss @@ -9,15 +9,15 @@ */ @mixin btn { - display: inline; - padding: 0; - font-family: inherit; - color: inherit; - vertical-align: middle; - cursor: pointer; - background-color: transparent; - border: none; - appearance: none; + display: inline; + padding: 0; + font-family: inherit; + color: inherit; + vertical-align: middle; + cursor: pointer; + background-color: transparent; + border: none; + appearance: none; } // ---- @@ -25,56 +25,56 @@ // ---- @mixin btn-block { - position: relative; - z-index: 1; - display: inline-block; - min-width: 90px; - padding: 15px 25px; - overflow: hidden; - font-size: 12px; - font-weight: 700; - line-height: 16px; - color: $color-dark; - text-align: center; - background-color: $color-primary; - border-radius: 10px; + position: relative; + z-index: 1; + display: inline-block; + min-width: 90px; + padding: 15px 25px; + overflow: hidden; + font-size: 12px; + font-weight: 700; + line-height: 16px; + color: $color-dark; + text-align: center; + background-color: $color-primary; + border-radius: 10px; - @include hover { - @include btn-block-hover; - } + @include hover { + @include btn-block-hover; + } } // hover of the button block @mixin btn-block-hover { - color: $color-primary; - background-color: $color-dark; + color: $color-primary; + background-color: $color-dark; } // Coloring @mixin btn-block-colored($background-color, $color) { - color: $color; - background-color: $background-color; + color: $color; + background-color: $background-color; - @include hover { - color: $background-color; - background-color: $color; - } + @include hover { + color: $background-color; + background-color: $color; + } } // Outline style @mixin btn-block-outline { - padding: 13px 23px; - background-color: transparent; - border: 2px solid currentColor; // Force button width VS Gutenberg CSS + padding: 13px 23px; + background-color: transparent; + border: 2px solid currentColor; // Force button width VS Gutenberg CSS - @include hover { - @include btn-block-outline-hover; - } + @include hover { + @include btn-block-outline-hover; + } } @mixin btn-block-outline-hover { - background-color: transparent; + background-color: transparent; } diff --git a/src/scss/02-tools/_m-checkbox-custom.scss b/src/scss/02-tools/_m-checkbox-custom.scss index 45d8d890..63a99ed0 100644 --- a/src/scss/02-tools/_m-checkbox-custom.scss +++ b/src/scss/02-tools/_m-checkbox-custom.scss @@ -26,58 +26,58 @@ */ @mixin checkbox-custom($color: $color-primary, $size: 18px, $border-width: 1px) { - @include sr-only; + @include sr-only; - + label { - position: relative; - display: block; - padding-inline-start: $size + 20; - cursor: pointer; + + label { + position: relative; + display: block; + padding-inline-start: $size + 20; + cursor: pointer; - &::before { - position: absolute; - top: 1px; - left: 0; - width: $size; - height: $size; - margin: 0; - content: ""; - background-color: $color-light; - border: $border-width solid $color; + &::before { + position: absolute; + top: 1px; + left: 0; + width: $size; + height: $size; + margin: 0; + content: ""; + background-color: $color-light; + border: $border-width solid $color; - @include rtl { - right: 0; - left: auto; - } - } + @include rtl { + right: 0; + left: auto; + } + } - &::after { - position: absolute; - top: 7px; - left: math.round(math.div($size, 2)); - width: math.round(math.div($size, 1.5)); - height: math.round(math.div($size, 2.5)); - content: ""; - border-color: $color; - border-style: solid; - border-width: 0 0 2px 2px; - opacity: 0; - transition: opacity .2s; - transform: translate(-50%, -50%) rotate(-45deg); + &::after { + position: absolute; + top: 7px; + left: math.round(math.div($size, 2)); + width: math.round(math.div($size, 1.5)); + height: math.round(math.div($size, 2.5)); + content: ""; + border-color: $color; + border-style: solid; + border-width: 0 0 2px 2px; + opacity: 0; + transition: opacity .2s; + transform: translate(-50%, -50%) rotate(-45deg); - @include rtl { - right: math.round(math.div($size, 2)); - left: auto; - transform: translate(50%, -50%) rotate(-45deg); - } - } - } + @include rtl { + right: math.round(math.div($size, 2)); + left: auto; + transform: translate(50%, -50%) rotate(-45deg); + } + } + } } @mixin checkbox-custom-checked { - + label { - &::after { - opacity: 1; - } - } + + label { + &::after { + opacity: 1; + } + } } diff --git a/src/scss/02-tools/_m-container-query.scss b/src/scss/02-tools/_m-container-query.scss index e2a4b1f7..f369b447 100644 --- a/src/scss/02-tools/_m-container-query.scss +++ b/src/scss/02-tools/_m-container-query.scss @@ -27,25 +27,25 @@ */ @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 + $font-size: 16px; // don't use em function whitout param, $font-size-base can be modified - @if (meta.type-of(map.get($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: #{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: #{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) { + @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: #{em(map.get($breakpoints, $breakpoint) - 1, $font-size)}) { - @content; - } - } @else { + @content; + } + } @else { - @container #{$container-name} (min-width: #{em(map.get($breakpoints, $breakpoint), $font-size)}) { + @container #{$container-name} (min-width: #{em(map.get($breakpoints, $breakpoint), $font-size)}) { - @content; - } - } + @content; + } + } } diff --git a/src/scss/02-tools/_m-container.scss b/src/scss/02-tools/_m-container.scss index e3eef693..bdd855d9 100644 --- a/src/scss/02-tools/_m-container.scss +++ b/src/scss/02-tools/_m-container.scss @@ -16,6 +16,6 @@ */ @mixin container($size: $container-wide) { - width: min(#{$size}, 100% - calc(var(--responsive--gutter) * 2)); - margin-inline: auto; + width: min(#{$size}, 100% - calc(var(--responsive--gutter) * 2)); + margin-inline: auto; } diff --git a/src/scss/02-tools/_m-declare-font-face.scss b/src/scss/02-tools/_m-declare-font-face.scss index 5b0434e1..487833e3 100644 --- a/src/scss/02-tools/_m-declare-font-face.scss +++ b/src/scss/02-tools/_m-declare-font-face.scss @@ -25,14 +25,13 @@ */ @mixin declare-font-face($font-family, $font-filename, $font-weight : normal, $font-style : normal, $font-stretch : normal, $font-format : "woff2") { - - @font-face { - font-family: "#{$font-family}"; - font-style: $font-style; - font-weight: $font-weight; - font-stretch: $font-stretch; - src: url(#{$font-filename}.woff2) format("#{$font-format}"); - font-display: swap; - unicode-range: U+0-10FFFF; /* cutting of the font file for better loading */ - } + @font-face { + font-family: "#{$font-family}"; + font-style: $font-style; + font-weight: $font-weight; + font-stretch: $font-stretch; + src: url(#{$font-filename}.woff2) format("#{$font-format}"); + font-display: swap; + unicode-range: U+0-10FFFF; /* cutting of the font file for better loading */ + } } diff --git a/src/scss/02-tools/_m-editor-only.scss b/src/scss/02-tools/_m-editor-only.scss index 1348832e..ec4af571 100644 --- a/src/scss/02-tools/_m-editor-only.scss +++ b/src/scss/02-tools/_m-editor-only.scss @@ -20,7 +20,7 @@ */ @mixin editor-only { - @if ($entry-file-name == "editor") { - @content; - } + @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 e3b57137..5249155a 100644 --- a/src/scss/02-tools/_m-heading.scss +++ b/src/scss/02-tools/_m-heading.scss @@ -44,36 +44,36 @@ */ @mixin heading($name: h1, $style: default) { - font-family: $font-family-primary; - font-weight: 400; + font-family: $font-family-primary; + font-weight: 400; - @if $name == h1 { - font-size: var(--heading--font-size-h1); - line-height: var(--heading--line-height-h1); - } + @if $name == h1 { + font-size: var(--heading--font-size-h1); + line-height: var(--heading--line-height-h1); + } - @if $name == h2 { - font-size: var(--heading--font-size-h2); - line-height: var(--heading--line-height-h2); - } + @if $name == h2 { + font-size: var(--heading--font-size-h2); + line-height: var(--heading--line-height-h2); + } - @if $name == h3 { - font-size: var(--heading--font-size-h3); - line-height: var(--heading--line-height-h3); - } + @if $name == h3 { + font-size: var(--heading--font-size-h3); + line-height: var(--heading--line-height-h3); + } - @if $name == h4 { - font-size: var(--heading--font-size-h4); - line-height: var(--heading--line-height-h4); - } + @if $name == h4 { + font-size: var(--heading--font-size-h4); + line-height: var(--heading--line-height-h4); + } - @if $name == h5 { - font-size: var(--heading--font-size-h5); - line-height: var(--heading--line-height-h5); - } + @if $name == h5 { + font-size: var(--heading--font-size-h5); + line-height: var(--heading--line-height-h5); + } - @if $name == h6 { - font-size: var(--heading--font-size-h6); - line-height: var(--heading--line-height-h6); - } + @if $name == h6 { + font-size: var(--heading--font-size-h6); + line-height: var(--heading--line-height-h6); + } } diff --git a/src/scss/02-tools/_m-hover.scss b/src/scss/02-tools/_m-hover.scss index c3e60c79..302c3f76 100644 --- a/src/scss/02-tools/_m-hover.scss +++ b/src/scss/02-tools/_m-hover.scss @@ -42,26 +42,26 @@ * */ @mixin hover($onlyNoTouch: null, $additionalSelectors: null) { - $selectors: "&:hover", "&:active", "&:focus"; + $selectors: "&:hover", "&:active", "&:focus"; - @if ($additionalSelectors) { - @if (meta.type-of($additionalSelectors) == "string") { - $selectors: $selectors "," $additionalSelectors; - } - @else if (meta.type-of($additionalSelectors) == "list") { - $selectors: list.join($selectors, $additionalSelectors, comma); - } - } + @if ($additionalSelectors) { + @if (meta.type-of($additionalSelectors) == "string") { + $selectors: $selectors "," $additionalSelectors; + } + @else if (meta.type-of($additionalSelectors) == "list") { + $selectors: list.join($selectors, $additionalSelectors, comma); + } + } - @if $onlyNoTouch { - @media (hover: hover) { - #{$selectors} { - @content; - } - } - } @else { - #{$selectors} { - @content; - } - } + @if $onlyNoTouch { + @media (hover: hover) { + #{$selectors} { + @content; + } + } + } @else { + #{$selectors} { + @content; + } + } } diff --git a/src/scss/02-tools/_m-line-clamp.scss b/src/scss/02-tools/_m-line-clamp.scss index 1a862a35..3f32c072 100644 --- a/src/scss/02-tools/_m-line-clamp.scss +++ b/src/scss/02-tools/_m-line-clamp.scss @@ -15,8 +15,8 @@ */ @mixin line-clamp($lines: 2) { - display: -webkit-box; - overflow: hidden; - -webkit-line-clamp: #{$lines}; - -webkit-box-orient: vertical; + display: -webkit-box; + overflow: hidden; + -webkit-line-clamp: #{$lines}; + -webkit-box-orient: vertical; } diff --git a/src/scss/02-tools/_m-not-acf.scss b/src/scss/02-tools/_m-not-acf.scss index 06b51057..63221675 100644 --- a/src/scss/02-tools/_m-not-acf.scss +++ b/src/scss/02-tools/_m-not-acf.scss @@ -16,7 +16,7 @@ */ @mixin not-acf() { - #{f-context-selector.context-selector(":where(body)", ":where(*:not([class*="acf-"])) >")} { - @content; - } + #{f-context-selector.context-selector(":where(body)", ":where(*:not([class*="acf-"])) >")} { + @content; + } } diff --git a/src/scss/02-tools/_m-placeholder-media.scss b/src/scss/02-tools/_m-placeholder-media.scss index dc71bb17..c4ecd224 100644 --- a/src/scss/02-tools/_m-placeholder-media.scss +++ b/src/scss/02-tools/_m-placeholder-media.scss @@ -19,33 +19,33 @@ */ @mixin placeholder-media($width, $height, $targets: "img", $object-fit: "") { - position: relative; + position: relative; - &::before { - @include placeholder-media-size($width, $height); + &::before { + @include placeholder-media-size($width, $height); - display: block; - content: ""; - } + display: block; + content: ""; + } - #{$targets} { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } + #{$targets} { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } - @if ($object-fit != "") { - img { - display: block; - width: 100%; - height: 100%; - object-fit: $object-fit; - } - } + @if ($object-fit != "") { + img { + display: block; + width: 100%; + height: 100%; + object-fit: $object-fit; + } + } } @mixin placeholder-media-size($width, $height) { - padding-bottom: math.div($height, $width) * 100%; + padding-bottom: math.div($height, $width) * 100%; } diff --git a/src/scss/02-tools/_m-radio-custom.scss b/src/scss/02-tools/_m-radio-custom.scss index 97b899d1..04680bcf 100644 --- a/src/scss/02-tools/_m-radio-custom.scss +++ b/src/scss/02-tools/_m-radio-custom.scss @@ -30,26 +30,26 @@ */ @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); - } + @if ($include-checkbox-style) { + @include m-checkbox-custom.checkbox-custom($color, $size, $border-width); + } - + label { - &::before { - border-radius: 50%; - } + + label { + &::before { + border-radius: 50%; + } - &::after { - top: #{1px + math.div($size, 2)}; - width: math.div($size, 2); - height: math.div($size, 2); - background: $color; - border: none; - border-radius: 50%; - } - } + &::after { + top: #{1px + math.div($size, 2)}; + width: math.div($size, 2); + height: math.div($size, 2); + background: $color; + border: none; + border-radius: 50%; + } + } } @mixin radio-custom-checked() { - @include m-checkbox-custom.checkbox-custom-checked; + @include m-checkbox-custom.checkbox-custom-checked; } diff --git a/src/scss/02-tools/_m-reduced-motion.scss b/src/scss/02-tools/_m-reduced-motion.scss index 05dfd5ca..d0fab796 100644 --- a/src/scss/02-tools/_m-reduced-motion.scss +++ b/src/scss/02-tools/_m-reduced-motion.scss @@ -18,13 +18,13 @@ */ @mixin reduced-motion($reduce: true) { - @if ($reduce == true) { - @media screen and (prefers-reduced-motion: reduce) { - @content; - } - } @else { - @media screen and (prefers-reduced-motion: no-preference) { - @content; - } - } + @if ($reduce == true) { + @media screen and (prefers-reduced-motion: reduce) { + @content; + } + } @else { + @media screen and (prefers-reduced-motion: no-preference) { + @content; + } + } } diff --git a/src/scss/02-tools/_m-row-fullwidth.scss b/src/scss/02-tools/_m-row-fullwidth.scss index 23fd4063..1ef84c31 100644 --- a/src/scss/02-tools/_m-row-fullwidth.scss +++ b/src/scss/02-tools/_m-row-fullwidth.scss @@ -14,9 +14,9 @@ */ @mixin row-fullwidth($position: relative) { - position: $position; - left: 50%; - z-index: 1; - width: 100vw; - margin-left: -50vw; + position: $position; + left: 50%; + z-index: 1; + width: 100vw; + margin-left: -50vw; } diff --git a/src/scss/02-tools/_m-rtl.scss b/src/scss/02-tools/_m-rtl.scss index c7b4ec4b..7b942e7b 100644 --- a/src/scss/02-tools/_m-rtl.scss +++ b/src/scss/02-tools/_m-rtl.scss @@ -14,32 +14,32 @@ */ $rtl-languages: ( - "ar", // Arabic - "fa", // Persian (Farsi) - "he", // Hebrew (modern code) - "iw", // Hebrew (legacy code) - "ur", // Urdu - "ps", // Pashto - "sd", // Sindhi - "ug", // Uyghur - "dv", // Divehi (Maldivian) - "ku", // Kurdish (Sorani) - "yi" // Yiddish + "ar", // Arabic + "fa", // Persian (Farsi) + "he", // Hebrew (modern code) + "iw", // Hebrew (legacy code) + "ur", // Urdu + "ps", // Pashto + "sd", // Sindhi + "ug", // Uyghur + "dv", // Divehi (Maldivian) + "ku", // Kurdish (Sorani) + "yi" // Yiddish ); @mixin rtl { - @each $lang in $rtl-languages { - *[dir="rtl"] &, - :root:lang(#{$lang}) & { - @content; - } - } + @each $lang in $rtl-languages { + *[dir="rtl"] &, + :root:lang(#{$lang}) & { + @content; + } + } } @mixin set-rtl-direction { - @each $lang in $rtl-languages { - &:lang(#{$lang}) { - direction: rtl; - } - } + @each $lang in $rtl-languages { + &:lang(#{$lang}) { + direction: rtl; + } + } } diff --git a/src/scss/02-tools/_m-scrollbar.scss b/src/scss/02-tools/_m-scrollbar.scss index 08fe5df7..389feeae 100644 --- a/src/scss/02-tools/_m-scrollbar.scss +++ b/src/scss/02-tools/_m-scrollbar.scss @@ -32,34 +32,34 @@ */ @mixin scrollbar-invisible { - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ - &::-webkit-scrollbar { - display: none; - } + &::-webkit-scrollbar { + display: none; + } } @mixin scrollbar-color($size, $scrollbar-color, $track-color) { - &::-webkit-scrollbar { - display: none; - width: $size; - height: $size; - } + &::-webkit-scrollbar { + display: none; + width: $size; + height: $size; + } - &::-webkit-scrollbar-thumb { - background: $scrollbar-color; - border-radius: 20px; - } + &::-webkit-scrollbar-thumb { + background: $scrollbar-color; + border-radius: 20px; + } - &::-webkit-scrollbar-track { - background: $track-color; - border-radius: 20px; - } + &::-webkit-scrollbar-track { + background: $track-color; + border-radius: 20px; + } - @include m-hover.hover { - &::-webkit-scrollbar { - display: block; - } - } + @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 026afc47..84d3bc6c 100644 --- a/src/scss/02-tools/_m-select-custom.scss +++ b/src/scss/02-tools/_m-select-custom.scss @@ -17,56 +17,56 @@ */ @mixin select-custom { - display: block; - width: 100%; - max-width: 100%; /* useful when width is set to anything other than 100% */ - padding: 15px 25px; - 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%); - 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-radius: 10px; - appearance: none; + display: block; + width: 100%; + max-width: 100%; /* useful when width is set to anything other than 100% */ + padding: 15px 25px; + 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%); + 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-radius: 10px; + appearance: none; - @include rtl { - background-position: left 10px top 50%, 0 0; - } + @include rtl { + background-position: left 10px top 50%, 0 0; + } - // Set options to normal weight - option { - font-weight: 400; - } + // Set options to normal weight + option { + font-weight: 400; + } - // Hide arrow icon in IE browsers - &::-ms-expand { - display: none; - } + // Hide arrow icon in IE browsers + &::-ms-expand { + display: none; + } - // Hover style - &:hover { - border-color: color.adjust($color-grey-500, $lightness: -10%); - } + // Hover style + &:hover { + border-color: color.adjust($color-grey-500, $lightness: -10%); + } - // Focus style - &:focus { - 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; + // Focus style + &:focus { + 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; - option { - outline: none; - } - } + option { + outline: none; + } + } - @include rtl { - background-position: left 10px top 50%, 0 0; - } + @include rtl { + background-position: left 10px top 50%, 0 0; + } } diff --git a/src/scss/02-tools/_m-sr-only.scss b/src/scss/02-tools/_m-sr-only.scss index 1c778d16..9902e2ee 100644 --- a/src/scss/02-tools/_m-sr-only.scss +++ b/src/scss/02-tools/_m-sr-only.scss @@ -42,29 +42,29 @@ */ @mixin sr-only($focusable: false) { - position: absolute; - top: auto !important; - left: -10000px !important; - width: 1px !important; - height: 1px !important; - padding: 0 !important; - margin: -1px !important; - overflow: hidden !important; - clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */ - clip-path: inset(50%) !important; /* 2 */ - white-space: nowrap !important; /* 3 */ - border: 0 !important; + position: absolute; + top: auto !important; + left: -10000px !important; + width: 1px !important; + height: 1px !important; + padding: 0 !important; + margin: -1px !important; + overflow: hidden !important; + clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */ + clip-path: inset(50%) !important; /* 2 */ + white-space: nowrap !important; /* 3 */ + border: 0 !important; - @if $focusable { - &:focus, - &:active { - width: auto !important; - height: auto !important; - margin: auto !important; - overflow: visible !important; - clip: auto !important; - clip-path: none !important; - white-space: normal !important; - } - } + @if $focusable { + &:focus, + &:active { + width: auto !important; + height: auto !important; + margin: auto !important; + overflow: visible !important; + clip: auto !important; + clip-path: none !important; + white-space: normal !important; + } + } } diff --git a/src/scss/02-tools/_m-style-only.scss b/src/scss/02-tools/_m-style-only.scss index dc777104..93b78f0c 100644 --- a/src/scss/02-tools/_m-style-only.scss +++ b/src/scss/02-tools/_m-style-only.scss @@ -20,7 +20,7 @@ */ @mixin style-only { - @if ($entry-file-name == "style") { - @content; - } + @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 f06323ad..149836db 100644 --- a/src/scss/02-tools/_m-text-icon.scss +++ b/src/scss/02-tools/_m-text-icon.scss @@ -17,30 +17,30 @@ */ @mixin text-icon($icon: "arrow", $position: after, $color: currentColor, $size: 12px, $gap: 8px) { - position: relative; - display: inline-flex; - gap: $gap; - align-items: center; + position: relative; + display: inline-flex; + gap: $gap; + align-items: center; - &::#{$position} { - display: block; - width: $size; - height: $size; - content: ""; - background-color: $color; - mask-image: get-svg-url($icon); - mask-position: center; - mask-repeat: no-repeat; - transition: background-color .5s $ease-out-expo; - } + &::#{$position} { + display: block; + width: $size; + height: $size; + content: ""; + background-color: $color; + mask-image: get-svg-url($icon); + mask-position: center; + mask-repeat: no-repeat; + transition: background-color .5s $ease-out-expo; + } } @mixin text-external-icon($icon: "external", $position: after, $color: currentColor, $size: 12px, $gap: 8px) { - @include text-icon($icon, $position, $color, $size); - display: inline-block; + @include text-icon($icon, $position, $color, $size); + display: inline-block; - &::#{$position} { - display: inline-block; - margin-inline-start: $gap; - } + &::#{$position} { + display: inline-block; + margin-inline-start: $gap; + } } diff --git a/src/scss/02-tools/_m-text.scss b/src/scss/02-tools/_m-text.scss index 89c906d2..845fbd12 100644 --- a/src/scss/02-tools/_m-text.scss +++ b/src/scss/02-tools/_m-text.scss @@ -14,27 +14,27 @@ */ @mixin text($name: default) { - @if $name == default { - font-size: var(--paragraph--font-size-default); - font-weight: 400; - line-height: var(--paragraph--line-height-default); - } + @if $name == default { + font-size: var(--paragraph--font-size-default); + font-weight: 400; + line-height: var(--paragraph--line-height-default); + } - @if $name == small { - font-size: var(--paragraph--font-size-small); - font-weight: 400; - line-height: var(--paragraph--line-height-small); - } + @if $name == small { + font-size: var(--paragraph--font-size-small); + font-weight: 400; + line-height: var(--paragraph--line-height-small); + } - @if $name == large { - font-size: var(--paragraph--font-size-large); - font-weight: 400; - line-height: var(--paragraph--line-height-large); - } + @if $name == large { + font-size: var(--paragraph--font-size-large); + font-weight: 400; + line-height: var(--paragraph--line-height-large); + } - @if $name == huge { - font-size: var(--paragraph--font-size-huge); - font-weight: 400; - line-height: var(--paragraph--line-height-huge); - } + @if $name == huge { + font-size: var(--paragraph--font-size-huge); + font-weight: 400; + line-height: var(--paragraph--line-height-huge); + } } diff --git a/src/scss/03-base/_body.scss b/src/scss/03-base/_body.scss index dcd662ed..2c9b1408 100644 --- a/src/scss/03-base/_body.scss +++ b/src/scss/03-base/_body.scss @@ -2,41 +2,41 @@ @use "../02-tools/m-rtl" as *; html { - /* Set automatic RTL direction depending on lang attribute */ - @include set-rtl-direction; + /* Set automatic RTL direction depending on lang attribute */ + @include set-rtl-direction; - /* Apply border-box across the entire page. */ - box-sizing: border-box; + /* Apply border-box across the entire page. */ + box-sizing: border-box; - // HTML resets - font-family: $font-family-primary; - line-height: $line-height-base; + // HTML resets + font-family: $font-family-primary; + line-height: $line-height-base; - // Scroll resets - -webkit-overflow-scrolling: touch; - scroll-behavior: smooth; + // Scroll resets + -webkit-overflow-scrolling: touch; + scroll-behavior: smooth; - // Fonts resets - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: auto; + // Fonts resets + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: auto; } /** * Relax the definition a bit, to allow components to override it manually. */ * { - &, - &::before, - &::after { - box-sizing: inherit; - } + &, + &::before, + &::after { + box-sizing: inherit; + } } body { - font-family: $font-family-primary; - font-size: $font-size-base; - font-weight: normal; - color: $color-text; - background-color: $color-light; + font-family: $font-family-primary; + font-size: $font-size-base; + font-weight: normal; + color: $color-text; + background-color: $color-light; } diff --git a/src/scss/03-base/_fonts.scss b/src/scss/03-base/_fonts.scss index 6ff4d7e3..674dd2b9 100644 --- a/src/scss/03-base/_fonts.scss +++ b/src/scss/03-base/_fonts.scss @@ -25,7 +25,7 @@ * ... */ -@use "node_modules/@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 d6b2c8ec..73fa8049 100644 --- a/src/scss/03-base/_forms.scss +++ b/src/scss/03-base/_forms.scss @@ -11,74 +11,74 @@ // All inputs variables $text-inputs-list: 'input[type="color"]', 'input[type="date"]', - 'input[type="datetime"]', 'input[type="datetime-local"]', - 'input[type="email"]', 'input[type="month"]', 'input[type="number"]', - 'input[type="password"]', 'input[type="search"]', 'input[type="tel"]', - 'input[type="text"]', 'input[type="time"]', 'input[type="url"]', - 'input[type="week"]', "input:not([type])", "textarea"; + 'input[type="datetime"]', 'input[type="datetime-local"]', + 'input[type="email"]', 'input[type="month"]', 'input[type="number"]', + 'input[type="password"]', 'input[type="search"]', 'input[type="tel"]', + 'input[type="text"]', 'input[type="time"]', 'input[type="url"]', + 'input[type="week"]', "input:not([type])", "textarea"; $all-text-inputs: assign-inputs($text-inputs-list); // Not apply style to ACF fields @include not-acf { - // Textarea - textarea { - resize: vertical; - } - - #{$all-text-inputs}, - textarea { - box-sizing: border-box; - width: 100%; - padding: 15px 25px; - font-family: $font-family-primary; - line-height: 1; - 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($color-text, $lightness: 50%); - } - - &:hover { - border-color: color.adjust($color-grey-500, $lightness: -10%); - } - - &:focus { - color: color.adjust($color-text, $lightness: -10%); - border-color: color.adjust($color-grey-500, $lightness: -20%); - } - } - - // Label - label { - display: inline-block; - font-weight: 700; - } - - // Custom select - select { - @include select-custom; - } - - input[type="checkbox"], - input[type="radio"] { - @include checkbox-custom; - - &:checked { - @include checkbox-custom-checked; - } - } - - input[type="radio"] { - @include radio-custom(true); - } - - /* + // Textarea + textarea { + resize: vertical; + } + + #{$all-text-inputs}, + textarea { + box-sizing: border-box; + width: 100%; + padding: 15px 25px; + font-family: $font-family-primary; + line-height: 1; + 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($color-text, $lightness: 50%); + } + + &:hover { + border-color: color.adjust($color-grey-500, $lightness: -10%); + } + + &:focus { + color: color.adjust($color-text, $lightness: -10%); + border-color: color.adjust($color-grey-500, $lightness: -20%); + } + } + + // Label + label { + display: inline-block; + font-weight: 700; + } + + // Custom select + select { + @include select-custom; + } + + input[type="checkbox"], + input[type="radio"] { + @include checkbox-custom; + + &:checked { + @include checkbox-custom-checked; + } + } + + input[type="radio"] { + @include radio-custom(true); + } + + /* // For complianz plugin *:not(.cmplz-banner-checkbox) > { input[type="checkbox"], @@ -96,25 +96,25 @@ $all-text-inputs: assign-inputs($text-inputs-list); } */ - input[type="submit"] { - @extend %btn-block; - } - - input[type="reset"] { - @extend %btn-block-outline; - } - - input[type="search"] { - &::-webkit-search-cancel-button { - width: 16px; - height: 16px; - cursor: pointer; - background-image: get-svg-url("close", $color-dark); - background-repeat: no-repeat; - background-size: contain; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - } - } + input[type="submit"] { + @extend %btn-block; + } + + input[type="reset"] { + @extend %btn-block-outline; + } + + input[type="search"] { + &::-webkit-search-cancel-button { + width: 16px; + height: 16px; + cursor: pointer; + background-image: get-svg-url("close", $color-dark); + background-repeat: no-repeat; + background-size: contain; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + } + } } diff --git a/src/scss/03-base/_links.scss b/src/scss/03-base/_links.scss index a842168a..6bf33a7a 100644 --- a/src/scss/03-base/_links.scss +++ b/src/scss/03-base/_links.scss @@ -2,19 +2,19 @@ @use "../02-tools/m-text-icon" as *; a { - color: currentColor; - text-decoration: underline; - cursor: pointer; + color: currentColor; + text-decoration: underline; + cursor: pointer; - &[target="_blank"] { - @include text-icon("external"); - } + &[target="_blank"] { + @include text-icon("external"); + } - @include hover { - text-decoration: none; - } + @include hover { + text-decoration: none; + } } .link-external { - @include text-icon("external"); + @include text-icon("external"); } diff --git a/src/scss/03-base/_media.scss b/src/scss/03-base/_media.scss index 7fa6eaab..bccf070c 100644 --- a/src/scss/03-base/_media.scss +++ b/src/scss/03-base/_media.scss @@ -2,5 +2,5 @@ embed, iframe, object, video { - max-width: 100%; + max-width: 100%; } diff --git a/src/scss/03-base/_normalize.scss b/src/scss/03-base/_normalize.scss index 6c3968e6..61e58670 100644 --- a/src/scss/03-base/_normalize.scss +++ b/src/scss/03-base/_normalize.scss @@ -9,341 +9,341 @@ */ html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** - * Remove the margin in all browsers. - */ + * Remove the margin in all browsers. + */ body { - margin: 0; + margin: 0; } /** - * Render the `main` element consistently in IE. - */ + * Render the `main` element consistently in IE. + */ main { - display: block; + display: block; } /** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ h1 { - margin: .67em 0; - font-size: 2em; + margin: .67em 0; + font-size: 2em; } /* Grouping content ========================================================================== */ /** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ } /** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ pre { - font-family: monospace; /* 1 */ - font-size: 1em; /* 2 */ + font-family: monospace; /* 1 */ + font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** - * Remove the gray background on active links in IE 10. - */ + * Remove the gray background on active links in IE 10. + */ a { - background-color: transparent; + background-color: transparent; } /** - * 1. Remove the bottom border in Chrome 57- - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ abbr[title] { - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ - border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ + border-bottom: none; /* 1 */ } /** - * Add the correct font weight in Chrome, Edge, and Safari. - */ + * Add the correct font weight in Chrome, Edge, and Safari. + */ b, strong { - font-weight: bolder; + font-weight: bolder; } /** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ code, kbd, samp { - font-family: monospace; /* 1 */ - font-size: 1em; /* 2 */ + font-family: monospace; /* 1 */ + font-size: 1em; /* 2 */ } /** - * Add the correct font size in all browsers. - */ + * Add the correct font size in all browsers. + */ small { - font-size: 80%; + font-size: 80%; } /** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ sub, sup { - position: relative; - font-size: 75%; - line-height: 0; - vertical-align: baseline; + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; } sub { - bottom: -.25em; + bottom: -.25em; } sup { - top: -.5em; + top: -.5em; } /* Embedded content ========================================================================== */ /** - * Remove the border on images inside links in IE 10. - */ + * Remove the border on images inside links in IE 10. + */ img { - border-style: none; + border-style: none; } /* Forms ========================================================================== */ /** - * 1. Change the font styles in all browsers. - * 2. Remove the margin in Firefox and Safari. - */ + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ button, input, optgroup, select, textarea { - margin: 0; /* 2 */ - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ } /** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ button, input { /* 1 */ - overflow: visible; + overflow: visible; } /** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ button, select { /* 1 */ - text-transform: none; + text-transform: none; } /** - * Correct the inability to style clickable types in iOS and Safari. - */ + * Correct the inability to style clickable types in iOS and Safari. + */ button, [type="button"], [type="reset"], [type="submit"] { - -webkit-appearance: button; + -webkit-appearance: button; } /** - * Remove the inner border and padding in Firefox. - */ + * Remove the inner border and padding in Firefox. + */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { - padding: 0; - border-style: none; + padding: 0; + border-style: none; } /** - * Restore the focus styles unset by the previous rule. - */ + * Restore the focus styles unset by the previous rule. + */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; + outline: 1px dotted ButtonText; } /** - * Correct the padding in Firefox. - */ + * Correct the padding in Firefox. + */ fieldset { - padding: .35em .75em .625em; + padding: .35em .75em .625em; } /** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ legend { - box-sizing: border-box; /* 1 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - color: inherit; /* 2 */ - white-space: normal; /* 1 */ + box-sizing: border-box; /* 1 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + color: inherit; /* 2 */ + white-space: normal; /* 1 */ } /** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ progress { - vertical-align: baseline; + vertical-align: baseline; } /** - * Remove the default vertical scrollbar in IE 10+. - */ + * Remove the default vertical scrollbar in IE 10+. + */ textarea { - overflow: auto; + overflow: auto; } /** - * 1. Add the correct box sizing in IE 10. - * 2. Remove the padding in IE 10. - */ + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ [type="checkbox"], [type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ } /** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ + * Correct the cursor style of increment and decrement buttons in Chrome. + */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { - height: auto; + height: auto; } /** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ [type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ } /** - * Remove the inner padding in Chrome and Safari on macOS. - */ + * Remove the inner padding in Chrome and Safari on macOS. + */ [type="search"]::-webkit-search-decoration { - -webkit-appearance: none; + -webkit-appearance: none; } /** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ ::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* - * Add the correct display in Edge, IE 10+, and Firefox. - */ + * Add the correct display in Edge, IE 10+, and Firefox. + */ details { - display: block; + display: block; } /* - * Add the correct display in all browsers. - */ + * Add the correct display in all browsers. + */ summary { - display: list-item; + display: list-item; } /* Misc ========================================================================== */ /** - * Add the correct display in IE 10+. - */ + * Add the correct display in IE 10+. + */ template { - display: none; + display: none; } /** - * Add the correct display in IE 10. - */ + * Add the correct display in IE 10. + */ [hidden] { - display: none; + display: none; } diff --git a/src/scss/03-base/_print.scss b/src/scss/03-base/_print.scss index 9cf87883..493b2e19 100644 --- a/src/scss/03-base/_print.scss +++ b/src/scss/03-base/_print.scss @@ -1,90 +1,90 @@ @use "../01-abstract/variables" as *; @media print { - * { - font-family: Arial, Helvetica, sans-serif !important; - color: $color-dark !important; - text-decoration: none; - text-shadow: none !important; - background: transparent !important; - filter: none !important; - }/* Black prints faster: h5bp.com/s */ - a, - a:visited { - text-decoration: none; - } + * { + font-family: Arial, Helvetica, sans-serif !important; + color: $color-dark !important; + text-decoration: none; + text-shadow: none !important; + background: transparent !important; + filter: none !important; + }/* Black prints faster: h5bp.com/s */ + a, + a:visited { + text-decoration: none; + } - a[href]::after { - content: " (" attr(href) ")"; - } + a[href]::after { + content: " (" attr(href) ")"; + } - abbr[title]::after { - content: " (" attr(title) ")"; - } + abbr[title]::after { + content: " (" attr(title) ")"; + } - .ir a::after, - a[href^="javascript:"]::after, - a[href^="#"]::after { - content: ""; - }/* Don't show links for images, or javascript/internal links */ - pre, - blockquote { - border: 0; - page-break-inside: avoid; - } + .ir a::after, + a[href^="javascript:"]::after, + a[href^="#"]::after { + content: ""; + }/* Don't show links for images, or javascript/internal links */ + pre, + blockquote { + border: 0; + page-break-inside: avoid; + } - thead { - display: table-header-group; - }/* h5bp.com/t */ - tr, - img { - page-break-inside: avoid; - } + thead { + display: table-header-group; + }/* h5bp.com/t */ + tr, + img { + page-break-inside: avoid; + } - img { - max-width: 100% !important; - } + img { + max-width: 100% !important; + } - @page { - margin: .5cm; - } + @page { + margin: .5cm; + } - p, - h2, - h3 { - orphans: 3; - widows: 3; - } + p, + h2, + h3 { + orphans: 3; + widows: 3; + } - h2, - h3 { - page-break-after: avoid; - } + h2, + h3 { + page-break-after: avoid; + } - .inline-element-with-padding { - padding: 0; - } + .inline-element-with-padding { + padding: 0; + } - /* remove useless content */ - .skip-links, - .header, - .footer, - .widget-area, - .breadcrumb, - .wp-pagenavi { - display: none !important; - } + /* remove useless content */ + .skip-links, + .header, + .footer, + .widget-area, + .breadcrumb, + .wp-pagenavi { + display: none !important; + } - /* show hidden content */ - .wp-block-beapi-accordion-panel, - .wp-block-beapi-faq-block .faq__panel { - display: block !important; - } + /* show hidden content */ + .wp-block-beapi-accordion-panel, + .wp-block-beapi-faq-block .faq__panel { + display: block !important; + } - /* reset width */ - .content { - width: 100% !important; - padding: 10px 0 !important; - margin: 10px 0 !important; - } + /* reset width */ + .content { + width: 100% !important; + padding: 10px 0 !important; + margin: 10px 0 !important; + } } diff --git a/src/scss/03-base/_svg-icons.scss b/src/scss/03-base/_svg-icons.scss index 4a54c8fb..1d8ba604 100644 --- a/src/scss/03-base/_svg-icons.scss +++ b/src/scss/03-base/_svg-icons.scss @@ -1,7 +1,7 @@ .icon { - display: inline-block; - width: 16px; - height: 16px; - vertical-align: middle; - fill: currentColor; + display: inline-block; + width: 16px; + height: 16px; + vertical-align: middle; + fill: currentColor; } diff --git a/src/scss/03-base/_text.scss b/src/scss/03-base/_text.scss index 3ee7ed60..9e4fa34f 100644 --- a/src/scss/03-base/_text.scss +++ b/src/scss/03-base/_text.scss @@ -1,20 +1,20 @@ b, strong { - font-weight: 700; + font-weight: 700; } dfn, cite, em, i { - font-style: italic; + font-style: italic; } pre { - overflow-x: auto; - white-space: pre; + overflow-x: auto; + white-space: pre; } sup { - vertical-align: super; + vertical-align: super; } diff --git a/src/scss/03-base/_variables-css.scss b/src/scss/03-base/_variables-css.scss index ac487c81..ce97ab19 100644 --- a/src/scss/03-base/_variables-css.scss +++ b/src/scss/03-base/_variables-css.scss @@ -4,45 +4,45 @@ @use "../02-tools/m-reduced-motion" as *; :root { - /* + /* * Heading */ - // Font size - --heading--font-size-h1: 56px; - --heading--font-size-h2: 48px; - --heading--font-size-h3: 36px; - --heading--font-size-h4: 32px; - --heading--font-size-h5: 24px; - --heading--font-size-h6: 18px; - - /** - * 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)}; + // Font size + --heading--font-size-h1: 56px; + --heading--font-size-h2: 48px; + --heading--font-size-h3: 36px; + --heading--font-size-h4: 32px; + --heading--font-size-h5: 24px; + --heading--font-size-h6: 18px; + + /** + * 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)}; */ - // Line height - --heading--line-height-h1: 1.25; - --heading--line-height-h2: 1.25; - --heading--line-height-h3: 1.25; - --heading--line-height-h4: 1.25; - --heading--line-height-h5: 1.25; - --heading--line-height-h6: 1.25; + // Line height + --heading--line-height-h1: 1.25; + --heading--line-height-h2: 1.25; + --heading--line-height-h3: 1.25; + --heading--line-height-h4: 1.25; + --heading--line-height-h5: 1.25; + --heading--line-height-h6: 1.25; - /* + /* * paragraph */ - // Font size - --paragraph--font-size-huge: 32px; - --paragraph--font-size-large: 24px; - --paragraph--font-size-small: 14px; - --paragraph--font-size-default: 16px; + // Font size + --paragraph--font-size-huge: 32px; + --paragraph--font-size-large: 24px; + --paragraph--font-size-small: 14px; + --paragraph--font-size-default: 16px; - /** + /** * Font size fluid -> /!\ IMPORTANT /!\ : no add media query to defined different values. The function make it * * --paragraph--font-size-huge: #{fluid-size(28px, 32px)}; @@ -51,21 +51,21 @@ * --paragraph--font-size-default: #{fluid-size(14px, 16px)}; */ - // line height - --paragraph--line-height-huge: 1.4; - --paragraph--line-height-large: 1.4; - --paragraph--line-height-small: 1.4; - --paragraph--line-height-default: 1.4; + // line height + --paragraph--line-height-huge: 1.4; + --paragraph--line-height-large: 1.4; + --paragraph--line-height-small: 1.4; + --paragraph--line-height-default: 1.4; - /* + /* * Spacing */ - --spacing--block-1: 16px; - --spacing--block-2: 32px; - --spacing--block-3: 48px; - --spacing--block-4: 64px; + --spacing--block-1: 16px; + --spacing--block-2: 32px; + --spacing--block-3: 48px; + --spacing--block-4: 64px; - /** + /** * Spacing fluid -> /!\ IMPORTANT /!\ : no add media query to defined different values. The function make it * * Fluid spacing : @@ -79,63 +79,63 @@ * ... */ - /* + /* * Gutters */ - --responsive--gutter: #{$external-gutter-mobile}; + --responsive--gutter: #{$external-gutter-mobile}; - /* + /* * Alignments */ - --responsive--aligndefault-width: calc(100% - calc(var(--responsive--gutter) * 2)); - --responsive--alignwide-width: calc(100% - calc(var(--responsive--gutter) * 2)); - --responsive--alignfull-width: 100%; + --responsive--aligndefault-width: calc(100% - calc(var(--responsive--gutter) * 2)); + --responsive--alignwide-width: calc(100% - calc(var(--responsive--gutter) * 2)); + --responsive--alignfull-width: 100%; - /* + /* * Animation speeds */ - --speed: 1s; + --speed: 1s; - /* + /* * Admin bar */ - --wp-admin-bar-height: var(--wp-admin--admin-bar--height, 0rem); + --wp-admin-bar-height: var(--wp-admin--admin-bar--height, 0rem); - /* + /* * A11y reduced motion */ - @include reduced-motion { - --speed: 0s; - } + @include reduced-motion { + --speed: 0s; + } - /* + /* * Global breakpoints */ - @include breakpoints(s, max) { - /* + @include breakpoints(s, max) { + /* * Admin bar become not sticky */ - &:not(.scroll-top) { - .admin-bar { - --wp-admin-bar-height: 0rem; - } - } - } - - @include breakpoints(md) { - /* + &:not(.scroll-top) { + .admin-bar { + --wp-admin-bar-height: 0rem; + } + } + } + + @include breakpoints(md) { + /* * Spacing * /!\ IMPORTANT : Remove it if you use fluid size function instead /!\ */ - --spacing--block-1: 32px; - --spacing--block-2: 64px; - --spacing--block-3: 96px; - --spacing--block-4: 128px; + --spacing--block-1: 32px; + --spacing--block-2: 64px; + --spacing--block-3: 96px; + --spacing--block-4: 128px; - /* + /* * Gutters */ - --responsive--gutter: #{$external-gutter}; - } + --responsive--gutter: #{$external-gutter}; + } } diff --git a/src/scss/04-utilities/_aria.scss b/src/scss/04-utilities/_aria.scss index 44df40bd..679e4971 100644 --- a/src/scss/04-utilities/_aria.scss +++ b/src/scss/04-utilities/_aria.scss @@ -1,11 +1,11 @@ [aria-expanded="false"] { - .aria-expanded-true-text { - display: none !important; - } + .aria-expanded-true-text { + display: none !important; + } } [aria-expanded="true"] { - .aria-expanded-false-text { - display: none !important; - } + .aria-expanded-false-text { + display: none !important; + } } diff --git a/src/scss/04-utilities/_container.scss b/src/scss/04-utilities/_container.scss index 40c26d01..74dc2474 100644 --- a/src/scss/04-utilities/_container.scss +++ b/src/scss/04-utilities/_container.scss @@ -4,9 +4,9 @@ /* Main Layout */ .container, .container-wide { - @include container; + @include container; } .container-default { - @include container($container-default); + @include container($container-default); } diff --git a/src/scss/04-utilities/_focus.scss b/src/scss/04-utilities/_focus.scss index 9100934e..29129772 100644 --- a/src/scss/04-utilities/_focus.scss +++ b/src/scss/04-utilities/_focus.scss @@ -1,13 +1,13 @@ html { - a, - button, - input, - select, - textarea, - [tabindex] { - &:focus-visible { - outline: 2px solid currentColor; - outline-offset: .5rem; - } - } + a, + button, + input, + select, + textarea, + [tabindex] { + &:focus-visible { + outline: 2px solid currentColor; + outline-offset: .5rem; + } + } } diff --git a/src/scss/04-utilities/_js-animation.scss b/src/scss/04-utilities/_js-animation.scss index 0adc6791..53400875 100644 --- a/src/scss/04-utilities/_js-animation.scss +++ b/src/scss/04-utilities/_js-animation.scss @@ -32,84 +32,84 @@ // opacity animation // ---- %js-animation-opacity-init { - opacity: 0; - transition: opacity .5s; + opacity: 0; + transition: opacity .5s; } // ---- // vertical translation + opacity animation // ---- %js-animation-translation-init { - > * { - opacity: 0; - transition: opacity .5s, transform .5s $ease-out-expo; - transform: translateY(100px); - } + > * { + opacity: 0; + transition: opacity .5s, transform .5s $ease-out-expo; + transform: translateY(100px); + } } // ---- // title animation // ---- %js-animation-title-init { - visibility: hidden; + visibility: hidden; } // ==== // css animation // ==== .js-animation { - $el: &; + $el: &; - // ---- - // opacity animation - // ---- - #{$el}-opacity { - @extend %js-animation-opacity-init; + // ---- + // opacity animation + // ---- + #{$el}-opacity { + @extend %js-animation-opacity-init; - &.is-visible { - opacity: 1; - } - } + &.is-visible { + opacity: 1; + } + } - // ---- - // title animation - // ---- - #{$el}-title { - @extend %js-animation-title-init; + // ---- + // title animation + // ---- + #{$el}-title { + @extend %js-animation-title-init; - .st-line { - display: inline-block; - overflow: hidden; + .st-line { + display: inline-block; + overflow: hidden; - > span { - display: inline-block; - transition: transform .75s $ease-out-expo; - transform: translateY(150%); - } - } + > span { + display: inline-block; + transition: transform .75s $ease-out-expo; + transform: translateY(150%); + } + } - &.is-ready { - visibility: visible; - } + &.is-ready { + visibility: visible; + } - &.is-visible { - .st-line { - > span { - transform: translateY(0); - } - } - } - } + &.is-visible { + .st-line { + > span { + transform: translateY(0); + } + } + } + } - // ---- - // vertical translation + opacity animation - // ---- - #{$el}-translation { - @extend %js-animation-translation-init; + // ---- + // vertical translation + opacity animation + // ---- + #{$el}-translation { + @extend %js-animation-translation-init; - &.is-visible { - > * { - opacity: 1; - transform: translateY(0) !important; - } - } - } + &.is-visible { + > * { + opacity: 1; + transform: translateY(0) !important; + } + } + } } diff --git a/src/scss/04-utilities/_palette.scss b/src/scss/04-utilities/_palette.scss index 736a6944..67a14edb 100644 --- a/src/scss/04-utilities/_palette.scss +++ b/src/scss/04-utilities/_palette.scss @@ -2,11 +2,11 @@ @use "sass:map"; @each $name, $colors in $palette { - .has-#{$name}-color { - color: map.get($colors, color); - } + .has-#{$name}-color { + color: map.get($colors, color); + } - .has-#{$name}-background-color { - background-color: map.get($colors, color); - } + .has-#{$name}-background-color { + background-color: map.get($colors, color); + } } diff --git a/src/scss/04-utilities/_seo.scss b/src/scss/04-utilities/_seo.scss index 1972f556..079972c7 100644 --- a/src/scss/04-utilities/_seo.scss +++ b/src/scss/04-utilities/_seo.scss @@ -1,37 +1,37 @@ %focus-seo-container { - &:has(:focus-visible) { - outline: 2px solid currentColor; - outline-offset: .5rem; - } + &:has(:focus-visible) { + outline: 2px solid currentColor; + outline-offset: .5rem; + } - *:focus { - outline: none; - } + *:focus { + outline: none; + } } %seo-container { - @extend %focus-seo-container; - position: relative; - z-index: 1; - cursor: pointer; + @extend %focus-seo-container; + position: relative; + z-index: 1; + cursor: pointer; } %seo-target { - &::before { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 100; - content: ""; - } + &::before { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 100; + content: ""; + } } [data-seo-container] { - @extend %seo-container; + @extend %seo-container; - [data-seo-target] { - @extend %seo-target; - } + [data-seo-target] { + @extend %seo-target; + } } diff --git a/src/scss/04-utilities/_sr-only.scss b/src/scss/04-utilities/_sr-only.scss index e8962007..425b38a1 100644 --- a/src/scss/04-utilities/_sr-only.scss +++ b/src/scss/04-utilities/_sr-only.scss @@ -1,17 +1,17 @@ @use "../02-tools/m-sr-only" as *; %sr-only { - @include sr-only; + @include sr-only; } %sr-only-focusable { - @include sr-only(true); + @include sr-only(true); } .sr-only { - @extend %sr-only; + @extend %sr-only; } .sr-only-focusable { - @extend %sr-only-focusable; + @extend %sr-only-focusable; } diff --git a/src/scss/04-utilities/_video-wrapper.scss b/src/scss/04-utilities/_video-wrapper.scss index af1329d0..8dbeb4d8 100644 --- a/src/scss/04-utilities/_video-wrapper.scss +++ b/src/scss/04-utilities/_video-wrapper.scss @@ -1,15 +1,15 @@ .video-wrapper { - position: relative; - height: 0; - padding-top: 25px; - padding-bottom: 56.25%; /* 16:9 */ - line-height: 0; + position: relative; + height: 0; + padding-top: 25px; + padding-bottom: 56.25%; /* 16:9 */ + line-height: 0; - iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } + iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } } diff --git a/src/scss/04-utilities/_wp-admin-bar.scss b/src/scss/04-utilities/_wp-admin-bar.scss index 3062aa92..fef5de90 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" as *; #wpadminbar { - @include breakpoints(sm, max) { - overflow: scroll; - } + @include breakpoints(sm, max) { + overflow: scroll; + } } diff --git a/src/scss/05-components/_btn.scss b/src/scss/05-components/_btn.scss index ba10c974..878cfd7e 100644 --- a/src/scss/05-components/_btn.scss +++ b/src/scss/05-components/_btn.scss @@ -1,27 +1,27 @@ @use "../02-tools/m-btn" as *; %btn { - @include btn; + @include btn; } %btn-block { - @extend %btn; - @include btn-block; + @extend %btn; + @include btn-block; } %btn-block-outline { - @extend %btn-block; - @include btn-block-outline; + @extend %btn-block; + @include btn-block-outline; } .btn { - @extend %btn; + @extend %btn; } .btn-block { - @extend %btn-block; + @extend %btn-block; } .btn-outline { - @extend %btn-block-outline; + @extend %btn-block-outline; } diff --git a/src/scss/05-components/_searchform.scss b/src/scss/05-components/_searchform.scss index fb42ad84..647af03e 100644 --- a/src/scss/05-components/_searchform.scss +++ b/src/scss/05-components/_searchform.scss @@ -3,20 +3,20 @@ */ .searchform { - position: relative; + position: relative; - &__field[type="search"] { - padding-inline-end: var(--spacing--block-1); - } + &__field[type="search"] { + padding-inline-end: var(--spacing--block-1); + } - &__submit { - position: absolute; - top: 0; - right: 0; - bottom: 0; + &__submit { + position: absolute; + top: 0; + right: 0; + bottom: 0; - .icon { - vertical-align: -15%; - } - } + .icon { + vertical-align: -15%; + } + } } diff --git a/src/scss/05-components/_skip-links.scss b/src/scss/05-components/_skip-links.scss index 33d67a4a..61556d6f 100644 --- a/src/scss/05-components/_skip-links.scss +++ b/src/scss/05-components/_skip-links.scss @@ -2,38 +2,38 @@ @use "../01-abstract/variables" as *; .skip-links { - position: fixed; - top: var(--wp-admin-bar-height); - left: 0; - z-index: 11; // Under header - width: 100%; - padding: 8px 10px 10px; - background-color: $color-primary; - opacity: 0; - transition: transform .3s $ease-out-expo, opacity .3s; - transform: translate3d(0, -100%, 0); + position: fixed; + top: var(--wp-admin-bar-height); + left: 0; + z-index: 11; // Under header + width: 100%; + padding: 8px 10px 10px; + background-color: $color-primary; + opacity: 0; + transition: transform .3s $ease-out-expo, opacity .3s; + transform: translate3d(0, -100%, 0); - ul { - display: flex; - list-style: none; - } + ul { + display: flex; + list-style: none; + } - a { - font-size: 13px; - color: $color-text; - text-decoration: none; + a { + font-size: 13px; + color: $color-text; + text-decoration: none; - &:focus { - outline-offset: 3px; - } - } + &:focus { + outline-offset: 3px; + } + } - &:focus-within { - opacity: 1; - transform: translate3d(0, 0, 0); - } + &:focus-within { + opacity: 1; + transform: translate3d(0, 0, 0); + } - li:not(:last-of-type) { - margin-inline-end: 1rem; - } + li:not(:last-of-type) { + margin-inline-end: 1rem; + } } diff --git a/src/scss/06-blocks/_gutenberg.scss b/src/scss/06-blocks/_gutenberg.scss index e39d92d4..f291675e 100644 --- a/src/scss/06-blocks/_gutenberg.scss +++ b/src/scss/06-blocks/_gutenberg.scss @@ -6,150 +6,150 @@ @use "../02-tools/m-heading" as *; @include editor-only { - // ---- - // Post title style - // ---- - .editor-post-title { - - @include heading(h1); - - width: #{$container-wide}; - max-width: var(--responsive--alignwide-width); - margin-bottom: var(--spacing--block-3); - } - - // ---- - // Editor UI font styles - // ---- - .wp-block.block-editor-default-block-appender > textarea { - font-family: var(--global--font-secondary); - font-size: $font-size-md; - } - - // ---- - // Disable links in ACF blocks - // The template block must have a ".block" class. Example :
- // ---- - .acf-block-preview { - > .block { - a, - button { - pointer-events: none; - } - } - } + // ---- + // Post title style + // ---- + .editor-post-title { + + @include heading(h1); + + width: #{$container-wide}; + max-width: var(--responsive--alignwide-width); + margin-bottom: var(--spacing--block-3); + } + + // ---- + // Editor UI font styles + // ---- + .wp-block.block-editor-default-block-appender > textarea { + font-family: var(--global--font-secondary); + font-size: $font-size-md; + } + + // ---- + // Disable links in ACF blocks + // The template block must have a ".block" class. Example :
+ // ---- + .acf-block-preview { + > .block { + a, + button { + pointer-events: none; + } + } + } } // ---- // Drop cap // ---- .has-drop-cap:not(:focus)::first-letter { - float: left; - margin: .1em .1em 0 0; - 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); - line-height: .66; - text-transform: uppercase; + float: left; + margin: .1em .1em 0 0; + 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); + line-height: .66; + text-transform: uppercase; } #{context-selector(".blocks-container", ".is-root-container")} { - // ---- - // Alignements horizontaux - // ---- - > :where(*) { - width: #{$container-default}; - max-width: var(--responsive--aligndefault-width); - margin-right: auto; - margin-left: auto; - } - - #{context-selector(".alignwide", "[data-align='wide']")} { - width: #{$container-wide}; - max-width: var(--responsive--alignwide-width); - } - - #{context-selector(".alignfull", "[data-align='full']")} { - width: 100%; - max-width: var(--responsive--alignfull-width); - } - - .alignleft { - - @include align; - } - - .alignright { - - @include align(right); - } - - .aligncenter { - display: block; - margin-right: auto; - margin-left: auto; - clear: both; - } - - .alignleft, - .alignright, - .aligncenter { - margin-bottom: var(--spacing--block-1); - } - - :where(.is-layout-flex), - :where(.is-layout-grid) { - gap: get-gutter-width(); - } - - // ---- - // Alignements verticaux - // ---- - > *, - [class*="inner-container"]:not(.is-layout-grid) > * { - margin-top: var(--spacing--block-1); - margin-bottom: var(--spacing--block-1); - - &:first-child { - margin-top: 0; - } - - &:last-child { - margin-bottom: 0; - } - - &.alignleft, - &.alignright, - &.alignleft:first-child + *, - &.alignright:first-child + *, - &.alignfull.has-background { - margin-top: 0; - } - - &:last-child, - &.alignfull.has-background { - margin-bottom: 0; - } - - /* Reset alignleft and alignright margins after alignfull */ - &.alignfull + .alignleft, - &.alignfull + .alignright { - margin-top: var(--spacing--block-1); - } - } - - @include editor-only { - - > * { - - &:last-child { - margin-bottom: var(--spacing--block-1); - } - } - - [class*="inner-container"] > * { - max-width: none; - } - } + // ---- + // Alignements horizontaux + // ---- + > :where(*) { + width: #{$container-default}; + max-width: var(--responsive--aligndefault-width); + margin-right: auto; + margin-left: auto; + } + + #{context-selector(".alignwide", "[data-align='wide']")} { + width: #{$container-wide}; + max-width: var(--responsive--alignwide-width); + } + + #{context-selector(".alignfull", "[data-align='full']")} { + width: 100%; + max-width: var(--responsive--alignfull-width); + } + + .alignleft { + + @include align; + } + + .alignright { + + @include align(right); + } + + .aligncenter { + display: block; + margin-right: auto; + margin-left: auto; + clear: both; + } + + .alignleft, + .alignright, + .aligncenter { + margin-bottom: var(--spacing--block-1); + } + + :where(.is-layout-flex), + :where(.is-layout-grid) { + gap: get-gutter-width(); + } + + // ---- + // Alignements verticaux + // ---- + > *, + [class*="inner-container"]:not(.is-layout-grid) > * { + margin-top: var(--spacing--block-1); + margin-bottom: var(--spacing--block-1); + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + + &.alignleft, + &.alignright, + &.alignleft:first-child + *, + &.alignright:first-child + *, + &.alignfull.has-background { + margin-top: 0; + } + + &:last-child, + &.alignfull.has-background { + margin-bottom: 0; + } + + /* Reset alignleft and alignright margins after alignfull */ + &.alignfull + .alignleft, + &.alignfull + .alignright { + margin-top: var(--spacing--block-1); + } + } + + @include editor-only { + + > * { + + &:last-child { + margin-bottom: var(--spacing--block-1); + } + } + + [class*="inner-container"] > * { + max-width: none; + } + } } diff --git a/src/scss/06-blocks/core/_audio.scss b/src/scss/06-blocks/core/_audio.scss index dfddf360..462ef85e 100644 --- a/src/scss/06-blocks/core/_audio.scss +++ b/src/scss/06-blocks/core/_audio.scss @@ -1,14 +1,14 @@ @use "../../01-abstract/variables" as *; .wp-block-audio { - audio { - &::-webkit-media-controls-panel { - background-color: $color-primary; - } + audio { + &::-webkit-media-controls-panel { + background-color: $color-primary; + } - &:focus { - outline: 2px solid $color-primary; - outline-offset: 5px; - } - } + &:focus { + outline: 2px solid $color-primary; + outline-offset: 5px; + } + } } diff --git a/src/scss/06-blocks/core/_buttons.scss b/src/scss/06-blocks/core/_buttons.scss index e0dd6c9a..f5d04414 100644 --- a/src/scss/06-blocks/core/_buttons.scss +++ b/src/scss/06-blocks/core/_buttons.scss @@ -1,26 +1,26 @@ @use "../../05-components/btn"; .wp-block { - // ---- - // container - // ---- - // &-buttons { - // } + // ---- + // container + // ---- + // &-buttons { + // } - // ---- - // button - // ---- - &-button { - .wp-block-button__link { - @extend %btn-block; - } + // ---- + // button + // ---- + &-button { + .wp-block-button__link { + @extend %btn-block; + } - &.is-style-outline .wp-block-button__link { - @extend %btn-block-outline; - } + &.is-style-outline .wp-block-button__link { + @extend %btn-block-outline; + } - &.has-custom-font-size .wp-block-button__link { - font-size: inherit; - } - } + &.has-custom-font-size .wp-block-button__link { + font-size: inherit; + } + } } diff --git a/src/scss/06-blocks/core/_columns.scss b/src/scss/06-blocks/core/_columns.scss index 5ee1ee58..4dde94b0 100644 --- a/src/scss/06-blocks/core/_columns.scss +++ b/src/scss/06-blocks/core/_columns.scss @@ -2,38 +2,38 @@ @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 block-vertical-spacing(); - - row-gap: var(--wp-block-columns-row-gap); - column-gap: var(--wp-block-columns-column-gap) !important; - justify-content: space-between; - - .wp-block-column { - &.has-background { - padding: var(--spacing--block-1); - } - } - - &:not(.is-not-stacked-on-mobile) { - .wp-block-column { - margin-left: 0 !important; - } - - @include breakpoints(md, max) { - flex-wrap: wrap !important; - - .wp-block-column { - &:not(:only-child) { - flex-basis: 100% !important; - } - - &:empty { - display: none; - } - } - } - } + --wp-block-columns-row-gap: var(--spacing--block-2); + --wp-block-columns-column-gap: #{get_gutter-width()}; + + @include block-vertical-spacing(); + + row-gap: var(--wp-block-columns-row-gap); + column-gap: var(--wp-block-columns-column-gap) !important; + justify-content: space-between; + + .wp-block-column { + &.has-background { + padding: var(--spacing--block-1); + } + } + + &:not(.is-not-stacked-on-mobile) { + .wp-block-column { + margin-left: 0 !important; + } + + @include breakpoints(md, max) { + flex-wrap: wrap !important; + + .wp-block-column { + &:not(:only-child) { + flex-basis: 100% !important; + } + + &:empty { + display: none; + } + } + } + } } diff --git a/src/scss/06-blocks/core/_cover.scss b/src/scss/06-blocks/core/_cover.scss index 6331ed44..57c2cc8b 100644 --- a/src/scss/06-blocks/core/_cover.scss +++ b/src/scss/06-blocks/core/_cover.scss @@ -3,21 +3,21 @@ .wp-block-cover, .wp-block-cover-image { - &:not(.alignwide):not(.alignfull) { - clear: both; - } + &:not(.alignwide):not(.alignfull) { + clear: both; + } - @include style-only { - &.alignfull { - margin-top: 0; - margin-bottom: 0; - } - } + @include style-only { + &.alignfull { + margin-top: 0; + margin-bottom: 0; + } + } - @include editor-only { - [data-align="full"] & { - margin-top: 0; - margin-bottom: 0; - } - } + @include 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 8e8403f8..ab0f3117 100644 --- a/src/scss/06-blocks/core/_file.scss +++ b/src/scss/06-blocks/core/_file.scss @@ -1,9 +1,9 @@ @use "../../05-components/btn"; .wp-block-file { - $el: &; + $el: &; - #{$el}__button { - @extend %btn-block; - } + #{$el}__button { + @extend %btn-block; + } } diff --git a/src/scss/06-blocks/core/_freeform.scss b/src/scss/06-blocks/core/_freeform.scss index e73152eb..85c6dcea 100644 --- a/src/scss/06-blocks/core/_freeform.scss +++ b/src/scss/06-blocks/core/_freeform.scss @@ -2,22 +2,22 @@ @use "../../02-tools/m-editor-only" as *; .wp-block-freeform { - @include editor-only { - // Remove the border of blockquotes inside the classic block. - &.block-library-rich-text__tinymce blockquote { - border: none; - } + @include editor-only { + // Remove the border of blockquotes inside the classic block. + &.block-library-rich-text__tinymce blockquote { + border: none; + } - // Adjust the position of the quote symbol for blockquotes inside the classic block. - &.block-library-rich-text__tinymce blockquote::before { - left: 5px; - } + // Adjust the position of the quote symbol for blockquotes inside the classic block. + &.block-library-rich-text__tinymce blockquote::before { + left: 5px; + } - // Backend Classic editor container - .mce-content-body { - width: #{$container-wide}; - max-width: var(--responsive--alignwide-width); - margin: 0; - } - } + // Backend Classic editor container + .mce-content-body { + 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 e1a4c4fb..d519741d 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" as *; .wp-block-gallery { - --wp--style--gallery-gap-default: #{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 2709b959..0522f4f0 100644 --- a/src/scss/06-blocks/core/_group.scss +++ b/src/scss/06-blocks/core/_group.scss @@ -2,37 +2,37 @@ @use "../../02-tools/m-editor-only" as *; .wp-block-group { - $el: &; + $el: &; - &:not(.is-layout-grid) { - display: flow-root; - } + &:not(.is-layout-grid) { + display: flow-root; + } - &--no-inner-margin { - #{$el}__inner-container { - > * { - margin-top: 0; - margin-bottom: 0; - } - } - } + &--no-inner-margin { + #{$el}__inner-container { + > * { + margin-top: 0; + margin-bottom: 0; + } + } + } - @include breakpoints(sm, max) { - &--full-mobile { - max-width: 100% !important; - } - } + @include breakpoints(sm, max) { + &--full-mobile { + max-width: 100% !important; + } + } } @include editor-only { - .wp-block-group { - &:not(.is-layout-grid) { - display: flow-root; - } + .wp-block-group { + &:not(.is-layout-grid) { + display: flow-root; + } - .wp-block-group.has-background > .block-editor-block-list__layout > [data-align="full"] { - width: 100%; - margin: 0; - } - } + .wp-block-group.has-background > .block-editor-block-list__layout > [data-align="full"] { + width: 100%; + margin: 0; + } + } } diff --git a/src/scss/06-blocks/core/_heading.scss b/src/scss/06-blocks/core/_heading.scss index 4f906c69..d5cdeef5 100644 --- a/src/scss/06-blocks/core/_heading.scss +++ b/src/scss/06-blocks/core/_heading.scss @@ -25,31 +25,31 @@ */ $headings: ( - "1": (), - "2": (), - "3": (), - "4": (), - "5": (), - "6": (), + "1": (), + "2": (), + "3": (), + "4": (), + "5": (), + "6": (), ); @each $i, $styles in $headings { - h#{$i} { - @include heading(h#{$i}); + h#{$i} { + @include heading(h#{$i}); - @each $style in $styles { - &.is-style-#{$style} { - @include heading(h#{$i}, $style); - } - } - } + @each $style in $styles { + &.is-style-#{$style} { + @include heading(h#{$i}, $style); + } + } + } - .is-style-h#{$i} { - @include heading(h#{$i}); - } + .is-style-h#{$i} { + @include heading(h#{$i}); + } - .has-h-#{$i}-font-size { - font-size: var(--heading--font-size-h#{$i}); - line-height: var(--heading--line-height-h#{$i}); - } + .has-h-#{$i}-font-size { + font-size: var(--heading--font-size-h#{$i}); + line-height: var(--heading--line-height-h#{$i}); + } } diff --git a/src/scss/06-blocks/core/_html.scss b/src/scss/06-blocks/core/_html.scss index 0f59f73c..7e59520a 100644 --- a/src/scss/06-blocks/core/_html.scss +++ b/src/scss/06-blocks/core/_html.scss @@ -1,5 +1,5 @@ @include editor-only { - [data-type="core/html"] textarea { - // style - } + [data-type="core/html"] textarea { + // style + } } diff --git a/src/scss/06-blocks/core/_image.scss b/src/scss/06-blocks/core/_image.scss index 3959134d..cb98bc4b 100644 --- a/src/scss/06-blocks/core/_image.scss +++ b/src/scss/06-blocks/core/_image.scss @@ -1,13 +1,13 @@ @use "../../01-abstract/variables" as *; .wp-block-image { - > img { - max-width: 100%; - height: auto; - } + > img { + max-width: 100%; + height: auto; + } - figcaption { - font-size: $font-size-xs; - color: $color-grey-600; - } + figcaption { + 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 7a581bfe..ef73cd24 100644 --- a/src/scss/06-blocks/core/_list.scss +++ b/src/scss/06-blocks/core/_list.scss @@ -5,118 +5,118 @@ // 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; + font-size: 16px; + font-weight: 700; + line-height: 1.3; + color: $color-dark; } %marker-ul-default { - position: absolute; - top: 7px; - left: 0; - width: 6px; - height: 6px; - content: ""; - background-color: $color-dark; - border-radius: 100%; - - @include rtl { - right: -15px; - left: inherit; - } + position: absolute; + top: 7px; + left: 0; + width: 6px; + height: 6px; + content: ""; + background-color: $color-dark; + border-radius: 100%; + + @include rtl { + right: -15px; + left: inherit; + } } #{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); - - ul, - ol { - margin-top: var(--vertical-spaging-item); - margin-bottom: var(--vertical-spaging-item); - } - } - } - - ul { - &:not([class*="no-list-style"]):not([role="list"]):not(.chosen-choices):not(.chosen-results) { - list-style-type: none; - - li { - position: relative; - padding-left: var(--offset-item); - margin-bottom: var(--vertical-spaging-item); - - @include rtl { - padding-right: var(--offset-item); - padding-left: 0; - } - - &::before { - @extend %marker-ul-default; - } - } - - ul { - margin-top: var(--vertical-spaging-item); - margin-bottom: var(--vertical-spaging-item); - } - } - } - - ol { - padding-left: 10px; - - &:not([class*="no-list-style"]):not([role="list"]) { - > li { - padding-left: calc(var(--offset-item) * .5); - margin-bottom: var(--vertical-spaging-item); - margin-left: calc(var(--offset-item) * .5); - - @include rtl { - padding-right: calc(var(--offset-item) * .5); - padding-left: 0; - margin-right: calc(var(--offset-item) * .5); - margin-left: 0; - } - } - - li { - &::marker { - @extend %marker-ol-default; - } - - ol { - margin-top: var(--vertical-spaging-item); - margin-bottom: var(--vertical-spaging-item); - } - - ul { - margin-top: var(--vertical-spaging-item); - margin-bottom: var(--vertical-spaging-item); - - li { - padding-top: 0; - - &::before { - @extend %marker-ul-default; - transform: translateX(0); - } - } - } - - } - } - } - - dd { - margin: 0; - } + --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); + + ul, + ol { + margin-top: var(--vertical-spaging-item); + margin-bottom: var(--vertical-spaging-item); + } + } + } + + ul { + &:not([class*="no-list-style"]):not([role="list"]):not(.chosen-choices):not(.chosen-results) { + list-style-type: none; + + li { + position: relative; + padding-left: var(--offset-item); + margin-bottom: var(--vertical-spaging-item); + + @include rtl { + padding-right: var(--offset-item); + padding-left: 0; + } + + &::before { + @extend %marker-ul-default; + } + } + + ul { + margin-top: var(--vertical-spaging-item); + margin-bottom: var(--vertical-spaging-item); + } + } + } + + ol { + padding-left: 10px; + + &:not([class*="no-list-style"]):not([role="list"]) { + > li { + padding-left: calc(var(--offset-item) * .5); + margin-bottom: var(--vertical-spaging-item); + margin-left: calc(var(--offset-item) * .5); + + @include rtl { + padding-right: calc(var(--offset-item) * .5); + padding-left: 0; + margin-right: calc(var(--offset-item) * .5); + margin-left: 0; + } + } + + li { + &::marker { + @extend %marker-ol-default; + } + + ol { + margin-top: var(--vertical-spaging-item); + margin-bottom: var(--vertical-spaging-item); + } + + ul { + margin-top: var(--vertical-spaging-item); + margin-bottom: var(--vertical-spaging-item); + + li { + padding-top: 0; + + &::before { + @extend %marker-ul-default; + transform: translateX(0); + } + } + } + + } + } + } + + dd { + margin: 0; + } } diff --git a/src/scss/06-blocks/core/_media-text.scss b/src/scss/06-blocks/core/_media-text.scss index 86417a4e..a55bd92c 100644 --- a/src/scss/06-blocks/core/_media-text.scss +++ b/src/scss/06-blocks/core/_media-text.scss @@ -3,21 +3,21 @@ @use "../../02-tools/m-style-only" as *; .wp-block-media-text { - @include rtl { - direction: rtl; // Force direction RTL, because WP force LTR direction on RTL view - } + @include rtl { + direction: rtl; // Force direction RTL, because WP force LTR direction on RTL view + } - @include style-only { - &.alignfull { - margin-top: 0; - margin-bottom: 0; - } - } + @include style-only { + &.alignfull { + margin-top: 0; + margin-bottom: 0; + } + } - @include editor-only { - [data-align="full"] & { - margin-top: 0; - margin-bottom: 0; - } - } + @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 998df4d7..4e60ae4a 100644 --- a/src/scss/06-blocks/core/_paragraph.scss +++ b/src/scss/06-blocks/core/_paragraph.scss @@ -3,15 +3,15 @@ $paragraphs: "default", "small", "large", "huge"; p { - @include text(default); + @include text(default); - &.has-background { - padding: 20px; - } + &.has-background { + padding: 20px; + } - @each $style in $paragraphs { - &.is-style-#{$style} { - @include text(#{$style}); - } - } + @each $style in $paragraphs { + &.is-style-#{$style} { + @include text(#{$style}); + } + } } diff --git a/src/scss/06-blocks/core/_preformatted.scss b/src/scss/06-blocks/core/_preformatted.scss index 37f2b7a4..a923bc25 100644 --- a/src/scss/06-blocks/core/_preformatted.scss +++ b/src/scss/06-blocks/core/_preformatted.scss @@ -2,13 +2,13 @@ @use "../../02-tools/m-style-only" as *; .wp-block-preformatted { - overflow-x: auto; + overflow-x: auto; - @include style-only { - white-space: pre; - } + @include style-only { + white-space: pre; + } - @include editor-only { - white-space: pre !important; - } + @include editor-only { + white-space: pre !important; + } } diff --git a/src/scss/06-blocks/core/_quote.scss b/src/scss/06-blocks/core/_quote.scss index 7e359504..799228d7 100644 --- a/src/scss/06-blocks/core/_quote.scss +++ b/src/scss/06-blocks/core/_quote.scss @@ -1,15 +1,15 @@ .wp-block-quote { - // Override for WordPress base wp-block-quote style for RTL compatibility - padding-left: 0; - padding-inline-start: 20px; // stylelint-disable-line order/properties-order - border-left: 0; - border-inline-start: 5px solid currentColor; // stylelint-disable-line order/properties-order + // Override for WordPress base wp-block-quote style for RTL compatibility + padding-left: 0; + padding-inline-start: 20px; // stylelint-disable-line order/properties-order + border-left: 0; + border-inline-start: 5px solid currentColor; // stylelint-disable-line order/properties-order - // p { - // ... - // } - // &__citation, - // cite { - // ... - // } + // p { + // ... + // } + // &__citation, + // cite { + // ... + // } } diff --git a/src/scss/06-blocks/core/_search.scss b/src/scss/06-blocks/core/_search.scss index 785871c7..ebfaf9d1 100644 --- a/src/scss/06-blocks/core/_search.scss +++ b/src/scss/06-blocks/core/_search.scss @@ -1,13 +1,13 @@ @use "../../05-components/btn"; .wp-block-search { - $el: &; + $el: &; - #{$el}__input { - width: auto; - } + #{$el}__input { + width: auto; + } - &__button { - @extend %btn-block; - } + &__button { + @extend %btn-block; + } } diff --git a/src/scss/06-blocks/core/_separator.scss b/src/scss/06-blocks/core/_separator.scss index 8141eb38..df0c8ca7 100644 --- a/src/scss/06-blocks/core/_separator.scss +++ b/src/scss/06-blocks/core/_separator.scss @@ -1,25 +1,25 @@ @use "../../02-tools/m-editor-only" as *; hr { - margin-right: auto; - margin-left: auto; - clear: both; - border-style: none; + margin-right: auto; + margin-left: auto; + clear: both; + border-style: none; - &.wp-block-separator { - // style - } + &.wp-block-separator { + // style + } } @include editor-only { - .wp-block-separator, - hr { - clear: both; + .wp-block-separator, + hr { + clear: both; - [data-align="full"] > &, - [data-align="wide"] > & { - max-width: inherit; - } + [data-align="full"] > &, + [data-align="wide"] > & { + max-width: inherit; + } - } + } } diff --git a/src/scss/06-blocks/core/_table.scss b/src/scss/06-blocks/core/_table.scss index effc2c9f..767bc828 100644 --- a/src/scss/06-blocks/core/_table.scss +++ b/src/scss/06-blocks/core/_table.scss @@ -1,18 +1,18 @@ @use "../../02-tools/m-not-acf" as *; %table { - width: 100%; - min-width: 240px; - border-collapse: collapse; + width: 100%; + min-width: 240px; + border-collapse: collapse; } .wp-block-table { - @extend %table; + @extend %table; } // Not apply style to ACF fields @include not-acf { - table { - @extend %table; - } + table { + @extend %table; + } } diff --git a/src/scss/06-blocks/core/_video.scss b/src/scss/06-blocks/core/_video.scss index 171f1c54..206ad6f8 100644 --- a/src/scss/06-blocks/core/_video.scss +++ b/src/scss/06-blocks/core/_video.scss @@ -1,11 +1,11 @@ .wp-block-video { - figcaption { - text-align: center; - } + figcaption { + text-align: center; + } } * > figure > video { - width: 100%; - max-width: unset; - vertical-align: middle; + width: 100%; + max-width: unset; + vertical-align: middle; } diff --git a/src/scss/08-template-parts/_footer.scss b/src/scss/08-template-parts/_footer.scss index c1911c5b..46c9acd6 100644 --- a/src/scss/08-template-parts/_footer.scss +++ b/src/scss/08-template-parts/_footer.scss @@ -3,7 +3,7 @@ */ .footer { - $el: &; + $el: &; - text-align: center; + text-align: center; } diff --git a/src/scss/08-template-parts/_header.scss b/src/scss/08-template-parts/_header.scss index e2e818cd..83051742 100644 --- a/src/scss/08-template-parts/_header.scss +++ b/src/scss/08-template-parts/_header.scss @@ -10,385 +10,384 @@ */ .header { - $el: &; - - height: 76px; - - &__inner { - position: fixed; - top: var(--wp-admin-bar-height); - z-index: 10; - width: 100%; - background: var(--wp--preset--color--cyan-bluish-gray); - } - - .container { - padding-top: 26px; - padding-bottom: 28px; - } - - &__logo-link { - display: block; - width: 124px; - - img { - max-width: 100%; - height: auto; - } - } - - &__menu-toggle { - position: absolute; - top: 14px; - right: var(--responsive--gutter); - z-index: 2; - width: 46px; - height: 46px; - padding: 0; - cursor: pointer; - background: $color-text; - border: none; - border-radius: 50%; - - @include rtl { - right: auto; - left: var(--responsive--gutter); - } - - > span { - position: absolute; - top: 50%; - left: 50%; - width: 20px; - height: 2px; - margin: -1px 0 0 -10px; - background: $color-light; - border-radius: 2px; - transition: background-color .5s $ease-in-out-expo; - - &::before, - &::after { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - content: ""; - background: $color-light; - border-radius: inherit; - transition: transform .5s $ease-in-out-expo; - } - - &::before { - transform: translateY(-6px); - } - - &::after { - transform: translateY(6px); - } - } - } - - &__menu-list { - margin: 0; - font-size: 14px; - letter-spacing: 1px; - list-style: none; - - li + li { - margin-top: 22px; - } - - a { - color: inherit; - } - - .menu-item-has-children { - position: relative; - - > a { - display: inline-block; - max-width: calc(100% - 50px); - } - } - - .has-sub-menu-open { - > #{$el}__sub-menu-toggle::before { - transform: translateY(-50%) rotate(225deg); - } - } - } - - &__sub-menu-toggle { - position: absolute; - top: 7px; - right: -18px; - z-index: 1; - width: 50px; - height: 50px; - padding: 0; - color: $color-dark; - text-indent: -10000px; - vertical-align: middle; - cursor: pointer; - background: none; - border: none; - - &::before { - position: absolute; - top: 50%; - left: 50%; - width: 6px; - height: 6px; - margin: 0 0 0 -3px; - content: ""; - border-color: currentColor; - border-style: solid; - border-width: 0 2px 2px 0; - transition: transform .3s ease-in-out; - transform: translateY(-50%) rotate(45deg); - } - } - - &__sub-menu { - &-level-0, - &-level-1, - // sub menu after level 1 will not be displayed - &-level-2 { - display: none; - overflow: hidden; - } - - #{$el}__sub-menu-toggle { - top: -15px; - } - } - - &--menu-is-open { - #{$el}__menu-toggle { - > span { - background: rgba($color-light, 0); - - &::before { - transform: rotate(135deg); - } - - &::after { - transform: rotate(-135deg); - } - } - } - } - - @include breakpoints(mdl, max) { - &__menu { - position: absolute; - top: 0; - left: 0; - z-index: 1; - display: none; - width: 100%; - height: 100vh; - overflow: auto; - background: $color-primary; - transform: translateX(-100%); - - @include rtl { - transform: translateX(100%); - } - - > div { - padding: 76px calc(var(--responsive--gutter) * 2) 25px; - } - } - - &__menu-list { - width: 100%; - padding-bottom: 22px; - - > li { - padding-top: 22px; - - + li { - border-top: 1px solid $color-dark; - } - } - } - - &__sub-menu > div { - padding-top: 38px; - padding-bottom: 10px; - } - } - - @include breakpoints(sm) { - &__menu { - #{$el}__logo-link { - display: none; - } - } - } - - @include breakpoints(sm, mdl) { - #{$el}__menu { - right: 0; - left: auto; - width: column(6); - transform: translateX(100%); - - @include rtl { - right: auto; - left: 0; - transform: translateX(-100%); - } - - > div { - padding: column(2, 2) column(1, 1, 6); - } - } - } - - @include breakpoints(mdl) { - .container { - display: flex; - align-items: flex-start; - justify-content: space-between; - } - - &__logo-link { - width: 146px; - } - - &__menu-toggle { - display: none; - } - - &__menu { - width: column(9); - - > div { - text-align: right; - - @include rtl { - text-align: left; - } - } - } - - &__menu-list { - color: $color-text; - - li + li { - margin-top: 12px; - } - - > li { - display: inline; - text-align: start; - - @include rtl { - text-align: right; - } - - + li { - margin-inline-start: 28px; - } - - &.menu-item-has-children { - padding-bottom: 38px; - - > a { - max-width: none; - margin-inline-end: 14px; - } - } - } - - .menu-item-has-children { - @include hover { - > #{$el}__sub-menu { - .no-js & { - display: block; - } - } - } - } - } - - &__sub-menu-toggle { - top: 8px; - right: 0; - width: 6px; - height: 6px; - - @include rtl { - right: auto; - left: 0; - } - } - - &__sub-menu { - > div { - padding-top: 10px; - padding-bottom: 10px; - } - - &-level-0 { - position: absolute; - top: calc(100% - 20px); - left: 50%; - z-index: 1; - width: 314px; - margin-left: -157px; - - &::before, - &::after { - position: absolute; - content: ""; - background: $color-primary; - } - - &::before { - top: 19px; - left: 0; - z-index: -1; - width: 100%; - height: calc(100% - 19px); - } - - &::after { - top: 19px; - left: 50%; - width: 20px; - height: 20px; - border-width: 1px 1px 0 0; - transform: translate(-50%, -50%) rotate(-45deg); - } - - > div { - padding: (36px + 19px) 30px 36px; - - > ul { - > li { - &.menu-item-has-children { - a { - max-width: calc(100% - 25px); - } - } - } - } - } - } - - a { - display: block; - } - - #{$el}__sub-menu-toggle { - top: .7em; - right: 0; - color: inherit; - } - } - } + $el: &; + + height: 76px; + + &__inner { + position: fixed; + top: var(--wp-admin-bar-height); + z-index: 10; + width: 100%; + background: var(--wp--preset--color--cyan-bluish-gray); + } + + .container { + padding-top: 26px; + padding-bottom: 28px; + } + + &__logo-link { + display: block; + width: 124px; + + img { + max-width: 100%; + height: auto; + } + } + + &__menu-toggle { + position: absolute; + top: 14px; + right: var(--responsive--gutter); + z-index: 2; + width: 46px; + height: 46px; + padding: 0; + cursor: pointer; + background: $color-text; + border: none; + border-radius: 50%; + + @include rtl { + right: auto; + left: var(--responsive--gutter); + } + + > span { + position: absolute; + top: 50%; + left: 50%; + width: 20px; + height: 2px; + margin: -1px 0 0 -10px; + background: $color-light; + border-radius: 2px; + transition: background-color .5s $ease-in-out-expo; + + &::before, + &::after { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + content: ""; + background: $color-light; + border-radius: inherit; + transition: transform .5s $ease-in-out-expo; + } + + &::before { + transform: translateY(-6px); + } + + &::after { + transform: translateY(6px); + } + } + } + + &__menu-list { + margin: 0; + font-size: 14px; + letter-spacing: 1px; + list-style: none; + + li + li { + margin-top: 22px; + } + + a { + color: inherit; + } + + .menu-item-has-children { + position: relative; + + > a { + display: inline-block; + max-width: calc(100% - 50px); + } + } + + .has-sub-menu-open { + > #{$el}__sub-menu-toggle::before { + transform: translateY(-50%) rotate(225deg); + } + } + } + + &__sub-menu-toggle { + position: absolute; + top: 7px; + right: -18px; + z-index: 1; + width: 50px; + height: 50px; + padding: 0; + color: $color-dark; + text-indent: -10000px; + vertical-align: middle; + cursor: pointer; + background: none; + border: none; + + &::before { + position: absolute; + top: 50%; + left: 50%; + width: 6px; + height: 6px; + margin: 0 0 0 -3px; + content: ""; + border-color: currentColor; + border-style: solid; + border-width: 0 2px 2px 0; + transition: transform .3s ease-in-out; + transform: translateY(-50%) rotate(45deg); + } + } + + &__sub-menu { + &-level-0, + &-level-1, + &-level-2 { + display: none; + overflow: hidden; + } + + #{$el}__sub-menu-toggle { + top: -15px; + } + } + + &--menu-is-open { + #{$el}__menu-toggle { + > span { + background: rgba($color-light, 0); + + &::before { + transform: rotate(135deg); + } + + &::after { + transform: rotate(-135deg); + } + } + } + } + + @include breakpoints(mdl, max) { + &__menu { + position: absolute; + top: 0; + left: 0; + z-index: 1; + display: none; + width: 100%; + height: 100vh; + overflow: auto; + background: $color-primary; + transform: translateX(-100%); + + @include rtl { + transform: translateX(100%); + } + + > div { + padding: 76px calc(var(--responsive--gutter) * 2) 25px; + } + } + + &__menu-list { + width: 100%; + padding-bottom: 22px; + + > li { + padding-top: 22px; + + + li { + border-top: 1px solid $color-dark; + } + } + } + + &__sub-menu > div { + padding-top: 38px; + padding-bottom: 10px; + } + } + + @include breakpoints(sm) { + &__menu { + #{$el}__logo-link { + display: none; + } + } + } + + @include breakpoints(sm, mdl) { + #{$el}__menu { + right: 0; + left: auto; + width: column(6); + transform: translateX(100%); + + @include rtl { + right: auto; + left: 0; + transform: translateX(-100%); + } + + > div { + padding: column(2, 2) column(1, 1, 6); + } + } + } + + @include breakpoints(mdl) { + .container { + display: flex; + align-items: flex-start; + justify-content: space-between; + } + + &__logo-link { + width: 146px; + } + + &__menu-toggle { + display: none; + } + + &__menu { + width: column(9); + + > div { + text-align: right; + + @include rtl { + text-align: left; + } + } + } + + &__menu-list { + color: $color-text; + + li + li { + margin-top: 12px; + } + + > li { + display: inline; + text-align: start; + + @include rtl { + text-align: right; + } + + + li { + margin-inline-start: 28px; + } + + &.menu-item-has-children { + padding-bottom: 38px; + + > a { + max-width: none; + margin-inline-end: 14px; + } + } + } + + .menu-item-has-children { + @include hover { + > #{$el}__sub-menu { + .no-js & { + display: block; + } + } + } + } + } + + &__sub-menu-toggle { + top: 8px; + right: 0; + width: 6px; + height: 6px; + + @include rtl { + right: auto; + left: 0; + } + } + + &__sub-menu { + > div { + padding-top: 10px; + padding-bottom: 10px; + } + + &-level-0 { + position: absolute; + top: calc(100% - 20px); + left: 50%; + z-index: 1; + width: 314px; + margin-left: -157px; + + &::before, + &::after { + position: absolute; + content: ""; + background: $color-primary; + } + + &::before { + top: 19px; + left: 0; + z-index: -1; + width: 100%; + height: calc(100% - 19px); + } + + &::after { + top: 19px; + left: 50%; + width: 20px; + height: 20px; + border-width: 1px 1px 0 0; + transform: translate(-50%, -50%) rotate(-45deg); + } + + > div { + padding: (36px + 19px) 30px 36px; + + > ul { + > li { + &.menu-item-has-children { + a { + max-width: calc(100% - 25px); + } + } + } + } + } + } + + a { + display: block; + } + + #{$el}__sub-menu-toggle { + top: .7em; + right: 0; + color: inherit; + } + } + } } diff --git a/src/scss/08-template-parts/_hero.scss b/src/scss/08-template-parts/_hero.scss index b77f2f08..aaa73f19 100644 --- a/src/scss/08-template-parts/_hero.scss +++ b/src/scss/08-template-parts/_hero.scss @@ -7,30 +7,30 @@ */ .hero { - @include row-fullwidth; + @include row-fullwidth; - padding: var(--spacing--block-1) 0; - margin-bottom: var(--spacing--block-1); + padding: var(--spacing--block-1) 0; + margin-bottom: var(--spacing--block-1); - .container { - position: relative; - z-index: 4; - padding: 20px; - background: rgba($color-light, .5); - } + .container { + position: relative; + z-index: 4; + padding: 20px; + background: rgba($color-light, .5); + } - &__img { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1; - width: 100%; - height: 100%; - } + &__img { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; + width: 100%; + height: 100%; + } - @include breakpoints(md) { - padding: 100px 0; - } + @include breakpoints(md) { + padding: 100px 0; + } } diff --git a/src/scss/login.scss b/src/scss/login.scss index e33adfdc..ad1fdd5f 100644 --- a/src/scss/login.scss +++ b/src/scss/login.scss @@ -16,78 +16,78 @@ $login-btn-hover-bg-color: #222; html, body { - &::before, - &::after { - display: none; - } + &::before, + &::after { + display: none; + } } body.login { - // screen background color - background: $login-body-bg-color; + // screen background color + background: $login-body-bg-color; - // logo (before login form) path and size - h1 a { - display: block; - width: 100%; - height: $login-logo-height; - background-image: url(#{$login-logo-path}); - background-repeat: no-repeat; - background-position: center center; - background-size: $login-logo-size; - } + // logo (before login form) path and size + h1 a { + display: block; + width: 100%; + height: $login-logo-height; + background-image: url(#{$login-logo-path}); + background-repeat: no-repeat; + background-position: center center; + background-size: $login-logo-size; + } - // default link styles - a { - color: $login-link-color; - text-decoration: none; + // default link styles + a { + color: $login-link-color; + text-decoration: none; - &:hover, - &:focus { - color: $login-link-hover-color; - text-decoration: underline; - } - } + &:hover, + &:focus { + color: $login-link-hover-color; + text-decoration: underline; + } + } - // notice block border-left colo - /* stylelint-disable-next-line selector-id-pattern */ - #login_error, - .message, - .success { - border-left-color: $login-text-color; - } + // notice block border-left colo + /* stylelint-disable-next-line selector-id-pattern */ + #login_error, + .message, + .success { + border-left-color: $login-text-color; + } - // remember input checkbox check color - input[type="checkbox"]:checked::before { - color: $login-remember-input-check-color; - } + // remember input checkbox check color + input[type="checkbox"]:checked::before { + color: $login-remember-input-check-color; + } - // link after login form styles - #nav, - #backtoblog { - a { - color: $login-link-color; + // link after login form styles + #nav, + #backtoblog { + a { + color: $login-link-color; - &:focus, - &:hover { - color: $login-link-hover-color; - text-decoration: underline; - } - } - } + &:focus, + &:hover { + color: $login-link-hover-color; + text-decoration: underline; + } + } + } } // submit login form button styles .wp-core-ui { - .button-primary { - text-shadow: none; - background-color: $login-btn-bg-color; - border: 0; - box-shadow: none; - transition: all .2s ease; + .button-primary { + text-shadow: none; + background-color: $login-btn-bg-color; + border: 0; + box-shadow: none; + transition: all .2s ease; - &:hover { - background-color: $login-btn-hover-bg-color; - } - } + &:hover { + background-color: $login-btn-hover-bg-color; + } + } } From 86927d742ed4f6225f03f8fbfb76c8f5726a3be0 Mon Sep 17 00:00:00 2001 From: mricoul Date: Tue, 3 Jun 2025 15:26:51 +0200 Subject: [PATCH 2/3] style (js): enforces tab indentation in codebase Updates ESLint configuration to enforce tab indentation for improved code readability and consistency. Also, applies tab indentation to existing JavaScript files. --- .eslintrc | 5 +- src/js/classes/AbstractDomElement.js | 218 +++++++------- src/js/classes/Animation.js | 428 +++++++++++++-------------- src/js/classes/ButtonSeoClick.js | 30 +- src/js/classes/Header.js | 410 ++++++++++++------------- src/js/classes/ImageBlock.js | 24 +- src/js/classes/ScrollDirection.js | 156 +++++----- src/js/editor.js | 44 +-- src/js/post-build.js | 2 +- src/js/utils/extend.js | 30 +- src/js/utils/isPlainObject.js | 2 +- src/js/utils/isRTL.js | 28 +- src/js/utils/openUrlInNewTab.js | 10 +- 13 files changed, 694 insertions(+), 693 deletions(-) diff --git a/.eslintrc b/.eslintrc index 2baae0f2..15d02c73 100644 --- a/.eslintrc +++ b/.eslintrc @@ -14,6 +14,7 @@ "sourceType": "module" }, "rules": { + "indent": ["error", "tab"], "no-console": "off", "strict": ["error", "global"], "curly": "warn", @@ -26,7 +27,7 @@ "singleQuote": true, "printWidth": 120, "semi": false, - "useTabs": false + "useTabs": true } ] }, @@ -34,4 +35,4 @@ "jQuery": true, "wp": true } - } \ No newline at end of file + } diff --git a/src/js/classes/AbstractDomElement.js b/src/js/classes/AbstractDomElement.js index d42e7476..25eb237c 100644 --- a/src/js/classes/AbstractDomElement.js +++ b/src/js/classes/AbstractDomElement.js @@ -31,127 +31,127 @@ import extend from '../utils/extend.js' class AbstractDomElement { - constructor(element, options) { - let oldInstance - - // provide an explicit spaceName to prevent conflict after minification - // MaClass.nameSpace = 'MaClass' - this.constructor.nameSpace = this.constructor.nameSpace || this.constructor.name - const nameSpace = this.constructor.nameSpace - - // if no spacename beapi, create it - avoid futur test - if (!element.beapi) { - element.beapi = {} - } - - oldInstance = element.beapi[nameSpace] - - if (oldInstance) { - console.warn( - '[AbstractDomElement] more than 1 class is initialised with the same name space on :', - element, - oldInstance - ) - oldInstance._isNewInstance = false - return oldInstance - } - - this._element = element - this._settings = extend(true, {}, this.constructor.defaults, options) - this._element.beapi[nameSpace] = this - this._isNewInstance = true - } - - isNewInstance() { - return this._isNewInstance - } - - destroy() { - this._element.beapi[this.constructor.nameSpace] = undefined - return this - } - - static init(element, options) { - foreach(element, (el) => { - new this(el, options) - }) - - return this - } - - static hasInstance(element) { - const el = getDomElement(element) - return el && el.beapi && !!el.beapi[this.nameSpace] - } - - static getInstance(element) { - const el = getDomElement(element) - return el && el.beapi ? el.beapi[this.nameSpace] : undefined - } - - static destroy(element) { - this.foreach(element, (el) => { - if (el.beapi && el.beapi[this.nameSpace]) { - el.beapi[this.nameSpace].destroy() - } - }) - - return this - } - - static foreach(element, callback) { - foreach(element, (el) => { - if (el.beapi && el.beapi[this.nameSpace]) { - callback(el) - } - }) - - return this - } - - static initFromPreset() { - const preset = this.preset - let selector - - for (selector in preset) { - this.init(selector, preset[selector]) - } - - return this - } - - static destroyFromPreset() { - const preset = this.preset - let selector - - for (selector in preset) { - this.destroy(selector) - } - - return this - } + constructor(element, options) { + let oldInstance + + // provide an explicit spaceName to prevent conflict after minification + // MaClass.nameSpace = 'MaClass' + this.constructor.nameSpace = this.constructor.nameSpace || this.constructor.name + const nameSpace = this.constructor.nameSpace + + // if no spacename beapi, create it - avoid futur test + if (!element.beapi) { + element.beapi = {} + } + + oldInstance = element.beapi[nameSpace] + + if (oldInstance) { + console.warn( + '[AbstractDomElement] more than 1 class is initialised with the same name space on :', + element, + oldInstance + ) + oldInstance._isNewInstance = false + return oldInstance + } + + this._element = element + this._settings = extend(true, {}, this.constructor.defaults, options) + this._element.beapi[nameSpace] = this + this._isNewInstance = true + } + + isNewInstance() { + return this._isNewInstance + } + + destroy() { + this._element.beapi[this.constructor.nameSpace] = undefined + return this + } + + static init(element, options) { + foreach(element, (el) => { + new this(el, options) + }) + + return this + } + + static hasInstance(element) { + const el = getDomElement(element) + return el && el.beapi && !!el.beapi[this.nameSpace] + } + + static getInstance(element) { + const el = getDomElement(element) + return el && el.beapi ? el.beapi[this.nameSpace] : undefined + } + + static destroy(element) { + this.foreach(element, (el) => { + if (el.beapi && el.beapi[this.nameSpace]) { + el.beapi[this.nameSpace].destroy() + } + }) + + return this + } + + static foreach(element, callback) { + foreach(element, (el) => { + if (el.beapi && el.beapi[this.nameSpace]) { + callback(el) + } + }) + + return this + } + + static initFromPreset() { + const preset = this.preset + let selector + + for (selector in preset) { + this.init(selector, preset[selector]) + } + + return this + } + + static destroyFromPreset() { + const preset = this.preset + let selector + + for (selector in preset) { + this.destroy(selector) + } + + return this + } } // ---- // utils // ---- function foreach(element, callback) { - const el = getDomElements(element) - let i - - for (i = 0; i < el.length; i++) { - if (callback(el[i]) === false) { - break - } - } + const el = getDomElements(element) + let i + + for (i = 0; i < el.length; i++) { + if (callback(el[i]) === false) { + break + } + } } function getDomElements(element) { - return typeof element === 'string' ? document.querySelectorAll(element) : element.length >= 0 ? element : [element] + return typeof element === 'string' ? document.querySelectorAll(element) : element.length >= 0 ? element : [element] } function getDomElement(element) { - return getDomElements(element)[0] + return getDomElements(element)[0] } // ---- diff --git a/src/js/classes/Animation.js b/src/js/classes/Animation.js index 2a778d28..3c27bfbc 100644 --- a/src/js/classes/Animation.js +++ b/src/js/classes/Animation.js @@ -14,171 +14,171 @@ let resize // class Animation // ---- class Animation extends AbstractDomElement { - /** - * Animation constructor - * @param {HTMLElement} element - * @param {object} options - */ - constructor(element, options) { - const instance = super(element, options) - - // avoid double init : - if (!instance.isNewInstance()) { - return instance - } - - const that = this - const el = this._element - const s = this._settings - const start = getValue(el, s.start) - const end = getValue(el, s.end) - const callbacksSharedData = {} - - this._elementHeight = this._element.offsetHeight - this._windowHeight = window.innerHeight - this._onResize = onResize.bind(this) - this._isVisible = false - this._callbacksSharedData = callbacksSharedData - - // add to instances - instances.push(this) - - if (instances.length === 1) { - window.addEventListener('beforeprint', onBeforePrint) - window.addEventListener('afterprint', onAfterPrint) - } - - // init scrollObserver and throttledEvent - if (!scrollObserver) { - scrollObserver = new ScrollObserver() - resize = new ThrottledEvent(window, 'resize') - } - - resize.add('resize', this._onResize) - - // add animation class - el.classList.add(s.animationClass) - - // intialize callback - s.onInit(el, scrollObserver.getScrollInfos(), callbacksSharedData) - - // add element to scrollObserver - scrollObserver.observe(el, { - onVisible: function (scrollInfos, percentRTW) { - const pStart = (this.distanceRTW.y * percentRTW.y) / that._windowHeight - const pEnd = (this.distanceRTW.y * percentRTW.y) / (that._windowHeight + that._elementHeight) - - if (!that._isVisible && pStart >= start && pEnd <= end) { - // show element - that._isVisible = true - s.onShow(el, scrollInfos, callbacksSharedData) - el.classList.add(s.visibleClass) - - // destroy if playOnce = true - if (s.playOnce) { - that.destroy(el, scrollInfos, callbacksSharedData) - } - } else if (that._isVisible && (pStart < start || (pEnd > end && s.hideOnReachEnd))) { - // hide element - that._isVisible = false - s.onHide(el, scrollInfos, callbacksSharedData) - el.classList.remove(s.visibleClass) - } - }, - }) - } - - /** - * Is visible - * @returns {boolean} - */ - isVisible() { - return this._isVisible - } - - /** - * Destroy - * @returns {undefined} - */ - destroy() { - const el = this._element - const s = this._settings - const index = instances.indexOf(this) - const callbacksSharedData = this._callbacksSharedData - let scrollInfos - - if (index === -1) { - return - } - - super.destroy() - - scrollInfos = scrollObserver.getScrollInfos() - instances.splice(index, 1) - - if (s.showOnDestroy) { - s.onShow(el, scrollInfos, callbacksSharedData) - el.classList.add(s.visibleClass) - } - - scrollObserver.unobserve(el) - resize.remove('resize', this._onResize) - - if (!scrollObserver.hasEntry()) { - scrollObserver = scrollObserver.destroy() - resize = resize.destroy() - } - - if (instances.length === 0) { - window.removeEventListener('beforeprint', onBeforePrint) - window.removeEventListener('afterprint', onAfterPrint) - } - - this._settings.onDestroy(el, scrollInfos, callbacksSharedData) - } - - /** - * Static destroy - * @returns {undefined} - */ - static destroy() { - while (instances.length) { - instances[0].destroy() - } - } - - /** - * Static are animations enabled - * @returns {boolean} - */ - static areAnimationsEnbaled() { - return document.documentElement.classList.contains(animationClass) - } + /** + * Animation constructor + * @param {HTMLElement} element + * @param {object} options + */ + constructor(element, options) { + const instance = super(element, options) + + // avoid double init : + if (!instance.isNewInstance()) { + return instance + } + + const that = this + const el = this._element + const s = this._settings + const start = getValue(el, s.start) + const end = getValue(el, s.end) + const callbacksSharedData = {} + + this._elementHeight = this._element.offsetHeight + this._windowHeight = window.innerHeight + this._onResize = onResize.bind(this) + this._isVisible = false + this._callbacksSharedData = callbacksSharedData + + // add to instances + instances.push(this) + + if (instances.length === 1) { + window.addEventListener('beforeprint', onBeforePrint) + window.addEventListener('afterprint', onAfterPrint) + } + + // init scrollObserver and throttledEvent + if (!scrollObserver) { + scrollObserver = new ScrollObserver() + resize = new ThrottledEvent(window, 'resize') + } + + resize.add('resize', this._onResize) + + // add animation class + el.classList.add(s.animationClass) + + // intialize callback + s.onInit(el, scrollObserver.getScrollInfos(), callbacksSharedData) + + // add element to scrollObserver + scrollObserver.observe(el, { + onVisible: function (scrollInfos, percentRTW) { + const pStart = (this.distanceRTW.y * percentRTW.y) / that._windowHeight + const pEnd = (this.distanceRTW.y * percentRTW.y) / (that._windowHeight + that._elementHeight) + + if (!that._isVisible && pStart >= start && pEnd <= end) { + // show element + that._isVisible = true + s.onShow(el, scrollInfos, callbacksSharedData) + el.classList.add(s.visibleClass) + + // destroy if playOnce = true + if (s.playOnce) { + that.destroy(el, scrollInfos, callbacksSharedData) + } + } else if (that._isVisible && (pStart < start || (pEnd > end && s.hideOnReachEnd))) { + // hide element + that._isVisible = false + s.onHide(el, scrollInfos, callbacksSharedData) + el.classList.remove(s.visibleClass) + } + }, + }) + } + + /** + * Is visible + * @returns {boolean} + */ + isVisible() { + return this._isVisible + } + + /** + * Destroy + * @returns {undefined} + */ + destroy() { + const el = this._element + const s = this._settings + const index = instances.indexOf(this) + const callbacksSharedData = this._callbacksSharedData + let scrollInfos + + if (index === -1) { + return + } + + super.destroy() + + scrollInfos = scrollObserver.getScrollInfos() + instances.splice(index, 1) + + if (s.showOnDestroy) { + s.onShow(el, scrollInfos, callbacksSharedData) + el.classList.add(s.visibleClass) + } + + scrollObserver.unobserve(el) + resize.remove('resize', this._onResize) + + if (!scrollObserver.hasEntry()) { + scrollObserver = scrollObserver.destroy() + resize = resize.destroy() + } + + if (instances.length === 0) { + window.removeEventListener('beforeprint', onBeforePrint) + window.removeEventListener('afterprint', onAfterPrint) + } + + this._settings.onDestroy(el, scrollInfos, callbacksSharedData) + } + + /** + * Static destroy + * @returns {undefined} + */ + static destroy() { + while (instances.length) { + instances[0].destroy() + } + } + + /** + * Static are animations enabled + * @returns {boolean} + */ + static areAnimationsEnbaled() { + return document.documentElement.classList.contains(animationClass) + } } // ---- // defaults // ---- Animation.defaults = { - // wanted animation, the class will be added on the element if is not already on it - animationClass: 'js-animation-opacity', - // class added when the element is in the start/end range - visibleClass: 'is-visible', - // start (relative to bottom of the screen), can be a float, a function (element) {} or an array of two values (range) [] - start: 0.25, - // end (relative to bottom of the screen), can be a float, a function (element) {} or an array of two values (range) [] - end: 0.75, - // if true, the instance will be destroyed after the element is visible - playOnce: false, - // if true, remove the visible class when the element reach the end paramter value - hideOnReachEnd: false, - // if true, set the element visible on destroy whatever the current scroll value - showOnDestroy: true, - // for each callback : function (element, scrollInfos, callbacksSharedData) - onInit: noop, - onShow: noop, - onHide: noop, - onDestroy: noop, + // wanted animation, the class will be added on the element if is not already on it + animationClass: 'js-animation-opacity', + // class added when the element is in the start/end range + visibleClass: 'is-visible', + // start (relative to bottom of the screen), can be a float, a function (element) {} or an array of two values (range) [] + start: 0.25, + // end (relative to bottom of the screen), can be a float, a function (element) {} or an array of two values (range) [] + end: 0.75, + // if true, the instance will be destroyed after the element is visible + playOnce: false, + // if true, remove the visible class when the element reach the end paramter value + hideOnReachEnd: false, + // if true, set the element visible on destroy whatever the current scroll value + showOnDestroy: true, + // for each callback : function (element, scrollInfos, callbacksSharedData) + onInit: noop, + onShow: noop, + onHide: noop, + onDestroy: noop, } // ---- @@ -190,8 +190,8 @@ Animation.defaults = { * @returns {undefined} */ function onResize() { - this._elementHeight = this._element.offsetHeight - this._windowHeight = window.innerHeight + this._elementHeight = this._element.offsetHeight + this._windowHeight = window.innerHeight } /** @@ -199,14 +199,14 @@ function onResize() { * @returns {undefined} */ function onBeforePrint() { - document.documentElement.classList.remove(animationClass) + document.documentElement.classList.remove(animationClass) } /** * On after print * @returns {undefined} */ function onAfterPrint() { - document.documentElement.classList.add(animationClass) + document.documentElement.classList.add(animationClass) } // ---- @@ -219,65 +219,65 @@ function onAfterPrint() { * @returns {mixed} */ function getValue(element, value) { - let rt = value + let rt = value - if (typeof value === 'function') { - rt = value(element) - } else if (Array.isArray(value)) { - rt = Math.random() * (value[1] - value[0]) + value[0] - } + if (typeof value === 'function') { + rt = value(element) + } else if (Array.isArray(value)) { + rt = Math.random() * (value[1] - value[0]) + value[0] + } - return rt + return rt } // ---- // presets // ---- Animation.preset = { - '.js-animation .js-animation-opacity': undefined, - '.js-animation .js-animation-translation': { - animationClass: 'js-animation-translation', - start: [0.2, 0.25], - end: [0.75, 0.8], - onInit: function (el, scrollInfos, data) { - data.translate = Math.round(Math.random() * 100 + 100) * -1 - el.children[0].style.transitionDuration = Math.random() * 0.75 + 0.75 + 's' - }, - onShow: function (el, scrollInfos, data) { - el.children[0].style.transform = 'translateY(' + scrollInfos.direction.y * data.translate + 'px)' - }, - onHide: function (el, scrollInfos, data) { - el.children[0].style.transform = 'translateY(' + scrollInfos.direction.y * data.translate + 'px)' - }, - }, - '.js-animation .js-animation-title': { - animationClass: 'js-animation-title', - onInit: function (el, scrollInfos, data) { - document.fonts.ready.then(function () { - data.splittedText = new SplittedText(el, { - byLine: true, - lineWrapper: function (line) { - return '' + line + '' - }, - }) - - const children = el.getElementsByClassName('st-line') - const length = children.length - let i - - if (length > 1) { - for (i = 0; i < length; i++) { - children[i].children[0].style.transitionDelay = i / (length - 1) / 5 + 's' - } - } - - el.classList.add('is-ready') - }) - }, - onDestroy: function (el, scrollInfos, data) { - data.splittedText.destroy() - }, - }, + '.js-animation .js-animation-opacity': undefined, + '.js-animation .js-animation-translation': { + animationClass: 'js-animation-translation', + start: [0.2, 0.25], + end: [0.75, 0.8], + onInit: function (el, scrollInfos, data) { + data.translate = Math.round(Math.random() * 100 + 100) * -1 + el.children[0].style.transitionDuration = Math.random() * 0.75 + 0.75 + 's' + }, + onShow: function (el, scrollInfos, data) { + el.children[0].style.transform = 'translateY(' + scrollInfos.direction.y * data.translate + 'px)' + }, + onHide: function (el, scrollInfos, data) { + el.children[0].style.transform = 'translateY(' + scrollInfos.direction.y * data.translate + 'px)' + }, + }, + '.js-animation .js-animation-title': { + animationClass: 'js-animation-title', + onInit: function (el, scrollInfos, data) { + document.fonts.ready.then(function () { + data.splittedText = new SplittedText(el, { + byLine: true, + lineWrapper: function (line) { + return '' + line + '' + }, + }) + + const children = el.getElementsByClassName('st-line') + const length = children.length + let i + + if (length > 1) { + for (i = 0; i < length; i++) { + children[i].children[0].style.transitionDelay = i / (length - 1) / 5 + 's' + } + } + + el.classList.add('is-ready') + }) + }, + onDestroy: function (el, scrollInfos, data) { + data.splittedText.destroy() + }, + }, } // ---- diff --git a/src/js/classes/ButtonSeoClick.js b/src/js/classes/ButtonSeoClick.js index 0fff5210..7ebb5abb 100644 --- a/src/js/classes/ButtonSeoClick.js +++ b/src/js/classes/ButtonSeoClick.js @@ -5,27 +5,27 @@ import openUrlInNewTab from '../utils/openUrlInNewTab' // class // ---- class ButtonSeoClick extends AbstractDomElement { - constructor(element, options) { - const instance = super(element, options) + constructor(element, options) { + const instance = super(element, options) - // avoid double init : - if (!instance.isNewInstance()) { - return instance - } + // avoid double init : + if (!instance.isNewInstance()) { + return instance + } - this._element.addEventListener('click', onClickButton) - } + this._element.addEventListener('click', onClickButton) + } } function onClickButton(e) { - const target = e.currentTarget.getAttribute('data-target') - const href = e.currentTarget.getAttribute('data-href') + const target = e.currentTarget.getAttribute('data-target') + const href = e.currentTarget.getAttribute('data-href') - if (target === '_blank') { - openUrlInNewTab(href) - } else { - window.location.href = href - } + if (target === '_blank') { + openUrlInNewTab(href) + } else { + window.location.href = href + } } // ---- diff --git a/src/js/classes/Header.js b/src/js/classes/Header.js index a5c5d0dc..6a7312c3 100644 --- a/src/js/classes/Header.js +++ b/src/js/classes/Header.js @@ -3,245 +3,245 @@ import { Tween } from 'oneloop.js' import isRTL from '../utils/isRTL' class Header extends AbstractDomElement { - constructor(element, options) { - const instance = super(element, options) - - // avoid double init : - if (!instance.isNewInstance()) { - return instance - } - - const that = this - const el = this._element - const toggle = el.querySelector('.header__menu-toggle') - const menuList = el.querySelector('.header__menu-list') - const liWithChidren = el.querySelectorAll('.menu-item-has-children') - const menu = el.querySelector('.header__menu') - - this._menu = menu - this._toggle = toggle - this._openedSubMenu = null - this._mouseTimers = {} - this._menuTween = new Tween({ - autoStart: false, - reverse: true, - duration: 1000, - easing: 'easeInOutExpo', - onUpdate: function (timestamp, tick, percent) { - const bp = 768 - let direction = (window.innerWidth >= bp ? -1 : 1) * (isRTL() ? -1 : 1) - - menu.style.transform = 'translateX(' + 100 * (percent - 1) * direction + '%)' - }, - onComplete: function (timestamp, tick, lastValue) { - if (lastValue === 0) { - menu.style.display = '' - menu.style.transform = '' - } - }, - }) - - // avoid error for empty theme - if (menuList) { - for (const li of menuList.children) { - li.addEventListener('mouseenter', onMouseEnterFirstLevelLi.bind(that)) - } - - for (const li of liWithChidren) { - const subMenuToggle = li.children[1] - li.addEventListener('mouseenter', onMouseEnterLi.bind(that)) - li.addEventListener('mouseleave', onMouseLeaveLi.bind(that)) - - subMenuToggle.addEventListener('keypress', onKeyPressSubMenuToggle.bind(that)) - subMenuToggle.addEventListener('touchstart', onTouchStartSubMenuToggle.bind(that)) - } - - toggle.addEventListener('click', onClickToggle.bind(this)) - document.addEventListener('keyup', onKeyup.bind(this)) - } - } - - openMenu() { - this._menu.style.display = 'block' - this._element.classList.add(this._settings.menuOpenedClass) - this._toggle.setAttribute('aria-expanded', 'true') - this._menuTween.start() - - return this - } - - closeMenu() { - this._element.classList.remove(this._settings.menuOpenedClass) - this._toggle.setAttribute('aria-expanded', 'false') - this._menuTween.start() - - return this - } - - toggleMenu() { - return this[this.isMenuOpen() ? 'closeMenu' : 'openMenu']() - } - - isMenuOpen() { - return this._element.classList.contains(this._settings.menuOpenedClass) - } - - openSubMenu(liParent) { - const toggle = liParent.children[1] - const subMenu = liParent.children[2] - var childHeight - - this._openedSubMenu = subMenu - - subMenu.style.display = 'block' - subMenu.style.height = 0 - childHeight = subMenu.children[0].offsetHeight - - liParent.classList.add(this._settings.liSubMenuOpenedClass) - toggle.setAttribute('aria-expanded', 'true') - - new Tween({ - duration: 500, - easing: 'easeOutExpo', - onUpdate: function (timestamp, tick, percent) { - subMenu.style.height = childHeight * percent + 'px' - }, - onComplete: function () { - subMenu.style.height = 'auto' - }, - }) - - return this - } - - closeSubMenu(liParent) { - const toggle = liParent.children[1] - const subMenu = liParent.children[2] - const currentHeight = subMenu.offsetHeight - - this._openedSubMenu = null - - subMenu.style.height = currentHeight - - liParent.classList.remove(this._settings.liSubMenuOpenedClass) - toggle.setAttribute('aria-expanded', 'false') - - new Tween({ - duration: 500, - easing: 'easeOutExpo', - onUpdate: function (timestamp, tick, percent) { - subMenu.style.height = currentHeight * (1 - percent) + 'px' - }, - onComplete: function () { - subMenu.style.display = '' - }, - }) - - return this - } - - toggleSubMenu(liParent) { - return this[liParent.children[2].style.display === 'block' ? 'closeSubMenu' : 'openSubMenu'](liParent) - } + constructor(element, options) { + const instance = super(element, options) + + // avoid double init : + if (!instance.isNewInstance()) { + return instance + } + + const that = this + const el = this._element + const toggle = el.querySelector('.header__menu-toggle') + const menuList = el.querySelector('.header__menu-list') + const liWithChidren = el.querySelectorAll('.menu-item-has-children') + const menu = el.querySelector('.header__menu') + + this._menu = menu + this._toggle = toggle + this._openedSubMenu = null + this._mouseTimers = {} + this._menuTween = new Tween({ + autoStart: false, + reverse: true, + duration: 1000, + easing: 'easeInOutExpo', + onUpdate: function (timestamp, tick, percent) { + const bp = 768 + let direction = (window.innerWidth >= bp ? -1 : 1) * (isRTL() ? -1 : 1) + + menu.style.transform = 'translateX(' + 100 * (percent - 1) * direction + '%)' + }, + onComplete: function (timestamp, tick, lastValue) { + if (lastValue === 0) { + menu.style.display = '' + menu.style.transform = '' + } + }, + }) + + // avoid error for empty theme + if (menuList) { + for (const li of menuList.children) { + li.addEventListener('mouseenter', onMouseEnterFirstLevelLi.bind(that)) + } + + for (const li of liWithChidren) { + const subMenuToggle = li.children[1] + li.addEventListener('mouseenter', onMouseEnterLi.bind(that)) + li.addEventListener('mouseleave', onMouseLeaveLi.bind(that)) + + subMenuToggle.addEventListener('keypress', onKeyPressSubMenuToggle.bind(that)) + subMenuToggle.addEventListener('touchstart', onTouchStartSubMenuToggle.bind(that)) + } + + toggle.addEventListener('click', onClickToggle.bind(this)) + document.addEventListener('keyup', onKeyup.bind(this)) + } + } + + openMenu() { + this._menu.style.display = 'block' + this._element.classList.add(this._settings.menuOpenedClass) + this._toggle.setAttribute('aria-expanded', 'true') + this._menuTween.start() + + return this + } + + closeMenu() { + this._element.classList.remove(this._settings.menuOpenedClass) + this._toggle.setAttribute('aria-expanded', 'false') + this._menuTween.start() + + return this + } + + toggleMenu() { + return this[this.isMenuOpen() ? 'closeMenu' : 'openMenu']() + } + + isMenuOpen() { + return this._element.classList.contains(this._settings.menuOpenedClass) + } + + openSubMenu(liParent) { + const toggle = liParent.children[1] + const subMenu = liParent.children[2] + var childHeight + + this._openedSubMenu = subMenu + + subMenu.style.display = 'block' + subMenu.style.height = 0 + childHeight = subMenu.children[0].offsetHeight + + liParent.classList.add(this._settings.liSubMenuOpenedClass) + toggle.setAttribute('aria-expanded', 'true') + + new Tween({ + duration: 500, + easing: 'easeOutExpo', + onUpdate: function (timestamp, tick, percent) { + subMenu.style.height = childHeight * percent + 'px' + }, + onComplete: function () { + subMenu.style.height = 'auto' + }, + }) + + return this + } + + closeSubMenu(liParent) { + const toggle = liParent.children[1] + const subMenu = liParent.children[2] + const currentHeight = subMenu.offsetHeight + + this._openedSubMenu = null + + subMenu.style.height = currentHeight + + liParent.classList.remove(this._settings.liSubMenuOpenedClass) + toggle.setAttribute('aria-expanded', 'false') + + new Tween({ + duration: 500, + easing: 'easeOutExpo', + onUpdate: function (timestamp, tick, percent) { + subMenu.style.height = currentHeight * (1 - percent) + 'px' + }, + onComplete: function () { + subMenu.style.display = '' + }, + }) + + return this + } + + toggleSubMenu(liParent) { + return this[liParent.children[2].style.display === 'block' ? 'closeSubMenu' : 'openSubMenu'](liParent) + } } // ---- // defaults // ---- Header.defaults = { - menuOpenedClass: 'header--menu-is-open', - liSubMenuOpenedClass: 'has-sub-menu-open', + menuOpenedClass: 'header--menu-is-open', + liSubMenuOpenedClass: 'has-sub-menu-open', } // ---- // events // ---- function onKeyup(e) { - const activeElement = document.activeElement - - // escape - if (e.keyCode === 27) { - if (this._openedSubMenu && this._openedSubMenu.contains(activeElement)) { - this.closeSubMenu(this._openedSubMenu.parentNode) - } else if (this.isMenuOpen()) { - this.closeMenu() - } - } - // tab - else if (e.keyCode === 9 && !activeElement.classList.contains('header__sub-menu-toggle')) { - if (this._openedSubMenu && !this._openedSubMenu.contains(activeElement)) { - this.closeSubMenu(this._openedSubMenu.parentNode) - } - - if (this.isMenuOpen() && !this._element.contains(activeElement)) { - this.closeMenu() - } - } + const activeElement = document.activeElement + + // escape + if (e.keyCode === 27) { + if (this._openedSubMenu && this._openedSubMenu.contains(activeElement)) { + this.closeSubMenu(this._openedSubMenu.parentNode) + } else if (this.isMenuOpen()) { + this.closeMenu() + } + } + // tab + else if (e.keyCode === 9 && !activeElement.classList.contains('header__sub-menu-toggle')) { + if (this._openedSubMenu && !this._openedSubMenu.contains(activeElement)) { + this.closeSubMenu(this._openedSubMenu.parentNode) + } + + if (this.isMenuOpen() && !this._element.contains(activeElement)) { + this.closeMenu() + } + } } function onKeyPressSubMenuToggle(e) { - if (e.keyCode === 13) { - e.preventDefault() - this.toggleSubMenu(e.currentTarget.parentNode) - } + if (e.keyCode === 13) { + e.preventDefault() + this.toggleSubMenu(e.currentTarget.parentNode) + } } function onTouchStartSubMenuToggle(e) { - e.preventDefault() - this.toggleSubMenu(e.currentTarget.parentNode) + e.preventDefault() + this.toggleSubMenu(e.currentTarget.parentNode) } function onMouseEnterFirstLevelLi(e) { - const target = e.currentTarget - let id - let li + const target = e.currentTarget + let id + let li - for (id in this._mouseTimers) { - li = document.getElementById(id) + for (id in this._mouseTimers) { + li = document.getElementById(id) - if (li !== target) { - clearTimeout(this._mouseTimers[id]) + if (li !== target) { + clearTimeout(this._mouseTimers[id]) - if (li.children[2].style.display === 'block') { - this.closeSubMenu(li) - } - } - } + if (li.children[2].style.display === 'block') { + this.closeSubMenu(li) + } + } + } } function onMouseEnterLi(e) { - const li = e.currentTarget - const that = this - const subMenu = li.children[2] + const li = e.currentTarget + const that = this + const subMenu = li.children[2] - clearTimeout(this._mouseTimers[li.id]) + clearTimeout(this._mouseTimers[li.id]) - if (subMenu.style.display !== 'block') { - this._mouseTimers[li.id] = setTimeout(function () { - that.openSubMenu(li) - }, 250) - } + if (subMenu.style.display !== 'block') { + this._mouseTimers[li.id] = setTimeout(function () { + that.openSubMenu(li) + }, 250) + } } function onMouseLeaveLi(e) { - const li = e.currentTarget - const that = this - const subMenu = li.children[2] - const isFirstLevel = li.parentNode.classList.contains('header__menu-list') - - clearTimeout(this._mouseTimers[li.id]) - - if (subMenu.style.display === 'block') { - this._mouseTimers[li.id] = setTimeout( - function () { - that.closeSubMenu(li) - }, - isFirstLevel ? 1500 : 250 - ) - } + const li = e.currentTarget + const that = this + const subMenu = li.children[2] + const isFirstLevel = li.parentNode.classList.contains('header__menu-list') + + clearTimeout(this._mouseTimers[li.id]) + + if (subMenu.style.display === 'block') { + this._mouseTimers[li.id] = setTimeout( + function () { + that.closeSubMenu(li) + }, + isFirstLevel ? 1500 : 250 + ) + } } function onClickToggle() { - this.toggleMenu() + this.toggleMenu() } // ---- diff --git a/src/js/classes/ImageBlock.js b/src/js/classes/ImageBlock.js index f0033771..63f582b5 100644 --- a/src/js/classes/ImageBlock.js +++ b/src/js/classes/ImageBlock.js @@ -4,21 +4,21 @@ import AbstractDomElement from './AbstractDomElement' // class // ---- class ImageBlock extends AbstractDomElement { - constructor(element, options) { - const instance = super(element, options) + constructor(element, options) { + const instance = super(element, options) - // avoid double init : - if (!instance.isNewInstance()) { - return instance - } + // avoid double init : + if (!instance.isNewInstance()) { + return instance + } - const el = this._element - const figure = el.closest('.wp-block-image') + const el = this._element + const figure = el.closest('.wp-block-image') - // Add role="figure" and aria-label with the figure text to comply with RGAA criteria 1.9.1 : https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.9 - figure.setAttribute('role', 'figure') - figure.setAttribute('aria-label', el.textContent) - } + // Add role="figure" and aria-label with the figure text to comply with RGAA criteria 1.9.1 : https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.9 + figure.setAttribute('role', 'figure') + figure.setAttribute('aria-label', el.textContent) + } } // ---- diff --git a/src/js/classes/ScrollDirection.js b/src/js/classes/ScrollDirection.js index 1ef5ced4..3d2a13cb 100644 --- a/src/js/classes/ScrollDirection.js +++ b/src/js/classes/ScrollDirection.js @@ -2,84 +2,84 @@ import AbstractDomElement from './AbstractDomElement.js' import { ScrollObserver } from 'oneloop.js' class ScrollDirection extends AbstractDomElement { - constructor(element, options) { - const instance = super(element, options) - - // avoid double init : - if (!instance.isNewInstance()) { - return instance - } - - const that = this - - this._scrollObserver = new ScrollObserver() - this._directions = ['top', 'bottom', 'up', 'down'] - this._current = null - this._isEditable = true - this._timer = null - - this._scrollObserver.observe(this._element, { - onAlways: function (scroll, percentRTW, percentRTE) { - const p = Math.min(Math.round(percentRTE.y * 100), 100) - - if (p === 0) { - that.set('top') - } else if (p === 100) { - that.set('bottom') - } else if (scroll.direction.y === -1) { - that.set('up') - } else if (scroll.direction.y === 1) { - that.set('down') - } - }, - }) - - that.set('top') - } - - set(direction) { - const newIndex = this._directions.indexOf(direction) - - if (this._isEditable && newIndex > -1 && this._current !== newIndex) { - this._element.classList.remove('scroll-' + this._directions[this._current]) - this._element.classList.add('scroll-' + this._directions[newIndex]) - this._current = newIndex - } - - return this - } - - lock(delay) { - clearTimeout(this._timer) - this._isEditable = false - - if (typeof delay !== 'undefined') { - this.unlock(delay) - } - - return this - } - - unlock(delay) { - const that = this - - if (typeof delay !== 'undefined') { - clearTimeout(this._timer) - this._timer = setTimeout(function () { - that._isEditable = true - }, delay) - } else { - this._isEditable = true - } - - return this - } - - destroy() { - super.destroy() - this._scrollObserver.unobserve(this._element) - this._element.classList.remove('scroll-' + this._directions[this._current]) - } + constructor(element, options) { + const instance = super(element, options) + + // avoid double init : + if (!instance.isNewInstance()) { + return instance + } + + const that = this + + this._scrollObserver = new ScrollObserver() + this._directions = ['top', 'bottom', 'up', 'down'] + this._current = null + this._isEditable = true + this._timer = null + + this._scrollObserver.observe(this._element, { + onAlways: function (scroll, percentRTW, percentRTE) { + const p = Math.min(Math.round(percentRTE.y * 100), 100) + + if (p === 0) { + that.set('top') + } else if (p === 100) { + that.set('bottom') + } else if (scroll.direction.y === -1) { + that.set('up') + } else if (scroll.direction.y === 1) { + that.set('down') + } + }, + }) + + that.set('top') + } + + set(direction) { + const newIndex = this._directions.indexOf(direction) + + if (this._isEditable && newIndex > -1 && this._current !== newIndex) { + this._element.classList.remove('scroll-' + this._directions[this._current]) + this._element.classList.add('scroll-' + this._directions[newIndex]) + this._current = newIndex + } + + return this + } + + lock(delay) { + clearTimeout(this._timer) + this._isEditable = false + + if (typeof delay !== 'undefined') { + this.unlock(delay) + } + + return this + } + + unlock(delay) { + const that = this + + if (typeof delay !== 'undefined') { + clearTimeout(this._timer) + this._timer = setTimeout(function () { + that._isEditable = true + }, delay) + } else { + this._isEditable = true + } + + return this + } + + destroy() { + super.destroy() + this._scrollObserver.unobserve(this._element) + this._element.classList.remove('scroll-' + this._directions[this._current]) + } } // ---- diff --git a/src/js/editor.js b/src/js/editor.js index 771566b5..8e2d557d 100644 --- a/src/js/editor.js +++ b/src/js/editor.js @@ -8,35 +8,35 @@ import { unregisterBlockStyle, getBlockVariations, unregisterBlockVariation } fr // Native Gutenberg domReady(() => { - // Disable specific block styles - if (BFFEditorSettings.disabledBlocksStyles) { - Object.entries(BFFEditorSettings.disabledBlocksStyles).forEach(([block, styles]) => { - unregisterBlockStyle(block, styles) - }) - } + // Disable specific block styles + if (BFFEditorSettings.disabledBlocksStyles) { + Object.entries(BFFEditorSettings.disabledBlocksStyles).forEach(([block, styles]) => { + unregisterBlockStyle(block, styles) + }) + } - // Allow blocks variations - if (BFFEditorSettings.allowedBlocksVariations) { - Object.entries(BFFEditorSettings.allowedBlocksVariations).forEach(([block, variations]) => { - getBlockVariations(block).forEach((variant) => { - if (!variations.includes(variant.name)) { - unregisterBlockVariation(block, variant.name) - } - }) - }) - } + // Allow blocks variations + if (BFFEditorSettings.allowedBlocksVariations) { + Object.entries(BFFEditorSettings.allowedBlocksVariations).forEach(([block, variations]) => { + getBlockVariations(block).forEach((variant) => { + if (!variations.includes(variant.name)) { + unregisterBlockVariation(block, variant.name) + } + }) + }) + } }) // ACF Blocks if (window.acf) { - // Do stuff + // Do stuff } addFilter('blocks.registerBlockType', 'beapi-framework', function (settings, name) { - // Disable all styles - if (BFFEditorSettings.disableAllBlocksStyles && BFFEditorSettings.disableAllBlocksStyles.includes(name)) { - settings.styles = [] - } + // Disable all styles + if (BFFEditorSettings.disableAllBlocksStyles && BFFEditorSettings.disableAllBlocksStyles.includes(name)) { + settings.styles = [] + } - return settings + return settings }) diff --git a/src/js/post-build.js b/src/js/post-build.js index b77ddfba..56ef2d5b 100644 --- a/src/js/post-build.js +++ b/src/js/post-build.js @@ -1,5 +1,5 @@ function requireAll(r) { - r.keys().forEach(r) + r.keys().forEach(r) } // SVG diff --git a/src/js/utils/extend.js b/src/js/utils/extend.js index e4a49555..a0c134db 100644 --- a/src/js/utils/extend.js +++ b/src/js/utils/extend.js @@ -1,21 +1,21 @@ import isPlainObject from './isPlainObject' export default function extend() { - const args = arguments - const firstArgIsBool = typeof args[0] === 'boolean' - const deep = firstArgIsBool ? args[0] : false - const start = firstArgIsBool ? 1 : 0 - const rt = isPlainObject(args[start]) ? args[start] : {} + const args = arguments + const firstArgIsBool = typeof args[0] === 'boolean' + const deep = firstArgIsBool ? args[0] : false + const start = firstArgIsBool ? 1 : 0 + const rt = isPlainObject(args[start]) ? args[start] : {} - for (let i = start + 1; i < args.length; i++) { - for (let prop in args[i]) { - if (deep && isPlainObject(args[i][prop])) { - rt[prop] = extend(true, {}, rt[prop], args[i][prop]) - } else if (typeof args[i][prop] !== 'undefined') { - rt[prop] = args[i][prop] - } - } - } + for (let i = start + 1; i < args.length; i++) { + for (let prop in args[i]) { + if (deep && isPlainObject(args[i][prop])) { + rt[prop] = extend(true, {}, rt[prop], args[i][prop]) + } else if (typeof args[i][prop] !== 'undefined') { + rt[prop] = args[i][prop] + } + } + } - return rt + return rt } diff --git a/src/js/utils/isPlainObject.js b/src/js/utils/isPlainObject.js index e7c4651d..b0dd0bfe 100644 --- a/src/js/utils/isPlainObject.js +++ b/src/js/utils/isPlainObject.js @@ -5,5 +5,5 @@ */ export default function isPlainObject(o) { - return o?.constructor === Object || Object.getPrototypeOf(o ?? 0) === null + return o?.constructor === Object || Object.getPrototypeOf(o ?? 0) === null } diff --git a/src/js/utils/isRTL.js b/src/js/utils/isRTL.js index 4a86dbaa..b815defe 100644 --- a/src/js/utils/isRTL.js +++ b/src/js/utils/isRTL.js @@ -1,17 +1,17 @@ export default function isRTL(container = document.documentElement) { - const rtlLanguages = [ - 'ar', // Arabic - 'fa', // Persian (Farsi) - 'he', // Hebrew (modern code) - 'iw', // Hebrew (legacy code) - 'ur', // Urdu - 'ps', // Pashto - 'sd', // Sindhi - 'ug', // Uyghur - 'dv', // Divehi (Maldivian) - 'ku', // Kurdish (Sorani) - 'yi', // Yiddish - ] + const rtlLanguages = [ + 'ar', // Arabic + 'fa', // Persian (Farsi) + 'he', // Hebrew (modern code) + 'iw', // Hebrew (legacy code) + 'ur', // Urdu + 'ps', // Pashto + 'sd', // Sindhi + 'ug', // Uyghur + 'dv', // Divehi (Maldivian) + 'ku', // Kurdish (Sorani) + 'yi', // Yiddish + ] - return container.dir === 'rtl' || rtlLanguages.includes(container.lang) + return container.dir === 'rtl' || rtlLanguages.includes(container.lang) } diff --git a/src/js/utils/openUrlInNewTab.js b/src/js/utils/openUrlInNewTab.js index 10fbf977..041fbca4 100644 --- a/src/js/utils/openUrlInNewTab.js +++ b/src/js/utils/openUrlInNewTab.js @@ -1,7 +1,7 @@ export default function openUrlInNewTab(url) { - Object.assign(document.createElement('a'), { - target: '_blank', - rel: 'noopener', - href: url, - }).click() + Object.assign(document.createElement('a'), { + target: '_blank', + rel: 'noopener', + href: url, + }).click() } From 4362d5d87d6708b3848a9a24f3a45a601324912a Mon Sep 17 00:00:00 2001 From: mricoul Date: Tue, 3 Jun 2025 16:22:37 +0200 Subject: [PATCH 3/3] fix: fix and refactors code for improved readability Addresses minor code style issues identified by Sourcery. This commit focuses on improving code readability and consistency by destructuring objects and correcting a typo, without altering the core functionality. Also, clears a timeout in destroy function. --- src/js/classes/AbstractDomElement.js | 6 +++--- src/js/classes/Animation.js | 4 ++-- src/js/classes/Header.js | 4 ++-- src/js/classes/ScrollDirection.js | 1 + src/scss/02-tools/_m-select-custom.scss | 4 ---- 5 files changed, 8 insertions(+), 11 deletions(-) diff --git a/src/js/classes/AbstractDomElement.js b/src/js/classes/AbstractDomElement.js index 25eb237c..c0d00a74 100644 --- a/src/js/classes/AbstractDomElement.js +++ b/src/js/classes/AbstractDomElement.js @@ -37,7 +37,7 @@ class AbstractDomElement { // provide an explicit spaceName to prevent conflict after minification // MaClass.nameSpace = 'MaClass' this.constructor.nameSpace = this.constructor.nameSpace || this.constructor.name - const nameSpace = this.constructor.nameSpace + const { nameSpace } = this.constructor // if no spacename beapi, create it - avoid futur test if (!element.beapi) { @@ -110,7 +110,7 @@ class AbstractDomElement { } static initFromPreset() { - const preset = this.preset + const { preset } = this let selector for (selector in preset) { @@ -121,7 +121,7 @@ class AbstractDomElement { } static destroyFromPreset() { - const preset = this.preset + const { preset } = this let selector for (selector in preset) { diff --git a/src/js/classes/Animation.js b/src/js/classes/Animation.js index 3c27bfbc..1bde520c 100644 --- a/src/js/classes/Animation.js +++ b/src/js/classes/Animation.js @@ -151,7 +151,7 @@ class Animation extends AbstractDomElement { * Static are animations enabled * @returns {boolean} */ - static areAnimationsEnbaled() { + static areAnimationsEnabled() { return document.documentElement.classList.contains(animationClass) } } @@ -262,7 +262,7 @@ Animation.preset = { }) const children = el.getElementsByClassName('st-line') - const length = children.length + const { length } = children let i if (length > 1) { diff --git a/src/js/classes/Header.js b/src/js/classes/Header.js index 6a7312c3..15b327e1 100644 --- a/src/js/classes/Header.js +++ b/src/js/classes/Header.js @@ -89,7 +89,7 @@ class Header extends AbstractDomElement { openSubMenu(liParent) { const toggle = liParent.children[1] const subMenu = liParent.children[2] - var childHeight + let childHeight this._openedSubMenu = subMenu @@ -156,7 +156,7 @@ Header.defaults = { // events // ---- function onKeyup(e) { - const activeElement = document.activeElement + const { activeElement } = document // escape if (e.keyCode === 27) { diff --git a/src/js/classes/ScrollDirection.js b/src/js/classes/ScrollDirection.js index 3d2a13cb..100f2956 100644 --- a/src/js/classes/ScrollDirection.js +++ b/src/js/classes/ScrollDirection.js @@ -79,6 +79,7 @@ class ScrollDirection extends AbstractDomElement { super.destroy() this._scrollObserver.unobserve(this._element) this._element.classList.remove('scroll-' + this._directions[this._current]) + clearTimeout(this._timer) } } diff --git a/src/scss/02-tools/_m-select-custom.scss b/src/scss/02-tools/_m-select-custom.scss index 84d3bc6c..dd514013 100644 --- a/src/scss/02-tools/_m-select-custom.scss +++ b/src/scss/02-tools/_m-select-custom.scss @@ -65,8 +65,4 @@ outline: none; } } - - @include rtl { - background-position: left 10px top 50%, 0 0; - } }