Skip to content

Instantly share code, notes, and snippets.

@uplinq

uplinq/marketo-reset.markdown

Created April 16, 2018 00:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save uplinq/e10f646155d47e3e3ea4170cf0a387ca to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save uplinq/e10f646155d47e3e3ea4170cf0a387ca to your computer and use it in GitHub Desktop.
Download ZIP
Marketo reset
Raw
style.css
/*=== RESET ===*/
* {box-sizing: border-box!important;}
.mktFooter, .mktHeader, .mktColumn, .mktoContent,
.mktoForm, .mktoFormRow, .mktoFormCol, .mktoOffset, .mktoFieldWrap, .mktoLabel, .mktoGutter, .mktoRadioList, .mktoCheckboxList, .mktoRadioList > input, .mktoCheckboxList > input, .mktoRadioList > label, .mktoCheckboxList > label, .mktoButtonRow, .mktoButtonWrap, .mktoButton, .mktInput, input, select, textarea, button, label {margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 1 !important; background: transparent none !important; float: none !important; width: auto !important; height: auto !important; font-size: inherit !important;}
.mktoGutter, .mktoOffset {display: none !important;}
input, select, textarea, button {-webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;}
[class^="mkt"] > li, [id^="mkt"] > li {list-style: none!important;}
[class^="lp"], [id^="lp"], [name^="lp"] {position: static !important; width: auto !important; height: auto !important; display: block !important;}
.mktoContent, #mktoContent, .mktContent, #mktContent, [id^="inner"], [id^="outer"] {position: static !important; width: auto !important; height: auto !important;}
:focus { outline: 0 }
/*=== GENERAL ===*/
body {font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; line-height: 1.15; color: hsl(0, 0%, 33%); background-color: #545454; min-height: 100vh; padding: 0; margin: 0;}
body > .container {width: 100%!important; max-width: 990px!important; padding-left: 70px !important; margin: 0 auto!important; background-color: hsl(0, 0%, 100%)!important; display:flex!important; flex-direction:column!important; align-self:stretch!important; flex-grow: 1!important; position: relative!important; padding-bottom: 117px !important;}
h1, h2, h3, h4, h5, h6 {line-height: 1.15!important; margin: 0.8em 0 0.4em 0!important;}
p {margin: 1em 0 !important; line-height: 1.5 !important; color: inherit !important; text-align: left !important;}
div > span[style], p > span[style], span > span[style] {color: inherit !important; font-family: inherit !important; font-size: inherit !important;}
/*=== FORM ===*/
form { font-size: 15px }
input[type=text], input[type=email], input[type=tel], input[type=url], input[type=password], input[type=search], input[type=date], input[type=datetime-local], input[type=time], input[type=week], input[type=month], input[type=number], textarea, select { box-sizing: border-box!important; display: flex!important; width: 100%!important; max-width: 468px !important; height: auto!important; padding: 0.7em!important; font-size: 14px!important; line-height: 1!important; color: hsl(0, 0%, 33%)!important; background-color: hsl(0, 100%, 100%)!important; background-image: none!important; border: 1px solid hsl(207, 54%, 69%)!important; border-radius: 0.15em!important; transition: border-color ease-in-out 0.3s!important;}
input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=url]:focus, input[type=password]:focus, input[type=search]:focus, input[type=date]:focus, input[type=datetime-local]:focus, input[type=time]:focus, input[type=week]:focus, input[type=month]:focus, input[type=number]:focus, textarea:focus, select:focus {border-color: hsl(207, 54%, 41%) !important;}
textarea { line-height: 1.2!important; min-width: 130px!important; min-height: 77px!important; }
input[type="checkbox"], input[type="radio"] { display: none !important }
input[type="checkbox"] + label, input[type="radio"] + label { display: flex!important; flex-wrap: wrap!important; flex-grow: 1!important; font-weight: normal!important; align-items: center!important; align-content: center!important; cursor: pointer!important; }
input[type="checkbox"] + label:before, input[type="radio"] + label:before { content: ''!important; line-height: 1!important; box-sizing: border-box!important; vertical-align: middle!important; font-weight: normal!important; font-style: normal!important; display: inline-flex!important; align-items: center!important; justify-content: center!important; text-align: center!important; width: 18px!important; width: 1em!important; height: 18px!important; height: 1em!important; font-size: 1.15em!important; margin-right: 7px!important; background-color: #fff!important; border-radius: 0.15em!important; border: 1px solid hsl(207, 54%, 69%)!important; color: hsl(207, 54%, 41%)!important; }
input[type="checkbox"] + label:before {}
input[type="radio"] + label:before { border-radius: 99em!important; overflow: hidden!important; padding-bottom: 0.13em!important; }
input[type="checkbox"]:checked + label:before { content: '\2714' }
input[type="radio"]:checked + label:before { content: '\25CF' }
select { width: 100%!important; height: 2.5em!important; padding-top: 0!important; padding-bottom: 0!important; background: #fff url("https://redislabs.com/wp-content/images/select-arrowhead.png") no-repeat scroll right 14px center!important; padding-right: 26px!important; text-overflow: ellipsis!important; -webkit-appearance: none!important; -moz-appearance: none!important; appearance: none!important; }
select[multiple] {background-image: none!important; height: auto!important;}
select[multiple] option {padding: 0.1em 0!important;}
option[disabled][selected] { font-weight: bold!important; display: none!important; }
select[multiple] option[disabled]:first-child,
select option[value=""]:first-child {display: block!important; opacity: 0.5 !important;}
.mktoLabel, label { display: inline-block!important; margin-bottom: 0.5em!important; font-weight: normal!important; line-height: 1.2!important; margin-bottom: 0.4em!important;}
.mktoFormRow {margin-bottom: 26px !important;}
/*=== BUTTONS ===*/
.mktoButton, button, input[type="button"], input[type="reset"], input[type="submit"] { font-size: 1em!important; border: 0!important; cursor: pointer!important; position: relative!important; box-sizing: border-box!important; min-width: 44px!important; min-height: 33px!important; background-color:hsl(7, 85%, 39%)!important; color: hsl(0, 0%, 100%)!important; line-height: 0.88!important; padding: 0.5em 1em!important; text-decoration: none!important; transition: all 0.3s ease!important; display: inline-flex!important; flex: none!important; flex-wrap: wrap!important; align-items: center!important; align-content: center!important; justify-content: center!important; text-align: center!important; border-radius: 0.14em!important; }
.mktoButton:hover, button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { background-color: hsl(7, 83%, 35%)!important; color: hsl(0, 0%, 100%)!important; text-decoration: none!important; }
.mktoButton[type="submit"], input[type="submit"], button[type="submit"] {min-width: 165px !important; min-height: 47px !important;}
/*=== HEADER ===*/
header { text-align: left; display: -webkit-inline-flex;
display: -moz-inline-flex;
display: -ms-inline-flex;
display: -o-inline-flex;
display: inline-flex; height: 160px; align-items:center; }
header .logo {display: inline-block; margin-right: 29px;}
header .logo img {height: 40px;}
header h1 {display: inline-block; text-transform: capitalize; font-weight: normal; font-size: 36px !important; margin: 11px 0 0 0 !important;}
/*=== INTRO ===*/
.mktoContent > [id^="lp"]:first-child {margin-bottom: 3em !important; line-height: 1.5 !important;}
.mktoContent > [id^="lp"]:first-child p:first-child {margin-top: 0 !important;}
/*=== SUCCESS ===*/
#success {max-width: 80%;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment