Development #56855
positionner les barre du burger via % que px et sass
0%
Description
Positionner les barres du burger menu à l'aide de calc() plutôt que de sass me semble apporter plus de souplesse pour le personnaliser.
Exemple :
Pour positionner les barres au sein du bouton il suffira de lui ajouter un border (au bouton), et sans basculer en `box-sizing: content-box` :
div.gru-nav .gru-nav-button {
border: 10px solid transparent;
}
Un bouton rond :
div.gru-nav .gru-nav-button {
border: 10px solid transparent;
border-radius: 50%;
width: $nav-menu-side; // parce que j'ai pas encore compris pourquoi `width: $nav-menu-side + 2` par défaut
}
un bouton rectangulaire
div.gru-nav .gru-nav-button {
height: 60px;
border: solid transparent;
border-width: 15px 5px;
}
Fichiers
Révisions associées
Historique
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a plus de 2 ans
- Description mis à jour (diff)
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a plus de 2 ans
- Fichier 0001-css-use-calc-for-nav-button-icon-bar-position-56855.patch 0001-css-use-calc-for-nav-button-icon-bar-position-56855.patch ajouté
- Statut changé de Nouveau à Solution proposée
- Patch proposed changé de Non à Oui
Mis à jour par Frédéric Péters il y a plus de 2 ans
Je ne capte pas vraiment l'approche; écrire calc(100% / 2) et avoir le navigateur calculer que c'est 50%, ou écrire 100% / 2 et avoir sass compiler ça en 50% et le navigateur lire 50%, le résultat final est le même, pas plus ou moins de souplesse.
Il me semble le patch est plutôt un "avant l'unité c'était px maintenant c'est des %". (et sur ça je n'ai pas de problème).
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a plus de 2 ans
avant l'unité c'était px maintenant c'est des %"
Oui en fait c'est tout à fait ça :) Et c'est bien cela qui apporte plus de simplicité dans la customisation.
(Je vais supprimer calc() lorsque le calcul est simplifiable)
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a plus de 2 ans
- Fichier 0001-css-use-for-nav-button-icon-bar-position-56855.patch 0001-css-use-for-nav-button-icon-bar-position-56855.patch ajouté
J'hésite à modifier
- left: calc(100% / 6); + left: 15% - width: calc(100% / 6 * 4); + width: 85%;
Une différence de 1.5px max en tout sur la largeur des barres.
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a plus de 2 ans
- Sujet changé de positionner les barre du burger via CSS et calc() plutôt que sass à positionner les barre du burger via % que px et sass
Mis à jour par Serghei Mihai il y a plus de 2 ans
- Statut changé de Solution proposée à Solution validée
Thomas Jund a écrit :
J'hésite à modifier
[...]
C'est plus uniforme le tout en pourcentage. Modifie et pousse.
Mis à jour par Thomas Jund (congés, retour le 29/04) il y a plus de 2 ans
- Statut changé de Solution validée à Résolu (à déployer)
avec
`left: 17%` et `width: 66%`
commit 275cee65458aabb24368e487a762a25ed10747c1
Author: Thomas JUND <tjund@entrouvert.com>
Date: Thu Sep 9 17:37:13 2021 +0200
css: use % for nav-button icon-bars position (#56855)
Mis à jour par Frédéric Péters il y a plus de 2 ans
- Statut changé de Résolu (à déployer) à Solution déployée
css: use % for nav-button icon-bars position (#56855)