javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 18:54:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(accordion): improve functionality with nested accordions (#24302)

Browse Source
This commit is contained in:
Liam DeBeasi
2021-12-06 10:28:10 -05:00
committed by GitHub
parent 8bdcd3c6c9
commit 0920797612
7 changed files with 230 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
core/src/css/core.scss
View File

@ -274,19 +274,19 @@ ion-card-header.ion-color .ion-inherit-color {
}
// Accordion Styles
ion-accordion-group.accordion-group-expand-inset ion-accordion:first-of-type {
ion-accordion-group.accordion-group-expand-inset > ion-accordion:first-of-type {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
ion-accordion-group.accordion-group-expand-inset ion-accordion:last-of-type {
ion-accordion-group.accordion-group-expand-inset > ion-accordion:last-of-type {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
ion-accordion-group ion-accordion:last-of-type ion-item {
ion-accordion-group > ion-accordion:last-of-type ion-item {
--border-width: 0px;
}
ion-accordion.accordion-animated .ion-accordion-toggle-icon {
ion-accordion.accordion-animated > [slot="header"] .ion-accordion-toggle-icon {
transition: 300ms transform cubic-bezier(0.25, 0.8, 0.5, 1);
}
@ -296,18 +296,24 @@ ion-accordion.accordion-animated .ion-accordion-toggle-icon {
transition: none !important;
}
}
ion-accordion.accordion-expanding .ion-accordion-toggle-icon,
ion-accordion.accordion-expanded .ion-accordion-toggle-icon {
/**
* The > [slot="header"] selector ensures that we do
* not modify toggle icons for any nested accordions. The state
* of one accordion should not affect any accordions inside
* of a nested accordion group.
*/
ion-accordion.accordion-expanding > [slot="header"] .ion-accordion-toggle-icon,
ion-accordion.accordion-expanded > [slot="header"] .ion-accordion-toggle-icon {
transform: rotate(180deg);
}
ion-accordion-group.accordion-group-expand-inset.md ion-accordion.accordion-previous ion-item[slot="header"] {
ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-previous ion-item[slot="header"] {
--border-width: 0px;
--inner-border-width: 0px;
}
ion-accordion-group.accordion-group-expand-inset.md ion-accordion.accordion-expanding:first-of-type,
ion-accordion-group.accordion-group-expand-inset.md ion-accordion.accordion-expanded:first-of-type {
ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanding:first-of-type,
ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanded:first-of-type {
margin-top: 0;
}