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 shape styles for the ionic theme (#29973)

Browse Source 
- Applies border radius based on the `shape` defined on the parent accordion group
- Adds an e2e test for shape with focused items to show the border radius
- Adds screenshots for the e2e test
This commit is contained in:
Brandy Carney
2024-10-31 11:35:35 -04:00
committed by GitHub
parent 4f61e0170d
commit d4ff124737
17 changed files with 216 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -47,6 +47,7 @@ body.backdrop-no-scroll {
// Modal - Card Style
// --------------------------------------------------
/**
* Card style modal needs additional padding on the
* top of the header. We accomplish this by targeting
@ -293,14 +294,18 @@ ion-card-header.ion-color .ion-inherit-color {
}
// Accordion Styles
// --------------------------------------------------
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 {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
ion-accordion-group > ion-accordion:last-of-type ion-item[slot="header"] {
--border-width: 0px;
}
@ -315,6 +320,7 @@ ion-accordion.accordion-animated > [slot="header"] .ion-accordion-toggle-icon {
transition: none !important;
}
}
/**
* The > [slot="header"] selector ensures that we do
* not modify toggle icons for any nested accordions. The state
@ -336,6 +342,9 @@ ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-ex
margin-top: 0;
}
// Datetime Styles
// --------------------------------------------------
// 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.
@ -383,6 +392,9 @@ h1[tabindex="-1"]:focus,
outline: none;
}
// Popover Styles
// --------------------------------------------------
/*
* If a popover has a child ion-content (or class equivalent) then the .popover-viewport element
* should not be scrollable to ensure the inner content does scroll. However, if the popover

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

@ -36,6 +36,7 @@ body.backdrop-no-scroll {
// Modal - Card Style
// --------------------------------------------------
html.ionic ion-modal ion-header {
box-shadow: none;
}
@ -301,14 +302,7 @@ ion-card-header.ion-color .ion-inherit-color {
}
// Accordion Styles
ion-accordion-group.accordion-group-expand-inset > ion-accordion:first-of-type {
border-top-left-radius: globals.$ion-border-radius-200;
border-top-right-radius: globals.$ion-border-radius-200;
}
ion-accordion-group.accordion-group-expand-inset > ion-accordion:last-of-type {
border-bottom-left-radius: globals.$ion-border-radius-200;
border-bottom-right-radius: globals.$ion-border-radius-200;
}
// --------------------------------------------------
// The toggle icon is nested in the accordion item so we need to
// style it from a global level.
@ -327,6 +321,7 @@ ion-accordion.accordion-animated > [slot="header"] .ion-accordion-toggle-icon {
transition: none !important;
}
}
/**
* The > [slot="header"] selector ensures that we do
* not modify toggle icons for any nested accordions. The state
@ -352,6 +347,9 @@ ion-accordion > [slot="content"] ion-item {
--min-height: #{globals.$ion-scale-700};
}
// Datetime Styles
// --------------------------------------------------
// 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.
@ -382,6 +380,9 @@ ion-input input::-webkit-date-and-time-value {
min-height: 320px;
}
// Popover Styles
// --------------------------------------------------
/**
* If a popover has a child ion-content (or class equivalent) then the .popover-viewport element
* should not be scrollable to ensure the inner content does scroll. However, if the popover