/* ================================== */ /* = = */ /* = STYLING PAGE BUILDER = */ /* = = */ /* ================================== */ /* Last updated 16 Dec 2016 */ /* IMPORTANT NOTES */ /* 1) Page Builder already has a default stylesheet /ea-demo/frontend/pbAssets/build/css/enPage.css */ /* so you may not need extra styling - only if you need to adjust the default behaviour */ /* 2) For specificty, ensure that the template's tag has a class of "pb" /* 3) By default every component has box-sizing: border-box; /* STRUCTURE NOTES */ /* Each component has a series of classes: /* Every component: en__component */ /* Page (form class): en__component--page */ /* Column: en__component--column */ /* Row: en__component--row */ /* 2-col row: en__component--row--2 */ /* Copy block: en__component--copyblock */ /* Form block: en__component--formblock */ /* Every field: en__field */ /* Field by type: en__field--text, en__field__element--checkbox, etc */ /* Field by tag: en__field--emailAddress, en__field--lastName, etc */ /* Field on page: en__field--12345 (specific to a field in a formblock) */ /* Label: en__field__label */ /* Errors: en__errorList, .en__field__error; /* PICK AND CHOOSE! */ /* ================================== */ /* = BODY STYLES = */ /* ================================== */ /* If you want to adjust body styles */ .pb body { font-family: Arial, Helvetica, sans-serif; color: #333; margin: 0; background: #eee; } /* ================================== */ /* = PAGE = */ /* ================================== */ /* The page contains the rows and everything else /* If you want to adjust page width so it isn't 100%: */ .pb .en__component--page { /* e.g. 80% width, with top and bottom margin */ /*width: 80%; margin: 2% auto; */ } /* ================================== */ /* = ROWS = */ /* ================================== */ /* Rows contain columns - here's some optional things you can do */ /* Stop columns from having same height */ .pb .en__component--row { align-items: flex-start; -webkit-align-items: flex-start; }; /* Reverse column stacking for mobiles */ .pb .en__component--row { flex-direction: row-reverse; -webkit-flex-direction: row-reverse; } /* ================================== */ /* = COLUMNS = */ /* ================================== */ /* COLUMN WIDTHS & STYLING */ /* By default, the columns are set at 50% each, and 100% at < 600px. */ /* The columns are flex, but not at < 600px, due to iPhone issues. */ /* If you want to change the desktop column widths, they should be set via */ /* media queries to keep them responsive. But if you want to keep them at 50%, */ /* then just style the columns via .pb .en__component--column */ @media screen and (min-width: 600px) { /* left column styling - widths should add up to 100% */ .pb .en__component--column:nth-child(1) { width: 48%; padding: 1.25em; } /* right column styling - widths should add up to 100% */ .pb .en__component--column:nth-child(2) { width: 48%; margin-left: 2%; /* Use for column spacing - add onto 2nd col so single columns don't have any margin */ padding: 1.25em; } } /* ================================== */ /* = FIELDS = */ /* ================================== */ /* This makes sure the inputs inherit font size */ .pb .en__field__input--calendar, .pb .en__field__input--other, .pb .en__field__input--password, .pb .en__field__input--select, .pb .en__field__input--splitselect, .pb .en__field__input--splittext, .pb .en__field__input--text, .pb .en__field__input--textarea, .pb .en__field__input--tripleselect, .pb .en__field__input--tripletext { font-size: inherit; } /* Input fields - if you want to style them, e.g. with more padding & grey border */ .pb input[type="text"], .pb input[type="date"], .pb textarea, .pb select, .pb fieldset { border: 1px solid #ccc; font-family: inherit; font-size: inherit; color: #333; padding: 10px; background-color: #fff; border-radius: 0; width: 100%; } /* By default, labels are width: 180px - if you want to adjust to third of width:; */ .pb .en__field--text .en__field__label, .pb .en__field--select .en__field__label, .pb .en__field--radio .en__field__label, .pb .en__field--textarea .en__field__label, .pb .en__field--calendar .en__field__label, .pb .en__field--splitselect .en__field__label { width: 33% !important; } /* Make input boxes' containers two-thirds of width */ .pb .en__field__element--text, .pb .en__field__element--select, .pb .en__field__element--radio, .pb .en__field__element--textarea, .pb .en__field__element--calendar { width: 64%; } /* If you want a checkbox to be full width */ .en__field__element--checkbox { width: 100%; } /* SELECTS */ /* Remove minimum width from selects */ .pb .en__field__input--select { min-width: auto; } /* REPLACEMENT SELECTS */ /* If you want to style selects, then remove default display & add custom arrow */ .pb select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url("data:image/svg+xml;utf8,"); background-position: 100% 50%; background-repeat: no-repeat; } /* REPLACEMENT CHECK BOXES */ /* If you want to style standard checkboxes, then hide the check boxes and /* add your own replacements - these three rules do this */ .pb .en__field__input--checkbox { display: none; } /* Add replacement tick box */ .pb input[type=checkbox] + label:before { content:""; background-color: #fff; border: 1px solid #dbdbdb; height: 27px; width: 27px; display: block; float: left; margin-right: 10px; } /* Replacement tick box - checked */ .pb input[type=checkbox]:checked + label:before { background-image: url("form_checkbox.png"); background-position: center center; background-repeat: no-repeat; border: 1px solid #dbdbdb; height: 27px; width: 27px; display: block; float: left; margin-right: 10px; } /* ================================== */ /* = ERRORS = */ /* ================================== */ .en__field__error { background-color: #aa0000; color: #fff; padding: 3px; border-radius: 3px; } /* ================================== */ /* = BUTTONS = */ /* ================================== */ button { background-color: #F15A22; border-radius: 0.3rem; padding: 1rem 1.5rem; font-size: 1.5rem; border: 0; color: #fff; } button:hover { cursor: pointer; background-color: #E55620; } /* ================================== */ /* = OPTIONAL STUFF = */ /* ================================== */ /* headings */ /*h1, h2, h3, h4, h5, h6 { color: #1693A5; font-weight: normal; } h1 { margin: 1.7rem 0; font-size: 3rem; font-weight: bold; } h2 { font-size: 2rem; margin: 1.3rem 0 0.5rem 0; } h3 { font-size: 1.3rem; margin: 1rem 0 0 0; } */ /* input fields focus border */ input:focus, textarea:focus, select:focus, fieldset:focus { border-color: #1693A5; box-shadow: 0px 0px 10px #1693A5; } /* Hide opt-in label */ .en__field--opt-in > label { /* whatever the name of your opt-in is */ display: none; } /* Hide something in the editor, but not live */ #en__pagebuilder .yourdiv { display: none; } /* give a backgound to the form blocks */ .en__component--formblock { /*padding: 25px; background: #f5f5f5; */ } /* h2 right column fancy boxed heading */ .en__component--column:nth-child(2) h2 { width: 100%; background-color: #158b9d; color: #fff; text-align: center; padding: 20px; box-sizing: border-box; margin: 25px 0 0; } /* ================================== */ /* = MEDIA QUERIES = */ /* ================================== */ @media (max-width: 600px) { .pb .en__component--column:nth-child(1) { width: 100%; } .pb .en__component--column:nth-child(2) { width: 100%; margin-left: 0; margin-top: 1.5rem; } }