Source code
Revision control
Copy as Markdown
Other Tools
/* 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
:host {
--card-border-color: color-mix(in srgb, currentColor 10%, transparent);
--card-border-radius: var(--border-radius-medium);
--card-border-width: var(--border-width);
--card-border: var(--card-border-width) solid var(--card-border-color);
--card-background-color: var(--background-color-box);
--card-focus-outline: var(--focus-outline);
--card-box-shadow: var(--box-shadow-10);
--card-padding: var(--space-large);
--card-gap: var(--card-padding);
--card-article-gap: var(--space-small);
@media (prefers-contrast) {
--card-border-color: color-mix(in srgb, currentColor 41%, transparent);
}
}
: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 {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--card-article-gap);
}
#moz-card-details {
width: 100%;
display: flex;
flex-direction: column;
gap: var(--card-article-gap);
}
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: url("chrome://global/skin/icons/arrow-down.svg");
details[open] & {
background-image: 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);
}
@media (prefers-contrast) {
outline: var(--button-border-color) solid var(--border-width);
&:hover {
outline-color: var(--button-border-color-hover);
}
&:active {
outline-color: var(--button-border-color-active);
}
}
@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;
}
}
}
&:focus-visible {
outline: var(--card-focus-outline);
}
}