details.pcss.css

/**
 * @file
 * Collapsible details.
 *
 * @see collapse.js
 */

/**
 * Available modifiers are:
 *  - .claro-details--accordion
 *  - .claro-details--accordion-item
 *
 * Despite the fact that 'accordion' isn't used anywhere right now, we
 * implemented it (since the design defines that).
 * This variant can be used by setting the '#accordion' to TRUE for a
 * Details render element:
 * @code
 * $build['detail_accordion'] = [
 *   '#type' => 'details',
 *   '#accordion' => TRUE,
 * ];
 *
 * 'Accordion item' is used for the details of the node edit sidebar. For
 * creating accordion item list from a set of details, set the surrounding
 * Container render element's '#accordion' key to TRUE.
 *
 * 'Vertical tabs item' is used for the children of the VerticalTabs render
 * element.
 */

:root {
  --size-summary-border-radius: calc(var(--details-border-size-radius) - var(--details-border-size));
  --summary-accordion-padding-vertical: calc(var(--space-l) + ((var(--space-m) - var(--space-l)) / 2));
  --summary-accordion-line-height: var(--space-l);
}

.claro-details {
  display: block;
  margin-block: var(--space-m);
  color: var(--color-text);
  border: var(--details-border-size) solid var(--details-border-color);
  border-radius: var(--details-border-size-radius);
  background-color: var(--color-white);
  box-shadow: var(--details-box-shadow);

  /*
   * The following width and min-width values ensure that the 
 element
   * does not shift widths when opening, in the event that a parent table
   * element constrains the width. This can happen when toggling the
   * "lazy-load" option within an image field.
   */
  @nest td 
}

.claro-details--accordion-item,
.claro-details--vertical-tabs-item {
  margin-block: 0;
  border-radius: 0;
  box-shadow: none;
}

.claro-details--accordion-item:first-of-type {
  border-top-left-radius: var(--details-border-size-radius);
  border-top-right-radius: var(--details-border-size-radius);
}

.claro-details--accordion-item:last-of-type {
  border-bottom-right-radius: var(--details-border-size-radius);
  border-bottom-left-radius: var(--details-border-size-radius);
}

/**
 * Details summary styles.
 */

.claro-details__summary {
  position: relative;
  box-sizing: border-box;
  padding-block: var(--space-m);
  padding-inline: var(--details-desktop-wrapper-padding-start) var(--space-m);
  list-style: none;
  cursor: pointer;
  transition: background-color var(--details-bg-color-transition-duration) ease-in-out;
  color: var(--color-gray-800);
  border-radius: var(--size-summary-border-radius);
  background-color: transparent;
  line-height: var(--space-m);
}

/* Modifiers */
.claro-details__summary--accordion,
.claro-details__summary--accordion-item,
.claro-details__summary--vertical-tabs-item {
  padding-block: var(--summary-accordion-padding-vertical);
  padding-inline: var(--details-desktop-wrapper-padding-start) var(--space-l);
  background: var(--color-white);
  line-height: var(--summary-accordion-line-height);
}

/**
 * Accordion list items must not have border radius except they are the first
 * or the last ones.
 */
.claro-details__summary--accordion-item {
  border-radius: 0;
}

.claro-details--accordion-item:first-child .claro-details__summary--accordion-item {
  border-top-left-radius: var(--details-border-size-radius);
  border-top-right-radius: var(--details-border-size-radius);
}

.claro-details--accordion-item:last-child .claro-details__summary--accordion-item {
  border-bottom-right-radius: var(--details-border-size-radius);
  border-bottom-left-radius: var(--details-border-size-radius);
}

/**
 * Details marker styles.
 */

/* Remove the marker on Chrome */
.claro-details__summary::-webkit-details-marker {
  display: none;
}

.claro-details__summary::before {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--space-s);
  display: inline-block;
  width: var(--space-m);
  height: var(--space-m);
  margin-block-start: calc(var(--space-m) / -2);
  content: "";
  transition: transform var(--details-transform-transition-duration) ease-in 0s;
  transform: rotate(90deg);
  text-align: center;
  background-image: url(../../images/icons/545560/chevron-right.svg);
  background-size: contain;

  @nest [dir="rtl"] 
}

@media (prefers-reduced-motion: reduce) {
  .claro-details__summary::before {
    transition: none;
  }
}

