587 lines
17 KiB
CSS
587 lines
17 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.
|
|
*/
|
|
|
|
.claro-details {
|
|
display: block;
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
color: #222330;
|
|
border: 1px solid #dedfe4;
|
|
border-radius: 2px;
|
|
background-color: #fff;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.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: 2px;
|
|
border-top-right-radius: 2px;
|
|
}
|
|
|
|
.claro-details--accordion-item:last-of-type {
|
|
border-bottom-right-radius: 2px;
|
|
border-bottom-left-radius: 2px;
|
|
}
|
|
|
|
/**
|
|
* Details summary styles.
|
|
*/
|
|
|
|
.claro-details__summary {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
padding: 1rem 1rem 1rem 2.25rem; /* LTR */
|
|
list-style: none;
|
|
cursor: pointer;
|
|
transition: background-color 0.12s ease-in-out;
|
|
word-wrap: break-word;
|
|
-webkit-hyphens: auto;
|
|
-ms-hyphens: auto;
|
|
hyphens: auto;
|
|
color: #545560;
|
|
border-radius: 1px;
|
|
background-color: transparent;
|
|
line-height: 1rem;
|
|
}
|
|
|
|
[dir="rtl"] .claro-details__summary {
|
|
padding-right: 2.25rem;
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
/* Modifiers */
|
|
|
|
.claro-details__summary--accordion,
|
|
.claro-details__summary--accordion-item,
|
|
.claro-details__summary--vertical-tabs-item {
|
|
padding: 1.25rem 1.5rem 1.25rem 2.25rem; /* LTR */
|
|
background: #fff;
|
|
line-height: 1.5rem;
|
|
}
|
|
|
|
[dir="rtl"] .claro-details__summary--accordion,
|
|
[dir="rtl"] .claro-details__summary--accordion-item,
|
|
[dir="rtl"] .claro-details__summary--vertical-tabs-item {
|
|
padding-right: 2.25rem;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
/**
|
|
* 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: 2px;
|
|
border-top-right-radius: 2px;
|
|
}
|
|
|
|
.claro-details--accordion-item:last-child .claro-details__summary--accordion-item {
|
|
border-bottom-right-radius: 2px;
|
|
border-bottom-left-radius: 2px;
|
|
}
|
|
|
|
/**
|
|
* 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: 0.75rem; /* LTR */
|
|
display: inline-block;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
margin-top: -0.5rem;
|
|
content: "";
|
|
transition: transform 0.12s 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: 0.75rem;
|
|
left: auto;
|
|
transform: rotate(-270deg);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.claro-details__summary::before {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
@media screen and (-ms-high-contrast: active) {
|
|
.claro-details__summary::before {
|
|
width: 0.5625rem;
|
|
height: 0.5625rem;
|
|
transition: transform 0.12s ease-in 0s, margin 0.12s ease-in 0s;
|
|
transform: rotate(135deg); /* LTR */
|
|
border: 0.125rem solid;
|
|
border-bottom-color: transparent;
|
|
border-left-color: transparent;
|
|
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 (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 0.2s ease-in-out;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
border-radius: 2px;
|
|
box-shadow: inset 0 0 0 3px #26a769;
|
|
}
|
|
|
|
.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: 2px;
|
|
border-top-right-radius: 2px;
|
|
}
|
|
|
|
.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: 2px;
|
|
border-bottom-left-radius: 2px;
|
|
}
|
|
|
|
/**
|
|
* 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: #003cc5;
|
|
}
|
|
|
|
.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: 1px 1px 0 0;
|
|
}
|
|
|
|
.claro-details[open] > .claro-details__summary::before {
|
|
transform: rotate(-90deg); /* for LTR and RTL */
|
|
}
|
|
|
|
@media screen and (-ms-high-contrast: 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: -0.0625rem;
|
|
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: #003cc5;
|
|
background-color: #f0f5fd;
|
|
}
|
|
|
|
/**
|
|
* Focus styles.
|
|
*/
|
|
|
|
/**
|
|
* Active has to be here for Firefox.
|
|
* Merges standard collapse-processed selectors.
|
|
*/
|
|
|
|
[open] > .claro-details__summary--accordion:not(:focus):not(:active)::after,
|
|
[open] > .claro-details__summary--accordion-item:not(:focus):not(:active)::after,
|
|
.collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
|
|
.collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
|
|
[open] > .claro-details__summary--vertical-tabs-item:not(:focus):not(:active)::after,
|
|
.collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
|
|
opacity: 1;
|
|
border: 3px solid #003cc5;
|
|
border-width: 0 0 0 3px; /* 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"] .collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
|
|
[dir="rtl"] .collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
|
|
[dir="rtl"] [open] > .claro-details__summary--vertical-tabs-item:not(:focus)::after,
|
|
[dir="rtl"] .collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
|
|
border-width: 0 3px 0 0;
|
|
}
|
|
|
|
.claro-details__summary:focus::after,
|
|
.claro-details__summary:active::after,
|
|
.collapse-processed > .claro-details__summary .details-title:focus::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: #003cc5;
|
|
}
|
|
|
|
/**
|
|
* 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: 1rem;
|
|
}
|
|
|
|
.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: 1px solid #dedfe4;
|
|
background-color: rgba(243, 244, 249, 0.4);
|
|
}
|
|
|
|
@media screen and (min-width: 48em) {
|
|
.claro-details__wrapper {
|
|
margin: 1.5rem 2.25rem;
|
|
}
|
|
|
|
.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: 1rem 1rem 1.5rem;
|
|
}
|
|
|
|
@media screen and (min-width: 85em) {
|
|
.vertical-tabs .claro-details__content--vertical-tabs-item {
|
|
margin: 1.5rem;
|
|
}
|
|
}
|
|
|
|
/* Description. */
|
|
|
|
.claro-details__description {
|
|
margin-bottom: 1rem;
|
|
color: #545560;
|
|
font-size: 0.79rem; /* ~13px */
|
|
line-height: 1.0625rem; /* 17px */
|
|
}
|
|
|
|
.claro-details__description.is-disabled {
|
|
color: #82828c;
|
|
}
|
|
|
|
/**
|
|
* Collapse processed for non-supporting browsers like IE or Edge.
|
|
*/
|
|
|
|
.collapse-processed > .claro-details__summary {
|
|
padding: 0;
|
|
}
|
|
|
|
.collapse-processed > .claro-details__summary::after {
|
|
content: none;
|
|
}
|
|
|
|
.collapse-processed > .claro-details__summary .details-title {
|
|
position: relative;
|
|
display: block;
|
|
padding: 1rem 1rem 1rem 2.25rem; /* LTR */
|
|
text-decoration: none;
|
|
color: inherit;
|
|
border-radius: 1px;
|
|
}
|
|
|
|
[dir="rtl"] .collapse-processed > .claro-details__summary .details-title {
|
|
padding-right: 2.25rem;
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.collapse-processed > .claro-details__summary--accordion .details-title,
|
|
.collapse-processed > .claro-details__summary--accordion-item .details-title,
|
|
.collapse-processed > .claro-details__summary--vertical-tabs-item .details-title {
|
|
padding: 1.25rem 1.5rem 1.25rem 2.25rem; /* LTR */
|
|
}
|
|
|
|
[dir="rtl"] .collapse-processed > .claro-details__summary--accordion .details-title,
|
|
[dir="rtl"] .collapse-processed > .claro-details__summary--accordion-item .details-title,
|
|
[dir="rtl"] .collapse-processed > .claro-details__summary--vertical-tabs-item .details-title {
|
|
padding-right: 2.25rem;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
/* Focus and hover states. */
|
|
|
|
.collapse-processed > .claro-details__summary .details-title:focus,
|
|
.collapse-processed > .claro-details__summary .details-title:hover {
|
|
z-index: 1;
|
|
text-decoration: none;
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.collapse-processed > .claro-details__summary .details-title::after {
|
|
position: absolute;
|
|
top: -1px;
|
|
right: -1px;
|
|
bottom: -1px;
|
|
left: -1px;
|
|
content: "";
|
|
transition: opacity 0.2s ease-in-out;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
border: 3px solid #26a769;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.collapse-processed > .claro-details__summary .details-title:focus::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Accordion item modifiers for the focus box. */
|
|
|
|
.collapse-processed > .claro-details__summary--accordion-item .details-title::after,
|
|
.vertical-tabs__item > .claro-details__summary--vertical-tabs-item .details-title::after {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.collapse-processed:first-child > .claro-details__summary--accordion-item .details-title::after,
|
|
.vertical-tabs__item--first > .claro-details__summary--vertical-tabs-item .details-title::after {
|
|
border-top-left-radius: 2px;
|
|
border-top-right-radius: 2px;
|
|
}
|
|
|
|
.collapse-processed:last-child > .claro-details__summary--accordion-item .details-title::after,
|
|
.vertical-tabs__item--last > .claro-details__summary--vertical-tabs-item .details-title::after {
|
|
border-bottom-right-radius: 2px;
|
|
border-bottom-left-radius: 2px;
|
|
}
|
|
|
|
.collapse-processed[open] > .claro-details__summary--accordion .details-title::after,
|
|
.collapse-processed[open] > .claro-details__summary--accordion-item .details-title::after,
|
|
.vertical-tabs__item[open] > .claro-details__summary--vertical-tabs-item .details-title::after {
|
|
border-bottom-right-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
.claro-details__summary-summary {
|
|
display: block;
|
|
color: #545560;
|
|
font-size: 0.889rem;
|
|
font-weight: normal;
|
|
}
|
|
|
|
@media screen and (-ms-high-contrast: active) {
|
|
.collapse-processed[open] > .claro-details__summary--accordion .details-title:not(:focus)::after,
|
|
.collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
|
|
.collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
|
|
top: -1px;
|
|
right: -1px;
|
|
bottom: -1px;
|
|
left: -1px;
|
|
}
|
|
.collapse-processed > .claro-details__summary .details-title::after {
|
|
top: -0.3125rem;
|
|
right: -0.3125rem;
|
|
bottom: -0.3125rem;
|
|
left: -0.3125rem;
|
|
border: 2px dotted;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|