Last active
April 18, 2020 02:05
-
-
Save Tommy-b/afcb54be2966a2b58a320331adaa3d46 to your computer and use it in GitHub Desktop.
Starter file for gravity forms style sheet
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .gform_wrapper { | |
| // UL that wraps the fields | |
| ul.gform_fields { | |
| // LI that wraps input | |
| li.gfield { | |
| // Inout label | |
| label.gfield_label { | |
| // Required input indicator | |
| .gfield_required { | |
| } | |
| } | |
| // DIV that wraps around input field | |
| .ginput_container { | |
| } | |
| // Text field | |
| input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) { | |
| } | |
| textarea { | |
| } | |
| } | |
| // Target only top label inputs | |
| &.top_label { | |
| } | |
| } | |
| // Footer for submit btn etc. | |
| .gform_footer { | |
| // Submit button | |
| input[type=submit] { | |
| } | |
| .gform_ajax_spinner { | |
| margin-left: 20px; | |
| border: 4px solid rgba(255, 255, 255, 0.3); | |
| border-left: 4px solid rgba(148, 214, 223, 0.7); | |
| -webkit-animation: spinner 1.1s infinite linear; | |
| animation: spinner 1.1s infinite linear; | |
| border-radius: 50%; | |
| width: 30px; | |
| height: 30px; | |
| } | |
| @-webkit-keyframes spinner { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @keyframes spinner { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| } | |
| // Form wrap after error is thrown | |
| &.gform_validation_error { | |
| // DIV that holds the error message | |
| div.validation_error { | |
| } | |
| .gform_body { | |
| ul { | |
| // Error wrapped input | |
| li.gfield.gfield_error { | |
| // Error label | |
| .gfield_label { | |
| } | |
| // LI that contains a required field | |
| &.gfield_contains_required { | |
| div.ginput_container { | |
| } | |
| // DIV for "this field is required" text | |
| div.gfield_description { | |
| } | |
| } | |
| // Error input and textarea | |
| input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), .gform_wrapper li.gfield_error textarea { | |
| } | |
| } | |
| // Error class for input that isnt two on one line | |
| li.gfield.gfield_error:not(.gf_left_half):not(.gf_right_half) { | |
| } | |
| } | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment