details.css

/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

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

/**
 * Available modifiers are:
 *  - .gin-details--accordion
 *  - .gin-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,
 * ];
 * @endcode
 *
 * '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);
}

.gin-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.
   */
  td 

  &.error {
    border: 2px solid var(--gin-color-danger);
  }
}

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

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

.gin-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.
 */

.gin-details__summary {
  position: relative;
  box-sizing: border-box;
  padding-block: var(--space-m);
  padding-inline: 2.75rem var(--space-m);
  list-style: none;
  cursor: pointer;
  transition: background-color var(--details-bg-color-transition-duration) ease-in-out;
  color: var(--gin-color-text);
  border-radius: var(--size-summary-border-radius);
  background-color: transparent;
  line-height: var(--space-m);

  &:not(.form-required) {
    .required-mark {
      display: none;
    }
  }

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

  /* Details marker. */
  &::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("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath d='M5.21 1.314L3.79 2.723l5.302 5.353-5.303 5.354 1.422 1.408 6.697-6.762z' fill='%23545560'/%3e%3c/svg%3e");
    background-size: contain;

    &:dir(rtl) {
      transform: rotate(-270deg);
    }

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }

    @media (forced-colors: active) {
      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;

      &:dir(rtl) {
        transform: rotate(-225deg);
      }
    }

    /**
     * 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) {
        transition: none;
      }
    }
  }
}

/* Modifiers */

.gin-details__summary--accordion,
.gin-details__summary--accordion-item,
.gin-details__summary--vertical-tabs-item {
  padding-block: var(--summary-accordion-padding-vertical);
  padding-inline: 2.75rem 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.
 */

.gin-details__summary--accordion-item {
  border-radius: 0;
}

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

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

/**
 * Details summary states.
 */

[open] .gin-details__summary--accordion,
[open] .gin-details__summary--accordion-item,
[open] .gin-details__summary--vertical-tabs-item {
  color: var(--gin-color-primary);
  text-decoration-style: var(--gin-link-decoration-style);
}

.gin-details__summary:hover::before,
.gin-details__summary:hover:focus::before,
.gin-details[open] > .gin-details__summary:focus::before,
.gin-details[open] > .gin-details__summary--accordion::before,
.gin-details[open] > .gin-details__summary--accordion-item::before,
.gin-details[open] > .gin-details__summary--vertical-tabs-item::before {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath d='M5.21 1.314L3.79 2.723l5.302 5.353-5.303 5.354 1.422 1.408 6.697-6.762z' fill='%230036B1'/%3e%3c/svg%3e");
}

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

  &::before {
    transform: rotate(-90deg); /* for LTR and RTL */
  }
}

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

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

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

.gin-details__summary:hover {
  color: var(--gin-color-primary-hover);
  background-color: var(--color-bgblue-hover);
}

/**
 * Details wrapper and content.
 *
 * Accordion and accordion-item variants should have an extra background. In
 * that case, we render an additional wrapper 'gin-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.
 */

.gin-details__wrapper,
.gin-details__content {
  margin-block: var(--gin-spacing-m);
  margin-inline: calc(var(--gin-spacing-l) - var(--gin-spacing-xxs));
}

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

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

.gin-details__wrapper--accordion,
.gin-details__wrapper--accordion-item,
.gin-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: 40.0625rem) {
  .gin-details__wrapper--accordion,
  .gin-details__wrapper--accordion-item,
  .gin-details__wrapper--vertical-tabs-item {
    margin: 0;
  }

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

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

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

/* Description. */

.gin-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 */

  &.is-disabled {
    color: var(--input--disabled-fg-color);
  }
}

.gin-details__summary-summary {
  display: block;
  opacity: 0.8;
  color: var(--gin-color-text-light);
  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("data:image/svg+xml,%3csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23e00'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 0.4375rem 0.4375rem;
}

.gin-details.gin-details--package-listing,
.gin-details.module-list__module-details,
.system-status-report .gin-details {
  border: 1px solid var(--gin-border-color);
  border-radius: var(--gin-border-m);
}