chrome-devtools-frontend/front_end/ui/legacy/components/inline_editor/positionAreaEditor.css

Chrome DevTools UI

/*
 * Copyright 2026 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

@scope to (devtools-widget > *) {
  :scope {
    padding: var(--sys-size-7);
    width: min-content;
  }

  .property {
    display: flex;
    gap: var(--sys-size-2);
    line-height: 16px;
    height: 32px;
    padding-bottom: var(--sys-size-3);
    overflow-wrap: break-word;
    flex-shrink: 0;
  }

  .property-name,
  .property-keyword {
    white-space: nowrap;
  }

  .property-name {
    flex-shrink: 0;
    color: var(--sys-color-token-property-special);
  }

  .property-value {
    color: var(--sys-color-on-surface);
  }

  .position-area-builder {
    --x-start: attr(data-x-start type(<number>));
    --x-end: attr(data-x-end type(<number>));
    --y-start: attr(data-y-start type(<number>));
    --y-end: attr(data-y-end type(<number>));
    --box-size: 28px;

    position: relative;
    display: grid;
    grid-template-columns: repeat(3, var(--box-size));
    grid-template-rows: repeat(3, var(--box-size));
    gap: 4px;
    margin: var(--sys-size-6) auto var(--sys-size-9);
    touch-action: none;
    user-select: none;
    flex-shrink: 0;

    div {
      background-color: if(
        style(
          (--x-start <= attr(data-x type(<number>))) and
          (--x-end >= attr(data-x type(<number>))) and
          (--y-start <= attr(data-y type(<number>))) and
          (--y-end >= attr(data-y type(<number>)))
        ): var(--sys-color-tonal-container);
        else: transparent
      );
      min-width: var(--box-size);
      min-height: var(--box-size);
      outline: 1px solid var(--sys-color-neutral-outline);
    }

    &::after {
      content: '';
      position: absolute;
      inset: -2px;
      grid-column: calc(var(--x-start) + 1) / calc(var(--x-end) + 2);
      grid-row: calc(var(--y-start) + 1) / calc(var(--y-end) + 2);
      border: 2px solid var(--sys-color-primary);
      pointer-events: none;
      z-index: 1;
    }
  }

  .position-area-controls {
    display: flex;
    flex-direction: column;
    gap: var(--sys-size-5);
    flex-shrink: 0;
  }

  .axis-section {
    display: flex;
    flex-direction: column;
    gap: var(--sys-size-1);
  }

  .axis-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .self-checkbox-label {
    padding-inline-end: var(--sys-size-2);
  }

  .axis-title {
    font-size: var(--sys-typescale-body4-size);
    font-weight: 500;
    color: var(--sys-color-on-surface-subtle);
  }

  .chip-radio-group {
    display: inline-flex;
    gap: var(--sys-size-3);
    border: none;
    padding: 0;
    margin: 0;

    & > input[type='radio'] {
      position: absolute;
      opacity: 0%;
      width: 0;
      height: 0;
      pointer-events: none;
    }

    & > label {
      box-sizing: border-box;
      display: inline-block;
      padding: 3px var(--sys-size-4);
      border-radius: var(--sys-shape-corner-extra-small);
      outline: var(--sys-size-1) solid var(--sys-color-neutral-outline);
      outline-offset: calc(-1 * var(--sys-size-1));
      background: transparent;
      color: var(--sys-color-on-surface);
      font-size: var(--sys-typescale-body5-size);
      font-weight: 500;
      cursor: pointer;
      user-select: none;

      &:hover {
        background-color: var(--sys-color-state-hover-on-subtle);
      }
    }

    & > input[type='radio']:checked + label {
      background-color: var(--sys-color-tonal-container);
      color: var(--sys-color-on-tonal-container);
      outline: none;
    }

    & > input[type='radio']:focus-visible + label {
      outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
    }
  }
}