1/** 2 * @file 3 * Collapsible details. 4 */ 5 6@import "../base/variables.pcss.css"; 7 8:root { 9 --details-border-width: 1px; 10 --details-summary-transition: background-color 0.12s ease-in-out; 11} 12 13.olivero-details { 14 display: block; 15 margin-block: var(--sp1); 16 color: inherit; 17 border: var(--details-border-width) solid var(--color--gray-80); 18 border-radius: var(--border-radius); 19 box-shadow: 0 1px 4px var(--color--gray-70); 20} 21 22/* Details summary styles */ 23.olivero-details__summary { 24 position: relative; 25 padding-block: var(--sp1); 26 padding-inline-start: var(--sp2); 27 padding-inline-end: var(--sp1); 28 list-style: none; 29 cursor: pointer; 30 transition: var(--details-summary-transition); 31 word-wrap: break-word; 32 hyphens: auto; 33 color: inherit; 34 background-color: var(--color--gray-95); 35 font-size: var(--line-height-s); 36 font-weight: 700; 37 line-height: var(--sp1); 38} 39 40/* Arrow icon */ 41.olivero-details__summary:before, 42.collapse-processed > .olivero-details__summary .details-title:before { 43 position: absolute; 44 inset-block-start: 50%; 45 inset-inline-start: var(--sp0-75); 46 display: block; 47 width: 10px; 48 height: 10px; 49 content: ""; 50 transform: translateY(-50%) rotate(45deg); /* LTR */ 51 border-top: solid 2px currentColor; 52 border-right: solid 2px currentColor; 53} 54 55[dir="rtl"] { 56 & .olivero-details__summary:before, 57 & .collapse-processed > .olivero-details__summary .details-title:before { 58 transform: translateY(-50%) rotate(-135deg); 59 } 60} 61 62/* Pseudo-selector to manage focus styles */ 63.olivero-details__summary:after, 64.collapse-processed > .olivero-details__summary .details-title:after { 65 position: absolute; 66 inset: calc(var(--details-border-width) * -1); 67 content: ""; 68 pointer-events: none; 69 opacity: 0; 70 border-radius: var(--border-radius); 71 box-shadow: inset 0 0 0 2px var(--color--blue-70); 72} 73 74/* Hide the marker */ 75.olivero-details__summary::-webkit-details-marker { 76 display: none; 77} 78 79/* Disable default outline for summary, since we have own implementation */ 80.olivero-details__summary:focus { 81 outline: solid 2px transparent; 82 outline-offset: -4px; 83} 84 85/* Details summary, hover state */ 86.olivero-details__summary:hover { 87 background-color: var(--color--gray-80); 88} 89 90/* Details summary, focus and active states */ 91.olivero-details__summary:focus:after, 92.olivero-details__summary:active:after, 93.collapse-processed > .olivero-details__summary .details-title:focus:after, 94.collapse-processed > .olivero-details__summary .details-title:active:after { 95 opacity: 1; 96} 97 98/* Rotate arrow icon of the details summary, when details expanded */ 99.olivero-details[open] > .olivero-details__summary::before, 100.collapse-processed[open] > .olivero-details__summary .details-title::before { 101 margin-block-start: -2px; 102 transform: translateY(-50%) rotate(135deg); 103} 104 105/* Collapse processed for non-supporting browsers like IE or Edge */ 106.collapse-processed > .olivero-details__summary { 107 padding-block: 0; 108 padding-inline-start: 0; 109 padding-inline-end: 0; 110 111 &:before { 112 content: none; 113 } 114 115 &:after { 116 content: none; 117 } 118} 119 120.collapse-processed > .olivero-details__summary .details-title { 121 position: relative; 122 display: block; 123 padding-block: var(--sp1); 124 padding-inline-start: var(--sp2); 125 padding-inline-end: var(--sp1); 126 transition: var(--details-summary-transition); 127 text-decoration: none; 128 color: inherit; 129 background-color: var(--color--gray-95); 130} 131 132.collapse-processed > .olivero-details__summary .details-title:focus { 133 outline: solid 2px transparent; 134} 135 136.collapse-processed > .olivero-details__summary .details-title:hover { 137 background-color: var(--color--gray-80); 138} 139 140@media screen and (-ms-high-contrast: active) { 141 .collapse-processed > .olivero-details__summary .details-title::after { 142 inset: -5px; 143 border: 2px dotted; 144 } 145} 146 147/* Details content wrapper */ 148.olivero-details__wrapper { 149 margin: var(--sp1); 150 151 @media (--lg) { 152 margin-block-start: var(--sp1-5); 153 margin-block-end: var(--sp1-5); 154 margin-inline-start: var(--sp2); 155 margin-inline-end: var(--sp2); 156 } 157} 158 159/* Description */ 160.olivero-details__description { 161 margin-block-end: var(--sp1); 162 color: var(--color--gray-10); 163 font-size: var(--font-size-xs); 164 line-height: var(--line-height-s); 165} 166