clone of olivero for island lives
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.

116 lines
2.7 KiB

10 months ago
/**
* @file
* Collapsible details.
*/
@import "../base/media-queries.pcss.css";
:root {
--details-border-width: 1px;
--details-summary-transition: background-color 0.12s ease-in-out;
}
.olives-details {
display: block;
margin-block: var(--sp1);
color: inherit;
border: var(--details-border-width) solid var(--color--gray-95);
border-radius: var(--border-radius);
box-shadow: 0 1px 4px var(--color--gray-90);
}
/* Details summary styles */
.olives-details__summary {
position: relative;
padding-block: var(--sp1);
padding-inline-start: var(--sp2);
padding-inline-end: var(--sp1);
list-style: none;
cursor: pointer;
transition: var(--details-summary-transition);
word-wrap: break-word;
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 */
.olives-details__summary::before {
position: absolute;
inset-block-start: 50%;
inset-inline-start: var(--sp0-75);
display: block;
width: 10px;
height: 10px;
content: "";
transform: translateY(-50%) rotate(45deg); /* LTR */
border-top: solid 2px currentColor;
border-right: solid 2px currentColor;
}
[dir="rtl"] .olives-details__summary::before {
transform: translateY(-50%) rotate(-135deg);
}
/* Pseudo-selector to manage focus styles */
.olives-details__summary::after {
position: absolute;
inset: calc(var(--details-border-width) * -1);
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 */
.olives-details__summary::-webkit-details-marker {
display: none;
}
/* Disable default outline for summary, since we have own implementation */
.olives-details__summary:focus {
outline: solid 2px transparent;
outline-offset: -4px;
}
/* Details summary, hover state */
.olives-details__summary:hover {
background-color: var(--color--gray-95);
}
/* Details summary, focus and active states */
.olives-details__summary:focus::after,
.olives-details__summary:active::after {
opacity: 1;
}
/* Rotate arrow icon of the details summary, when details expanded */
.olives-details[open] > .olives-details__summary::before {
margin-block-start: -2px;
transform: translateY(-50%) rotate(135deg);
}
/* Details content wrapper */
.olives-details__wrapper {
margin: var(--sp1);
@media (--lg) {
margin-block-start: var(--sp1-5);
margin-block-end: var(--sp1-5);
margin-inline-start: var(--sp2);
margin-inline-end: var(--sp2);
}
}
/* Description */
.olives-details__description {
margin-block-end: var(--sp1);
color: var(--color-text-neutral-medium);
font-size: var(--font-size-xs);
line-height: var(--line-height-s);
}