Skip to content

Instantly share code, notes, and snippets.

@croxton
Last active April 11, 2024 07:54
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/f4804e44d13da9119abd63d4c25d6482 to your computer and use it in GitHub Desktop.
Save croxton/f4804e44d13da9119abd63d4c25d6482 to your computer and use it in GitHub Desktop.
Faux nested matrix blocks (Craft 5 version)
.matrixblock[data-type="sectionBlock"] > .titlebar > .blocktype {
color: var(--text-color);
font-weight: 600;
}
.matrixblock[data-type="sectionBlock"] ~ .matrixblock:not([data-type="sectionBlock"]) {
margin-left: 15px;
}
.matrixblock + .matrixblock[data-type="sectionBlock"] {
margin-top: 30px;
}
.matrixblock[data-type="sectionBlock"] ~ .matrixblock:not([data-type="sectionBlock"])::before {
background: var(--gray-100);
bottom:0;
content: "";
left:-17px;
position: absolute;
top:0;
width: 2px;
}
.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: var(--gray-100);
content: "";
height: 2px;
left:-17px;
position: absolute;
top:50%;
transform: translateY(-50%);
width: 16px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment