Étiquette : css

[CSS][LESS] Un effet d’animation pour un lien souligné dont le texte s’étend sur plusieurs lignes avec background-size

07/03/2023 / admin

Attention: Le critère du multi-lignes est très important pour ce type d’effet. Si il n’est pas pris en compte, le soulignement peut n’apparaître que sous la dernière ligne de texte du lien.

Ressources en ligne:

Animated Multiline Link Underlines with CSS par Danny Guo (CodePen)
Animated CSS underlines that wrap et A CSS-only, animated, wrapping underline using CSS background properties qui m’ont bien aidé a créer l’animation inédite ci-dessous!
10 CSS Snippets for Creating Stunning Animated Underline Text Effects

…et un effet que j’ai dû créer moi-même car il n’existait pas dans les ressources ci-dessus. La bordure sous le lien a deux couleurs: couleur lien normal et couleur lien souligné. La particularité de cet effet vient du fait qu’au survol du lien, le changement de couleur s’effectue en partant du milieu (50%) et avec deux balayages simultanés à gauche (pour atteindre 0%) et à droite (pour atteindre 100%).

.link-underline--multiline(
    @border-color-hover: red;
    @border-color: black) {
    padding: 0 0 2px 0;
    text-decoration: none;
    background-image: linear-gradient(@border-color-hover, @border-color-hover),
                      linear-gradient(@border-color, @border-color);
    background-size: 0% 1px, 100% 1px;
    background-position: 50% 100%, 50% 100%;
    background-repeat: no-repeat;
    transition: background-size .1s linear;

    &:hover {
        background-size: 100% 1px, 100% 1px;
    }
}

