diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Chrome-linux.png index 50dd047e47..8c3a2cbbc8 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Firefox-linux.png index 0fc06766c9..89c282f406 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Firefox-linux.png index 317ca5cc42..73dd9d600f 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts b/core/src/components/toast/test/a11y/toast.e2e.ts index f0e1bac41f..9a819eb3c3 100644 --- a/core/src/components/toast/test/a11y/toast.e2e.ts +++ b/core/src/components/toast/test/a11y/toast.e2e.ts @@ -5,7 +5,7 @@ import { configs, test } from '@utils/test/playwright'; /** * This test does not check LTR vs RTL layouts */ -configs({ directions: ['ltr'] }).forEach(({ title, config }) => { +configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { test.describe(title('toast: a11y'), () => { test.beforeEach(async ({ page }) => { await page.goto(`/src/components/toast/test/a11y`, config); @@ -53,4 +53,138 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => { await expect(toastButton).toHaveAttribute('aria-label', 'close button'); }); }); + + test.describe(title('toast: font scaling'), () => { + test('should scale header text on larger font sizes', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const toast = page.locator('ion-toast'); + + await expect(toast).toBeVisible(); + + const toastWrapper = toast.locator('.toast-wrapper'); + await expect(toastWrapper).toHaveScreenshot(screenshot('toast-header-scale')); + }); + + test('should scale message text on larger font sizes', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const toast = page.locator('ion-toast'); + + await expect(toast).toBeVisible(); + + const toastWrapper = toast.locator('.toast-wrapper'); + await expect(toastWrapper).toHaveScreenshot(screenshot('toast-message-scale')); + }); + + test('should scale content icon on larger font sizes', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const toast = page.locator('ion-toast'); + + await expect(toast).toBeVisible(); + + const toastWrapper = toast.locator('.toast-wrapper'); + await expect(toastWrapper).toHaveScreenshot(screenshot('toast-icon-scale')); + }); + + test('should scale button text on larger font sizes', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const toast = page.locator('ion-toast'); + + toast.evaluate((el: HTMLIonToastElement) => { + el.buttons = [ + { + text: 'Cancel', + }, + ]; + }); + + await expect(toast).toBeVisible(); + + const toastWrapper = toast.locator('.toast-wrapper'); + await expect(toastWrapper).toHaveScreenshot(screenshot('toast-buttons-scale')); + }); + + test('should scale buttons and icons on larger font sizes', async ({ page }) => { + await page.setContent( + ` + + + + `, + config + ); + + const toast = page.locator('ion-toast'); + + toast.evaluate((el: HTMLIonToastElement) => { + el.buttons = [ + { + text: 'Cancel', + icon: 'close', + }, + ]; + }); + + await expect(toast).toBeVisible(); + + /** + * Linux incorrectly clips the screenshot when capturing the toast container + * with the inset styling. + * + * We capture the entire toast container (entire page) to avoid this issue. + */ + await expect(toast).toHaveScreenshot(screenshot('toast-buttons-icon-scale')); + }); + }); }); diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-icon-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-icon-scale-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..4d849a06e1 Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-icon-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-icon-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-icon-scale-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..4562cf8b12 Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-icon-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-icon-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-icon-scale-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..356074daf6 Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-icon-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-icon-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-icon-scale-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..e8a3eade25 Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-icon-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-icon-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-icon-scale-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..3d0663cb7c Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-icon-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-icon-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-icon-scale-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..bf9a556679 Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-icon-scale-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-scale-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..e709bc3481 Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-scale-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..83972fe9c5 Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-scale-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..3b6471da66 Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-scale-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..d9754d6344 Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-scale-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..1fa5e04831 Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-scale-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..69890dc976 Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-buttons-scale-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-header-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-header-scale-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3c892b78c2 Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-header-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-header-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-header-scale-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..c8bf3fa0fc Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-header-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-header-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-header-scale-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..6b1b7ce639 Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-header-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-header-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-header-scale-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..a1f39e78c9 Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-header-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-header-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-header-scale-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..9d32a314cb Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-header-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-header-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-header-scale-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..a11f7ef1da Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-header-scale-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-icon-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-icon-scale-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..e608808880 Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-icon-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-icon-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-icon-scale-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..38de4fa583 Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-icon-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-icon-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-icon-scale-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..de824cf050 Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-icon-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-icon-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-icon-scale-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..73e47aaeef Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-icon-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-icon-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-icon-scale-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..bc6b90d650 Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-icon-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-icon-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-icon-scale-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..ebbe43600c Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-icon-scale-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-message-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-message-scale-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..69e43f4b26 Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-message-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-message-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-message-scale-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..dce6110776 Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-message-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-message-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-message-scale-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..cdd4601d85 Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-message-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-message-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-message-scale-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..b1c316b0d1 Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-message-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-message-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-message-scale-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..2417f199fa Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-message-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-message-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-message-scale-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..78f85b6afc Binary files /dev/null and b/core/src/components/toast/test/a11y/toast.e2e.ts-snapshots/toast-message-scale-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-md-ltr-Mobile-Firefox-linux.png index 6508053e32..61cc6409e0 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-bottom-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ios-ltr-Mobile-Chrome-linux.png index e2d9109718..6d6c4ea177 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ios-ltr-Mobile-Firefox-linux.png index b1cf24ad38..6fba3f15e2 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ios-ltr-Mobile-Safari-linux.png index 16363755ec..b54db4d012 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ios-rtl-Mobile-Chrome-linux.png index d2d7be2cfa..10be66a546 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ios-rtl-Mobile-Firefox-linux.png index b7e22c5407..01c2608af9 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ios-rtl-Mobile-Safari-linux.png index 92152f50cf..7efb06128b 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-md-ltr-Mobile-Chrome-linux.png index 0ab44f4d4c..d25da71d35 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-md-ltr-Mobile-Firefox-linux.png index 44695df0d7..a5bdbac630 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-md-rtl-Mobile-Chrome-linux.png index 70a5c81420..b6d09a50b2 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-md-rtl-Mobile-Firefox-linux.png index 469e99efaa..94fe517ba7 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-buttons-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ios-ltr-Mobile-Chrome-linux.png index 0f6572fe86..ae812f0a93 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ios-ltr-Mobile-Firefox-linux.png index 17a7c25c05..ce649a8a18 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ios-ltr-Mobile-Safari-linux.png index 2513f1d650..c3300b9c28 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-md-ltr-Mobile-Chrome-linux.png index 2909ce60af..6cd3a19d73 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-md-ltr-Mobile-Firefox-linux.png index 7dc5115b8b..89e9c96e13 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-color-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-md-ltr-Mobile-Firefox-linux.png index 7cd694299c..1412355800 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-middle-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-md-ltr-Mobile-Chrome-linux.png index 288c71bf01..322fb6f78f 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-md-ltr-Mobile-Firefox-linux.png index 5d0117858b..578a500fc4 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-md-rtl-Mobile-Chrome-linux.png index 7867024042..16d2066cbe 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-md-rtl-Mobile-Firefox-linux.png index 7716c2efe0..ff854efb06 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-start-end-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ios-ltr-Mobile-Chrome-linux.png index af1d563a70..f590138311 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ios-ltr-Mobile-Firefox-linux.png index 659c3e1d6a..bdbc9527a1 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ios-ltr-Mobile-Safari-linux.png index fda558a78c..76d23e4427 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-md-ltr-Mobile-Chrome-linux.png index 384f0d5d86..1db7adf93e 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-md-ltr-Mobile-Firefox-linux.png index 93b72c42bb..50c14c121c 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-text-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-md-ltr-Mobile-Firefox-linux.png index fcc38c8ca3..e6ec7ca544 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-top-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-translucent-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-translucent-ios-ltr-Mobile-Chrome-linux.png index 5017fcc19b..60e927d993 100644 Binary files a/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-translucent-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/toast/test/basic/toast.e2e.ts-snapshots/toast-translucent-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-ltr-Mobile-Firefox-linux.png index ecab85e31f..26cdc190d3 100644 Binary files a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-rtl-Mobile-Chrome-linux.png index 73a5d84dad..a7ebfe10ad 100644 Binary files a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-rtl-Mobile-Firefox-linux.png index 379adbf2bd..afaa73521d 100644 Binary files a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toast/toast.ios.scss b/core/src/components/toast/toast.ios.scss index cbd29a4d91..4f20901476 100644 --- a/core/src/components/toast/toast.ios.scss +++ b/core/src/components/toast/toast.ios.scss @@ -10,6 +10,7 @@ --button-color: #{$toast-ios-button-color}; --color: #{$toast-ios-title-color}; --max-width: #{$toast-max-width}; + --max-height: #{$toast-ios-max-height}; --start: 10px; --end: 10px; @@ -68,7 +69,7 @@ .toast-button { @include padding($toast-ios-button-padding-top, $toast-ios-button-padding-end, $toast-ios-button-padding-bottom, $toast-ios-button-padding-start); - height: $toast-ios-button-min-height; + min-height: $toast-ios-button-min-height; transition: background-color, opacity 100ms linear; diff --git a/core/src/components/toast/toast.ios.vars.scss b/core/src/components/toast/toast.ios.vars.scss index 74c050c9cc..60aa1c4a4c 100644 --- a/core/src/components/toast/toast.ios.vars.scss +++ b/core/src/components/toast/toast.ios.vars.scss @@ -3,71 +3,81 @@ // iOS Toast // -------------------------------------------------- +/// @prop - The maximum height of the toast +/// The maximum height of an iOS notification +/// scaled to 310% is 478px. +$toast-ios-max-height: 478px; + /// @prop - Background Color of the toast wrapper -$toast-ios-background-color: $background-color-step-50 !default; +$toast-ios-background-color: $background-color-step-50 !default; /// @prop - Background Color alpha of the toast wrapper when translucent -$toast-ios-translucent-background-color-alpha: .8 !default; +$toast-ios-translucent-background-color-alpha: 0.8 !default; /// @prop - Background Color of the toast wrapper when translucent -$toast-ios-translucent-background-color: rgba($background-color-rgb, $toast-ios-translucent-background-color-alpha) !default; +$toast-ios-translucent-background-color: rgba( + $background-color-rgb, + $toast-ios-translucent-background-color-alpha +) !default; /// @prop - Border radius of the toast wrapper -$toast-ios-border-radius: 14px !default; +$toast-ios-border-radius: 14px !default; /// @prop - Color of the toast title -$toast-ios-title-color: $text-color-step-150 !default; +$toast-ios-title-color: $text-color-step-150 !default; /// @prop - Font size of the toast title -$toast-ios-header-font-weight: 500 !default; +$toast-ios-header-font-weight: 500 !default; /// @prop - Spacing between the header and the message -$toast-ios-header-margin-bottom: 2px !default; +$toast-ios-header-margin-bottom: 2px !default; /// @prop - Font size of the toast title -$toast-ios-content-font-size: 14px !default; +$toast-ios-content-font-size: dynamic-font-clamp(1, 14px, 3.1) !default; /// @prop - Padding top of the toast content -$toast-ios-content-padding-top: 15px !default; +$toast-ios-content-padding-top: 15px !default; /// @prop - Padding end of the toast content -$toast-ios-content-padding-end: $toast-ios-content-padding-top !default; +$toast-ios-content-padding-end: $toast-ios-content-padding-top !default; /// @prop - Padding bottom of the toast content -$toast-ios-content-padding-bottom: $toast-ios-content-padding-top !default; +$toast-ios-content-padding-bottom: $toast-ios-content-padding-top !default; /// @prop - Padding start of the toast content -$toast-ios-content-padding-start: $toast-ios-content-padding-end !default; +$toast-ios-content-padding-start: $toast-ios-content-padding-end !default; -/// @prop - Color of the toast button -$toast-ios-button-color: #{ion-color(primary, base)} !default; +/// @prop - Color of the toast button +$toast-ios-button-color: #{ion-color(primary, base)} !default; /// @prop - Filter of the translucent toast -$toast-ios-translucent-filter: saturate(180%) blur(20px) !default; +$toast-ios-translucent-filter: saturate(180%) blur(20px) !default; /// @prop - Minimum height of the toast button -$toast-ios-button-min-height: 44px !default; +$toast-ios-button-min-height: 44px !default; /// @prop - Padding top of the toast button -$toast-ios-button-padding-top: 10px !default; +$toast-ios-button-padding-top: 10px !default; /// @prop - Padding end of the toast button -$toast-ios-button-padding-end: 15px !default; +$toast-ios-button-padding-end: 15px !default; /// @prop - Padding bottom of the toast button -$toast-ios-button-padding-bottom: $toast-ios-button-padding-top !default; +$toast-ios-button-padding-bottom: $toast-ios-button-padding-top !default; /// @prop - Padding start of the toast button -$toast-ios-button-padding-start: 15px !default; +$toast-ios-button-padding-start: 15px !default; /// @prop - Font size of the toast button -$toast-ios-button-font-size: 17px !default; +/// Uses the same font size scaling rules as back button. +/// Prioritizing the toast header and message over the button. +$toast-ios-button-font-size: dynamic-font-clamp(1, 17px, 1.294) !default; /// @prop - Font size of the toast button -$toast-ios-button-font-weight: 500 !default; +$toast-ios-button-font-weight: 500 !default; /// @prop - Background color alpha of the toast activated button -$toast-ios-button-opacity-activated: .4 !default; +$toast-ios-button-opacity-activated: 0.4 !default; /// @prop - Background color of the toast button -$toast-ios-button-background-color: transparent !default; +$toast-ios-button-background-color: transparent !default; diff --git a/core/src/components/toast/toast.md.vars.scss b/core/src/components/toast/toast.md.vars.scss index 2fdd98f2b0..a82f215410 100644 --- a/core/src/components/toast/toast.md.vars.scss +++ b/core/src/components/toast/toast.md.vars.scss @@ -4,91 +4,92 @@ // -------------------------------------------------- /// @prop - Background of the toast -$toast-md-background: $text-color-step-200 !default; +$toast-md-background: $text-color-step-200 !default; /// @prop - Box shadow of the toast -$toast-md-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12) !default; +$toast-md-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), + 0 1px 18px 0 rgba(0, 0, 0, 0.12) !default; /// @prop - Font size of the toast -$toast-md-font-size: 14px !default; +$toast-md-font-size: dynamic-font(14px) !default; /// @prop - Color of the toast -$toast-md-color: $background-color-step-50 !default; +$toast-md-color: $background-color-step-50 !default; /// @prop - Border radius of the toast wrapper -$toast-md-border-radius: 4px !default; +$toast-md-border-radius: 4px !default; /// @prop - Font size of the toast message -$toast-md-header-line-height: 20px !default; +$toast-md-header-line-height: dynamic-font(20px) !default; /// @prop - Font size of the toast message -$toast-md-header-font-weight: 500 !default; +$toast-md-header-font-weight: 500 !default; /// @prop - Spacing between the header and the message -$toast-md-header-margin-bottom: 2px !default; +$toast-md-header-margin-bottom: 2px !default; /// @prop - Font size of the toast message -$toast-md-message-line-height: 20px !default; +$toast-md-message-line-height: dynamic-font(20px) !default; /// @prop - Padding top of the toast message -$toast-md-content-padding-top: 14px !default; +$toast-md-content-padding-top: 14px !default; /// @prop - Padding end of the toast content -$toast-md-content-padding-end: 16px !default; +$toast-md-content-padding-end: 16px !default; /// @prop - Padding bottom of the toast content -$toast-md-content-padding-bottom: $toast-md-content-padding-top !default; +$toast-md-content-padding-bottom: $toast-md-content-padding-top !default; /// @prop - Padding start of the toast content -$toast-md-content-padding-start: $toast-md-content-padding-end !default; +$toast-md-content-padding-start: $toast-md-content-padding-end !default; /// @prop - Padding top of the toast button -$toast-md-button-padding-top: 10px !default; +$toast-md-button-padding-top: 10px !default; /// @prop - Padding end of the toast button -$toast-md-button-padding-end: 15px !default; +$toast-md-button-padding-end: 15px !default; /// @prop - Padding bottom of the toast button -$toast-md-button-padding-bottom: $toast-md-button-padding-top !default; +$toast-md-button-padding-bottom: $toast-md-button-padding-top !default; /// @prop - Padding start of the toast button -$toast-md-button-padding-start: 15px !default; +$toast-md-button-padding-start: 15px !default; /// @prop - Font size of the toast button -$toast-md-button-font-size: 14px !default; +$toast-md-button-font-size: dynamic-font(14px) !default; /// @prop - Font weight of the toast button -$toast-md-button-font-weight: 500 !default; +$toast-md-button-font-weight: 500 !default; /// @prop - Letter spacing of the toast button -$toast-md-button-letter-spacing: 0.84px !default; +$toast-md-button-letter-spacing: 0.84px !default; /// @prop - Background color of the toast button -$toast-md-button-background-color: transparent !default; +$toast-md-button-background-color: transparent !default; /// @prop - Text transform of the toast button -$toast-md-button-text-transform: uppercase !default; +$toast-md-button-text-transform: uppercase !default; /// @prop - Opacity of the toast button background on hover -$toast-md-button-opacity-hover: 0.08 !default; +$toast-md-button-opacity-hover: 0.08 !default; /// @prop - Background color of the toast button on hover -$toast-md-button-background-color-hover: ion-color(primary, base, $toast-md-button-opacity-hover) !default; +$toast-md-button-background-color-hover: ion-color(primary, base, $toast-md-button-opacity-hover) !default; /// @prop - Text color of the cancel toast button -$toast-md-button-cancel-text-color: $background-color-step-100 !default; +$toast-md-button-cancel-text-color: $background-color-step-100 !default; /// @prop - Background color of the cancel toast button on hover -$toast-md-button-cancel-background-color-hover: rgba($background-color-rgb, $toast-md-button-opacity-hover) !default; +$toast-md-button-cancel-background-color-hover: rgba($background-color-rgb, $toast-md-button-opacity-hover) !default; /// @prop - Padding of the icon only toast button -$toast-md-button-icon-only-padding: 9px !default; +$toast-md-button-icon-only-padding: 9px !default; /// @prop - Width of the icon only toast button -$toast-md-button-icon-only-width: 36px !default; +$toast-md-button-icon-only-width: 36px !default; /// @prop - Height of the icon only toast button -$toast-md-button-icon-only-height: $toast-md-button-icon-only-width !default; +$toast-md-button-icon-only-height: $toast-md-button-icon-only-width !default; /// @prop - Border radius of the icon only toast button -$toast-md-button-icon-only-border-radius: 50% !default; +$toast-md-button-icon-only-border-radius: 50% !default; diff --git a/core/src/components/toast/toast.scss b/core/src/components/toast/toast.scss index 0418e86c7c..6e5a85b892 100644 --- a/core/src/components/toast/toast.scss +++ b/core/src/components/toast/toast.scss @@ -128,6 +128,10 @@ @include margin(null, null, null, 16px); } +.toast-content { + min-width: 0; +} + .toast-message { flex: 1; @@ -165,7 +169,6 @@ align-items: center; } - // Toast Button: Hover // --------------------------------------------------