@media (forced-colors: active) {
  .claro-details__summary::before {
    width: 0.5625rem;
    height: 0.5625rem;
    transition:
      transform var(--details-transform-transition-duration) ease-in 0s,
      margin var(--details-transform-transition-duration) ease-in 0s;
    transform: rotate(135deg); /* LTR */
    border-block-start: 0.125rem solid;
    border-inline-end: 0.125rem solid;
    background: none;

    @nest [dir="rtl"] 
  }
}

/**
 * Safari (at least version 12.1) cannot handle our details marker
 * transition properly.
 *
 * Every additional pointer triggered toggle event freezes the transition,
 * and the transition is continued and finished after the pointer leaves
 * the Detail elements' summary.
 *
 * Even that it is possible to provide a JavaScript workaround for it (by
 * adding/removing a helper class with JavaScript if the Details is
 * toggled), that hack will make RTL details worse than without the hack.
 *
 * This weird query was found in
 * https://stackoverflow.com/questions/16348489#25975282 (based on the
 * answer it works for Safari 10.1+)
 */
/* stylelint-disable-next-line unit-allowed-list */
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    .claro-details__summary::before {
      transition: none;
    }
  }
}

/**
 * Details summary focus.
 */
.claro-details__summary::after {
  position: absolute;
  inset: -1px;
  content: "";
  transition: opacity var(--details-box-shadow-transition-duration) ease-in-out;
  pointer-events: none;
  opacity: 0;
  border-radius: var(--details-border-size-radius);
  box-shadow: inset 0 0 0 var(--details-summary-focus-border-size) var(--details-summary-shadow-color);
}

.claro-details > .claro-details__summary--accordion-item::after,
.vertical-tabs__item > .claro-details__summary--vertical-tabs-item::after {
  border-radius: 0;
}

.claro-details:first-child > .claro-details__summary--accordion-item::after,
.vertical-tabs__item--first > .claro-details__summary--vertical-tabs-item::after {
  border-top-left-radius: var(--details-border-size-radius);
  border-top-right-radius: var(--details-border-size-radius);
}

.claro-details:last-child > .claro-details__summary--accordion-item::after,
.vertical-tabs__item--last > .claro-details__summary--vertical-tabs-item::after {
  border-bottom-right-radius: var(--details-border-size-radius);
  border-bottom-left-radius: var(--details-border-size-radius);
}

/**
 * Focus box of accordions and accordion items must not have bottom border
 * radius if their accordion is expanded.
 */
.claro-details[open] > .claro-details__summary--accordion::after,
.claro-details[open] > .claro-details__summary--accordion-item::after,
.vertical-tabs__item--last[open] > .claro-details__summary--vertical-tabs-item::after {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

/**
 * Details summary states.
 */
.claro-details__summary:focus {
  box-shadow: none;
}

[open] .claro-details__summary--accordion,
[open] .claro-details__summary--accordion-item,
[open] .claro-details__summary--vertical-tabs-item {
  color: var(--color-absolutezero);
}

.claro-details__summary:hover::before,
.claro-details__summary:hover:focus::before,
.claro-details[open] > .claro-details__summary:focus::before,
.claro-details[open] > .claro-details__summary--accordion::before,
.claro-details[open] > .claro-details__summary--accordion-item::before,
.claro-details[open] > .claro-details__summary--vertical-tabs-item::before {
  background-image: url(../../images/icons/0036b1/chevron-right.svg);
}

.claro-details[open] > .claro-details__summary {
  border-radius: var(--size-summary-border-radius) var(--size-summary-border-radius) 0 0;
}

.claro-details[open] > .claro-details__summary::before {
  transform: rotate(-90deg); /* for LTR and RTL */
}

@media (forced-colors: active) {
  .claro-details__summary:hover::before,
  .claro-details__summary:hover:focus::before,
  .claro-details[open] > .claro-details__summary:focus::before {
    background: none;
  }

  .claro-details[open] > .claro-details__summary::before,
  [dir="rtl"] .claro-details[open] > .claro-details__summary::before {
    margin-block-start: -0.125rem;
    margin-inline-end: 0.125rem;
    transform: rotate(-45deg); /* for LTR and RTL */
    background: none;
  }
}

.claro-details[open] > .claro-details__summary--accordion,
.claro-details[open] > .claro-details__summary--accordion-item,
.claro-details[open] > .claro-details__summary--vertical-tabs-item {
  box-shadow: var(--details-box-shadow);
}

.claro-details__summary:hover {
  color: var(--color-absolutezero);
  background-color: var(--color-bgblue-hover);
}

/**
 * Focus styles.
 */

/**
 * Active has to be here for Firefox.
 */
[open] > .claro-details__summary--accordion:not(:focus, :active)::after,
[open] > .claro-details__summary--accordion-item:not(:focus, :active)::after,
[open] > .claro-details__summary--vertical-tabs-item:not(:focus, :active)::after {
  opacity: 1;
  border: var(--details-summary-focus-border-size) solid var(--color-absolutezero);
  border-width: 0 0 0 var(--details-summary-focus-border-size); /* LTR */
  box-shadow: none;

  @nest [dir="rtl"] 
}

.claro-details__summary:focus::after,
.claro-details__summary:active::after {
  opacity: 1;
}

/**
 * Safari workaround.
 */
/* stylelint-disable-next-line unit-allowed-list */
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-appearance: none) {
    .claro-details__summary::after {
      transition: none;
    }
  }
}