.link-underline--multiline(

@border-color-hover: red;

@border-color: black) {

padding: 0 0 2px 0;

text-decoration: none;

linear-gradient(@border-color, @border-color);

background-size: 0% 1px, 100% 1px;

background-position: 50% 100%, 50% 100%;

background-repeat: no-repeat;

transition: background-size .1s linear;

&:hover {

background-size: 100% 1px, 100% 1px;

}

[Magento 2] Etendre ou surcharger des styles less parent, de composants ou de modules dans un thème

16/05/2022 / admin

Testé fonctionnel Magento 2.4

Sources: Best way to extend module less found in web/css/source/module, like _minicart.less? et Extend or override parent, components or modules styles in Magento 2 et version PDF pour la postérité.

Etendre les styles less d’un composant

Fichier parent: app/design/frontend/Vendor/default/Magento_Catalog/web/css/source/module/listings/_prod-small.less.

Son extension: app/design/frontend/Vendor/germany/Magento_Catalog/web/css/source/module/listings/_prod-small_extend.less

L’import de l’extension: app/design/frontend/Vendor/germany/Magento_Catalog/web/css/source/_extend.less

@import 'module/listings/_prod-small_extend.less';

1	@import 'module/listings/_prod-small_extend.less';

[JavaScript] Mediaqueries et breakpoints en JS ES6+ avec la librairie breakpoint-helper

06/05/2021 / admin

Base de l’initialisation du helper

import bph from 'breakpoint-helper';

// UIkit v3.6.19 CSS breakpoints
// $breakpoint-small: 640px !default;
// $breakpoint-medium: 960px !default;
// $breakpoint-large: 1200px !default;
// $breakpoint-xlarge: 1600px !default;

const instance = bph({
    small: '640px',
    medium: '960px',
    large: '1200px',
    xlarge: '1600px',
});

import bph from 'breakpoint-helper';

// UIkit v3.6.19 CSS breakpoints

// $breakpoint-small: 640px !default;

// $breakpoint-medium: 960px !default;

// $breakpoint-large: 1200px !default;

// $breakpoint-xlarge: 1600px !default;

const instance = bph({

small: '640px',

medium: '960px',

large: '1200px',

xlarge: '1600px',

});

Utiliser la méthode `listen()` avec un breakpoint unique

(Mobile first!) On définit un breakpoint unique à (max-width: 1199px) au-delà duquel on exécute du code pour les Desktops.

La clé/name 'large' correspond à une largeur de 1200px. Le paramètre useMax permet l’ajout et le calcul de la valeur max-width.

const { listen } = instance;

const currentBreakpoint = listen(
    {
        name: 'large',
        useMax: true,
    },
    ({ matches }) => {
        if (matches) {
            // Execute code for Mobile devices
            console.log('Current breakpoint is: (max-width: 1199px)');
        } else {
            // Execute code for Desktop devices
            console.log('Current breakpoint is: (min-width: 1200px)');
        }
    }
);

const { listen } = instance;

const currentBreakpoint = listen(

{

useMax: true,

({ matches }) => {

if (matches) {

// Execute code for Mobile devices

console.log('Current breakpoint is: (max-width: 1199px)');

} else {

// Execute code for Desktop devices

console.log('Current breakpoint is: (min-width: 1200px)');

}

);

Une autre solution si vous souhaitez une meilleure séparation du code exécuté par breakpoint

Cette solution alternative vous permet d’inclure du code pour nettoyer votre DOM dans le listener propre au breakpoint pour lequel vous initialisez également des choses.

const bpMobile = listen(
{
        name: 'large',
        useMax: true,
    },
    ({ matches }) => {
        if (matches) {
            // Initialiser
            console.log('EXECUTE code for: Mobile!');
        } else {
            // Nettoyer
            console.log('DESTROY code for: Mobile!');
        }
    }
);

const bpDesktop = listen('large', ({ matches }) => {
    if (matches) {
        // Initialiser
        console.log('EXECUTE code for: Desktop!');
    } else {
        // Nettoyer
        console.log('DESTROY code for: Desktop!');
    }
});

const bpMobile = listen(

{

useMax: true,

({ matches }) => {

if (matches) {

// Initialiser

console.log('EXECUTE code for: Mobile!');

} else {

// Nettoyer

console.log('DESTROY code for: Mobile!');

}

);

const bpDesktop = listen('large', ({ matches }) => {

if (matches) {

// Initialiser

console.log('EXECUTE code for: Desktop!');

} else {

// Nettoyer

console.log('DESTROY code for: Desktop!');

}

});

[Webpack Encore] Optimiser vos bundles CSS avec PurgeCSS et JS et le tree shaking

03/05/2021 / admin

Testé fonctionnel Webpack Encore v1.1.2 (tournant sous Webpack v5.34.0).

Utiliser PurgeCSS avec Webpack Encore

Source: blog de PHP Roberto – Integrating Purgecss with Symfony Encore (version PDF: phproberto.com-Integrating Purgecss with Symfony Encore).

Le tree shaking avec Webpack Encore

Quelques ressources en ligne:

Tree shaking (sur survivejs.com)

Oui, le tree shaking est activé par défaut en mode « production » dans Webpack Encore. C’est juste que la documentation officielle sur symfony.com oublie de le mentionner (grrr…)!

Vous pouvez effectuer le test qui est décrit ici (aka « le tree shaking dans Webpack Encore expliqué en 30 secondes ») pour vous en assurer.

Pour exemple, si vous avez les deux fichiers suivants:

// src/imports.js
export function testA() {
  console.log('Test A');
}

export function testB() {
  console.log('Test B');
}

// src/imports.js

export function testA() {

console.log('Test A');

}

export function testB() {

console.log('Test B');

}

// src/index.js (entry point)
import { testA } from './imports';

testA();

// src/index.js (entry point)

import { testA } from './imports';

testA();

Exécuter la commande yarn encore dev devrait générer quelque chose de similaire à ceci:

/***/ "./src/imports.js":
/*!************************!*\
  !*** ./src/imports.js ***!
  \************************/
/*! exports provided: testA, testB */
/*! exports used: testA */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* harmony export (immutable) */ __webpack_exports__["a"] = testA;
/* unused harmony export testB */
function testA() {
  console.log('Test A');
}

function testB() {
  console.log('Test B');
}

/***/ }),

/***/ "./src/imports.js":

/*!************************!*\

!*** ./src/imports.js ***!

\************************/

/*! exports provided: testA, testB */

/*! exports used: testA */

/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";

/* harmony export (immutable) */ __webpack_exports__["a"] = testA;

/* unused harmony export testB */

function testA() {

console.log('Test A');

}

function testB() {

console.log('Test B');

}

/***/ }),

Cependant, en exécutant la commande yarn encore production le commentaire /* unused harmony export testB */ présent avec la précédente commande sera pris en compte par UglifyJs qui va en conséquence supprimer l’export en relation lors de la phase de minification. Dans ce cas, on ne devrait pas retrouver la chaîne de caractère « Test B » dans le fichier généré:

!function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/",t(t.s="lVK7")}({dxJD:function(e,t,n){"use strict";function r(){console.log("Test A")}t.a=r},lVK7:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n("dxJD");Object(r.a)()}});

Activer les commentaires `/* unused harmony export */` en développement avec le paramètre `config.optimization.usedExports = true;`

Ceci vous permettra de vérifier avec du code humainement lisible quels sont les parties de votre code qui ne sont pas exploitées et qui seront supprimées dans le bundle minifié de production.

Tout à la fin de votre fichier webpack.config.js:

[...]
;

// fetch the config, then modify it!
const config = Encore.getWebpackConfig();

config.optimization.usedExports = true;

// export the final config
module.exports = config;
// was:
// module.exports = Encore.getWebpackConfig();

[...]

;

// fetch the config, then modify it!

const config = Encore.getWebpackConfig();

config.optimization.usedExports = true;

// export the final config

module.exports = config;

// was:

// module.exports = Encore.getWebpackConfig();

Vous pouvez tout-à-fait laisser cette config activée. Elle ne portera pas préjudice au poids final de votre build de production.

[CSS] Désactiver le scroll dans la page lorsqu’un élément en position absolue (de type Modale, Off-Canvas, …) est ouvert en sur-impression

21/01/2021 / admin

ATTENTION: cette solution testée fonctionnelle est plus simple à mettre en place que les solutions précédemment citées sur ce blog:

Source: Disable Scrolling on Body

// Bloquer le scroll de la page lorsqu'un élément en position absolute (off-canvas, modale...) est ouvert:
function handlePageScrollState() {
    const $_HTML = $('html');
    if ($_HTML.hasClass('is-disabled-page-scroll')) {
        $_HTML.removeClass('is-disabled-page-scroll');
    } else {
        $_HTML.addClass('is-disabled-page-scroll');
    }
}

// Bloquer le scroll de la page lorsqu'un élément en position absolute (off-canvas, modale...) est ouvert:

function handlePageScrollState() {

const $_HTML = $('html');

if ($_HTML.hasClass('is-disabled-page-scroll')) {

$_HTML.removeClass('is-disabled-page-scroll');

} else {

$_HTML.addClass('is-disabled-page-scroll');

}

.is-disabled-page-scroll {
    margin: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}

.is-disabled-page-scroll {

margin: 0 !important;

height: 100% !important;

overflow: hidden !important;

}

[CSS] Des effets de fonds de couleur avec séparateur oblique avec linear-gradient

18/11/2020 / admin

dégradé de fond avec effet d’oblique sur codepen.io

/* https://cssgradient.io/ */
background: linear-gradient(170deg, transparent 0%, transparent 15%, #020024 15.1%, #020024 100%);

1 2	/* https://cssgradient.io/ */ background: linear-gradient(170deg, transparent 0%, transparent 15%, #020024 15.1%, #020024 100%);

[jQuery][CSS] Etendre le fond d’un mega menu déroulant sur toute la largeur de la fenêtre du navigateur

02/06/2020 / admin

Souvent, le fond d’un menu déroulant occupe l’espace dans la limite de l’élément .container d’une page.

La classe .nav-open sur l’élément body permet de placer un overflow-x: hidden; qui va venir empêcher l’apparition d’un scroll horizontal dans le fenêtre de votre navigateur lorsque le menu sera ouvert.

    body.nav-open {
        overflow-x: hidden;
    }
    .navigation {
        ul .level0 .submenu__container {
            &:before,
            &:after {
                position: absolute;
                z-index: 0;
                content: "";
                width: 50%;
                height: 100%;
                top: 0;
                background: #fff;
            }
            &:before {
                left: -50%;
            }
            &:after {
                right: -50%;
            }
        }
    }
}

body.nav-open {

overflow-x: hidden;

}

.navigation {

ul .level0 .submenu__container {

&:before,

&:after {

position: absolute;

z-index: 0;

content: "";

width: 50%;

height: 100%;

top: 0;

background: #fff;

}

&:before {

left: -50%;

}

&:after {

right: -50%;

}

    $(document).on('mouseenter', '.navigation', function() {
        $('body').addClass('nav-open');
    }).on('mouseleave', '.navigation', function() {
        $('body').removeClass('nav-open');
    });

$(document).on('mouseenter', '.navigation', function() {

$('body').addClass('nav-open');

}).on('mouseleave', '.navigation', function() {

$('body').removeClass('nav-open');

});

[CSS] Habiller l’élément Select de formulaire – les techniques en CSS pur

20/05/2020 / admin

https://www.filamentgroup.com/lab/select-css.html
- pure css, mais pas un vrai select: https://codepen.io/himalayasingh/pen/pxKKgd
- pareil : https://codepen.io/miniven/pen/ZJydge

Solution pour remplacer le chevron par défaut par un picto encodé en base64

Rotate an image online, clockwise or counterclockwise
Convert WebP to Base64 online – Champ « Output Format »: CSS Background Image — background-image:url(). Il peut arriver que les double quotes " (dans url("data:image/webp;base64,...");) posent problème dans certains CMS. Il suffit de les retirer. Ne pas oublier également d’ajouter un caractère ; à la fin de la ligne générée.

Code CSS à mettre en place:

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    //border: none;
    line-height: 1.3;
    padding: .6em 1.4em .5em .8em;
    //font-size: 1.4rem;
    background-color: transparent;
    background-image: url(data:image/webp;base64,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);
    background-position: right 10px top 50%;
    background-repeat: no-repeat;
    background-size: contain;
}

select {

-moz-appearance: none;

-webkit-appearance: none;

appearance: none;

//border: none;

line-height: 1.3;

padding: .6em 1.4em .5em .8em;

//font-size: 1.4rem;

background-color: transparent;

background-image: url(data:image/webp;base64,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);

background-position: right 10px top 50%;

background-repeat: no-repeat;

background-size: contain;

}

[Magento 2] Email transactionnels – astuces et bonnes pratiques de customisation

26/02/2020 / admin

Testé Magento 2.3 et 2.4

Comment changer, sans passer par l’interface d’administration mais dans le code source, le logo et surcharger le header et le footer des templates d’email transactionnels? Ressources officielles en ligne pour la gestion des emails transactionnels dans Magento 2:

Les bases du développement d’emailings transactionnels sous Magento 2 (surcharge, extension, où et comment?)
RECHERCHER ou cibler un template d’email spécifique dans Magento 2
Changer le logo d’un template d’email dans Magento 2
Afficher une image stockée dans un thème
Une liste complète des variables par défaut exploitables dans les templates d’email transactionnels de Magento 2
Test des emails transactionnels dans Magento 2
Inclure des PHTML ou des layouts XML complets dans un email
Gérer plusieurs headers/footers de mails transactionnels dans Magento 2 – Attention: j’ai testé ce code en 2.4 et moyennant une petite modification par rapport à ce qui est indiqué dans le config.xml, on arrive effectivement à avoir nos templates spés disponibles en BO, mais je ne suis pas parvenu à les lier aux corps des emails via la directive {{template config_path="design/email/footer_invoice_template"}} donnée en exemple…

Guide plus exhaustif que la doc officielle: How to Style Email Templates in Magento 2 et la version PDF.

Extension des styles LESS

L’extension des styles LESS se fait dans le thème. Chemin: app/design/frontend/MyVendor/mytheme/web/css/source/_email-extend.less.

RECHERCHER ou cibler un template d’email spécifique dans Magento 2

Il arrive, dans des projets complexes, que les emails sont éclatés en une multitude de fichiers, eux-mêmes consignés dans une multitude de modules. La méthode la plus simple pour trouver un template est de faire une recherche sur un bout de texte contenu dans l’email dans les fichiers au format CSV du code source.

Changer le logo d’un template d’email dans Magento 2

Préparer l’image qui vous servira de logo

Première étape: voir ici comment préparer un logo pour les emails transactionnels dans Magento 2.

Votre fichier sera, de préférence au format PNG et son libellé sera logo_email.png.

Modifier le fichier `app/etc/config.php`

<?php
return [
    'system' => [
        'default' => [
            'design' => [
                'email' => [
                    'logo_width' => '100',
                    'logo_height' => '100',
                ],

<?php

return [

'system' => [

'default' => [

'design' => [

'email' => [

'logo_width' => '100',

'logo_height' => '100',

Puis exécuter la commande ~~$ n98-magerun2 setup:upgrade~~ $ n98-magerun2 app:config:import.

Surcharger le logo natif de Magento 2 par votre propre logo

Chemin du fichier source: vendor/magento/module-email/view/frontend/web/logo_email.png. Chemin du fichier de destination: app/design/frontend/MyVendor/myTheme/Magento_Email/web/logo_email.png.

Surcharger le header et le footer des templates d’email transactionnels dans Magento 2

Header

Chemin du fichier source: vendor/magento/module-email/view/frontend/email/header.html. Chemin du fichier de destination: app/design/frontend/MyVendor/myTheme/Magento_Email/email/header.html.

Footer

Chemin du fichier source: vendor/magento/module-email/view/frontend/email/footer.html. Chemin du fichier de destination: app/design/frontend/MyVendor/myTheme/Magento_Email/email/footer.html.

Afficher une image stockée dans un thème

Comme d’hab: rien dans la doc à ce sujet à part pour le logo et aucun code fourni sur les forums ne fonctionne… Faire comme ceci:

<img src="{{view url='images/mon-image.jpg'}}" height="" width="" alt="{{trans 'Ma clé de traduction'}}" />

1	<img src="{{view url='images/mon-image.jpg'}}" height="" width="" alt="{{trans 'Ma clé de traduction'}}" />

Une liste complète des variables par défaut exploitables dans les templates d’email transactionnels de Magento 2

edit: source officielle (toujours mieux) Email templates Variable Reference.

Source: A Complete List of Default Variables Used in Magento 2 Email Templates et la version PDF pour la postérité.

ATTENTION: il y a un souci de formattage des double quotes dans la doc officielle. Si cous copiez/collez ceci: {{config path=”general/store_information/name”}} dans votre code source, l’information ne sera pas récupérée. Il faut mettre ceci: {{config path="general/store_information/name"}}.

Bonus: header et footer par défaut pour l’ensemble des gabarits d’email

{{template config_path="design/email/header_template"}}

1	{{template config_path="design/email/header_template"}}

{{template config_path="design/email/footer_template"}}

1	{{template config_path="design/email/footer_template"}}

Test des emails transactionnels dans Magento 2

Dev tips #1: Avant de tester vos changements effectués dans les templates HTML ou les styles CSS/LESS, la seule commande à taper est la suivante (si vous êtes en mode developer):

find pub/static/frontend/MyVendor -type f \( -name '*.css' \) -delete; find var/view_preprocessed/pub/static/frontend/MyVendor -type f \( -name '*.css' -o -name '*.less' \) -delete

1	find pub/static/frontend/MyVendor -type f $ -name '.css' $ -delete; find var/view_preprocessed/pub/static/frontend/MyVendor -type f $ -name '.css' -o -name '*.less' $ -delete

Dev tips #2: La page de réinitialisation du mot de passe (fonctionnalité « mot de passe oublié? ») est une bonne manière de s’envoyer des emails transactionnels de test dans Magento 2.

mailtrap.io – un service de test d’emailings gratuit (50 envois/jour ou 500 envois/mois) qui permet d’afficher les emails en vues smartphones, tablettes et desktops, de voir le code source, etc… Fournit quelques outils pratiques pour le débug.
Supprimer les limites par défaut du nombre maximum d’envoi de requêtes pour changer son mot de passe (5 fois) et du temps minimum à patienter entre deux envois de requête d’un nouveau mot de passe (10 minutes): Magento 2 Forgot Password Says Too many password reset requests et la version PDF

Inclure des PHTML ou des layouts XML complets dans un email

Inclure des templates PHTML complets dans un email transactionnel dans Magento 2

Magento 2 not able to load phtml file in email template .html file. Pas la peine de doubler les slashes (testé fonctionne Magento 2.4).

{{block class='Magento\\Framework\\View\\Element\\Template' area='adminhtml' template='Conversion_Replenish::email/replenish.phtml'}}

1	{{block class='Magento\\Framework\\View\\Element\\Template' area='adminhtml' template='Conversion_Replenish::email/replenish.phtml'}}

Inclure des layouts XML complets dans un email transactionnel dans Magento 2

Un bon exemple dans le code source de Magento 2.

{{layout handle="sales_email_order_items" order_id=$order_id area="frontend"}}

1	{{layout handle="sales_email_order_items" order_id=$order_id area="frontend"}}

[CSS] Un mega menu horizontal incremental avec flexbox (pure CSS)

08/01/2020 / admin

Demo jsfiddle.net et code source zippé à télécharger.

Source HTML

<div class="navDesktop navDesktopType-normal">

  <h2>.navDesktop.navDesktopType-normal</h2>
  <nav id="navDesktop">
    <ul class="navDesktop-level0">
      <li>
        <a href="#">chemises & couvertures HORSEWIN</a>
        <ul class="navDesktop-level1">
          <li>
            <a href="#">chemises de box</a>
          </li>
          <li>
            <a href="#">couvertures d'écurie</a>
          </li>
          <li>
            <a href="#">couvertures d'extérieur</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">nutrition</a>
        <ul class="navDesktop-level1">
          <li>
            <a href="#">aliments complets</a>
            <ul class="navDesktop-level2">
              <li>
                <a href="#">gamme club & loisirs</a>
              </li>
              <li>
                <a href="#">gamme sport</a>
              </li>
              <li>
                <a href="#">gamme course</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">litière</a>
      </li>
    </ul>
  </nav>

</div>

<div class="navDesktop navDesktopType-incremental">

  <h2>.navDesktop.navDesktopType-incremental</h2>
  <nav id="navDesktop">
    <ul class="navDesktop-level0">
      <li>
        <a href="#">bovins</a>
        <ul class="navDesktop-level1">
          <li>
            <a href="#">alimentation & compléments</a>
            <ul class="navDesktop-level2">
              <li>
                <a href="#">matières premières</a>
                <ul class="navDesktop-level3">
                  <li>
                    <a href="#">matières premières</a>
                  </li>
                  <li>
                    <a href="#">matières grasses</a>
                  </li>
                  <li>
                    <a href="#">argiles et charbon</a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="#">seaux et pierres à lécher</a>
                <ul class="navDesktop-level3">
                  <li>
                    <a href="#">pierres à lécher</a>
                  </li>
                  <li>
                    <a href="#">seaux à lécher</a>
                  </li>
                  <li>
                    <a href="#">supports pour seaux et pierres</a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="#">bolus</a>
                <ul class="navDesktop-level3">
                  <li>
                    <a href="#">power bol</a>
                  </li>
                  <li>
                    <a href="#">bolus longue durée pressés</a>
                  </li>
                  <li>
                    <a href="#">bolus à diffusion rapide</a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="#">Minéraux</a>
                <ul class="navDesktop-level3">
                  <li>
                    <a href="#">Max-ME</a>
                  </li>
                  <li>
                    <a href="#">Max-MS</a>
                  </li>
                  <li>
                    <a href="#">Max-MH</a>
                  </li>
                  <li>
                    <a href="#">Maxor</a>
                  </li>
                  <li>
                    <a href="#">Formules vaches taries</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">Veaux</a>
          </li>
          <li>
            <a href="#">Pâturage</a>
          </li>
          <li>
            <a href="#">Reproduction</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">porcs</a>
      </li>
      <li>
        <a href="#">volailles</a>
      </li>
    </ul>
  </nav>

</div>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

<h2>.navDesktop.navDesktopType-normal</h2>

<li>

<a href="#">chemises & couvertures HORSEWIN</a>

<li>

<a href="#">chemises de box</a>

</li>

<li>

<a href="#">couvertures d'écurie</a>

</li>

<li>

<a href="#">couvertures d'extérieur</a>

</li>

</ul>

</li>

<li>

<a href="#">nutrition</a>

<li>

<a href="#">aliments complets</a>

<li>

<a href="#">gamme club & loisirs</a>

</li>

<li>

<a href="#">gamme sport</a>

</li>

<li>

<a href="#">gamme course</a>

</li>

</ul>

</li>

</ul>

</li>

<li>

<a href="#">litière</a>

</li>

</ul>

</nav>

</div>

<h2>.navDesktop.navDesktopType-incremental</h2>

<li>

<a href="#">bovins</a>

<li>

<a href="#">alimentation & compléments</a>

<li>

<a href="#">matières premières</a>

<li>

<a href="#">matières premières</a>

</li>

<li>

<a href="#">matières grasses</a>

</li>

<li>

<a href="#">argiles et charbon</a>

</li>

</ul>

</li>

<li>

<a href="#">seaux et pierres à lécher</a>

<li>

<a href="#">pierres à lécher</a>

</li>

<li>

<a href="#">seaux à lécher</a>

</li>

<li>

<a href="#">supports pour seaux et pierres</a>

</li>

</ul>

</li>

<li>

<a href="#">bolus</a>

<li>

<a href="#">power bol</a>

</li>

<li>

<a href="#">bolus longue durée pressés</a>

</li>

<li>

<a href="#">bolus à diffusion rapide</a>

</li>

</ul>

</li>

<li>

<a href="#">Minéraux</a>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

<a href="#">Maxor</a>

</li>

<li>

<a href="#">Formules vaches taries</a>

</li>

</ul>

</li>

</ul>

</li>

<li>

<a href="#">Veaux</a>

</li>

<li>

<a href="#">Pâturage</a>

</li>

<li>

<a href="#">Reproduction</a>

</li>

</ul>

</li>

<li>

<a href="#">porcs</a>

</li>

<li>

<a href="#">volailles</a>

</li>

</ul>

</nav>

</div>

Source CSS

/* reset */
ul, li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}



/* core */
.navDesktop {}

.navDesktop-level1,
.navDesktop-level2 {
  display: none;
}

.navDesktopType-normal {}
.navDesktopType-incremental {}

.navDesktop-level0 > li:hover > .navDesktop-level1,
.navDesktopType-incremental .navDesktop-level1 > li:hover > .navDesktop-level2 {
  display: flex;
}



/* layout */
.navDesktop-level0 {
  position: relative;
  display: flex;
}

.navDesktop-level1,
.navDesktopType-incremental .navDesktop-level2 {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 100%;
  width: 100%;
}

.navDesktopType-normal .navDesktop-level1,
.navDesktopType-incremental .navDesktop-level2 {
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
}



/* skin */
.navDesktopType-normal .navDesktop-level1,
.navDesktopType-incremental .navDesktop-level2 {
  max-height: 200px;
}

.navDesktop a {
  padding-right: 15px;
}

.navDesktopType-normal .navDesktop-level1,
.navDesktopType-incremental .navDesktop-level2 {
  background: #ececec;
}

.navDesktopType-normal .navDesktop-level1 > li > a,
.navDesktopType-incremental .navDesktop-level2 > li > a {
  font-size: 1.1em;
  font-weight: 700;
}

.navDesktopType-incremental .navDesktop-level1 {
  background: pink;
}

/* reset */

ul, li {

margin: 0;

padding: 0;

list-style-type: none;

}

/* core */

.navDesktop {}

.navDesktop-level1,

.navDesktop-level2 {

display: none;

}

.navDesktopType-normal {}

.navDesktopType-incremental {}

.navDesktop-level0 > li:hover > .navDesktop-level1,

.navDesktopType-incremental .navDesktop-level1 > li:hover > .navDesktop-level2 {

display: flex;

}

/* layout */

.navDesktop-level0 {

position: relative;

display: flex;

}

.navDesktop-level1,

.navDesktopType-incremental .navDesktop-level2 {

position: absolute;

z-index: 1;

left: 0;

top: 100%;

width: 100%;

}

.navDesktopType-normal .navDesktop-level1,

.navDesktopType-incremental .navDesktop-level2 {

flex-direction: column;

flex-wrap: wrap;

align-content: flex-start;

}

/* skin */

.navDesktopType-normal .navDesktop-level1,

.navDesktopType-incremental .navDesktop-level2 {

max-height: 200px;

}

.navDesktop a {

padding-right: 15px;

}

.navDesktopType-normal .navDesktop-level1,

.navDesktopType-incremental .navDesktop-level2 {

background: #ececec;

}

.navDesktopType-normal .navDesktop-level1 > li > a,

.navDesktopType-incremental .navDesktop-level2 > li > a {

font-size: 1.1em;

font-weight: 700;

}

.navDesktopType-incremental .navDesktop-level1 {

background: pink;

}

Etendre les styles less d’un composant

Base de l’initialisation du helper

Utiliser la méthode listen() avec un breakpoint unique

Une autre solution si vous souhaitez une meilleure séparation du code exécuté par breakpoint

Utiliser PurgeCSS avec Webpack Encore

Le tree shaking avec Webpack Encore

Activer les commentaires /* unused harmony export */ en développement avec le paramètre config.optimization.usedExports = true;

Solution pour remplacer le chevron par défaut par un picto encodé en base64

Extension des styles LESS

RECHERCHER ou cibler un template d’email spécifique dans Magento 2

Changer le logo d’un template d’email dans Magento 2

Préparer l’image qui vous servira de logo

Modifier le fichier app/etc/config.php

Surcharger le logo natif de Magento 2 par votre propre logo

Surcharger le header et le footer des templates d’email transactionnels dans Magento 2

Header

Footer

Afficher une image stockée dans un thème

Une liste complète des variables par défaut exploitables dans les templates d’email transactionnels de Magento 2

Bonus: header et footer par défaut pour l’ensemble des gabarits d’email

Test des emails transactionnels dans Magento 2

Inclure des PHTML ou des layouts XML complets dans un email

Inclure des templates PHTML complets dans un email transactionnel dans Magento 2

Inclure des layouts XML complets dans un email transactionnel dans Magento 2

Source HTML

Source CSS

Utiliser la méthode `listen()` avec un breakpoint unique

Activer les commentaires `/* unused harmony export */` en développement avec le paramètre `config.optimization.usedExports = true;`

Modifier le fichier `app/etc/config.php`