Skip to content

Instantly share code, notes, and snippets.

@croxton
Created January 18, 2024 12:10
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save croxton/a4807362ac4bf9d06944e48c89c86656 to your computer and use it in GitHub Desktop.
Save croxton/a4807362ac4bf9d06944e48c89c86656 to your computer and use it in GitHub Desktop.
Faux nested matrix blocks
.matrixblock[data-type="sectionBlock"] ~ .matrixblock:not([data-type="sectionBlock"]) {
margin-left: 14px;
}
.matrixblock + .matrixblock[data-type="sectionBlock"] {
margin-top: 30px;
}
.matrixblock[data-type="sectionBlock"] ~ .matrixblock:not([data-type="sectionBlock"])::before {
background: #DFE5EA;
bottom:0;
content: "";
left:-15px;
position: absolute;
top:0;
width: 1px;
}
.matrixblock[data-type="sectionBlock"] ~ .matrixblock:not([data-type="sectionBlock"])::before {
top:-15px;
}
.matrixblock:has(+ .matrixblock[data-type="sectionBlock"])::before,
.matrixblock:not([data-type="sectionBlock"]):last-child::before {
bottom: 50% !important;
}
.matrixblock[data-type="sectionBlock"] ~ .matrixblock:not([data-type="sectionBlock"])::after {
background: #DFE5EA;
content: "";
height: 1px;
left:-15px;
position: absolute;
top:50%;
transform: translateY(-50%);
width: 15px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment