chrome-devtools-frontend/front_end/ui/segmentedButton.css

Chrome DevTools UI

/*
 * Copyright 2018 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.
 */

.segmented-button {
  align-items: center;
  align-content: center;
  display: flex;
}

.segmented-button-segment {
  background-color: var(--color-background);
  border: var(--divider-border);
  border-right-style: none;
  color: #5a5a5a; /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
  flex: 1 1 0;
  font-weight: 700;
  margin-left: -1px;
  padding: 4px 16px;
}

.segmented-button-segment:hover {
  background-color: #f4f4f4; /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
  color: #333; /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
}

.segmented-button-segment:first-child {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

.segmented-button-segment:last-child {
  border-bottom-right-radius: 4px;
  border-right-style: solid;
  border-top-right-radius: 4px;
}

.segmented-button-segment.segmented-button-segment-selected {
  background-color: hsl(218deg 81% 59%); /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
  border-color: transparent;
  color: #fafafa; /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
}

.segmented-button-segment.segmented-button-segment-selected:hover {
  background-color: hsl(218deg 81% 62%); /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
  color: #fff; /* stylelint-disable-line plugin/use_theme_colors */
  /* See: crbug.com/1152736 for color variable migration. */
}
/* Remove a border between the selected button and its siblin */

.segmented-button-segment-selected + .segmented-button-segment {
  border-left-color: transparent;
}