@essential-js/ui/form/form.css

EssentialJS UI

.essential__input {
  border-radius: var(--input-border-radius);
  border: var(--border-width) solid transparent;
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.essential__input .after {
  padding: 0 0.8rem 0 0;
}
.essential__input .before {
  padding: 0 0 0 0.8rem;
}
.essential__input label {
  color: var(--disabled-text);
  font-size: 1rem;
  position: absolute;
  left: 0rem;
  padding: 0 0.8rem;
  transition: all 0.2s ease-out;
}
.essential__input .input__container {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}
.essential__input .input__container input {
  background: var(--secondary-background);
  border-radius: var(--input-border-radius);
  outline: transparent;
  font-size: 1rem;
  border: 0;
  width: 100%;
  padding: 0.8rem;
}
.essential__input .input__container input:disabled {
  cursor: not-allowed;
  color: var(--disabled-text);
  background: var(--disabled-input);
}
.essential__input .input__container input:focus ~ label {
  color: var(--text-color);
  transform: translateY(-2.4rem);
}
.essential__input .input__container input:not(:focus)::placeholder {
  color: transparent;
}
.essential__input .input__container input:not(:placeholder-shown) ~ label {
  color: var(--text-color);
  transform: translateY(-2.4rem);
}
.essential__input .input__container input[type=password]::-ms-reveal, .essential__input .input__container input[type=password]::-ms-clear {
  display: none;
}
.essential__input .input__container .password__icon {
  cursor: pointer;
  position: absolute;
  right: 0.8rem;
}
.essential__input .has-icon ~ .input__container input {
  padding: 0.8rem 0 0.8rem 0;
}
.essential__input .has-icon ~ .input__container label {
  padding: 0 0.2rem;
}
.essential__input.bordered {
  border: var(--border-width) solid var(--accent);
}
.essential__input.success {
  background: var(--success);
}
.essential__input.success.bordered {
  background: transparent;
  border: 3px solid var(--success);
  box-shadow: none;
}
.essential__input.success.bordered .input__container input {
  background: transparent;
}
.essential__input.info {
  background: var(--info);
}
.essential__input.info.bordered {
  background: transparent;
  border: 3px solid var(--info);
  box-shadow: none;
}
.essential__input.info.bordered .input__container input {
  background: transparent;
}
.essential__input.error {
  background: var(--error);
}
.essential__input.error.bordered {
  background: transparent;
  border: 3px solid var(--error);
  box-shadow: none;
}
.essential__input.error.bordered .input__container input {
  background: transparent;
}
.essential__input.warning {
  background: var(--warning);
}
.essential__input.warning.bordered {
  background: transparent;
  border: 3px solid var(--warning);
  box-shadow: none;
}
.essential__input.warning.bordered .input__container input {
  background: transparent;
}
.essential__input.default {
  background: var(--default);
}
.essential__input.default.bordered {
  background: transparent;
  border: 3px solid var(--default);
  box-shadow: none;
}
.essential__input.default.bordered .input__container input {
  background: transparent;
}
.essential__toasts {
  position: absolute;
  display: grid;
  gap: 1rem;
}
.essential__toasts .toast {
  border-radius: 10px;
  max-width: 300px;
  padding: 0.6rem 1.2rem 0.6rem 0.8rem;
  display: grid;
  grid-template-columns: 25px calc(100% - 25px);
  gap: 0.5rem;
  align-items: center;
}
.essential__toasts .toast .icon {
  width: 25px;
}
.essential__toasts .toast.success {
  background: var(--success);
}
.essential__toasts .toast.info {
  background: var(--info);
}
.essential__toasts .toast.error {
  background: var(--error);
}
.essential__toasts .toast.warning {
  background: var(--warning);
}
.essential__toasts .toast.default {
  background: var(--default);
}
.essential__switch {
  background: var(--secondary-background);
  border-radius: 20px;
  cursor: pointer;
  border: 0;
  width: 40px;
  height: 20px;
}
.essential__switch .indicator {
  background: var(--disabled);
  border-radius: 50%;
  width: 20px;
  height: 100%;
  transition: transform 0.2s ease-out;
  aspect-ratio: 1/1;
  margin: 0;
}
.essential__switch.checked .indicator {
  background: var(--accent);
  transform: translateX(100%);
}
.essential__textarea {
  border-radius: var(--input-border-radius);
  border: var(--border-width) solid transparent;
  position: relative;
  width: 100%;
  gap: 0.5rem;
  margin: 0.5rem 0;
}
.essential__textarea label {
  color: var(--disabled-text);
  font-size: 1rem;
  position: absolute;
  left: 0.8rem;
  transform: translateY(0.6rem);
  transition: all 0.2s ease-out;
}
.essential__textarea textarea {
  min-height: 42px;
  border-radius: var(--input-border-radius);
  border: var(--border-width) solid transparent;
  background: var(--secondary-background);
  width: 100%;
  padding: 0 0.8rem;
  resize: vertical;
  outline: transparent;
  padding: 0.6rem 0.8rem;
}
.essential__textarea textarea:disabled {
  cursor: not-allowed;
  color: var(--disabled-text);
  background: var(--disabled-input);
}
.essential__textarea textarea:focus ~ label {
  color: var(--text-color);
  transform: translateY(-1.9rem);
}
.essential__textarea textarea:not(:focus)::placeholder {
  color: transparent;
}
.essential__textarea textarea:not(:placeholder-shown) ~ label {
  color: var(--text-color);
  transform: translateY(-1.9rem);
}
.essential__textarea.bordered {
  border: var(--border-width) solid var(--accent);
}
.essential__textarea.success {
  background: var(--success);
}
.essential__textarea.success.bordered {
  background: transparent;
  border: 3px solid var(--success);
  box-shadow: none;
}
.essential__textarea.success.bordered .input__container input {
  background: transparent;
}
.essential__textarea.info {
  background: var(--info);
}
.essential__textarea.info.bordered {
  background: transparent;
  border: 3px solid var(--info);
  box-shadow: none;
}
.essential__textarea.info.bordered .input__container input {
  background: transparent;
}
.essential__textarea.error {
  background: var(--error);
}
.essential__textarea.error.bordered {
  background: transparent;
  border: 3px solid var(--error);
  box-shadow: none;
}
.essential__textarea.error.bordered .input__container input {
  background: transparent;
}
.essential__textarea.warning {
  background: var(--warning);
}
.essential__textarea.warning.bordered {
  background: transparent;
  border: 3px solid var(--warning);
  box-shadow: none;
}
.essential__textarea.warning.bordered .input__container input {
  background: transparent;
}
.essential__textarea.default {
  background: var(--default);
}
.essential__textarea.default.bordered {
  background: transparent;
  border: 3px solid var(--default);
  box-shadow: none;
}
.essential__textarea.default.bordered .input__container input {
  background: transparent;
}
.essential__validate-input {
  position: relative;
}
.essential__validate-input:not(.display-message) .message {
  opacity: 0;
}
.essential__validate-input.display-message .message {
  opacity: 1;
  transform: translateY(0);
  font-size: 0.8rem;
}
.essential__validate-input .essential__input {
  z-index: 2;
}
.essential__validate-input .message {
  position: absolute;
  transform: translateY(-2rem);
  transition: all 0.2s ease-out;
  left: 1rem;
}
.essential__validate-input .message.error {
  color: var(--error);
}
.essential__validate-input .message.success {
  color: var(--success);
}


/*# sourceMappingURL=form.css.map*/