@dropi/ui 0.1.24 → 0.1.25

package/dist/collection/components/dropi-input/dropi-input.css

@@ -1,185 +0,0 @@
-:host {
-  display: block;
-  width: 100%;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-/* ── Fixed label layout ────────────────────────────────────── */
-.fixed-label-container {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
-}
-
-.input-label {
-  color: var(--Gray-Gray-600, #475066);
-  font-size: var(--font-size-xs, 10px);
-  font-weight: var(--font-weight-regular, 400);
-  text-align: left;
-}
-
-.asterisk {
-  color: var(--Error-Error-500, #f46a6b);
-}
-
-/* ── Form group / container ────────────────────────────────── */
-.form-group {
-  position: relative;
-  width: 100%;
-}
-
-.input-container {
-  position: relative;
-}
-
-/* ── Icons ─────────────────────────────────────────────────── */
-.icon-input {
-  position: absolute;
-  top: 10px;
-  left: 5px;
-  z-index: 1;
-}
-
-.icon-input-password {
-  position: absolute;
-  top: 10px;
-  right: 13px;
-  cursor: pointer;
-  z-index: 1;
-}
-
-/* ── Base input ─────────────────────────────────────────────── */
-.form-control {
-  box-sizing: border-box;
-  width: 100%;
-  padding: var(--Size-2, 8px);
-  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
-  border-radius: var(--Border-2, 8px);
-  background: var(--Neutral-White, #ffffff);
-  font-size: var(--font-size-s, 12px);
-  font-family: inherit;
-  color: var(--Gray-Gray-700, #32394d);
-  transition: border-color 0.3s ease-in-out;
-  height: 40px;
-  outline: none;
-  appearance: none;
-  text-align: left;
-}
-
-.form-control::placeholder {
-  color: transparent;
-  transition: color 0.2s ease-in-out;
-}
-
-/* Show placeholder only on focus or in fixedLabel mode */
-.form-control:focus::placeholder,
-.fixed-label-input::placeholder {
-  color: var(--Gray-Gray-400, #858ea6);
-}
-
-.form-control:focus {
-  border-color: var(--Info-Info-500, #50a5f1);
-}
-
-.form-control-valid {
-  border-color: var(--Gray-Gray-400, #858ea6) !important;
-  color: var(--Gray-Gray-600, #475066);
-}
-
-.form-control-invalid {
-  border-color: var(--Error-Error-500, #f46a6b) !important;
-  color: var(--Gray-Gray-600, #475066);
-}
-
-.form-control:disabled {
-  border-color: var(--Gray-Gray-200, #c3c9d9) !important;
-  color: var(--Gray-Gray-400, #858ea6);
-  background-color: var(--Gray-Gray-50, #f7f8fa);
-  cursor: not-allowed;
-}
-
-.padding-icon {
-  padding-left: 28px;
-}
-
-/* When icon is always visible, shift the floating label right to avoid overlap */
-.input-container--has-icon label.label-bottom {
-  left: 28px;
-}
-
-/* When focused or has value, float up to left: 0 regardless */
-.input-container--has-icon .form-control:focus + label.label-bottom,
-.input-container--has-icon .form-control:not(:placeholder-shown) + label.label-bottom {
-  left: 0;
-}
-
-/* Password: hide characters via CSS (no type=password needed for font trick) */
-.text-password {
-  -webkit-text-security: disc;
-  text-security: disc;
-}
-
-/* ── Floating label ─────────────────────────────────────────── */
-label.label-bottom {
-  position: absolute;
-  font-weight: var(--font-weight-regular, 400);
-  top: 10px;
-  font-size: var(--font-size-s, 12px);
-  color: var(--Gray-Gray-500, #69738c);
-  left: 10px;
-  transition: all 0.2s ease-in-out;
-  pointer-events: none;
-  overflow: hidden;
-  width: 90%;
-  white-space: nowrap;
-}
-
-/* Float up when focused or has value */
-.form-control:focus+label.label-bottom,
-.form-control:not(:placeholder-shown)+label.label-bottom {
-  top: -22px;
-  left: 0;
-  font-size: var(--font-size-xs, 10px);
-  color: var(--Gray-Gray-600, #475066);
-  width: unset;
-}
-
-.form-control:disabled+label.label-bottom {
-  color: var(--Gray-Gray-400, #858ea6);
-}
-
-/* ── Helper text ────────────────────────────────────────────── */
-.form-control-helper {
-  display: flex;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  gap: 4px;
-  align-items: center;
-  margin-top: 4px;
-}
-
-.form-control-helper span {
-  display: block;
-  color: var(--Gray-Gray-600, #475066);
-  font-size: var(--font-size-xs, 10px);
-}
-
-.invalid-color {
-  color: var(--Error-Error-500, #f46a6b) !important;
-}
-
-.disabled-helper {
-  color: var(--Gray-Gray-400, #858ea6) !important;
-}
-
-.disabled-helper {
-  color: var(--Gray-Gray-400, #858ea6) !important;
-}