@telekom/scale-components/dist/collection/components/collapsible/collapsible.css

Scale is the digital design system for Telekom products and experiences.

/**
 * @license
 * Scale https://github.com/telekom/scale
 *
 * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
 *
 * 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 https://mozilla.org/MPL/2.0/.
 */

:host {
  --spacing-y: var(--telekom-spacing-composition-space-06);

  /* button */
  --font: var(--telekom-text-style-heading-5);
  --border-width-button: var(--telekom-spacing-composition-space-02);
  --radius-button: var(--telekom-radius-small);
  --spacing-left-button: 0;
  --spacing-left-button-text: var(--telekom-spacing-composition-space-04);
  --color-button-hover: var(--telekom-color-text-and-icon-primary-hovered);
  --color-button-active: var(--telekom-color-text-and-icon-primary-pressed);
  --background-button-hover: none;
  --focus-outline: var(--telekom-line-weight-highlight) solid
    var(--telekom-color-functional-focus-standard);

  /* content */
  --spacing-right-content: var(--telekom-spacing-composition-space-14);
  --spacing-left-content: 34px;
  --spacing-top-content: var(--telekom-spacing-composition-space-06);
  --spacing-bottom-content: var(--telekom-spacing-composition-space-08);
}

.collapsible {
  position: relative;
  margin: var(--spacing-y) 0;
}

.collapsible--expanded:before {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  border: var(--telekom-spacing-composition-space-01) solid transparent;
  content: '';
  display: block;
  position: absolute;
  pointer-events: none;
  bottom: calc(-1 * var(--spacing-y));
}

.collapsible__heading {
  margin: 0;
}

.collapsible__button {
  color: currentColor;
  width: 100%;
  display: flex;
  text-align: left;
  align-items: center;
  padding-top: 0;
  border-color: transparent;
  border-style: solid;
  padding-right: 0;
  padding-bottom: 0;
  background-color: transparent;
  font: var(--font);
  border-width: var(--border-width-button);
  border-radius: var(--radius-button);
  padding-left: var(--spacing-left-button);
  /* a11y: allows some "external" typographic styles to leak in
   https://www.w3.org/TR/WCAG21/#text-spacing */
  font-family: inherit;
  word-spacing: inherit;
  letter-spacing: inherit;
}

.collapsible__button-text {
  margin-left: var(--spacing-left-button-text);
}

.collapsible__button:hover {
  cursor: pointer;
  color: var(--color-button-hover);
  background-color: var(--background-button-hover);
}

.collapsible__button:active {
  color: var(--color-button-active);
  background-color: transparent;
}

.collapsible__button:focus {
  outline: var(--focus-outline);
}

.collapsible__icon {
  flex-shrink: 0;
}

.collapsible__icon-right {
  margin-left: auto;
}

.collapsible__button[aria-expanded='true'] .collapsible__icon {
  /*  */
}

.collapsible__content {
  padding-right: var(--spacing-right-content);
  padding-left: var(--spacing-left-content);
  /* These should collapse with tags like p, that's what we want */
  margin-top: var(--spacing-top-content);
  margin-bottom: var(--spacing-bottom-content);
}

::slotted(*:not([slot='heading'])) {
  font: var(--telekom-text-style-body);
}