• Skip to primary navigation
  • Skip to main content
Daniel McClure

Daniel McClure

Entrepreneurship, Marketing, Technology, Travel & Lifestyle

  • About
  • Credentials
  • The Blog of Daniel McClure
  • Social
  • Code
  • Contact
  • GitHub
  • Instagram
  • LinkedIn
  • Twitter

Gravity Forms SCSS Reset

You are here: Home » Code Snippets » Gravity Forms SCSS Reset

Last Updated: June 12, 2019 Leave a Comment


/* # Gravity Forms
——————————————— */
.gform_heading,
.gform_body,
.gform_footer {
clear: both;
}
.gform_heading {
padding-bottom: 1em;
}
.gform_wrapper {
.gform_fields {
list-style: none;
margin: 0 -1rem;
padding: 0;
li {
list-style-type: none;
}
}
.gfield_checkbox,
.gfield_radio {
list-style: none;
padding: 0;
}
}
.ginput_container {
span {
margin-bottom: 1rem;
}
input,
select,
textarea {
width: 100%;
}
input,
textarea {
margin: 0;
}
}
.gfield_label {
display: inline-block;
padding-bottom: 1rem;
&:empty {
display: none;
}
.left_label & {
float: left;
}
.right_label & {
float: right;
}
}
.gfield_required {
padding-left: 0.1em;
}
.gfield_checkbox,
.gfield_radio {
li {
width: 100%;
}
input {
width: auto;
float: left;
margin-right: 1rem;
}
label {
float: left;
line-height: 1;
}
}
.gsection {
margin: 1rem 0;
h2 {
border-bottom: $site-border;
padding-bottom: 1rem;
}
}
.validation_error,
.gf_progressbar_wrapper {
padding-bottom: 1em;
}
.gf_progressbar {
background: $light;
}
.gf_progressbar_percentage {
background: $dark;
padding: 0.5rem 1rem;
text-align: right;
}
.gfield_time_hour,
.gfield_time_minute,
.gfield_time_ampm {
display: inline-block;
}
.gfield_time_hour,
.gfield_time_minute {
label {
display: block;
}
}
.gfield_time_ampm {
vertical-align: top;
}
.gfield {
width: 100%;
list-style-type: none;
clear: both;
overflow: auto;
padding: 0 1rem 1.5rem;
margin: 0;
.validation_message {
margin-top: 1rem;
}
li {
list-style-type: none;
}
}
.gform_validation_container {
display: none;
}
.gform_footer {
.gform_button {
width: auto;
}
}
.ginput_full,
.ginput_left,
.ginput_right {
input,
select,
textarea {
margin-bottom: 0.5rem;
width: 100%;
}
label {
display: block;
}
}
.ginput_full {
display: block;
}
.ginput_left {
float: left;
padding-right: 1rem;
}
.ginput_right {
float: right;
}
.gf_left_half,
.gf_left_third,
.gf_middle_third,
.gf_first_quarter,
.gf_second_quarter {
clear: none;
float: left;
padding-right: 1rem;
padding-bottom: 1rem;
}
.gf_right_half,
.gf_right_third,
.gf_fourth_quarter {
clear: none;
float: right;
padding-bottom: 1rem;
}
.gf_third_quarter {
clear: none;
float: left;
padding-bottom: 1rem;
}
li {
.gf_list_2col &,
.gf_list_3col &,
.gf_list_4col &,
.gf_list_5col & {
float: left;
padding-bottom: 1rem;
}
.gf_list_inline & {
display: inline-block;
padding-right: 1rem;
padding-bottom: 1rem;
}
}
@include breakpoint(xs) {
.ginput_container {
input,
select,
textarea {
&.large {
width: 100%;
}
&.medium {
width: 66%;
}
&.small {
width: 33%;
}
}
}
.ginput_left,
.ginput_right {
width: 50%;
}
label.gfield_label {
.left_label &,
.right_label & {
width: 25%;
}
}
li {
&.gf_left_half,
&.gf_right_half,
.gf_list_2col & {
width: 50%;
}
&.gf_left_third,
&.gf_right_third,
.gf_list_3col & {
width: 33%;
}
&.gf_middle_third {
width: 34%;
}
&.gf_first_quarter,
&.gf_second_quarter,
&.gf_third_quarter,
&.gf_fourth_quarter,
.gf_list_4col & {
width: 25%;
}
.gf_list_5col & {
width: 20%;
}
}
}

view raw

style.scss

hosted with ❤ by GitHub

Filed Under: Uncategorised

Reader Interactions

Leave a Reply

Your email address will not be published. Required fields are marked *

You can encrypt your comment so that only Daniel McClure can read it.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Daniel McClure

Work With Me

Get in touch if you’re interested in working together on your next project.

Contact Me

Creative Commons Licence

Copyright © 2023 Daniel McClure

All opinions shared through this site are that of their respective author and are not necessarily representative of the views of past/present clients, affiliate partners or businesses.
Some links include affiliate tracking for which I may earn a commission. See the Full Disclaimer Page for more information.