You are here

Home » API reference » Drupal 10

details.css in Drupal 10

Same filename in this branch
  1. 10 core/themes/starterkit_theme/css/components/details.css
  2. 10 core/themes/classy/css/components/details.css
  3. 10 core/themes/claro/css/components/details.css
  4. 10 core/themes/seven/css/components/details.css
  5. 10 core/themes/olivero/css/components/details.css
  6. 10 core/themes/bartik/css/classy/components/details.css
  7. 10 core/profiles/demo_umami/themes/umami/css/classy/components/details.css
Same filename and directory in other branches
  1. 9 core/themes/olivero/css/components/details.css

Collapsible details.

File

core/themes/olivero/css/components/details.css
View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

  4.  * https://www.drupal.org/node/3084859

  5.  * @preserve

  6.  */

  7. 

  8. /**

  9.  * @file

  10.  * Collapsible details.

  11.  */

  12. 

  13. /*

  14.  * Media query breakpoints.

  15.  * Processed by postcss/postcss-custom-media.

  16.  */

  17. 

  18. /* Navigation related breakpoints */

  19. 

  20. /* Grid related breakpoints */

  21. 

  22. /* Grid shifts from 6 to 14 columns. */

  23. 

  24. /* Width of the entire grid maxes out. */

  25. 

  26. :root {

  27.   --details-border-width: 1px;

  28.   --details-summary-transition: background-color 0.12s ease-in-out;

  29. }

  30. 

  31. .olivero-details {

  32.   display: block;

  33.   margin-top: var(--sp1);

  34.   margin-bottom: var(--sp1);

  35.   color: inherit;

  36.   border: var(--details-border-width) solid var(--color--gray-95);

  37.   border-radius: var(--border-radius);

  38.   box-shadow: 0 1px 4px var(--color--gray-90);

  39. }

  40. 

  41. /* Details summary styles */

  42. 

  43. [dir="ltr"] .olivero-details__summary {

  44.   padding-left: var(--sp2);

  45. }

  46. 

  47. [dir="rtl"] .olivero-details__summary {

  48.   padding-right: var(--sp2);

  49. }

  50. 

  51. [dir="ltr"] .olivero-details__summary {

  52.   padding-right: var(--sp1);

  53. }

  54. 

  55. [dir="rtl"] .olivero-details__summary {

  56.   padding-left: var(--sp1);

  57. }

  58. 

  59. .olivero-details__summary {

  60.   position: relative;

  61.   padding-top: var(--sp1);

  62.   padding-bottom: var(--sp1);

  63.   list-style: none;

  64.   cursor: pointer;

  65.   transition: var(--details-summary-transition);

  66.   word-wrap: break-word;

  67.   -webkit-hyphens: auto;

  68.   hyphens: auto;

  69.   color: inherit;

  70.   background-color: var(--color--gray-100);

  71.   font-size: var(--line-height-s);

  72.   font-weight: 700;

  73.   line-height: var(--sp1);

  74. }

  75. 

  76. /* Arrow icon */

  77. 

  78. [dir="ltr"] .olivero-details__summary:before,[dir="ltr"] 

  79. .collapse-processed > .olivero-details__summary .details-title:before {

  80.   left: var(--sp0-75);

  81. }

  82. 

  83. [dir="rtl"] .olivero-details__summary:before,[dir="rtl"] 

  84. .collapse-processed > .olivero-details__summary .details-title:before {

  85.   right: var(--sp0-75);

  86. }

  87. 

  88. .olivero-details__summary:before,

  89. .collapse-processed > .olivero-details__summary .details-title:before {

  90.   position: absolute;

  91.   top: 50%;

  92.   display: block;

  93.   width: 0.625rem;

  94.   height: 0.625rem;

  95.   content: "";

  96.   transform: translateY(-50%) rotate(45deg); /* LTR */

  97.   border-top: solid 2px currentColor;

  98.   border-right: solid 2px currentColor;

  99. }

  100. 

  101. [dir="rtl"] .olivero-details__summary:before,

  102.   [dir="rtl"] .collapse-processed > .olivero-details__summary .details-title:before {

  103.     transform: translateY(-50%) rotate(-135deg);

  104.   }

  105. 

  106. /* Pseudo-selector to manage focus styles */

  107. 

  108. .olivero-details__summary:after,

  109. .collapse-processed > .olivero-details__summary .details-title:after {

  110.   position: absolute;

  111.   top: calc(var(--details-border-width) * -1);

  112.   right: calc(var(--details-border-width) * -1);

  113.   bottom: calc(var(--details-border-width) * -1);

  114.   left: calc(var(--details-border-width) * -1);

  115.   content: "";

  116.   pointer-events: none;

  117.   opacity: 0;

  118.   border-radius: var(--border-radius);

  119.   box-shadow: inset 0 0 0 2px var(--color--primary-60);

  120. }

  121. 

  122. /* Hide the marker */

  123. 

  124. .olivero-details__summary::-webkit-details-marker {

  125.   display: none;

  126. }

  127. 

  128. /* Disable default outline for summary, since we have own implementation */

  129. 

  130. .olivero-details__summary:focus {

  131.   outline: solid 2px transparent;

  132.   outline-offset: -4px;

  133. }

  134. 

  135. /* Details summary, hover state */

  136. 

  137. .olivero-details__summary:hover {

  138.   background-color: var(--color--gray-95);

  139. }

  140. 

  141. /* Details summary, focus and active states */

  142. 

  143. .olivero-details__summary:focus:after,

  144. .olivero-details__summary:active:after,

  145. .collapse-processed > .olivero-details__summary .details-title:focus:after,

  146. .collapse-processed > .olivero-details__summary .details-title:active:after {

  147.   opacity: 1;

  148. }

  149. 

  150. /* Rotate arrow icon of the details summary, when details expanded */

  151. 

  152. .olivero-details[open] > .olivero-details__summary::before,

  153. .collapse-processed[open] > .olivero-details__summary .details-title::before {

  154.   margin-top: -2px;

  155.   transform: translateY(-50%) rotate(135deg);

  156. }

  157. 

  158. /* Collapse processed for non-supporting browsers like IE or Edge */

  159. 

  160. [dir="ltr"] .collapse-processed > .olivero-details__summary {

  161.   padding-left: 0;

  162. }

  163. 

  164. [dir="rtl"] .collapse-processed > .olivero-details__summary {

  165.   padding-right: 0;

  166. }

  167. 

  168. [dir="ltr"] .collapse-processed > .olivero-details__summary {

  169.   padding-right: 0;

  170. }

  171. 

  172. [dir="rtl"] .collapse-processed > .olivero-details__summary {

  173.   padding-left: 0;

  174. }

  175. 

  176. .collapse-processed > .olivero-details__summary {

  177.   padding-top: 0;

  178.   padding-bottom: 0

  179. }

  180. 

  181. .collapse-processed > .olivero-details__summary:before {

  182.     content: none;

  183.   }

  184. 

  185. .collapse-processed > .olivero-details__summary:after {

  186.     content: none;

  187.   }

  188. 

  189. [dir="ltr"] .collapse-processed > .olivero-details__summary .details-title {

  190.   padding-left: var(--sp2);

  191. }

  192. 

  193. [dir="rtl"] .collapse-processed > .olivero-details__summary .details-title {

  194.   padding-right: var(--sp2);

  195. }

  196. 

  197. [dir="ltr"] .collapse-processed > .olivero-details__summary .details-title {

  198.   padding-right: var(--sp1);

  199. }

  200. 

  201. [dir="rtl"] .collapse-processed > .olivero-details__summary .details-title {

  202.   padding-left: var(--sp1);

  203. }

  204. 

  205. .collapse-processed > .olivero-details__summary .details-title {

  206.   position: relative;

  207.   display: block;

  208.   padding-top: var(--sp1);

  209.   padding-bottom: var(--sp1);

  210.   transition: var(--details-summary-transition);

  211.   text-decoration: none;

  212.   color: inherit;

  213.   background-color: var(--color--gray-100);

  214. }

  215. 

  216. .collapse-processed > .olivero-details__summary .details-title:focus {

  217.   outline: solid 2px transparent;

  218. }

  219. 

  220. .collapse-processed > .olivero-details__summary .details-title:hover {

  221.   background-color: var(--color--gray-95);

  222. }

  223. 

  224. @media screen and (-ms-high-contrast: active) {

  225.   .collapse-processed > .olivero-details__summary .details-title::after {

  226.     top: -0.3125rem;

  227.     right: -0.3125rem;

  228.     bottom: -0.3125rem;

  229.     left: -0.3125rem;

  230.     border: 2px dotted;

  231.   }

  232. }

  233. 

  234. /* Details content wrapper */

  235. 

  236. .olivero-details__wrapper {

  237.   margin: var(--sp1)

  238. }

  239. 

  240. @media (min-width: 62.5rem) {

  241. 

  242. [dir="ltr"] .olivero-details__wrapper {

  243.     margin-left: var(--sp2);

  244.   }

  245. 

  246. [dir="rtl"] .olivero-details__wrapper {

  247.     margin-right: var(--sp2);

  248.   }

  249. 

  250. [dir="ltr"] .olivero-details__wrapper {

  251.     margin-right: var(--sp2);

  252.   }

  253. 

  254. [dir="rtl"] .olivero-details__wrapper {

  255.     margin-left: var(--sp2);

  256.   }

  257. 

  258. .olivero-details__wrapper {

  259.     margin-top: var(--sp1-5);

  260.     margin-bottom: var(--sp1-5)

  261. }

  262.   }

  263. 

  264. /* Description */

  265. 

  266. .olivero-details__description {

  267.   margin-bottom: var(--sp1);

  268.   color: var(--color-text-neutral-medium);

  269.   font-size: var(--font-size-xs);

  270.   line-height: var(--line-height-s);

  271. }