/* ============================================================================= Module: accordion (modules/accordion.php) ----------------------------------------------------------------------------- Every entry is a
, so the browser is what opens and closes it. That decides the shape of this file: WITHOUT JAVASCRIPT the state is the [open] attribute and there is no animation. Those rules are written under :not(.js) - the class app/layout.php puts on in its one inline line. WITH JAVASCRIPT the panel is given a height to travel and the state is the .is-open class instead. The class LEADS the attribute: it is dropped the moment a close begins, while [open] has to stay until the panel has finished collapsing or the content would vanish mid-movement. Keying the marker and the title off the attribute would leave them turning back a third of a second late. So they read the class, and nothing here reads both. THE TWO SKINS differ in surface only. Everything above .accordion--boxes is shared; everything below it is the filled box. ============================================================================= */ .accordion { /* Repeated in assets/js/modules/accordion.js, which waits this long for the movement it started. Change both together. */ --accordion-duration: 380ms; --accordion-ease: cubic-bezier(0.22, 1, 0.36, 1); --accordion-title: var(--color-primary); --accordion-title-open: var(--color-accent); --accordion-rule: var(--color-line); } /* On an inverted band there is one colour and the open entry is marked by being open. A second white would be no mark at all. */ .section--invert .accordion, .section--gradient .accordion { --accordion-title: var(--color-text-inverse); --accordion-title-open: var(--color-text-inverse); --accordion-rule: rgba(var(--rgb-white), 0.35); } /* --- The entry ------------------------------------------------------------ */ .accordion__item { border-block-start: var(--border-width) solid var(--accordion-rule); } .accordion__item:last-child { border-block-end: var(--border-width) solid var(--accordion-rule); } /* --- The heading you press --------------------------------------------------- display on a is what removes the disclosure triangle in Chrome and Safari; Firefox needs the list-style as well. Both are needed, neither is redundant. -------------------------------------------------------------------------- */ .accordion__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); /* 44px of touch target without a min-height: the two lines of the label plus this padding clear it at every type size. */ padding-block: var(--space-sm); list-style: none; cursor: pointer; } .accordion__summary::-webkit-details-marker { display: none; } /* The focus ring comes from base/elements.css, but a is focusable without being a button, so it needs the offset spelled out here or the ring sits on the text. */ .accordion__summary:focus-visible { outline-offset: 2px; } .accordion__label { display: block; } .accordion__title { display: block; color: var(--accordion-title); font-size: var(--font-size-base); line-height: var(--line-height-heading); transition: color var(--transition-base); } .accordion__note { display: block; margin-block-start: var(--space-3xs); color: var(--accordion-title); font-size: var(--font-size-sm); opacity: 0.72; } .accordion__summary:hover .accordion__title { color: var(--accordion-title-open); } /* --- The marker -------------------------------------------------------------- Drawn in currentColor, so one piece of markup works on the grey page and on the gradient band without a second file or a modifier. -------------------------------------------------------------------------- */ .accordion__marker { display: flex; flex: none; align-items: center; justify-content: center; color: var(--accordion-title); transition: color var(--transition-base); } .accordion__summary:hover .accordion__marker { color: var(--accordion-title-open); } .accordion__chevron, .accordion__sign { display: block; /* An SVG child transforms about the view box unless told otherwise, and a percentage origin on it would resolve against the wrong box. Stated so the rotation and the scale below are about the middle of the mark. */ transform-box: view-box; transform-origin: center; transition: transform var(--accordion-duration) var(--accordion-ease); } /* The upright bar of the plus, which is what turns it into a minus. */ .accordion__sign-bar { transform-box: view-box; transform-origin: center; transition: transform var(--accordion-duration) var(--accordion-ease); } /* --- The panel --------------------------------------------------------------- The box whose height travels. It is empty of padding on purpose: the body inside carries it, so a measurement of the content is never a measurement of a margin that has collapsed out of the box. -------------------------------------------------------------------------- */ .accordion__panel { overflow: hidden; transition: height var(--accordion-duration) var(--accordion-ease); } .accordion__body { padding-block-end: var(--space-lg); max-width: var(--measure); color: var(--accordion-title); font-size: var(--font-size-sm); line-height: var(--line-height-base); } .accordion__body > * { margin-block: 0; } .accordion__body > * + * { margin-block-start: var(--space-sm); } .accordion__lead { font-weight: var(--font-weight-semibold); } /* A sub-heading inside a panel, where one entry covers two or three subjects. Set at the panel's own size: it divides the text, it does not open a new section, and a step up in size here would compete with the heading you pressed to get to it. */ .accordion__subtitle { color: inherit; font-size: inherit; font-weight: var(--font-weight-semibold); line-height: var(--line-height-heading); } /* Space above a sub-heading, none between it and the text it introduces - the same rhythm .prose gives a heading in base/components.css. */ .accordion__body > * + .accordion__subtitle { margin-block-start: var(--space-lg); } .accordion__subtitle + * { margin-block-start: var(--space-3xs); } /* --- A scale and what its steps mean ----------------------------------------- BI-RADS, PI-RADS and the T-Wert are all the same shape: a value, and what that value means. That is a definition list and not a bulleted one - the pairing is the content. Two columns from 480px, because the terms are short and of even length ("PI-RADS 1-2", "-2,5 und darunter") and setting them above their meaning would double the height of the panel for nothing. Below that they stack. -------------------------------------------------------------------------- */ .accordion__terms { display: grid; gap: var(--space-2xs) var(--space-sm); /* No margin reset: the
is a direct child of .accordion__body, which already zeroes it and puts the rhythm between siblings. Setting it here would out-order that rule and close the gap above the list. */ } @media (min-width: 480px) { .accordion__terms { grid-template-columns: minmax(6rem, auto) minmax(0, 1fr); } } .accordion__term { font-weight: var(--font-weight-semibold); } .accordion__definition { /* base/reset.css leaves the browser's 40px indent on a
. */ margin-inline-start: 0; } /* Stacked below 480px, so the pair needs to stay together: the gap belongs between pairs, not inside one. */ .accordion__definition { margin-block-end: var(--space-2xs); } @media (min-width: 480px) { .accordion__definition { margin-block-end: 0; } } /* Two classes on each: base/reset.css strips the padding and the markers off every list[class], and these two want them back. */ .accordion .accordion__list { padding-inline-start: var(--space-md); list-style: disc outside; } .accordion .accordion__steps { padding-inline-start: var(--space-md); list-style: decimal outside; } .accordion__list > li, .accordion__steps > li { margin-block-start: var(--space-3xs); } /* --- State ------------------------------------------------------------------- See the note at the top of the file: the attribute without JavaScript, the class with it. They never both apply, so neither needs to out-specify the other. -------------------------------------------------------------------------- */ :not(.js) .accordion__item[open] > .accordion__summary .accordion__title, .accordion__item.is-open > .accordion__summary .accordion__title { color: var(--accordion-title-open); } :not(.js) .accordion__item[open] > .accordion__summary .accordion__marker, .accordion__item.is-open > .accordion__summary .accordion__marker { color: var(--accordion-title-open); } :not(.js) .accordion__item[open] > .accordion__summary .accordion__chevron, .accordion__item.is-open > .accordion__summary .accordion__chevron { transform: rotate(180deg); } :not(.js) .accordion__item[open] > .accordion__summary .accordion__sign-bar, .accordion__item.is-open > .accordion__summary .accordion__sign-bar { transform: scaleY(0); } /* ============================================================================= The boxes ----------------------------------------------------------------------------- The same entries drawn as filled panels, two to a row. Two, and not a self-fitting grid: the boxes sit in the right-hand column of a .section-head--split, which is a little over half the page - a grid that fitted itself would put three narrow ones there on a wide monitor and one on a laptop. A box grows INSIDE ITS OWN CELL. Its neighbour keeps the height it had, so pressing one never reshuffles the grid under the pointer. align-items: start is what allows it: without it every box in a row would stretch to match the tallest. ============================================================================= */ /* Two classes, so the box keeps its dark label even when it is dropped on an inverted band - .section--gradient .accordion would otherwise out-specify a single class and set white text on the light blue surface. */ .accordion.accordion--boxes { --accordion-title: var(--color-primary); --accordion-title-open: var(--color-primary); } .accordion--boxes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); align-items: start; } @media (min-width: 1024px) { .accordion--boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .accordion--boxes .accordion__item { padding-inline: var(--space-md); border: 0; background-color: var(--color-accent); } .accordion--boxes .accordion__title { font-weight: var(--font-weight-medium); } /* The plus is already a mark of its own; making it change colour as well would be two answers to one press. */ .accordion--boxes .accordion__summary:hover .accordion__title, .accordion--boxes .accordion__summary:hover .accordion__marker { color: var(--accordion-title); } .accordion--boxes .accordion__body { /* The column is half the page, so the measure is already short enough. */ max-width: none; }