Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/*///////////////////
CSS
Build a simple product visualiser with Gravity Forms Color Picker
Full article at https://jetsloth.com/labs/build-a-simple-product-visualiser-with-gravity-forms-color-picker/
////////////////////*/
/* Outter form wrapper */
.gform_body {
background:#f6f6f6;
border-radius:10px;
margin-bottom:40px;
overflow:hidden;
padding:50px 0px;
}
/* Preview Area */
.preview-area {
height: auto;
position: relative;
width: 100%;
display: block;
padding: 70px;
}
/* Preview Layer */
.preview-area img {
transform: translate(-50%);
position: relative;
left: 50%;
}
/*Color picker selects*/
li.color-picker-field {
margin: 0 auto;
padding: 0px 70px;
text-align: center;
}
li.color-options .ginput_container_radio ul {
width: 70%;
margin: 0 auto;
text-align: center;
}
.color-picker-style-circle .color-picker-swatch-color-wrap {
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.003), 0 6.7px 5.3px rgba(0, 0, 0, 0.004), 0 12.5px 10px rgba(0, 0, 0, 0.005), 0 22.3px 17.9px rgba(0, 0, 0, 0.006), 0 41.8px 33.4px rgba(0, 0, 0, 0.007), 0 100px 80px rgba(0, 0, 0, 0.01);
}
/* Gfield label */
label.gfield_label {
font-weight:bold;
font-size: 12px;
color: #717F87;
letter-spacing: 8px;
text-transform: uppercase;
text-align: center;
margin-bottom: 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment