Module CSS - Add 'module.css' to your main 'style.css' and add 'moduleEditor.css' to the editor, the customer should be able to see labels in the console but not on the website.
/* ---------------------------------- */
/* ----------- MODULE CSS ---------- */
/* ---------------------------------- */
.moduleTable, .moduleTable * {
box-sizing: border-box;
}
.moduleTable tr, .moduleTable td {
height: auto !important;
}
.moduleTable > tbody > tr > td {
vertical-align: top;
}
.twoColumn > tbody > tr > td {
width: 50%;
}
.moduleTable img {
width: 100% !important;
height: auto !important;
}
.sidebarLeft > tbody > tr > td:first-child {
width: 30%;
padding-right: 3%;
}
.sidebarLeft > tbody > tr > td:last-child {
width: 70%;
}
.sidebarRight > tbody > tr > td:first-child {
width: 70%;
padding-right: 3%;
}
.sidebarRight > tbody > tr > td:last-child {
width: 30%;
}
.threeColumn > tbody > tr > td {
width: 33%;
}
.twoColumn > tbody > tr > td:first-child, .threeColumn > tbody > tr > td:first-child {
padding-right: 3%;
}
.twoColumn > tbody > tr > td:last-child, .threeColumn > tbody > tr > td:last-child {
padding-left: 3%;
}
.menuTable > tbody > tr:nth-child(odd) {
background: rgba(0,0,0,0.06);
}
.menuTable > tbody > tr > td:last-child {
width: 100px;
vertical-align: bottom;
text-align: right;
}
@media all and (max-width: 900px) and (min-width: 700px) {
.moduleTable.threeColumn > tbody > tr > td {
display: inline-block !important;
width: 48% !important;
box-sizing: border-box;
}
.moduleTable.threeColumn > tbody > tr > td:first-child {
padding-right: 3%;
}
.moduleTable.threeColumn > tbody > tr > td:last-child {
padding-left: 0;
}
.moduleTable.threeColumn > tbody > tr > td.thirdColumn {
display: block !important;
width: 98% !important;
}
}
@media all and (max-width: 700px) {
.moduleTable.twoColumn > tbody > tr > td, .moduleTable.threeColumn > tbody > tr > td, .moduleTable.sidebarLeft > tbody > tr > td, .moduleTable.sidebarRight > tbody > tr > td {
display: block !important;
width: 100% !important;
padding: 10px 0;
}
.overflowTable td {white-space: nowrap; padding: 0 0.5em 0 0;}
}
@media all and (max-width: 980px) {
.moduleTable .moduleTable.twoColumn > tbody > tr > td, .moduleTable .moduleTable.threeColumn > tbody > tr > td, .moduleTable .moduleTable.sidebarLeft > tbody > tr > td, .moduleTable .moduleTable.sidebarRight > tbody > tr > td {
display: block !important;
width: 100% !important;
padding: 10px 0;
}
}
.accordion * {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.accordion > tbody > tr {
display: block;
padding: 10px 0;
border-bottom: 1px solid rgba(0,0,0,0.1);
cursor: pointer;
}
.accordion > tbody > tr > td {
display: block;
width: 100%;
}
.accordion > tbody > tr > td:last-child {
overflow: hidden;
padding-top: 0;
}
.expand {
display: block;
margin-top: -200%;
-webkit-transition: all 2s ease-out;
transition: all 2s ease-out;
}
.accordion > tbody > tr.on .expand {
-webkit-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
margin-top: 0;
background: rgba(0,0,0,0.06);
padding: 0.8em 1.2em;
border-radius: 1em;
}
.accordion > tbody > tr > td:first-child:before {
content: "\f055";
display: inline-block;
font-family: FontAwesome;
margin-right: 10px;
font-size: 1.6em;
-webkit-transition: all 0.5s;
transition: all 0.5s;
color: #999;
}
.accordion > tbody > tr > td:first-child > *:first-child {
display: inline-block;
}
.accordion > tbody > tr.on > td:first-child:before {
content: "\f056";
}
.accordion > tbody > tr:hover > td:first-child:before {
color: #333
}
.accordion.readMoreAccordian > tbody > tr > td:first-child:after {
content: "read more";
display: block;
margin-left: 3px;
margin-top: 0;
font-size: 0.9em;
color: #999;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.accordion.readMoreAccordian > tbody > tr.on > td:first-child:after {
margin-top: -10px;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.accordion.readMoreAccordian > tbody > tr > td:hover:first-child:after {
color: #333;
}
.accordion.readMoreAccordian > tbody > tr > td:first-child:before {display: none;}
.responsiveTable th {
text-align: left;
}
.responsiveTable tr:nth-child(odd) {
background: rgba(0,0,0,0.05);
}
@media screen and (max-width: 700px) {
.responsiveTable tr {
display: block;
border-bottom: 4px solid rgba(0,0,0,0.2);
}
.responsiveTable tr:first-of-type {
display: none;
}
.responsiveTable td {
display: block;
border: none;
line-height: 1.8em;
width: 100%;
padding-left: 90px;
position: relative;
overflow:hidden;
text-overflow:ellipsis;
box-sizing: border-box;
}
.responsiveTable td:before {
display: block;
position: absolute;
left: 0;
width: 90px;
font-weight: bold;
overflow:hidden;
text-overflow:ellipsis;
}
.responsiveTable tr:nth-child(odd) {
background: rgba(0,0,0,0.0);
}
.responsiveTable td:nth-child(odd) {
background: rgba(0,0,0,0.05);
}
}
/* ---------------------------------- */
/* ----------- MODULE CSS ---------- */
/* ---------------------------------- */
.moduleTable, .moduleTable * {
box-sizing: border-box;
}
.moduleTable > tbody > tr > td {
vertical-align: top;
}
.twoColumn > tbody > tr > td {
width: 50%;
}
.moduleTable img {
width: 100% !important;
height: auto !important;
}
.sidebarLeft > tbody > tr > td:first-child {
width: 30%;
padding-right: 3%;
}
.sidebarLeft > tbody > tr > td:last-child {
width: 70%;
}
.sidebarRight > tbody > tr > td:first-child {
width: 70%;
padding-right: 3%;
}
.sidebarRight > tbody > tr > td:last-child {
width: 30%;
}
.threeColumn > tbody > tr > td {
width: 33%;
}
.twoColumn > tbody > tr > td:first-child, .threeColumn > tbody > tr > td:first-child {
padding-right: 3%;
}
.twoColumn > tbody > tr > td:last-child, .threeColumn > tbody > tr > td:last-child {
padding-left: 3%;
}
.menuTable > tbody > tr:nth-child(odd) {
background: rgba(0,0,0,0.06);
}
.menuTable > tbody > tr > td:last-child {
width: 100px;
vertical-align: bottom;
text-align: right;
}
.accordion * {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.accordion > tbody > tr {
display: block;
padding: 10px 0;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.accordion > tbody > tr > td {
display: block;
width: 100%;
}
.accordion > tbody > tr > td:last-child {
overflow: hidden;
padding-top: 0;
}
.expand {
display: block;
margin-top: -150%;
-webkit-transition: all 2s ease-out;
transition: all 2s ease-out;
}
.accordion > tbody > tr.on .expand {
-webkit-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
margin-top: 0;
background: rgba(0,0,0,0.06);
padding: 0.8em 1.2em;
border-radius: 1em;
}
.accordion > tbody > tr > td:first-child:before {
content: "\f055";
display: inline-block;
font-family: FontAwesome;
margin-right: 10px;
font-size: 1.6em;
-webkit-transition: all 0.5s;
transition: all 0.5s;
color: #999;
}
.accordion > tbody > tr > td:first-child > *:first-child {
display: inline-block;
}
.accordion > tbody > tr.on > td:first-child:before {
content: "\f056";
}
.accordion > tbody > tr:hover > td:first-child:before {
color: #333
}
.accordion.readMoreAccordian > tbody > tr > td:first-child:after {
content: "read more";
display: block;
margin-left: 3px;
margin-top: 0;
font-size: 0.9em;
color: #999;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.accordion.readMoreAccordian > tbody > tr.on > td:first-child:after {
margin-top: -10px;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.accordion.readMoreAccordian > tbody > tr > td:hover:first-child:after {
color: #333;
}
.accordion.readMoreAccordian > tbody > tr > td:first-child:before {display: none;}
.moduleTable {
position: relative;
margin-bottom: 35px;
}
.moduleTable:before {
background: #7d5dbc;
color: white;
padding: 5px 15px;
border-radius: 0 0 3px 3px;
width: 300px;
text-align: center;
margin-top: 0px;
cursor: help;
position: absolute;
bottom: -27px;
left: 0;
display: block;
box-sizing: border-box;
}
.moduleTable:after {
pointer-events: none;
position: absolute;
display: block;
bottom: 0;
transform: translatey(100%);
right: 0;
left: 315px;
z-index: 1200;
font-size: 0.8em;
line-height: 1.4em;
text-align: left;
border-radius: 5px;
background: #ccc;
color: #333;
box-shadow: 1px 2px 6px rgba(0,0,0,0.2);
padding: 0.5em 1em;
box-sizing: border-box;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition: 0.5s;
transition: 0.5s;
}
.moduleTable:hover:after {
transform: translatey(108%);
opacity: 1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.twoColumn:before {
content: "MODULE | 2 column";
}
.twoColumn:after {
content: "Please add text or images inside table. You can also add a module inside another module but only up to 1 layer deep. Images will be full width of frame. On smaller screens 2 columns will become 1 with the right cell on each row stacking below the left. Add as many rows as necessary.";
}
.threeColumn:before {
content: "MODULE | 3 column";
}
.threeColumn:after {
content: "Please add text or images inside table. It is best not to add another module inside this module. Images will be full width of frame. On medium screens the first 2 cells will be 50% width and the third will be 100% width stacked below. On smaller screens 3 columns will become 1 with the right cells on each row stacking below the left. Add as many rows as necessary.";
}
.sidebarLeft:before {
content: "MODULE | sidebar - left";
}
.sidebarLeft:after {
content: "Please add text or images inside table. The left cells will be 30% width on medium to large screens. You can also add a module inside another module but only up to 1 layer deep. Images will be full width of frame. On smaller screens 2 columns will become 1 with the right cell on each row stacking below the left. Add as many rows as necessary.";
}
.sidebarRight:before {
content: "MODULE | sidebar - right";
}
.sidebarRight:after {
content: "Please add text or images inside table. The right cells will be 30% width on medium to large screens. You can also add a module inside another module but only up to 1 layer deep. Images will be full width of frame. On smaller screens 2 columns will become 1 with the right cell on each row stacking below the left. Add as many rows as necessary.";
}
.accordion:before {
content: "MODULE | faq / accordian - plus icon";
}
.accordion:after {
content: "Please add text or images inside table. Add the title caption text next to the plus sign, then add the hidden text in the cell below. You can also add a module inside another module but only up to 1 layer deep. Images will be full width of frame.";
}
.readMoreAccordion:before {
content: "MODULE | faq / accordian - read more";
}
.readMoreAccordion:after {
content: "Please add text or images inside table. Add the title caption text above the read more text, then add the hidden text in the cell below. You can also add a module inside another module but only up to 1 layer deep. Images will be full width of frame. ";
}
.overflowTable:before {
content: "MODULE | Data Table Scroll";
}
.overflowTable:after {
content: "This module is designed for data tables. You can add or remove as many rows or columns as you like. When the width of the table is wider than it's container a horizontal scroll bar will appear.";
}
.responsiveTable:before {
content: "MODULE | Responsive Data Table";
}
.responsiveTable:after {
content: "This module is designed for data tables so that they are responsive. The headings can only be in the top row. On mobile the table will stack.";
}
.menuTable:before {
content: "MODULE | menu Table";
}
.menuTable:after {
content: "Please add menu item in left column and price in right. The right cells will be 100px wide. You can also add a module inside another module but only up to 1 layer deep. Images will be full width of frame. Add as many rows as necessary.";
}