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

Chrome DevTools UI

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

.css-length {
  display: inline-block;
  position: relative;
  outline: none;
}

.value {
  cursor: ew-resize;
}

.unit-dropdown {
  display: none;
}

.unit-dropdown select {
  all: unset;
  cursor: pointer;
  opacity: 0%;
  width: 0.8em;
  background-color: var(--color-background);
}

.icon {
  position: absolute;
  display: inline-block;
  -webkit-mask-image: var(--image-file-chevrons);
  -webkit-mask-position: -12px 4px;
  -webkit-mask-size: 19px 6px;
  -webkit-mask-repeat: no-repeat;
  background-color: var(--color-text-primary);
  content: "";
  height: 1em;
  width: 1em;
}

:host(:not(:last-child)) {
  margin-right: 0.1em;
}

:host(:not(:last-child)) .unit-dropdown {
  position: absolute;
}

.css-length:hover .unit-dropdown {
  display: inline-block;
}

:host(:last-child) .unit-dropdown select {
  width: 0.6em;
}