@helpwave/hightide/dist/style/uncompiled/theme/components/property.css

helpwave's component and theming library

@layer components {
  [data-name="property-inner"] {
    @apply flex-row-0 w-full min-w-0;
  }

  [data-name="property-root"] {
    @apply rounded-xl;
    container-type: inline-size;
    container-name: property;
    transition: outline-offset var(--animation-duration-in, 250ms);
    outline-offset: 0;

    &:hover {

      [data-name="property-title"]:not([data-invalid]),
      [data-name="property-content"]:not([data-invalid]) {
        @apply border-primary;
      }

      [data-name="property-title"][data-invalid],
      [data-name="property-content"][data-invalid] {
        @apply border-warning;
      }
    }

    &:focus-within {
      @apply outline-solid outline-2;
      outline-offset: calc(var(--spacing) * 0.25);

      &:not([data-invalid]) {
        @apply outline-primary;
      }

      &[data-invalid] {
        @apply outline-warning;
      }
    }
  }

  [data-name="property-title"] {
    @apply flex-row-2 max-w-48 min-w-48 px-3 py-2 items-center justify-between rounded-l-xl border-2 border-r-0;

    &:not([data-invalid]) {
      @apply bg-property-title-background text-property-title-text;
    }

    &[data-invalid] {
      @apply bg-warning text-on-warning border-warning-hover;
    }
  }

  [data-name="property-title-icon"] {
    @apply max-w-6 min-w-6;
  }

  [data-name="property-title-text"] {
    @apply font-semibold truncate min-w-0;
  }

  [data-name="property-content"] {
    @apply flex-row-2 grow px-3 py-2 justify-between items-center rounded-r-xl border-2 border-l-0 min-h-15;

    &:not([data-invalid]) {
      @apply bg-input-background text-input-text;
    }

    &[data-invalid] {
      @apply bg-surface-warning border-warning;
    }
  }

  [data-name="property-title-actions"] {
    @apply hidden flex-row-2 items-center gap-1 shrink-0;
  }

  [data-name="property-actions"] {
    @apply flex-row-2 items-center gap-1;
  }

  @container property (max-width: 32rem) {
    [data-name="property-inner"] {
      @apply flex-col;
    }

    [data-name="property-title"] {
      @apply max-w-none min-w-0 w-full rounded-none rounded-t-xl border-r-2 border-b-0;
    }

    [data-name="property-title-actions"] {
      @apply flex;
    }

    [data-name="property-actions"] {
      @apply hidden;
    }

    [data-name="property-content"] {
      @apply rounded-none rounded-b-xl border-t-0 border-l-2 border-r-2 min-h-0;
    }
  }

  [data-name="property-input-wrapper"] {
    @apply relative flex-row-2 w-full;

    &[data-invalid] {
      @apply text-warning;

      [data-name="select-button"],
      [data-name="select-chip-display"] {
        @apply !bg-warning !text-surface-warning;
      }
    }
  }

  [data-name="property-input"] {
    @apply rounded p-1;

    &[type="date"]::-webkit-calendar-picker-indicator,
    &[type="datetime-local"]::-webkit-calendar-picker-indicator,
    &[type="time"]::-webkit-calendar-picker-indicator {
      display: none;
      -webkit-appearance: none;
    }

    &[data-invalid] {
      @apply bg-surface-warning placeholder-warning;
    }
  }

  [data-name="property-suffix"] {
    @apply absolute top-1/2 -translate-y-1/2 right-2;

    &[data-invalid] {
      @apply bg-surface-warning;
    }
  }
}