You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
183 lines
3.6 KiB
183 lines
3.6 KiB
/* |
|
* DO NOT EDIT THIS FILE. |
|
* See the following change record for more information, |
|
* https://www.drupal.org/node/3084859 |
|
* @preserve |
|
*/ |
|
|
|
/** |
|
* @file |
|
* Collapsible details. |
|
*/ |
|
|
|
/* |
|
* Media query breakpoints. |
|
* Processed by postcss/postcss-custom-media. |
|
*/ |
|
|
|
/* Navigation related breakpoints */ |
|
|
|
/* Grid related breakpoints */ |
|
|
|
/* Grid shifts from 6 to 14 columns. */ |
|
|
|
/* Width of the entire grid maxes out. */ |
|
|
|
.olivera-details { |
|
display: block; |
|
margin-top: var(--sp1); |
|
margin-bottom: var(--sp1); |
|
color: inherit; |
|
border: 1px solid var(--color--gray-95); |
|
border-radius: var(--border-radius); |
|
box-shadow: 0 1px 4px var(--color--gray-90); |
|
} |
|
|
|
/* Details summary styles */ |
|
|
|
[dir="ltr"] .olivera-details__summary { |
|
padding-left: var(--sp2); |
|
} |
|
|
|
[dir="rtl"] .olivera-details__summary { |
|
padding-right: var(--sp2); |
|
} |
|
|
|
[dir="ltr"] .olivera-details__summary { |
|
padding-right: var(--sp1); |
|
} |
|
|
|
[dir="rtl"] .olivera-details__summary { |
|
padding-left: var(--sp1); |
|
} |
|
|
|
.olivera-details__summary { |
|
position: relative; |
|
padding-top: var(--sp1); |
|
padding-bottom: var(--sp1); |
|
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: inherit; |
|
background-color: var(--color--gray-100); |
|
font-size: var(--line-height-s); |
|
font-weight: 700; |
|
line-height: var(--sp1); |
|
} |
|
|
|
/* Arrow icon */ |
|
|
|
[dir="ltr"] .olivera-details__summary::before { |
|
left: var(--sp0-75); |
|
} |
|
|
|
[dir="rtl"] .olivera-details__summary::before { |
|
right: var(--sp0-75); |
|
} |
|
|
|
.olivera-details__summary::before { |
|
position: absolute; |
|
top: 50%; |
|
display: block; |
|
width: 0.625rem; |
|
height: 0.625rem; |
|
content: ""; |
|
transform: translateY(-50%) rotate(45deg); /* LTR */ |
|
border-top: solid 2px currentColor; |
|
border-right: solid 2px currentColor; |
|
} |
|
|
|
[dir="rtl"] .olivera-details__summary::before { |
|
transform: translateY(-50%) rotate(-135deg); |
|
} |
|
|
|
/* Pseudo-selector to manage focus styles */ |
|
|
|
.olivera-details__summary::after { |
|
position: absolute; |
|
top: -1px; |
|
right: -1px; |
|
bottom: -1px; |
|
left: -1px; |
|
content: ""; |
|
pointer-events: none; |
|
opacity: 0; |
|
border-radius: var(--border-radius); |
|
box-shadow: inset 0 0 0 2px var(--color--primary-60); |
|
} |
|
|
|
/* Hide the marker */ |
|
|
|
.olivera-details__summary::-webkit-details-marker { |
|
display: none; |
|
} |
|
|
|
/* Disable default outline for summary, since we have own implementation */ |
|
|
|
.olivera-details__summary:focus { |
|
outline: solid 2px transparent; |
|
outline-offset: -4px; |
|
} |
|
|
|
/* Details summary, hover state */ |
|
|
|
.olivera-details__summary:hover { |
|
background-color: var(--color--gray-95); |
|
} |
|
|
|
/* Details summary, focus and active states */ |
|
|
|
.olivera-details__summary:focus::after, |
|
.olivera-details__summary:active::after { |
|
opacity: 1; |
|
} |
|
|
|
/* Rotate arrow icon of the details summary, when details expanded */ |
|
|
|
.olivera-details[open] > .olivera-details__summary::before { |
|
margin-top: -2px; |
|
transform: translateY(-50%) rotate(135deg); |
|
} |
|
|
|
/* Details content wrapper */ |
|
|
|
.olivera-details__wrapper { |
|
margin: var(--sp1) |
|
} |
|
|
|
@media (min-width: 62.5rem) { |
|
|
|
[dir="ltr"] .olivera-details__wrapper { |
|
margin-left: var(--sp2); |
|
} |
|
|
|
[dir="rtl"] .olivera-details__wrapper { |
|
margin-right: var(--sp2); |
|
} |
|
|
|
[dir="ltr"] .olivera-details__wrapper { |
|
margin-right: var(--sp2); |
|
} |
|
|
|
[dir="rtl"] .olivera-details__wrapper { |
|
margin-left: var(--sp2); |
|
} |
|
|
|
.olivera-details__wrapper { |
|
margin-top: var(--sp1-5); |
|
margin-bottom: var(--sp1-5) |
|
} |
|
} |
|
|
|
/* Description */ |
|
|
|
.olivera-details__description { |
|
margin-bottom: var(--sp1); |
|
color: var(--color-text-neutral-medium); |
|
font-size: var(--font-size-xs); |
|
line-height: var(--line-height-s); |
|
}
|
|
|