Skip to content

Instantly share code, notes, and snippets.

@nickkuijpers
Created February 2, 2015 17:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nickkuijpers/13cfe0118ae58666c7d7 to your computer and use it in GitHub Desktop.
Save nickkuijpers/13cfe0118ae58666c7d7 to your computer and use it in GitHub Desktop.
Gravityform CSS Bootstrap
.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: #a94442
}
.ginput_container input, .ginput_container select, .ginput_container textarea {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 0px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s ease-in-out .2s;
-moz-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s ease-in-out .2s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s ease-in-out .2s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s ease-in-out .2s
}
.ginput_container input:focus, .ginput_container select:focus, .ginput_container textarea:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6)
}
.ginput_container input::-moz-placeholder, .ginput_container select::-moz-placeholder, .ginput_container textarea::-moz-placeholder {
color: #777;
opacity: 1
}
.ginput_container input:-ms-input-placeholder, .ginput_container select:-ms-input-placeholder, .ginput_container textarea:-ms-input-placeholder {
color: #777
}
.ginput_container input::-webkit-input-placeholder, .ginput_container select::-webkit-input-placeholder, .ginput_container textarea::-webkit-input-placeholder {
color: #777
}
.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;
opacity: 1
}
textarea.ginput_container input, textarea.ginput_container select, textarea.ginput_container textarea {
height: auto
}
.ginput_container textarea {
height: auto
}
.gform_button {
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius:4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #fff;
background-color: #5E4684;
border-color: #5E4684
}
.gform_button:focus, .gform_button:active:focus, .gform_button.active:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px
}
.gform_button:hover, .gform_button:focus {
color: #fff;
text-decoration: none
}
.gform_button:active, .gform_button.active {
outline: 0;
background-image: none;
-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 {
cursor: not-allowed;
pointer-events: none;
filter: alpha(opacity=65);
filter: alpha(opacity=@opacity * 100);
-moz-opacity: .65;
-khtml-opacity: .65;
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: #5E4684;
border-color: #5E4684
}
.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: #5E4684;
border-color: #5E4684
}
.gform_button .badge {
color: #5E4684;
background-color: #fff
}
.gform_wrapper .gfield_error .gfield_label {
color: #a94442
}
.gform_wrapper .gfield_error input, .gform_wrapper .gfield_error select, .gform_wrapper .gfield_error textarea {
border-color: #ebccd1;
background-color: #f2dede;
color: #a94442
}
.gform_wrapper .gfield_error input:focus, .gform_wrapper .gfield_error select:focus, .gform_wrapper .gfield_error textarea:focus {
border-color: #a94442;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(169, 68, 66, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(169, 68, 66, 0.6)
}
.validation_error {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 0px;
background-color: #f2dede;
border-color: #ebccd1;
color: #a94442
}
.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: #e4b9c0
}
.validation_error .alert-link {
color: #843534
}
#gforms_confirmation_message {
padding: 15px;
margin-bottom: 20px;
background-color: #dff0d8;
border-color: #d6e9c6;
color: #3c763d
}
#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
}
#gforms_confirmation_message hr {
border-top-color: #c9e2b3
}
#gforms_confirmation_message .alert-link {
color: #2b542c
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment