Développement #64406
simplifier / ajouter une possibilité de modifier le padding des cellules
0%
Description
Pour Miribel, j'ai essayé de faire le tour des modifs CSS nécessaires pour modifier le padding des cellules
Ou encore : modifier $title-padding et faire en sorte que le contenu des cellules soit aligné verticalement sur ces valeurs
Voici le résultat :
$title-padding: 0.75rem 1.5rem; ////// // ajust cell padding on $title-padding .column div.a2-block, .gru-content div.cell, .block { & h2 + div, .cell--body { padding: $title-padding; } } .gru-content .cell.wcsformsofcategorycell { h2 ~ div.intro { padding: $title-padding; } } .a2-block { & form, & p { padding: $title-padding; margin: 0; } } %cell-links-list { & > li { > a { padding: $title-padding; } div.description { padding-left: nth($title-padding, 2); padding-right: nth($title-padding, 2); } } } div.textcell { p, h1, h2, h3, h4, h5 { margin-left: nth($title-padding, 2); margin-right: nth($title-padding, 2); } } div.searchcell { form { padding: $title-padding; } .search-service-label { padding-left: nth($title-padding, 2); padding-right: nth($title-padding, 2); } }
reflexion à frappe haute :
On pourrait poser une variable scss $cell-padding et l'appliquer partout, mais ce serait contourner le problème d'un code fragile qui a besoin d'être homogénéisé / simplifié.
Generaliser `.cell-body` devrait aider. Mais ça ferme la possibilité de poser des backgrounds aux elements individuellement, pour cela il faudrait poser les padding sur chaques enfants : cell-description, cell-error, search-results, etc. La solution de poser plusieurs `.cell-body` coince sémantiquement. Pourquoi pas changer le nom de la class en `.cell--section` ?
Les links-lists ne reçoivent pas de padding, l'alignement se fait sur les liens, parceque séparateur full cell width. Donc `.cell-section` ferait l'affaire pour les elements avant et après les listes.
Et ça coince sur les textcells qui posent des marges sur les h*, p pour gérer l'alignement, parce cette cellule n'a pas de titre (#42968) et qu'on hack en appliquant le design du titre sur h2:first-child.