Are we Design Tokens yet?

toolkit/content/widgets/panel-list/panel-list.css

Propagation: 100%

Back to Home

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@import url("chrome://global/content/elements/panel-list.tokens.css");

/*
 * Override the default popover styles to ensure the panel-list
 * stays anchored to the element that opened it.
 */
:host([popover]) {
  margin: 0;
  inset: auto;
  /* Reset inline padding added by the UA [popover] rule so the panel aligns precisely. */
  padding-inline: 0;
}

:host([showing]) {
  visibility: hidden;
}

:host(:not([open])),
:host([popover]:not(:popover-open, [showing])) {
  display: none;
}

:host {
  /* display: block ensures dimensions are available during setAlign()
     positioning, since the popover UA stylesheet hides [popover]:not(:popover-open). */
  display: block;
  position: absolute;
  font: menu;
  padding-block: var(--panel-list-padding-block);
  margin-block-end: var(--space-large);
  min-width: 12em;
  z-index: var(--z-index-popup, 10);
  white-space: nowrap;
  cursor: default;
  overflow-y: auto;
  box-sizing: border-box;
  user-select: none;
}

:host([has-submenu]) {
  overflow: visible;
}

:host(:not([slot="submenu"])) {
  max-height: 100%;
}

:host([stay-open]) {
  position: initial;
  display: inline-block;
}

:host([inxulpanel]) {
  position: static;
  margin: 0;
}

/* In a XUL panel the panel paints the surface the list sits on along with its
   text color, casts its shadow, and rounds and clips its corners. */
:host(:not([inxulpanel])) {
  background-color: var(--panel-list-background-color);
  color: var(--panel-list-text-color);
  border: 1px solid var(--panel-list-border-color);
  border-radius: var(--panel-list-border-radius);
  box-shadow: var(--panel-list-box-shadow);
}

.list {
  margin: 0;
  padding: 0;
}

::slotted(hr:not([hidden])) {
  display: block !important;
  color: inherit !important;
  padding: 0 !important;
  margin: var(--panel-separator-padding) !important;
  border: none !important;
  border-block-start: var(--border-width) solid var(--panel-separator-color) !important;
}

Back to Home