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;
}

.css-length.overloaded {
  text-decoration: line-through;
}

.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-chevron-down);
  -webkit-mask-repeat: no-repeat;
  background-color: var(--icon-default);
  transform: scale(0.7);
  margin-left: -7px;
  margin-top: -3px;
  content: "";
  height: 2em;
  width: 2em;
}

: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;
}