Skip to content

Instantly share code, notes, and snippets.

@davidhellmann
Last active December 2, 2022 10:57
Show Gist options
  • Save davidhellmann/4fd87e5d5eb8ddbdcfb6f19f4b76ab96 to your computer and use it in GitHub Desktop.
Save davidhellmann/4fd87e5d5eb8ddbdcfb6f19f4b76ab96 to your computer and use it in GitHub Desktop.
/* Matrix CSS */
#fields-dtmContentBuilderMatrix-field .matrixblock {
margin-bottom: 30px;
}
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockSection"] {
margin-top: 50px;
}
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockSection"] ~ .matrixblock:not([data-type^="blockSection"]) {
width: 97%;
margin-left: 3%;
}
/* Force 100% width for rc and banner section */
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockRCSection"],
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockBanner"] {
margin-top: 50px;
margin-bottom: 50px;
width: 100% !important;
margin-left: 0 !important;
}
/* Red outline if */
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockRCSection"] + .matrixblock:not([data-type^="blockSection"]):not([data-type^="blockRCSection"]):not([data-type^="blockBanner"]),
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockBanner"] + .matrixblock:not([data-type^="blockSection"]):not([data-type^="blockRCSection"]):not([data-type^="blockBanner"]) {
outline: 3px solid red;
}
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockRCSection"] + .matrixblock[data-type^="blockRCSection"],
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockBanner"] + .matrixblock[data-type^="blockBanner"] {
margin-top: -20px;
}
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockRCSection"] + .matrixblock:not([data-type^="blockSection"]):not([data-type^="blockRCSection"]):not([data-type^="blockBanner"])::before,
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockBanner"] + .matrixblock:not([data-type^="blockSection"]):not([data-type^="blockRCSection"]):not([data-type^="blockBanner"])::before {
content: "!!! Please add a section before";
background: red;
color: white;
font-weight: 700;
padding: 0 10px;
font-size: 13px;
border-radius: 5px;
display: inline-block;
position: absolute;
top: -2px;
left: 14px;
transform: translateY(-100%);
}
/* Label Dark Sections */
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockSectionDark"] {
outline: 3px solid #02091b;
}
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockSectionDark"]::before {
content: "Dark Section";
background: #02091b;
color: white;
font-weight: 700;
padding: 0 10px;
font-size: 13px;
border-radius: 5px;
display: inline-block;
position: absolute;
top: -2px;
left: 14px;
transform: translateY(-100%);
}
/* Label Light Sections */
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockSectionLight"] {
outline: 3px solid #eee;
}
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockSectionLight"]::before {
content: "Light Section";
background: #eee;
color: #02091b;
font-weight: 700;
padding: 0 10px;
font-size: 13px;
border-radius: 5px;
display: inline-block;
position: absolute;
top: -2px;
left: 14px;
transform: translateY(-100%);
}
/* Handle two empty sections */
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockSection"] + .matrixblock[data-type^="blockSection"],
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockSection"] + .matrixblock[data-type="blockRCSection"],
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockSection"] + .matrixblock[data-type="blockBanner"] {
outline: 3px solid red;
}
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockSection"] + .matrixblock[data-type^="blockSection"]::before,
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockSection"] + .matrixblock[data-type="blockRCSection"]::before,
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockSection"] + .matrixblock[data-type="blockBanner"]::before {
content: "!!! There is an empty section before";
background: red;
color: white;
font-weight: 700;
padding: 0 10px;
font-size: 13px;
border-radius: 5px;
display: inline-block;
position: absolute;
top: -2px;
left: 14px;
transform: translateY(-100%);
}
/* Handle first Matrix Block */
/* Handle two empty sections */
#fields-dtmContentBuilderMatrix-field .matrixblock:first-child:not(.matrixblock[data-type^="blockSection"]):not(.matrixblock[data-type^="blockRCSection"]) {
outline: 3px solid red;
margin-top: 50px;
}
#fields-dtmContentBuilderMatrix-field .matrixblock:first-child:not(.matrixblock[data-type^="blockSection"]):not(.matrixblock[data-type^="blockRCSection"])::before {
content: "!!! Please start with a section";
background: red;
color: white;
font-weight: 700;
padding: 0 10px;
font-size: 13px;
border-radius: 5px;
display: inline-block;
position: absolute;
top: -2px;
left: 14px;
transform: translateY(-100%);
}
/* Label RC Sections */
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockRCSection"] {
outline: 3px solid orange;
}
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockRCSection"]::before {
content: "Pre-build section";
background: orange;
color: white;
font-weight: 700;
padding: 0 10px;
font-size: 13px;
border-radius: 5px;
display: inline-block;
position: absolute;
top: -2px;
left: 14px;
transform: translateY(-100%);
}
/* Label Banner Sections */
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockBanner"] {
outline: 3px solid blue;
}
#fields-dtmContentBuilderMatrix-field .matrixblock[data-type^="blockBanner"]::before {
content: "Banner section";
background: blue;
color: white;
font-weight: 700;
padding: 0 10px;
font-size: 13px;
border-radius: 5px;
display: inline-block;
position: absolute;
top: -2px;
left: 14px;
transform: translateY(-100%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment