484 lines
15 KiB
CSS
484 lines
15 KiB
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:
|
|
* - .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-top: var(--space-m);
|
|
margin-bottom: 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 <details> 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 .claro-details {
|
|
width: min-content;
|
|
min-width: 100%;
|
|
}
|
|
|
|
.claro-details--accordion-item,
|
|
.claro-details--vertical-tabs-item {
|
|
margin-top: 0;
|
|
margin-bottom: 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: var(--space-m) var(--space-m) var(--space-m) var(--details-desktop-wrapper-padding-start); /* LTR */
|
|
list-style: none;
|
|
cursor: pointer;
|
|
transition: background-color var(--details-bg-color-transition-duration) ease-in-out;
|
|
word-wrap: break-word;
|
|
-webkit-hyphens: auto;
|
|
hyphens: auto;
|
|
color: var(--color-gray-800);
|
|
border-radius: var(--size-summary-border-radius);
|
|
background-color: transparent;
|
|
line-height: var(--space-m);
|
|
}
|
|
|
|
[dir="rtl"] .claro-details__summary {
|
|
padding-right: var(--details-desktop-wrapper-padding-start);
|
|
padding-left: var(--space-m);
|
|
}
|
|
|
|
/* Modifiers */
|
|
|
|
.claro-details__summary--accordion,
|
|
.claro-details__summary--accordion-item,
|
|
.claro-details__summary--vertical-tabs-item {
|
|
padding: var(--summary-accordion-padding-vertical) var(--space-l) var(--summary-accordion-padding-vertical) var(--details-desktop-wrapper-padding-start); /* LTR */
|
|
background: var(--color-white);
|
|
line-height: var(--summary-accordion-line-height);
|
|
}
|
|
|
|
[dir="rtl"] .claro-details__summary--accordion,
|
|
[dir="rtl"] .claro-details__summary--accordion-item,
|
|
[dir="rtl"] .claro-details__summary--vertical-tabs-item {
|
|
padding-right: var(--details-desktop-wrapper-padding-start);
|
|
padding-left: var(--space-l);
|
|
}
|
|
|
|
/**
|
|
* 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;
|
|
top: 50%;
|
|
left: var(--space-s); /* LTR */
|
|
display: inline-block;
|
|
width: var(--space-m);
|
|
height: var(--space-m);
|
|
margin-top: calc(var(--space-m) / -2);
|
|
content: "";
|
|
transition: transform var(--details-transform-transition-duration) ease-in 0s;
|
|
transform: rotate(90deg); /* LTR */
|
|
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"] .claro-details__summary::before {
|
|
right: var(--space-s);
|
|
left: auto;
|
|
transform: rotate(-270deg);
|
|
}
|
|
|
|
@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-top: 0.125rem solid;
|
|
border-right: 0.125rem solid;
|
|
background: none;
|
|
}
|
|
|
|
[dir="rtl"] .claro-details__summary::before {
|
|
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 (-webkit-min-device-pixel-ratio: 0), 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;
|
|
top: -1px;
|
|
right: -1px;
|
|
bottom: -1px;
|
|
left: -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("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");
|
|
}
|
|
|
|
.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 {
|
|
background: none;
|
|
}
|
|
|
|
.claro-details[open] > .claro-details__summary::before,
|
|
[dir="rtl"] .claro-details[open] > .claro-details__summary::before {
|
|
margin-top: calc(0.125rem / -2);
|
|
margin-right: 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: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
[dir="rtl"] [open] > .claro-details__summary--accordion:not(:focus)::after,
|
|
[dir="rtl"] [open] > .claro-details__summary--accordion-item:not(:focus)::after,
|
|
[dir="rtl"] [open] > .claro-details__summary--vertical-tabs-item:not(:focus)::after {
|
|
border-width: 0 var(--details-summary-focus-border-size) 0 0;
|
|
}
|
|
|
|
.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 (-webkit-min-device-pixel-ratio: 0), 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);
|
|
}
|
|
|
|
@media screen and (min-width: 48em) {
|
|
.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;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 85em) {
|
|
.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-bottom: 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-right: 0.3em;
|
|
margin-left: 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;
|
|
}
|