xref: /external/chromium_org/chrome/common/extensions/docs/examples/extensions/plugin_settings/options/css/list.css

/*
Copyright (c) 2011 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.
*/

.raw-button,
.raw-button:hover,
.raw-button:active {
  -webkit-box-shadow: none;
  background-color: transparent;
  background-repeat: no-repeat;
  border: none;
  min-width: 0;
  padding: 1px 6px;
}

list > * {
  -webkit-box-align: center;
  -webkit-transition: .15s background-color;
  box-sizing: border-box;
  border-radius: 0;
  display: -webkit-box;
  height: 32px;
  border: none;
  margin: 0;
}

list:not([disabled]) > :hover {
  background-color: #e4ecf7;
}

/* TODO(stuartmorgan): Once this becomes the list style for other WebUI pages
 * these rules can be simplified (since they wont need to override other rules).
 */

list:not([hasElementFocus]) > [selected],
list:not([hasElementFocus]) > [lead][selected] {
  background-color: #d0d0d0;
  background-image: none;
}

list[hasElementFocus] > [selected],
list[hasElementFocus] > [lead][selected],
list:not([hasElementFocus]) > [selected]:hover,
list:not([hasElementFocus]) > [selected][lead]:hover {
  background-color: #bbcee9;
  background-image: none;
}

list[disabled] {
  opacity: 0.6;
}

list > .heading {
  color: #666666;
}

list > .heading:hover {
  background-color: transparent;
  border-color: transparent;
}

list .deletable-item {
  -webkit-box-align: center;
}

list .deletable-item > :first-child {
  -webkit-box-align: center;
  -webkit-box-flex: 1;
  -webkit-padding-end: 5px;
  display: -webkit-box;
}

list .close-button {
  -webkit-transition: .15s opacity;
  background-color: transparent;
  /* TODO(stuartmorgan): Replace with real images once they are available. */
  background-image: url("../images/close_bar.png");
  border: none;
  display: block;
  height: 16px;
  opacity: 1;
  width: 16px;
}

list > *:not(:hover):not([lead]) .close-button,
list > *:not(:hover):not([selected]) .close-button,
list:not([hasElementFocus]) > *:not(:hover) .close-button,
list[disabled] .close-button,
list .close-button[disabled] {
  opacity: 0;
  pointer-events: none;
}

list .close-button:hover {
  background-image: url("../images/close_bar_h.png");
}

list .close-button:active {
  background-image: url("../images/close_bar_p.png");
}

list .static-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

list[inlineeditable] input {
  box-sizing: border-box;
  margin: 0;
  width: 100%;
}

list[inlineeditable] > :not([editing]) [displaymode="edit"],
list[inlineeditable] > [editing] [displaymode="static"] {
  display: none;
}

list > [editing] input:invalid {
  /* TODO(stuartmorgan): Replace with validity badge */
  background-color: pink;
}