details.pcss.css

/**
 * @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(--admin-space-l) + ((var(--admin-space-m) - var(--admin-space-l)) / 2));
  --summary-accordion-line-height: var(--admin-space-l);
}

.gin-details {
  display: block;
  margin-block: var(--admin-space-m);
  color: var(--admin-color-text);
  border: var(--details-border-size) solid var(--details-border-color);
  border-radius: var(--admin-radius-m);
  background-color: var(--admin-color-bg-surface);
  box-shadow: var(--details-box-shadow);

  /*
   * The inline-size / min-inline-size pair keeps the 
 element from
   * shifting 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(--admin-color-error);
  }

  .gin--dark-mode 
}

.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-start-start-radius: var(--details-border-size-radius);
    border-start-end-radius: var(--details-border-size-radius);
  }

  &:last-of-type {
    border-end-end-radius: var(--details-border-size-radius);
    border-end-start-radius: var(--details-border-size-radius);
  }
}

/**
 * Details summary styles.
 */
.gin-details__summary {
  position: relative;
  box-sizing: border-box;
  list-style: none;
  cursor: pointer;
  transition: background-color var(--details-bg-color-transition-duration) ease-in-out;
  color: var(--admin-color-text);
  border-radius: var(--size-summary-border-radius);
  background-color: transparent;
  font-weight: var(--admin-font-weight-semibold);
  line-height: var(--admin-space-m);
  padding-block: calc(var(--admin-space-l) - var(--admin-space-2xs));
  padding-inline: 2.75rem var(--admin-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: 1.125rem;
    display: inline-block;
    inline-size: var(--admin-space-m);
    block-size: var(--admin-space-m);
    margin-block-start: calc(var(--admin-space-m) / -2);
    content: "";
    transition: transform var(--details-transform-transition-duration) ease-in 0s;
    transform: rotate(90deg);
    text-align: center;
    background: var(--admin-color-text);
    mask-image: url("../../migration/media/icons/general/handle.svg");
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: 100% 100%;

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

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

    @media (forced-colors: active) {
      background-color: buttonBorder;
    }

    /**
     * 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;
      }
    }
  }

  &:hover {
    color: var(--admin-color-primary-hover);
    background-color: var(--admin-color-bg-item-hover);
  }

  &:hover::before,
  &:hover:focus::before {
    background: currentColor;

    @media (forced-colors: active) {
      background-color: linkText;
    }
  }
}

/* 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(--admin-space-l);
  background: var(--admin-color-bg-surface);
  line-height: var(--summary-accordion-line-height);

  .gin--dark-mode 
}

/**
 * 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;

  [open] > &:not(:focus, :active)::after {
    border-inline-start-width: 5px;
  }
}

.gin-details--accordion-item:first-child .gin-details__summary--accordion-item {
  border-start-start-radius: var(--details-border-size-radius);
  border-start-end-radius: var(--details-border-size-radius);
}

.gin-details--accordion-item:last-child .gin-details__summary--accordion-item {
  border-end-end-radius: var(--details-border-size-radius);
  border-end-start-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(--admin-color-primary);
  text-decoration-style: var(--admin-link-decoration-style);
}

.gin-details[open] > .gin-details__summary {
  border-start-start-radius: var(--size-summary-border-radius);
  border-start-end-radius: var(--size-summary-border-radius);
  border-end-end-radius: 0;
  border-end-start-radius: 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 {
    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);
}

/**
 * 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(--admin-space-m);
  margin-inline: calc(var(--admin-space-l) - var(--admin-space-2xs));
}

.gin-details__wrapper--accordion,
.gin-details__wrapper--accordion-item,
.gin-details__wrapper--vertical-tabs-item {
  margin: 0;
  border-block-start: 1px solid var(--admin-color-border);
  background: var(--admin-color-bg);

  &::before,
  &::after {
    display: table;
    clear: both;
    content: "";
  }

  /* @see Drupal.behaviors.verticalTabs */
  @media screen and (min-width: 641px) {
    margin: 0;
  }
}

@media screen and (min-width: 641px) {
  .js .gin-details__wrapper--vertical-tabs-item {
    margin: 0;
    border-block-start: 0;
    background-color: transparent;
  }
}

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

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

/* Description. */
.gin-details__description {
  margin-block-end: var(--admin-space-m);
  color: var(--admin-color-text-soft);
  font-size: var(--admin-font-size-xs); /* ~13px */
  line-height: calc(17rem / 16); /* 17px */
  max-inline-size: var(--admin-max-line-length);

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

.gin-details__summary-summary {
  display: block;
  opacity: 0.8;
  color: var(--admin-color-text-soft);
  font-size: var(--admin-font-size-s);
  font-weight: normal;
}

/* @todo this probably needs to be moved.  */
.required-mark::after {
  display: inline-block;
  inline-size: 0.4375rem;
  block-size: 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;
}

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