_accordions.scss 599 B

1234567891011121314151617181920212223242526272829303132333435363738
  1. // Accordions
  2. .accordion {
  3. input:checked ~,
  4. &[open] {
  5. & .accordion-header {
  6. .icon {
  7. transform: rotate(90deg);
  8. }
  9. }
  10. & .accordion-body {
  11. max-height: 50rem;
  12. }
  13. }
  14. .accordion-header {
  15. display: block;
  16. padding: $unit-1 $unit-2;
  17. .icon {
  18. transition: transform .25s;
  19. }
  20. }
  21. .accordion-body {
  22. margin-bottom: $layout-spacing;
  23. max-height: 0;
  24. overflow: hidden;
  25. transition: max-height .25s;
  26. }
  27. }
  28. // Remove default details marker in Webkit
  29. summary.accordion-header {
  30. &::-webkit-details-marker {
  31. display: none;
  32. }
  33. }