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="large-icon"]) {
  --box-icon-size: var(--icon-size-xlarge);

  .text-content.has-icon.has-description {
    grid-template-areas:
      "icon label"
      "icon description";
  }
}

.text-content.has-support-page {
  display: flex;

  &.has-description {
    flex-wrap: wrap;
  }

  .label-wrapper {
    width: 100%;
    display: flex;
    gap: var(--space-small);
    align-items: center;

    .support-page {
      margin-inline-start: var(--space-xsmall);
    }
  }

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

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

.box-container {
  padding: var(--box-padding);
  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 {
  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;
  fill: currentColor;
}

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

Back to Home