Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save cfxd/466a993e5c11c935204a to your computer and use it in GitHub Desktop.
Save cfxd/466a993e5c11c935204a to your computer and use it in GitHub Desktop.
Make a Gravity Form with one label, one field, and one button into a Bootstrap input group with addons. Should be used in conjunction with https://gist.github.com/CFXd/53076583ef1fbaaf959e. Second version removes &:extend() to enable use of media queries.
form {
@media (min-width: @screen-md-min) {
.input-group;
.gform_body > ul {
.list-unstyled;
margin: 0;
> li:first-child:last-child {
.input-group;
width: 100%;
> label {
.input-group-addon;
border-right: 0;
.border-right-radius(0);
}
input {
border-radius: 0;
}
}
}
.gform_footer {
.input-group-addon;
padding: 0;
border: 0;
[type=submit] {
border-left: 0;
.border-left-radius(0);
}
}
.validation_error {
display: table-caption;
}
.gfield_description.validation_message {
.hidden;
}
}
}
form {
&:extend(.input-group all);
.gform_body > ul {
&:extend(.list-unstyled);
margin: 0;
> li:first-child:last-child {
&:extend(.input-group all);
width: 100%;
> label {
&:extend(.input-group-addon all);
}
input {
border-radius: 0;
}
}
}
.gform_footer {
&:extend(.input-group-addon all);
padding: 0;
border: 0;
[type=submit] {
border-left: 0;
.border-left-radius(0);
}
}
.validation_error {
display: table-caption;
}
.gfield_description.validation_message, .gform_ajax_spinner {
&:extend(.hidden);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment