nickfmc
9/20/2018 - 5:12 PM
SCSS - Custom GF Styling
a Better Clean GF starting point
input::placeholder, textarea::placeholder, select::placeholder {
color: #c8c8c8;
text-transform: uppercase;
opacity: 1;
}
li.gfield:after {content:"";display:table;clear:both;}
main ul.gform_fields {
left: 0;
}
main ul.gform_fields li {
margin-bottom: 7px;
}
main ul.gform_fields li::before {
display: none !important;
}
.gform_wrapper {
/* Buttons */
.button, .button:visited, .h nav li.button a, button, input[type="button"], input[type="submit"], input[type="reset"], .menu-toggle {
color:white;
text-transform: uppercase;
font-size:1em;
background-color: transparent;
border-radius:0;
border:none;
padding: 0;
line-height:1;
transition:background 500ms, color 500ms;
text-decoration:none;
text-align:center;
position: relative;
}
.select2-container .select2-choice {
background: #efefef !important;
border: none !important;
padding: .75em 1em !important;
}
.select2-display-none {padding-top:.5em !important;}
.button.secondary-button, input[type="reset"] {
color:black;
background:lightgrey;
}
.button:hover, button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, .menu-toggle:hover, .h nav li.button a:hover {
color:white;
cursor:pointer;
transition:background 250ms, color 250ms;
}
.sidebar .button {
margin: 1em auto;
display: block;
}
.gform_footer {
display: inline-block;
position: relative;
&::after {
content: "";
bottom: -12px;
position: absolute;
display: block;
width: 75%;
height: 6px;
background-color: $color-orange-base;
}
}
/* GForm Elements */
.content form {margin:1em 0;}
fieldset {padding:1em 0;}
fieldset > * {padding-left:1em;}
fieldset legend {padding-left:0;}
label {display:block; padding:1em 0 0 .25em; margin-bottom: 4px;}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #3d3d3d;
border: none;
border-radius: 0;
padding: 8px;
font-size: 1rem;
color: #c8c8c8;
}
select::-ms-expand {
display: none;
}
option {padding:.25em .5em;}
textarea, select[multiple], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="week"], input[type="number"], input[type="password"], input[type="search"], input[type="text"], input[type="time"], input[type="url"], input[type="tel"], input[type="time"]
{width:100%; max-width:100%; border-radius:0; border:0; padding:10px; font-size:18px; outline:none; background:#3d3d3d; color: #fff;}
select[multiple] {width:auto;}
input[type="week"], input[type="month"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="number"], input[type="time"] {width:5em; max-width:100%;}
input[type="checkbox"], input[type="radio"] {display:inline-block; padding-top:0; clear:left; float:left;}
input[type="checkbox"] + label, input[type="radio"] + label {display:inline-block; max-width:95%; float:left;}
input[type="search"] {appearance:none;}
textarea {min-height:200px; width:100%;}
form button, form input[type="submit"] {float:left;}
form.simple-search input {width:100%; padding-right:40px;}
.search form.simple-search {width:60%;}
form.simple-search button {top:5px; right:5px; border:0; background:none; padding:0; box-shadow:none;}
form.simple-search button:hover, form.simple-search button:active {box-shadow:none;}
form.simple-search button img {width:2em;}
form.search-form:not(.media-toolbar-primary) {padding:0; overflow:hidden; margin-top:1em; max-height:3.25em; position:relative;}
form.search-form:not(.media-toolbar-primary) input {padding:1em 3em 1em 1em; width:100%;}
.search-form:not(.media-toolbar-primary) label:before {font-size:2em;}
.search-form:not(.media-toolbar-primary) * {outline: none;}
.search-form:not(.media-toolbar-primary) button {
width: 10%;
height: 5em;
position: absolute;
top: 0;
right: 0;
border-top-left-radius:0;
border-bottom-left-radius:0;
}
.search-form:not(.media-toolbar-primary) button:before {font-size:2.5em;}
.search-form:not(.media-toolbar-primary) button.icon-replacement:before {left:.35em; top:.4em;}
.select2-container .select2-choice {padding:1.05em !important;}
/* Gravity Forms Styling, v .1 */
/* Basics */
&:after, li:after, .gfield_html_formatted:after, .clear-multi:after, .gf_progressbar_wrapper:after, .gform_page_footer:after, .gf_page_steps:after {content:"";display:table;clear:both;}
ul {padding:0; list-style:none;}
li {padding:.5em 0;}
.small, .small + .ginput_counter, .small + .chosen-container-multi {width:20% !important; max-width:100%;}
.medium, .medium + .ginput_counter, .medium + .chosen-container-multi {width:50% !important; max-width:100%;}
.large, .large + .ginput_counter, .large + .chosen-container-multi {width:100% !important; max-width:100%;}
@media (max-width:767px) {
.small, .small + .ginput_counter, .small + .chosen-container-multi {width:40% !important; max-width:100%;}
.medium, .medium + .ginput_counter, .medium + .chosen-container-multi {width:75% !important; max-width:100%;}
.large, .large + .ginput_counter, .large + .chosen-container-multi {width:100% !important; max-width:100%;}
}
.ginput_counter {padding-top:.25em;}
.gfield_required {padding:0 .2em;}
.gfield_description {padding:.25em .25em 0 .25em; clear:both;}
.field_description_above .gfield_description {padding:.75em .25em;}
.field_sublabel_above.field_description_above .gfield_description + .clear-multi label {padding-top:0;}
@media (max-width:767px) {
li.gfield {max-width:100%; overflow-x:scroll;}
}
/* Typography */
.gfield_total label {font-size: 1.75em;}
.ginput_container_total, h3.gf_progressbar_title, .ginput_container_post_title {font-size: 1.5em;}
h3.gf_progressbar_title {font-size:1em;}
.ginput_counter, .ginput_complex span label, .ginput_container_fileupload .screen-reader-text, .instruction, .ui-datepicker-title select {font-size: .9em;}
.gfield_description, .gfield .instruction {font-style:italic;}
.gfield_label, .gfield_required, .ginput_product_price_label, .ginput_product_price, input:checked + label, td.ui-datepicker-today a, .gfield_description.validation_message, .ginput_shipping_price, h3.gf_progressbar_title {font-weight:bold;}
.ginput_counter {text-align:right;}
.ginput_counter {line-height:1;}
/* Colors */
.gfield_required, .warningTextareaInfo, ul.chosen-results li.no-results, .ginput_container_fileupload span.screen-reader-text + div {color:$color-orange-base;} /* Maroon */
.ginput_product_price_label, .ginput_product_price, .ginput_container_total {color: green;}
select[multiple] + .chosen-container li.result-selected, td.ui-datepicker-current-day a.ui-state-active, ul.chosen-results li.active-result.result-selected {
background: black;
color: white;
}
/* Radio & Checkboxes */
.gfield_checkbox li label, .gfield_radio li label {
padding-top: 0;
top: -.15em;
position: relative;
}
.gfield_radio input[type="radio"] + input[type="text"] {
float: left;
display: inline-block;
width: 10em;
top: -.75em;
position: relative;
margin-left: .25em;
}
/* Selects */
.ginput_container_select {position:relative; display: inline;}
.ginput_container_select.chosen-after {display:inline-block;}
.ginput_container_select.chosen-after:after {top:1.3em;}
.ginput_container_select:after {content:""; width:0; height:0; position:absolute; pointer-events: none;}
.ginput_container_select:after {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
top: .3em;
right: .75em;
border-top: 8px solid black;
opacity: 0.5;
}
.ginput_container_select select {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.chosen-container {position:relative;}
li.gfield a.chosen-single span, li.gfield .chosen-container-multi .search-choice span {
color: black;
position: absolute;
display: block;
left: 1em;
top: .85em;
}
ul.chosen-results {
display: none;
border: 3px solid #efefef;
background: white;
top: -.3em;
position: relative;
padding:0 !important;
max-height: 11.75em;
overflow: scroll;
}
.chosen-container-multi ul.chosen-results {
top:-1em;
left:1em;
width:15em;
max-width:90%;
}
ul.chosen-results li.active-result {padding:.5em .75em;}
ul.chosen-results li.active-result:hover {
background: #efefef;
}
select[multiple] + .chosen-container li.result-selected {padding-left:.75em;}
select[multiple] + .chosen-container.chosen-container-active li.search-field {display:none;}
ul.chosen-results li.active-result.result-selected.gf_placeholder {background:transparent; color:black;}
ul.chosen-results li.no-results {
padding: .5em .75em;
font-style: italic;
}
.chosen-container-active ul.chosen-results {
display: block;
}
.chosen-container-active a.chosen-single span {visibility:hidden;}
.chosen-container-multi .search-choice span {
top: 2em;
left: 2em;
}
.chosen-container-multi li.search-choice {
position: relative;
top: 2.5em;
}
.chosen-container-multi .search-field input {overflow-x:hidden;}
.ginput_container_multiselect select {
height: 8em;
overflow: scroll;
}
.ginput_container_multiselect select.small {
height: 6.5em;
}
.ginput_container_multiselect select.large {
height: 12em;
}
.small + .chosen-container-multi .search-field input, .medium + .chosen-container-multi .search-field input, .large + .chosen-container-multi .search-field input {width:100%;}
select[multiple] + .chosen-container li.search-field input {
width: 100% !important;
}
select[multiple] + .chosen-container-multi ul.chosen-choices li.search-choice {
position: relative;
left: 90%;
padding-bottom: 1em;
}
/* HTML Field & Sections */
.gfield_html_formatted {
margin-bottom: 1em;
}
li.gsection {
margin-top: 2em;
}
/* Name Fields */
.ginput_complex span label {
padding: .25em 0 .75em .25em;
}
span.name_first, span.name_last, span.name_middle, span.name_prefix, span.name_suffix {
width: 49%;
float: left;
}
span.name_first {margin-right:1%;}
span.name_last {margin-left:1%;}
.no_prefix.no_middle_name.no_last_name.no_suffix span.name_first label,
.no_prefix.no_middle_name.no_first_name.no_suffix span.name_last label {
display: none;
}
.no_prefix.no_middle_name.no_first_name.no_suffix span.name_last {margin-left:0;}
.no_prefix.has_first_name.has_middle_name.has_last_name.no_suffix span.name_first {width:40%; margin-right:1%;}
.no_prefix.has_first_name.has_middle_name.has_last_name.no_suffix span.name_middle {width:18%;}
.no_prefix.has_first_name.has_middle_name.has_last_name.no_suffix span.name_last {width:40%; margin-left:1%;}
.has_prefix.has_first_name.has_middle_name.has_last_name.no_suffix span.name_prefix {width:10%;}
.has_prefix.has_first_name.has_middle_name.has_last_name.no_suffix span.name_first {width:39%; margin-right:1%;}
.has_prefix.has_first_name.has_middle_name.has_last_name.no_suffix span.name_middle {width:10%;}
.has_prefix.has_first_name.has_middle_name.has_last_name.no_suffix span.name_last {width:39%;}
.no_prefix.has_first_name.has_middle_name.has_last_name.has_suffix span.name_first {width:38.5%; margin-right:1%;}
.no_prefix.has_first_name.has_middle_name.has_last_name.has_suffix span.name_middle {width:10%; margin-right:1%;}
.no_prefix.has_first_name.has_middle_name.has_last_name.has_suffix span.name_last {width:38.5%; margin-left:0;}
.no_prefix.has_first_name.has_middle_name.has_last_name.has_suffix span.name_suffix {width:10%; margin-left:1%;}
.has_prefix.has_first_name.no_middle_name.has_last_name.has_suffix span.name_prefix {width:10%;}
.has_prefix.has_first_name.no_middle_name.has_last_name.has_suffix span.name_first {width:39%; margin-right:1%;}
.has_prefix.has_first_name.no_middle_name.has_last_name.has_suffix span.name_last {width:39%; margin-left:0;}
.has_prefix.has_first_name.no_middle_name.has_last_name.has_suffix span.name_suffix {width:10%; margin-left:1%;}
.has_prefix.has_first_name.has_middle_name.has_last_name.has_suffix span.name_prefix {width:10%;}
.has_prefix.has_first_name.has_middle_name.has_last_name.has_suffix span.name_first {width:33.5%; margin-right:1%;}
.has_prefix.has_first_name.has_middle_name.has_last_name.has_suffix span.name_middle {width:10%; margin-right:1%;}
.has_prefix.has_first_name.has_middle_name.has_last_name.has_suffix span.name_last {width:33.5%; margin-left:0;}
.has_prefix.has_first_name.has_middle_name.has_last_name.has_suffix span.name_suffix {width:10%; margin-left:1%;}
@media (max-width:767px) {
.has_prefix.has_first_name.has_middle_name.has_last_name.no_suffix span.name_prefix {width:20%;}
.has_prefix.has_first_name.has_middle_name.has_last_name.no_suffix span.name_first {width:40%; margin-right:1%;}
.has_prefix.has_first_name.has_middle_name.has_last_name.no_suffix span.name_middle {clear:left; width:20%;}
.has_prefix.has_first_name.has_middle_name.has_last_name.no_suffix span.name_last {width:40%;}
.no_prefix.has_first_name.has_middle_name.has_last_name.has_suffix span.name_first {width:40%; margin-right:1%;}
.no_prefix.has_first_name.has_middle_name.has_last_name.has_suffix span.name_middle {width:20%; margin-right:1%;}
.no_prefix.has_first_name.has_middle_name.has_last_name.has_suffix span.name_last {clear:left; width:40%; margin-left:0;}
.no_prefix.has_first_name.has_middle_name.has_last_name.has_suffix span.name_suffix {width:20%; margin-left:1%;}
.has_prefix.has_first_name.no_middle_name.has_last_name.has_suffix span.name_prefix {width:20%;}
.has_prefix.has_first_name.no_middle_name.has_last_name.has_suffix span.name_first {width:40%; margin-right:1%;}
.has_prefix.has_first_name.no_middle_name.has_last_name.has_suffix span.name_last {width:40%; clear:left; margin-left:0;}
.has_prefix.has_first_name.no_middle_name.has_last_name.has_suffix span.name_suffix {width:20%; margin-left:1%;}
.has_prefix.has_first_name.has_middle_name.has_last_name.has_suffix span.name_prefix {width:20%; margin-right:1%;}
.has_prefix.has_first_name.has_middle_name.has_last_name.has_suffix span.name_first {width:40%; margin-right:1%;}
.has_prefix.has_first_name.has_middle_name.has_last_name.has_suffix span.name_middle {clear:left; width:20%; margin-right:1%;}
.has_prefix.has_first_name.has_middle_name.has_last_name.has_suffix span.name_last {width:40%; margin-left:0;}
.has_prefix.has_first_name.has_middle_name.has_last_name.has_suffix span.name_suffix {width:20%; margin-left:1%;}
}
.field_sublabel_above span label {padding-bottom:0;}
/* Calendar */
.ui-datepicker .ui-icon {position:relative;}
a.ui-datepicker-prev, a.ui-datepicker-next {
float: left;
width: 1em;
height: 1em;
margin-top: .45em;
}
a.ui-datepicker-next {
float: right;
}
#ui-datepicker-div {
background: white;
padding: .5em;
box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
}
table.ui-datepicker-calendar th, table.ui-datepicker-calendar td {
padding: .25em;
}
a.ui-datepicker-next.ui-corner-all {
float: right;
}
.ui-datepicker-title {
text-align: center;
}
.ui-datepicker-title select {
padding: .5em 1em;
margin: 0 .15em;
}
td.ui-datepicker-week-end {
background: #efefef;
}
table.ui-datepicker-calendar td {
padding: .25em;
text-align: center;
}
select[multiple] + .chosen-container li.result-selected {padding-left:.75em; background:black; color:white;}
td.ui-datepicker-current-day a.ui-state-active {
display: block;
border-radius: 50%;
width: 1.5em;
}
input.datepicker_with_icon + img {
width: 1.5em;
position: relative;
left: .5em;
top: .25em;
}
/* Time */
.ginput_container_time {
float: left;
}
.ginput_container_time i {font-style:normal; display:inline-block; padding:0 .25em 0 0;}
.gfield_time_ampm {
margin-left: 1%;
}
/* Address */
span.address_city, span.address_state, span.address_zip {
float: left;
width: 32%;
margin-right: 1%;
}
span.address_city {width:34%;}
span.address_zip {margin-right:0;}
.address_state select {width:100%;}
@media (max-width:767px) {
span.address_city {width:100%; float:none;}
span.address_city input {width:80%;}
span.address_state, span.address_zip {width:49%;}
}
/* Email Address */
.ginput_container_email > span {float:left; width:49.5%; margin-right:.5%;}
.ginput_container_email span.ginput_right {margin-left:.5%; margin-right:0;}
/* File Upload */
.ginput_container_fileupload {
background: #efefef;
padding: .75em;
border-radius: 0;
}
.ginput_container_fileupload .screen-reader-text {
display:inline;
}
.ginput_container_fileupload > div:first-of-type {
text-align: center;
padding: 2em 0;
border: 3px dashed #ddd;
}
span.gform_drop_instructions {
display: block;
margin: 0 0 1em 0;
}
.ginput_container_fileupload > div + span.screen-reader-text {
display: block;
text-align: center;
margin: 1em 0 0 0;
}
.ginput_container_fileupload span.screen-reader-text + div li {
padding: .25em 0 0 0;
}
@media (max-width:767px) {
.ginput_container_fileupload .screen-reader-text {
display: block;
font-size: .7em;
padding: 1em .75em;
}
span.gform_drop_instructions {display:none;}
}
/* List */
td.gfield_list_icons img {
position: relative;
top: 1em;
opacity:1 !important;
}
.field_description_above .gfield_description + .ginput_container_list {
margin-top: -1.5em;
}
/* Product Fields */
.ginput_container_singleproduct .ginput_product_price_label {
padding-left: 1em;
}
span.ginput_quantity_label {
margin-left: 1em;
}
.instruction {
padding: .5em .35em;
}
.ginput_shipping_price {
padding: 1em;
display: block;
}
.ginput_container_total {
display: block;
margin-left: .35em;
}
/* Error & Validation Messages */
.validation_error, .gform_validation_error li.gfield_error {
background: $color-orange-base; /* Maroon */
color: white;
padding: 0 1em 1em 1em;
margin: 1em 0;
border-radius: 0;
}
.validation_error {padding-top:1em;}
.gfield_description.validation_message {
position: absolute;
color: #fff;
font-weight: 400;
font-size: 16px;
top: -32px;
left: 1em;
background: $color-orange-base;
border-radius: 0;
padding: .25em .5em;
}
.gfield_description.validation_message:before {content:""; width:0; height:0; position:absolute;
border-left:5px solid transparent; border-right:5px solid transparent; bottom:-5px; left:1em;
border-top:5px solid $color-orange-base;}
li.gfield_error {
position: relative;
margin-top: 3em;
}
.gfield_error .ginput_container_select:after {display:none;}
.gfield_error .warningTextareaInfo {color:white;}
.gfield_error .ginput_container_fileupload {
color: black;
}
.gfield_error img.add_list_item {
background-color: white;
border-radius: 50%;
}
/* From Heading */
.gform_heading .gform_description {
padding: 1em 0;
display: block;
}
/* Progress Bars & Paging */
.gf_progressbar {
position: relative;
border-top: 5px solid #efefef;
}
.gf_progressbar_percentage {
color: white;
border-top: 5px solid #4480c3;
position: relative;
top: -5px;
text-align:right;
}
.gf_progressbar_percentage span {
background: black;
display: inline-block;
width: 2.5em;
height: 2.5em;
line-height: 2.75;
border-radius: 0;
border-top-right-radius:0;
font-size: .9em;
margin-top: .25em;
position:relative;
text-align:center;
}
.gf_progressbar_percentage.percentbar_0 span {border-top-right-radius:3px; border-top-left-radius:0;}
.gf_progressbar_percentage span:after {content:""; width:0; height:0; position:absolute;
border-left:5px solid transparent; border-right:0 solid transparent; top:-5px; right:0;
border-bottom:5px solid black;}
.gf_progressbar_percentage.percentbar_0 span:after {
right: auto;
left:0;
border-right:5px solid transparent;
border-left:0;
}
.gf_progressbar_percentage.percentbar_red {border-color:#bf0421;}
.gf_progressbar_percentage.percentbar_green {border-color:green;}
.gf_progressbar_percentage.percentbar_gray {border-color:#666;}
.gf_progressbar_percentage.percentbar_orange {border-color:#e8641b;}
.gf_progressbar_percentage.percentbar_custom {border-color:transparent;}
.gf_progressbar_wrapper + .gform_body .gform_page_footer {
padding-top: 2em;
}
.gform_next_button {
float: right;
}
div.gform_confirmation_message {
background: green;
color: white;
padding: 1em;
margin: 1em 0;
border-radius: 0;
}
body img.gform_ajax_spinner {display:block; margin:1em auto;}
.gf_page_steps {
display: table;
width: 100%;
}
.gf_page_steps > div {
padding: .25em;
display: table-cell;
color: white;
background: black;
vertical-align: top;
font-weight: bold;
}
.gf_page_steps > div.gf_step_pending {background:#efefef; color:#666;}
.gf_step_clear {display:none !important;}
span.gf_step_number {
background: white;
color: black;
display: inline-block;
width: 2em;
text-align: center;
border-radius:50%;
line-height:2;
}
@media (max-width:767px) {
.gf_step {text-align: center;}
.gf_step span {
clear: both;
display: block;
margin: 0 auto;
}
span.gf_step_number {
margin-top: .5em;
}
span.gf_step_label {
margin-top: -1em;
}
}
.hidden_label {
label {
display: none;
}
}
.text-area-short textarea{
height: 100px !important;
min-height: 100px !important;
}
}