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