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

fix(title): inherit padding for iOS title in a toolbar (#23343)

Browse Source 
resolves #23072
This commit is contained in:
Brandy Carney
2021-06-03 11:28:57 -04:00
committed by GitHub
parent ae96563fb3
commit 82cfa55653
2 changed files with 38 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
core/src/components/modal/test/custom/index.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Modal - Basic</title>
<title>Modal - Custom</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
@ -11,22 +11,27 @@
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<style>
.custom-modal {
--height: 70%;
--border-style: solid;
--border-width: 7px 0 0 0;
--border-color: #0d51aa;
--border-radius: 20px 20px 0 0;
.custom-modal {
--height: 70%;
--border-style: solid;
--border-width: 7px 0 0 0;
--border-color: #0d51aa;
--border-radius: 20px 20px 0 0;
align-items: flex-end;
}
align-items: flex-end;
}
@media (max-width: 400px) {
.custom-modal {
--max-width: 98%;
--height: 98%;
.custom-modal ion-toolbar {
--padding-top: 46px;
--padding-bottom: 10px;
}
@media (max-width: 400px) {
.custom-modal {
--max-width: 98%;
--height: 98%;
}
}
}
</style>
</head>
@ -35,7 +40,7 @@
<ion-header>
<ion-toolbar>
<ion-title>Modal - Basic</ion-title>
<ion-title>Modal - Custom</ion-title>
</ion-toolbar>
</ion-header>
@ -55,13 +60,23 @@
element.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button>
<ion-icon slot="icon-only" name="add-circle-outline"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Super Modal</ion-title>
<ion-buttons slot="end">
<ion-button class="dismiss">
Close
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<h1>Content of doom</h1>
<div>Here's some more content</div>
<ion-button class="dismiss">Dismiss Modal</ion-button>
<ion-button class="dismiss" class="dismiss">Dismiss Modal</ion-button>
</ion-content>
`;
@ -72,10 +87,12 @@
});
// listen for close event
const button = element.querySelector('ion-button');
button.addEventListener('click', () => {
modalElement.dismiss();
});
const buttons = element.querySelectorAll('.dismiss');
for (var button of buttons) {
button.addEventListener('click', () => {
modalElement.dismiss();
});
}
document.body.appendChild(modalElement);
return modalElement;
}

2
core/src/components/title/title.ios.scss
View File

@ -5,7 +5,7 @@
:host {
@include position(0, null, null, 0);
@include padding(0, 90px, 0);
@include padding(var(--padding-top), 90px, var(--padding-bottom));
position: absolute;