fix(header): force 10px seams between homepage icon cards
Harden gutters-5 child padding with higher specificity so homepage-fixed utilities cannot collapse header-slider card gaps.
This commit is contained in:
@@ -43,20 +43,28 @@ body.dark-theme .header-components-search__input {
|
||||
.header-components-card .ac {
|
||||
align-items: center;
|
||||
}
|
||||
/* zibll: .gutters-5 { margin:-5px } > * { padding:5px } → 10px visual gap */
|
||||
/* zibll: .gutters-5 { margin:-5px } > * { padding:5px } → 10px visual gap.
|
||||
* Use both gutters model AND flex gap so homepage (which used to miss
|
||||
* zibll-utilities) and any future cascade zero-padding still show seams. */
|
||||
.header-slider-card .gutters-5,
|
||||
.header-components-card .gutters-5 {
|
||||
.header-components-card .gutters-5,
|
||||
.header-slider-card .flex.jse.flex-row,
|
||||
.header-components-card .flex.jse.flex-row {
|
||||
margin: -5px;
|
||||
gap: 0; /* spacing comes from child padding to match zibll exactly */
|
||||
}
|
||||
.header-slider-card .gutters-5 > *,
|
||||
.header-components-card .gutters-5 > * {
|
||||
padding: 5px;
|
||||
.header-components-card .gutters-5 > *,
|
||||
.header-slider-card .flex.jse.flex-row > *,
|
||||
.header-components-card .flex.jse.flex-row > * {
|
||||
padding: 5px !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.header-slider-card .flex1,
|
||||
.header-components-card .flex1,
|
||||
.header-slider-card .flex .flex1,
|
||||
.header-components-card .flex .flex1 {
|
||||
flex: 1;
|
||||
flex: 1 1 0;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user