.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, .formulate-input .formulate-file-upload-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 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[data-has-files] { padding: 0; } .formulate-input[data-classification="file"] .formulate-input-upload-area[data-has-files] input { display: none; } .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,'); mask-repeat: no-repeat; mask-position: center; 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 .formulate-file-progress { background-color: #cecece; height: .3em; border-radius: 1.25em; width: 5em; overflow: hidden; position: absolute; right: .75em; transition: height .25s, width .25s; z-index: 2; } .formulate-input[data-classification="file"] .formulate-files .formulate-file-progress::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; opacity: 0; transform: scale(0.08); background-color: #ffffff; mask-image: url('data:image/svg+xml;utf8,'); mask-size: 77%; mask-repeat: no-repeat; mask-position: center; z-index: 3; } .formulate-input[data-classification="file"] .formulate-files .formulate-file-progress[data-just-finished] { width: 1.25em; height: 1.25em; } .formulate-input[data-classification="file"] .formulate-files .formulate-file-progress[data-just-finished]::before { transition: transform .25s .2s, opacity .25s .2s; transform: scale(1); opacity: 1; } .formulate-input[data-classification="file"] .formulate-files .formulate-file-progress[data-is-finished] { transition: height .25s, width .25s, left .25s, top, .25s, border-radius .25s; width: .3em; height: 100%; right: 0; border-radius: 0; } .formulate-input[data-classification="file"] .formulate-files .formulate-file-progress[data-is-finished]::before { transition: opacity .1s; opacity: 0; } .formulate-input[data-classification="file"] .formulate-files .formulate-file-progress .formulate-file-progress-inner { background-color: #41b883; width: 1%; position: absolute; left: 0; bottom: 0; top: 0; z-index: 2; } .formulate-input[data-classification="file"] .formulate-files .formualte-file-name { padding-left: 1.5em; padding-right: 2em; } .formulate-input[data-classification="file"] .formulate-files .formualte-file-name::before { position: absolute; left: .7em; top: 50%; margin-top: -.7em; background-color: #a8a8a8; content: ''; mask-image: url('data:image/svg+xml;utf8,'); mask-repeat: no-repeat; mask-size: contain; width: 1.25em; height: 1.25em; display: inline-block; margin-right: .5em; } .formulate-input[data-classification="file"] .formulate-files .formulate-file-remove { width: 1.25em; height: 1.25em; border-radius: 1em; border: 1px solid #a8a8a8; background-color: #a8a8a8; mask-image: url('data:image/svg+xml;utf8,'); mask-size: .6em; mask-repeat: no-repeat; mask-position: center; cursor: pointer; position: absolute; right: .75em; z-index: 1; transition: transform .25s; } @media (pointer: fine) { .formulate-input[data-classification="file"] .formulate-files .formulate-file-remove:hover { transform: scale(1.5); } } .formulate-input[data-classification="file"] .formulate-files li { display: block; } .formulate-input[data-classification="file"] .formulate-files li[data-has-error] .formulate-file-progress { background-color: #dc2c2c; } .formulate-input[data-classification="file"] .formulate-files li + li { margin-top: .5em; } .formulate-input[data-classification="file"] .formulate-files .formulate-file { 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; align-items: center; position: relative; overflow: hidden; } .formulate-input[data-classification="file"] .formulate-files .formulate-file::placeholder { color: #a8a8a8; } .formulate-input[data-classification="file"] .formulate-files .formulate-file:focus { outline: 0; border: 1px solid #41b883; } .formulate-input[data-classification="file"] .formulate-files .formulate-file ::-webkit-progress-bar { appearance: none; height: .5em; border-radius: .5em; overflow: hidden; } .formulate-input[data-classification="file"] [data-type="image"] .formulate-input-upload-area .formulate-input-upload-area-mask::before { mask-image: url('data:image/svg+xml;utf8,'); }