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

Navigation interactive dans l’historique

← Modification précédente Modification suivante →

@@ Ligne 1 : / Ligne 1 : @@
 /* =========================================================
-    MiniCardv2/styles.css — version compatible TemplateStyles
+    MiniCardv2/styles.css — 1 seule ligne (no wrap) + scroll
-    - Grille harmonisée responsive
+   - Toujours sur UNE ligne, quel que soit le nombre de tuiles
-    - Hauteur uniforme réglable
+   - Pleine largeur
+    - Scroll horizontal si ça dépasse
+    - Compatible TemplateStyles
     ========================================================= */
-/* Conteneur : grille responsive */
 .minicardv2-container{
-   display:grid;
+   display:flex;
+  flex-wrap:nowrap;           /* ✅ interdit le retour à la ligne */
+  align-items:stretch;
    gap:.9rem;
@@ Ligne 14 : / Ligne 17 : @@
    box-sizing:border-box;
-   /* Colonnes harmonisées, responsive */
+   overflow-x:auto;            /* ✅ scroll si trop de tuiles */
-   grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
+   overflow-y:hidden;
-  align-items:stretch;
    background:transparent;
@@ Ligne 22 : / Ligne 24 : @@
 }
-/* ✅ Réglage hauteur : modifie ici */
+/* Chaque bouton ButtonLink */
 .minicardv2-container > .button-link{
-   width:100% !important;
+   flex:1 0 170px;             /* base 170px, ne wrap pas */
+   width:auto;
-  height:56px !important;        /* <- change 56 -> 72 / 80 */
+   box-sizing:border-box;
-   min-height:56px !important;
-   box-sizing:border-box !important;
 }
-/* Le lien interne remplit la tuile et se centre */
+/* Le lien interne remplit le bouton */
 .minicardv2-container > .button-link > .button-link__link{
-   height:100% !important;
+   height:100%;
-  min-height:100% !important;
+   display:flex;
+   align-items:center;
-   display:flex !important;
+   justify-content:center;
-   align-items:center !important;
+   box-sizing:border-box;
-   justify-content:center !important;
-  /* Si ButtonLink ajoute du padding, ça empêche de réduire la hauteur */
-  padding-top:0 !important;
-  padding-bottom:0 !important;
-   box-sizing:border-box !important;
-}
-/* Texte : évite que line-height/marges forcent la hauteur */
-.minicardv2-container > .button-link > .button-link__link .button-link__text{
-  margin:0 !important;
-  line-height:1.1 !important;
 }
-/* Icône : évite qu’une image trop grande force la hauteur */
+/* Icônes : évite qu'une icône trop grande force la mise en page */
-.minicardv2-container > .button-link > .button-link__link img{
+.minicardv2-container img{
-   max-height:70% !important;
+   max-height:70%;
-   width:auto !important;
+   width:auto;
 }