Skip to content

Instantly share code, notes, and snippets.

@hgrimelid
Forked from DevinWalker/gravity-forms_bootstrap
Last active December 16, 2015 10:05
Show Gist options
  • Save hgrimelid/103a9f1e3ebf93584f22 to your computer and use it in GitHub Desktop.
Save hgrimelid/103a9f1e3ebf93584f22 to your computer and use it in GitHub Desktop.
Gravity Forms Twitter Bootstrap CSS Styles Turn OFF Gravity Forms CSS.
/* ------------------------------------
Gravity Forms
---------------------------------------*/
.gform_wrapper ul {
padding-left: 0;
list-style: none
}
.gform_wrapper li {
margin-bottom: 15px
}
.gform_wrapper form {
margin-bottom: 0
}
.gform_wrapper .gfield_required {
padding-left: 1px;
color: #b94a48
}
.ginput_container input, .ginput_container select, .ginput_container textarea {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555;
vertical-align: middle;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
}
.ginput_container input[type="radio"] {
height: auto;
}
.ginput_container input:-moz-placeholder, .ginput_container select:-moz-placeholder, .ginput_container textarea:-moz-placeholder {
color: #999
}
.ginput_container input::-moz-placeholder, .ginput_container select::-moz-placeholder, .ginput_container textarea::-moz-placeholder {
color: #999
}
.ginput_container input:-ms-input-placeholder, .ginput_container select:-ms-input-placeholder, .ginput_container textarea:-ms-input-placeholder {
color: #999
}
.ginput_container input::-webkit-input-placeholder, .ginput_container select::-webkit-input-placeholder, .ginput_container textarea::-webkit-input-placeholder {
color: #999
}
.ginput_container input:focus, .ginput_container select:focus, .ginput_container textarea:focus {
border-color: #66afe9;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(102,175,233,0.6)
}
.ginput_container input[disabled], .ginput_container select[disabled], .ginput_container textarea[disabled], .ginput_container input[readonly], .ginput_container select[readonly], .ginput_container textarea[readonly], fieldset[disabled] .ginput_container input, fieldset[disabled] .ginput_container select, fieldset[disabled] .ginput_container textarea {
cursor: not-allowed;
background-color: #eee
}
textarea.ginput_container input, textarea.ginput_container select, textarea.ginput_container textarea {
height: auto
}
.ginput_container textarea {
height: auto
}
.gform_button {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.428571429;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-color: #428bca;
border: 1px solid transparent;
border-color: #357ebd;
border-radius: 4px;
user-select: none
}
.gform_button:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px
}
.gform_button:hover, .gform_button:focus {
color: #333;
text-decoration: none
}
.gform_button:active, .gform_button.active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
box-shadow: inset 0 3px 5px rgba(0,0,0,0.125)
}
.gform_button.disabled, .gform_button[disabled], fieldset[disabled] .gform_button {
pointer-events: none;
cursor: not-allowed;
opacity: .65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none
}
.gform_button:hover, .gform_button:focus, .gform_button:active, .gform_button.active, .open .dropdown-toggle.gform_button {
color: #fff;
background-color: #3276b1;
border-color: #285e8e
}
.gform_button:active, .gform_button.active, .open .dropdown-toggle.gform_button {
background-image: none
}
.gform_button.disabled, .gform_button[disabled], fieldset[disabled] .gform_button, .gform_button.disabled:hover, .gform_button[disabled]:hover, fieldset[disabled] .gform_button:hover, .gform_button.disabled:focus, .gform_button[disabled]:focus, fieldset[disabled] .gform_button:focus, .gform_button.disabled:active, .gform_button[disabled]:active, fieldset[disabled] .gform_button:active, .gform_button.disabled.active, .gform_button[disabled].active, fieldset[disabled] .gform_button.active {
background-color: #428bca;
border-color: #357ebd
}
.gform_wrapper .gfield_error .gfield_label {
color: #b94a48
}
.gform_wrapper .gfield_error input, .gform_wrapper .gfield_error select, .gform_wrapper .gfield_error textarea {
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7
}
.gform_wrapper .gfield_error input:focus, .gform_wrapper .gfield_error select:focus, .gform_wrapper .gfield_error textarea:focus {
border-color: #b94a48;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(185,74,72,0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(185,74,72,0.6)
}
.validation_error {
padding: 15px;
margin-bottom: 20px;
color: #b94a48;
background-color: #f2dede;
border: 1px solid transparent;
border-color: #eed3d7;
border-radius: 4px
}
.validation_error h4 {
margin-top: 0;
color: inherit
}
.validation_error .alert-link {
font-weight: bold
}
.validation_error>p, .validation_error>ul {
margin-bottom: 0
}
.validation_error>p+p {
margin-top: 5px
}
.validation_error hr {
border-top-color: #e6c1c7
}
.validation_error .alert-link {
color: #953b39
}
#gforms_confirmation_message {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px
}
#gforms_confirmation_message h4 {
margin-top: 0;
color: inherit
}
#gforms_confirmation_message .alert-link {
font-weight: bold
}
#gforms_confirmation_message>p, #gforms_confirmation_message>ul {
margin-bottom: 0
}
#gforms_confirmation_message>p+p {
margin-top: 5px
}
@hgrimelid
Copy link
Author

Removed some vendor prefixes (handled by Autoprefixer), added height: auto for type=radio and beautified.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment