Skip to content

Instantly share code, notes, and snippets.

@matt-fellows
Created January 1, 2019 03:14
Show Gist options
  • Select an option

  • Save matt-fellows/9c3c88ce7fe9e69faab399dfbd352c53 to your computer and use it in GitHub Desktop.

Select an option

Save matt-fellows/9c3c88ce7fe9e69faab399dfbd352c53 to your computer and use it in GitHub Desktop.
form.mktoForm {
background-color: #e9ecef;
width: 100% !important;
border-radius: .3rem;
padding: 50px;
}
form .mktoLabel {
color: #374c57;
font-weight: 700 !important;
margin-bottom: 10px !important;
}
.mktoForm input[type=text],
.mktoForm input[type=url],
.mktoForm input[type=email],
.mktoForm input[type=tel],
.mktoForm input[type=number],
.mktoForm input[type=date],
.mktoForm textarea.mktoField,
.mktoForm select.mktoField {
color: #495057;
padding: 7px;
height: 2.4rem;
font-size: 1.2rem;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.mktoForm .mktoOffset {
float: left;
height: 0 !important;
width: 10px;
}
.mktoButtonRow {
text-align: center !important;
}
.mktoForm .mktoButtonWrap .mktoButton {
margin: 0 auto !important;
color: white !important;
background: #009fda !important;
font-size: 16px !important;
border: 0 !important;
padding: 17px 25px !important;
border-radius: .3rem;
}
.mktoForm.mktoLayoutAbove .mktoRadioList,
.mktoForm.mktoLayoutAbove .mktoCheckboxList {
width: auto !important;
float: left !important;
clear: none !important;
}
.mktoCheckboxList input {
opacity: 0;
position: absolute;
}
.mktoCheckboxList input,
.mktoCheckboxList label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.mktoCheckboxList label {
position: relative;
}
.mktoCheckboxList input+label:before {
content: '';
background: #fff;
border: 2px solid #ddd;
border-radius: 5px;
display: inline-block;
vertical-align: middle;
width: 30px;
height: 30px;
padding: 2px;
margin-right: 10px;
text-align: center;
}
.mktoCheckboxList input:checked+label:before {
content: "\f00c";
font-family: "Font Awesome 5 Free";
font-weight: 700;
background: #394c57;
color: #fff;
border-color: #394c57;
line-height: 1.4rem;
}
body .mktoForm .mktoCheckboxList>label {
margin-left: 0;
line-height: 2rem;
}
.mktoFormRow:nth-child(6) .mktoFormCol {
width: 100% !important
}
.mktoForm {
width: 100% !important;
}
.mktoFormRow,
.mktoFieldWrap,
.mktoButtonRow {
width: 100%;
}
.mktoForm input[type=url],
.mktoForm input[type=text],
.mktoForm input[type=date],
.mktoForm input[type=tel],
.mktoForm input[type=email],
.mktoForm input[type=number],
.mktoForm textarea.mktoField,
.mktoForm select.mktoField {
width: 100% !important;
}
.mktoFormCol {
width: 50%;
}
.mktoFieldWrap {
padding-right: 10px !important;
box-sizing: border-box;
}
.mktoFormCol:nth-child(even) .mktoFieldWrap {
padding-right: 0 !important;
}
.mktoButtonRow {
text-align: center !important;
}
.mktoButtonWrap {
margin-left: 0 !important;
}
@media only screen and (max-width: 480px) {
form.mktoForm {
padding: 10px;
}
.mktoFormCol {
width: 100% !important;
}
.mktoFieldWrap {
padding-right: 0 !important;
}
}
@media only screen and (max-width: 640px) {
form.mktoForm {
padding: 10px;
}
.mktoFormCol {
width: 100% !important;
}
.mktoFieldWrap {
padding-right: 0 !important;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment