[web] Add collapsible info to ODC (#30164)

* Add collapsible info in ODC

* Remove transition effects on caret

* Update summary focus-visible style

Make it inline-block so the clickable part doesn't go out of bounds.
Update outline style.

* Make the caret orientation consistent with Figma and Dashboard

* Remove extra padding

* Make `summary` styled like ds btn-tertiary

See https://www.figma.com/design/qHqSob0u4b4h1i2ModSTLn/CIAM---Phase-01?node-id=2285-20806&t=AlQIeoQEd2kG2h2M-0

GitOrigin-RevId: 9a49efe68088ea4969a803ffaa1c981c5a7ed7bb
This commit is contained in:
Antoine Clausse
2025-12-09 09:05:40 +00:00
committed by Copybot
parent 6eefe6dda4
commit 567c81054a
@@ -29,3 +29,26 @@
.ciam-used-latex-options {
padding-bottom: var(--ds-spacing-200);
}
details.ciam-onboarding-privacy {
summary {
padding: var(--ds-spacing-100) var(--ds-spacing-200);
@extend .btn, .btn-ds, .btn-tertiary;
svg {
margin-left: var(--ds-spacing-200);
color: var(--ds-color-text-secondary);
&.flip {
transform: rotate(180deg);
}
}
}
.ciam-onboarding-collapse-content {
margin: var(--ds-spacing-200) var(--ds-spacing-200) var(--ds-spacing-500);
@include ds-body-sm-regular;
}
}