/*/////////////////// | |
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