« Modèle:ButtonGrid/styles.css » : différence entre les versions

Navigation interactive dans l’historique

Dernière version du 4 février 2026 à 21:10

.ButtonGrid-container{
  display:grid;
  gap:.9rem;

  width:100%;
  padding:.4rem 0;
  box-sizing:border-box;

  /* Colonnes harmonisées, responsive */
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  align-items:stretch;
}

/* Chaque bouton remplit sa cellule */
.ButtonGrid-container > .button-link{
  width:100%;
}

/* Le lien interne remplit la hauteur du bouton */
.ButtonGrid-container > .button-link .button-link__link{
  height:100%;
}

@@ Ligne 1 : / Ligne 1 : @@
-/* =========================================================
+.ButtonGrid-container{
-   MiniCardv2/styles.css — 1 seule ligne (no wrap) + scroll
+   display:grid;
-   - Toujours sur UNE ligne, quel que soit le nombre de tuiles
-   - Pleine largeur
-   - Scroll horizontal si ça dépasse
-   - Compatible TemplateStyles
-   ========================================================= */
-.minicardv2-container{
-   display:flex;
-  flex-wrap:nowrap;           /* ✅ interdit le retour à la ligne */
-  align-items:stretch;
    gap:.9rem;
@@ Ligne 17 : / Ligne 7 : @@
    box-sizing:border-box;
-   overflow-x:auto;            /* ✅ scroll si trop de tuiles */
+   /* Colonnes harmonisées, responsive */
-   overflow-y:hidden;
+   grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
+   align-items:stretch;
-   background:transparent;
-  border:0;
 }
-/* Chaque bouton ButtonLink */
+/* Chaque bouton remplit sa cellule */
-.minicardv2-container > .button-link{
+.ButtonGrid-container > .button-link{
-  flex:1 0 170px;             /* base 170px, ne wrap pas */
+   width:100%;
-   width:auto;
-  box-sizing:border-box;
 }
-/* Le lien interne remplit le bouton */
+/* Le lien interne remplit la hauteur du bouton */
-.minicardv2-container > .button-link > .button-link__link{
+.ButtonGrid-container > .button-link .button-link__link{
    height:100%;
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  box-sizing:border-box;
-}
-/* Icônes : évite qu'une icône trop grande force la mise en page */
-.minicardv2-container img{
-  max-height:70%;
-  width:auto;
 }