« 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
+    MiniCardv2/styles.css — version compatible TemplateStyles
-   Version 100% compatible TemplateStyles (sans grid/minmax)
+    - Grille harmonisée responsive
-    - largeur harmonisée
+    - Hauteur uniforme réglable
-   - wrap responsive
-    - hauteur réglable
     ========================================================= */
+/* Conteneur : grille responsive */
 .minicardv2-container{
-   display:flex;
+   display:grid;
-  flex-wrap:wrap;
    gap:.9rem;
@@ Ligne 15 : / Ligne 13 : @@
    padding:.4rem 0;
    box-sizing:border-box;
+  /* Colonnes harmonisées, responsive */
+  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
+  align-items:stretch;
+  background:transparent;
+  border:0;
 }
-/* Chaque bouton devient une "tuile" flexible */
+/* ✅ Réglage hauteur : modifie ici */
 .minicardv2-container > .button-link{
-   flex:1 1 170px;   /* largeur mini harmonisée */
+   width:100% !important;
-  max-width:100%;
-   height:56px !important;   /* ← change ici la hauteur */
+   height:56px !important;        /* <- change 56 -> 72 / 80 */
    min-height:56px !important;
-   box-sizing:border-box;
+   box-sizing:border-box !important;
 }
-/* Lien interne centré */
+/* Le lien interne remplit la tuile et se centre */
 .minicardv2-container > .button-link > .button-link__link{
    height:100% !important;
+  min-height:100% !important;
    display:flex !important;
@@ Ligne 36 : / Ligne 41 : @@
    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;
+   box-sizing:border-box !important;
 }
-/* Texte */
+/* Texte : évite que line-height/marges forcent la hauteur */
-.minicardv2-container .button-link__text{
+.minicardv2-container > .button-link > .button-link__link .button-link__text{
    margin:0 !important;
    line-height:1.1 !important;
 }
-/* Icône */
+/* Icône : évite qu’une image trop grande force la hauteur */
-.minicardv2-container img{
+.minicardv2-container > .button-link > .button-link__link img{
    max-height:70% !important;
    width:auto !important;
 }