@mptransformation/omisdk
Version:
An embeddable TypeScript SDK for integrating into websites
2 lines (1 loc) • 1.06 kB
CSS
.custom-field{position:relative}.custom-field label{position:absolute;left:0;top:8px;background:#fff;color:#abadaf;padding:0 .3rem;margin:0 .5rem;transition:.1s ease-out;transform-origin:left top;pointer-events:none;display:block;text-align:start;font-size:var(--chakra-fontSizes-md);font-weight:400;z-index:2}.custom-field .chakra-form-control .chakra-form__required-indicator{color:#abadaf}.custom-field .chakra-form-control[data-focus]>label{top:0;left:8px;transform:translateY(-50%) scale(.9)}.custom-field .chakra-form-control[data-invalid][data-focus]>label{top:0;left:8px;transform:translateY(-50%) scale(.9)}.custom-field .custom-field__item:focus-visible{border-color:#347fdb;box-shadow:0 0 0 1px #347fdb}.custom-field .custom-field__item:hover{border-color:#347fdb;box-shadow:0 0 0 1px #347fdb}.custom-field-have-value label{top:0;left:8px;transform:translateY(-50%) scale(.9)}.custom-field .custom-field__item:not(:focus)::placeholder{opacity:0}.custom-field .custom-field__error{color:var(--chakra-colors-red-500)}