accordion.pcss.css

Same filename in other branches
  1. 9 core/themes/claro/css/components/accordion.pcss.css
  2. 10 core/themes/claro/css/components/accordion.pcss.css
  3. 11.x core/themes/claro/css/components/accordion.pcss.css

Accordion styles.

File

core/themes/claro/css/components/accordion.pcss.css

View source
  1. /**
  2. * @file
  3. * Accordion styles.
  4. */
  5. @import "../base/variables.pcss.css";
  6. .accordion {
  7. color: var(--color-text);
  8. border: var(--details-border-size) solid var(--details-border-color);
  9. border-radius: var(--details-accordion-border-size-radius);
  10. background-color: var(--color-white);
  11. box-shadow: var(--details-box-shadow);
  12. }
  13. .accordion__item {
  14. margin: 0 -1px;
  15. border-radius: 0;
  16. }
  17. .accordion__item:first-child {
  18. margin-top: -1px;
  19. border-top-left-radius: var(--details-accordion-border-size-radius);
  20. border-top-right-radius: var(--details-accordion-border-size-radius);
  21. }
  22. .accordion__item + .accordion__item {
  23. margin-top: -1px;
  24. }
  25. .accordion__item:last-child {
  26. margin-bottom: -1px;
  27. border-bottom-right-radius: var(--details-accordion-border-size-radius);
  28. border-bottom-left-radius: var(--details-accordion-border-size-radius);
  29. }
  30. /**
  31. * Hide JS summary from the details polyfill to make it consistent with native
  32. * details elements.
  33. *
  34. * @todo Consider removing this after https://www.drupal.org/node/2493957 has
  35. * been solved.
  36. */
  37. .accordion__item .claro-details__summary .summary {
  38. display: none;
  39. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.