.claro-details[open] > .claro-details__summary:focus {
  color: var(--color-absolutezero);
}

/**
 * Details wrapper and content.
 *
 * Accordion and accordion-item variants should have an extra background.
 * In that case, we render an additional wrapper 'claro-details__content' that
 * creates the visual margins around the content, and use the original
 * wrapper for setting the background color.
 *
 * If there is no border or padding defined, margins of parent-child elements
 * collapse to the highest value. We want to take benefit of this behavior,
 * because the elements inside the details content won't cause too big
 * vertical spacing.
 */
.claro-details__wrapper,
.claro-details__content {
  margin: var(--space-m);
}

.claro-details__wrapper--accordion,
.claro-details__wrapper--accordion-item,
.claro-details__wrapper--vertical-tabs-item {
  margin: 0;
}
.claro-details__wrapper--accordion::before,
.claro-details__wrapper--accordion::after,
.claro-details__wrapper--accordion-item::before,
.claro-details__wrapper--accordion-item::after,
.claro-details__wrapper--vertical-tabs-item::before,
.claro-details__wrapper--vertical-tabs-item::after {
  display: table;
  clear: both;
  content: "";
}

.claro-details__wrapper--accordion,
.claro-details__wrapper--accordion-item,
.claro-details__wrapper--vertical-tabs-item {
  border-top: var(--details-border-size) solid var(--details-border-color);
  background-color: var(--color-gray-050-o-40);
}

/* @see Drupal.behaviors.verticalTabs */
@media screen and (min-width: 641px) {
  .claro-details__wrapper {
    margin: var(--space-l) var(--details-desktop-wrapper-padding-start);
  }

  .claro-details__wrapper--accordion,
  .claro-details__wrapper--accordion-item,
  .claro-details__wrapper--vertical-tabs-item {
    margin: 0;
  }

  .js .claro-details__wrapper--vertical-tabs-item {
    margin: 0;
    border-top: 0;
    background-color: transparent;
  }
}

.claro-details__content--accordion,
.claro-details__content--accordion-item,
.claro-details__content--vertical-tabs-item {
  margin: var(--space-m) var(--space-m) var(--space-l);
}

@media screen and (min-width: 85em) {
  .vertical-tabs .claro-details__content--vertical-tabs-item {
    margin: var(--space-l);
  }
}

/* Description. */
.claro-details__description {
  margin-block-end: var(--space-m);
  color: var(--input-fg-color--description);
  font-size: var(--font-size-xs); /* ~13px */
  line-height: calc(17rem / 16); /* 17px */
}
.claro-details__description.is-disabled {
  color: var(--input--disabled-fg-color);
}

.claro-details__summary-summary {
  display: block;
  color: var(--color-gray-800);
  font-size: var(--font-size-s);
  font-weight: normal;
}

.required-mark::after {
  display: inline-block;
  width: 0.4375rem;
  height: 0.4375rem;
  margin-inline: 0.3em;
  content: "";
  vertical-align: super;
  background-image: url(../../images/core/ee0000/required.svg);
  background-repeat: no-repeat;
  background-size: 0.4375rem 0.4375rem;
}