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

feat(accordion): add default styles for ionic theme (#29933)

Browse Source 
- Updates Accordion to use the Ionic theme styles defined in Figma
- Adds an e2e test to the basic test to check for text content in the `content` slot
- Adds the `ionic` theme to the `multiple` e2e test
- Adds an e2e test for `states` which screenshots disabled, activated & focused
- Updates Item to accommodate the Accordion styles
- Updates the global core scss file to override the Toggle Icon and Items in an Accordion
This commit is contained in:
Brandy Carney
2024-10-16 12:25:34 -04:00
committed by GitHub
parent f4766c6738
commit 5d4a9893ef
64 changed files with 588 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
core/src/css/ionic/core.ionic.scss
View File

@ -310,6 +310,13 @@ ion-accordion-group.accordion-group-expand-inset > ion-accordion:last-of-type {
border-bottom-right-radius: globals.$ionic-border-radius-200;
}
// The toggle icon is nested in the accordion item so we need to
// style it from a global level.
ion-accordion > [slot="header"] .ion-accordion-toggle-icon {
color: globals.$ionic-color-neutral-1000;
font-size: globals.$ionic-scale-600;
}
ion-accordion.accordion-animated > [slot="header"] .ion-accordion-toggle-icon {
transition: 300ms transform cubic-bezier(0.25, 0.8, 0.5, 1);
}
@ -331,6 +338,20 @@ ion-accordion.accordion-expanded > [slot="header"] .ion-accordion-toggle-icon {
transform: rotate(180deg);
}
// Items inside of an accordion should have reduced padding
// due to the padding added to the accordion content.
ion-accordion > [slot="content"] ion-item {
@include globals.typography(globals.$ionic-body-md-regular);
color: globals.$ionic-color-neutral-1000;
--padding-start: 0;
--padding-top: #{globals.$ionic-space-300};
--padding-bottom: #{globals.$ionic-space-300};
--padding-end: 0;
--min-height: #{globals.$ionic-scale-700};
}
// Safari/iOS 15 changes the appearance of input[type="date"].
// For backwards compatibility from Ionic 5/Safari 14 designs,
// we override the appearance only when using within an ion-input.