@plone/components/src/styles/quanta/TextField.css

ReactJS components for Plone

@layer plone-components.quanta {
  .q.react-aria-TextField,
  .q.react-aria-TextAreaField {
    position: relative;

    .react-aria-Label {
      color: var(--quanta-sapphire);
      pointer-events: none;
      touch-action: none;
      transition:
        margin-top 0.15s ease-in-out,
        margin-left 0.15s ease-in-out,
        transform 0.15s ease-in-out;
      user-select: none;
    }

    .react-aria-Label:has(+ .react-aria-Input, + .react-aria-TextArea) {
      position: absolute;
      top: 10px;
      left: 12px;
    }

    .react-aria-Label:has(
        + .react-aria-Input[data-focused],
        + .react-aria-TextArea[data-focused]
      ),
    .react-aria-Label:has(
        + .react-aria-Input:not(:placeholder-shown),
        + .react-aria-TextArea:not(:placeholder-shown)
      ) {
      margin-top: -30px;
      margin-left: -12px;
      transform: scale(0.8571428571, 0.8571428571);
      transform-origin: 0 0;
    }

    .react-aria-Label:has(
        + .react-aria-Input:not(:placeholder-shown):not(:hover):not(
            :active
          ):not(:focus),
        + .react-aria-TextArea:not(:placeholder-shown):not(:hover):not(
            :active
          ):not(:focus)
      ) {
      color: var(--basic-500);
    }

    .react-aria-Label:has(
        + .react-aria-Input[required],
        + .react-aria-TextArea[required]
      )::after {
      /* https://yoksel.github.io/url-encoder/ */
      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='hsl(7, 90%25, 59%25)' d='M12 18a6 6 0 100-12 6 6 0 000 12z'/%3E%3C/svg%3E");
    }

    .react-aria-Label:has(
        + .react-aria-Input[required]:not(:placeholder-shown):not(:hover):not(
            :active
          ):not(:focus),
        + .react-aria-TextArea[required]:not(:placeholder-shown):not(
            :hover
          ):not(:active):not(:focus)
      )::after {
      filter: grayscale(1);
    }

    .react-aria-Label:has(
        + .react-aria-Input[data-invalid],
        + .react-aria-TextArea[data-invalid]
      ) {
      color: var(--quanta-candy) !important;

      &::after {
        filter: none !important;
      }
    }

    .react-aria-Label:has(
        + .react-aria-Input[data-disabled],
        + .react-aria-TextArea[data-disabled]
      ) {
      color: var(--basic-400) !important;
    }

    .react-aria-Label:has(
        + .react-aria-Input[readonly],
        + .react-aria-TextArea[readonly]
      ) {
      color: var(--basic-500);
    }
  }

  .q.react-aria-TextField,
  .q.react-aria-TextAreaField {
    .react-aria-Input,
    .react-aria-TextArea {
      width: 100%;
      padding: 12px;
      border: 0;
      border-radius: 6px;
      background-color: var(--basic-200);
      box-shadow: 0 0 0 rgba(2, 19, 34, 0);
      caret-color: var(--quanta-cobalt);
      color: var(--text-color);
      cursor: text;
      text-overflow: ellipsis;
      transition:
        background-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;

      &[data-hovered] {
        background-color: var(--basic-300);
      }

      &[data-focused] {
        background-color: var(--basic-50);
        box-shadow: inset 0 0 0 2px var(--quanta-cobalt);
        outline: 0;
      }

      &[data-invalid] {
        background-color: var(--quanta-ballet);
        outline: 0;

        &[data-focused] {
          background-color: var(--basic-50);
          box-shadow: inset 0 0 0 2px var(--quanta-rose);
        }
      }

      &[data-disabled] {
        background-color: var(--basic-50);
        box-shadow: inset 0 0 0 1px var(--basic-300);
        color: var(--basic-300);
        pointer-events: none;

        & + .react-aria-Text {
          color: var(--basic-300);
        }
      }

      &[readonly] {
        border: 1px dashed var(--basic-400);
        background-color: var(--basic-50);
        box-shadow: none;
      }

      &::placeholder {
        color: var(--basic-400);
        opacity: 0;
        transition: opacity $time-tiny ease-in-out;
      }

      &:active::placeholder,
      &:focus::placeholder {
        opacity: 1;
      }
    }

    .react-aria-Text {
      padding-top: 3px;
      color: var(--basic-500);
      font-size: 0.9rem;
      font-weight: 500;
      letter-spacing: 0.012em;
      line-height: 1.714285714285;
    }
  }
}