toolkit/content/widgets/moz-card/moz-card.css

Propagation: 96.97%

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 {
  --card-border-radius: var(--border-radius-medium);
  --card-border-width: var(--border-width);
  --card-border: var(--card-border-width) solid var(--border-color-card);
  --card-background-color: var(--background-color-box);
  --card-focus-outline: var(--focus-outline);
  --card-box-shadow: var(--box-shadow-card);
  --card-padding: var(--space-large);
  --card-gap: var(--card-padding);
  --card-article-gap: var(--space-small);
}

:host {
  display: block;
  border: var(--card-border);
  border-radius: var(--card-border-radius);
  background-color: var(--card-background-color);
  box-shadow: var(--card-box-shadow);
  box-sizing: border-box;
}

:host([type=accordion]) {
  summary {
    padding-block: var(--card-padding-block, var(--card-padding));
  }
  #content {
    padding-block-end: var(--card-padding-block, var(--card-padding));
  }
}
:host(:not([type=accordion])) {
  .moz-card {
    padding-block: var(--card-padding-block, var(--card-padding));
  }
  #moz-card-details {
    display: flex;
    flex-direction: column;
    gap: var(--card-article-gap);
  }
}

.moz-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--card-article-gap);
}

#moz-card-details {
  width: 100%;
}

summary {
  cursor: pointer;
}

#heading-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--card-gap);
  padding-inline: var(--card-heading-padding-inline, var(--card-padding));
  border-radius: var(--card-border-radius);

  .chevron-icon {
    background-image: var(--card-accordion-closed-icon, url("chrome://global/skin/icons/arrow-down.svg"));

    details[open] & {
      background-image: var(--card-accordion-open-icon, url("chrome://global/skin/icons/arrow-up.svg"));
    }
  }

  .chevron-icon,
  #heading-icon {
    background-position: center;
    background-repeat: no-repeat;
    -moz-context-properties: fill;
    fill: currentColor;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    padding: 0;
    flex-shrink: 0;
    align-self: flex-start;
  }
}

#heading {
  font-size: var(--font-size-root);
  font-weight: var(--font-weight-bold);
}

#content {
  align-self: stretch;
  padding-inline: var(--card-padding-inline, var(--card-padding));
  border-end-start-radius: var(--card-border-radius);
  border-end-end-radius: var(--card-border-radius);

  @media (prefers-contrast) {
    :host([type=accordion]) & {
      border-block-start: 0;
      padding-block-start: var(--card-padding-block, var(--card-padding));
    }
  }
}

details  {
  > summary {
    list-style: none;
    border-radius: var(--card-border-radius);
    cursor: pointer;

    &:hover {
      background-color: var(--button-background-color-hover);
    }

    &:focus-visible {
      outline: var(--card-focus-outline);
    }

    @media (prefers-contrast) {
      outline: var(--button-border-color) solid var(--border-width);
    }

    @media (forced-colors) {
      color: var(--button-text-color);
      background-color: var(--button-background-color);

      &:hover {
        background-color: var(--button-background-color-hover);
        color: var(--button-text-color-hover);
      }

      &:active {
        background-color: var(--button-background-color-active);
        color: var(--button-text-color-active);
      }
    }
  }

  &[open] {
    summary {
      border-end-start-radius: 0;
      border-end-end-radius: 0;
    }
    @media not (prefers-contrast) {
      #content {
        /*
        There is a border shown above this element in prefers-contrast.
        When there isn't a border, there's no need for the extra space.
         */
        padding-block-start: 0;
      }
    }
  }
}

Back to Home