Are we Design Tokens yet?

toolkit/content/widgets/moz-box-item/moz-box-item.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/. */

:host([layout="medium-icon"]) {
  --box-icon-size: var(--icon-size-large);
}

:host([layout="large-icon"]) {
  --box-icon-size: var(--icon-size-xlarge);
}

:host([layout$="-icon"]) {
  .text-content.has-icon.has-description {
    grid-template-areas:
      "icon label"
      "icon description";
  }
}

:host([static]) {
  /* Indent static items the width of the handle button + gap */
  padding-inline-start: calc(var(--button-size-icon) + var(--space-small));
}

.text-content.has-support-page {
  .label-wrapper {
    grid-area: label;
    display: flex;
    gap: var(--space-xsmall);
    align-items: center;
    flex-wrap: wrap;
  }

  .description-wrapper {
    grid-area: description;
  }

  &:not(.has-description) .description-wrapper {
    display: none;
  }

  .description,
  .support-page {
    display: inline;
  }
}

.description + .support-page {
  font-size: var(--font-size-small);
}

.text-content:not(.has-description) slot[name="description"] {
  display: none;
}

.box-container {
  padding: var(--box-padding, var(--space-large));
  font-size: inherit;
  text-align: start;
}

.box-container,
slot[name="actions"],
slot[name="actions-start"] {
  display: flex;
  align-items: center;
  gap: var(--space-small);
}

.box-content {
  flex: 1 1 auto;
}

.handle {
  --box-item-handle-icon-color: var(--text-color);

  width: var(--button-size-icon);
  height: var(--button-size-icon);
  cursor: grab;
  background-image: url("chrome://global/skin/icons/move-16.svg");
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--button-border-radius);
  -moz-context-properties: fill;
  /** Override the text color set by description-deemphasized for the handle.
      This cannot be disabled, hence the color should remain the default. */
  fill: var(--box-item-handle-icon-color);
  flex-shrink: 0;
}

.actions:has(> slot:not(:has-slotted)) {
  display: none;
}

Back to Home