.formulate-input { margin-bottom: 2em; } .formulate-input .formulate-input-label { display: block; line-height: 1.5; font-size: .9em; font-weight: 600; margin-bottom: .1em; } .formulate-input .formulate-input-element { max-width: 20em; margin-bottom: .1em; } .formulate-input .formulate-input-help { color: #6d6d6d; font-size: .7em; font-weight: 400; line-height: 1.5; margin-bottom: .25em; } .formulate-input .formulate-input-errors { list-style-type: none; padding: 0; margin: 0; } .formulate-input .formulate-input-error { color: #960505; font-size: .8em; font-weight: 300; line-height: 1.5; margin-bottom: .25em; } .formulate-input .formulate-input-group-item { margin-bottom: .5em; } .formulate-input:last-child { margin-bottom: 0; } .formulate-input[data-classification='text'] input { appearance: none; border-radius: .3em; border: 1px solid #cecece; box-sizing: border-box; background-color: transparent; font-size: .9em; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; padding: .75em; display: block; width: 100%; font-weight: 400; line-height: 1.1em; margin: 0; } .formulate-input[data-classification='text'] input::placeholder { color: #a8a8a8; } .formulate-input[data-classification='text'] input:focus { outline: 0; border: 1px solid #41b883; } .formulate-input[data-classification='text'] input[type="color"] { height: 1.1em; box-sizing: content-box; } .formulate-input[data-classification='text'] input[type="color"]::-webkit-color-swatch-wrapper { padding: 0 0 0 1.5em; display: flex; align-items: center; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-size: .9em .9em; background-position: left .1em; } .formulate-input[data-classification='text'] input[type="color"]::-webkit-color-swatch { display: block; height: 1em; border-radius: .2em; border: 0; flex: auto; } .formulate-input[data-classification='text'] input[type="color"]::-moz-color-swatch { display: block; height: 1em; border-radius: .2em; border: 0; flex: auto; } .formulate-input[data-classification='slider'] input { appearance: none; width: 100%; font-size: 1em; padding: .5em 0; } .formulate-input[data-classification='slider'] input:focus { outline: 0; } .formulate-input[data-classification='slider'] input::-webkit-slider-thumb { cursor: pointer; appearance: none; width: 1em; height: 1em; border-radius: 1em; background-color: #41b883; margin-top: calc(-.5em + 2px); } .formulate-input[data-classification='slider'] input::-moz-range-thumb { cursor: pointer; appearance: none; width: 1em; height: 1em; border-radius: 1em; background-color: #41b883; margin-top: calc(-.5em + 2px); } .formulate-input[data-classification='slider'] input::-ms-thumb { cursor: pointer; appearance: none; width: 1em; height: 1em; border-radius: 1em; background-color: #41b883; margin-top: calc(-.5em + 2px); } .formulate-input[data-classification='slider'] input::-webkit-slider-runnable-track { appearance: none; width: 100%; height: 4px; background-color: #efefef; border-radius: 3px; margin: 0; padding: 0; } .formulate-input[data-classification='textarea'] textarea { appearance: none; border-radius: .3em; border: 1px solid #cecece; box-sizing: border-box; background-color: transparent; font-size: .9em; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; padding: .75em; display: block; width: 100%; font-weight: 400; line-height: 1.1em; margin: 0; } .formulate-input[data-classification='textarea'] textarea::placeholder { color: #a8a8a8; } .formulate-input[data-classification='textarea'] textarea:focus { outline: 0; border: 1px solid #41b883; } .formulate-input[data-classification='select'] .formulate-input-element { position: relative; } .formulate-input[data-classification='select'] .formulate-input-element::before { content: ''; width: 0; height: 0; border: .3em solid transparent; border-top-color: #cecece; border-bottom-width: 0; top: 50%; margin-top: -.1em; right: 1em; position: absolute; } .formulate-input[data-classification='select'] select { appearance: none; border-radius: .3em; border: 1px solid #cecece; box-sizing: border-box; background-color: transparent; font-size: .9em; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; padding: .75em; display: block; width: 100%; font-weight: 400; line-height: 1.1em; margin: 0; padding-right: 2em; } .formulate-input[data-classification='select'] select::placeholder { color: #a8a8a8; } .formulate-input[data-classification='select'] select:focus { outline: 0; border: 1px solid #41b883; } .formulate-input[data-classification='select'] select[data-placeholder-selected] { color: #a8a8a8; } .formulate-input[data-classification='box'] .formulate-input-wrapper { display: flex; align-items: center; } .formulate-input[data-classification='box'] .formulate-input-element { overflow: hidden; display: flex; align-items: center; } .formulate-input[data-classification='box'] .formulate-input-element input { position: absolute; left: -999px; } .formulate-input[data-classification='box'] .formulate-input-element-decorator { display: block; width: 1em; height: 1em; border-radius: .25em; border: 1px solid #cecece; position: relative; } .formulate-input[data-classification='box'] .formulate-input-element-decorator::before { content: ''; display: block; background-size: contain; background-position: right; width: calc(100% - .125em); height: calc(100% - .125em); box-sizing: border-box; position: absolute; top: .0625em; left: .0625em; } .formulate-input[data-classification='box'] .formulate-input-element[data-type="radio"] .formulate-input-element-decorator { border-radius: 1em; } .formulate-input[data-classification='box'] .formulate-input-element[data-type="radio"] .formulate-input-element-decorator::before { border-radius: 1em; width: calc(100% - .5em); height: calc(100% - .5em); top: .25em; left: .25em; } .formulate-input[data-classification='box'] .formulate-input-element input[type="checkbox"]:checked ~ .formulate-input-element-decorator { border-color: #41b883; } .formulate-input[data-classification='box'] .formulate-input-element input[type="checkbox"]:checked ~ .formulate-input-element-decorator::before { background-color: #41b883; mask-image: url('data:image/svg+xml;utf8,'); } .formulate-input[data-classification='box'] .formulate-input-element input[type="radio"]:checked ~ .formulate-input-element-decorator { border-color: #41b883; } .formulate-input[data-classification='box'] .formulate-input-element input[type="radio"]:checked ~ .formulate-input-element-decorator::before { background-color: #41b883; } .formulate-input[data-classification='box'] .formulate-input-element input:focus ~ .formulate-input-element-decorator { border-color: #41b883; } .formulate-input[data-classification='box'] .formulate-input-label--after { margin-left: .5em; } .formulate-input[data-classification='box'] .formulate-input-label--before { margin-right: .5em; } .formulate-input[data-classification="group"] > .formulate-input-wrapper > .formulate-input-label { margin-bottom: .5em; } .formulate-input[data-classification="file"] .formulate-input-upload-area { width: 100%; position: relative; padding: 2em; } .formulate-input[data-classification="file"] .formulate-input-upload-area[data-has-files] { padding: 0; } .formulate-input[data-classification="file"] .formulate-input-upload-area input { cursor: pointer; appearance: none; opacity: 0; position: absolute; left: 0; right: 0; bottom: 0; top: 0; width: 100%; height: 100%; z-index: 5; } .formulate-input[data-classification="file"] .formulate-input-upload-area-mask { border-radius: .4em; position: absolute; pointer-events: none; position: absolute; display: flex; justify-content: center; align-items: center; left: 0; right: 0; top: 0; bottom: 0; border: 2px dashed #a8a8a8; z-index: 2; } .formulate-input[data-classification="file"] .formulate-input-upload-area-mask::before { content: ''; background-color: #a8a8a8; mask-image: url('data:image/svg+xml;utf8,'); width: 2em; height: 2em; position: absolute; pointer-events: none; } .formulate-input[data-classification="file"] .formulate-input-upload-area input:focus ~ .formulate-input-upload-area-mask, .formulate-input[data-classification="file"] .formulate-input-upload-area input:hover ~ .formulate-input-upload-area-mask, .formulate-input[data-classification="file"] .formulate-input-upload-area input[data-is-drag-hover] ~ .formulate-input-upload-area-mask { border-color: #41b883; } .formulate-input[data-classification="file"] .formulate-input-upload-area input:focus ~ .formulate-input-upload-area-mask::before, .formulate-input[data-classification="file"] .formulate-input-upload-area input:hover ~ .formulate-input-upload-area-mask::before, .formulate-input[data-classification="file"] .formulate-input-upload-area input[data-is-drag-hover] ~ .formulate-input-upload-area-mask::before { background-color: #41b883; } .formulate-input[data-classification="file"] .formulate-files { list-style-type: none; margin: 0; padding: 0; } .formulate-input[data-classification="file"] .formulate-files li { appearance: none; border-radius: .3em; border: 1px solid #cecece; box-sizing: border-box; background-color: transparent; font-size: .9em; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; padding: .75em; display: block; width: 100%; font-weight: 400; line-height: 1.1em; margin: 0; display: block; width: 100%; display: flex; justify-content: space-between; } .formulate-input[data-classification="file"] .formulate-files li::placeholder { color: #a8a8a8; } .formulate-input[data-classification="file"] .formulate-files li:focus { outline: 0; border: 1px solid #41b883; } .formulate-input[data-classification="file"] .formulate-files li ::-webkit-progress-bar { appearance: none; height: .5em; border-radius: .5em; overflow: hidden; }