Last active
December 27, 2019 02:46
-
-
Save jetsloth/20b44a0d53f597025704a62f0f79a3d6 to your computer and use it in GitHub Desktop.
Image Choices Demo Styles via Dedicated CSS Classes
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
| /* POLAROID STYLE */ | |
| .image-choices-field.ic-polaroid { | |
| max-width: 100%; | |
| margin-right: -3%; | |
| } | |
| .image-choices-field.ic-polaroid .image-choices-choice, | |
| .gform_wrapper .gfield.image-choices-field.ic-polaroid li.image-choices-choice { | |
| display: inline-block; | |
| position: relative; | |
| padding: 13px !important; | |
| overflow: visible; | |
| margin-bottom: 80px !important; | |
| border-color: #d8e3ec; | |
| transition: all 0.3s; | |
| border-radius: 3px; | |
| width: 30%; | |
| margin-right: 3% !important; | |
| } | |
| .image-choices-field.ic-polaroid .image-choices-choice, | |
| .image-choices-field.ic-polaroid .image-choices-choice.image-choices-choice-hover { | |
| background-color: #f6fbfd; | |
| } | |
| .image-choices-field.ic-polaroid .image-choices-choice:after { | |
| content: "\2714" !important; | |
| width: 40px; | |
| height: 40px; | |
| overflow: hidden; | |
| border-radius: 50%; | |
| pointer-events: none; | |
| opacity: 0; | |
| transition: all .3s; | |
| text-align: center; | |
| line-height: 40px; | |
| color: #fff; | |
| display: block; | |
| position: absolute; | |
| left: 50%; | |
| top: 60%; | |
| margin: -20px 0 0 -20px; | |
| background-color: #00a7f7; | |
| } | |
| .image-choices-field.ic-polaroid .image-choices-choice.image-choices-choice-other:after { | |
| top: 70%; | |
| } | |
| .image-choices-field.ic-polaroid .gfield_label { | |
| font-size: 1.6em; | |
| margin-bottom: 1.6em; | |
| display: block; | |
| } | |
| .image-choices-field.ic-polaroid .image-choices-choice label, | |
| .gform_wrapper .gfield.image-choices-field.ic-polaroid li.image-choices-choice label { | |
| padding: 0 !important; | |
| display: block; | |
| } | |
| .image-choices-field.ic-polaroid .image-choices-choice.image-choices-choice-focus label { | |
| border-color: #00a7f7; | |
| } | |
| .image-choices-field.ic-polaroid .gfield_radio .image-choices-choice.image-choices-choice-focus.image-choices-choice-selected label { | |
| border-color: transparent; | |
| } | |
| .image-choices-field.ic-polaroid .image-choices-choice-image-wrap { | |
| background-size: cover; | |
| width: 100%; | |
| height: auto; | |
| padding-bottom: 100%; | |
| } | |
| .image-choices-field.image-choices-show-labels.ic-polaroid .image-choices-choice-text { | |
| padding: 7px 13px; | |
| margin: 0; | |
| position: absolute; | |
| width: 100%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| border-radius: 20px; | |
| bottom: -50px; | |
| transition: all 0.3s; | |
| } | |
| .image-choices-field.image-choices-show-labels.ic-polaroid .image-choices-choice-text, | |
| .image-choices-field.image-choices-show-labels.ic-polaroid .image-choices-choice-price { | |
| font-size: inherit; | |
| } | |
| .image-choices-field.ic-polaroid .image-choices-choice.image-choices-choice-selected, | |
| .image-choices-field.ic-polaroid .image-choices-choice.image-choices-choice-selected.image-choices-choice-hover { | |
| box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2); | |
| border-color: #00a7f7; | |
| background-color: #fff; | |
| } | |
| .image-choices-field.ic-polaroid .image-choices-choice.image-choices-choice-selected:after { | |
| color: #fff; | |
| opacity: 1; | |
| top: 50%; | |
| } | |
| .image-choices-field.ic-polaroid .image-choices-choice.image-choices-choice-other.image-choices-choice-selected:after { | |
| top: 60%; | |
| } | |
| .image-choices-field.ic-polaroid .image-choices-choice.image-choices-choice-selected .image-choices-choice-text { | |
| background-color: #00a7f7; | |
| color: #fff; | |
| } | |
| @media only screen and (max-width: 736px) { | |
| .image-choices-field.ic-polaroid .image-choices-choice, | |
| .gform_wrapper .gfield.image-choices-field.ic-polaroid li.image-choices-choice { | |
| width: 48%; | |
| margin-right: 2% !important; | |
| } | |
| } | |
| @media only screen and (max-width: 480px) { | |
| .image-choices-field.ic-polaroid .image-choices-choice, | |
| .gform_wrapper .gfield.image-choices-field.ic-polaroid li.image-choices-choice { | |
| width: 98%; | |
| margin-right: 2% !important; | |
| } | |
| } | |
| /* CIRCLES STYLE */ | |
| .image-choices-field.ic-circles { | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| .image-choices-field.ic-circles, | |
| .gform_wrapper .gfield.image-choices-field.ic-circles { | |
| margin-right: -3%; | |
| } | |
| .image-choices-field.ic-circles .image-choices-choice, | |
| .gform_wrapper .gfield.image-choices-field.ic-circles li.image-choices-choice { | |
| position: relative; | |
| vertical-align: middle; | |
| transition: all 0.3s; | |
| width: 30%; | |
| border-radius: 50%; | |
| margin-right: 3% !important; | |
| margin-bottom: 90px !important; | |
| overflow: visible; | |
| } | |
| .image-choices-field.ic-circles .image-choices-choice:before { | |
| content: "" !important; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| margin: 0; | |
| background-color: rgba(255,255,255,0); | |
| z-index: 1; | |
| display: block; | |
| position: absolute; | |
| border-radius: 50%; | |
| pointer-events: none; | |
| transition: all 0.3s; | |
| } | |
| .image-choices-field.ic-circles .image-choices-choice:after { | |
| content: "\2714" !important; | |
| width: 40px; | |
| height: 40px; | |
| overflow: hidden; | |
| border-radius: 50%; | |
| pointer-events: none; | |
| transition: all .3s; | |
| text-align: center; | |
| line-height: 40px; | |
| display: block; | |
| position: absolute; | |
| left: 50%; | |
| margin: -20px 0 0 -20px; | |
| top: 0; | |
| color: #00a7f7; | |
| z-index: 2; | |
| opacity: 0; | |
| background-color: #fff; | |
| } | |
| .image-choices-field.ic-circles .image-choices-choice, | |
| .image-choices-field.ic-circles .image-choices-choice.image-choices-choice-hover | |
| .image-choices-field.ic-circles .image-choices-choice.image-choices-choice-selected { | |
| box-shadow: none; | |
| background-color: transparent !important; | |
| border-color: transparent !important; | |
| } | |
| .image-choices-field.ic-circles .gfield_label { | |
| font-size: 1.6em; | |
| margin-bottom: 1.6em; | |
| display: block; | |
| text-align: center; | |
| } | |
| .image-choices-field.ic-circles .image-choices-choice label, | |
| .gform_wrapper .gfield.image-choices-field.ic-circles li.image-choices-choice label { | |
| padding: 0 !important; | |
| display: block; | |
| border: none !important; | |
| } | |
| .image-choices-field.ic-circles .image-choices-choice-image-wrap { | |
| border: 2px solid #fff; | |
| width: 100%; | |
| height: auto; | |
| padding-bottom: 100%; | |
| background-color: transparent; | |
| border-radius: 50%; | |
| background-size: cover; | |
| box-shadow: 0 0 0 0 rgba(255,255,255,1), 0 0 10px 5px rgba(0,0,0,0); | |
| transition: all 0.3s; | |
| } | |
| .image-choices-field.image-choices-show-labels.ic-circles .image-choices-choice-text { | |
| font-size: inherit; | |
| position: absolute; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| bottom: -70px; | |
| z-index: 3; | |
| transition: all 0.3s; | |
| background-color: transparent; | |
| border-radius: 15px; | |
| padding: 3px 10px 4px; | |
| width: 70%; | |
| } | |
| .image-choices-field.ic-circles .image-choices-choice.image-choices-choice-selected { | |
| box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2); | |
| } | |
| .image-choices-field.ic-circles .image-choices-choice.image-choices-choice-selected:before { | |
| background-color: rgba(255,255,255, 0.4); | |
| } | |
| .image-choices-field.ic-circles .image-choices-choice.image-choices-choice-selected:after { | |
| opacity: 1; | |
| color: #00a7f7; | |
| top: 50%; | |
| } | |
| .image-choices-field.ic-circles .image-choices-choice.image-choices-choice-other.image-choices-choice-selected:after { | |
| top: 30%; | |
| } | |
| .image-choices-field.ic-circles .image-choices-choice.image-choices-choice-selected .image-choices-choice-image-wrap { | |
| box-shadow: 0 0 0 12px rgba(255,255,255,1), 0 0 40px 8px rgba(0,0,0,.25); | |
| } | |
| .image-choices-field.ic-circles .image-choices-choice.image-choices-choice-selected .image-choices-choice-text { | |
| color: #00a7f7; | |
| } | |
| .image-choices-field.ic-circles .image-choices-choice.image-choices-choice-focus .image-choices-choice-image-wrap { | |
| border-color: #00a7f7; | |
| } | |
| .image-choices-field.ic-circles .gfield_radio .image-choices-choice.image-choices-choice-focus.image-choices-choice-selected .image-choices-choice-image-wrap { | |
| border-color: #fff; | |
| } | |
| @media only screen and (max-width: 736px) { | |
| .image-choices-field.ic-circles .image-choices-choice, | |
| .gform_wrapper .gfield.image-choices-field.ic-circles li.image-choices-choice { | |
| width: 48%; | |
| margin-right: 2% !important; | |
| } | |
| } | |
| @media only screen and (max-width: 480px) { | |
| .image-choices-field.ic-circles .image-choices-choice, | |
| .gform_wrapper .gfield.image-choices-field.ic-circles li.image-choices-choice { | |
| width: 98%; | |
| margin-right: 2% !important; | |
| } | |
| } | |
| /* SHADOWBOX STYLE */ | |
| .image-choices-field.ic-shadowbox { | |
| display: block; | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| .image-choices-field.ic-shadowbox .gfield_label { | |
| font-size: 2em; | |
| margin-bottom: 1em; | |
| display: block; | |
| text-align: center; | |
| } | |
| .image-choices-field.ic-shadowbox, | |
| .gform_wrapper .gfield.image-choices-field.ic-shadowbox { | |
| margin-right: -10%; | |
| } | |
| .image-choices-field.ic-shadowbox .image-choices-choice, | |
| .gform_wrapper .gfield.image-choices-field.ic-shadowbox li.image-choices-choice { | |
| position: relative; | |
| text-align: center; | |
| padding: 20px 20px 70px !important; | |
| margin-bottom: 50px !important; | |
| vertical-align: middle; | |
| transition: all 0.3s; | |
| border-radius: 6px; | |
| border: 1px solid transparent !important; | |
| width: 40%; | |
| max-width: 280px; | |
| margin-right: 10% !important; | |
| overflow: visible; | |
| } | |
| .image-choices-field.ic-shadowbox .image-choices-choice.image-choices-choice-other input[type="text"] { | |
| top: 40%; | |
| } | |
| .image-choices-field.ic-shadowbox .image-choices-choice.image-choices-choice-focus { | |
| border-color: #ff584c !important; | |
| } | |
| .image-choices-field.ic-shadowbox .gfield_radio .image-choices-choice.image-choices-choice-focus.image-choices-choice-selected { | |
| border-color: #fff !important; | |
| } | |
| .image-choices-field.ic-shadowbox .image-choices-choice label, | |
| .gform_wrapper .gfield.image-choices-field.ic-shadowbox li.image-choices-choice label { | |
| padding: 0 !important; | |
| display: block; | |
| border: none !important; | |
| } | |
| .image-choices-field.ic-shadowbox .image-choices-choice:after { | |
| content: "\2714" !important; | |
| width: 40px; | |
| height: 40px; | |
| overflow: hidden; | |
| border-radius: 50%; | |
| pointer-events: none; | |
| opacity: 0; | |
| transition: all .3s; | |
| text-align: center; | |
| line-height: 40px; | |
| color: #fff; | |
| display: block; | |
| position: absolute; | |
| left: 50%; | |
| margin: -20px 0 0 -20px; | |
| top: auto; | |
| bottom: -40px; | |
| background-color: #ff584c; | |
| } | |
| .image-choices-field.ic-shadowbox .image-choices-choice.image-choices-choice-selected { | |
| box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2); | |
| } | |
| .image-choices-field.ic-shadowbox .image-choices-choice.image-choices-choice-selected:after { | |
| color: #fff; | |
| opacity: 1; | |
| } | |
| .image-choices-field.ic-shadowbox .image-choices-choice, | |
| .image-choices-field.ic-shadowbox .image-choices-choice.image-choices-choice-hover, | |
| .image-choices-field.ic-shadowbox .image-choices-choice.image-choices-choice-selected { | |
| border-color: transparent !important; | |
| } | |
| .image-choices-field.ic-shadowbox .image-choices-choice.image-choices-choice-hover { | |
| background-color: transparent !important; | |
| } | |
| .image-choices-field.ic-shadowbox .image-choices-choice.image-choices-choice-selected { | |
| background-color: #fff !important; | |
| box-shadow: 0 0 40px 0 rgba(0,0,0,.1); | |
| } | |
| .image-choices-field.ic-shadowbox .image-choices-choice.image-choices-choice-selected .image-choices-choice-text { | |
| color: #ff584c; | |
| } | |
| .image-choices-field.ic-shadowbox .image-choices-choice.image-choices-choice-selected:after { | |
| bottom: -20px; | |
| } | |
| .image-choices-field.ic-shadowbox .image-choices-choice-image-wrap { | |
| border: none; | |
| width: 100%; | |
| height: auto; | |
| padding-bottom: 100%; | |
| background-color: transparent; | |
| background-size: contain; | |
| } | |
| .image-choices-field.image-choices-show-labels.ic-shadowbox .image-choices-choice-text { | |
| font-size: inherit; | |
| position: absolute; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| bottom: 30px; | |
| width: 100%; | |
| transition: all 0.3s; | |
| } | |
| @media only screen and (max-width: 736px) { | |
| .image-choices-field.ic-shadowbox .image-choices-choice, | |
| .gform_wrapper .gfield.image-choices-field.ic-shadowbox li.image-choices-choice { | |
| width: 48%; | |
| margin-right: 2% !important; | |
| } | |
| } | |
| @media only screen and (max-width: 480px) { | |
| .image-choices-field.ic-shadowbox .image-choices-choice, | |
| .gform_wrapper .gfield.image-choices-field.ic-shadowbox li.image-choices-choice { | |
| width: 98%; | |
| margin-right: 2% !important; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment