diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 456fb6f2123..bb27e8a5f5e 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -22,8 +22,6 @@ on: options: - latest - next - - v5-lts - - v4-lts preid: type: choice description: Which prerelease identifier should be used? This is only needed when version is "prepatch", "preminor", "premajor", or "prerelease". diff --git a/CHANGELOG.md b/CHANGELOG.md index 7a9206fdc8f..d324c5dbd89 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,20 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [8.0.2](https://github.com/ionic-team/ionic-framework/compare/v8.0.1...v8.0.2) (2024-05-01) + + +### Bug Fixes + +* **datetime:** navigating months in RTL works correctly ([#29421](https://github.com/ionic-team/ionic-framework/issues/29421)) ([4d09890](https://github.com/ionic-team/ionic-framework/commit/4d09890d69590f0c8c32b387769a6e1e14a03c33)), closes [#29198](https://github.com/ionic-team/ionic-framework/issues/29198) +* **ios:** large title transition accounts for back button with no text ([#29327](https://github.com/ionic-team/ionic-framework/issues/29327)) ([bd8d065](https://github.com/ionic-team/ionic-framework/commit/bd8d065e1af038fe24fbe9a6acd9e0f2004bc0b7)), closes [#28751](https://github.com/ionic-team/ionic-framework/issues/28751) +* **md:** item border has improved contrast in dark mode ([#29398](https://github.com/ionic-team/ionic-framework/issues/29398)) ([fa85f03](https://github.com/ionic-team/ionic-framework/commit/fa85f030cfdb3ef8482ef29faff0144b27c9aa45)), closes [#29386](https://github.com/ionic-team/ionic-framework/issues/29386) +* **select:** options are visible with fit-content width and fill outline ([#29408](https://github.com/ionic-team/ionic-framework/issues/29408)) ([f15b62a](https://github.com/ionic-team/ionic-framework/commit/f15b62a9ca9a817d2252753d31025d431ac9f8e2)), closes [#29321](https://github.com/ionic-team/ionic-framework/issues/29321) + + + + + ## [8.0.1](https://github.com/ionic-team/ionic-framework/compare/v8.0.0...v8.0.1) (2024-04-24) diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md index 82e2e87ab2a..2b5c93add79 100644 --- a/core/CHANGELOG.md +++ b/core/CHANGELOG.md @@ -3,6 +3,20 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [8.0.2](https://github.com/ionic-team/ionic-framework/compare/v8.0.1...v8.0.2) (2024-05-01) + + +### Bug Fixes + +* **datetime:** navigating months in RTL works correctly ([#29421](https://github.com/ionic-team/ionic-framework/issues/29421)) ([4d09890](https://github.com/ionic-team/ionic-framework/commit/4d09890d69590f0c8c32b387769a6e1e14a03c33)), closes [#29198](https://github.com/ionic-team/ionic-framework/issues/29198) +* **ios:** large title transition accounts for back button with no text ([#29327](https://github.com/ionic-team/ionic-framework/issues/29327)) ([bd8d065](https://github.com/ionic-team/ionic-framework/commit/bd8d065e1af038fe24fbe9a6acd9e0f2004bc0b7)), closes [#28751](https://github.com/ionic-team/ionic-framework/issues/28751) +* **md:** item border has improved contrast in dark mode ([#29398](https://github.com/ionic-team/ionic-framework/issues/29398)) ([fa85f03](https://github.com/ionic-team/ionic-framework/commit/fa85f030cfdb3ef8482ef29faff0144b27c9aa45)), closes [#29386](https://github.com/ionic-team/ionic-framework/issues/29386) +* **select:** options are visible with fit-content width and fill outline ([#29408](https://github.com/ionic-team/ionic-framework/issues/29408)) ([f15b62a](https://github.com/ionic-team/ionic-framework/commit/f15b62a9ca9a817d2252753d31025d431ac9f8e2)), closes [#29321](https://github.com/ionic-team/ionic-framework/issues/29321) + + + + + ## [8.0.1](https://github.com/ionic-team/ionic-framework/compare/v8.0.0...v8.0.1) (2024-04-24) diff --git a/core/Dockerfile b/core/Dockerfile index d214b9cc3f5..d79582e477e 100644 --- a/core/Dockerfile +++ b/core/Dockerfile @@ -1,5 +1,5 @@ # Get Playwright -FROM mcr.microsoft.com/playwright:v1.42.1 +FROM mcr.microsoft.com/playwright:v1.43.1 # Set the working directory WORKDIR /ionic diff --git a/core/package-lock.json b/core/package-lock.json index c92036816d6..d6a040ec8dd 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -1,24 +1,24 @@ { "name": "@ionic/core", - "version": "8.0.1", + "version": "8.0.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/core", - "version": "8.0.1", + "version": "8.0.2", "license": "MIT", "dependencies": { - "@stencil/core": "^4.17.1", + "@stencil/core": "^4.17.2", "ionicons": "^7.2.2", "tslib": "^2.1.0" }, "devDependencies": { "@axe-core/playwright": "^4.8.5", - "@capacitor/core": "^5.7.0", - "@capacitor/haptics": "^5.0.7", - "@capacitor/keyboard": "^5.0.8", - "@capacitor/status-bar": "^5.0.7", + "@capacitor/core": "^6.0.0", + "@capacitor/haptics": "^6.0.0", + "@capacitor/keyboard": "^6.0.0", + "@capacitor/status-bar": "^6.0.0", "@ionic/eslint-config": "^0.3.0", "@ionic/prettier-config": "^2.0.0", "@playwright/test": "^1.39.0", @@ -56,12 +56,12 @@ "dev": true }, "node_modules/@axe-core/playwright": { - "version": "4.8.5", - "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.5.tgz", - "integrity": "sha512-GFdXXAEn9uk0Vyzgl2eEP+VwvgGzas0YSnacoJ/0U237G83zWZ1PhbP/RDymm0cqevoA+xRjMo+ONzh9Q711nw==", + "version": "4.9.0", + "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.9.0.tgz", + "integrity": "sha512-Q1Lz75dNsX38jof+aev7RficDMdH/HLOLySkDdXR0fUoeFcLdw4UNgDO2CNNP4CTpoesEdfYRdd6VmDXjhBgbA==", "dev": true, "dependencies": { - "axe-core": "~4.8.4" + "axe-core": "~4.9.0" }, "peerDependencies": { "playwright-core": ">= 1.0.0" @@ -660,39 +660,39 @@ "dev": true }, "node_modules/@capacitor/core": { - "version": "5.7.5", - "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.5.tgz", - "integrity": "sha512-babBo26lgIyKkAOr/AbPq5wwi9I4uHDP0lBteJq7p4xZElA6tAA8mD3xRH1/4EKmZ4+acYpKmmyegX3zsVh37A==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-6.0.0.tgz", + "integrity": "sha512-NvxIQsJcMiIV+Le1DilR2GGyQQbDInfXK1UywGROQ5mycdFlW5XoAPZ+MKnFGB123RoEgE3uhDGgwTXUmSlX9A==", "dev": true, "dependencies": { "tslib": "^2.1.0" } }, "node_modules/@capacitor/haptics": { - "version": "5.0.7", - "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-5.0.7.tgz", - "integrity": "sha512-/j+7Qa4BxQA5aOU43cwXuiudfSXfoHFsAVfcehH5DkSjxLykZKWHEuE4uFJXqdkSIbAHjS37D0Sde6ENP6G/MA==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-6.0.0.tgz", + "integrity": "sha512-z2TmB+pTbd98Il2I1xpZGClCFwORxxP2m9f1a0rh70c2ubj2atVyZctgxrx1fuoExZTNGSxHaylWfrmjmtelVg==", "dev": true, "peerDependencies": { - "@capacitor/core": "^5.0.0" + "@capacitor/core": "^6.0.0" } }, "node_modules/@capacitor/keyboard": { - "version": "5.0.8", - "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.8.tgz", - "integrity": "sha512-XYyBzGlzjgLPqyPVdu5McGLYV6+G2efVR4I3l5cF1B27M6U/oFqv9CQU74WNG08nee28bfccboNpv6eWCLYn1A==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-6.0.0.tgz", + "integrity": "sha512-pPX/PQWWjw5ce47kHEYv6IWlHzuhAxgXihqEAAAGLdwK3u3srgGWCljXrYS9juVBPi/lA1uK7UaUzYI0XrgxVQ==", "dev": true, "peerDependencies": { - "@capacitor/core": "^5.0.0" + "@capacitor/core": "^6.0.0" } }, "node_modules/@capacitor/status-bar": { - "version": "5.0.7", - "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-5.0.7.tgz", - "integrity": "sha512-KblB3gV2LDMEjx3fQoNBAzxb+Tr+2mv68SfFLLDCMiMUD3Eile2TAWRWd1yxy496pDFTOs2BJtup8++iuuuJ/w==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-6.0.0.tgz", + "integrity": "sha512-Wo0ILugYlmENegKDgTzVCPjbvP8h1ObgHslLdgeVG643ViMS/diausHIq8e104WIKCXtKIELmQeYVp9mX7932g==", "dev": true, "peerDependencies": { - "@capacitor/core": "^5.0.0" + "@capacitor/core": "^6.0.0" } }, "node_modules/@eslint-community/eslint-utils": { @@ -1691,12 +1691,12 @@ } }, "node_modules/@playwright/test": { - "version": "1.42.1", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.42.1.tgz", - "integrity": "sha512-Gq9rmS54mjBL/7/MvBaNOBwbfnh7beHvS6oS4srqXFcQHpQCV1+c8JXWE8VLPyRDhgS3H8x8A7hztqI9VnwrAQ==", + "version": "1.43.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.43.1.tgz", + "integrity": "sha512-HgtQzFgNEEo4TE22K/X7sYTYNqEMMTZmFS8kTq6m8hXj+m1D8TgwgIbumHddJa9h4yl4GkKb8/bgAl2+g7eDgA==", "dev": true, "dependencies": { - "playwright": "1.42.1" + "playwright": "1.43.1" }, "bin": { "playwright": "cli.js" @@ -1786,9 +1786,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.17.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.1.tgz", - "integrity": "sha512-nlARe1QtK5abnCG8kPQKJMWiELg39vKabvf3ebm6YEhQA35CgrxC1pVYTsYq3yktJKoY+k+VzGRnATLKyaLbvA==", + "version": "4.17.2", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.2.tgz", + "integrity": "sha512-MX7yaLmpTU9iZvCire9nhecTcE0qBlV0vPWrLMeIXewYN7/hb8B3NjnhQyBKC93FDPI8NBRmt6KIugLw9zcRZg==", "bin": { "stencil": "bin/stencil" }, @@ -2703,9 +2703,9 @@ } }, "node_modules/axe-core": { - "version": "4.8.4", - "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.4.tgz", - "integrity": "sha512-CZLSKisu/bhJ2awW4kJndluz2HLZYIHh5Uy1+ZwDRkJi69811xgIXXfdU9HSLX0Th+ILrHj8qfL/5wzamsFtQg==", + "version": "4.9.0", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.9.0.tgz", + "integrity": "sha512-H5orY+M2Fr56DWmMFpMrq5Ge93qjNdPVqzBv5gWK3aD1OvjBEJlEzxf09z93dGVQeI0LiW+aCMIx1QtShC/zUw==", "dev": true, "engines": { "node": ">=4" @@ -8222,12 +8222,12 @@ } }, "node_modules/playwright": { - "version": "1.42.1", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.42.1.tgz", - "integrity": "sha512-PgwB03s2DZBcNRoW+1w9E+VkLBxweib6KTXM0M3tkiT4jVxKSi6PmVJ591J+0u10LUrgxB7dLRbiJqO5s2QPMg==", + "version": "1.43.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.43.1.tgz", + "integrity": "sha512-V7SoH0ai2kNt1Md9E3Gwas5B9m8KR2GVvwZnAI6Pg0m3sh7UvgiYhRrhsziCmqMJNouPckiOhk8T+9bSAK0VIA==", "dev": true, "dependencies": { - "playwright-core": "1.42.1" + "playwright-core": "1.43.1" }, "bin": { "playwright": "cli.js" @@ -8240,9 +8240,9 @@ } }, "node_modules/playwright-core": { - "version": "1.42.1", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.42.1.tgz", - "integrity": "sha512-mxz6zclokgrke9p1vtdy/COWBH+eOZgYUVVU34C73M+4j4HLlQJHtfcqiqqxpP0o8HhMkflvfbquLX5dg6wlfA==", + "version": "1.43.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.43.1.tgz", + "integrity": "sha512-EI36Mto2Vrx6VF7rm708qSnesVQKbxEWvPrfA1IPY6HgczBplDx7ENtx+K2n4kJ41sLLkuGfmb0ZLSSXlDhqPg==", "dev": true, "bin": { "playwright-core": "cli.js" @@ -10256,12 +10256,12 @@ }, "dependencies": { "@axe-core/playwright": { - "version": "4.8.5", - "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.5.tgz", - "integrity": "sha512-GFdXXAEn9uk0Vyzgl2eEP+VwvgGzas0YSnacoJ/0U237G83zWZ1PhbP/RDymm0cqevoA+xRjMo+ONzh9Q711nw==", + "version": "4.9.0", + "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.9.0.tgz", + "integrity": "sha512-Q1Lz75dNsX38jof+aev7RficDMdH/HLOLySkDdXR0fUoeFcLdw4UNgDO2CNNP4CTpoesEdfYRdd6VmDXjhBgbA==", "dev": true, "requires": { - "axe-core": "~4.8.4" + "axe-core": "~4.9.0" } }, "@babel/code-frame": { @@ -10703,32 +10703,32 @@ "dev": true }, "@capacitor/core": { - "version": "5.7.5", - "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.5.tgz", - "integrity": "sha512-babBo26lgIyKkAOr/AbPq5wwi9I4uHDP0lBteJq7p4xZElA6tAA8mD3xRH1/4EKmZ4+acYpKmmyegX3zsVh37A==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-6.0.0.tgz", + "integrity": "sha512-NvxIQsJcMiIV+Le1DilR2GGyQQbDInfXK1UywGROQ5mycdFlW5XoAPZ+MKnFGB123RoEgE3uhDGgwTXUmSlX9A==", "dev": true, "requires": { "tslib": "^2.1.0" } }, "@capacitor/haptics": { - "version": "5.0.7", - "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-5.0.7.tgz", - "integrity": "sha512-/j+7Qa4BxQA5aOU43cwXuiudfSXfoHFsAVfcehH5DkSjxLykZKWHEuE4uFJXqdkSIbAHjS37D0Sde6ENP6G/MA==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-6.0.0.tgz", + "integrity": "sha512-z2TmB+pTbd98Il2I1xpZGClCFwORxxP2m9f1a0rh70c2ubj2atVyZctgxrx1fuoExZTNGSxHaylWfrmjmtelVg==", "dev": true, "requires": {} }, "@capacitor/keyboard": { - "version": "5.0.8", - "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.8.tgz", - "integrity": "sha512-XYyBzGlzjgLPqyPVdu5McGLYV6+G2efVR4I3l5cF1B27M6U/oFqv9CQU74WNG08nee28bfccboNpv6eWCLYn1A==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-6.0.0.tgz", + "integrity": "sha512-pPX/PQWWjw5ce47kHEYv6IWlHzuhAxgXihqEAAAGLdwK3u3srgGWCljXrYS9juVBPi/lA1uK7UaUzYI0XrgxVQ==", "dev": true, "requires": {} }, "@capacitor/status-bar": { - "version": "5.0.7", - "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-5.0.7.tgz", - "integrity": "sha512-KblB3gV2LDMEjx3fQoNBAzxb+Tr+2mv68SfFLLDCMiMUD3Eile2TAWRWd1yxy496pDFTOs2BJtup8++iuuuJ/w==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-6.0.0.tgz", + "integrity": "sha512-Wo0ILugYlmENegKDgTzVCPjbvP8h1ObgHslLdgeVG643ViMS/diausHIq8e104WIKCXtKIELmQeYVp9mX7932g==", "dev": true, "requires": {} }, @@ -11443,12 +11443,12 @@ } }, "@playwright/test": { - "version": "1.42.1", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.42.1.tgz", - "integrity": "sha512-Gq9rmS54mjBL/7/MvBaNOBwbfnh7beHvS6oS4srqXFcQHpQCV1+c8JXWE8VLPyRDhgS3H8x8A7hztqI9VnwrAQ==", + "version": "1.43.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.43.1.tgz", + "integrity": "sha512-HgtQzFgNEEo4TE22K/X7sYTYNqEMMTZmFS8kTq6m8hXj+m1D8TgwgIbumHddJa9h4yl4GkKb8/bgAl2+g7eDgA==", "dev": true, "requires": { - "playwright": "1.42.1" + "playwright": "1.43.1" } }, "@rollup/plugin-node-resolve": { @@ -11516,9 +11516,9 @@ "requires": {} }, "@stencil/core": { - "version": "4.17.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.1.tgz", - "integrity": "sha512-nlARe1QtK5abnCG8kPQKJMWiELg39vKabvf3ebm6YEhQA35CgrxC1pVYTsYq3yktJKoY+k+VzGRnATLKyaLbvA==" + "version": "4.17.2", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.2.tgz", + "integrity": "sha512-MX7yaLmpTU9iZvCire9nhecTcE0qBlV0vPWrLMeIXewYN7/hb8B3NjnhQyBKC93FDPI8NBRmt6KIugLw9zcRZg==" }, "@stencil/react-output-target": { "version": "0.5.3", @@ -12150,9 +12150,9 @@ } }, "axe-core": { - "version": "4.8.4", - "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.4.tgz", - "integrity": "sha512-CZLSKisu/bhJ2awW4kJndluz2HLZYIHh5Uy1+ZwDRkJi69811xgIXXfdU9HSLX0Th+ILrHj8qfL/5wzamsFtQg==", + "version": "4.9.0", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.9.0.tgz", + "integrity": "sha512-H5orY+M2Fr56DWmMFpMrq5Ge93qjNdPVqzBv5gWK3aD1OvjBEJlEzxf09z93dGVQeI0LiW+aCMIx1QtShC/zUw==", "dev": true }, "babel-jest": { @@ -16167,19 +16167,19 @@ } }, "playwright": { - "version": "1.42.1", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.42.1.tgz", - "integrity": "sha512-PgwB03s2DZBcNRoW+1w9E+VkLBxweib6KTXM0M3tkiT4jVxKSi6PmVJ591J+0u10LUrgxB7dLRbiJqO5s2QPMg==", + "version": "1.43.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.43.1.tgz", + "integrity": "sha512-V7SoH0ai2kNt1Md9E3Gwas5B9m8KR2GVvwZnAI6Pg0m3sh7UvgiYhRrhsziCmqMJNouPckiOhk8T+9bSAK0VIA==", "dev": true, "requires": { "fsevents": "2.3.2", - "playwright-core": "1.42.1" + "playwright-core": "1.43.1" } }, "playwright-core": { - "version": "1.42.1", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.42.1.tgz", - "integrity": "sha512-mxz6zclokgrke9p1vtdy/COWBH+eOZgYUVVU34C73M+4j4HLlQJHtfcqiqqxpP0o8HhMkflvfbquLX5dg6wlfA==", + "version": "1.43.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.43.1.tgz", + "integrity": "sha512-EI36Mto2Vrx6VF7rm708qSnesVQKbxEWvPrfA1IPY6HgczBplDx7ENtx+K2n4kJ41sLLkuGfmb0ZLSSXlDhqPg==", "dev": true }, "postcss": { diff --git a/core/package.json b/core/package.json index 688ba5262e0..7658f7e87f7 100644 --- a/core/package.json +++ b/core/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/core", - "version": "8.0.1", + "version": "8.0.2", "description": "Base components for Ionic", "keywords": [ "ionic", @@ -31,16 +31,16 @@ "loader/" ], "dependencies": { - "@stencil/core": "^4.17.1", + "@stencil/core": "^4.17.2", "ionicons": "^7.2.2", "tslib": "^2.1.0" }, "devDependencies": { "@axe-core/playwright": "^4.8.5", - "@capacitor/core": "^5.7.0", - "@capacitor/haptics": "^5.0.7", - "@capacitor/keyboard": "^5.0.8", - "@capacitor/status-bar": "^5.0.7", + "@capacitor/core": "^6.0.0", + "@capacitor/haptics": "^6.0.0", + "@capacitor/keyboard": "^6.0.0", + "@capacitor/status-bar": "^6.0.0", "@ionic/eslint-config": "^0.3.0", "@ionic/prettier-config": "^2.0.0", "@playwright/test": "^1.39.0", diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 4b85721b497..c429b03983b 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -4770,7 +4770,7 @@ declare namespace LocalJSX { */ "multiple"?: boolean; /** - * Emitted when the value property has changed as a result of a user action such as a click. This event will not emit when programmatically setting the value property. + * Emitted when the value property has changed as a result of a user action such as a click. This event will not emit when programmatically setting the `value` property. */ "onIonChange"?: (event: IonAccordionGroupCustomEvent) => void; /** @@ -5345,7 +5345,7 @@ declare namespace LocalJSX { */ "onIonBlur"?: (event: IonCheckboxCustomEvent) => void; /** - * Emitted when the checked property has changed as a result of a user action such as a click. This event will not emit when programmatically setting the checked property. + * Emitted when the checked property has changed as a result of a user action such as a click. This event will not emit when programmatically setting the `checked` property. */ "onIonChange"?: (event: IonCheckboxCustomEvent) => void; /** @@ -5601,7 +5601,7 @@ declare namespace LocalJSX { */ "onIonCancel"?: (event: IonDatetimeCustomEvent) => void; /** - * Emitted when the value (selected date) has changed. + * Emitted when the value (selected date) has changed. This event will not emit when programmatically setting the `value` property. */ "onIonChange"?: (event: IonDatetimeCustomEvent) => void; /** @@ -5971,7 +5971,7 @@ declare namespace LocalJSX { */ "onIonBlur"?: (event: IonInputCustomEvent) => void; /** - * The `ionChange` event is fired when the user modifies the input's value. Unlike the `ionInput` event, the `ionChange` event is only fired when changes are committed, not as the user types. Depending on the way the users interacts with the element, the `ionChange` event fires at a different moment: - When the user commits the change explicitly (e.g. by selecting a date from a date picker for ``, pressing the "Enter" key, etc.). - When the element loses focus after its value has changed: for elements where the user's interaction is typing. + * The `ionChange` event is fired when the user modifies the input's value. Unlike the `ionInput` event, the `ionChange` event is only fired when changes are committed, not as the user types. Depending on the way the users interacts with the element, the `ionChange` event fires at a different moment: - When the user commits the change explicitly (e.g. by selecting a date from a date picker for ``, pressing the "Enter" key, etc.). - When the element loses focus after its value has changed: for elements where the user's interaction is typing. This event will not emit when programmatically setting the `value` property. */ "onIonChange"?: (event: IonInputCustomEvent) => void; /** @@ -6620,7 +6620,7 @@ declare namespace LocalJSX { */ "numericInput"?: boolean; /** - * Emitted when the value has changed. + * Emitted when the value has changed. This event will not emit when programmatically setting the `value` property. */ "onIonChange"?: (event: IonPickerColumnCustomEvent) => void; /** @@ -6961,7 +6961,7 @@ declare namespace LocalJSX { */ "name"?: string; /** - * Emitted when the value has changed. + * Emitted when the value has changed. This event will not emit when programmatically setting the `value` property. */ "onIonChange"?: (event: IonRadioGroupCustomEvent) => void; /** @@ -7023,7 +7023,7 @@ declare namespace LocalJSX { */ "onIonBlur"?: (event: IonRangeCustomEvent) => void; /** - * The `ionChange` event is fired for `` elements when the user modifies the element's value: - When the user releases the knob after dragging; - When the user moves the knob with keyboard arrows `ionChange` is not fired when the value is changed programmatically. + * The `ionChange` event is fired for `` elements when the user modifies the element's value: - When the user releases the knob after dragging; - When the user moves the knob with keyboard arrows This event will not emit when programmatically setting the `value` property. */ "onIonChange"?: (event: IonRangeCustomEvent) => void; /** @@ -7324,7 +7324,7 @@ declare namespace LocalJSX { */ "onIonCancel"?: (event: IonSearchbarCustomEvent) => void; /** - * The `ionChange` event is fired for `` elements when the user modifies the element's value. Unlike the `ionInput` event, the `ionChange` event is not necessarily fired for each alteration to an element's value. The `ionChange` event is fired when the value has been committed by the user. This can happen when the element loses focus or when the "Enter" key is pressed. `ionChange` can also fire when clicking the clear or cancel buttons. + * The `ionChange` event is fired for `` elements when the user modifies the element's value. Unlike the `ionInput` event, the `ionChange` event is not necessarily fired for each alteration to an element's value. The `ionChange` event is fired when the value has been committed by the user. This can happen when the element loses focus or when the "Enter" key is pressed. `ionChange` can also fire when clicking the clear or cancel buttons. This event will not emit when programmatically setting the `value` property. */ "onIonChange"?: (event: IonSearchbarCustomEvent) => void; /** @@ -7386,7 +7386,7 @@ declare namespace LocalJSX { */ "mode"?: "ios" | "md"; /** - * Emitted when the value property has changed and any dragging pointer has been released from `ion-segment`. + * Emitted when the value property has changed and any dragging pointer has been released from `ion-segment`. This event will not emit when programmatically setting the `value` property. */ "onIonChange"?: (event: IonSegmentCustomEvent) => void; /** @@ -7506,7 +7506,7 @@ declare namespace LocalJSX { */ "onIonCancel"?: (event: IonSelectCustomEvent) => void; /** - * Emitted when the value has changed. + * Emitted when the value has changed. This event will not emit when programmatically setting the `value` property. */ "onIonChange"?: (event: IonSelectCustomEvent) => void; /** @@ -7809,7 +7809,7 @@ declare namespace LocalJSX { */ "onIonBlur"?: (event: IonTextareaCustomEvent) => void; /** - * The `ionChange` event is fired when the user modifies the textarea's value. Unlike the `ionInput` event, the `ionChange` event is fired when the element loses focus after its value has been modified. + * The `ionChange` event is fired when the user modifies the textarea's value. Unlike the `ionInput` event, the `ionChange` event is fired when the element loses focus after its value has been modified. This event will not emit when programmatically setting the `value` property. */ "onIonChange"?: (event: IonTextareaCustomEvent) => void; /** @@ -8028,7 +8028,7 @@ declare namespace LocalJSX { */ "onIonBlur"?: (event: IonToggleCustomEvent) => void; /** - * Emitted when the user switches the toggle on or off. Does not emit when programmatically changing the value of the `checked` property. + * Emitted when the user switches the toggle on or off. This event will not emit when programmatically setting the `checked` property. */ "onIonChange"?: (event: IonToggleCustomEvent) => void; /** diff --git a/core/src/components/accordion-group/accordion-group.tsx b/core/src/components/accordion-group/accordion-group.tsx index eeb99b42fb3..b84d75b67a5 100644 --- a/core/src/components/accordion-group/accordion-group.tsx +++ b/core/src/components/accordion-group/accordion-group.tsx @@ -59,10 +59,9 @@ export class AccordionGroup implements ComponentInterface { @Prop() expand: 'compact' | 'inset' = 'compact'; /** - * Emitted when the value property has changed - * as a result of a user action such as a click. - * This event will not emit when programmatically setting - * the value property. + * Emitted when the value property has changed as a result of a user action such as a click. + * + * This event will not emit when programmatically setting the `value` property. */ @Event() ionChange!: EventEmitter; diff --git a/core/src/components/accordion/accordion.md.vars.scss b/core/src/components/accordion/accordion.md.vars.scss index 1a6ffd64a58..07a5040b16c 100644 --- a/core/src/components/accordion/accordion.md.vars.scss +++ b/core/src/components/accordion/accordion.md.vars.scss @@ -4,10 +4,10 @@ // -------------------------------------------------- /// @prop - Border radius applied to the accordion -$accordion-md-border-radius: 6px !default; +$accordion-md-border-radius: 6px; /// @prop - Box shadow of the accordion -$accordion-md-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !default; +$accordion-md-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); /// @prop - Margin of the expanded accordion -$accordion-md-expanded-margin: 16px !default; +$accordion-md-expanded-margin: 16px; diff --git a/core/src/components/accordion/accordion.vars.scss b/core/src/components/accordion/accordion.vars.scss index 2899324be10..e03b154b1b4 100644 --- a/core/src/components/accordion/accordion.vars.scss +++ b/core/src/components/accordion/accordion.vars.scss @@ -4,16 +4,16 @@ // -------------------------------------------------- /// @prop - Background color of the accordion -$accordion-background-color: var(--ion-background-color, #ffffff) !default; +$accordion-background-color: var(--ion-background-color, #ffffff); /// @prop - Duration of the accordion transition -$accordion-transition-duration: 300ms !default; +$accordion-transition-duration: 300ms; /// @prop - Timing function of the accordion transition -$accordion-transition-easing: cubic-bezier(0.25, 0.8, 0.5, 1) !default; +$accordion-transition-easing: cubic-bezier(0.25, 0.8, 0.5, 1); /// @prop - Opacity of the disabled accordion -$accordion-disabled-opacity: 0.4 !default; +$accordion-disabled-opacity: 0.4; /// @prop - Margin of the inset accordion -$accordion-inset-margin: 16px !default; +$accordion-inset-margin: 16px; diff --git a/core/src/components/action-sheet/action-sheet.ios.vars.scss b/core/src/components/action-sheet/action-sheet.ios.vars.scss index 7aa19b4404b..01fa09d8ebb 100644 --- a/core/src/components/action-sheet/action-sheet.ios.vars.scss +++ b/core/src/components/action-sheet/action-sheet.ios.vars.scss @@ -4,145 +4,145 @@ // -------------------------------------------------- /// @prop - Text align of the action sheet -$action-sheet-ios-text-align: center !default; +$action-sheet-ios-text-align: center; /// @prop - Padding top of the action sheet -$action-sheet-ios-padding-top: 0 !default; +$action-sheet-ios-padding-top: 0; /// @prop - Padding end of the action sheet -$action-sheet-ios-padding-end: 8px !default; +$action-sheet-ios-padding-end: 8px; /// @prop - Padding bottom of the action sheet -$action-sheet-ios-padding-bottom: $action-sheet-ios-padding-top !default; +$action-sheet-ios-padding-bottom: $action-sheet-ios-padding-top; /// @prop - Padding start of the action sheet -$action-sheet-ios-padding-start: $action-sheet-ios-padding-end !default; +$action-sheet-ios-padding-start: $action-sheet-ios-padding-end; /// @prop - Top margin of the action sheet button group -$action-sheet-ios-group-margin-top: 10px !default; +$action-sheet-ios-group-margin-top: 10px; /// @prop - Bottom margin of the action sheet button group -$action-sheet-ios-group-margin-bottom: 10px !default; +$action-sheet-ios-group-margin-bottom: 10px; /// @prop - Background color of the action sheet -$action-sheet-ios-background-color: $overlay-ios-background-color !default; +$action-sheet-ios-background-color: $overlay-ios-background-color; /// @prop - Border radius of the action sheet -$action-sheet-ios-border-radius: 13px !default; +$action-sheet-ios-border-radius: 13px; // Action Sheet Title // -------------------------------------------------- /// @prop - Padding top of the action sheet title -$action-sheet-ios-title-padding-top: 14px !default; +$action-sheet-ios-title-padding-top: 14px; /// @prop - Padding end of the action sheet title -$action-sheet-ios-title-padding-end: 10px !default; +$action-sheet-ios-title-padding-end: 10px; /// @prop - Padding bottom of the action sheet title -$action-sheet-ios-title-padding-bottom: 13px !default; +$action-sheet-ios-title-padding-bottom: 13px; /// @prop - Padding start of the action sheet title -$action-sheet-ios-title-padding-start: $action-sheet-ios-title-padding-end !default; +$action-sheet-ios-title-padding-start: $action-sheet-ios-title-padding-end; /// @prop - Color of the action sheet title -$action-sheet-ios-title-color: $text-color-step-600 !default; +$action-sheet-ios-title-color: $text-color-step-600; /// @prop - Font size of the action sheet title -$action-sheet-ios-title-font-size: dynamic-font-min(1, 13px) !default; +$action-sheet-ios-title-font-size: dynamic-font-min(1, 13px); /// @prop - Font weight of the action sheet title -$action-sheet-ios-title-font-weight: 400 !default; +$action-sheet-ios-title-font-weight: 400; /// @prop - Font weight of the action sheet title when it has a sub title -$action-sheet-ios-title-with-sub-title-font-weight: 600 !default; +$action-sheet-ios-title-with-sub-title-font-weight: 600; // Action Sheet Subtitle // -------------------------------------------------- /// @prop - Font size of the action sheet sub title -$action-sheet-ios-sub-title-font-size: dynamic-font-min(1, 13px) !default; +$action-sheet-ios-sub-title-font-size: dynamic-font-min(1, 13px); /// @prop - Padding top of the action sheet sub title -$action-sheet-ios-sub-title-padding-top: 6px !default; +$action-sheet-ios-sub-title-padding-top: 6px; /// @prop - Padding end of the action sheet sub title -$action-sheet-ios-sub-title-padding-end: 0 !default; +$action-sheet-ios-sub-title-padding-end: 0; /// @prop - Padding bottom of the action sheet sub title -$action-sheet-ios-sub-title-padding-bottom: 0 !default; +$action-sheet-ios-sub-title-padding-bottom: 0; /// @prop - Padding start of the action sheet sub title -$action-sheet-ios-sub-title-padding-start: $action-sheet-ios-sub-title-padding-end !default; +$action-sheet-ios-sub-title-padding-start: $action-sheet-ios-sub-title-padding-end; // Action Sheet Button // -------------------------------------------------- /// @prop - Minimum height of the action sheet button -$action-sheet-ios-button-height: 56px !default; +$action-sheet-ios-button-height: 56px; /// @prop - Padding of the action sheet button -$action-sheet-ios-button-padding: 14px !default; +$action-sheet-ios-button-padding: 14px; /// @prop - Text color of the action sheet button -$action-sheet-ios-button-text-color: ion-color(primary, base) !default; +$action-sheet-ios-button-text-color: ion-color(primary, base); /// @prop - Font size of the action sheet button icon -$action-sheet-ios-button-icon-font-size: dynamic-font-min(1, 28px) !default; +$action-sheet-ios-button-icon-font-size: dynamic-font-min(1, 28px); /// @prop - Padding right of the action sheet button icon -$action-sheet-ios-button-icon-padding-right: .3em !default; +$action-sheet-ios-button-icon-padding-right: .3em; /// @prop - Font size of the action sheet button -$action-sheet-ios-button-font-size: dynamic-font-min(1, 20px) !default; +$action-sheet-ios-button-font-size: dynamic-font-min(1, 20px); /// @prop - Border color alpha of the action sheet button -$action-sheet-ios-button-border-color-alpha: .08 !default; +$action-sheet-ios-button-border-color-alpha: .08; /// @prop - Border color of the action sheet button -$action-sheet-ios-button-border-color: rgba($text-color-rgb, $action-sheet-ios-button-border-color-alpha) !default; +$action-sheet-ios-button-border-color: rgba($text-color-rgb, $action-sheet-ios-button-border-color-alpha); /// @prop - Background color of the action sheet button -$action-sheet-ios-button-background: linear-gradient(0deg, $action-sheet-ios-button-border-color, $action-sheet-ios-button-border-color 50%, transparent 50%) bottom / 100% 1px no-repeat transparent !default; +$action-sheet-ios-button-background: linear-gradient(0deg, $action-sheet-ios-button-border-color, $action-sheet-ios-button-border-color 50%, transparent 50%) bottom / 100% 1px no-repeat transparent; /// @prop - Background color of the activated action sheet button -$action-sheet-ios-button-background-activated: $text-color !default; +$action-sheet-ios-button-background-activated: $text-color; /// @prop - Background color of the selected action sheet button -$action-sheet-ios-button-background-selected: var(--ion-color-step-150, var(--ion-background-color-step-150, $background-color)) !default; +$action-sheet-ios-button-background-selected: var(--ion-color-step-150, var(--ion-background-color-step-150, $background-color)); /// @prop - Destructive text color of the action sheet button -$action-sheet-ios-button-destructive-text-color: ion-color(danger, base) !default; +$action-sheet-ios-button-destructive-text-color: ion-color(danger, base); /// @prop - Font weight of the action sheet cancel button -$action-sheet-ios-button-cancel-font-weight: 600 !default; +$action-sheet-ios-button-cancel-font-weight: 600; // Action Sheet Translucent // -------------------------------------------------- /// @prop - Background color alpha of the action sheet when translucent -$action-sheet-ios-translucent-background-color-alpha: .8 !default; +$action-sheet-ios-translucent-background-color-alpha: .8; /// @prop - Background color of the action sheet when translucent -$action-sheet-ios-translucent-background-color: rgba($background-color-rgb, $action-sheet-ios-translucent-background-color-alpha) !default; +$action-sheet-ios-translucent-background-color: rgba($background-color-rgb, $action-sheet-ios-translucent-background-color-alpha); /// @prop - Border color alpha of the action sheet when translucent -$action-sheet-ios-translucent-border-color-alpha: .4 !default; +$action-sheet-ios-translucent-border-color-alpha: .4; /// @prop - Border color of the action sheet when translucent -$action-sheet-ios-translucent-border-color: rgba($background-color-rgb, $action-sheet-ios-translucent-border-color-alpha) !default; +$action-sheet-ios-translucent-border-color: rgba($background-color-rgb, $action-sheet-ios-translucent-border-color-alpha); /// @prop - Background color alpha of the activated action sheet when translucent -$action-sheet-ios-translucent-background-color-activated-alpha: .7 !default; +$action-sheet-ios-translucent-background-color-activated-alpha: .7; /// @prop - Background color of the activated action sheet when translucent -$action-sheet-ios-translucent-background-color-activated: rgba($background-color-rgb, $action-sheet-ios-translucent-background-color-activated-alpha) !default; +$action-sheet-ios-translucent-background-color-activated: rgba($background-color-rgb, $action-sheet-ios-translucent-background-color-activated-alpha); /// @prop - Filter of the translucent action-sheet group -$action-sheet-ios-group-translucent-filter: saturate(280%) blur(20px) !default; +$action-sheet-ios-group-translucent-filter: saturate(280%) blur(20px); /// @prop - Filter of the translucent action-sheet button -$action-sheet-ios-button-translucent-filter: saturate(120%) !default; +$action-sheet-ios-button-translucent-filter: saturate(120%); diff --git a/core/src/components/action-sheet/action-sheet.md.vars.scss b/core/src/components/action-sheet/action-sheet.md.vars.scss index c7d945090d3..1362052d70f 100644 --- a/core/src/components/action-sheet/action-sheet.md.vars.scss +++ b/core/src/components/action-sheet/action-sheet.md.vars.scss @@ -4,100 +4,100 @@ // -------------------------------------------------- /// @prop - Text align of the action sheet -$action-sheet-md-text-align: start !default; +$action-sheet-md-text-align: start; /// @prop - Background color of the action sheet -$action-sheet-md-background-color: $overlay-md-background-color !default; +$action-sheet-md-background-color: $overlay-md-background-color; /// @prop - Padding top of the action sheet -$action-sheet-md-padding-top: 0 !default; +$action-sheet-md-padding-top: 0; /// @prop - Padding bottom of the action sheet -$action-sheet-md-padding-bottom: var(--ion-safe-area-bottom) !default; +$action-sheet-md-padding-bottom: var(--ion-safe-area-bottom); // Action Sheet Title // -------------------------------------------------- /// @prop - Height of the action sheet title -$action-sheet-md-title-height: 60px !default; +$action-sheet-md-title-height: 60px; /// @prop - Color of the action sheet title -$action-sheet-md-title-color: rgba($text-color-rgb, 0.54) !default; +$action-sheet-md-title-color: rgba($text-color-rgb, 0.54); /// @prop - Font size of the action sheet title -$action-sheet-md-title-font-size: dynamic-font(16px) !default; +$action-sheet-md-title-font-size: dynamic-font(16px); /// @prop - Padding top of the action sheet title -$action-sheet-md-title-padding-top: 20px !default; +$action-sheet-md-title-padding-top: 20px; /// @prop - Padding end of the action sheet title -$action-sheet-md-title-padding-end: 16px !default; +$action-sheet-md-title-padding-end: 16px; /// @prop - Padding bottom of the action sheet title -$action-sheet-md-title-padding-bottom: 17px !default; +$action-sheet-md-title-padding-bottom: 17px; /// @prop - Padding start of the action sheet title -$action-sheet-md-title-padding-start: $action-sheet-md-title-padding-end !default; +$action-sheet-md-title-padding-start: $action-sheet-md-title-padding-end; // Action Sheet Subtitle // -------------------------------------------------- /// @prop - Font size of the action sheet sub title -$action-sheet-md-sub-title-font-size: dynamic-font(14px) !default; +$action-sheet-md-sub-title-font-size: dynamic-font(14px); /// @prop - Padding top of the action sheet sub title -$action-sheet-md-sub-title-padding-top: 16px !default; +$action-sheet-md-sub-title-padding-top: 16px; /// @prop - Padding end of the action sheet sub title -$action-sheet-md-sub-title-padding-end: 0 !default; +$action-sheet-md-sub-title-padding-end: 0; /// @prop - Padding bottom of the action sheet sub title -$action-sheet-md-sub-title-padding-bottom: 0 !default; +$action-sheet-md-sub-title-padding-bottom: 0; /// @prop - Padding start of the action sheet sub title -$action-sheet-md-sub-title-padding-start: $action-sheet-md-sub-title-padding-end !default; +$action-sheet-md-sub-title-padding-start: $action-sheet-md-sub-title-padding-end; // Action Sheet Button // -------------------------------------------------- /// @prop - Minimum height of the action sheet button -$action-sheet-md-button-height: 52px !default; +$action-sheet-md-button-height: 52px; /// @prop - Text color of the action sheet button -$action-sheet-md-button-text-color: $text-color-step-150 !default; +$action-sheet-md-button-text-color: $text-color-step-150; /// @prop - Font size of the action sheet button -$action-sheet-md-button-font-size: dynamic-font(16px) !default; +$action-sheet-md-button-font-size: dynamic-font(16px); /// @prop - Padding top of the action sheet button -$action-sheet-md-button-padding-top: 12px !default; +$action-sheet-md-button-padding-top: 12px; /// @prop - Padding end of the action sheet button -$action-sheet-md-button-padding-end: 16px !default; +$action-sheet-md-button-padding-end: 16px; /// @prop - Padding bottom of the action sheet button -$action-sheet-md-button-padding-bottom: $action-sheet-md-button-padding-top !default; +$action-sheet-md-button-padding-bottom: $action-sheet-md-button-padding-top; /// @prop - Padding start of the action sheet button -$action-sheet-md-button-padding-start: $action-sheet-md-button-padding-end !default; +$action-sheet-md-button-padding-start: $action-sheet-md-button-padding-end; // Action Sheet Icon // -------------------------------------------------- /// @prop - Font size of the icon in the action sheet button -$action-sheet-md-icon-font-size: dynamic-font(24px) !default; +$action-sheet-md-icon-font-size: dynamic-font(24px); /// @prop - Margin top of the icon in the action sheet button -$action-sheet-md-icon-margin-top: 0 !default; +$action-sheet-md-icon-margin-top: 0; /// @prop - Margin end of the icon in the action sheet button -$action-sheet-md-icon-margin-end: 32px !default; +$action-sheet-md-icon-margin-end: 32px; /// @prop - Margin bottom of the icon in the action sheet button -$action-sheet-md-icon-margin-bottom: 0 !default; +$action-sheet-md-icon-margin-bottom: 0; /// @prop - Margin start of the icon in the action sheet button -$action-sheet-md-icon-margin-start: 0 !default; +$action-sheet-md-icon-margin-start: 0; diff --git a/core/src/components/action-sheet/action-sheet.vars.scss b/core/src/components/action-sheet/action-sheet.vars.scss index 11cb6a28bf1..c16c2cb1e2f 100644 --- a/core/src/components/action-sheet/action-sheet.vars.scss +++ b/core/src/components/action-sheet/action-sheet.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Width of the action sheet -$action-sheet-width: 100% !default; +$action-sheet-width: 100%; /// @prop - Maximum width of the action sheet -$action-sheet-max-width: 500px !default; +$action-sheet-max-width: 500px; diff --git a/core/src/components/alert/alert.ios.vars.scss b/core/src/components/alert/alert.ios.vars.scss index b3ddac35a8d..ed913bf88d4 100644 --- a/core/src/components/alert/alert.ios.vars.scss +++ b/core/src/components/alert/alert.ios.vars.scss @@ -6,136 +6,136 @@ // -------------------------------------------------- /// @prop - Font size of the alert -$alert-ios-font-size: dynamic-font-min(1, 14px) !default; +$alert-ios-font-size: dynamic-font-min(1, 14px); /// @prop - Max width of the alert -$alert-ios-max-width: dynamic-font-clamp(1, 270px, 1.2) !default; +$alert-ios-max-width: dynamic-font-clamp(1, 270px, 1.2); /// @prop - Border radius of the alert -$alert-ios-border-radius: 13px !default; +$alert-ios-border-radius: 13px; /// @prop - Background color of the alert -$alert-ios-background-color: $overlay-ios-background-color !default; +$alert-ios-background-color: $overlay-ios-background-color; /// @prop - Background color alpha of the alert when translucent -$alert-ios-translucent-background-color-alpha: .9 !default; +$alert-ios-translucent-background-color-alpha: .9; /// @prop - Background color of the alert when translucent -$alert-ios-translucent-background-color: rgba($background-color-rgb, $alert-ios-translucent-background-color-alpha) !default; +$alert-ios-translucent-background-color: rgba($background-color-rgb, $alert-ios-translucent-background-color-alpha); /// @prop - Box shadow of the alert -$alert-ios-box-shadow: none !default; +$alert-ios-box-shadow: none; /// @prop - Padding top of the alert head -$alert-ios-head-padding-top: 12px !default; +$alert-ios-head-padding-top: 12px; /// @prop - Padding end of the alert head -$alert-ios-head-padding-end: 16px !default; +$alert-ios-head-padding-end: 16px; /// @prop - Padding bottom of the alert head -$alert-ios-head-padding-bottom: 7px !default; +$alert-ios-head-padding-bottom: 7px; /// @prop - Padding start of the alert head -$alert-ios-head-padding-start: $alert-ios-head-padding-end !default; +$alert-ios-head-padding-start: $alert-ios-head-padding-end; /// @prop - Text align of the alert head -$alert-ios-head-text-align: center !default; +$alert-ios-head-text-align: center; /// @prop - Color of the alert title -$alert-ios-title-color: $text-color !default; +$alert-ios-title-color: $text-color; /// @prop - Margin top of the alert title -$alert-ios-title-margin-top: 8px !default; +$alert-ios-title-margin-top: 8px; /// @prop - Font size of the alert title -$alert-ios-title-font-size: dynamic-font-min(1, 17px) !default; +$alert-ios-title-font-size: dynamic-font-min(1, 17px); /// @prop - Font weight of the alert title -$alert-ios-title-font-weight: 600 !default; +$alert-ios-title-font-weight: 600; /// @prop - Font size of the alert sub title -$alert-ios-sub-title-font-size: dynamic-font-min(1, 14px) !default; +$alert-ios-sub-title-font-size: dynamic-font-min(1, 14px); /// @prop - Text color of the alert sub title -$alert-ios-sub-title-text-color: $text-color-step-400 !default; +$alert-ios-sub-title-text-color: $text-color-step-400; /// @prop - Padding top of the alert message -$alert-ios-message-padding-top: 0 !default; +$alert-ios-message-padding-top: 0; /// @prop - Padding end of the alert message -$alert-ios-message-padding-end: 16px !default; +$alert-ios-message-padding-end: 16px; /// @prop - Padding bottom of the alert message -$alert-ios-message-padding-bottom: 21px !default; +$alert-ios-message-padding-bottom: 21px; /// @prop - Padding start of the alert message -$alert-ios-message-padding-start: $alert-ios-message-padding-end !default; +$alert-ios-message-padding-start: $alert-ios-message-padding-end; /// @prop - Font size of the alert message -$alert-ios-message-font-size: dynamic-font-min(1, 13px) !default; +$alert-ios-message-font-size: dynamic-font-min(1, 13px); /// @prop - Text align of the alert message -$alert-ios-message-text-align: center !default; +$alert-ios-message-text-align: center; /// @prop - Text color of the alert message -$alert-ios-message-text-color: $text-color !default; +$alert-ios-message-text-color: $text-color; /// @prop - Padding top of the alert empty message -$alert-ios-message-empty-padding-top: 0 !default; +$alert-ios-message-empty-padding-top: 0; /// @prop - Padding end of the alert empty message -$alert-ios-message-empty-padding-end: 0 !default; +$alert-ios-message-empty-padding-end: 0; /// @prop - Padding bottom of the alert empty message -$alert-ios-message-empty-padding-bottom: 12px !default; +$alert-ios-message-empty-padding-bottom: 12px; /// @prop - Padding start of the alert empty message -$alert-ios-message-empty-padding-start: 0 !default; +$alert-ios-message-empty-padding-start: 0; /// @prop - Maximum height of the alert content -$alert-ios-content-max-height: 240px !default; +$alert-ios-content-max-height: 240px; /// @prop - Margin top of the alert input -$alert-ios-input-margin-top: 10px !default; +$alert-ios-input-margin-top: 10px; /// @prop - Padding top on the alert input -$alert-ios-input-padding-top: 7px !default; +$alert-ios-input-padding-top: 7px; /// @prop - Padding end on the alert input -$alert-ios-input-padding-end: $alert-ios-input-padding-top !default; +$alert-ios-input-padding-end: $alert-ios-input-padding-top; /// @prop - Padding bottom on the alert input -$alert-ios-input-padding-bottom: $alert-ios-input-padding-top !default; +$alert-ios-input-padding-bottom: $alert-ios-input-padding-top; /// @prop - Padding start on the alert input -$alert-ios-input-padding-start: $alert-ios-input-padding-end !default; +$alert-ios-input-padding-start: $alert-ios-input-padding-end; /// @prop - Placeholder Color for input -$alert-ios-input-placeholder-color: $placeholder-text-color !default; +$alert-ios-input-placeholder-color: $placeholder-text-color; /// @prop - Border color of the alert input -$alert-ios-input-border-color: $background-color-step-250 !default; +$alert-ios-input-border-color: $background-color-step-250; /// @prop - Border of the alert input -$alert-ios-input-border: $hairlines-width solid $alert-ios-input-border-color !default; +$alert-ios-input-border: $hairlines-width solid $alert-ios-input-border-color; /// @prop - Border radius of the alert input -$alert-ios-input-border-radius: 7px !default; +$alert-ios-input-border-radius: 7px; /// @prop - Background color of the alert input -$alert-ios-input-background-color: $background-color !default; +$alert-ios-input-background-color: $background-color; /// @prop - Flex wrap of the alert button group -$alert-ios-button-group-flex-wrap: wrap !default; +$alert-ios-button-group-flex-wrap: wrap; /// @prop - Flex of the alert button -$alert-ios-button-flex: 1 1 auto !default; +$alert-ios-button-flex: 1 1 auto; /// @prop - Margin of the alert button -$alert-ios-button-margin: 0 !default; +$alert-ios-button-margin: 0; /// @prop - Min width of the alert button -$alert-ios-button-min-width: 50% !default; +$alert-ios-button-min-width: 50%; /// @prop - Height of the alert button /** @@ -147,172 +147,172 @@ $alert-ios-button-min-width: 50% !default; * a hairline (<1px) width, this will cause subpixel rendering * differences across browsers. */ -$alert-ios-button-height: dynamic-font-min(1, 44px) !default; +$alert-ios-button-height: dynamic-font-min(1, 44px); /// @prop - Padding of the alert button -$alert-ios-button-padding: 8px !default; +$alert-ios-button-padding: 8px; /// @prop - Font size of the alert button -$alert-ios-button-font-size: dynamic-font-min(1, 17px) !default; +$alert-ios-button-font-size: dynamic-font-min(1, 17px); /// @prop - Color of the text in the alert button -$alert-ios-button-text-color: ion-color(primary, base) !default; +$alert-ios-button-text-color: ion-color(primary, base); /// @prop - Destructive text color of the alert button -$alert-ios-button-destructive-text-color: ion-color(danger, base) !default; +$alert-ios-button-destructive-text-color: ion-color(danger, base); /// @prop - Background color of the alert button -$alert-ios-button-background-color: transparent !default; +$alert-ios-button-background-color: transparent; /// @prop - Background color alpha of the alert activated button -$alert-ios-button-background-color-alpha-activated: .1 !default; +$alert-ios-button-background-color-alpha-activated: .1; /// @prop - Background color of the alert activated button -$alert-ios-button-background-color-activated: rgba($text-color-rgb, $alert-ios-button-background-color-alpha-activated) !default; +$alert-ios-button-background-color-activated: rgba($text-color-rgb, $alert-ios-button-background-color-alpha-activated); /// @prop - Border width of the alert button -$alert-ios-button-border-width: $hairlines-width !default; +$alert-ios-button-border-width: $hairlines-width; /// @prop - Border style of the alert button -$alert-ios-button-border-style: solid !default; +$alert-ios-button-border-style: solid; /// @prop - Border color alpha of the alert button -$alert-ios-button-border-color-alpha: .2 !default; +$alert-ios-button-border-color-alpha: .2; /// @prop - Border color of the alert button -$alert-ios-button-border-color: rgba($text-color-rgb, $alert-ios-button-border-color-alpha) !default; +$alert-ios-button-border-color: rgba($text-color-rgb, $alert-ios-button-border-color-alpha); /// @prop - Border radius of the alert button -$alert-ios-button-border-radius: 0 !default; +$alert-ios-button-border-radius: 0; /// @prop - Font weight of the main text on the alert button -$alert-ios-button-main-font-weight: bold !default; +$alert-ios-button-main-font-weight: bold; /// @prop - Border top of the alert list -$alert-ios-list-border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color !default; +$alert-ios-list-border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color; /// @prop - Padding top on the label for the radio alert -$alert-ios-radio-label-padding-top: 13px !default; +$alert-ios-radio-label-padding-top: 13px; /// @prop - Padding end on the label for the radio alert -$alert-ios-radio-label-padding-end: $alert-ios-radio-label-padding-top !default; +$alert-ios-radio-label-padding-end: $alert-ios-radio-label-padding-top; /// @prop - Padding bottom on the label for the radio alert -$alert-ios-radio-label-padding-bottom: $alert-ios-radio-label-padding-top !default; +$alert-ios-radio-label-padding-bottom: $alert-ios-radio-label-padding-top; /// @prop - Padding start on the label for the radio alert -$alert-ios-radio-label-padding-start: $alert-ios-radio-label-padding-end !default; +$alert-ios-radio-label-padding-start: $alert-ios-radio-label-padding-end; /// @prop - Text color of the label for the radio alert -$alert-ios-radio-label-text-color: $text-color !default; +$alert-ios-radio-label-text-color: $text-color; /// @prop - Text color of the label for the checked radio alert -$alert-ios-radio-label-text-color-checked: $alert-ios-button-text-color !default; +$alert-ios-radio-label-text-color-checked: $alert-ios-button-text-color; /// @prop - Min width of the radio alert -$alert-ios-radio-min-width: 30px !default; +$alert-ios-radio-min-width: 30px; /// @prop - Top of the icon in the radio alert -$alert-ios-radio-icon-top: -7px !default; +$alert-ios-radio-icon-top: -7px; /// @prop - Start of the icon in the radio alert -$alert-ios-radio-icon-start: 7px !default; +$alert-ios-radio-icon-start: 7px; /// @prop - Width of the icon in the radio alert -$alert-ios-radio-icon-width: 6px !default; +$alert-ios-radio-icon-width: 6px; /// @prop - Height of the icon in the radio alert -$alert-ios-radio-icon-height: 12px !default; +$alert-ios-radio-icon-height: 12px; /// @prop - Border width of the icon in the radio alert -$alert-ios-radio-icon-border-width: 2px !default; +$alert-ios-radio-icon-border-width: 2px; /// @prop - Border style of the icon in the radio alert -$alert-ios-radio-icon-border-style: solid !default; +$alert-ios-radio-icon-border-style: solid; /// @prop - Border color of the icon in the radio alert -$alert-ios-radio-icon-border-color: $alert-ios-button-text-color !default; +$alert-ios-radio-icon-border-color: $alert-ios-button-text-color; /// @prop - Transform of the icon in the radio alert -$alert-ios-radio-icon-transform: rotate(45deg) !default; +$alert-ios-radio-icon-transform: rotate(45deg); /// @prop - Padding top of the label for the checkbox in the alert -$alert-ios-checkbox-label-padding-top: 13px !default; +$alert-ios-checkbox-label-padding-top: 13px; /// @prop - Padding end of the label for the checkbox in the alert -$alert-ios-checkbox-label-padding-end: $alert-ios-checkbox-label-padding-top !default; +$alert-ios-checkbox-label-padding-end: $alert-ios-checkbox-label-padding-top; /// @prop - Padding bottom of the label for the checkbox in the alert -$alert-ios-checkbox-label-padding-bottom: $alert-ios-checkbox-label-padding-top !default; +$alert-ios-checkbox-label-padding-bottom: $alert-ios-checkbox-label-padding-top; /// @prop - Padding start of the label for the checkbox in the alert -$alert-ios-checkbox-label-padding-start: $alert-ios-checkbox-label-padding-end !default; +$alert-ios-checkbox-label-padding-start: $alert-ios-checkbox-label-padding-end; /// @prop - Text color of the label for the checkbox in the alert -$alert-ios-checkbox-label-text-color: $text-color !default; +$alert-ios-checkbox-label-text-color: $text-color; /// @prop - Margin top of the checkbox in the alert -$alert-ios-checkbox-margin-top: 10px !default; +$alert-ios-checkbox-margin-top: 10px; /// @prop - Margin end of the checkbox in the alert -$alert-ios-checkbox-margin-end: 6px !default; +$alert-ios-checkbox-margin-end: 6px; /// @prop - Margin bottom of the checkbox in the alert -$alert-ios-checkbox-margin-bottom: 10px !default; +$alert-ios-checkbox-margin-bottom: 10px; /// @prop - Margin start of the checkbox in the alert -$alert-ios-checkbox-margin-start: 16px !default; +$alert-ios-checkbox-margin-start: 16px; /// @prop - Size of the checkbox in the alert -$alert-ios-checkbox-size: dynamic-font-max(22px, 2.538) !default; +$alert-ios-checkbox-size: dynamic-font-max(22px, 2.538); /// @prop - Border width of the checkbox in the alert -$alert-ios-checkbox-border-width: dynamic-font(2px) !default; +$alert-ios-checkbox-border-width: dynamic-font(2px); /// @prop - Border style of the checkbox in the alert -$alert-ios-checkbox-border-style: solid !default; +$alert-ios-checkbox-border-style: solid; /// @prop - Border radius of the checkbox in the alert -$alert-ios-checkbox-border-radius: 50% !default; +$alert-ios-checkbox-border-radius: 50%; /// @prop - Border color of the checkbox in the alert when off -$alert-ios-checkbox-border-color-off: $item-ios-border-color !default; +$alert-ios-checkbox-border-color-off: $item-ios-border-color; /// @prop - Border color of the checkbox in the alert when on -$alert-ios-checkbox-border-color-on: ion-color(primary, base) !default; +$alert-ios-checkbox-border-color-on: ion-color(primary, base); /// @prop - Background color of the checkbox in the alert when off -$alert-ios-checkbox-background-color-off: $item-ios-background !default; +$alert-ios-checkbox-background-color-off: $item-ios-background; /// @prop - Background color of the checkbox in the alert when on -$alert-ios-checkbox-background-color-on: ion-color(primary, base) !default; +$alert-ios-checkbox-background-color-on: ion-color(primary, base); /// @prop - Top of the icon in the checkbox alert -$alert-ios-checkbox-icon-top: calc($alert-ios-checkbox-size / 8) !default; +$alert-ios-checkbox-icon-top: calc($alert-ios-checkbox-size / 8); /// @prop - Start of the icon in the checkbox alert -$alert-ios-checkbox-icon-start: calc($alert-ios-checkbox-size / 3) !default; +$alert-ios-checkbox-icon-start: calc($alert-ios-checkbox-size / 3); /// @prop - Width of the icon in the checkbox alert -$alert-ios-checkbox-icon-width: calc($alert-ios-checkbox-size / 6 + 1px) !default; +$alert-ios-checkbox-icon-width: calc($alert-ios-checkbox-size / 6 + 1px); /// @prop - Height of the icon in the checkbox alert -$alert-ios-checkbox-icon-height: calc($alert-ios-checkbox-size * 0.5) !default; +$alert-ios-checkbox-icon-height: calc($alert-ios-checkbox-size * 0.5); /// @prop - Border width of the icon in the checkbox alert -$alert-ios-checkbox-icon-border-width: $alert-ios-checkbox-border-width !default; +$alert-ios-checkbox-icon-border-width: $alert-ios-checkbox-border-width; /// @prop - Border style of the icon in the checkbox alert -$alert-ios-checkbox-icon-border-style: $alert-ios-checkbox-border-style !default; +$alert-ios-checkbox-icon-border-style: $alert-ios-checkbox-border-style; /// @prop - Border color of the icon in the checkbox alert -$alert-ios-checkbox-icon-border-color: $background-color !default; +$alert-ios-checkbox-icon-border-color: $background-color; /// @prop - Transform of the icon in the checkbox alert -$alert-ios-checkbox-icon-transform: rotate(45deg) !default; +$alert-ios-checkbox-icon-transform: rotate(45deg); /// @prop - Filter of the translucent alert -$alert-ios-translucent-filter: saturate(180%) blur(20px) !default; +$alert-ios-translucent-filter: saturate(180%) blur(20px); /// @prop - Height of the tappable inputs in the checkbox alert -$alert-ios-tappable-height: $item-ios-min-height !default; +$alert-ios-tappable-height: $item-ios-min-height; diff --git a/core/src/components/alert/alert.md.vars.scss b/core/src/components/alert/alert.md.vars.scss index 86965476ff3..5f56d9161da 100644 --- a/core/src/components/alert/alert.md.vars.scss +++ b/core/src/components/alert/alert.md.vars.scss @@ -5,10 +5,10 @@ // -------------------------------------------------- /// @prop - Font size of the alert -$alert-md-font-size: dynamic-font(14px) !default; +$alert-md-font-size: dynamic-font(14px); /// @prop - Max width of the alert -$alert-md-max-width: 280px !default; +$alert-md-max-width: 280px; /// @prop - Max width of the alert on a tablet /** @@ -19,313 +19,313 @@ $alert-md-max-width: 280px !default; * 3. The height can increase up to 560px. * Source: https://m2.material.io/components/dialogs#behavior */ -$alert-md-max-width-tablet: min(calc(100vw - 96px), 560px) !default; +$alert-md-max-width-tablet: min(calc(100vw - 96px), 560px); /// @prop - Max width of the alert on a tablet -$alert-md-max-height-tablet: min(calc(100vh - 96px), 560px) !default; +$alert-md-max-height-tablet: min(calc(100vh - 96px), 560px); /// @prop - Border radius of the alert -$alert-md-border-radius: 4px !default; +$alert-md-border-radius: 4px; /// @prop - Background color of the alert -$alert-md-background-color: $overlay-md-background-color !default; +$alert-md-background-color: $overlay-md-background-color; /// @prop - Box shadow color of the alert -$alert-md-box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12) !default; +$alert-md-box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12); /// @prop - Padding top of the alert head -$alert-md-head-padding-top: 20px !default; +$alert-md-head-padding-top: 20px; /// @prop - Padding end of the alert head -$alert-md-head-padding-end: 23px !default; +$alert-md-head-padding-end: 23px; /// @prop - Padding bottom of the alert head -$alert-md-head-padding-bottom: 15px !default; +$alert-md-head-padding-bottom: 15px; /// @prop - Padding start of the alert head -$alert-md-head-padding-start: $alert-md-head-padding-end !default; +$alert-md-head-padding-start: $alert-md-head-padding-end; /// @prop - Text align of the alert head -$alert-md-head-text-align: start !default; +$alert-md-head-text-align: start; /// @prop - Color of the alert title -$alert-md-title-color: $text-color !default; +$alert-md-title-color: $text-color; /// @prop - Font size of the alert title -$alert-md-title-font-size: dynamic-font(20px) !default; +$alert-md-title-font-size: dynamic-font(20px); /// @prop - Font weight of the alert title -$alert-md-title-font-weight: 500 !default; +$alert-md-title-font-weight: 500; /// @prop - Font size of the alert sub title -$alert-md-sub-title-font-size: dynamic-font(16px) !default; +$alert-md-sub-title-font-size: dynamic-font(16px); /// @prop - Text color of the alert sub title -$alert-md-sub-title-text-color: $text-color !default; +$alert-md-sub-title-text-color: $text-color; /// @prop - Padding top of the alert message -$alert-md-message-padding-top: 20px !default; +$alert-md-message-padding-top: 20px; /// @prop - Padding end of the alert message -$alert-md-message-padding-end: 24px !default; +$alert-md-message-padding-end: 24px; /// @prop - Padding bottom of the alert message -$alert-md-message-padding-bottom: $alert-md-message-padding-top !default; +$alert-md-message-padding-bottom: $alert-md-message-padding-top; /// @prop - Padding start of the alert message -$alert-md-message-padding-start: $alert-md-message-padding-end !default; +$alert-md-message-padding-start: $alert-md-message-padding-end; /// @prop - Font size of the alert message -$alert-md-message-font-size: dynamic-font(16px) !default; +$alert-md-message-font-size: dynamic-font(16px); /// @prop - Text color of the alert message -$alert-md-message-text-color: $text-color-step-450 !default; +$alert-md-message-text-color: $text-color-step-450; /// @prop - Padding top of the alert empty message -$alert-md-message-empty-padding-top: 0 !default; +$alert-md-message-empty-padding-top: 0; /// @prop - Padding end of the alert empty message -$alert-md-message-empty-padding-end: $alert-md-message-empty-padding-top !default; +$alert-md-message-empty-padding-end: $alert-md-message-empty-padding-top; /// @prop - Padding bottom of the alert empty message -$alert-md-message-empty-padding-bottom: $alert-md-message-empty-padding-top !default; +$alert-md-message-empty-padding-bottom: $alert-md-message-empty-padding-top; /// @prop - Padding start of the alert empty message -$alert-md-message-empty-padding-start: $alert-md-message-empty-padding-end !default; +$alert-md-message-empty-padding-start: $alert-md-message-empty-padding-end; /// @prop - Maximum height of the alert content -$alert-md-content-max-height: 266px !default; +$alert-md-content-max-height: 266px; /// @prop - Border width of the alert input -$alert-md-input-border-width: 1px !default; +$alert-md-input-border-width: 1px; /// @prop - Border style of the alert input -$alert-md-input-border-style: solid !default; +$alert-md-input-border-style: solid; /// @prop - Border color of the alert input -$alert-md-input-border-color: $background-color-step-150 !default; +$alert-md-input-border-color: $background-color-step-150; /// @prop - Text color of the alert input -$alert-md-input-text-color: $text-color !default; +$alert-md-input-text-color: $text-color; /// @prop - Border width of the alert input when focused -$alert-md-input-border-width-focused: 2px !default; +$alert-md-input-border-width-focused: 2px; /// @prop - Border style of the alert input when focused -$alert-md-input-border-style-focused: $alert-md-input-border-style !default; +$alert-md-input-border-style-focused: $alert-md-input-border-style; /// @prop - Border color of the alert input when focused -$alert-md-input-border-color-focused: ion-color(primary, base) !default; +$alert-md-input-border-color-focused: ion-color(primary, base); /// @prop - Margin top of the alert input -$alert-md-input-margin-top: 5px !default; +$alert-md-input-margin-top: 5px; /// @prop - Margin end of the alert input -$alert-md-input-margin-end: 0 !default; +$alert-md-input-margin-end: 0; /// @prop - Margin bottom of the alert input -$alert-md-input-margin-bottom: 5px !default; +$alert-md-input-margin-bottom: 5px; /// @prop - Margin start of the alert input -$alert-md-input-margin-start: 0 !default; +$alert-md-input-margin-start: 0; /// @prop - Placeholder Color for input -$alert-md-input-placeholder-color: $placeholder-text-color !default; +$alert-md-input-placeholder-color: $placeholder-text-color; /// @prop - Flex wrap of the alert button group -$alert-md-button-group-flex-wrap: wrap-reverse !default; +$alert-md-button-group-flex-wrap: wrap-reverse; /// @prop - Justify content of the alert button group -$alert-md-button-group-justify-content: flex-end !default; +$alert-md-button-group-justify-content: flex-end; /// @prop - Padding top of the alert button -$alert-md-button-padding-top: 10px !default; +$alert-md-button-padding-top: 10px; /// @prop - Padding end of the alert button -$alert-md-button-padding-end: $alert-md-button-padding-top !default; +$alert-md-button-padding-end: $alert-md-button-padding-top; /// @prop - Padding bottom of the alert button -$alert-md-button-padding-bottom: $alert-md-button-padding-top !default; +$alert-md-button-padding-bottom: $alert-md-button-padding-top; /// @prop - Padding start of the alert button -$alert-md-button-padding-start: $alert-md-button-padding-end !default; +$alert-md-button-padding-start: $alert-md-button-padding-end; /// @prop - Margin top of the alert button -$alert-md-button-margin-top: 0 !default; +$alert-md-button-margin-top: 0; /// @prop - Margin end of the alert button -$alert-md-button-margin-end: 8px !default; +$alert-md-button-margin-end: 8px; /// @prop - Margin bottom of the alert button -$alert-md-button-margin-bottom: 0 !default; +$alert-md-button-margin-bottom: 0; /// @prop - Margin start of the alert button -$alert-md-button-margin-start: 0 !default; +$alert-md-button-margin-start: 0; /// @prop - Font weight of the alert button -$alert-md-button-font-weight: 500 !default; +$alert-md-button-font-weight: 500; /// @prop - Text color of the alert button -$alert-md-button-text-color: ion-color(primary, base) !default; +$alert-md-button-text-color: ion-color(primary, base); /// @prop - Background color of the alert button -$alert-md-button-background-color: transparent !default; +$alert-md-button-background-color: transparent; /// @prop - Border radius of the alert button -$alert-md-button-border-radius: 2px !default; +$alert-md-button-border-radius: 2px; /// @prop - Text transform of the alert button -$alert-md-button-text-transform: uppercase !default; +$alert-md-button-text-transform: uppercase; /// @prop - Text align of the alert button -$alert-md-button-text-align: end !default; +$alert-md-button-text-align: end; /// @prop - Border top of the alert list -$alert-md-list-border-top: 1px solid $alert-md-input-border-color !default; +$alert-md-list-border-top: 1px solid $alert-md-input-border-color; /// @prop - Border bottom of the alert list -$alert-md-list-border-bottom: $alert-md-list-border-top !default; +$alert-md-list-border-bottom: $alert-md-list-border-top; /// @prop - Top of the alert radio -$alert-md-radio-top: 0 !default; +$alert-md-radio-top: 0; /// @prop - Left of the alert radio -$alert-md-radio-left: 26px !default; +$alert-md-radio-left: 26px; /// @prop - Width of the alert radio -$alert-md-radio-width: 20px !default; +$alert-md-radio-width: 20px; /// @prop - Height of the alert radio -$alert-md-radio-height: $alert-md-radio-width !default; +$alert-md-radio-height: $alert-md-radio-width; /// @prop - Border width of the alert radio -$alert-md-radio-border-width: 2px !default; +$alert-md-radio-border-width: 2px; /// @prop - Border style of the alert radio -$alert-md-radio-border-style: solid !default; +$alert-md-radio-border-style: solid; /// @prop - Border radius of the alert radio -$alert-md-radio-border-radius: 50% !default; +$alert-md-radio-border-radius: 50%; /// @prop - Border color of the alert radio when off -$alert-md-radio-border-color-off: $background-color-step-550 !default; +$alert-md-radio-border-color-off: $background-color-step-550; /// @prop - Border color of the alert radio when on -$alert-md-radio-border-color-on: $alert-md-button-text-color !default; +$alert-md-radio-border-color-on: $alert-md-button-text-color; /// @prop - Width of the icon in the alert radio -$alert-md-radio-icon-width: $alert-md-radio-width * 0.5 !default; +$alert-md-radio-icon-width: $alert-md-radio-width * 0.5; /// @prop - Height of the icon in the alert radio -$alert-md-radio-icon-height: $alert-md-radio-icon-width !default; +$alert-md-radio-icon-height: $alert-md-radio-icon-width; /// @prop - Top of the icon in the alert radio -$alert-md-radio-icon-top: ($alert-md-radio-width - $alert-md-radio-icon-width - $alert-md-radio-border-width * 2) * 0.5 !default; +$alert-md-radio-icon-top: ($alert-md-radio-width - $alert-md-radio-icon-width - $alert-md-radio-border-width * 2) * 0.5; /// @prop - Start of the icon in the radio alert -$alert-md-radio-icon-start: $alert-md-radio-icon-top !default; +$alert-md-radio-icon-start: $alert-md-radio-icon-top; /// @prop - Border radius of the icon in the alert radio -$alert-md-radio-icon-border-radius: $alert-md-radio-border-radius !default; +$alert-md-radio-icon-border-radius: $alert-md-radio-border-radius; /// @prop - Transform of the icon in the alert radio when off -$alert-md-radio-icon-transform-off: scale3d(0, 0, 0) !default; +$alert-md-radio-icon-transform-off: scale3d(0, 0, 0); /// @prop - Transform of the icon in the alert radio when on -$alert-md-radio-icon-transform-on: scale3d(1, 1, 1) !default; +$alert-md-radio-icon-transform-on: scale3d(1, 1, 1); /// @prop - Transition of the icon in the alert radio -$alert-md-radio-icon-transition: transform 280ms cubic-bezier(.4, 0, .2, 1) !default; +$alert-md-radio-icon-transition: transform 280ms cubic-bezier(.4, 0, .2, 1); /// @prop - Padding top on the label for the radio alert -$alert-md-radio-label-padding-top: 13px !default; +$alert-md-radio-label-padding-top: 13px; /// @prop - Padding end on the label for the radio alert -$alert-md-radio-label-padding-end: 26px !default; +$alert-md-radio-label-padding-end: 26px; /// @prop - Padding bottom on the label for the radio alert -$alert-md-radio-label-padding-bottom: $alert-md-radio-label-padding-top !default; +$alert-md-radio-label-padding-bottom: $alert-md-radio-label-padding-top; /// @prop - Padding start on the label for the radio alert -$alert-md-radio-label-padding-start: $alert-md-radio-label-padding-end + 26px !default; +$alert-md-radio-label-padding-start: $alert-md-radio-label-padding-end + 26px; /// @prop - Font size of the label for the radio alert -$alert-md-radio-label-font-size: dynamic-font(16px) !default; +$alert-md-radio-label-font-size: dynamic-font(16px); /// @prop - Text color of the label for the radio alert -$alert-md-radio-label-text-color: $text-color-step-150 !default; +$alert-md-radio-label-text-color: $text-color-step-150; /// @prop - Text color of the label for the checked radio alert -$alert-md-radio-label-text-color-checked: $alert-md-radio-label-text-color !default; +$alert-md-radio-label-text-color-checked: $alert-md-radio-label-text-color; /// @prop - Top of the checkbox in the alert -$alert-md-checkbox-top: 0 !default; +$alert-md-checkbox-top: 0; /// @prop - Left of the checkbox in the alert -$alert-md-checkbox-left: 26px !default; +$alert-md-checkbox-left: 26px; /// @prop - Width of the checkbox in the alert -$alert-md-checkbox-width: 16px !default; +$alert-md-checkbox-width: 16px; /// @prop - Height of the checkbox in the alert -$alert-md-checkbox-height: 16px !default; +$alert-md-checkbox-height: 16px; /// @prop - Border width of the checkbox in the alert -$alert-md-checkbox-border-width: 2px !default; +$alert-md-checkbox-border-width: 2px; /// @prop - Border style of the checkbox in the alert -$alert-md-checkbox-border-style: solid !default; +$alert-md-checkbox-border-style: solid; /// @prop - Border radius of the checkbox in the alert -$alert-md-checkbox-border-radius: 2px !default; +$alert-md-checkbox-border-radius: 2px; /// @prop - Border color of the checkbox in the alert when off -$alert-md-checkbox-border-color-off: $background-color-step-550 !default; +$alert-md-checkbox-border-color-off: $background-color-step-550; /// @prop - Border color of the checkbox in the alert when on -$alert-md-checkbox-border-color-on: $alert-md-button-text-color !default; +$alert-md-checkbox-border-color-on: $alert-md-button-text-color; /// @prop - Top of the icon in the checkbox alert -$alert-md-checkbox-icon-top: 0 !default; +$alert-md-checkbox-icon-top: 0; /// @prop - Start of the icon in the checkbox alert -$alert-md-checkbox-icon-start: 3px !default; +$alert-md-checkbox-icon-start: 3px; /// @prop - Width of the icon in the checkbox alert -$alert-md-checkbox-icon-width: 6px !default; +$alert-md-checkbox-icon-width: 6px; /// @prop - Height of the icon in the checkbox alert -$alert-md-checkbox-icon-height: 10px !default; +$alert-md-checkbox-icon-height: 10px; /// @prop - Border width of the icon in the checkbox alert -$alert-md-checkbox-icon-border-width: 2px !default; +$alert-md-checkbox-icon-border-width: 2px; /// @prop - Border style of the icon in the checkbox alert -$alert-md-checkbox-icon-border-style: solid !default; +$alert-md-checkbox-icon-border-style: solid; /// @prop - Border color of the icon in the checkbox alert -$alert-md-checkbox-icon-border-color: ion-color(primary, contrast) !default; +$alert-md-checkbox-icon-border-color: ion-color(primary, contrast); /// @prop - Transform of the icon in the checkbox alert -$alert-md-checkbox-icon-transform: rotate(45deg) !default; +$alert-md-checkbox-icon-transform: rotate(45deg); /// @prop - Padding top of the label for the checkbox in the alert -$alert-md-checkbox-label-padding-top: 13px !default; +$alert-md-checkbox-label-padding-top: 13px; /// @prop - Padding end of the label for the checkbox in the alert -$alert-md-checkbox-label-padding-end: $alert-md-checkbox-left !default; +$alert-md-checkbox-label-padding-end: $alert-md-checkbox-left; /// @prop - Padding bottom of the label for the checkbox in the alert -$alert-md-checkbox-label-padding-bottom: $alert-md-checkbox-label-padding-top !default; +$alert-md-checkbox-label-padding-bottom: $alert-md-checkbox-label-padding-top; /// @prop - Padding start of the label for the checkbox in the alert -$alert-md-checkbox-label-padding-start: $alert-md-checkbox-label-padding-end + 27px !default; +$alert-md-checkbox-label-padding-start: $alert-md-checkbox-label-padding-end + 27px; /// @prop - Text color of the label for the checkbox in the alert -$alert-md-checkbox-label-text-color: $text-color-step-150 !default; +$alert-md-checkbox-label-text-color: $text-color-step-150; /// @prop - Font size of the label for the checkbox in the alert -$alert-md-checkbox-label-font-size: dynamic-font(16px) !default; +$alert-md-checkbox-label-font-size: dynamic-font(16px); /// @prop - Height of the tappable inputs in the checkbox alert -$alert-md-tappable-height: $item-md-min-height !default; +$alert-md-tappable-height: $item-md-min-height; diff --git a/core/src/components/alert/alert.vars.scss b/core/src/components/alert/alert.vars.scss index c37269f65cb..b996b03dcf6 100644 --- a/core/src/components/alert/alert.vars.scss +++ b/core/src/components/alert/alert.vars.scss @@ -4,16 +4,16 @@ // -------------------------------------------------- /// @prop - Minimum width of the alert -$alert-min-width: 250px !default; +$alert-min-width: 250px; /// @prop - Maximum height of the alert -$alert-max-height: 90% !default; +$alert-max-height: 90%; /// @prop - Line height of the alert button -$alert-button-line-height: dynamic-font(20px) !default; +$alert-button-line-height: dynamic-font(20px); /// @prop - Font size of the alert button -$alert-button-font-size: dynamic-font(14px) !default; +$alert-button-font-size: dynamic-font(14px); /// @prop - Minimum height of a textarea in the alert -$alert-input-min-height: 37px !default; +$alert-input-min-height: 37px; diff --git a/core/src/components/avatar/avatar.ios.vars.scss b/core/src/components/avatar/avatar.ios.vars.scss index 4a8a931c7b7..29794686501 100644 --- a/core/src/components/avatar/avatar.ios.vars.scss +++ b/core/src/components/avatar/avatar.ios.vars.scss @@ -5,10 +5,10 @@ // -------------------------------------------------- /// @prop - Width of the avatar -$avatar-ios-width: 48px !default; +$avatar-ios-width: 48px; /// @prop - Height of the avatar -$avatar-ios-height: $avatar-ios-width !default; +$avatar-ios-height: $avatar-ios-width; /// @prop - Border radius of the avatar -$avatar-ios-border-radius: 50% !default; +$avatar-ios-border-radius: 50%; diff --git a/core/src/components/avatar/avatar.md.vars.scss b/core/src/components/avatar/avatar.md.vars.scss index f397e61c4bb..87e2afd1f30 100644 --- a/core/src/components/avatar/avatar.md.vars.scss +++ b/core/src/components/avatar/avatar.md.vars.scss @@ -5,10 +5,10 @@ // -------------------------------------------------- /// @prop - Width of the avatar -$avatar-md-width: 64px !default; +$avatar-md-width: 64px; /// @prop - Height of the avatar -$avatar-md-height: $avatar-md-width !default; +$avatar-md-height: $avatar-md-width; /// @prop - Border radius of the avatar -$avatar-md-border-radius: 50% !default; +$avatar-md-border-radius: 50%; diff --git a/core/src/components/back-button/back-button.ios.vars.scss b/core/src/components/back-button/back-button.ios.vars.scss index 8793d741f28..a63366c5686 100644 --- a/core/src/components/back-button/back-button.ios.vars.scss +++ b/core/src/components/back-button/back-button.ios.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Z index of the back button -$back-button-ios-button-z-index: $z-index-toolbar-buttons !default; +$back-button-ios-button-z-index: $z-index-toolbar-buttons; /// @prop - Text color of the back button -$back-button-ios-color: ion-color(primary, base) !default; +$back-button-ios-color: ion-color(primary, base); diff --git a/core/src/components/back-button/back-button.md.vars.scss b/core/src/components/back-button/back-button.md.vars.scss index c7ce25cbb9d..36ad7abe80e 100644 --- a/core/src/components/back-button/back-button.md.vars.scss +++ b/core/src/components/back-button/back-button.md.vars.scss @@ -4,4 +4,4 @@ // -------------------------------------------------- /// @prop - Text color of the back button -$back-button-md-color: currentColor !default; +$back-button-md-color: currentColor; diff --git a/core/src/components/badge/badge.ios.vars.scss b/core/src/components/badge/badge.ios.vars.scss index 73dc0be8f7f..ec21f97ca10 100644 --- a/core/src/components/badge/badge.ios.vars.scss +++ b/core/src/components/badge/badge.ios.vars.scss @@ -4,4 +4,4 @@ // -------------------------------------------------- /// @prop - Border radius of the badge -$badge-ios-border-radius: 10px !default; +$badge-ios-border-radius: 10px; diff --git a/core/src/components/badge/badge.md.vars.scss b/core/src/components/badge/badge.md.vars.scss index 90516314ecf..350b948417e 100644 --- a/core/src/components/badge/badge.md.vars.scss +++ b/core/src/components/badge/badge.md.vars.scss @@ -4,4 +4,4 @@ // -------------------------------------------------- /// @prop - Border radius of the badge -$badge-md-border-radius: 4px !default; +$badge-md-border-radius: 4px; diff --git a/core/src/components/badge/badge.vars.scss b/core/src/components/badge/badge.vars.scss index ebaa3490a5a..a8ff7e2f6ea 100644 --- a/core/src/components/badge/badge.vars.scss +++ b/core/src/components/badge/badge.vars.scss @@ -4,25 +4,25 @@ // -------------------------------------------------- /// @prop - Padding top of the badge -$badge-padding-top: 3px !default; +$badge-padding-top: 3px; /// @prop - Padding end of the badge -$badge-padding-end: 8px !default; +$badge-padding-end: 8px; /// @prop - Padding bottom of the badge -$badge-padding-bottom: $badge-padding-top !default; +$badge-padding-bottom: $badge-padding-top; /// @prop - Padding start of the badge -$badge-padding-start: $badge-padding-end !default; +$badge-padding-start: $badge-padding-end; /// @prop - Minimum width of the badge -$badge-min-width: 10px !default; +$badge-min-width: 10px; /// @prop - Baseline font size of the badge -$badge-baseline-font-size: 13px !default; +$badge-baseline-font-size: 13px; /// @prop - Font size of the badge -$badge-font-size: dynamic-font($badge-baseline-font-size) !default; +$badge-font-size: dynamic-font($badge-baseline-font-size); /// @prop - Font weight of the badge -$badge-font-weight: bold !default; +$badge-font-weight: bold; diff --git a/core/src/components/breadcrumb/breadcrumb.ios.vars.scss b/core/src/components/breadcrumb/breadcrumb.ios.vars.scss index 97a91a74ccf..61619ef46d1 100644 --- a/core/src/components/breadcrumb/breadcrumb.ios.vars.scss +++ b/core/src/components/breadcrumb/breadcrumb.ios.vars.scss @@ -4,31 +4,31 @@ // -------------------------------------------------- /// @prop - Color of the breadcrumb -$breadcrumb-ios-color: var(--ion-color-step-850, var(--ion-text-color-step-150, #2d4665)) !default; +$breadcrumb-ios-color: var(--ion-color-step-850, var(--ion-text-color-step-150, #2d4665)); /// @prop - Color of the active breadcrumb -$breadcrumb-ios-color-active: var(--ion-text-color, #03060b) !default; +$breadcrumb-ios-color-active: var(--ion-text-color, #03060b); /// @prop - Background color of the focused breadcrumb -$breadcrumb-ios-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, rgba(233, 237, 243, 0.7))) !default; +$breadcrumb-ios-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, rgba(233, 237, 243, 0.7))); /// @prop - Color of the breadcrumb icon -$breadcrumb-ios-icon-color: var(--ion-color-step-400, var(--ion-text-color-step-600, #92a0b3)) !default; +$breadcrumb-ios-icon-color: var(--ion-color-step-400, var(--ion-text-color-step-600, #92a0b3)); /// @prop - Color of the breadcrumb icon when active -$breadcrumb-ios-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #242d39)) !default; +$breadcrumb-ios-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #242d39)); /// @prop - Color of the breadcrumb icon when focused -$breadcrumb-ios-icon-color-focused: var(--ion-color-step-750, var(--ion-text-color-step-250, #445b78)) !default; +$breadcrumb-ios-icon-color-focused: var(--ion-color-step-750, var(--ion-text-color-step-250, #445b78)); /// @prop - Color of the breadcrumb separator -$breadcrumb-ios-separator-color: $breadcrumb-separator-color !default; +$breadcrumb-ios-separator-color: $breadcrumb-separator-color; /// @prop - Color of the breadcrumb indicator -$breadcrumb-ios-indicator-color: $breadcrumb-ios-separator-color !default; +$breadcrumb-ios-indicator-color: $breadcrumb-ios-separator-color; /// @prop - Background color of the breadcrumb indicator -$breadcrumb-ios-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e9edf3)) !default; +$breadcrumb-ios-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e9edf3)); /// @prop - Background color of the breadcrumb indicator when focused -$breadcrumb-ios-indicator-background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9e0ea)) !default; +$breadcrumb-ios-indicator-background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9e0ea)); diff --git a/core/src/components/breadcrumb/breadcrumb.md.vars.scss b/core/src/components/breadcrumb/breadcrumb.md.vars.scss index d638047353d..0b96adeed1a 100644 --- a/core/src/components/breadcrumb/breadcrumb.md.vars.scss +++ b/core/src/components/breadcrumb/breadcrumb.md.vars.scss @@ -4,43 +4,43 @@ // -------------------------------------------------- /// @prop - Color of the breadcrumb -$breadcrumb-md-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #677483)) !default; +$breadcrumb-md-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #677483)); /// @prop - Color of the active breadcrumb -$breadcrumb-md-color-active: var(--ion-text-color, #03060b) !default; +$breadcrumb-md-color-active: var(--ion-text-color, #03060b); /// @prop - Color of the focused breadcrumb -$breadcrumb-md-color-focused: var(--ion-color-step-800, var(--ion-text-color-step-200, #35404e)) !default; +$breadcrumb-md-color-focused: var(--ion-color-step-800, var(--ion-text-color-step-200, #35404e)); /// @prop - Background color of the focused breadcrumb -$breadcrumb-md-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, #fff)) !default; +$breadcrumb-md-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, #fff)); /// @prop - Color of the breadcrumb icon -$breadcrumb-md-icon-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #7d8894)) !default; +$breadcrumb-md-icon-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #7d8894)); /// @prop - Color of the breadcrumb icon when active -$breadcrumb-md-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #222d3a)) !default; +$breadcrumb-md-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #222d3a)); /// @prop - Margin top of the breadcrumb separator -$breadcrumb-md-separator-margin-top: -1px !default; +$breadcrumb-md-separator-margin-top: -1px; /// @prop - Margin end of the breadcrumb separator -$breadcrumb-md-separator-margin-end: 10px !default; +$breadcrumb-md-separator-margin-end: 10px; /// @prop - Margin bottom of the breadcrumb separator -$breadcrumb-md-separator-margin-bottom: null !default; +$breadcrumb-md-separator-margin-bottom: null; /// @prop - Margin start of the breadcrumb separator -$breadcrumb-md-separator-margin-start: 10px !default; +$breadcrumb-md-separator-margin-start: 10px; /// @prop - Color of the breadcrumb separator -$breadcrumb-md-separator-color: $breadcrumb-separator-color !default; +$breadcrumb-md-separator-color: $breadcrumb-separator-color; /// @prop - Color of the breadcrumb indicator -$breadcrumb-md-indicator-color: $breadcrumb-md-separator-color !default; +$breadcrumb-md-indicator-color: $breadcrumb-md-separator-color; /// @prop - Background color of the breadcrumb indicator -$breadcrumb-md-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #eef1f3)) !default; +$breadcrumb-md-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #eef1f3)); /// @prop - Background color of the breadcrumb indicator when focused -$breadcrumb-md-indicator-background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #dfe5e8)) !default; +$breadcrumb-md-indicator-background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #dfe5e8)); diff --git a/core/src/components/breadcrumb/breadcrumb.vars.scss b/core/src/components/breadcrumb/breadcrumb.vars.scss index 43129a30d9f..6ead8b96f11 100644 --- a/core/src/components/breadcrumb/breadcrumb.vars.scss +++ b/core/src/components/breadcrumb/breadcrumb.vars.scss @@ -4,12 +4,12 @@ // -------------------------------------------------- /// @prop - Font weight of the breadcrumb -$breadcrumb-font-weight: 400 !default; +$breadcrumb-font-weight: 400; -$breadcrumb-baseline-font-size: 16px !default; +$breadcrumb-baseline-font-size: 16px; /// @prop - Font size of the breadcrumb -$breadcrumb-font-size: dynamic-font($breadcrumb-baseline-font-size) !default; +$breadcrumb-font-size: dynamic-font($breadcrumb-baseline-font-size); /// @prop - Color of the breadcrumb separator -$breadcrumb-separator-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a)) !default; +$breadcrumb-separator-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a)); diff --git a/core/src/components/button/button.ios.vars.scss b/core/src/components/button/button.ios.vars.scss index 9b49c47e4cd..7cae8c15f4e 100644 --- a/core/src/components/button/button.ios.vars.scss +++ b/core/src/components/button/button.ios.vars.scss @@ -4,108 +4,108 @@ // -------------------------------------------------- /// @prop - Margin top of the button -$button-ios-margin-top: 4px !default; +$button-ios-margin-top: 4px; /// @prop - Margin end of the button -$button-ios-margin-end: 2px !default; +$button-ios-margin-end: 2px; /// @prop - Margin bottom of the button -$button-ios-margin-bottom: 4px !default; +$button-ios-margin-bottom: 4px; /// @prop - Margin start of the button -$button-ios-margin-start: 2px !default; +$button-ios-margin-start: 2px; /// @prop - Padding top of the button -$button-ios-padding-top: 13px !default; +$button-ios-padding-top: 13px; /// @prop - Padding end of the button -$button-ios-padding-end: 1em !default; +$button-ios-padding-end: 1em; /// @prop - Padding bottom of the button -$button-ios-padding-bottom: $button-ios-padding-top !default; +$button-ios-padding-bottom: $button-ios-padding-top; /// @prop - Padding start of the button -$button-ios-padding-start: $button-ios-padding-end !default; +$button-ios-padding-start: $button-ios-padding-end; /// @prop - Minimum height of the button -$button-ios-min-height: 3.1em !default; +$button-ios-min-height: 3.1em; /// @prop - Border radius of the button -$button-ios-border-radius: 14px !default; +$button-ios-border-radius: 14px; /// @prop - Font size of the button text /// The maximum font size is calculated by taking the default font size /// and multiplying it by 3, since 310% of the default is the maximum -$button-ios-font-size: dynamic-font-max(16px, 3) !default; +$button-ios-font-size: dynamic-font-max(16px, 3); /// @prop - Font weight of the button text -$button-ios-font-weight: 500 !default; +$button-ios-font-weight: 500; // iOS Large Button // -------------------------------------------------- /// @prop - Padding top of the large button -$button-ios-large-padding-top: 17px !default; +$button-ios-large-padding-top: 17px; /// @prop - Padding end of the large button -$button-ios-large-padding-end: 1em !default; +$button-ios-large-padding-end: 1em; /// @prop - Padding bottom of the large button -$button-ios-large-padding-bottom: $button-ios-large-padding-top !default; +$button-ios-large-padding-bottom: $button-ios-large-padding-top; /// @prop - Padding start of the large button -$button-ios-large-padding-start: $button-ios-large-padding-end !default; +$button-ios-large-padding-start: $button-ios-large-padding-end; /// @prop - Minimum height of the large button -$button-ios-large-min-height: 3.1em !default; +$button-ios-large-min-height: 3.1em; /// @prop - Border radius of the large button -$button-ios-large-border-radius: 16px !default; +$button-ios-large-border-radius: 16px; /// @prop - Font size of the large button /// The maximum font size is calculated by taking the default font size /// and multiplying it by 3, since 310% of the default is the maximum -$button-ios-large-font-size: dynamic-font-max(20px, 3) !default; +$button-ios-large-font-size: dynamic-font-max(20px, 3); // iOS Small Button // -------------------------------------------------- /// @prop - Padding top of the small button -$button-ios-small-padding-top: 4px !default; +$button-ios-small-padding-top: 4px; /// @prop - Padding end of the small button -$button-ios-small-padding-end: .9em !default; +$button-ios-small-padding-end: .9em; /// @prop - Padding bottom of the small button -$button-ios-small-padding-bottom: $button-ios-small-padding-top !default; +$button-ios-small-padding-bottom: $button-ios-small-padding-top; /// @prop - Padding start of the small button -$button-ios-small-padding-start: $button-ios-small-padding-end !default; +$button-ios-small-padding-start: $button-ios-small-padding-end; /// @prop - Minimum height of the small button -$button-ios-small-min-height: 2.1em !default; +$button-ios-small-min-height: 2.1em; /// @prop - Border radius of the small button -$button-ios-small-border-radius: 6px !default; +$button-ios-small-border-radius: 6px; /// @prop - Font size of the small button /// The maximum font size is calculated by taking the default font size /// and multiplying it by 3, since 310% of the default is the maximum -$button-ios-small-font-size: dynamic-font-max(13px, 3) !default; +$button-ios-small-font-size: dynamic-font-max(13px, 3); // iOS Outline Button // -------------------------------------------------- /// @prop - Border width of the outline button -$button-ios-outline-border-width: 1px !default; +$button-ios-outline-border-width: 1px; /// @prop - Border style of the outline button -$button-ios-outline-border-style: solid !default; +$button-ios-outline-border-style: solid; /// @prop - Border radius of the outline button -$button-ios-outline-border-radius: $button-ios-border-radius !default; +$button-ios-outline-border-radius: $button-ios-border-radius; // iOS Clear Button // -------------------------------------------------- @@ -113,41 +113,41 @@ $button-ios-outline-border-radius: $button-ios-border-radius /// @prop - Font size of the clear button /// The maximum font size is calculated by taking the default font size /// and multiplying it by 3, since 310% of the default is the maximum -$button-ios-clear-font-size: dynamic-font-max(17px, 3) !default; +$button-ios-clear-font-size: dynamic-font-max(17px, 3); /// @prop - Font weight of the clear button -$button-ios-clear-font-weight: normal !default; +$button-ios-clear-font-weight: normal; /// @prop - Letter spacing of the button -$button-ios-letter-spacing: 0 !default; +$button-ios-letter-spacing: 0; /// @prop - Opacity of the activated clear button -$button-ios-clear-opacity-activated: .4 !default; +$button-ios-clear-opacity-activated: .4; /// @prop - Opacity of the clear button on hover -$button-ios-clear-opacity-hover: .6 !default; +$button-ios-clear-opacity-hover: .6; // iOS Round Button // -------------------------------------------------- /// @prop - Padding top of the round button -$button-ios-round-padding-top: $button-round-padding-top !default; +$button-ios-round-padding-top: $button-round-padding-top; /// @prop - Padding end of the round button -$button-ios-round-padding-end: $button-round-padding-end !default; +$button-ios-round-padding-end: $button-round-padding-end; /// @prop - Padding bottom of the round button -$button-ios-round-padding-bottom: $button-round-padding-bottom !default; +$button-ios-round-padding-bottom: $button-round-padding-bottom; /// @prop - Padding start of the round button -$button-ios-round-padding-start: $button-round-padding-start !default; +$button-ios-round-padding-start: $button-round-padding-start; /// @prop - Border radius of the round button -$button-ios-round-border-radius: $button-round-border-radius !default; +$button-ios-round-border-radius: $button-round-border-radius; // iOS Decorator Button // -------------------------------------------------- /// @prop - Font weight of the strong button -$button-ios-strong-font-weight: 600 !default; +$button-ios-strong-font-weight: 600; diff --git a/core/src/components/button/button.md.vars.scss b/core/src/components/button/button.md.vars.scss index 99f942769a1..295ec461205 100644 --- a/core/src/components/button/button.md.vars.scss +++ b/core/src/components/button/button.md.vars.scss @@ -7,113 +7,113 @@ $button-md-margin-top: 4px; /// @prop - Margin end of the button -$button-md-margin-end: 2px !default; +$button-md-margin-end: 2px; /// @prop - Margin bottom of the button -$button-md-margin-bottom: 4px !default; +$button-md-margin-bottom: 4px; /// @prop - Margin start of the button -$button-md-margin-start: 2px !default; +$button-md-margin-start: 2px; /// @prop - Padding top of the button -$button-md-padding-top: 8px !default; +$button-md-padding-top: 8px; /// @prop - Padding end of the button -$button-md-padding-end: 1.1em !default; +$button-md-padding-end: 1.1em; /// @prop - Padding bottom of the button -$button-md-padding-bottom: $button-md-padding-top !default; +$button-md-padding-bottom: $button-md-padding-top; /// @prop - Padding start of the button -$button-md-padding-start: 1.1em !default; +$button-md-padding-start: 1.1em; /// @prop - Minimum height of the button -$button-md-min-height: 36px !default; +$button-md-min-height: 36px; /// @prop - Border radius of the button -$button-md-border-radius: 4px !default; +$button-md-border-radius: 4px; /// @prop - Font size of the button text -$button-md-font-size: dynamic-font(14px) !default; +$button-md-font-size: dynamic-font(14px); /// @prop - Font weight of the button text -$button-md-font-weight: 500 !default; +$button-md-font-weight: 500; /// @prop - Capitalization of the button text -$button-md-text-transform: uppercase !default; +$button-md-text-transform: uppercase; $button-md-letter-spacing: 0.06em; /// @prop - Box shadow of the button -$button-md-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12) !default; +$button-md-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12); /// @prop - Box shadow of the activated button -$button-md-box-shadow-activated: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12) !default; +$button-md-box-shadow-activated: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12); // Material Design Large Button // -------------------------------------------------- /// @prop - Padding top of the large button -$button-md-large-padding-top: 14px !default; +$button-md-large-padding-top: 14px; /// @prop - Padding end of the large button -$button-md-large-padding-end: 1em !default; +$button-md-large-padding-end: 1em; /// @prop - Padding bottom of the large button -$button-md-large-padding-bottom: $button-md-large-padding-top !default; +$button-md-large-padding-bottom: $button-md-large-padding-top; /// @prop - Padding start of the large button -$button-md-large-padding-start: $button-md-large-padding-end !default; +$button-md-large-padding-start: $button-md-large-padding-end; /// @prop - Minimum height of the large button -$button-md-large-min-height: 2.8em !default; +$button-md-large-min-height: 2.8em; /// @prop - Font size of the large button -$button-md-large-font-size: dynamic-font(20px) !default; +$button-md-large-font-size: dynamic-font(20px); // Material Design Small Button // -------------------------------------------------- /// @prop - Padding top of the small button -$button-md-small-padding-top: 4px !default; +$button-md-small-padding-top: 4px; /// @prop - Padding end of the small button -$button-md-small-padding-end: .9em !default; +$button-md-small-padding-end: .9em; /// @prop - Padding bottom of the small button -$button-md-small-padding-bottom: $button-md-small-padding-top !default; +$button-md-small-padding-bottom: $button-md-small-padding-top; /// @prop - Padding start of the small button -$button-md-small-padding-start: $button-md-small-padding-end !default; +$button-md-small-padding-start: $button-md-small-padding-end; /// @prop - Minimum height of the small button -$button-md-small-min-height: 2.1em !default; +$button-md-small-min-height: 2.1em; /// @prop - Font size of the small button -$button-md-small-font-size: dynamic-font(13px) !default; +$button-md-small-font-size: dynamic-font(13px); // Material Design Round Button // -------------------------------------------------- /// @prop - Padding top of the round button -$button-md-round-padding-top: $button-round-padding-top !default; +$button-md-round-padding-top: $button-round-padding-top; /// @prop - Padding end of the round button -$button-md-round-padding-end: $button-round-padding-end !default; +$button-md-round-padding-end: $button-round-padding-end; /// @prop - Padding bottom of the round button -$button-md-round-padding-bottom: $button-round-padding-bottom !default; +$button-md-round-padding-bottom: $button-round-padding-bottom; /// @prop - Padding start of the round button -$button-md-round-padding-start: $button-round-padding-start !default; +$button-md-round-padding-start: $button-round-padding-start; /// @prop - Border radius of the round button -$button-md-round-border-radius: $button-round-border-radius !default; +$button-md-round-border-radius: $button-round-border-radius; // Material Design Decorator Button // -------------------------------------------------- /// @prop - Font weight of the strong button -$button-md-strong-font-weight: bold !default; +$button-md-strong-font-weight: bold; diff --git a/core/src/components/button/button.vars.scss b/core/src/components/button/button.vars.scss index 448cc7b0064..1cfe282505f 100644 --- a/core/src/components/button/button.vars.scss +++ b/core/src/components/button/button.vars.scss @@ -4,16 +4,16 @@ // -------------------------------------------------- /// @prop - Padding top of the round button -$button-round-padding-top: 0 !default; +$button-round-padding-top: 0; /// @prop - Padding end of the round button -$button-round-padding-end: 26px !default; +$button-round-padding-end: 26px; /// @prop - Padding bottom of the round button -$button-round-padding-bottom: $button-round-padding-top !default; +$button-round-padding-bottom: $button-round-padding-top; /// @prop - Padding start of the round button -$button-round-padding-start: $button-round-padding-end !default; +$button-round-padding-start: $button-round-padding-end; /// @prop - Border radius of the round button -$button-round-border-radius: 999px !default; +$button-round-border-radius: 999px; diff --git a/core/src/components/card-content/card-content.ios.vars.scss b/core/src/components/card-content/card-content.ios.vars.scss index 8bb5fa03834..3d903fcb62e 100644 --- a/core/src/components/card-content/card-content.ios.vars.scss +++ b/core/src/components/card-content/card-content.ios.vars.scss @@ -4,16 +4,16 @@ // -------------------------------------------------- /// @prop - Padding top of the card -$card-ios-padding-top: 20px !default; +$card-ios-padding-top: 20px; /// @prop - Padding end of the card -$card-ios-padding-end: $card-ios-padding-top !default; +$card-ios-padding-end: $card-ios-padding-top; /// @prop - Padding bottom of the card -$card-ios-padding-bottom: $card-ios-padding-top !default; +$card-ios-padding-bottom: $card-ios-padding-top; /// @prop - Padding start of the card -$card-ios-padding-start: $card-ios-padding-top !default; +$card-ios-padding-start: $card-ios-padding-top; /// @prop - Font size of the card -$card-ios-font-size: dynamic-font(16px) !default; +$card-ios-font-size: dynamic-font(16px); diff --git a/core/src/components/card-content/card-content.md.vars.scss b/core/src/components/card-content/card-content.md.vars.scss index 8d436c15c90..a97c42ca3cd 100644 --- a/core/src/components/card-content/card-content.md.vars.scss +++ b/core/src/components/card-content/card-content.md.vars.scss @@ -4,19 +4,19 @@ // -------------------------------------------------- /// @prop - Padding top of the card -$card-md-padding-top: 13px !default; +$card-md-padding-top: 13px; /// @prop - Padding right of the card -$card-md-padding-end: 16px !default; +$card-md-padding-end: 16px; /// @prop - Padding bottom of the card -$card-md-padding-bottom: 13px !default; +$card-md-padding-bottom: 13px; /// @prop - Padding start of the card -$card-md-padding-start: 16px !default; +$card-md-padding-start: 16px; /// @prop - Font size of the card -$card-md-font-size: dynamic-font(14px) !default; +$card-md-font-size: dynamic-font(14px); /// @prop - Line height of the card -$card-md-line-height: 1.5 !default; +$card-md-line-height: 1.5; diff --git a/core/src/components/card-header/card-header.ios.vars.scss b/core/src/components/card-header/card-header.ios.vars.scss index b261a51f1b3..cbce9963d09 100644 --- a/core/src/components/card-header/card-header.ios.vars.scss +++ b/core/src/components/card-header/card-header.ios.vars.scss @@ -4,22 +4,22 @@ // -------------------------------------------------- /// @prop - Padding top of the card header -$card-ios-header-padding-top: 20px !default; +$card-ios-header-padding-top: 20px; /// @prop - Padding end of the card header -$card-ios-header-padding-end: $card-ios-header-padding-top !default; +$card-ios-header-padding-end: $card-ios-header-padding-top; /// @prop - Padding bottom of the card header -$card-ios-header-padding-bottom: 16px !default; +$card-ios-header-padding-bottom: 16px; /// @prop - Padding start of the card header -$card-ios-header-padding-start: $card-ios-header-padding-end !default; +$card-ios-header-padding-start: $card-ios-header-padding-end; /// @prop - Filter of the translucent card header background color alpha -$card-ios-header-translucent-background-color-alpha: .9 !default; +$card-ios-header-translucent-background-color-alpha: .9; /// @prop - Filter of the translucent card header background color -$card-ios-header-translucent-background-color: rgba($background-color-rgb, $card-ios-header-translucent-background-color-alpha) !default; +$card-ios-header-translucent-background-color: rgba($background-color-rgb, $card-ios-header-translucent-background-color-alpha); /// @prop - Filter of the translucent card header -$card-ios-header-translucent-filter: saturate(180%) blur(30px) !default; +$card-ios-header-translucent-filter: saturate(180%) blur(30px); diff --git a/core/src/components/card-header/card-header.md.vars.scss b/core/src/components/card-header/card-header.md.vars.scss index e64451a2029..80317955877 100644 --- a/core/src/components/card-header/card-header.md.vars.scss +++ b/core/src/components/card-header/card-header.md.vars.scss @@ -4,13 +4,13 @@ // -------------------------------------------------- /// @prop - Padding top of the card header -$card-md-header-padding-top: 16px !default; +$card-md-header-padding-top: 16px; /// @prop - Padding end of the card header -$card-md-header-padding-end: $card-md-header-padding-top !default; +$card-md-header-padding-end: $card-md-header-padding-top; /// @prop - Padding bottom of the card header -$card-md-header-padding-bottom: $card-md-header-padding-top !default; +$card-md-header-padding-bottom: $card-md-header-padding-top; /// @prop - Padding start of the card header -$card-md-header-padding-start: $card-md-header-padding-end !default; +$card-md-header-padding-start: $card-md-header-padding-end; diff --git a/core/src/components/card-subtitle/card-subtitle.ios.vars.scss b/core/src/components/card-subtitle/card-subtitle.ios.vars.scss index 86f221d0113..c4ec2c00c4a 100644 --- a/core/src/components/card-subtitle/card-subtitle.ios.vars.scss +++ b/core/src/components/card-subtitle/card-subtitle.ios.vars.scss @@ -4,40 +4,40 @@ // -------------------------------------------------- /// @prop - Font size of the card subtitle -$card-ios-subtitle-font-size: dynamic-font(12px) !default; +$card-ios-subtitle-font-size: dynamic-font(12px); /// @prop - Font weight of the card subtitle -$card-ios-subtitle-font-weight: 700 !default; +$card-ios-subtitle-font-weight: 700; /// @prop - Font weight of the card subtitle -$card-ios-subtitle-text-transform: uppercase !default; +$card-ios-subtitle-text-transform: uppercase; /// @prop - Letter spacing of the card subtitle -$card-ios-subtitle-letter-spacing: .4px !default; +$card-ios-subtitle-letter-spacing: .4px; /// @prop - Padding top of the card subtitle -$card-ios-subtitle-padding-top: 0 !default; +$card-ios-subtitle-padding-top: 0; /// @prop - Padding end of the card subtitle -$card-ios-subtitle-padding-end: $card-ios-subtitle-padding-top !default; +$card-ios-subtitle-padding-end: $card-ios-subtitle-padding-top; /// @prop - Padding bottom of the card subtitle -$card-ios-subtitle-padding-bottom: $card-ios-subtitle-padding-top !default; +$card-ios-subtitle-padding-bottom: $card-ios-subtitle-padding-top; /// @prop - Padding start of the card subtitle -$card-ios-subtitle-padding-start: $card-ios-subtitle-padding-end !default; +$card-ios-subtitle-padding-start: $card-ios-subtitle-padding-end; /// @prop - Margin top of the card subtitle -$card-ios-subtitle-margin-top: 0 !default; +$card-ios-subtitle-margin-top: 0; /// @prop - Margin end of the card subtitle -$card-ios-subtitle-margin-end: $card-ios-subtitle-margin-top !default; +$card-ios-subtitle-margin-end: $card-ios-subtitle-margin-top; /// @prop - Margin bottom of the card subtitle -$card-ios-subtitle-margin-bottom: 4px !default; +$card-ios-subtitle-margin-bottom: 4px; /// @prop - Margin start of the card subtitle -$card-ios-subtitle-margin-start: $card-ios-subtitle-margin-end !default; +$card-ios-subtitle-margin-start: $card-ios-subtitle-margin-end; /// @prop - Color of the card subtitle -$card-ios-subtitle-color: $text-color-step-400 !default; +$card-ios-subtitle-color: $text-color-step-400; diff --git a/core/src/components/card-subtitle/card-subtitle.md.vars.scss b/core/src/components/card-subtitle/card-subtitle.md.vars.scss index 1a0c4f69c8f..60aa8da9886 100644 --- a/core/src/components/card-subtitle/card-subtitle.md.vars.scss +++ b/core/src/components/card-subtitle/card-subtitle.md.vars.scss @@ -4,31 +4,31 @@ // -------------------------------------------------- /// @prop - Font size of the card subtitle -$card-md-subtitle-font-size: dynamic-font(14px) !default; +$card-md-subtitle-font-size: dynamic-font(14px); /// @prop - Padding top of the card subtitle -$card-md-subtitle-padding-top: 0 !default; +$card-md-subtitle-padding-top: 0; /// @prop - Padding end of the card subtitle -$card-md-subtitle-padding-end: $card-md-subtitle-padding-top !default; +$card-md-subtitle-padding-end: $card-md-subtitle-padding-top; /// @prop - Padding bottom of the card subtitle -$card-md-subtitle-padding-bottom: $card-md-subtitle-padding-top !default; +$card-md-subtitle-padding-bottom: $card-md-subtitle-padding-top; /// @prop - Padding start of the card subtitle -$card-md-subtitle-padding-start: $card-md-subtitle-padding-end !default; +$card-md-subtitle-padding-start: $card-md-subtitle-padding-end; /// @prop - Margin top of the card subtitle -$card-md-subtitle-margin-top: 0 !default; +$card-md-subtitle-margin-top: 0; /// @prop - Margin end of the card subtitle -$card-md-subtitle-margin-end: $card-md-subtitle-margin-top !default; +$card-md-subtitle-margin-end: $card-md-subtitle-margin-top; /// @prop - Margin bottom of the card subtitle -$card-md-subtitle-margin-bottom: 0 !default; +$card-md-subtitle-margin-bottom: 0; /// @prop - Margin start of the card subtitle -$card-md-subtitle-margin-start: $card-md-subtitle-margin-end !default; +$card-md-subtitle-margin-start: $card-md-subtitle-margin-end; /// @prop - Color of the card subtitle -$card-md-subtitle-color: $text-color-step-450 !default; +$card-md-subtitle-color: $text-color-step-450; diff --git a/core/src/components/card-title/card-title.ios.vars.scss b/core/src/components/card-title/card-title.ios.vars.scss index 43d4c741430..3569b5f0537 100644 --- a/core/src/components/card-title/card-title.ios.vars.scss +++ b/core/src/components/card-title/card-title.ios.vars.scss @@ -4,34 +4,34 @@ // -------------------------------------------------- /// @prop - Font size of the card title -$card-ios-title-font-size: dynamic-font(28px) !default; +$card-ios-title-font-size: dynamic-font(28px); /// @prop - Font weight of the card title -$card-ios-title-font-weight: 700 !default; +$card-ios-title-font-weight: 700; /// @prop - Padding top of the card title -$card-ios-title-padding-top: 0 !default; +$card-ios-title-padding-top: 0; /// @prop - Padding end of the card title -$card-ios-title-padding-end: $card-ios-title-padding-top !default; +$card-ios-title-padding-end: $card-ios-title-padding-top; /// @prop - Padding bottom of the card title -$card-ios-title-padding-bottom: $card-ios-title-padding-top !default; +$card-ios-title-padding-bottom: $card-ios-title-padding-top; /// @prop - Padding start of the card title -$card-ios-title-padding-start: $card-ios-title-padding-top !default; +$card-ios-title-padding-start: $card-ios-title-padding-top; /// @prop - Margin top of the card title -$card-ios-title-margin-top: 0 !default; +$card-ios-title-margin-top: 0; /// @prop - Margin end of the card title -$card-ios-title-margin-end: $card-ios-title-margin-top !default; +$card-ios-title-margin-end: $card-ios-title-margin-top; /// @prop - Margin bottom of the card title -$card-ios-title-margin-bottom: $card-ios-title-margin-top !default; +$card-ios-title-margin-bottom: $card-ios-title-margin-top; /// @prop - Margin start of the card title -$card-ios-title-margin-start: $card-ios-title-margin-top !default; +$card-ios-title-margin-start: $card-ios-title-margin-top; /// @prop - Color of the card title -$card-ios-title-text-color: $text-color !default; +$card-ios-title-text-color: $text-color; diff --git a/core/src/components/card-title/card-title.md.vars.scss b/core/src/components/card-title/card-title.md.vars.scss index 31914b32b88..f3db03f4939 100644 --- a/core/src/components/card-title/card-title.md.vars.scss +++ b/core/src/components/card-title/card-title.md.vars.scss @@ -4,31 +4,31 @@ // -------------------------------------------------- /// @prop - Font size of the card title -$card-md-title-font-size: dynamic-font(20px) !default; +$card-md-title-font-size: dynamic-font(20px); /// @prop - Padding top of the card title -$card-md-title-padding-top: 0 !default; +$card-md-title-padding-top: 0; /// @prop - Padding end of the card title -$card-md-title-padding-end: $card-md-title-padding-top !default; +$card-md-title-padding-end: $card-md-title-padding-top; /// @prop - Padding bottom of the card title -$card-md-title-padding-bottom: $card-md-title-padding-top !default; +$card-md-title-padding-bottom: $card-md-title-padding-top; /// @prop - Padding start of the card title -$card-md-title-padding-start: $card-md-title-padding-end !default; +$card-md-title-padding-start: $card-md-title-padding-end; /// @prop - Margin top of the card title -$card-md-title-margin-top: 0 !default; +$card-md-title-margin-top: 0; /// @prop - Margin end of the card title -$card-md-title-margin-end: $card-md-title-margin-top !default; +$card-md-title-margin-end: $card-md-title-margin-top; /// @prop - Margin bottom of the card title -$card-md-title-margin-bottom: $card-md-title-margin-top !default; +$card-md-title-margin-bottom: $card-md-title-margin-top; /// @prop - Margin start of the card title -$card-md-title-margin-start: $card-md-title-margin-end !default; +$card-md-title-margin-start: $card-md-title-margin-end; /// @prop - Color of the card title -$card-md-title-text-color: $text-color-step-150 !default; +$card-md-title-text-color: $text-color-step-150; diff --git a/core/src/components/card/card.ios.vars.scss b/core/src/components/card/card.ios.vars.scss index ce9876ea26c..e259797e5c9 100755 --- a/core/src/components/card/card.ios.vars.scss +++ b/core/src/components/card/card.ios.vars.scss @@ -4,31 +4,31 @@ // -------------------------------------------------- /// @prop - Margin top of the card -$card-ios-margin-top: 24px !default; +$card-ios-margin-top: 24px; /// @prop - Margin end of the card -$card-ios-margin-end: 16px !default; +$card-ios-margin-end: 16px; /// @prop - Margin bottom of the card -$card-ios-margin-bottom: $card-ios-margin-top !default; +$card-ios-margin-bottom: $card-ios-margin-top; /// @prop - Margin start of the card -$card-ios-margin-start: 16px !default; +$card-ios-margin-start: 16px; /// @prop - Box shadow color of the card -$card-ios-box-shadow-color: rgba(0, 0, 0, .12) !default; +$card-ios-box-shadow-color: rgba(0, 0, 0, .12); /// @prop - Box shadow of the card -$card-ios-box-shadow: 0 4px 16px $card-ios-box-shadow-color !default; +$card-ios-box-shadow: 0 4px 16px $card-ios-box-shadow-color; /// @prop - Border radius of the card -$card-ios-border-radius: 8px !default; +$card-ios-border-radius: 8px; /// @prop - Font size of the card -$card-ios-font-size: dynamic-font(14px) !default; +$card-ios-font-size: dynamic-font(14px); /// @prop - Transition timing function of the card -$card-ios-transition-timing-function: cubic-bezier(0.12, 0.72, 0.29, 1) !default; +$card-ios-transition-timing-function: cubic-bezier(0.12, 0.72, 0.29, 1); /// @prop - Transform of the card on activate -$card-ios-transform-activated: scale3d(.97, .97, 1) !default; +$card-ios-transform-activated: scale3d(.97, .97, 1); diff --git a/core/src/components/card/card.md.vars.scss b/core/src/components/card/card.md.vars.scss index cb13c43aeed..2af656861f1 100755 --- a/core/src/components/card/card.md.vars.scss +++ b/core/src/components/card/card.md.vars.scss @@ -4,25 +4,25 @@ // -------------------------------------------------- /// @prop - Margin top of the card -$card-md-margin-top: 10px !default; +$card-md-margin-top: 10px; /// @prop - Margin end of the card -$card-md-margin-end: 10px !default; +$card-md-margin-end: 10px; /// @prop - Margin bottom of the card -$card-md-margin-bottom: 10px !default; +$card-md-margin-bottom: 10px; /// @prop - Margin start of the card -$card-md-margin-start: 10px !default; +$card-md-margin-start: 10px; /// @prop - Box shadow of the card -$card-md-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12) !default; +$card-md-box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); /// @prop - Border radius of the card -$card-md-border-radius: 4px !default; +$card-md-border-radius: 4px; /// @prop - Font size of the card -$card-md-font-size: dynamic-font(14px) !default; +$card-md-font-size: dynamic-font(14px); /// @prop - Line height of the card -$card-md-line-height: 1.5 !default; +$card-md-line-height: 1.5; diff --git a/core/src/components/checkbox/checkbox.ios.vars.scss b/core/src/components/checkbox/checkbox.ios.vars.scss index b63650a309c..78605a85f88 100644 --- a/core/src/components/checkbox/checkbox.ios.vars.scss +++ b/core/src/components/checkbox/checkbox.ios.vars.scss @@ -6,25 +6,25 @@ // -------------------------------------------------- /// @prop - Background color of the checkbox when off -$checkbox-ios-background-color-off: $item-ios-background !default; +$checkbox-ios-background-color-off: $item-ios-background; /// @prop - Size of the checkbox icon -$checkbox-ios-icon-size: dynamic-font-max(22px, 2.538) !default; +$checkbox-ios-icon-size: dynamic-font-max(22px, 2.538); /// @prop - Border color of the checkbox icon when off -$checkbox-ios-icon-border-color-off: rgba($text-color-rgb, 0.23) !default; +$checkbox-ios-icon-border-color-off: rgba($text-color-rgb, 0.23); /// @prop - Border width of the checkbox icon -$checkbox-ios-icon-border-width: dynamic-font(2px) !default; +$checkbox-ios-icon-border-width: dynamic-font(2px); /// @prop - Border style of the checkbox icon -$checkbox-ios-icon-border-style: solid !default; +$checkbox-ios-icon-border-style: solid; /// @prop - Border radius of the checkbox icon -$checkbox-ios-icon-border-radius: 50% !default; +$checkbox-ios-icon-border-radius: 50%; /// @prop - Opacity of the disabled checkbox -$checkbox-ios-disabled-opacity: $form-control-ios-disabled-opacity !default; +$checkbox-ios-disabled-opacity: $form-control-ios-disabled-opacity; /// @prop - Checkmark width of the checkbox icon -$checkbox-ios-icon-checkmark-width: 1.5px !default; +$checkbox-ios-icon-checkmark-width: 1.5px; diff --git a/core/src/components/checkbox/checkbox.md.vars.scss b/core/src/components/checkbox/checkbox.md.vars.scss index d2359c4067d..445d50b6a6e 100644 --- a/core/src/components/checkbox/checkbox.md.vars.scss +++ b/core/src/components/checkbox/checkbox.md.vars.scss @@ -5,30 +5,30 @@ // -------------------------------------------------- /// @prop - Opacity of the disabled checkbox label -$checkbox-md-disabled-opacity: $form-control-md-disabled-opacity !default; +$checkbox-md-disabled-opacity: $form-control-md-disabled-opacity; /// @prop - Background color of the checkbox icon when off -$checkbox-md-icon-background-color-off: $item-md-background !default; +$checkbox-md-icon-background-color-off: $item-md-background; /// @prop - Size of the checkbox icon /// The icon size does not use dynamic font /// because it does not scale in native. -$checkbox-md-icon-size: 18px !default; +$checkbox-md-icon-size: 18px; /// @prop - Border width of the checkbox icon -$checkbox-md-icon-border-width: 2px !default; +$checkbox-md-icon-border-width: 2px; /// @prop - Border style of the checkbox icon -$checkbox-md-icon-border-style: solid !default; +$checkbox-md-icon-border-style: solid; /// @prop - Border color of the checkbox icon when off -$checkbox-md-icon-border-color-off: rgb($text-color-rgb, 0.60) !default; +$checkbox-md-icon-border-color-off: rgb($text-color-rgb, 0.60); /// @prop - Transition duration of the checkbox -$checkbox-md-transition-duration: 180ms !default; +$checkbox-md-transition-duration: 180ms; /// @prop - Transition easing of the checkbox -$checkbox-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default; +$checkbox-md-transition-easing: cubic-bezier(.4, 0, .2, 1); /// @prop - Opacity of the disabled checkbox /// This value is used because the checkbox color is set to @@ -37,4 +37,4 @@ $checkbox-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default; /// opacity is applied on top of the transparent color so /// this opacity gets us the equivalent of applying `0.38` /// on top of an opaque checkbox `rgb(0, 0, 0, 1.0)` -$checkbox-md-icon-disabled-opacity: 0.63 !default; +$checkbox-md-icon-disabled-opacity: 0.63; diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx index 57b0c5b77e7..a1783c9aa9f 100644 --- a/core/src/components/checkbox/checkbox.tsx +++ b/core/src/components/checkbox/checkbox.tsx @@ -97,10 +97,9 @@ export class Checkbox implements ComponentInterface { @Prop() alignment: 'start' | 'center' = 'center'; /** - * Emitted when the checked property has changed - * as a result of a user action such as a click. - * This event will not emit when programmatically - * setting the checked property. + * Emitted when the checked property has changed as a result of a user action such as a click. + * + * This event will not emit when programmatically setting the `checked` property. */ @Event() ionChange!: EventEmitter; diff --git a/core/src/components/checkbox/checkbox.vars.scss b/core/src/components/checkbox/checkbox.vars.scss index 2116a369e84..8c73dff6f8f 100644 --- a/core/src/components/checkbox/checkbox.vars.scss +++ b/core/src/components/checkbox/checkbox.vars.scss @@ -1,5 +1,5 @@ /// @prop - Top margin of checkbox's label when in an item -$checkbox-item-label-margin-top: 10px !default; +$checkbox-item-label-margin-top: 10px; /// @prop - Bottom margin of checkbox's label when in an item -$checkbox-item-label-margin-bottom: 10px !default; \ No newline at end of file +$checkbox-item-label-margin-bottom: 10px; \ No newline at end of file diff --git a/core/src/components/col/col.vars.scss b/core/src/components/col/col.vars.scss index ca89b021cc4..2ce79d1bd62 100644 --- a/core/src/components/col/col.vars.scss +++ b/core/src/components/col/col.vars.scss @@ -5,7 +5,7 @@ // -------------------------------------------------- /// @prop - The padding for the grid column -$grid-column-padding: var(--ion-grid-column-padding, 5px) !default; +$grid-column-padding: var(--ion-grid-column-padding, 5px); /// @prop - The padding for the column at different breakpoints $grid-column-paddings: ( @@ -14,4 +14,4 @@ $grid-column-paddings: ( md: var(--ion-grid-column-padding-md, $grid-column-padding), lg: var(--ion-grid-column-padding-lg, $grid-column-padding), xl: var(--ion-grid-column-padding-xl, $grid-column-padding) -) !default; +); diff --git a/core/src/components/datetime/datetime.ios.vars.scss b/core/src/components/datetime/datetime.ios.vars.scss index 4cb8ad9db12..de2698b3b2d 100644 --- a/core/src/components/datetime/datetime.ios.vars.scss +++ b/core/src/components/datetime/datetime.ios.vars.scss @@ -2,16 +2,16 @@ // -------------------------------------------------- /// @prop - Border color for dividers between header and footer -$datetime-ios-border-color: 0.55px solid $background-color-step-200 !default; +$datetime-ios-border-color: 0.55px solid $background-color-step-200; /// @prop - Padding for content -$datetime-ios-padding: 16px !default; +$datetime-ios-padding: 16px; /// @prop - The font size at which layouts may change to accommodate Dynamic Type -$datetime-dynamic-font-breakpoint: 24px !default; +$datetime-dynamic-font-breakpoint: 24px; /// @prop - Width of the calendar day -$datetime-ios-day-width: 40px !default; +$datetime-ios-day-width: 40px; /// @prop - Height of the calendar day -$datetime-ios-day-height: $datetime-ios-day-width !default; +$datetime-ios-day-height: $datetime-ios-day-width; diff --git a/core/src/components/datetime/datetime.md.vars.scss b/core/src/components/datetime/datetime.md.vars.scss index c35c405232a..9a925d65216 100644 --- a/core/src/components/datetime/datetime.md.vars.scss +++ b/core/src/components/datetime/datetime.md.vars.scss @@ -2,22 +2,22 @@ // -------------------------------------------------- /// @prop - Font size for title in header -$datetime-md-title-font-size: dynamic-font(12px) !default; +$datetime-md-title-font-size: dynamic-font(12px); /// @prop - Font size for selected date in header -$datetime-md-selected-date-font-size: dynamic-font(34px) !default; +$datetime-md-selected-date-font-size: dynamic-font(34px); /// @prop - Font size for calendar day button -$datetime-md-calendar-item-font-size: dynamic-font(14px) !default; +$datetime-md-calendar-item-font-size: dynamic-font(14px); /// @prop - Padding for content in header -$datetime-md-header-padding: 20px !default; +$datetime-md-header-padding: 20px; /// @prop - Padding for content -$datetime-md-padding: 16px !default; +$datetime-md-padding: 16px; /// @prop - Width of the calendar day -$datetime-md-day-width: 42px !default; +$datetime-md-day-width: 42px; /// @prop - Height of the calendar day -$datetime-md-day-height: $datetime-md-day-width !default; +$datetime-md-day-height: $datetime-md-day-width; diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index b11e949c4f2..b7a9c539229 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -477,6 +477,8 @@ export class Datetime implements ComponentInterface { /** * Emitted when the value (selected date) has changed. + * + * This event will not emit when programmatically setting the `value` property. */ @Event() ionChange!: EventEmitter; @@ -898,7 +900,8 @@ export class Datetime implements ComponentInterface { * Check below the next line ensures that we did not * swipe and abort (i.e. we swiped but we are still on the current month). */ - const month = calendarBodyRef.scrollLeft <= 2 ? startMonth : endMonth; + const condition = isRTL(this.el) ? calendarBodyRef.scrollLeft >= -2 : calendarBodyRef.scrollLeft <= 2; + const month = condition ? startMonth : endMonth; /** * The edge of the month must be lined up with diff --git a/core/src/components/fab-button/fab-button.ios.vars.scss b/core/src/components/fab-button/fab-button.ios.vars.scss index 1d1faa392a9..95f2227106d 100755 --- a/core/src/components/fab-button/fab-button.ios.vars.scss +++ b/core/src/components/fab-button/fab-button.ios.vars.scss @@ -4,58 +4,58 @@ // -------------------------------------------------- /// @prop - Box shadow of the FAB button -$fab-ios-box-shadow: 0 4px 16px rgba(0, 0, 0, .12) !default; +$fab-ios-box-shadow: 0 4px 16px rgba(0, 0, 0, .12); /// @prop - Box shadow of the activated FAB button -$fab-ios-box-shadow-activated: $fab-ios-box-shadow !default; +$fab-ios-box-shadow-activated: $fab-ios-box-shadow; /// @prop - Transform of the FAB button -$fab-ios-transform: scale(1.1) !default; +$fab-ios-transform: scale(1.1); /// @prop - Transition of the FAB button -$fab-ios-transition: .2s transform cubic-bezier(.25, 1.11, .78, 1.59) !default; +$fab-ios-transition: .2s transform cubic-bezier(.25, 1.11, .78, 1.59); /// @prop - Transition of the activated FAB button -$fab-ios-transition-activated: .2s transform ease-out !default; +$fab-ios-transition-activated: .2s transform ease-out; /// @prop - Background color of the button -$fab-ios-background-color: ion-color(primary, base) !default; +$fab-ios-background-color: ion-color(primary, base); /// @prop - Background color of the activated button -$fab-ios-background-color-activated: ion-color(primary, shade) !default; +$fab-ios-background-color-activated: ion-color(primary, shade); /// @prop - Text color of the button -$fab-ios-text-color: ion-color(primary, contrast) !default; +$fab-ios-text-color: ion-color(primary, contrast); /// @prop - Font size of the button icon -$fab-ios-icon-font-size: 28px !default; +$fab-ios-icon-font-size: 28px; /// @prop - Background color of the button in a list -$fab-ios-list-button-background-color: ion-color(light, base) !default; +$fab-ios-list-button-background-color: ion-color(light, base); /// @prop - Background color of the activated button in a list -$fab-ios-list-button-background-color-activated: ion-color(light, shade) !default; +$fab-ios-list-button-background-color-activated: ion-color(light, shade); /// @prop - Background color of the hovered button in a list -$fab-ios-list-button-background-color-hover: ion-color(light, tint) !default; +$fab-ios-list-button-background-color-hover: ion-color(light, tint); /// @prop - Text color of the button in a list -$fab-ios-list-button-text-color: ion-color(light, contrast) !default; +$fab-ios-list-button-text-color: ion-color(light, contrast); /// @prop - Font size of the button icon in a list -$fab-ios-list-button-icon-font-size: 18px !default; +$fab-ios-list-button-icon-font-size: 18px; // Translucent FAB Button // -------------------------------------------------- /// @prop - Backdrop filter of the translucent button -$fab-ios-translucent-filter: saturate(180%) blur(20px) !default; +$fab-ios-translucent-filter: saturate(180%) blur(20px); /// @prop - Alpha level of the translucent button background -$fab-ios-translucent-background-alpha: .9 !default; +$fab-ios-translucent-background-alpha: .9; /// @prop - Alpha level of the translucent button background on hover -$fab-ios-translucent-background-alpha-hover: .8 !default; +$fab-ios-translucent-background-alpha-hover: .8; /// @prop - Alpha level of the translucent button background on focus -$fab-ios-translucent-background-alpha-focused: .82 !default; +$fab-ios-translucent-background-alpha-focused: .82; diff --git a/core/src/components/fab-button/fab-button.md.vars.scss b/core/src/components/fab-button/fab-button.md.vars.scss index edd4f572a05..e4b8139c42d 100755 --- a/core/src/components/fab-button/fab-button.md.vars.scss +++ b/core/src/components/fab-button/fab-button.md.vars.scss @@ -4,31 +4,31 @@ // -------------------------------------------------- /// @prop - Box shadow of the FAB button -$fab-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; +$fab-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); /// @prop - Box shadow of the activated FAB button -$fab-md-box-shadow-activated: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12) !default; +$fab-md-box-shadow-activated: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12); /// @prop - Background color of the button -$fab-md-background-color: ion-color(primary, base) !default; +$fab-md-background-color: ion-color(primary, base); /// @prop - Text color of the button -$fab-md-text-color: ion-color(primary, contrast) !default; +$fab-md-text-color: ion-color(primary, contrast); /// @prop - Font size of the button icon -$fab-md-icon-font-size: 24px !default; +$fab-md-icon-font-size: 24px; /// @prop - Background color of the button in a list -$fab-md-list-button-background-color: ion-color(light, base) !default; +$fab-md-list-button-background-color: ion-color(light, base); /// @prop - Background color of the activated button in a list -$fab-md-list-button-background-color-activated: ion-color(light, shade) !default; +$fab-md-list-button-background-color-activated: ion-color(light, shade); /// @prop - Background color of the activated button in a list -$fab-md-list-button-background-color-hover: ion-color(light, tint) !default; +$fab-md-list-button-background-color-hover: ion-color(light, tint); /// @prop - Text color of the button in a list -$fab-md-list-button-text-color: rgba($text-color-rgb, 0.54) !default; +$fab-md-list-button-text-color: rgba($text-color-rgb, 0.54); /// @prop - Font size of the button icon in a list -$fab-md-list-button-icon-font-size: 18px !default; +$fab-md-list-button-icon-font-size: 18px; diff --git a/core/src/components/fab-button/fab-button.vars.scss b/core/src/components/fab-button/fab-button.vars.scss index 2556fec9b33..490cd33ca34 100755 --- a/core/src/components/fab-button/fab-button.vars.scss +++ b/core/src/components/fab-button/fab-button.vars.scss @@ -4,13 +4,13 @@ // -------------------------------------------------- /// @prop - Width and height of the FAB button -$fab-size: 56px !default; +$fab-size: 56px; /// @prop - Width and height of the mini FAB button -$fab-small-size: 40px !default; +$fab-small-size: 40px; /// @prop - Border radius of the FAB button -$fab-border-radius: 50% !default; +$fab-border-radius: 50%; /// @prop - Margin applied to the small FAB button -$fab-button-small-margin: 8px !default; +$fab-button-small-margin: 8px; diff --git a/core/src/components/fab-list/fab-list.vars.scss b/core/src/components/fab-list/fab-list.vars.scss index eed9c736fa3..f62dc416d13 100644 --- a/core/src/components/fab-list/fab-list.vars.scss +++ b/core/src/components/fab-list/fab-list.vars.scss @@ -5,4 +5,4 @@ // -------------------------------------------------- /// @prop - Margin of the FAB List -$fab-list-margin: 10px !default; +$fab-list-margin: 10px; diff --git a/core/src/components/fab/fab.vars.scss b/core/src/components/fab/fab.vars.scss index 13e2a09493f..05bb3095154 100644 --- a/core/src/components/fab/fab.vars.scss +++ b/core/src/components/fab/fab.vars.scss @@ -5,4 +5,4 @@ // -------------------------------------------------- /// @prop - Margin of the FAB Container -$fab-content-margin: 10px !default; +$fab-content-margin: 10px; diff --git a/core/src/components/footer/footer.ios.vars.scss b/core/src/components/footer/footer.ios.vars.scss index bb1311cdcde..20fdd8f32e7 100644 --- a/core/src/components/footer/footer.ios.vars.scss +++ b/core/src/components/footer/footer.ios.vars.scss @@ -4,4 +4,4 @@ // -------------------------------------------------- /// @prop - Filter of the translucent footer -$footer-ios-translucent-filter: saturate(180%) blur(20px) !default; +$footer-ios-translucent-filter: saturate(180%) blur(20px); diff --git a/core/src/components/footer/footer.md.vars.scss b/core/src/components/footer/footer.md.vars.scss index 38d8bd63a03..00ab78ccfc4 100644 --- a/core/src/components/footer/footer.md.vars.scss +++ b/core/src/components/footer/footer.md.vars.scss @@ -5,4 +5,4 @@ /// @Prop - Box shadow of the footer $footer-md-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), - 0 1px 10px 0 rgba(0, 0, 0, 0.12) !default; + 0 1px 10px 0 rgba(0, 0, 0, 0.12); diff --git a/core/src/components/grid/grid.vars.scss b/core/src/components/grid/grid.vars.scss index bdfd69bc9cc..a6a6f4808b6 100644 --- a/core/src/components/grid/grid.vars.scss +++ b/core/src/components/grid/grid.vars.scss @@ -5,7 +5,7 @@ // -------------------------------------------------- /// @prop - The padding for the grid -$grid-padding: var(--ion-grid-padding, 5px) !default; +$grid-padding: var(--ion-grid-padding, 5px); /// @prop - The padding for the grid at different breakpoints $grid-paddings: ( @@ -14,7 +14,7 @@ $grid-paddings: ( md: var(--ion-grid-padding-md, $grid-padding), lg: var(--ion-grid-padding-lg, $grid-padding), xl: var(--ion-grid-padding-xl, $grid-padding) -) !default; +); /// @prop - Width of the grid for different screen sizes when fixed is enabled $grid-widths: ( @@ -23,4 +23,4 @@ $grid-widths: ( md: var(--ion-grid-width-md, var(--ion-grid-width, 720px)), lg: var(--ion-grid-width-lg, var(--ion-grid-width, 960px)), xl: var(--ion-grid-width-xl, var(--ion-grid-width, 1140px)) -) !default; +); diff --git a/core/src/components/header/header.ios.vars.scss b/core/src/components/header/header.ios.vars.scss index a4e8272d6f8..078b483cf92 100644 --- a/core/src/components/header/header.ios.vars.scss +++ b/core/src/components/header/header.ios.vars.scss @@ -7,4 +7,4 @@ $header-ios-blur: 20px; /// @prop - Filter of the translucent header -$header-ios-translucent-filter: saturate(180%) blur($header-ios-blur) !default; +$header-ios-translucent-filter: saturate(180%) blur($header-ios-blur); diff --git a/core/src/components/header/header.md.vars.scss b/core/src/components/header/header.md.vars.scss index a99c36f93f4..5d4f7c05d03 100644 --- a/core/src/components/header/header.md.vars.scss +++ b/core/src/components/header/header.md.vars.scss @@ -5,4 +5,4 @@ /// @Prop - Box shadow of the header $header-md-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), - 0 1px 10px 0 rgba(0, 0, 0, 0.12) !default; + 0 1px 10px 0 rgba(0, 0, 0, 0.12); diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss b/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss index 35c84a87762..bad6ee59c71 100644 --- a/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss +++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Color of the infinite scroll loading indicator -$infinite-scroll-ios-loading-color: $text-color-step-400 !default; +$infinite-scroll-ios-loading-color: $text-color-step-400; /// @prop - Color of the infinite scroll loading indicator text -$infinite-scroll-ios-loading-text-color: $infinite-scroll-ios-loading-color !default; +$infinite-scroll-ios-loading-text-color: $infinite-scroll-ios-loading-color; diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss b/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss index fb1b0d18ee0..eea3d5b633d 100644 --- a/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss +++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Color of the infinite scroll loading indicator -$infinite-scroll-md-loading-color: $text-color-step-400 !default; +$infinite-scroll-md-loading-color: $text-color-step-400; /// @prop - Color of the infinite scroll loading indicator text -$infinite-scroll-md-loading-text-color: $infinite-scroll-md-loading-color !default; +$infinite-scroll-md-loading-text-color: $infinite-scroll-md-loading-color; diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.vars.scss b/core/src/components/infinite-scroll-content/infinite-scroll-content.vars.scss index 8fdd8d5775a..6fbd23ab34b 100644 --- a/core/src/components/infinite-scroll-content/infinite-scroll-content.vars.scss +++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.vars.scss @@ -4,28 +4,28 @@ // -------------------------------------------------- /// @prop - Minimum height of the infinite scroll content -$infinite-scroll-content-min-height: 84px !default; +$infinite-scroll-content-min-height: 84px; /// @prop - Margin top of the infinite scroll loading icon -$infinite-scroll-loading-margin-top: 0 !default; +$infinite-scroll-loading-margin-top: 0; /// @prop - Margin end of the infinite scroll loading icon -$infinite-scroll-loading-margin-end: 0 !default; +$infinite-scroll-loading-margin-end: 0; /// @prop - Margin bottom of the infinite scroll loading icon -$infinite-scroll-loading-margin-bottom: 32px !default; +$infinite-scroll-loading-margin-bottom: 32px; /// @prop - Margin start of the infinite scroll loading icon -$infinite-scroll-loading-margin-start: $infinite-scroll-loading-margin-end !default; +$infinite-scroll-loading-margin-start: $infinite-scroll-loading-margin-end; /// @prop - Margin top of the infinite scroll loading text -$infinite-scroll-loading-text-margin-top: 4px !default; +$infinite-scroll-loading-text-margin-top: 4px; /// @prop - Margin end of the infinite scroll loading text -$infinite-scroll-loading-text-margin-end: 32px !default; +$infinite-scroll-loading-text-margin-end: 32px; /// @prop - Margin bottom of the infinite scroll loading text -$infinite-scroll-loading-text-margin-bottom: 0 !default; +$infinite-scroll-loading-text-margin-bottom: 0; /// @prop - Margin start of the infinite scroll loading text -$infinite-scroll-loading-text-margin-start: $infinite-scroll-loading-text-margin-end !default; +$infinite-scroll-loading-text-margin-start: $infinite-scroll-loading-text-margin-end; diff --git a/core/src/components/input/input.ios.vars.scss b/core/src/components/input/input.ios.vars.scss index 238d9cd4275..51351816125 100644 --- a/core/src/components/input/input.ios.vars.scss +++ b/core/src/components/input/input.ios.vars.scss @@ -5,7 +5,7 @@ // -------------------------------------------------- /// @prop - Font size of the input -$input-ios-font-size: inherit !default; +$input-ios-font-size: inherit; /// @prop - The opacity of the input text, label, helper text, char counter and placeholder of a disabled input -$input-ios-disabled-opacity: $form-control-ios-disabled-opacity !default; +$input-ios-disabled-opacity: $form-control-ios-disabled-opacity; diff --git a/core/src/components/input/input.md.vars.scss b/core/src/components/input/input.md.vars.scss index 952bc390ffc..6d2c164928b 100644 --- a/core/src/components/input/input.md.vars.scss +++ b/core/src/components/input/input.md.vars.scss @@ -5,10 +5,10 @@ // -------------------------------------------------- /// @prop - Font size of the input -$input-md-font-size: inherit !default; +$input-md-font-size: inherit; /// @prop - The amount of whitespace to display on either side of the floating label -$input-md-floating-label-padding: 4px !default; +$input-md-floating-label-padding: 4px; /// @prop - The opacity of the input text, label, helper text, char counter and placeholder of a disabled input -$input-md-disabled-opacity: $form-control-md-disabled-opacity !default; +$input-md-disabled-opacity: $form-control-md-disabled-opacity; diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index 9e86ddfb768..16b791cfdb6 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -296,6 +296,8 @@ export class Input implements ComponentInterface { * from a date picker for ``, pressing the "Enter" key, etc.). * - When the element loses focus after its value has changed: for elements * where the user's interaction is typing. + * + * This event will not emit when programmatically setting the `value` property. */ @Event() ionChange!: EventEmitter; diff --git a/core/src/components/item-divider/item-divider.ios.vars.scss b/core/src/components/item-divider/item-divider.ios.vars.scss index 73de9f08fcc..b8c2b5020c0 100644 --- a/core/src/components/item-divider/item-divider.ios.vars.scss +++ b/core/src/components/item-divider/item-divider.ios.vars.scss @@ -5,22 +5,22 @@ // -------------------------------------------------- /// @prop - Minimum height for the divider -$item-divider-ios-min-height: 28px !default; +$item-divider-ios-min-height: 28px; /// @prop - Font size of the item -$item-divider-ios-font-size: dynamic-font(17px) !default; +$item-divider-ios-font-size: dynamic-font(17px); /// @prop - Font weight of the item -$item-divider-ios-font-weight: 600 !default; +$item-divider-ios-font-weight: 600; /// @prop - Background for the divider -$item-divider-ios-background: $background-color-step-100 !default; +$item-divider-ios-background: $background-color-step-100; /// @prop - Color for the divider -$item-divider-ios-color: $text-color-step-150 !default; +$item-divider-ios-color: $text-color-step-150; /// @prop - Padding start for the divider -$item-divider-ios-padding-start: $item-ios-padding-start !default; +$item-divider-ios-padding-start: $item-ios-padding-start; /// @prop - Padding end for the divider -$item-divider-ios-padding-end: $item-ios-padding-end !default; +$item-divider-ios-padding-end: $item-ios-padding-end; diff --git a/core/src/components/item-divider/item-divider.md.vars.scss b/core/src/components/item-divider/item-divider.md.vars.scss index f817b80b458..3688b88ea65 100644 --- a/core/src/components/item-divider/item-divider.md.vars.scss +++ b/core/src/components/item-divider/item-divider.md.vars.scss @@ -5,22 +5,22 @@ // -------------------------------------------------- /// @prop - Minimum height for the divider -$item-divider-md-min-height: 30px !default; +$item-divider-md-min-height: 30px; /// @prop - Color for the divider -$item-divider-md-color: $text-color-step-600 !default; +$item-divider-md-color: $text-color-step-600; /// @prop - Background for the divider -$item-divider-md-background: $background-color !default; +$item-divider-md-background: $background-color; /// @prop - Font size for the divider -$item-divider-md-font-size: 14px !default; +$item-divider-md-font-size: 14px; /// @prop - Border bottom for the divider -$item-divider-md-border-bottom: 1px solid $item-md-border-color !default; +$item-divider-md-border-bottom: 1px solid $item-md-border-color; /// @prop - Padding start for the divider -$item-divider-md-padding-start: $item-md-padding-start !default; +$item-divider-md-padding-start: $item-md-padding-start; /// @prop - Padding end for the divider -$item-divider-md-padding-end: $item-md-padding-end !default; +$item-divider-md-padding-end: $item-md-padding-end; diff --git a/core/src/components/item-option/item-option.ios.vars.scss b/core/src/components/item-option/item-option.ios.vars.scss index 5c63226dc4c..80b53ff0bff 100644 --- a/core/src/components/item-option/item-option.ios.vars.scss +++ b/core/src/components/item-option/item-option.ios.vars.scss @@ -4,4 +4,4 @@ // -------------------------------------------------- /// @prop - Font size of the item option button -$item-option-button-ios-font-size: dynamic-font-clamp(1, 16px, 2.2) !default; +$item-option-button-ios-font-size: dynamic-font-clamp(1, 16px, 2.2); diff --git a/core/src/components/item-option/item-option.md.vars.scss b/core/src/components/item-option/item-option.md.vars.scss index 3e27b73ccf5..c8c6f91512b 100644 --- a/core/src/components/item-option/item-option.md.vars.scss +++ b/core/src/components/item-option/item-option.md.vars.scss @@ -4,4 +4,4 @@ // -------------------------------------------------- /// @prop - Font size of the sliding option button -$item-option-button-md-font-size: dynamic-font(14px) !default; +$item-option-button-md-font-size: dynamic-font(14px); diff --git a/core/src/components/item/item.ios.vars.scss b/core/src/components/item/item.ios.vars.scss index 4ebbb24f0a5..0823827d89a 100644 --- a/core/src/components/item/item.ios.vars.scss +++ b/core/src/components/item/item.ios.vars.scss @@ -4,107 +4,107 @@ // -------------------------------------------------- /// @prop - Minimum height of the item -$item-ios-min-height: 44px !default; +$item-ios-min-height: 44px; /// @prop - Font size of the item -$item-ios-font-size: dynamic-font(16px) !default; +$item-ios-font-size: dynamic-font(16px); /// @prop - Margin top of the item paragraph -$item-ios-paragraph-margin-top: 0 !default; +$item-ios-paragraph-margin-top: 0; /// @prop - Margin end of the item paragraph -$item-ios-paragraph-margin-end: 0 !default; +$item-ios-paragraph-margin-end: 0; /// @prop - Margin bottom of the item paragraph -$item-ios-paragraph-margin-bottom: 2px !default; +$item-ios-paragraph-margin-bottom: 2px; /// @prop - Margin start of the item paragraph -$item-ios-paragraph-margin-start: $item-ios-paragraph-margin-end !default; +$item-ios-paragraph-margin-start: $item-ios-paragraph-margin-end; /// @prop - Font size of the item paragraph -$item-ios-paragraph-font-size: dynamic-font(14px) !default; +$item-ios-paragraph-font-size: dynamic-font(14px); /// @prop - Color of the item paragraph -$item-ios-paragraph-text-color: var(--ion-text-color-step-550, #a3a3a3) !default; +$item-ios-paragraph-text-color: var(--ion-text-color-step-550, #a3a3a3); /// @prop - Width of the avatar in the item -$item-ios-avatar-width: 36px !default; +$item-ios-avatar-width: 36px; /// @prop - Height of the avatar in the item -$item-ios-avatar-height: $item-ios-avatar-width !default; +$item-ios-avatar-height: $item-ios-avatar-width; /// @prop - Size of the thumbnail in the item -$item-ios-thumbnail-size: 56px !default; +$item-ios-thumbnail-size: 56px; /// @prop - Padding top for the item content -$item-ios-padding-top: 10px !default; +$item-ios-padding-top: 10px; /// @prop - Padding end for the item content -$item-ios-padding-end: 16px !default; +$item-ios-padding-end: 16px; /// @prop - Padding bottom for the item content -$item-ios-padding-bottom: 10px !default; +$item-ios-padding-bottom: 10px; /// @prop - Padding start for the item content -$item-ios-padding-start: 16px !default; +$item-ios-padding-start: 16px; /// @prop - Border bottom width for the item when lines are displayed -$item-ios-border-bottom-width: $hairlines-width !default; +$item-ios-border-bottom-width: $hairlines-width; /// @prop - Border bottom style for the item when lines are displayed -$item-ios-border-bottom-style: solid !default; +$item-ios-border-bottom-style: solid; /// @prop - Border bottom color for the item when lines are displayed -$item-ios-border-bottom-color: $item-ios-border-color !default; +$item-ios-border-bottom-color: $item-ios-border-color; // Item Slots // -------------------------------------------------- /// @prop - Margin top for the start slot -$item-ios-slot-start-margin-top: 2px !default; +$item-ios-slot-start-margin-top: 2px; /// @prop - Margin end for the start slot -$item-ios-slot-start-margin-end: $item-ios-padding-end !default; +$item-ios-slot-start-margin-end: $item-ios-padding-end; /// @prop - Margin bottom for the start slot -$item-ios-slot-start-margin-bottom: $item-ios-slot-start-margin-top !default; +$item-ios-slot-start-margin-bottom: $item-ios-slot-start-margin-top; /// @prop - Margin start for the start slot -$item-ios-slot-start-margin-start: 0 !default; +$item-ios-slot-start-margin-start: 0; /// @prop - Margin top for the end slot -$item-ios-slot-end-margin-top: null !default; +$item-ios-slot-end-margin-top: null; /// @prop - Margin end for the end slot -$item-ios-slot-end-margin-end: null !default; +$item-ios-slot-end-margin-end: null; /// @prop - Margin bottom for the end slot -$item-ios-slot-end-margin-bottom: $item-ios-slot-end-margin-top !default; +$item-ios-slot-end-margin-bottom: $item-ios-slot-end-margin-top; /// @prop - Margin start for the end slot -$item-ios-slot-end-margin-start: null !default; +$item-ios-slot-end-margin-start: null; /// @prop - Margin top for an icon in the start/end slot -$item-ios-icon-slot-margin-top: 7px !default; +$item-ios-icon-slot-margin-top: 7px; /// @prop - Margin end for an icon in the start/end slot -$item-ios-icon-slot-margin-end: null !default; +$item-ios-icon-slot-margin-end: null; /// @prop - Margin bottom for an icon in the start/end slot -$item-ios-icon-slot-margin-bottom: 7px !default; +$item-ios-icon-slot-margin-bottom: 7px; /// @prop - Margin start for an icon in the start/end slot -$item-ios-icon-slot-margin-start: null !default; +$item-ios-icon-slot-margin-start: null; /// @prop - Margin top for the end slot inside of a floating/stacked label -$item-ios-label-slot-end-margin-top: 7px !default; +$item-ios-label-slot-end-margin-top: 7px; /// @prop - Margin end for the end slot inside of a floating/stacked label -$item-ios-label-slot-end-margin-end: null !default; +$item-ios-label-slot-end-margin-end: null; /// @prop - Margin bottom for the end slot inside of a floating/stacked label -$item-ios-label-slot-end-margin-bottom: $item-ios-label-slot-end-margin-top !default; +$item-ios-label-slot-end-margin-bottom: $item-ios-label-slot-end-margin-top; /// @prop - Margin start for the end slot inside of a floating/stacked label -$item-ios-label-slot-end-margin-start: $item-ios-label-slot-end-margin-end !default; +$item-ios-label-slot-end-margin-start: $item-ios-label-slot-end-margin-end; diff --git a/core/src/components/item/item.md.vars.scss b/core/src/components/item/item.md.vars.scss index d16d30300d6..fd9087067aa 100644 --- a/core/src/components/item/item.md.vars.scss +++ b/core/src/components/item/item.md.vars.scss @@ -4,182 +4,182 @@ // -------------------------------------------------- /// @prop - Minimum height of the item -$item-md-min-height: 48px !default; +$item-md-min-height: 48px; /// @prop - Color of the item paragraph -$item-md-paragraph-text-color: $text-color-step-400 !default; +$item-md-paragraph-text-color: $text-color-step-400; /// @prop - Font size of the item -$item-md-font-size: 16px !default; +$item-md-font-size: 16px; /// @prop - Width of the avatar in the item -$item-md-avatar-width: 40px !default; +$item-md-avatar-width: 40px; /// @prop - Height of the avatar in the item -$item-md-avatar-height: $item-md-avatar-width !default; +$item-md-avatar-height: $item-md-avatar-width; /// @prop - Size of the thumbnail in the item -$item-md-thumbnail-size: 56px !default; +$item-md-thumbnail-size: 56px; /// @prop - Padding top for the item content -$item-md-padding-top: 10px !default; +$item-md-padding-top: 10px; /// @prop - Padding end for the item content -$item-md-padding-end: 16px !default; +$item-md-padding-end: 16px; /// @prop - Padding bottom for the item content -$item-md-padding-bottom: 11px !default; +$item-md-padding-bottom: 11px; /// @prop - Padding start for the item content -$item-md-padding-start: 16px !default; +$item-md-padding-start: 16px; /// @prop - Border bottom width for the item when lines are displayed -$item-md-border-bottom-width: 1px !default; +$item-md-border-bottom-width: 1px; /// @prop - Border bottom style for the item when lines are displayed -$item-md-border-bottom-style: solid !default; +$item-md-border-bottom-style: solid; /// @prop - Border bottom color for the item when lines are displayed -$item-md-border-bottom-color: $item-md-border-color !default; +$item-md-border-bottom-color: $item-md-border-color; // Item Label // -------------------------------------------------- /// @prop - Margin top of the label -$item-md-label-margin-top: 10px !default; +$item-md-label-margin-top: 10px; /// @prop - Margin end of the label -$item-md-label-margin-end: 0 !default; +$item-md-label-margin-end: 0; /// @prop - Margin bottom of the label -$item-md-label-margin-bottom: 10px !default; +$item-md-label-margin-bottom: 10px; /// @prop - Margin start of the label -$item-md-label-margin-start: 0 !default; +$item-md-label-margin-start: 0; // Item Slots // -------------------------------------------------- /// @prop - Margin start for the start slot -$item-md-start-slot-margin-start: null !default; +$item-md-start-slot-margin-start: null; /// @prop - Margin end for the start slot -$item-md-start-slot-margin-end: 16px !default; +$item-md-start-slot-margin-end: 16px; /// @prop - Margin start for the end slot -$item-md-end-slot-margin-start: 16px !default; +$item-md-end-slot-margin-start: 16px; /// @prop - Margin end for the end slot -$item-md-end-slot-margin-end: null !default; +$item-md-end-slot-margin-end: null; /// @prop - Margin top for content in the start/end slot in a multi-line item -$item-md-multi-line-slot-margin-top: 16px !default; +$item-md-multi-line-slot-margin-top: 16px; /// @prop - Margin end for content in the start/end slot in a multi-line item -$item-md-multi-line-slot-margin-end: null !default; +$item-md-multi-line-slot-margin-end: null; /// @prop - Margin bottom for content in the start/end slot in a multi-line item -$item-md-multi-line-slot-margin-bottom: 16px !default; +$item-md-multi-line-slot-margin-bottom: 16px; /// @prop - Margin start for content in the start/end slot in a multi-line item -$item-md-multi-line-slot-margin-start: null !default; +$item-md-multi-line-slot-margin-start: null; // Icon Slots // -------------------------------------------------- /// @prop - Margin top for an icon in the start/end slot -$item-md-icon-slot-margin-top: 12px !default; +$item-md-icon-slot-margin-top: 12px; /// @prop - Margin end for an icon in the start/end slot -$item-md-icon-slot-margin-end: null !default; +$item-md-icon-slot-margin-end: null; /// @prop - Margin bottom for an icon in the start/end slot -$item-md-icon-slot-margin-bottom: $item-md-icon-slot-margin-top !default; +$item-md-icon-slot-margin-bottom: $item-md-icon-slot-margin-top; /// @prop - Margin start for an icon in the start/end slot -$item-md-icon-slot-margin-start: null !default; +$item-md-icon-slot-margin-start: null; /// @prop - Margin start for an icon in the start slot -$item-md-icon-start-slot-margin-start: null !default; +$item-md-icon-start-slot-margin-start: null; /// @prop - Margin end for an icon in the start slot -$item-md-icon-start-slot-margin-end: 32px !default; +$item-md-icon-start-slot-margin-end: 32px; /// @prop - Margin end for an icon in the start slot -$item-md-input-icon-start-slot-margin-end: 8px !default; +$item-md-input-icon-start-slot-margin-end: 8px; /// @prop - Margin start for an icon in the end slot -$item-md-icon-end-slot-margin-start: 16px !default; +$item-md-icon-end-slot-margin-start: 16px; /// @prop - Margin end for an icon in the end slot -$item-md-icon-end-slot-margin-end: null !default; +$item-md-icon-end-slot-margin-end: null; /// @prop - Color for an icon in the start/end slot -$item-md-icon-slot-color: rgba($text-color-rgb, 0.54) !default; +$item-md-icon-slot-color: rgba($text-color-rgb, 0.54); /// @prop - Font size of an icon in the start/end slot -$item-md-icon-slot-font-size: 24px !default; +$item-md-icon-slot-font-size: 24px; // Label Slots // -------------------------------------------------- /// @prop - Margin top for the end slot inside of a floating/stacked label -$item-md-label-slot-end-margin-top: 7px !default; +$item-md-label-slot-end-margin-top: 7px; /// @prop - Margin end for the end slot inside of a floating/stacked label -$item-md-label-slot-end-margin-end: null !default; +$item-md-label-slot-end-margin-end: null; /// @prop - Margin bottom for the end slot inside of a floating/stacked label -$item-md-label-slot-end-margin-bottom: $item-md-label-slot-end-margin-top !default; +$item-md-label-slot-end-margin-bottom: $item-md-label-slot-end-margin-top; /// @prop - Margin start for the end slot inside of a floating/stacked label -$item-md-label-slot-end-margin-start: $item-md-label-slot-end-margin-end !default; +$item-md-label-slot-end-margin-start: $item-md-label-slot-end-margin-end; // Note Slots // -------------------------------------------------- /// @prop - Font size of a note in the start/end slot -$item-md-note-slot-font-size: dynamic-font(11px) !default; +$item-md-note-slot-font-size: dynamic-font(11px); /// @prop - Padding top for a note in the start/end slot -$item-md-note-slot-padding-top: 18px !default; +$item-md-note-slot-padding-top: 18px; /// @prop - Padding end for a note in the start/end slot -$item-md-note-slot-padding-end: 0 !default; +$item-md-note-slot-padding-end: 0; /// @prop - Padding bottom for a note in the start/end slot -$item-md-note-slot-padding-bottom: 10px !default; +$item-md-note-slot-padding-bottom: 10px; /// @prop - Padding start for a note in the start/end slot -$item-md-note-slot-padding-start: $item-md-note-slot-padding-end !default; +$item-md-note-slot-padding-start: $item-md-note-slot-padding-end; // Avatar/Thumbnail Slots // -------------------------------------------------- /// @prop - Margin top for an avatar/thumbnail in the start/end slot -$item-md-media-slot-margin-top: 8px !default; +$item-md-media-slot-margin-top: 8px; /// @prop - Margin end for an avatar/thumbnail in the start/end slot -$item-md-media-slot-margin-end: null !default; +$item-md-media-slot-margin-end: null; /// @prop - Margin bottom for an avatar/thumbnail in the start/end slot -$item-md-media-slot-margin-bottom: 8px !default; +$item-md-media-slot-margin-bottom: 8px; /// @prop - Margin start for an avatar/thumbnail in the start/end slot -$item-md-media-slot-margin-start: $item-md-media-slot-margin-end !default; +$item-md-media-slot-margin-start: $item-md-media-slot-margin-end; /// @prop - Margin start for an avatar/thumbnail in the start slot -$item-md-media-start-slot-margin-start: null !default; +$item-md-media-start-slot-margin-start: null; /// @prop - Margin end for an avatar/thumbnail in the start slot -$item-md-media-start-slot-margin-end: 16px !default; +$item-md-media-start-slot-margin-end: 16px; /// @prop - Margin start for an avatar/thumbnail in the end slot -$item-md-media-end-slot-margin-start: 16px !default; +$item-md-media-end-slot-margin-start: 16px; /// @prop - Margin end for an avatar/thumbnail in the end slot -$item-md-media-end-slot-margin-end: null !default; +$item-md-media-end-slot-margin-end: null; diff --git a/core/src/components/item/test/a11y/item.e2e.ts b/core/src/components/item/test/a11y/item.e2e.ts index 4b1cc609c0d..20536beb71a 100644 --- a/core/src/components/item/test/a11y/item.e2e.ts +++ b/core/src/components/item/test/a11y/item.e2e.ts @@ -2,15 +2,41 @@ import AxeBuilder from '@axe-core/playwright'; import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; +configs({ directions: ['ltr'], palettes: ['dark'] }).forEach(({ config, screenshot, title }) => { + test.describe(title('item: dark palette'), () => { + /** + * This test was originally created to ensure the item border has sufficient + * contrast. We don't use an Axe test here because Axe not warn about color + * contrast on the item borders. + */ + test('borders should have sufficient contrast', async ({ page }) => { + test.info().annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/29386', + }); + await page.setContent( + ` + + Item + Item + + `, + config + ); + + const list = page.locator('ion-list'); + + await expect(list).toHaveScreenshot(screenshot(`item-dark`)); + }); + }); +}); + configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => { test.describe(title('item: axe'), () => { test('should not have accessibility violations', async ({ page }) => { await page.goto(`/src/components/item/test/a11y`, config); - const results = await new AxeBuilder({ page }) - // TODO(FW-404): Re-enable rule once select is updated to avoid nested-interactive - .disableRules('nested-interactive') - .analyze(); + const results = await new AxeBuilder({ page }).analyze(); expect(results.violations).toEqual([]); }); diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-ios-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-ios-ltr-dark-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..e5129d4a015 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-ios-ltr-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-ios-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-ios-ltr-dark-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..c75f1c1f0e9 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-ios-ltr-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-ios-ltr-dark-Mobile-Safari-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-ios-ltr-dark-Mobile-Safari-linux.png new file mode 100644 index 00000000000..ddd58da378c Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-ios-ltr-dark-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-md-ltr-dark-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..ea2410f1080 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-md-ltr-dark-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-md-ltr-dark-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..d500d6cbfa0 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-md-ltr-dark-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-md-ltr-dark-Mobile-Safari-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-md-ltr-dark-Mobile-Safari-linux.png new file mode 100644 index 00000000000..e22cd978796 Binary files /dev/null and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-dark-md-ltr-dark-Mobile-Safari-linux.png differ diff --git a/core/src/components/label/label.ios.vars.scss b/core/src/components/label/label.ios.vars.scss index 4c277c0860f..8007a715dfc 100644 --- a/core/src/components/label/label.ios.vars.scss +++ b/core/src/components/label/label.ios.vars.scss @@ -5,13 +5,13 @@ // -------------------------------------------------- /// @prop - Text color of the stacked/floating label when it is focused -$label-ios-text-color-focused: null !default; +$label-ios-text-color-focused: null; /// @prop - Font size of the label when the text wraps -$label-ios-text-wrap-font-size: dynamic-font(14px) !default; +$label-ios-text-wrap-font-size: dynamic-font(14px); /// @prop - Line height of the label when the text wraps -$label-ios-text-wrap-line-height: 1.5 !default; +$label-ios-text-wrap-line-height: 1.5; /// @prop - Color of the item paragraph -$item-ios-paragraph-text-color: $text-color-step-600 !default; +$item-ios-paragraph-text-color: $text-color-step-600; diff --git a/core/src/components/label/label.md.vars.scss b/core/src/components/label/label.md.vars.scss index ed785732a8e..00136e716a2 100644 --- a/core/src/components/label/label.md.vars.scss +++ b/core/src/components/label/label.md.vars.scss @@ -5,10 +5,10 @@ // -------------------------------------------------- /// @prop - Text color of the stacked/floating label when it is focused -$label-md-text-color-focused: ion-color(primary, base) !default; +$label-md-text-color-focused: ion-color(primary, base); /// @prop - Line height of the label when the text wraps -$label-md-text-wrap-line-height: 1.5 !default; +$label-md-text-wrap-line-height: 1.5; /// @prop - Transition timing function of the label (stacked / focused) -$label-md-transition-timing-function: cubic-bezier(.4, 0, .2, 1) !default; +$label-md-transition-timing-function: cubic-bezier(.4, 0, .2, 1); diff --git a/core/src/components/list-header/list-header.ios.vars.scss b/core/src/components/list-header/list-header.ios.vars.scss index f15afb19b5f..313f8ec5ac4 100644 --- a/core/src/components/list-header/list-header.ios.vars.scss +++ b/core/src/components/list-header/list-header.ios.vars.scss @@ -5,19 +5,19 @@ // -------------------------------------------------- /// @prop - Padding start of the list header -$list-header-ios-padding-start: $item-ios-padding-start !default; +$list-header-ios-padding-start: $item-ios-padding-start; /// @prop - Font size of the list header -$list-header-ios-font-size: dynamic-font-max(22px, 2.55) !default; +$list-header-ios-font-size: dynamic-font-max(22px, 2.55); /// @prop - Font weight of the list header -$list-header-ios-font-weight: 700 !default; +$list-header-ios-font-weight: 700; /// @prop - Letter spacing of the list header -$list-header-ios-letter-spacing: 0 !default; +$list-header-ios-letter-spacing: 0; /// @prop - Text color of the list header -$list-header-ios-color: $text-color-step-150 !default; +$list-header-ios-color: $text-color-step-150; /// @prop - Background color of the list header -$list-header-ios-background-color: transparent !default; +$list-header-ios-background-color: transparent; diff --git a/core/src/components/list-header/list-header.md.vars.scss b/core/src/components/list-header/list-header.md.vars.scss index 400d02ba823..2768b924c30 100644 --- a/core/src/components/list-header/list-header.md.vars.scss +++ b/core/src/components/list-header/list-header.md.vars.scss @@ -5,13 +5,13 @@ // -------------------------------------------------- /// @prop - Padding start of the list header -$list-header-md-padding-start: $item-md-padding-start !default; +$list-header-md-padding-start: $item-md-padding-start; /// @prop - Minimum height of the list header -$list-header-md-min-height: 45px !default; +$list-header-md-min-height: 45px; /// @prop - Font size of the list header -$list-header-md-font-size: dynamic-font(14px) !default; +$list-header-md-font-size: dynamic-font(14px); /// @prop - Text color of the list header -$list-header-md-color: $text-color !default; +$list-header-md-color: $text-color; diff --git a/core/src/components/list/list.ios.vars.scss b/core/src/components/list/list.ios.vars.scss index 423d6aac6a2..bc1a04f0c3a 100644 --- a/core/src/components/list/list.ios.vars.scss +++ b/core/src/components/list/list.ios.vars.scss @@ -5,31 +5,31 @@ // -------------------------------------------------- /// @prop - Margin top of the list -$list-ios-margin-top: null !default; +$list-ios-margin-top: null; /// @prop - Margin end of the list -$list-ios-margin-end: null !default; +$list-ios-margin-end: null; /// @prop - Margin bottom of the list -$list-ios-margin-bottom: null !default; +$list-ios-margin-bottom: null; /// @prop - Margin start of the list -$list-ios-margin-start: null !default; +$list-ios-margin-start: null; /// @prop - Border bottom of the item in a list -$list-ios-item-border-bottom-width: $item-ios-border-bottom-width !default; +$list-ios-item-border-bottom-width: $item-ios-border-bottom-width; /// @prop - Margin top of the inset list -$list-inset-ios-margin-top: 16px !default; +$list-inset-ios-margin-top: 16px; /// @prop - Margin end of the inset list -$list-inset-ios-margin-end: 16px !default; +$list-inset-ios-margin-end: 16px; /// @prop - Margin bottom of the inset list -$list-inset-ios-margin-bottom: 16px !default; +$list-inset-ios-margin-bottom: 16px; /// @prop - Margin start of the inset list -$list-inset-ios-margin-start: 16px !default; +$list-inset-ios-margin-start: 16px; /// @prop - Border radius of the inset list -$list-inset-ios-border-radius: 10px !default; +$list-inset-ios-border-radius: 10px; diff --git a/core/src/components/list/list.md.vars.scss b/core/src/components/list/list.md.vars.scss index dd9ff16e6b3..2a219aa797b 100644 --- a/core/src/components/list/list.md.vars.scss +++ b/core/src/components/list/list.md.vars.scss @@ -5,43 +5,43 @@ // -------------------------------------------------- /// @prop - Margin top of the list -$list-md-margin-top: 0 !default; +$list-md-margin-top: 0; /// @prop - Margin end of the list -$list-md-margin-end: 0 !default; +$list-md-margin-end: 0; /// @prop - Margin bottom of the list -$list-md-margin-bottom: 0 !default; +$list-md-margin-bottom: 0; /// @prop - Margin start of the list -$list-md-margin-start: 0 !default; +$list-md-margin-start: 0; /// @prop - Padding top of the list -$list-md-padding-top: 8px !default; +$list-md-padding-top: 8px; /// @prop - Padding end of the list -$list-md-padding-end: 0 !default; +$list-md-padding-end: 0; /// @prop - Padding bottom of the list -$list-md-padding-bottom: 8px !default; +$list-md-padding-bottom: 8px; /// @prop - Padding start of the list -$list-md-padding-start: 0 !default; +$list-md-padding-start: 0; /// @prop - Border bottom of the item in a list -$list-md-item-border-bottom-width: $item-md-border-bottom-width !default; +$list-md-item-border-bottom-width: $item-md-border-bottom-width; /// @prop - Margin top of the inset list -$list-inset-md-margin-top: 16px !default; +$list-inset-md-margin-top: 16px; /// @prop - Margin end of the inset list -$list-inset-md-margin-end: 16px !default; +$list-inset-md-margin-end: 16px; /// @prop - Margin bottom of the inset list -$list-inset-md-margin-bottom: 16px !default; +$list-inset-md-margin-bottom: 16px; /// @prop - Margin start of the inset list -$list-inset-md-margin-start: 16px !default; +$list-inset-md-margin-start: 16px; /// @prop - Border radius of the inset list -$list-inset-md-border-radius: 2px !default; +$list-inset-md-border-radius: 2px; diff --git a/core/src/components/loading/loading.ios.vars.scss b/core/src/components/loading/loading.ios.vars.scss index 92d1946bc29..5e8df7c4d46 100644 --- a/core/src/components/loading/loading.ios.vars.scss +++ b/core/src/components/loading/loading.ios.vars.scss @@ -4,46 +4,46 @@ // -------------------------------------------------- /// @prop - Font size of the loading wrapper -$loading-ios-font-size: dynamic-font(14px) !default; +$loading-ios-font-size: dynamic-font(14px); /// @prop - Padding top of the loading wrapper -$loading-ios-padding-top: 24px !default; +$loading-ios-padding-top: 24px; /// @prop - Padding end of the loading wrapper -$loading-ios-padding-end: 34px !default; +$loading-ios-padding-end: 34px; /// @prop - Padding bottom of the loading wrapper -$loading-ios-padding-bottom: $loading-ios-padding-top !default; +$loading-ios-padding-bottom: $loading-ios-padding-top; /// @prop - Padding start of the loading wrapper -$loading-ios-padding-start: $loading-ios-padding-end !default; +$loading-ios-padding-start: $loading-ios-padding-end; /// @prop - Max width of the loading wrapper -$loading-ios-max-width: 270px !default; +$loading-ios-max-width: 270px; /// @prop - Maximum height of the loading wrapper -$loading-ios-max-height: 90% !default; +$loading-ios-max-height: 90%; /// @prop - Border radius of the loading wrapper -$loading-ios-border-radius: 8px !default; +$loading-ios-border-radius: 8px; /// @prop - Text color of the loading wrapper -$loading-ios-text-color: $text-color !default; +$loading-ios-text-color: $text-color; /// @prop - Background of the loading wrapper -$loading-ios-background-color: $overlay-ios-background-color !default; +$loading-ios-background-color: $overlay-ios-background-color; /// @prop - Background color alpha of the translucent loading wrapper -$loading-ios-translucent-background-color-alpha: .8 !default; +$loading-ios-translucent-background-color-alpha: .8; /// @prop - Background color of the translucent loading wrapper -$loading-ios-translucent-background-color: rgba($background-color-rgb, $loading-ios-translucent-background-color-alpha) !default; +$loading-ios-translucent-background-color: rgba($background-color-rgb, $loading-ios-translucent-background-color-alpha); /// @prop - Font weight of the loading content -$loading-ios-content-font-weight: bold !default; +$loading-ios-content-font-weight: bold; /// @prop - Color of the loading spinner -$loading-ios-spinner-color: $text-color-step-400 !default; +$loading-ios-spinner-color: $text-color-step-400; /// @prop - Filter of the translucent loading -$loading-ios-translucent-filter: saturate(180%) blur(20px) !default; +$loading-ios-translucent-filter: saturate(180%) blur(20px); diff --git a/core/src/components/loading/loading.md.vars.scss b/core/src/components/loading/loading.md.vars.scss index ec8611debe3..af11c750f32 100644 --- a/core/src/components/loading/loading.md.vars.scss +++ b/core/src/components/loading/loading.md.vars.scss @@ -4,40 +4,40 @@ // -------------------------------------------------- /// @prop - Font size of the loading wrapper -$loading-md-font-size: dynamic-font(14px) !default; +$loading-md-font-size: dynamic-font(14px); /// @prop - Padding top of the loading wrapper -$loading-md-padding-top: 24px !default; +$loading-md-padding-top: 24px; /// @prop - Padding end of the loading wrapper -$loading-md-padding-end: $loading-md-padding-top !default; +$loading-md-padding-end: $loading-md-padding-top; /// @prop - Padding bottom of the loading wrapper -$loading-md-padding-bottom: $loading-md-padding-top !default; +$loading-md-padding-bottom: $loading-md-padding-top; /// @prop - Padding start of the loading wrapper -$loading-md-padding-start: $loading-md-padding-end !default; +$loading-md-padding-start: $loading-md-padding-end; /// @prop - Max width of the loading wrapper -$loading-md-max-width: 280px !default; +$loading-md-max-width: 280px; /// @prop - Maximum height of the loading wrapper -$loading-md-max-height: 90% !default; +$loading-md-max-height: 90%; /// @prop - Border radius of the loading wrapper -$loading-md-border-radius: 2px !default; +$loading-md-border-radius: 2px; /// @prop - Text color of the loading wrapper -$loading-md-text-color: $text-color-step-150 !default; +$loading-md-text-color: $text-color-step-150; /// @prop - Background of the loading wrapper -$loading-md-background: $background-color-step-50 !default; +$loading-md-background: $background-color-step-50; /// @prop - Box shadow color of the loading wrapper -$loading-md-box-shadow-color: rgba(0, 0, 0, .4) !default; +$loading-md-box-shadow-color: rgba(0, 0, 0, .4); /// @prop - Box shadow of the loading wrapper -$loading-md-box-shadow: 0 16px 20px $loading-md-box-shadow-color !default; +$loading-md-box-shadow: 0 16px 20px $loading-md-box-shadow-color; /// @prop - Color of the loading spinner -$loading-md-spinner-color: ion-color(primary, base) !default; +$loading-md-spinner-color: ion-color(primary, base); diff --git a/core/src/components/menu/menu.ios.vars.scss b/core/src/components/menu/menu.ios.vars.scss index c2936ddff7d..4b4ce895bc9 100644 --- a/core/src/components/menu/menu.ios.vars.scss +++ b/core/src/components/menu/menu.ios.vars.scss @@ -4,22 +4,22 @@ // -------------------------------------------------- /// @prop - Box shadow color of the menu -$menu-ios-box-shadow-color: rgba(0, 0, 0, .08) !default; +$menu-ios-box-shadow-color: rgba(0, 0, 0, .08); /// @prop - Box shadow of the menu -$menu-ios-box-shadow: -8px 0 42px $menu-ios-box-shadow-color !default; +$menu-ios-box-shadow: -8px 0 42px $menu-ios-box-shadow-color; /// @prop - Box shadow of the menu in rtl mode -$menu-ios-box-shadow-rtl: 8px 0 42px $menu-ios-box-shadow-color !default; +$menu-ios-box-shadow-rtl: 8px 0 42px $menu-ios-box-shadow-color; /// @prop - Box shadow of the reveal menu -$menu-ios-box-shadow-reveal: $menu-ios-box-shadow !default; +$menu-ios-box-shadow-reveal: $menu-ios-box-shadow; /// @prop - Box shadow of the reveal menu -$menu-ios-box-shadow-reveal-rtl: $menu-ios-box-shadow-rtl !default; +$menu-ios-box-shadow-reveal-rtl: $menu-ios-box-shadow-rtl; /// @prop - Box shadow of the push menu -$menu-ios-box-shadow-push: null !default; +$menu-ios-box-shadow-push: null; /// @prop - Box shadow of the overlay menu -$menu-ios-box-shadow-overlay: null !default; +$menu-ios-box-shadow-overlay: null; diff --git a/core/src/components/menu/menu.md.vars.scss b/core/src/components/menu/menu.md.vars.scss index 6acf939cceb..d47b011739d 100644 --- a/core/src/components/menu/menu.md.vars.scss +++ b/core/src/components/menu/menu.md.vars.scss @@ -4,4 +4,4 @@ // -------------------------------------------------- /// @prop - Box shadow of the menu -$menu-md-box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18) !default; +$menu-md-box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18); diff --git a/core/src/components/menu/menu.vars.scss b/core/src/components/menu/menu.vars.scss index 236417c136a..a42a96d548c 100644 --- a/core/src/components/menu/menu.vars.scss +++ b/core/src/components/menu/menu.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Width of the menu -$menu-width: 304px !default; +$menu-width: 304px; /// @prop - Width of the menu on small devices (under 340px) -$menu-small-width: $menu-width - 40px !default; +$menu-small-width: $menu-width - 40px; diff --git a/core/src/components/modal/modal.ios.vars.scss b/core/src/components/modal/modal.ios.vars.scss index 664aefd3319..d82de67f79a 100644 --- a/core/src/components/modal/modal.ios.vars.scss +++ b/core/src/components/modal/modal.ios.vars.scss @@ -4,4 +4,4 @@ // -------------------------------------------------- /// @prop - Border radius for the modal -$modal-ios-border-radius: 10px !default; +$modal-ios-border-radius: 10px; diff --git a/core/src/components/modal/modal.md.vars.scss b/core/src/components/modal/modal.md.vars.scss index bf77d69a7ec..37aa47cb53f 100644 --- a/core/src/components/modal/modal.md.vars.scss +++ b/core/src/components/modal/modal.md.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Box shadow color of the alert -$modal-inset-box-shadow-color: rgba(0, 0, 0, .4) !default; +$modal-inset-box-shadow-color: rgba(0, 0, 0, .4); /// @prop - Box shadow of the alert -$modal-inset-box-shadow: 0 28px 48px $modal-inset-box-shadow-color !default; +$modal-inset-box-shadow: 0 28px 48px $modal-inset-box-shadow-color; diff --git a/core/src/components/modal/modal.vars.scss b/core/src/components/modal/modal.vars.scss index f881168971d..724de22a0cf 100644 --- a/core/src/components/modal/modal.vars.scss +++ b/core/src/components/modal/modal.vars.scss @@ -4,22 +4,22 @@ // -------------------------------------------------- /// @prop - Min width of the modal inset -$modal-inset-min-width: 768px !default; +$modal-inset-min-width: 768px; /// @prop - Minimum height of the small modal inset -$modal-inset-min-height-small: 600px !default; +$modal-inset-min-height-small: 600px; /// @prop - Minimum height of the large modal inset -$modal-inset-min-height-large: 768px !default; +$modal-inset-min-height-large: 768px; /// @prop - Width of the large modal inset -$modal-inset-width: 600px !default; +$modal-inset-width: 600px; /// @prop - Height of the small modal inset -$modal-inset-height-small: 500px !default; +$modal-inset-height-small: 500px; /// @prop - Height of the large modal inset -$modal-inset-height-large: 600px !default; +$modal-inset-height-large: 600px; /// @prop - Text color of the modal content -$modal-text-color: $text-color !default; +$modal-text-color: $text-color; diff --git a/core/src/components/note/note.ios.vars.scss b/core/src/components/note/note.ios.vars.scss index b452c16e418..e9674e23a06 100644 --- a/core/src/components/note/note.ios.vars.scss +++ b/core/src/components/note/note.ios.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Text color of the note -$note-ios-color: $text-color-step-650 !default; +$note-ios-color: $text-color-step-650; /// @prop - Font size of the note -$note-ios-font-size: dynamic-font-min(0.875, 16px) !default; +$note-ios-font-size: dynamic-font-min(0.875, 16px); diff --git a/core/src/components/note/note.md.vars.scss b/core/src/components/note/note.md.vars.scss index f08f55ef91b..ab634d46206 100644 --- a/core/src/components/note/note.md.vars.scss +++ b/core/src/components/note/note.md.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Text color of the note -$note-md-color: $text-color-step-400 !default; +$note-md-color: $text-color-step-400; /// @prop - Font size of the note -$note-md-font-size: dynamic-font(14px) !default; +$note-md-font-size: dynamic-font(14px); diff --git a/core/src/components/picker-column/picker-column.tsx b/core/src/components/picker-column/picker-column.tsx index 81b24bc904d..623038b1c77 100644 --- a/core/src/components/picker-column/picker-column.tsx +++ b/core/src/components/picker-column/picker-column.tsx @@ -66,6 +66,8 @@ export class PickerColumn implements ComponentInterface { /** * Emitted when the value has changed. + * + * This event will not emit when programmatically setting the `value` property. */ @Event() ionChange!: EventEmitter; diff --git a/core/src/components/picker-legacy/picker.ios.vars.scss b/core/src/components/picker-legacy/picker.ios.vars.scss index 6bb3e14e062..3009a441fb9 100644 --- a/core/src/components/picker-legacy/picker.ios.vars.scss +++ b/core/src/components/picker-legacy/picker.ios.vars.scss @@ -4,85 +4,85 @@ // -------------------------------------------------- /// @prop - Height of the picker wrapper -$picker-ios-height: 260px !default; +$picker-ios-height: 260px; /// @prop - Border color of the picker wrapper -$picker-ios-border-color: $item-ios-border-color !default; +$picker-ios-border-color: $item-ios-border-color; /// @prop - Background Color of the picker wrapper -$picker-ios-background-color: $background-color !default; +$picker-ios-background-color: $background-color; /// @prop - Top Background Color of the picker wrapper gradient -$picker-ios-top-background-color: var(--background, $picker-ios-background-color) !default; +$picker-ios-top-background-color: var(--background, $picker-ios-background-color); /// @prop - Bottom Background Color alpha of the picker wrapper gradient -$picker-ios-bottom-background-color-alpha: .8 !default; +$picker-ios-bottom-background-color-alpha: .8; /// @prop - Bottom Background Color of the picker wrapper gradient -$picker-ios-bottom-background-color: rgba(var(--background-rgb, $background-color-rgb), $picker-ios-bottom-background-color-alpha) !default; +$picker-ios-bottom-background-color: rgba(var(--background-rgb, $background-color-rgb), $picker-ios-bottom-background-color-alpha); /// @prop - Height of the picker toolbar -$picker-ios-toolbar-height: 44px !default; +$picker-ios-toolbar-height: 44px; /// @prop - Height of the picker button -$picker-ios-button-height: $picker-ios-toolbar-height !default; +$picker-ios-button-height: $picker-ios-toolbar-height; /// @prop - Text color of the picker button -$picker-ios-button-text-color: ion-color(primary, base) !default; +$picker-ios-button-text-color: ion-color(primary, base); /// @prop - Font size of the picker button -$picker-ios-button-font-size: 16px !default; +$picker-ios-button-font-size: 16px; /// @prop - Padding top of the picker button -$picker-ios-button-padding-top: 0 !default; +$picker-ios-button-padding-top: 0; /// @prop - Padding end of the picker button -$picker-ios-button-padding-end: 1em !default; +$picker-ios-button-padding-end: 1em; /// @prop - Padding bottom of the picker button -$picker-ios-button-padding-bottom: $picker-ios-button-padding-top !default; +$picker-ios-button-padding-bottom: $picker-ios-button-padding-top; /// @prop - Padding start of the picker button -$picker-ios-button-padding-start: $picker-ios-button-padding-end !default; +$picker-ios-button-padding-start: $picker-ios-button-padding-end; /// @prop - Font weight of the strong picker button -$picker-ios-button-strong-font-weight: 600 !default; +$picker-ios-button-strong-font-weight: 600; /// @prop - Padding top of the picker column -$picker-ios-column-padding-top: 0 !default; +$picker-ios-column-padding-top: 0; /// @prop - Padding end of the picker column -$picker-ios-column-padding-end: 4px !default; +$picker-ios-column-padding-end: 4px; /// @prop - Padding bottom of the picker column -$picker-ios-column-padding-bottom: $picker-ios-column-padding-top !default; +$picker-ios-column-padding-bottom: $picker-ios-column-padding-top; /// @prop - Padding start of the picker column -$picker-ios-column-padding-start: $picker-ios-column-padding-end !default; +$picker-ios-column-padding-start: $picker-ios-column-padding-end; /// @prop - Perspective of the picker column -$picker-ios-column-perspective: 1000px !default; +$picker-ios-column-perspective: 1000px; /// @prop - Padding top of the picker option -$picker-ios-option-padding-top: 0 !default; +$picker-ios-option-padding-top: 0; /// @prop - Padding end of the picker option -$picker-ios-option-padding-end: $picker-ios-option-padding-top !default; +$picker-ios-option-padding-end: $picker-ios-option-padding-top; /// @prop - Padding bottom of the picker option -$picker-ios-option-padding-bottom: $picker-ios-option-padding-top !default; +$picker-ios-option-padding-bottom: $picker-ios-option-padding-top; /// @prop - Padding start of the picker option -$picker-ios-option-padding-start: $picker-ios-option-padding-end !default; +$picker-ios-option-padding-start: $picker-ios-option-padding-end; /// @prop - Text color of the picker option -$picker-ios-option-text-color: $item-ios-color !default; +$picker-ios-option-text-color: $item-ios-color; /// @prop - Font size of the picker option -$picker-ios-option-font-size: 20px !default; +$picker-ios-option-font-size: 20px; /// @prop - Height of the picker option -$picker-ios-option-height: 42px !default; +$picker-ios-option-height: 42px; /// @prop - Offset y of the picker option -$picker-ios-option-offset-y: (($picker-ios-height - $picker-ios-toolbar-height) * 0.5) - ($picker-ios-option-height * 0.5) - 10 !default; +$picker-ios-option-offset-y: (($picker-ios-height - $picker-ios-toolbar-height) * 0.5) - ($picker-ios-option-height * 0.5) - 10; diff --git a/core/src/components/picker-legacy/picker.md.vars.scss b/core/src/components/picker-legacy/picker.md.vars.scss index d2f8675beb5..10d9b50da62 100644 --- a/core/src/components/picker-legacy/picker.md.vars.scss +++ b/core/src/components/picker-legacy/picker.md.vars.scss @@ -4,73 +4,73 @@ // -------------------------------------------------- /// @prop - Height of the picker wrapper -$picker-md-height: 260px !default; +$picker-md-height: 260px; /// @prop - Border color of the picker wrapper -$picker-md-border-color: $item-md-border-color !default; +$picker-md-border-color: $item-md-border-color; /// @prop - Background Color of the picker wrapper -$picker-md-background-color: $background-color !default; +$picker-md-background-color: $background-color; /// @prop - Top Background Color of the picker wrapper gradient -$picker-md-top-background-color: $picker-md-background-color !default; +$picker-md-top-background-color: $picker-md-background-color; /// @prop - Bottom Background Color alpha of the picker wrapper gradient -$picker-md-bottom-background-color-alpha: .8 !default; +$picker-md-bottom-background-color-alpha: .8; /// @prop - Bottom Background Color of the picker wrapper gradient -$picker-md-bottom-background-color: rgba($background-color-rgb, $picker-md-bottom-background-color-alpha) !default; +$picker-md-bottom-background-color: rgba($background-color-rgb, $picker-md-bottom-background-color-alpha); /// @prop - Height of the picker toolbar -$picker-md-toolbar-height: 44px !default; +$picker-md-toolbar-height: 44px; /// @prop - Height of the picker button -$picker-md-button-height: $picker-md-toolbar-height !default; +$picker-md-button-height: $picker-md-toolbar-height; /// @prop - Text color of the picker button -$picker-md-button-text-color: ion-color(primary, base) !default; +$picker-md-button-text-color: ion-color(primary, base); /// @prop - Background of the picker button -$picker-md-button-background-color: transparent !default; +$picker-md-button-background-color: transparent; /// @prop - Font size of the picker button -$picker-md-button-font-size: 14px !default; +$picker-md-button-font-size: 14px; /// @prop - Padding top of the picker column -$picker-md-column-padding-top: 0 !default; +$picker-md-column-padding-top: 0; /// @prop - Padding end of the picker column -$picker-md-column-padding-end: 8px !default; +$picker-md-column-padding-end: 8px; /// @prop - Padding bottom of the picker column -$picker-md-column-padding-bottom: $picker-md-column-padding-top !default; +$picker-md-column-padding-bottom: $picker-md-column-padding-top; /// @prop - Padding start of the picker column -$picker-md-column-padding-start: $picker-md-column-padding-end !default; +$picker-md-column-padding-start: $picker-md-column-padding-end; /// @prop - Padding top of the picker option -$picker-md-option-padding-top: 0 !default; +$picker-md-option-padding-top: 0; /// @prop - Padding end of the picker option -$picker-md-option-padding-end: $picker-md-option-padding-top !default; +$picker-md-option-padding-end: $picker-md-option-padding-top; /// @prop - Padding bottom of the picker option -$picker-md-option-padding-bottom: $picker-md-option-padding-top !default; +$picker-md-option-padding-bottom: $picker-md-option-padding-top; /// @prop - Padding start of the picker option -$picker-md-option-padding-start: $picker-md-option-padding-end !default; +$picker-md-option-padding-start: $picker-md-option-padding-end; /// @prop - Text color of the picker option -$picker-md-option-text-color: $item-md-color !default; +$picker-md-option-text-color: $item-md-color; /// @prop - Font size of the picker option -$picker-md-option-font-size: 22px !default; +$picker-md-option-font-size: 22px; /// @prop - Height of the picker option -$picker-md-option-height: 42px !default; +$picker-md-option-height: 42px; /// @prop - Offset y of the picker option -$picker-md-option-offset-y: (($picker-md-height - $picker-md-toolbar-height) * 0.5) - ($picker-md-option-height * 0.5) - 10 !default; +$picker-md-option-offset-y: (($picker-md-height - $picker-md-toolbar-height) * 0.5) - ($picker-md-option-height * 0.5) - 10; /// @prop - Text color of the selected picker option -$picker-md-option-selected-color: ion-color(primary, base) !default; +$picker-md-option-selected-color: ion-color(primary, base); diff --git a/core/src/components/picker-legacy/picker.vars.scss b/core/src/components/picker-legacy/picker.vars.scss index 31a7ffd2b8b..24421b72b4b 100644 --- a/core/src/components/picker-legacy/picker.vars.scss +++ b/core/src/components/picker-legacy/picker.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Width of the picker -$picker-width: 100% !default; +$picker-width: 100%; /// @prop - Max width of the picker -$picker-max-width: 500px !default; +$picker-max-width: 500px; diff --git a/core/src/components/popover/popover.ios.vars.scss b/core/src/components/popover/popover.ios.vars.scss index c5f9cbe8f41..bf803b5d76d 100644 --- a/core/src/components/popover/popover.ios.vars.scss +++ b/core/src/components/popover/popover.ios.vars.scss @@ -4,25 +4,25 @@ // -------------------------------------------------- /// @prop - Width of the popover content -$popover-ios-width: 200px !default; +$popover-ios-width: 200px; /// @prop - Maximum height of the popover content -$popover-ios-max-height: 90% !default; +$popover-ios-max-height: 90%; /// @prop - Border radius of the popover content -$popover-ios-border-radius: 10px !default; +$popover-ios-border-radius: 10px; /// @prop - Background color alpha of the popover content -$popover-ios-translucent-background-color-alpha: .8 !default; +$popover-ios-translucent-background-color-alpha: .8; /// @prop - Background color of the popover content -$popover-ios-translucent-background-color: rgba($background-color-rgb, $popover-ios-translucent-background-color-alpha) !default; +$popover-ios-translucent-background-color: rgba($background-color-rgb, $popover-ios-translucent-background-color-alpha); /// @prop - Filter of the translucent popover -$popover-ios-translucent-filter: saturate(180%) blur(20px) !default; +$popover-ios-translucent-filter: saturate(180%) blur(20px); /// $prop - Box shadow of popover on desktop -$popover-ios-desktop-box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12) !default; +$popover-ios-desktop-box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12); /// $prop - Border of popover content on desktop -$popover-ios-desktop-border: 0.5px solid $background-color-step-100 !default; +$popover-ios-desktop-border: 0.5px solid $background-color-step-100; diff --git a/core/src/components/popover/popover.md.vars.scss b/core/src/components/popover/popover.md.vars.scss index 4241aea4de4..9eaf10c8747 100644 --- a/core/src/components/popover/popover.md.vars.scss +++ b/core/src/components/popover/popover.md.vars.scss @@ -4,13 +4,13 @@ // -------------------------------------------------- /// @prop - Width of the popover content -$popover-md-width: 250px !default; +$popover-md-width: 250px; /// @prop - Maximum height of the popover content -$popover-md-max-height: 90% !default; +$popover-md-max-height: 90%; /// @prop - Border radius of the popover content -$popover-md-border-radius: 4px !default; +$popover-md-border-radius: 4px; /// @prop - Box shadow of the popover content -$popover-md-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12) !default; +$popover-md-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12); diff --git a/core/src/components/popover/popover.vars.scss b/core/src/components/popover/popover.vars.scss index 2ce9fdc7bab..3b8f52bb85a 100644 --- a/core/src/components/popover/popover.vars.scss +++ b/core/src/components/popover/popover.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Text color of the popover content -$popover-text-color: $text-color !default; +$popover-text-color: $text-color; /// @prop - Background color of the popover content -$popover-background-color: $background-color !default; \ No newline at end of file +$popover-background-color: $background-color; \ No newline at end of file diff --git a/core/src/components/progress-bar/progress-bar.ios.vars.scss b/core/src/components/progress-bar/progress-bar.ios.vars.scss index f38bba637c1..ff83c57d2e7 100644 --- a/core/src/components/progress-bar/progress-bar.ios.vars.scss +++ b/core/src/components/progress-bar/progress-bar.ios.vars.scss @@ -2,7 +2,7 @@ // -------------------------------------------------- /// @prop - Height of the progress bar -$progress-bar-ios-height: 4px !default; +$progress-bar-ios-height: 4px; /// @prop - Border radius of the progress bar container -$progress-bar-ios-border-radius: 9999px !default; +$progress-bar-ios-border-radius: 9999px; diff --git a/core/src/components/progress-bar/progress-bar.md.vars.scss b/core/src/components/progress-bar/progress-bar.md.vars.scss index feb8de2bb01..0ff0af1f4a4 100644 --- a/core/src/components/progress-bar/progress-bar.md.vars.scss +++ b/core/src/components/progress-bar/progress-bar.md.vars.scss @@ -2,4 +2,4 @@ // -------------------------------------------------- /// @prop - Height of the progress bar -$progress-bar-md-height: 4px !default; +$progress-bar-md-height: 4px; diff --git a/core/src/components/radio-group/radio-group.tsx b/core/src/components/radio-group/radio-group.tsx index dce1c626169..c46156a2c95 100644 --- a/core/src/components/radio-group/radio-group.tsx +++ b/core/src/components/radio-group/radio-group.tsx @@ -47,6 +47,8 @@ export class RadioGroup implements ComponentInterface { /** * Emitted when the value has changed. + * + * This event will not emit when programmatically setting the `value` property. */ @Event() ionChange!: EventEmitter; diff --git a/core/src/components/radio/radio.ios.vars.scss b/core/src/components/radio/radio.ios.vars.scss index 459e96dd154..2c971126436 100644 --- a/core/src/components/radio/radio.ios.vars.scss +++ b/core/src/components/radio/radio.ios.vars.scss @@ -5,19 +5,19 @@ // -------------------------------------------------- /// @prop - Background color of focus indicator for radio when focused -$radio-ios-background-color-focused: ion-color(primary, tint) !default; +$radio-ios-background-color-focused: ion-color(primary, tint); /// @prop - Width of the radio icon -$radio-ios-icon-width: dynamic-font(15px) !default; +$radio-ios-icon-width: dynamic-font(15px); /// @prop - Height of the radio icon -$radio-ios-icon-height: dynamic-font(24px) !default; +$radio-ios-icon-height: dynamic-font(24px); /// @prop - Border width of the radio icon -$radio-ios-icon-border-width: dynamic-font(2px) !default; +$radio-ios-icon-border-width: dynamic-font(2px); /// @prop - Border style of the radio icon -$radio-ios-icon-border-style: solid !default; +$radio-ios-icon-border-style: solid; /// @prop - Opacity of the disabled radio -$radio-ios-disabled-opacity: $form-control-ios-disabled-opacity !default; +$radio-ios-disabled-opacity: $form-control-ios-disabled-opacity; diff --git a/core/src/components/radio/radio.md.vars.scss b/core/src/components/radio/radio.md.vars.scss index 1dfa6c780f1..99dca7c1c56 100644 --- a/core/src/components/radio/radio.md.vars.scss +++ b/core/src/components/radio/radio.md.vars.scss @@ -5,37 +5,37 @@ // -------------------------------------------------- /// @prop - Color of the checked radio -$radio-md-color-on: current-color(base) !default; +$radio-md-color-on: current-color(base); /// @prop - Background color of focus indicator for radio when focused -$radio-md-background-color-focused: ion-color(primary, tint) !default; +$radio-md-background-color-focused: ion-color(primary, tint); /// @prop - Color of the unchecked radio -$radio-md-color-off: rgb($text-color-rgb, 0.60) !default; +$radio-md-color-off: rgb($text-color-rgb, 0.60); /// @prop - Width of the radio icon -$radio-md-icon-width: dynamic-font(20px) !default; +$radio-md-icon-width: dynamic-font(20px); /// @prop - Height of the radio icon -$radio-md-icon-height: dynamic-font(20px) !default; +$radio-md-icon-height: dynamic-font(20px); /// @prop - Border width of the radio icon -$radio-md-icon-border-width: dynamic-font(2px) !default; +$radio-md-icon-border-width: dynamic-font(2px); /// @prop - Border style of the radio icon -$radio-md-icon-border-style: solid !default; +$radio-md-icon-border-style: solid; /// @prop - Border radius of the radio icon -$radio-md-icon-border-radius: 50% !default; +$radio-md-icon-border-radius: 50%; /// @prop - Transition duration of the radio -$radio-md-transition-duration: 280ms !default; +$radio-md-transition-duration: 280ms; /// @prop - Transition easing of the radio -$radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default; +$radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1); /// @prop - Opacity of the disabled radio label -$radio-md-disabled-opacity: $form-control-md-disabled-opacity !default; +$radio-md-disabled-opacity: $form-control-md-disabled-opacity; /// @prop - Opacity of the disabled radio /// This value is used because the radio color is set to @@ -44,4 +44,4 @@ $radio-md-disabled-opacity: $form-control-md-disabled-opacity !default; /// opacity is applied on top of the transparent color so /// this opacity gets us the equivalent of applying `0.38` /// on top of an opaque radio `rgb(0, 0, 0, 1.0)` -$radio-md-icon-disabled-opacity: 0.63 !default; +$radio-md-icon-disabled-opacity: 0.63; diff --git a/core/src/components/radio/radio.vars.scss b/core/src/components/radio/radio.vars.scss index 76dbfaf79fc..b578bb69969 100644 --- a/core/src/components/radio/radio.vars.scss +++ b/core/src/components/radio/radio.vars.scss @@ -1,5 +1,5 @@ /// @prop - Top margin of radio's label when in an item -$radio-item-label-margin-top: 10px !default; +$radio-item-label-margin-top: 10px; /// @prop - Bottom margin of radio's label when in an item -$radio-item-label-margin-bottom: 10px !default; \ No newline at end of file +$radio-item-label-margin-bottom: 10px; \ No newline at end of file diff --git a/core/src/components/range/range.ios.vars.scss b/core/src/components/range/range.ios.vars.scss index b51ed489e98..465b2434c5b 100644 --- a/core/src/components/range/range.ios.vars.scss +++ b/core/src/components/range/range.ios.vars.scss @@ -4,71 +4,71 @@ // -------------------------------------------------- /// @prop - Padding top/bottom of the range -$range-ios-padding-vertical: 8px !default; +$range-ios-padding-vertical: 8px; /// @prop - Padding start/end of the range - modern syntax /** * 24px was chosen so the knob and its * shadow do not get cut off by the item. */ -$range-ios-item-padding-horizontal: 24px !default; +$range-ios-item-padding-horizontal: 24px; /// @prop - Height of the range slider -$range-ios-slider-height: 42px !default; +$range-ios-slider-height: 42px; /// @prop - Height of the area that will select the range knob -$range-ios-hit-height: $range-ios-slider-height !default; +$range-ios-hit-height: $range-ios-slider-height; /// @prop - Height of the range bar -$range-ios-bar-height: 4px !default; +$range-ios-bar-height: 4px; /// @prop - Background of the range bar -$range-ios-bar-background-color: var(--ion-color-step-900, var(--ion-background-color-step-900, #e6e6e6)) !default; +$range-ios-bar-background-color: var(--ion-color-step-900, var(--ion-background-color-step-900, #e6e6e6)); /// @prop - Border radius of the range bar -$range-ios-bar-border-radius: 2px !default; +$range-ios-bar-border-radius: 2px; /// @prop - Width of the range knob -$range-ios-knob-width: 26px !default; +$range-ios-knob-width: 26px; /// @prop - Box shadow of the range knob -$range-ios-knob-box-shadow: 0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12) !default; +$range-ios-knob-box-shadow: 0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12); /// @prop - Background of the range knob -$range-ios-knob-background-color: #ffffff !default; +$range-ios-knob-background-color: #ffffff; /// @prop - Width of the range tick -$range-ios-tick-width: $range-ios-bar-height !default; +$range-ios-tick-width: $range-ios-bar-height; /// @prop - Height of the range tick -$range-ios-tick-height: 8px !default; +$range-ios-tick-height: 8px; /// @prop - Border radius of the range tick -$range-ios-tick-border-radius: 0 !default; +$range-ios-tick-border-radius: 0; /// @prop - Background of the range tick -$range-ios-tick-background-color: $range-ios-bar-background-color !default; +$range-ios-tick-background-color: $range-ios-bar-background-color; /// @prop - Background of the range pin -$range-ios-pin-background-color: transparent !default; +$range-ios-pin-background-color: transparent; /// @prop - Color of the range pin -$range-ios-pin-color: $text-color !default; +$range-ios-pin-color: $text-color; /// @prop - Font size of the range pin -$range-ios-pin-font-size: dynamic-font(12px) !default; +$range-ios-pin-font-size: dynamic-font(12px); /// @prop - Padding top of the range pin -$range-ios-pin-padding-top: 8px !default; +$range-ios-pin-padding-top: 8px; /// @prop - Padding end of the range pin -$range-ios-pin-padding-end: $range-ios-pin-padding-top !default; +$range-ios-pin-padding-end: $range-ios-pin-padding-top; /// @prop - Padding bottom of the range pin -$range-ios-pin-padding-bottom: $range-ios-pin-padding-top !default; +$range-ios-pin-padding-bottom: $range-ios-pin-padding-top; /// @prop - Padding start of the range pin -$range-ios-pin-padding-start: $range-ios-pin-padding-end !default; +$range-ios-pin-padding-start: $range-ios-pin-padding-end; /// @prop - Opacity of the disabled range -$range-ios-disabled-opacity: $form-control-ios-disabled-opacity !default; +$range-ios-disabled-opacity: $form-control-ios-disabled-opacity; diff --git a/core/src/components/range/range.md.vars.scss b/core/src/components/range/range.md.vars.scss index c5c0293c8c3..39b5a6ad72d 100644 --- a/core/src/components/range/range.md.vars.scss +++ b/core/src/components/range/range.md.vars.scss @@ -4,44 +4,44 @@ // -------------------------------------------------- /// @prop - Padding top/bottom of the range -$range-md-padding-vertical: 8px !default; +$range-md-padding-vertical: 8px; /// @prop - Padding start/end of the range - modern range /** * 18px was chosen so the knob and its focus/active * effects do not get cut off by the item. */ -$range-md-item-padding-horizontal: 18px !default; +$range-md-item-padding-horizontal: 18px; /// @prop - Height of the range slider -$range-md-slider-height: 42px !default; +$range-md-slider-height: 42px; /// @prop - Height of the range bar -$range-md-bar-height: 2px !default; +$range-md-bar-height: 2px; /// @prop - Background of the range bar -$range-md-bar-background-color: $background-color-step-250 !default; +$range-md-bar-background-color: $background-color-step-250; /// @prop - Font size of the range pin -$range-md-pin-font-size: dynamic-font(12px) !default; +$range-md-pin-font-size: dynamic-font(12px); /// @prop - Padding top/bottom of the range pin -$range-md-pin-padding-vertical: 8px !default; +$range-md-pin-padding-vertical: 8px; /// @prop - Padding start/end of the range pin -$range-md-pin-padding-horizontal: 0 !default; +$range-md-pin-padding-horizontal: 0; /// @prop - Width and height of the range pin -$range-md-pin-dimension: dynamic-font(28px) !default; +$range-md-pin-dimension: dynamic-font(28px); /// @prop - Opacity of the indicator shown when the range knob is hovered -$range-md-knob-indicator-opacity-hover: 0.13 !default; +$range-md-knob-indicator-opacity-hover: 0.13; /// @prop - Opacity of the indicator shown when the range knob is focused -$range-md-knob-indicator-opacity-focus: 0.13 !default; +$range-md-knob-indicator-opacity-focus: 0.13; /// @prop - Opacity of the indicator shown when the range knob is active -$range-md-knob-indicator-opacity-active: 0.25 !default; +$range-md-knob-indicator-opacity-active: 0.25; /// @prop - Opacity of the disabled range -$range-md-disabled-opacity: $form-control-md-disabled-opacity !default; +$range-md-disabled-opacity: $form-control-md-disabled-opacity; diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx index b9e19b31973..0ca33f6ca1e 100644 --- a/core/src/components/range/range.tsx +++ b/core/src/components/range/range.tsx @@ -235,7 +235,7 @@ export class Range implements ComponentInterface { * - When the user releases the knob after dragging; * - When the user moves the knob with keyboard arrows * - * `ionChange` is not fired when the value is changed programmatically. + * This event will not emit when programmatically setting the `value` property. */ @Event() ionChange!: EventEmitter; diff --git a/core/src/components/range/range.vars.scss b/core/src/components/range/range.vars.scss index 69c46f7e9f2..de30b4f9c08 100644 --- a/core/src/components/range/range.vars.scss +++ b/core/src/components/range/range.vars.scss @@ -1,8 +1,8 @@ /// @prop - Top margin of range's label when in an item -$range-item-label-margin-top: 10px !default; +$range-item-label-margin-top: 10px; /// @prop - Bottom margin of range's label when in an item // We don't add additional margin because the native container // has additional white space. Otherwise there would be too // much white space at the bottom of the item. -$range-item-label-margin-bottom: 0px !default; +$range-item-label-margin-bottom: 0px; diff --git a/core/src/components/refresher/refresher.ios.vars.scss b/core/src/components/refresher/refresher.ios.vars.scss index bc4dc4ed9cd..bf806d5096f 100644 --- a/core/src/components/refresher/refresher.ios.vars.scss +++ b/core/src/components/refresher/refresher.ios.vars.scss @@ -1,16 +1,16 @@ @import "../../themes/ionic.globals.ios"; /// @prop - Color of the refresher icon -$refresher-ios-icon-color: $text-color !default; +$refresher-ios-icon-color: $text-color; /// @prop - Text color of the refresher content -$refresher-ios-text-color: $text-color !default; +$refresher-ios-text-color: $text-color; /// @prop - Color of the native refresher spinner -$refresher-ios-native-spinner-color: var(--ion-color-step-450, var(--ion-background-color-step-450, #747577)) !default; +$refresher-ios-native-spinner-color: var(--ion-color-step-450, var(--ion-background-color-step-450, #747577)); /// @prop - Width of the native refresher spinner -$refresher-ios-native-spinner-width: 32px !default; +$refresher-ios-native-spinner-width: 32px; /// @prop - Height of the native refresher spinner -$refresher-ios-native-spinner-height: 32px !default; +$refresher-ios-native-spinner-height: 32px; diff --git a/core/src/components/refresher/refresher.md.vars.scss b/core/src/components/refresher/refresher.md.vars.scss index 3e893b0ce86..bb185958205 100644 --- a/core/src/components/refresher/refresher.md.vars.scss +++ b/core/src/components/refresher/refresher.md.vars.scss @@ -1,19 +1,19 @@ @import "../../themes/ionic.globals.md"; /// @prop - Color of the refresher icon -$refresher-md-icon-color: $text-color !default; +$refresher-md-icon-color: $text-color; /// @prop - Text color of the refresher content -$refresher-md-text-color: $text-color !default; +$refresher-md-text-color: $text-color; /// @prop - Color of the native refresher spinner -$refresher-md-native-spinner-color: #{ion-color(primary, base)} !default; +$refresher-md-native-spinner-color: #{ion-color(primary, base)}; /// @prop - Border of the native refresher spinner -$refresher-md-native-spinner-border: 1px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #ececec)) !default; +$refresher-md-native-spinner-border: 1px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #ececec)); /// @prop - Background of the native refresher spinner -$refresher-md-native-spinner-background: var(--ion-color-step-250, var(--ion-background-color-step-250, #ffffff)) !default; +$refresher-md-native-spinner-background: var(--ion-color-step-250, var(--ion-background-color-step-250, #ffffff)); /// @prop - Box shadow of the native refresher spinner -$refresher-md-native-spinner-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1) !default; +$refresher-md-native-spinner-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1); diff --git a/core/src/components/refresher/refresher.vars.scss b/core/src/components/refresher/refresher.vars.scss index 2f74eeb7672..2c8af2b51d6 100644 --- a/core/src/components/refresher/refresher.vars.scss +++ b/core/src/components/refresher/refresher.vars.scss @@ -2,10 +2,10 @@ // -------------------------------------------------- /// @prop - Height of the refresher -$refresher-height: 60px !default; +$refresher-height: 60px; /// @prop - Font size of the refresher icon -$refresher-icon-font-size: 30px !default; +$refresher-icon-font-size: 30px; /// @prop - Font size of the refresher content -$refresher-text-font-size: 16px !default; +$refresher-text-font-size: 16px; diff --git a/core/src/components/reorder/reorder.ios.vars.scss b/core/src/components/reorder/reorder.ios.vars.scss index 723f9324d78..abbbcd6c9aa 100644 --- a/core/src/components/reorder/reorder.ios.vars.scss +++ b/core/src/components/reorder/reorder.ios.vars.scss @@ -4,8 +4,8 @@ // -------------------------------------------------- /// @prop - Font size of the reorder icon -$reorder-ios-icon-font-size: dynamic-font(34px) !default; +$reorder-ios-icon-font-size: dynamic-font(34px); /// @prop - Opacity of the reorder icon -$reorder-ios-icon-opacity: .4 !default; +$reorder-ios-icon-opacity: .4; diff --git a/core/src/components/reorder/reorder.md.vars.scss b/core/src/components/reorder/reorder.md.vars.scss index ebf7214b28c..7f9f7a50799 100644 --- a/core/src/components/reorder/reorder.md.vars.scss +++ b/core/src/components/reorder/reorder.md.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Font size of the reorder icon -$reorder-md-icon-font-size: dynamic-font(31px) !default; +$reorder-md-icon-font-size: dynamic-font(31px); /// @prop - Opacity of the reorder icon -$reorder-md-icon-opacity: .3 !default; +$reorder-md-icon-opacity: .3; diff --git a/core/src/components/searchbar/searchbar.ios.vars.scss b/core/src/components/searchbar/searchbar.ios.vars.scss index 0bdb0966172..6a12287ed6c 100644 --- a/core/src/components/searchbar/searchbar.ios.vars.scss +++ b/core/src/components/searchbar/searchbar.ios.vars.scss @@ -4,59 +4,59 @@ // -------------------------------------------------- /// @prop - Padding top of the searchbar -$searchbar-ios-padding-top: 12px !default; +$searchbar-ios-padding-top: 12px; /// @prop - Padding end of the searchbar -$searchbar-ios-padding-end: $searchbar-ios-padding-top !default; +$searchbar-ios-padding-end: $searchbar-ios-padding-top; /// @prop - Padding bottom of the searchbar -$searchbar-ios-padding-bottom: $searchbar-ios-padding-top !default; +$searchbar-ios-padding-bottom: $searchbar-ios-padding-top; /// @prop - Padding start of the searchbar -$searchbar-ios-padding-start: $searchbar-ios-padding-end !default; +$searchbar-ios-padding-start: $searchbar-ios-padding-end; /// @prop - Font size of the searchbar cancel button // The cancel button on iOS does not scale with Dynamic Type -$searchbar-ios-cancel-button-font-size: 17px !default; +$searchbar-ios-cancel-button-font-size: 17px; /// @prop - Color of the searchbar cancel button -$searchbar-ios-cancel-button-color: ion-color(primary, base) !default; +$searchbar-ios-cancel-button-color: ion-color(primary, base); /// @prop - Background color of the searchbar cancel button -$searchbar-ios-cancel-button-background-color: transparent !default; +$searchbar-ios-cancel-button-background-color: transparent; /// @prop - Size of the searchbar input search icon -$searchbar-ios-input-search-icon-size: dynamic-font(22px) !default; +$searchbar-ios-input-search-icon-size: dynamic-font(22px); /// @prop - Color of the searchbar input search icon -$searchbar-ios-input-search-icon-color: $text-color-step-400 !default; +$searchbar-ios-input-search-icon-color: $text-color-step-400; /// @prop - Minimum Height of the searchbar input -$searchbar-ios-input-min-height: 36px !default; +$searchbar-ios-input-min-height: 36px; /// @prop - Border radius of the searchbar input -$searchbar-ios-input-border-radius: 10px !default; +$searchbar-ios-input-border-radius: 10px; /// @prop - Color of the searchbar input text -$searchbar-ios-input-text-color: $text-color !default; +$searchbar-ios-input-text-color: $text-color; /// @prop - Background color alpha of the searchbar input -$searchbar-ios-input-background-color-alpha: .07 !default; +$searchbar-ios-input-background-color-alpha: .07; /// @prop - Background color of the searchbar input -$searchbar-ios-input-background-color: rgba($text-color-rgb, $searchbar-ios-input-background-color-alpha) !default; +$searchbar-ios-input-background-color: rgba($text-color-rgb, $searchbar-ios-input-background-color-alpha); /// @prop - Transition of the searchbar input -$searchbar-ios-input-transition: all 300ms ease !default; +$searchbar-ios-input-transition: all 300ms ease; /// @prop - Transition of the searchbar input cancel button -$searchbar-ios-cancel-transition: all 300ms ease !default; +$searchbar-ios-cancel-transition: all 300ms ease; /// @prop - Alpha of the searchbar input icons -$searchbar-ios-input-icon-opacity: .5 !default; +$searchbar-ios-input-icon-opacity: .5; /// @prop - Color of the searchbar input clear icon -$searchbar-ios-input-clear-icon-color: $text-color-step-400 !default; +$searchbar-ios-input-clear-icon-color: $text-color-step-400; /// @prop - Size of the searchbar input clear icon -$searchbar-ios-input-clear-icon-size: dynamic-font(18px) !default; +$searchbar-ios-input-clear-icon-size: dynamic-font(18px); diff --git a/core/src/components/searchbar/searchbar.md.vars.scss b/core/src/components/searchbar/searchbar.md.vars.scss index 0af1072dc24..2f4051a0f87 100644 --- a/core/src/components/searchbar/searchbar.md.vars.scss +++ b/core/src/components/searchbar/searchbar.md.vars.scss @@ -4,52 +4,52 @@ // -------------------------------------------------- /// @prop - Padding top of the searchbar -$searchbar-md-padding-top: 8px !default; +$searchbar-md-padding-top: 8px; /// @prop - Padding end of the searchbar -$searchbar-md-padding-end: $searchbar-md-padding-top !default; +$searchbar-md-padding-end: $searchbar-md-padding-top; /// @prop - Padding bottom of the searchbar -$searchbar-md-padding-bottom: $searchbar-md-padding-top !default; +$searchbar-md-padding-bottom: $searchbar-md-padding-top; /// @prop - Padding start of the searchbar -$searchbar-md-padding-start: $searchbar-md-padding-end !default; +$searchbar-md-padding-start: $searchbar-md-padding-end; /// @prop - Background of the searchbar -$searchbar-md-background: inherit !default; +$searchbar-md-background: inherit; /// @prop - Color of the searchbar cancel button -$searchbar-md-cancel-button-color: $text-color-step-100 !default; +$searchbar-md-cancel-button-color: $text-color-step-100; /// @prop - Background color of the searchbar cancel button -$searchbar-md-cancel-button-background-color: transparent !default; +$searchbar-md-cancel-button-background-color: transparent; /// @prop - Font size of the searchbar cancel button -$searchbar-md-cancel-button-font-size: 1.5em !default; +$searchbar-md-cancel-button-font-size: 1.5em; /// @prop - Color of the searchbar input search icon -$searchbar-md-input-search-icon-color: $text-color-step-400 !default; +$searchbar-md-input-search-icon-color: $text-color-step-400; /// @prop - Size of the searchbar input search icon -$searchbar-md-input-search-icon-size: dynamic-font(21px) !default; +$searchbar-md-input-search-icon-size: dynamic-font(21px); /// @prop - Height of the searchbar input -$searchbar-md-input-height: auto !default; +$searchbar-md-input-height: auto; /// @prop - Line height of the searchbar input -$searchbar-md-input-line-height: 30px !default; +$searchbar-md-input-line-height: 30px; /// @prop - Box shadow of the searchbar input -$searchbar-md-input-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default; +$searchbar-md-input-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); /// @prop - Color of the searchbar input text -$searchbar-md-input-text-color: $text-color-step-150 !default; +$searchbar-md-input-text-color: $text-color-step-150; /// @prop - Background of the searchbar input -$searchbar-md-input-background-color: $background-color !default; +$searchbar-md-input-background-color: $background-color; /// @prop - Border radius of the searchbar input -$searchbar-md-input-border-radius: 2px !default; +$searchbar-md-input-border-radius: 2px; /// @prop - Size of the searchbar input clear icon -$searchbar-md-input-clear-icon-size: dynamic-font(22px) !default; +$searchbar-md-input-clear-icon-size: dynamic-font(22px); diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx index f25bd2dfa25..20137c137c4 100644 --- a/core/src/components/searchbar/searchbar.tsx +++ b/core/src/components/searchbar/searchbar.tsx @@ -225,6 +225,8 @@ export class Searchbar implements ComponentInterface { * by the user. This can happen when the element loses focus or * when the "Enter" key is pressed. `ionChange` can also fire * when clicking the clear or cancel buttons. + * + * This event will not emit when programmatically setting the `value` property. */ @Event() ionChange!: EventEmitter; diff --git a/core/src/components/segment-button/segment-button.ios.vars.scss b/core/src/components/segment-button/segment-button.ios.vars.scss index 77dce9d42dc..6fb8a785b53 100644 --- a/core/src/components/segment-button/segment-button.ios.vars.scss +++ b/core/src/components/segment-button/segment-button.ios.vars.scss @@ -4,61 +4,61 @@ // -------------------------------------------------- /// @prop - Background of the segment button -$segment-button-ios-background: none !default; +$segment-button-ios-background: none; /// @prop - Background of the checked segment button -$segment-button-ios-background-checked: $segment-button-ios-background !default; +$segment-button-ios-background-checked: $segment-button-ios-background; /// @prop - Text color of the segment button -$segment-button-ios-color: $text-color !default; +$segment-button-ios-color: $text-color; /// @prop - Background of the checked segment button indicator -$segment-button-ios-indicator-color: var(--ion-color-step-350, var(--ion-background-color-step-350, $background-color)) !default; +$segment-button-ios-indicator-color: var(--ion-color-step-350, var(--ion-background-color-step-350, $background-color)); /// @prop - Margin of the segment button -$segment-button-ios-margin: 2px !default; +$segment-button-ios-margin: 2px; /// @prop - Opacity of the segment button on hover -$segment-button-ios-opacity-hover: .5 !default; +$segment-button-ios-opacity-hover: .5; /// @prop - Opacity of the segment button when focused -$segment-button-ios-opacity-focused: .7 !default; +$segment-button-ios-opacity-focused: .7; /// @prop - Opacity of the disabled segment button -$segment-button-ios-opacity-disabled: .3 !default; +$segment-button-ios-opacity-disabled: .3; /// @prop - Background of the segment button on hover -$segment-button-ios-background-hover: none !default; +$segment-button-ios-background-hover: none; /// @prop - Box shadow of the checked segment button -$segment-button-ios-box-shadow-checked: 0 0 5px rgba(0, 0, 0, 0.16) !default; +$segment-button-ios-box-shadow-checked: 0 0 5px rgba(0, 0, 0, 0.16); /// @prop - Border width of the segment button -$segment-button-ios-border-width: 1px !default; +$segment-button-ios-border-width: 1px; /// @prop - Border color of the segment button -$segment-button-ios-border-color: rgba($text-color-rgb, 0.12) !default; +$segment-button-ios-border-color: rgba($text-color-rgb, 0.12); /// @prop - Minimum width of the segment button -$segment-button-ios-min-width: 70px !default; +$segment-button-ios-min-width: 70px; /// @prop - Minimum height of the segment button -$segment-button-ios-min-height: 28px !default; +$segment-button-ios-min-height: 28px; /// @prop - Line height of the segment button -$segment-button-ios-line-height: 37px !default; +$segment-button-ios-line-height: 37px; /// @prop - Font size of the segment button -$segment-button-ios-font-size: 13px !default; +$segment-button-ios-font-size: 13px; /// @prop - Border radius of the segment button -$segment-button-ios-border-radius: 7px !default; +$segment-button-ios-border-radius: 7px; /// @prop - Size of an icon in the segment button -$segment-button-ios-icon-size: 24px !default; +$segment-button-ios-icon-size: 24px; /// @prop - Transition of the segment button -$segment-button-ios-transition: 100ms all linear !default; +$segment-button-ios-transition: 100ms all linear; /// @prop - Transition of the animated segment button -$segment-button-ios-transition-animated: transform 260ms cubic-bezier(0.4, 0, 0.2, 1) !default; +$segment-button-ios-transition-animated: transform 260ms cubic-bezier(0.4, 0, 0.2, 1); diff --git a/core/src/components/segment-button/segment-button.md.vars.scss b/core/src/components/segment-button/segment-button.md.vars.scss index 35ce67c163a..8ba0e082485 100644 --- a/core/src/components/segment-button/segment-button.md.vars.scss +++ b/core/src/components/segment-button/segment-button.md.vars.scss @@ -4,61 +4,61 @@ // -------------------------------------------------- /// @prop - Opacity of the segment button -$segment-button-md-opacity: .6 !default; +$segment-button-md-opacity: .6; /// @prop - Text color of the segment button -$segment-button-md-text-color: rgba($text-color-rgb, $segment-button-md-opacity) !default; +$segment-button-md-text-color: rgba($text-color-rgb, $segment-button-md-opacity); /// @prop - Text color of the checked segment button -$segment-button-md-text-color-checked: ion-color(primary, base) !default; +$segment-button-md-text-color-checked: ion-color(primary, base); /// @prop - Background of the segment button -$segment-button-md-background: none !default; +$segment-button-md-background: none; /// @prop - Background of the checked segment button -$segment-button-md-background-checked: $segment-button-md-background !default; +$segment-button-md-background-checked: $segment-button-md-background; /// @prop - Opacity of the disabled segment button -$segment-button-md-opacity-disabled: .3 !default; +$segment-button-md-opacity-disabled: .3; /// @prop - Padding top of the segment button -$segment-button-md-padding-top: 0 !default; +$segment-button-md-padding-top: 0; /// @prop - Padding end of the segment button -$segment-button-md-padding-end: 16px !default; +$segment-button-md-padding-end: 16px; /// @prop - Padding bottom of the segment button -$segment-button-md-padding-bottom: $segment-button-md-padding-top !default; +$segment-button-md-padding-bottom: $segment-button-md-padding-top; /// @prop - Padding start of the segment button -$segment-button-md-padding-start: $segment-button-md-padding-end !default; +$segment-button-md-padding-start: $segment-button-md-padding-end; /// @prop - Minimum height of the segment button -$segment-button-md-min-height: 48px !default; +$segment-button-md-min-height: 48px; /// @prop - Minimum width of the segment button -$segment-button-md-min-width: 90px !default; +$segment-button-md-min-width: 90px; /// @prop - Maximum width of the segment button -$segment-button-md-max-width: 360px !default; +$segment-button-md-max-width: 360px; /// @prop - Line height of the segment button -$segment-button-md-line-height: 40px !default; +$segment-button-md-line-height: 40px; /// @prop - Font size of the segment button -$segment-button-md-font-size: 14px !default; +$segment-button-md-font-size: 14px; /// @prop - Letter spacing of the segment button -$segment-button-md-letter-spacing: .06em !default; +$segment-button-md-letter-spacing: .06em; /// @prop - Font weight of the segment button -$segment-button-md-font-weight: 500 !default; +$segment-button-md-font-weight: 500; /// @prop - Transition of the segment button -$segment-button-md-transition: color .15s linear 0s, opacity .15s linear 0s !default; +$segment-button-md-transition: color .15s linear 0s, opacity .15s linear 0s; /// @prop - Transition of the animated segment button -$segment-button-md-transition-animated: transform 250ms cubic-bezier(.4, 0, .2, 1) !default; +$segment-button-md-transition-animated: transform 250ms cubic-bezier(.4, 0, .2, 1); /// @prop - Size of an icon in the segment button -$segment-button-md-icon-size: 24px !default; +$segment-button-md-icon-size: 24px; diff --git a/core/src/components/segment/segment.ios.vars.scss b/core/src/components/segment/segment.ios.vars.scss index f7a9161644d..1aa8e905dd9 100644 --- a/core/src/components/segment/segment.ios.vars.scss +++ b/core/src/components/segment/segment.ios.vars.scss @@ -5,10 +5,10 @@ // -------------------------------------------------- /// @prop - Alpha of the segment for use in the backgrounds -$segment-ios-background-alpha: 0.065 !default; +$segment-ios-background-alpha: 0.065; /// @prop - Background color of the segment -$segment-ios-background-color: rgba($text-color-rgb, $segment-ios-background-alpha) !default; +$segment-ios-background-color: rgba($text-color-rgb, $segment-ios-background-alpha); /// @prop - Border radius of the segment -$segment-ios-border-radius: 8px !default; +$segment-ios-border-radius: 8px; diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx index b3113c9de7a..4b7913d76b8 100644 --- a/core/src/components/segment/segment.tsx +++ b/core/src/components/segment/segment.tsx @@ -94,8 +94,9 @@ export class Segment implements ComponentInterface { @Prop() selectOnFocus = false; /** - * Emitted when the value property has changed and any - * dragging pointer has been released from `ion-segment`. + * Emitted when the value property has changed and any dragging pointer has been released from `ion-segment`. + * + * This event will not emit when programmatically setting the `value` property. */ @Event() ionChange!: EventEmitter; diff --git a/core/src/components/select-popover/select-popover.md.scss b/core/src/components/select-popover/select-popover.md.scss index e2162c1d7dc..001b0123632 100644 --- a/core/src/components/select-popover/select-popover.md.scss +++ b/core/src/components/select-popover/select-popover.md.scss @@ -2,7 +2,11 @@ @import "./select-popover.md.vars"; ion-list ion-radio::part(container) { - opacity: 0; + display: none; +} + +ion-list ion-radio::part(label) { + @include margin(0); } ion-item { diff --git a/core/src/components/select/select.ios.vars.scss b/core/src/components/select/select.ios.vars.scss index 57677a8438b..3dfd4b29a59 100644 --- a/core/src/components/select/select.ios.vars.scss +++ b/core/src/components/select/select.ios.vars.scss @@ -5,7 +5,7 @@ // -------------------------------------------------- /// @prop - Size of the select icon -$select-ios-icon-size: dynamic-font(18px) !default; +$select-ios-icon-size: dynamic-font(18px); /// @prop - Opacity of the disabled select -$select-ios-disabled-opacity: $form-control-ios-disabled-opacity !default; +$select-ios-disabled-opacity: $form-control-ios-disabled-opacity; diff --git a/core/src/components/select/select.md.vars.scss b/core/src/components/select/select.md.vars.scss index a6125e618d4..a8540da58a7 100644 --- a/core/src/components/select/select.md.vars.scss +++ b/core/src/components/select/select.md.vars.scss @@ -5,9 +5,9 @@ // -------------------------------------------------- /// @prop - Size of the select icon -$select-md-icon-size: dynamic-font(13px) !default; +$select-md-icon-size: dynamic-font(13px); /// @prop - The amount of whitespace to display on either side of the floating label -$select-md-floating-label-padding: 4px !default; +$select-md-floating-label-padding: 4px; /// @prop - Opacity of the disabled select -$select-md-disabled-opacity: $form-control-md-disabled-opacity !default; +$select-md-disabled-opacity: $form-control-md-disabled-opacity; diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index 740adad0205..e20edb9c067 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -197,6 +197,8 @@ export class Select implements ComponentInterface { /** * Emitted when the value has changed. + * + * This event will not emit when programmatically setting the `value` property. */ @Event() ionChange!: EventEmitter; diff --git a/core/src/components/select/select.vars.scss b/core/src/components/select/select.vars.scss index ae137c052bb..e296aacb4b1 100644 --- a/core/src/components/select/select.vars.scss +++ b/core/src/components/select/select.vars.scss @@ -1,4 +1,4 @@ @import "../../themes/ionic.globals"; /// @prop - Margin start of the select icon -$select-icon-margin-start: 4px !default; +$select-icon-margin-start: 4px; diff --git a/core/src/components/select/test/fill/select.e2e.ts b/core/src/components/select/test/fill/select.e2e.ts index 99fd3c2393b..350c0b847af 100644 --- a/core/src/components/select/test/fill/select.e2e.ts +++ b/core/src/components/select/test/fill/select.e2e.ts @@ -237,4 +237,37 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co await expect(notchCutout).toBeHidden(); }); }); + + test(title('select: fill outline: fit-content should display select options'), async ({ page }, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/29321', + }); + await page.setContent( + ` + + 5 + 10 + 15 + + `, + config + ); + + const select = page.locator('ion-select'); + const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent'); + + await select.click(); + await ionPopoverDidPresent.next(); + + const selectPopover = page.locator('ion-select-popover'); + + await expect(selectPopover).toHaveScreenshot(screenshot(`select-fill-outline-fit-content`)); + }); }); diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-fit-content-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-fit-content-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..6c035705afd Binary files /dev/null and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-fit-content-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-fit-content-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-fit-content-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..98aed59c1c8 Binary files /dev/null and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-fit-content-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-fit-content-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-fit-content-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..013d9fe740a Binary files /dev/null and b/core/src/components/select/test/fill/select.e2e.ts-snapshots/select-fill-outline-fit-content-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/skeleton-text/skeleton-text.vars.scss b/core/src/components/skeleton-text/skeleton-text.vars.scss index 3ebd68d936a..713447e6bac 100644 --- a/core/src/components/skeleton-text/skeleton-text.vars.scss +++ b/core/src/components/skeleton-text/skeleton-text.vars.scss @@ -4,13 +4,13 @@ // -------------------------------------------------- /// @prop - Background color alpha of the skeleton text -$skeleton-text-background-alpha: .065 !default; +$skeleton-text-background-alpha: .065; /// @prop - Background color of the skeleton text -$skeleton-text-background: rgba(var(--background-rgb, $text-color-rgb), $skeleton-text-background-alpha) !default; +$skeleton-text-background: rgba(var(--background-rgb, $text-color-rgb), $skeleton-text-background-alpha); /// @prop - Background color alpha of the skeleton text animation -$skeleton-text-background-animated-alpha: .135 !default; +$skeleton-text-background-animated-alpha: .135; /// @prop - Background color of the skeleton text animation -$skeleton-text-background-animated: rgba(var(--background-rgb, $text-color-rgb), $skeleton-text-background-animated-alpha) !default; +$skeleton-text-background-animated: rgba(var(--background-rgb, $text-color-rgb), $skeleton-text-background-animated-alpha); diff --git a/core/src/components/split-pane/split-pane.ios.vars.scss b/core/src/components/split-pane/split-pane.ios.vars.scss index 67a968d9c56..ac37a55715f 100644 --- a/core/src/components/split-pane/split-pane.ios.vars.scss +++ b/core/src/components/split-pane/split-pane.ios.vars.scss @@ -4,10 +4,10 @@ // -------------------------------------------------- /// @prop - Minimum width of the split pane's side pane -$split-pane-ios-side-min-width: $split-pane-side-min-width !default; +$split-pane-ios-side-min-width: $split-pane-side-min-width; /// @prop - Maximum width of the split pane's side pane -$split-pane-ios-side-max-width: $split-pane-side-max-width !default; +$split-pane-ios-side-max-width: $split-pane-side-max-width; /// @prop - Border style of the side pane -$split-pane-ios-border: $hairlines-width solid $item-ios-border-color !default; +$split-pane-ios-border: $hairlines-width solid $item-ios-border-color; diff --git a/core/src/components/split-pane/split-pane.md.vars.scss b/core/src/components/split-pane/split-pane.md.vars.scss index a600f620fab..3236ae58a2b 100644 --- a/core/src/components/split-pane/split-pane.md.vars.scss +++ b/core/src/components/split-pane/split-pane.md.vars.scss @@ -4,10 +4,10 @@ // -------------------------------------------------- /// @prop - Minimum width of the split pane's side pane -$split-pane-md-side-min-width: $split-pane-side-min-width !default; +$split-pane-md-side-min-width: $split-pane-side-min-width; /// @prop - Maximum width of the split pane's side pane -$split-pane-md-side-max-width: $split-pane-side-max-width !default; +$split-pane-md-side-max-width: $split-pane-side-max-width; /// @prop - Border style of the side pane -$split-pane-md-border: 1px solid $item-md-border-color !default; +$split-pane-md-border: 1px solid $item-md-border-color; diff --git a/core/src/components/split-pane/split-pane.vars.scss b/core/src/components/split-pane/split-pane.vars.scss index e7df6a8a01b..2dc7125d609 100644 --- a/core/src/components/split-pane/split-pane.vars.scss +++ b/core/src/components/split-pane/split-pane.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Minimum width of the split pane's side pane -$split-pane-side-min-width: 270px !default; +$split-pane-side-min-width: 270px; /// @prop - Maximum width of the split pane's side pane -$split-pane-side-max-width: 28% !default; +$split-pane-side-max-width: 28%; diff --git a/core/src/components/tab-bar/tab-bar.ios.vars.scss b/core/src/components/tab-bar/tab-bar.ios.vars.scss index c4ba6aebccf..bbebcf63fa4 100644 --- a/core/src/components/tab-bar/tab-bar.ios.vars.scss +++ b/core/src/components/tab-bar/tab-bar.ios.vars.scss @@ -5,10 +5,10 @@ // -------------------------------------------------- /// @prop - Alpha of translucent tab bar background color -$tab-bar-ios-translucent-background-color-alpha: .8 !default; +$tab-bar-ios-translucent-background-color-alpha: .8; /// @prop - Translucent tab bar background color -$tab-bar-ios-translucent-background-color: rgba($background-color-rgb, $tab-bar-ios-translucent-background-color-alpha) !default; +$tab-bar-ios-translucent-background-color: rgba($background-color-rgb, $tab-bar-ios-translucent-background-color-alpha); /// @prop - Filter of the translucent tab bar background color -$tab-bar-ios-translucent-filter: saturate(210%) blur(20px) !default; \ No newline at end of file +$tab-bar-ios-translucent-filter: saturate(210%) blur(20px); \ No newline at end of file diff --git a/core/src/components/tab-button/tab-button.ios.vars.scss b/core/src/components/tab-button/tab-button.ios.vars.scss index 37b844d73a5..2fdeaa2d9df 100644 --- a/core/src/components/tab-button/tab-button.ios.vars.scss +++ b/core/src/components/tab-button/tab-button.ios.vars.scss @@ -4,28 +4,28 @@ // -------------------------------------------------- /// @prop - Padding top on the tab button -$tab-button-ios-padding-top: 0 !default; +$tab-button-ios-padding-top: 0; /// @prop - Padding end on the tab button -$tab-button-ios-padding-end: 2px !default; +$tab-button-ios-padding-end: 2px; /// @prop - Padding bottom on the tab button -$tab-button-ios-padding-bottom: $tab-button-ios-padding-top !default; +$tab-button-ios-padding-bottom: $tab-button-ios-padding-top; /// @prop - Padding start on the tab button -$tab-button-ios-padding-start: $tab-button-ios-padding-end !default; +$tab-button-ios-padding-start: $tab-button-ios-padding-end; /// @prop - Max width of the tab button -$tab-button-ios-max-width: 240px !default; +$tab-button-ios-max-width: 240px; /// @prop - Text color of the inactive tab button -$tab-button-ios-text-color: $tabbar-ios-color !default; +$tab-button-ios-text-color: $tabbar-ios-color; /// @prop - Font size of the tab button text -$tab-button-ios-font-size: 10px !default; +$tab-button-ios-font-size: 10px; /// @prop - Size of the tab button icon when there is a label -$tab-button-ios-icon-size: 24px !default; +$tab-button-ios-icon-size: 24px; /// @prop - Size of the tab button icon when there is not a label -$tab-button-ios-icon-only-size: 30px !default; +$tab-button-ios-icon-only-size: 30px; diff --git a/core/src/components/tab-button/tab-button.md.vars.scss b/core/src/components/tab-button/tab-button.md.vars.scss index ea005b45090..0eb681efd17 100644 --- a/core/src/components/tab-button/tab-button.md.vars.scss +++ b/core/src/components/tab-button/tab-button.md.vars.scss @@ -4,79 +4,79 @@ // -------------------------------------------------- /// @prop - Padding top on the tab button -$tab-button-md-padding-top: 0 !default; +$tab-button-md-padding-top: 0; /// @prop - Padding end on the tab button -$tab-button-md-padding-end: 12px !default; +$tab-button-md-padding-end: 12px; /// @prop - Padding bottom on the tab button -$tab-button-md-padding-bottom: 0 !default; +$tab-button-md-padding-bottom: 0; /// @prop - Padding start on the tab button -$tab-button-md-padding-start: 12px !default; +$tab-button-md-padding-start: 12px; /// @prop - Font size of the inactive tab button text -$tab-button-md-font-size: 12px !default; +$tab-button-md-font-size: 12px; /// @prop - Letter spacing of the tab button -$tab-button-md-letter-spacing: .03em !default; +$tab-button-md-letter-spacing: .03em; /// @prop - Font weight of the tab button text -$tab-button-md-font-weight: normal !default; +$tab-button-md-font-weight: normal; /// @prop - Text color of the inactive tab button -$tab-button-md-text-color: $tabbar-md-color !default; +$tab-button-md-text-color: $tabbar-md-color; /// @prop - Margin top on the tab button icon -$tab-button-md-icon-margin-top: 16px !default; +$tab-button-md-icon-margin-top: 16px; /// @prop - Margin end on the tab button icon -$tab-button-md-icon-margin-end: 0 !default; +$tab-button-md-icon-margin-end: 0; /// @prop - Margin bottom on the tab button icon -$tab-button-md-icon-margin-bottom: $tab-button-md-icon-margin-top !default; +$tab-button-md-icon-margin-bottom: $tab-button-md-icon-margin-top; /// @prop - Margin start on the tab button icon -$tab-button-md-icon-margin-start: $tab-button-md-icon-margin-end !default; +$tab-button-md-icon-margin-start: $tab-button-md-icon-margin-end; /// @prop - Margin top on the tab button text -$tab-button-md-text-margin-top: 2px !default; +$tab-button-md-text-margin-top: 2px; /// @prop - Margin end on the tab button text -$tab-button-md-text-margin-end: 0 !default; +$tab-button-md-text-margin-end: 0; /// @prop - Margin bottom on the tab button text -$tab-button-md-text-margin-bottom: $tab-button-md-text-margin-top !default; +$tab-button-md-text-margin-bottom: $tab-button-md-text-margin-top; /// @prop - Margin start on the tab button text -$tab-button-md-text-margin-start: $tab-button-md-text-margin-end !default; +$tab-button-md-text-margin-start: $tab-button-md-text-margin-end; /// @prop - Capitalization of the tab button text -$tab-button-md-text-capitalization: none !default; +$tab-button-md-text-capitalization: none; /// @prop - Size of the tab button icon -$tab-button-md-icon-size: 22px !default; +$tab-button-md-icon-size: 22px; /// @prop - Border radius on the tab button badge -$tab-button-md-badge-border-radius: 8px !default; +$tab-button-md-badge-border-radius: 8px; /// @prop - Padding top on the tab button badge -$tab-button-md-badge-padding-top: 3px !default; +$tab-button-md-badge-padding-top: 3px; /// @prop - Padding end on the tab button badge -$tab-button-md-badge-padding-end: 2px !default; +$tab-button-md-badge-padding-end: 2px; /// @prop - Padding bottom on the tab button badge -$tab-button-md-badge-padding-bottom: 2px !default; +$tab-button-md-badge-padding-bottom: 2px; /// @prop - Padding start on the tab button badge -$tab-button-md-badge-padding-start: 2px !default; +$tab-button-md-badge-padding-start: 2px; /// @prop - Minimum width of the tab button badge -$tab-button-md-badge-min-width: 12px !default; +$tab-button-md-badge-min-width: 12px; /// @prop - Font size of the tab button badge -$tab-button-md-badge-font-size: 8px !default; +$tab-button-md-badge-font-size: 8px; /// @prop - Size of the empty tab button badge -$tab-button-md-badge-size-empty: 8px !default; +$tab-button-md-badge-size-empty: 8px; diff --git a/core/src/components/textarea/textarea.ios.vars.scss b/core/src/components/textarea/textarea.ios.vars.scss index c6f807af1ee..93f6d3da169 100644 --- a/core/src/components/textarea/textarea.ios.vars.scss +++ b/core/src/components/textarea/textarea.ios.vars.scss @@ -5,19 +5,19 @@ // -------------------------------------------------- /// @prop - Font size of the textarea -$textarea-ios-font-size: inherit !default; +$textarea-ios-font-size: inherit; /// @prop - Margin top of the textarea -$textarea-ios-padding-top: $item-ios-padding-top !default; +$textarea-ios-padding-top: $item-ios-padding-top; /// @prop - Margin end of the textarea -$textarea-ios-padding-end: ($item-ios-padding-end * 0.5) !default; +$textarea-ios-padding-end: ($item-ios-padding-end * 0.5); /// @prop - Margin bottom of the textarea -$textarea-ios-padding-bottom: $item-ios-padding-bottom !default; +$textarea-ios-padding-bottom: $item-ios-padding-bottom; /// @prop - Margin start of the textarea -$textarea-ios-padding-start: 0 !default; +$textarea-ios-padding-start: 0; /// @prop - The opacity of the input text, label, helper text, char counter and placeholder of a disabled textarea -$textarea-ios-disabled-opacity: $form-control-ios-disabled-opacity !default; +$textarea-ios-disabled-opacity: $form-control-ios-disabled-opacity; diff --git a/core/src/components/textarea/textarea.md.vars.scss b/core/src/components/textarea/textarea.md.vars.scss index 40a864039c9..3bf7800d4db 100644 --- a/core/src/components/textarea/textarea.md.vars.scss +++ b/core/src/components/textarea/textarea.md.vars.scss @@ -5,22 +5,22 @@ // -------------------------------------------------- /// @prop - Font size of the textarea -$textarea-md-font-size: inherit !default; +$textarea-md-font-size: inherit; /// @prop - Margin top of the textarea -$textarea-md-padding-top: $item-md-padding-top !default; +$textarea-md-padding-top: $item-md-padding-top; /// @prop - Margin end of the textarea -$textarea-md-padding-end: 0 !default; +$textarea-md-padding-end: 0; /// @prop - Margin bottom of the textarea -$textarea-md-padding-bottom: $item-md-padding-bottom !default; +$textarea-md-padding-bottom: $item-md-padding-bottom; /// @prop - Margin start of the textarea -$textarea-md-padding-start: ($item-md-padding-start * 0.5) !default; +$textarea-md-padding-start: ($item-md-padding-start * 0.5); /// @prop - The amount of whitespace to display on either side of the floating label -$textarea-md-floating-label-padding: 4px !default; +$textarea-md-floating-label-padding: 4px; /// @prop - The opacity of the input text, label, helper text, char counter and placeholder of a disabled textarea -$textarea-md-disabled-opacity: $form-control-md-disabled-opacity !default; +$textarea-md-disabled-opacity: $form-control-md-disabled-opacity; diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx index d13ec356300..09d66928cfb 100644 --- a/core/src/components/textarea/textarea.tsx +++ b/core/src/components/textarea/textarea.tsx @@ -263,6 +263,8 @@ export class Textarea implements ComponentInterface { * The `ionChange` event is fired when the user modifies the textarea's value. * Unlike the `ionInput` event, the `ionChange` event is fired when * the element loses focus after its value has been modified. + * + * This event will not emit when programmatically setting the `value` property. */ @Event() ionChange!: EventEmitter; diff --git a/core/src/components/textarea/textarea.vars.scss b/core/src/components/textarea/textarea.vars.scss index 1b20bb6ecda..be97dd64ebb 100644 --- a/core/src/components/textarea/textarea.vars.scss +++ b/core/src/components/textarea/textarea.vars.scss @@ -2,4 +2,4 @@ /// @prop - The bottom padding of the textarea element. /// The value 8px is to add additional spacing for auto grow and scrollable textareas. -$textarea-padding-bottom: 8px !default; +$textarea-padding-bottom: 8px; diff --git a/core/src/components/toast/toast.ios.vars.scss b/core/src/components/toast/toast.ios.vars.scss index 60aa1c4a4c4..12b037ee7c5 100644 --- a/core/src/components/toast/toast.ios.vars.scss +++ b/core/src/components/toast/toast.ios.vars.scss @@ -9,75 +9,75 @@ $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; /// @prop - Background Color alpha of the toast wrapper when translucent -$toast-ios-translucent-background-color-alpha: 0.8 !default; +$toast-ios-translucent-background-color-alpha: 0.8; /// @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; +); /// @prop - Border radius of the toast wrapper -$toast-ios-border-radius: 14px !default; +$toast-ios-border-radius: 14px; /// @prop - Color of the toast title -$toast-ios-title-color: $text-color-step-150 !default; +$toast-ios-title-color: $text-color-step-150; /// @prop - Font size of the toast title -$toast-ios-header-font-weight: 500 !default; +$toast-ios-header-font-weight: 500; /// @prop - Spacing between the header and the message -$toast-ios-header-margin-bottom: 2px !default; +$toast-ios-header-margin-bottom: 2px; /// @prop - Font size of the toast title -$toast-ios-content-font-size: dynamic-font-clamp(1, 14px, 3.1) !default; +$toast-ios-content-font-size: dynamic-font-clamp(1, 14px, 3.1); /// @prop - Padding top of the toast content -$toast-ios-content-padding-top: 15px !default; +$toast-ios-content-padding-top: 15px; /// @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; /// @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; /// @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; /// @prop - Color of the toast button -$toast-ios-button-color: #{ion-color(primary, base)} !default; +$toast-ios-button-color: #{ion-color(primary, base)}; /// @prop - Filter of the translucent toast -$toast-ios-translucent-filter: saturate(180%) blur(20px) !default; +$toast-ios-translucent-filter: saturate(180%) blur(20px); /// @prop - Minimum height of the toast button -$toast-ios-button-min-height: 44px !default; +$toast-ios-button-min-height: 44px; /// @prop - Padding top of the toast button -$toast-ios-button-padding-top: 10px !default; +$toast-ios-button-padding-top: 10px; /// @prop - Padding end of the toast button -$toast-ios-button-padding-end: 15px !default; +$toast-ios-button-padding-end: 15px; /// @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; /// @prop - Padding start of the toast button -$toast-ios-button-padding-start: 15px !default; +$toast-ios-button-padding-start: 15px; /// @prop - Font size of the toast button /// 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; +$toast-ios-button-font-size: dynamic-font-clamp(1, 17px, 1.294); /// @prop - Font size of the toast button -$toast-ios-button-font-weight: 500 !default; +$toast-ios-button-font-weight: 500; /// @prop - Background color alpha of the toast activated button -$toast-ios-button-opacity-activated: 0.4 !default; +$toast-ios-button-opacity-activated: 0.4; /// @prop - Background color of the toast button -$toast-ios-button-background-color: transparent !default; +$toast-ios-button-background-color: transparent; diff --git a/core/src/components/toast/toast.md.vars.scss b/core/src/components/toast/toast.md.vars.scss index 158815aec68..67a0fbd6ce1 100644 --- a/core/src/components/toast/toast.md.vars.scss +++ b/core/src/components/toast/toast.md.vars.scss @@ -4,92 +4,92 @@ // -------------------------------------------------- /// @prop - Background of the toast -$toast-md-background: $background-color-step-800 !default; +$toast-md-background: $background-color-step-800; /// @prop - Box shadow of the toast $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; + 0 1px 18px 0 rgba(0, 0, 0, 0.12); /// @prop - Font size of the toast -$toast-md-font-size: dynamic-font(14px) !default; +$toast-md-font-size: dynamic-font(14px); /// @prop - Color of the toast -$toast-md-color: $text-color-step-950 !default; +$toast-md-color: $text-color-step-950; /// @prop - Border radius of the toast wrapper -$toast-md-border-radius: 4px !default; +$toast-md-border-radius: 4px; /// @prop - Font size of the toast message -$toast-md-header-line-height: dynamic-font(20px) !default; +$toast-md-header-line-height: dynamic-font(20px); /// @prop - Font size of the toast message -$toast-md-header-font-weight: 500 !default; +$toast-md-header-font-weight: 500; /// @prop - Spacing between the header and the message -$toast-md-header-margin-bottom: 2px !default; +$toast-md-header-margin-bottom: 2px; /// @prop - Font size of the toast message -$toast-md-message-line-height: dynamic-font(20px) !default; +$toast-md-message-line-height: dynamic-font(20px); /// @prop - Padding top of the toast message -$toast-md-content-padding-top: 14px !default; +$toast-md-content-padding-top: 14px; /// @prop - Padding end of the toast content -$toast-md-content-padding-end: 16px !default; +$toast-md-content-padding-end: 16px; /// @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; /// @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; /// @prop - Padding top of the toast button -$toast-md-button-padding-top: 10px !default; +$toast-md-button-padding-top: 10px; /// @prop - Padding end of the toast button -$toast-md-button-padding-end: 15px !default; +$toast-md-button-padding-end: 15px; /// @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; /// @prop - Padding start of the toast button -$toast-md-button-padding-start: 15px !default; +$toast-md-button-padding-start: 15px; /// @prop - Font size of the toast button -$toast-md-button-font-size: dynamic-font(14px) !default; +$toast-md-button-font-size: dynamic-font(14px); /// @prop - Font weight of the toast button -$toast-md-button-font-weight: 500 !default; +$toast-md-button-font-weight: 500; /// @prop - Letter spacing of the toast button -$toast-md-button-letter-spacing: 0.84px !default; +$toast-md-button-letter-spacing: 0.84px; /// @prop - Background color of the toast button -$toast-md-button-background-color: transparent !default; +$toast-md-button-background-color: transparent; /// @prop - Text transform of the toast button -$toast-md-button-text-transform: uppercase !default; +$toast-md-button-text-transform: uppercase; /// @prop - Opacity of the toast button background on hover -$toast-md-button-opacity-hover: 0.08 !default; +$toast-md-button-opacity-hover: 0.08; /// @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); /// @prop - Text color of the cancel toast button -$toast-md-button-cancel-text-color: $text-color-step-900 !default; +$toast-md-button-cancel-text-color: $text-color-step-900; /// @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); /// @prop - Padding of the icon only toast button -$toast-md-button-icon-only-padding: 9px !default; +$toast-md-button-icon-only-padding: 9px; /// @prop - Width of the icon only toast button -$toast-md-button-icon-only-width: 36px !default; +$toast-md-button-icon-only-width: 36px; /// @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; /// @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%; diff --git a/core/src/components/toast/toast.vars.scss b/core/src/components/toast/toast.vars.scss index 98d53a85d34..53048ac3c1a 100644 --- a/core/src/components/toast/toast.vars.scss +++ b/core/src/components/toast/toast.vars.scss @@ -4,4 +4,4 @@ // -------------------------------------------------- /// @prop - Max width of the toast -$toast-max-width: 700px !default; +$toast-max-width: 700px; diff --git a/core/src/components/toggle/toggle.ios.vars.scss b/core/src/components/toggle/toggle.ios.vars.scss index e95847dd7b8..65d955e7690 100644 --- a/core/src/components/toggle/toggle.ios.vars.scss +++ b/core/src/components/toggle/toggle.ios.vars.scss @@ -5,46 +5,46 @@ // -------------------------------------------------- /// @prop - Width of the toggle -$toggle-ios-width: 51px !default; +$toggle-ios-width: 51px; /// @prop - Height of the toggle -$toggle-ios-height: 31px !default; +$toggle-ios-height: 31px; /// @prop - Border width of the toggle -$toggle-ios-border-width: 2px !default; +$toggle-ios-border-width: 2px; /// @prop - Border radius of the toggle -$toggle-ios-border-radius: $toggle-ios-height * 0.5 !default; +$toggle-ios-border-radius: $toggle-ios-height * 0.5; /// @prop - Background color of the unchecked toggle -$toggle-ios-background-color-off: rgba($text-color-rgb, .088) !default; +$toggle-ios-background-color-off: rgba($text-color-rgb, .088); /// @prop - Width of the toggle handle -$toggle-ios-handle-width: calc(#{$toggle-ios-height} - (#{$toggle-ios-border-width} * 2)) !default; +$toggle-ios-handle-width: calc(#{$toggle-ios-height} - (#{$toggle-ios-border-width} * 2)); /// @prop - Height of the toggle handle -$toggle-ios-handle-height: $toggle-ios-handle-width !default; +$toggle-ios-handle-height: $toggle-ios-handle-width; /// @prop - Max height of the toggle handle -$toggle-ios-handle-max-height: calc(100% - (var(--handle-spacing) * 2)) !default; +$toggle-ios-handle-max-height: calc(100% - (var(--handle-spacing) * 2)); /// @prop - Border radius of the toggle handle -$toggle-ios-handle-border-radius: $toggle-ios-width * 0.5 !default; +$toggle-ios-handle-border-radius: $toggle-ios-width * 0.5; /// @prop - Box shadow of the toggle handle -$toggle-ios-handle-box-shadow: 0 3px 4px rgba(0, 0, 0, .06), 0 3px 8px rgba(0, 0, 0, .06) !default; +$toggle-ios-handle-box-shadow: 0 3px 4px rgba(0, 0, 0, .06), 0 3px 8px rgba(0, 0, 0, .06); /// @prop - Background color of the toggle handle -$toggle-ios-handle-background-color: #ffffff !default; +$toggle-ios-handle-background-color: #ffffff; /// @prop - Transition duration of the toggle icon -$toggle-ios-transition-duration: 300ms !default; +$toggle-ios-transition-duration: 300ms; /// @prop - Transition of the toggle icon -$toggle-ios-transition: transform $toggle-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms, right 110ms ease-in-out 80ms !default; +$toggle-ios-transition: transform $toggle-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms, right 110ms ease-in-out 80ms; /// @prop - Opacity of the disabled toggle -$toggle-ios-disabled-opacity: .3 !default; +$toggle-ios-disabled-opacity: .3; /// @prop - The text color of the on/off labels when the toggle is checked -$toggle-ios-on-off-label-checked-color: #fff !default; +$toggle-ios-on-off-label-checked-color: #fff; diff --git a/core/src/components/toggle/toggle.md.vars.scss b/core/src/components/toggle/toggle.md.vars.scss index 7377082f006..63f9ef72c9a 100644 --- a/core/src/components/toggle/toggle.md.vars.scss +++ b/core/src/components/toggle/toggle.md.vars.scss @@ -5,46 +5,46 @@ // -------------------------------------------------- /// @prop - Width of the toggle track -$toggle-md-track-width: 36px !default; +$toggle-md-track-width: 36px; /// @prop - Height of the toggle track -$toggle-md-track-height: 14px !default; +$toggle-md-track-height: 14px; /// @prop - Background color of the toggle track -$toggle-md-track-background-color-off: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.39) !default; +$toggle-md-track-background-color-off: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.39); /// @prop - Background color alpha of the checked toggle track -$toggle-md-track-background-color-alpha-on: .5 !default; +$toggle-md-track-background-color-alpha-on: .5; /// @prop - Width of the toggle handle -$toggle-md-handle-width: 20px !default; +$toggle-md-handle-width: 20px; /// @prop - Height of the toggle handle -$toggle-md-handle-height: 20px !default; +$toggle-md-handle-height: 20px; /// @prop - Max height of the toggle handle -$toggle-md-handle-max-height: calc(100% + 6px) !default; +$toggle-md-handle-max-height: calc(100% + 6px); /// @prop - Border radius of the toggle handle -$toggle-md-handle-border-radius: 50% !default; +$toggle-md-handle-border-radius: 50%; /// @prop - Box shadow of the toggle handle -$toggle-md-handle-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12) !default; +$toggle-md-handle-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12); /// @prop - Background color of the toggle handle -$toggle-md-handle-background-color-off: #ffffff !default; +$toggle-md-handle-background-color-off: #ffffff; /// @prop - Transition duration of the toggle icon -$toggle-md-transition-duration: 160ms !default; +$toggle-md-transition-duration: 160ms; /// @prop - Transition of the toggle icon -$toggle-md-transition: transform $toggle-md-transition-duration cubic-bezier(0.4, 0.0, 0.2, 1), background-color $toggle-md-transition-duration cubic-bezier(0.4, 0.0, 0.2, 1) !default; +$toggle-md-transition: transform $toggle-md-transition-duration cubic-bezier(0.4, 0.0, 0.2, 1), background-color $toggle-md-transition-duration cubic-bezier(0.4, 0.0, 0.2, 1); /// @prop - Opacity of the disabled toggle -$toggle-md-disabled-opacity: $form-control-md-disabled-opacity !default; +$toggle-md-disabled-opacity: $form-control-md-disabled-opacity; /// @prop - The text color of the on/off labels -$toggle-md-on-off-label-color: #000 !default; +$toggle-md-on-off-label-color: #000; /// @prop - The text color of the on/off labels when the toggle is checked -$toggle-md-on-off-label-checked-color: #fff !default; +$toggle-md-on-off-label-checked-color: #fff; diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx index 47141252d23..41e26015185 100644 --- a/core/src/components/toggle/toggle.tsx +++ b/core/src/components/toggle/toggle.tsx @@ -107,8 +107,9 @@ export class Toggle implements ComponentInterface { @Prop() alignment: 'start' | 'center' = 'center'; /** - * Emitted when the user switches the toggle on or off. Does not emit - * when programmatically changing the value of the `checked` property. + * Emitted when the user switches the toggle on or off. + * + * This event will not emit when programmatically setting the `checked` property. */ @Event() ionChange!: EventEmitter; diff --git a/core/src/components/toggle/toggle.vars.scss b/core/src/components/toggle/toggle.vars.scss index 629eb5048bf..4f0d34a764f 100644 --- a/core/src/components/toggle/toggle.vars.scss +++ b/core/src/components/toggle/toggle.vars.scss @@ -1,5 +1,5 @@ /// @prop - Top margin of toggle's label when in an item -$toggle-item-label-margin-top: 10px !default; +$toggle-item-label-margin-top: 10px; /// @prop - Bottom margin of toggle's label when in an item -$toggle-item-label-margin-bottom: 10px !default; \ No newline at end of file +$toggle-item-label-margin-bottom: 10px; \ No newline at end of file diff --git a/core/src/components/toolbar/toolbar.ios.vars.scss b/core/src/components/toolbar/toolbar.ios.vars.scss index 0648a2efe19..1b57622bde8 100644 --- a/core/src/components/toolbar/toolbar.ios.vars.scss +++ b/core/src/components/toolbar/toolbar.ios.vars.scss @@ -17,24 +17,24 @@ $toolbar-order-ios: ( ); /// @prop - Minimum height of the toolbar -$toolbar-ios-min-height: 44px !default; +$toolbar-ios-min-height: 44px; /// @prop - Padding top of the toolbar -$toolbar-ios-padding-top: 3px !default; +$toolbar-ios-padding-top: 3px; /// @prop - Padding end of the toolbar -$toolbar-ios-padding-end: 4px !default; +$toolbar-ios-padding-end: 4px; /// @prop - Padding bottom of the toolbar -$toolbar-ios-padding-bottom: $toolbar-ios-padding-top !default; +$toolbar-ios-padding-bottom: $toolbar-ios-padding-top; /// @prop - Padding start of the toolbar -$toolbar-ios-padding-start: $toolbar-ios-padding-end !default; +$toolbar-ios-padding-start: $toolbar-ios-padding-end; /// @prop - Font size of the toolbar button /// The minimum and maximum font sizes for a toolbar button are /// 100% and 135%, respectively, of their default font size -$toolbar-ios-button-font-size: dynamic-font-clamp(1, 17px, 1.24) !default; +$toolbar-ios-button-font-size: dynamic-font-clamp(1, 17px, 1.24); /// @prop - Border radius of the toolbar button -$toolbar-ios-button-border-radius: 4px !default; +$toolbar-ios-button-border-radius: 4px; diff --git a/core/src/components/toolbar/toolbar.md.vars.scss b/core/src/components/toolbar/toolbar.md.vars.scss index dc713a3424f..8a62c62d00e 100644 --- a/core/src/components/toolbar/toolbar.md.vars.scss +++ b/core/src/components/toolbar/toolbar.md.vars.scss @@ -16,4 +16,4 @@ $toolbar-order-md: ( ); /// @prop - Border radius of the toolbar button -$toolbar-md-button-border-radius: 2px !default; +$toolbar-md-button-border-radius: 2px; diff --git a/core/src/css/palettes/dark.scss b/core/src/css/palettes/dark.scss index 87455bdbec5..0c5ef08dd93 100644 --- a/core/src/css/palettes/dark.scss +++ b/core/src/css/palettes/dark.scss @@ -142,7 +142,6 @@ $colors: ( --ion-background-color-rgb: 18, 18, 18; --ion-text-color: #ffffff; --ion-text-color-rgb: 255, 255, 255; - --ion-border-color: #222222; --ion-background-color-step-50: #1e1e1e; --ion-background-color-step-100: #2a2a2a; --ion-background-color-step-150: #363636; diff --git a/core/src/css/palettes/high-contrast-dark.scss b/core/src/css/palettes/high-contrast-dark.scss index 927cbeb688e..e0f3b8aeb57 100644 --- a/core/src/css/palettes/high-contrast-dark.scss +++ b/core/src/css/palettes/high-contrast-dark.scss @@ -1,15 +1,15 @@ @use "sass:map"; @import "../../themes/ionic.functions.color"; -$primary: #7cabff !default; -$secondary: #62bdff !default; -$tertiary: #b6b9f9 !default; -$success: #4ada71 !default; -$warning: #ffce31 !default; -$danger: #fc9aa2 !default; -$light: #222428 !default; -$medium: #a8aab3 !default; -$dark: #f4f5f8 !default; +$primary: #7cabff; +$secondary: #62bdff; +$tertiary: #b6b9f9; +$success: #4ada71; +$warning: #ffce31; +$danger: #fc9aa2; +$light: #222428; +$medium: #a8aab3; +$dark: #f4f5f8; $colors: ( primary: ( @@ -66,7 +66,7 @@ $colors: ( shade: get-color-shade($dark), tint: get-color-tint($dark) ) -) !default; +); /// Text step colors are generated based on /// how dark or light text can be. The darkest diff --git a/core/src/css/palettes/high-contrast.scss b/core/src/css/palettes/high-contrast.scss index ec7152c211d..c7387aa6490 100644 --- a/core/src/css/palettes/high-contrast.scss +++ b/core/src/css/palettes/high-contrast.scss @@ -1,15 +1,15 @@ @use "sass:map"; @import "../../themes/ionic.functions.color"; -$primary: #003fae !default; -$secondary: #01487b !default; -$tertiary: #3400e6 !default; -$success: #004314 !default; -$warning: #5f4100 !default; -$danger: #9c000c !default; -$light: #f4f5f8 !default; -$medium: #444446 !default; -$dark: #222428 !default; +$primary: #003fae; +$secondary: #01487b; +$tertiary: #3400e6; +$success: #004314; +$warning: #5f4100; +$danger: #9c000c; +$light: #f4f5f8; +$medium: #444446; +$dark: #222428; $colors: ( primary: ( @@ -66,7 +66,7 @@ $colors: ( shade: get-color-shade($dark), tint: get-color-tint($dark) ) -) !default; +); /// Text step colors are generated based on /// how dark or light text can be. The darkest diff --git a/core/src/css/typography.scss b/core/src/css/typography.scss index d1474a38d9d..8f829b73e2c 100644 --- a/core/src/css/typography.scss +++ b/core/src/css/typography.scss @@ -5,28 +5,28 @@ // -------------------------------------------------- /// @prop - Font weight of all headings -$headings-font-weight: 500 !default; +$headings-font-weight: 500; /// @prop - Line height of all headings -$headings-line-height: 1.2 !default; +$headings-line-height: 1.2; /// @prop - Font size of heading level 1 -$h1-font-size: dynamic-font(26px) !default; +$h1-font-size: dynamic-font(26px); /// @prop - Font size of heading level 2 -$h2-font-size: dynamic-font(24px) !default; +$h2-font-size: dynamic-font(24px); /// @prop - Font size of heading level 3 -$h3-font-size: dynamic-font(22px) !default; +$h3-font-size: dynamic-font(22px); /// @prop - Font size of heading level 4 -$h4-font-size: dynamic-font(20px) !default; +$h4-font-size: dynamic-font(20px); /// @prop - Font size of heading level 5 -$h5-font-size: dynamic-font(18px) !default; +$h5-font-size: dynamic-font(18px); /// @prop - Font size of heading level 6 -$h6-font-size: dynamic-font(16px) !default; +$h6-font-size: dynamic-font(16px); html { font-family: var(--ion-font-family); diff --git a/core/src/themes/ionic.functions.font.scss b/core/src/themes/ionic.functions.font.scss index 81adff90e79..a9628a12c3b 100644 --- a/core/src/themes/ionic.functions.font.scss +++ b/core/src/themes/ionic.functions.font.scss @@ -1,7 +1,7 @@ @use "sass:math"; -$baselineSize: 16px !default; -$baselineUnit: 1rem !default; +$baselineSize: 16px; +$baselineUnit: 1rem; /** * Convert a font size to a dynamic font size. diff --git a/core/src/themes/ionic.globals.scss b/core/src/themes/ionic.globals.scss index f4c52d1472b..6f281136fa2 100644 --- a/core/src/themes/ionic.globals.scss +++ b/core/src/themes/ionic.globals.scss @@ -17,10 +17,10 @@ // Default General // -------------------------------------------------- -$font-family-base: var(--ion-font-family, inherit) !default; +$font-family-base: var(--ion-font-family, inherit); // Hairlines width -$hairlines-width: .55px !default; +$hairlines-width: .55px; // The minimum dimensions at which your layout will change, // adapting to different screen sizes, for use in media queries @@ -30,19 +30,19 @@ $screen-breakpoints: ( md: 768px, lg: 992px, xl: 1200px -) !default; +); // Input placeholder opacity // Ensures that the placeholder has the // correct color contrast against the background. -$placeholder-opacity: var(--ion-placeholder-opacity, 0.6) !default; +$placeholder-opacity: var(--ion-placeholder-opacity, 0.6); -$form-control-label-margin: 16px !default; +$form-control-label-margin: 16px; // How much the stacked labels should be scaled by /// The value 0.75 is used to match the MD spec. /// iOS does not have a floating label design spec, so we standardize on 0.75. -$form-control-label-stacked-scale: 0.75 !default; +$form-control-label-stacked-scale: 0.75; // Z-Index diff --git a/core/src/themes/ionic.theme.default.ios.scss b/core/src/themes/ionic.theme.default.ios.scss index c5c5e7045a9..f07aeef5eec 100644 --- a/core/src/themes/ionic.theme.default.ios.scss +++ b/core/src/themes/ionic.theme.default.ios.scss @@ -6,33 +6,33 @@ // iOS General Colors // -------------------------------------------------- -$backdrop-ios-color: var(--ion-backdrop-color, #000) !default; -$overlay-ios-background-color: var(--ion-overlay-background-color, var(--ion-color-step-100, var(--ion-background-color-step-100, #f9f9f9))) !default; +$backdrop-ios-color: var(--ion-backdrop-color, #000); +$overlay-ios-background-color: var(--ion-overlay-background-color, var(--ion-color-step-100, var(--ion-background-color-step-100, #f9f9f9))); // iOS Tabs & Tab bar // -------------------------------------------------- -$tabbar-ios-background: var(--ion-tab-bar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7))) !default; -$tabbar-ios-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#fff)) !default; +$tabbar-ios-background: var(--ion-tab-bar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7))); +$tabbar-ios-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#fff)); $tabbar-ios-border-color: var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, .2)))) )!default; -$tabbar-ios-color: var(--ion-tab-bar-color, $text-color-step-400) !default; -$tabbar-ios-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary, base)) !default; +$tabbar-ios-color: var(--ion-tab-bar-color, $text-color-step-400); +$tabbar-ios-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary, base)); // iOS Toolbar // -------------------------------------------------- -$toolbar-ios-background: var(--ion-toolbar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7))) !default; -$toolbar-ios-border-color: var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, .2))))) !default; -$toolbar-ios-color: var(--ion-toolbar-color, $text-color) !default; +$toolbar-ios-background: var(--ion-toolbar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7))); +$toolbar-ios-border-color: var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, .2))))); +$toolbar-ios-color: var(--ion-toolbar-color, $text-color); // iOS List & List Items // -------------------------------------------------- -$item-ios-background: var(--ion-item-background, $background-color) !default; -$item-ios-border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc)))) !default; -$item-ios-color: var(--ion-item-color, $text-color) !default; +$item-ios-background: var(--ion-item-background, $background-color); +$item-ios-border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc)))); +$item-ios-color: var(--ion-item-color, $text-color); // iOS Card // -------------------------------------------------- -$card-ios-background: var(--ion-card-background, $item-ios-background) !default; -$card-ios-color: var(--ion-card-color, var(--ion-item-color, $text-color-step-400)) !default; +$card-ios-background: var(--ion-card-background, $item-ios-background); +$card-ios-color: var(--ion-card-color, var(--ion-item-color, $text-color-step-400)); // iOS Form Controls // -------------------------------------------------- diff --git a/core/src/themes/ionic.theme.default.md.scss b/core/src/themes/ionic.theme.default.md.scss index 14f1f34c7ad..bae22a078d9 100644 --- a/core/src/themes/ionic.theme.default.md.scss +++ b/core/src/themes/ionic.theme.default.md.scss @@ -7,34 +7,34 @@ // Material Design General Colors // -------------------------------------------------- -$backdrop-md-color: var(--ion-backdrop-color, #000) !default; -$border-md-color: var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, #c1c4cd))) !default; -$overlay-md-background-color: var(--ion-overlay-background-color, var(--ion-background-color, #fff)) !default; +$backdrop-md-color: var(--ion-backdrop-color, #000); +$border-md-color: var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, #c1c4cd))); +$overlay-md-background-color: var(--ion-overlay-background-color, var(--ion-background-color, #fff)); // Material Design Tabs & Tab bar // -------------------------------------------------- -$tabbar-md-background: var(--ion-tab-bar-background, $background-color) !default; -$tabbar-md-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#fff)) !default; -$tabbar-md-border-color: var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, .07))))) !default; -$tabbar-md-color: var(--ion-tab-bar-color, $text-color-step-350) !default; -$tabbar-md-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary, base)) !default; +$tabbar-md-background: var(--ion-tab-bar-background, $background-color); +$tabbar-md-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#fff)); +$tabbar-md-border-color: var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, .07))))); +$tabbar-md-color: var(--ion-tab-bar-color, $text-color-step-350); +$tabbar-md-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary, base)); // Material Design Toolbar // -------------------------------------------------- -$toolbar-md-background: var(--ion-toolbar-background, $background-color) !default; -$toolbar-md-border-color: var(--ion-toolbar-border-color, $border-md-color) !default; -$toolbar-md-color: var(--ion-toolbar-color, var(--ion-text-color, #424242)) !default; +$toolbar-md-background: var(--ion-toolbar-background, $background-color); +$toolbar-md-border-color: var(--ion-toolbar-border-color, $border-md-color); +$toolbar-md-color: var(--ion-toolbar-color, var(--ion-text-color, #424242)); // Material Design List & List Items // -------------------------------------------------- -$item-md-background: var(--ion-item-background, $background-color) !default; -$item-md-border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, .13))))) !default; -$item-md-color: var(--ion-item-color, $text-color) !default; +$item-md-background: var(--ion-item-background, $background-color); +$item-md-border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, .13))))); +$item-md-color: var(--ion-item-color, $text-color); // Material Design Card // -------------------------------------------------- -$card-md-background: var(--ion-card-background, $item-md-background) !default; -$card-md-color: var(--ion-card-color, var(--ion-item-color, $text-color-step-450)) !default; +$card-md-background: var(--ion-card-background, $item-md-background); +$card-md-color: var(--ion-card-color, var(--ion-item-color, $text-color-step-450)); // Material Design Form Controls // -------------------------------------------------- diff --git a/core/src/themes/ionic.theme.default.scss b/core/src/themes/ionic.theme.default.scss index 8a7c4c6013c..6ed8d34cd1c 100644 --- a/core/src/themes/ionic.theme.default.scss +++ b/core/src/themes/ionic.theme.default.scss @@ -12,15 +12,15 @@ // - shade: 12% darker version of the base color (mix with black) // - tint: 10% lighter version of the base color (mix with white) -$primary: #0054e9 !default; -$secondary: #0163aa !default; -$tertiary: #6030ff !default; -$success: #2dd55b !default; -$warning: #ffc409 !default; -$danger: #c5000f !default; -$light: #f4f5f8 !default; -$medium: #636469 !default; -$dark: #222428 !default; +$primary: #0054e9; +$secondary: #0163aa; +$tertiary: #6030ff; +$success: #2dd55b; +$warning: #ffc409; +$danger: #c5000f; +$light: #f4f5f8; +$medium: #636469; +$dark: #222428; $colors: ( primary: ( @@ -77,22 +77,22 @@ $colors: ( shade: get-color-shade($dark), tint: get-color-tint($dark) ) -) !default; +); // Default Foreground and Background Colors // ------------------------------------------------------------------------------------------- // Used internally to calculate the default steps -$background-color-value: #fff !default; -$background-color-rgb-value: 255, 255, 255 !default; +$background-color-value: #fff; +$background-color-rgb-value: 255, 255, 255; -$text-color-value: #000 !default; -$text-color-rgb-value: 0, 0, 0 !default; +$text-color-value: #000; +$text-color-rgb-value: 0, 0, 0; -$background-color: var(--ion-background-color, $background-color-value) !default; -$background-color-rgb: var(--ion-background-color-rgb, $background-color-rgb-value) !default; -$text-color: var(--ion-text-color, $text-color-value) !default; -$text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-value) !default; +$background-color: var(--ion-background-color, $background-color-value); +$background-color-rgb: var(--ion-background-color-rgb, $background-color-rgb-value); +$text-color: var(--ion-text-color, $text-color-value); +$text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-value); // Default Foreground and Background Step Colors // ------------------------------------------------------------------------------------------- @@ -101,45 +101,45 @@ $text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-va // For example, $text-color-step-XXX will be $text-color stepping towards $background-color, // but a $background-color-step-XXX will be $background-color stepping towards $text-color. -$background-color-step-50: var(--ion-color-step-50, var(--ion-background-color-step-50, mix($text-color-value, $background-color-value, 5%))) !default; -$background-color-step-100: var(--ion-color-step-100, var(--ion-background-color-step-100, mix($text-color-value, $background-color-value, 10%))) !default; -$background-color-step-150: var(--ion-color-step-150, var(--ion-background-color-step-150, mix($text-color-value, $background-color-value, 15%))) !default; -$background-color-step-200: var(--ion-color-step-200, var(--ion-background-color-step-200, mix($text-color-value, $background-color-value, 20%))) !default; -$background-color-step-250: var(--ion-color-step-250, var(--ion-background-color-step-250, mix($text-color-value, $background-color-value, 25%))) !default; -$background-color-step-300: var(--ion-color-step-300, var(--ion-background-color-step-300, mix($text-color-value, $background-color-value, 30%))) !default; -$background-color-step-350: var(--ion-color-step-350, var(--ion-background-color-step-350, mix($text-color-value, $background-color-value, 35%))) !default; -$background-color-step-400: var(--ion-color-step-400, var(--ion-background-color-step-400, mix($text-color-value, $background-color-value, 40%))) !default; -$background-color-step-450: var(--ion-color-step-450, var(--ion-background-color-step-450, mix($text-color-value, $background-color-value, 45%))) !default; -$background-color-step-500: var(--ion-color-step-500, var(--ion-background-color-step-500, mix($text-color-value, $background-color-value, 50%))) !default; -$background-color-step-550: var(--ion-color-step-550, var(--ion-background-color-step-550, mix($text-color-value, $background-color-value, 55%))) !default; -$background-color-step-600: var(--ion-color-step-600, var(--ion-background-color-step-600, mix($text-color-value, $background-color-value, 60%))) !default; -$background-color-step-650: var(--ion-color-step-650, var(--ion-background-color-step-650, mix($text-color-value, $background-color-value, 65%))) !default; -$background-color-step-700: var(--ion-color-step-700, var(--ion-background-color-step-700, mix($text-color-value, $background-color-value, 70%))) !default; -$background-color-step-750: var(--ion-color-step-750, var(--ion-background-color-step-750, mix($text-color-value, $background-color-value, 75%))) !default; -$background-color-step-800: var(--ion-color-step-800, var(--ion-background-color-step-800, mix($text-color-value, $background-color-value, 80%))) !default; -$background-color-step-850: var(--ion-color-step-850, var(--ion-background-color-step-850, mix($text-color-value, $background-color-value, 85%))) !default; -$background-color-step-900: var(--ion-color-step-900, var(--ion-background-color-step-900, mix($text-color-value, $background-color-value, 90%))) !default; -$background-color-step-950: var(--ion-color-step-950, var(--ion-background-color-step-950, mix($text-color-value, $background-color-value, 95%))) !default; -$text-color-step-50: var(--ion-color-step-950, var(--ion-text-color-step-50, mix($background-color-value, $text-color-value, 5%))) !default; -$text-color-step-100: var(--ion-color-step-900, var(--ion-text-color-step-100, mix($background-color-value, $text-color-value, 10%))) !default; -$text-color-step-150: var(--ion-color-step-850, var(--ion-text-color-step-150, mix($background-color-value, $text-color-value, 15%))) !default; -$text-color-step-200: var(--ion-color-step-800, var(--ion-text-color-step-200, mix($background-color-value, $text-color-value, 20%))) !default; -$text-color-step-250: var(--ion-color-step-750, var(--ion-text-color-step-250, mix($background-color-value, $text-color-value, 25%))) !default; -$text-color-step-300: var(--ion-color-step-700, var(--ion-text-color-step-300, mix($background-color-value, $text-color-value, 30%))) !default; -$text-color-step-350: var(--ion-color-step-650, var(--ion-text-color-step-350, mix($background-color-value, $text-color-value, 35%))) !default; -$text-color-step-400: var(--ion-color-step-600, var(--ion-text-color-step-400, mix($background-color-value, $text-color-value, 40%))) !default; -$text-color-step-450: var(--ion-color-step-550, var(--ion-text-color-step-450, mix($background-color-value, $text-color-value, 45%))) !default; -$text-color-step-500: var(--ion-color-step-500, var(--ion-text-color-step-500, mix($background-color-value, $text-color-value, 50%))) !default; -$text-color-step-550: var(--ion-color-step-450, var(--ion-text-color-step-550, mix($background-color-value, $text-color-value, 55%))) !default; -$text-color-step-600: var(--ion-color-step-400, var(--ion-text-color-step-600, mix($background-color-value, $text-color-value, 60%))) !default; -$text-color-step-650: var(--ion-color-step-350, var(--ion-text-color-step-650, mix($background-color-value, $text-color-value, 65%))) !default; -$text-color-step-700: var(--ion-color-step-300, var(--ion-text-color-step-700, mix($background-color-value, $text-color-value, 70%))) !default; -$text-color-step-750: var(--ion-color-step-250, var(--ion-text-color-step-750, mix($background-color-value, $text-color-value, 75%))) !default; -$text-color-step-800: var(--ion-color-step-200, var(--ion-text-color-step-800, mix($background-color-value, $text-color-value, 80%))) !default; -$text-color-step-850: var(--ion-color-step-150, var(--ion-text-color-step-850, mix($background-color-value, $text-color-value, 85%))) !default; -$text-color-step-900: var(--ion-color-step-100, var(--ion-text-color-step-900, mix($background-color-value, $text-color-value, 90%))) !default; -$text-color-step-950: var(--ion-color-step-50, var(--ion-text-color-step-950, mix($background-color-value, $text-color-value, 95%))) !default; +$background-color-step-50: var(--ion-color-step-50, var(--ion-background-color-step-50, mix($text-color-value, $background-color-value, 5%))); +$background-color-step-100: var(--ion-color-step-100, var(--ion-background-color-step-100, mix($text-color-value, $background-color-value, 10%))); +$background-color-step-150: var(--ion-color-step-150, var(--ion-background-color-step-150, mix($text-color-value, $background-color-value, 15%))); +$background-color-step-200: var(--ion-color-step-200, var(--ion-background-color-step-200, mix($text-color-value, $background-color-value, 20%))); +$background-color-step-250: var(--ion-color-step-250, var(--ion-background-color-step-250, mix($text-color-value, $background-color-value, 25%))); +$background-color-step-300: var(--ion-color-step-300, var(--ion-background-color-step-300, mix($text-color-value, $background-color-value, 30%))); +$background-color-step-350: var(--ion-color-step-350, var(--ion-background-color-step-350, mix($text-color-value, $background-color-value, 35%))); +$background-color-step-400: var(--ion-color-step-400, var(--ion-background-color-step-400, mix($text-color-value, $background-color-value, 40%))); +$background-color-step-450: var(--ion-color-step-450, var(--ion-background-color-step-450, mix($text-color-value, $background-color-value, 45%))); +$background-color-step-500: var(--ion-color-step-500, var(--ion-background-color-step-500, mix($text-color-value, $background-color-value, 50%))); +$background-color-step-550: var(--ion-color-step-550, var(--ion-background-color-step-550, mix($text-color-value, $background-color-value, 55%))); +$background-color-step-600: var(--ion-color-step-600, var(--ion-background-color-step-600, mix($text-color-value, $background-color-value, 60%))); +$background-color-step-650: var(--ion-color-step-650, var(--ion-background-color-step-650, mix($text-color-value, $background-color-value, 65%))); +$background-color-step-700: var(--ion-color-step-700, var(--ion-background-color-step-700, mix($text-color-value, $background-color-value, 70%))); +$background-color-step-750: var(--ion-color-step-750, var(--ion-background-color-step-750, mix($text-color-value, $background-color-value, 75%))); +$background-color-step-800: var(--ion-color-step-800, var(--ion-background-color-step-800, mix($text-color-value, $background-color-value, 80%))); +$background-color-step-850: var(--ion-color-step-850, var(--ion-background-color-step-850, mix($text-color-value, $background-color-value, 85%))); +$background-color-step-900: var(--ion-color-step-900, var(--ion-background-color-step-900, mix($text-color-value, $background-color-value, 90%))); +$background-color-step-950: var(--ion-color-step-950, var(--ion-background-color-step-950, mix($text-color-value, $background-color-value, 95%))); +$text-color-step-50: var(--ion-color-step-950, var(--ion-text-color-step-50, mix($background-color-value, $text-color-value, 5%))); +$text-color-step-100: var(--ion-color-step-900, var(--ion-text-color-step-100, mix($background-color-value, $text-color-value, 10%))); +$text-color-step-150: var(--ion-color-step-850, var(--ion-text-color-step-150, mix($background-color-value, $text-color-value, 15%))); +$text-color-step-200: var(--ion-color-step-800, var(--ion-text-color-step-200, mix($background-color-value, $text-color-value, 20%))); +$text-color-step-250: var(--ion-color-step-750, var(--ion-text-color-step-250, mix($background-color-value, $text-color-value, 25%))); +$text-color-step-300: var(--ion-color-step-700, var(--ion-text-color-step-300, mix($background-color-value, $text-color-value, 30%))); +$text-color-step-350: var(--ion-color-step-650, var(--ion-text-color-step-350, mix($background-color-value, $text-color-value, 35%))); +$text-color-step-400: var(--ion-color-step-600, var(--ion-text-color-step-400, mix($background-color-value, $text-color-value, 40%))); +$text-color-step-450: var(--ion-color-step-550, var(--ion-text-color-step-450, mix($background-color-value, $text-color-value, 45%))); +$text-color-step-500: var(--ion-color-step-500, var(--ion-text-color-step-500, mix($background-color-value, $text-color-value, 50%))); +$text-color-step-550: var(--ion-color-step-450, var(--ion-text-color-step-550, mix($background-color-value, $text-color-value, 55%))); +$text-color-step-600: var(--ion-color-step-400, var(--ion-text-color-step-600, mix($background-color-value, $text-color-value, 60%))); +$text-color-step-650: var(--ion-color-step-350, var(--ion-text-color-step-650, mix($background-color-value, $text-color-value, 65%))); +$text-color-step-700: var(--ion-color-step-300, var(--ion-text-color-step-700, mix($background-color-value, $text-color-value, 70%))); +$text-color-step-750: var(--ion-color-step-250, var(--ion-text-color-step-750, mix($background-color-value, $text-color-value, 75%))); +$text-color-step-800: var(--ion-color-step-200, var(--ion-text-color-step-800, mix($background-color-value, $text-color-value, 80%))); +$text-color-step-850: var(--ion-color-step-150, var(--ion-text-color-step-850, mix($background-color-value, $text-color-value, 85%))); +$text-color-step-900: var(--ion-color-step-100, var(--ion-text-color-step-900, mix($background-color-value, $text-color-value, 90%))); +$text-color-step-950: var(--ion-color-step-50, var(--ion-text-color-step-950, mix($background-color-value, $text-color-value, 95%))); // Default General Colors // -------------------------------------------------- -$placeholder-text-color: var(--ion-placeholder-color, $text-color-step-600) !default; +$placeholder-text-color: var(--ion-placeholder-color, $text-color-step-600); diff --git a/core/src/utils/transition/ios.transition.ts b/core/src/utils/transition/ios.transition.ts index 6d7da125fac..4e71e32a40d 100644 --- a/core/src/utils/transition/ios.transition.ts +++ b/core/src/utils/transition/ios.transition.ts @@ -75,8 +75,10 @@ const createLargeTitleTransition = ( const leavingLargeTitleBox = leavingLargeTitle.getBoundingClientRect(); const enteringBackButtonBox = enteringBackButton.getBoundingClientRect(); - const enteringBackButtonTextEl = shadow(enteringBackButton).querySelector('.button-text')!; - const enteringBackButtonTextBox = enteringBackButtonTextEl.getBoundingClientRect(); + const enteringBackButtonTextEl = shadow(enteringBackButton).querySelector('.button-text'); + + // Text element not rendered if developers pass text="" to the back button + const enteringBackButtonTextBox = enteringBackButtonTextEl?.getBoundingClientRect(); const leavingLargeTitleTextEl = shadow(leavingLargeTitle).querySelector('.toolbar-title')!; const leavingLargeTitleTextBox = leavingLargeTitleTextEl.getBoundingClientRect(); @@ -88,6 +90,7 @@ const createLargeTitleTransition = ( leavingLargeTitle, leavingLargeTitleBox, leavingLargeTitleTextBox, + enteringBackButtonBox, enteringBackButtonTextEl, enteringBackButtonTextBox ); @@ -106,8 +109,10 @@ const createLargeTitleTransition = ( const enteringLargeTitleBox = enteringLargeTitle.getBoundingClientRect(); const leavingBackButtonBox = leavingBackButton.getBoundingClientRect(); - const leavingBackButtonTextEl = shadow(leavingBackButton).querySelector('.button-text')!; - const leavingBackButtonTextBox = leavingBackButtonTextEl.getBoundingClientRect(); + const leavingBackButtonTextEl = shadow(leavingBackButton).querySelector('.button-text'); + + // Text element not rendered if developers pass text="" to the back button + const leavingBackButtonTextBox = leavingBackButtonTextEl?.getBoundingClientRect(); const enteringLargeTitleTextEl = shadow(enteringLargeTitle).querySelector('.toolbar-title')!; const enteringLargeTitleTextBox = enteringLargeTitleTextEl.getBoundingClientRect(); @@ -119,6 +124,7 @@ const createLargeTitleTransition = ( enteringLargeTitle, enteringLargeTitleBox, enteringLargeTitleTextBox, + leavingBackButtonBox, leavingBackButtonTextEl, leavingBackButtonTextBox ); @@ -147,8 +153,8 @@ const animateBackButton = ( backDirection: boolean, backButtonEl: HTMLIonBackButtonElement, backButtonBox: DOMRect, - backButtonTextEl: HTMLElement, - backButtonTextBox: DOMRect, + backButtonTextEl: HTMLElement | null, + backButtonTextBox: DOMRect | undefined, largeTitleEl: HTMLIonTitleElement, largeTitleTextBox: DOMRect ) => { @@ -158,31 +164,35 @@ const animateBackButton = ( const ICON_ORIGIN_X = rtl ? 'left' : 'right'; const CONTAINER_ORIGIN_X = rtl ? 'right' : 'left'; + let WIDTH_SCALE = 1; + let HEIGHT_SCALE = 1; - /** - * When the title and back button texts match - * then they should overlap during the page transition. - * If the texts do not match up then the back button text scale adjusts - * to not perfectly match the large title text otherwise the - * proportions will be incorrect. - * When the texts match we scale both the width and height to account for - * font weight differences between the title and back button. - */ - const doTitleAndButtonTextsMatch = backButtonTextEl.textContent?.trim() === largeTitleEl.textContent?.trim(); - - const WIDTH_SCALE = largeTitleTextBox.width / backButtonTextBox.width; - - /** - * We subtract an offset to account for slight sizing/padding - * differences between the title and the back button. - */ - const HEIGHT_SCALE = (largeTitleTextBox.height - LARGE_TITLE_SIZE_OFFSET) / backButtonTextBox.height; - - const TEXT_START_SCALE = doTitleAndButtonTextsMatch - ? `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})` - : `scale(${HEIGHT_SCALE})`; + let TEXT_START_SCALE = `scale(${HEIGHT_SCALE})`; const TEXT_END_SCALE = 'scale(1)'; + if (backButtonTextEl && backButtonTextBox) { + /** + * When the title and back button texts match then they should overlap during the + * page transition. If the texts do not match up then the back button text scale + * adjusts to not perfectly match the large title text otherwise the proportions + * will be incorrect. When the texts match we scale both the width and height to + * account for font weight differences between the title and back button. + */ + const doTitleAndButtonTextsMatch = backButtonTextEl.textContent?.trim() === largeTitleEl.textContent?.trim(); + WIDTH_SCALE = largeTitleTextBox.width / backButtonTextBox.width; + /** + * Subtract an offset to account for slight sizing/padding differences between the + * title and the back button. + */ + HEIGHT_SCALE = (largeTitleTextBox.height - LARGE_TITLE_SIZE_OFFSET) / backButtonTextBox.height; + + /** + * Even though we set TEXT_START_SCALE to HEIGHT_SCALE above, we potentially need + * to re-compute this here since the HEIGHT_SCALE may have changed. + */ + TEXT_START_SCALE = doTitleAndButtonTextsMatch ? `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})` : `scale(${HEIGHT_SCALE})`; + } + const backButtonIconEl = shadow(backButtonEl).querySelector('ion-icon')!; const backButtonIconBox = backButtonIconEl.getBoundingClientRect(); @@ -292,12 +302,11 @@ const animateBackButton = ( top: '0px', [CONTAINER_ORIGIN_X]: '0px', }) - .keyframes(CONTAINER_KEYFRAMES); - - enteringBackButtonTextAnimation - .beforeStyles({ - 'transform-origin': `${TEXT_ORIGIN_X} top`, - }) + /** + * The write hooks must be set on this animation as it is guaranteed to run. Other + * animations such as the back button text animation will not run if the back button + * has no visible text. + */ .beforeAddWrite(() => { backButtonEl.style.setProperty('display', 'none'); clonedBackButtonEl.style.setProperty(TEXT_ORIGIN_X, BACK_BUTTON_START_OFFSET); @@ -307,6 +316,12 @@ const animateBackButton = ( clonedBackButtonEl.style.setProperty('display', 'none'); clonedBackButtonEl.style.removeProperty(TEXT_ORIGIN_X); }) + .keyframes(CONTAINER_KEYFRAMES); + + enteringBackButtonTextAnimation + .beforeStyles({ + 'transform-origin': `${TEXT_ORIGIN_X} top`, + }) .keyframes(TEXT_KEYFRAMES); enteringBackButtonIconAnimation @@ -329,8 +344,9 @@ const animateLargeTitle = ( largeTitleEl: HTMLIonTitleElement, largeTitleBox: DOMRect, largeTitleTextBox: DOMRect, - backButtonTextEl: HTMLElement, - backButtonTextBox: DOMRect + backButtonBox: DOMRect, + backButtonTextEl: HTMLElement | null, + backButtonTextBox: DOMRect | undefined ) => { /** * The horizontal transform origin for the large title @@ -353,59 +369,76 @@ const animateLargeTitle = ( * title and the back button due to padding and font weight. */ const LARGE_TITLE_TRANSLATION_OFFSET = 8; + let END_TRANSLATE_X = rtl + ? `-${window.innerWidth - backButtonBox.right - LARGE_TITLE_TRANSLATION_OFFSET}px` + : `${backButtonBox.x + LARGE_TITLE_TRANSLATION_OFFSET}px`; /** - * The scaled title should (roughly) overlap the back button. - * This ensures that the back button and title overlap during - * the animation. Note that since both elements either fade in - * or fade out over the course of the animation, neither element - * will be fully visible on top of the other. As a result, the overlap - * does not need to be perfect, so approximate values are acceptable here. + * How much to scale the large title up/down by. */ - const END_TRANSLATE_X = rtl - ? `-${window.innerWidth - backButtonTextBox.right - LARGE_TITLE_TRANSLATION_OFFSET}px` - : `${backButtonTextBox.x - LARGE_TITLE_TRANSLATION_OFFSET}px`; + let HEIGHT_SCALE = 0.5; /** - * The top of the scaled large title - * should match with the top of the - * back button text element. - * We subtract 2px to account for the top padding - * on the large title element. + * The large title always starts full size. */ - const LARGE_TITLE_TOP_PADDING = 2; - const END_TRANSLATE_Y = `${backButtonTextBox.y - LARGE_TITLE_TOP_PADDING}px`; + const START_SCALE = 'scale(1)'; /** - * In the forward direction, the large title should start at its - * normal size and then scale down to be (roughly) the size of the - * back button on the other view. In the backward direction, the - * large title should start at (roughly) the size of the back button - * and then scale up to its original size. - * - * Note that since both elements either fade in - * or fade out over the course of the animation, neither element - * will be fully visible on top of the other. As a result, the overlap - * does not need to be perfect, so approximate values are acceptable here. + * By default, we don't worry about having the large title scaled to perfectly + * match the back button because we don't know if the back button's text matches + * the large title's text. */ + let END_SCALE = `scale(${HEIGHT_SCALE})`; + + // Text element not rendered if developers pass text="" to the back button + if (backButtonTextEl && backButtonTextBox) { + /** + * The scaled title should (roughly) overlap the back button. This ensures that + * the back button and title overlap during the animation. Note that since both + * elements either fade in or fade out over the course of the animation, neither + * element will be fully visible on top of the other. As a result, the overlap + * does not need to be perfect, so approximate values are acceptable here. + */ + END_TRANSLATE_X = rtl + ? `-${window.innerWidth - backButtonTextBox.right - LARGE_TITLE_TRANSLATION_OFFSET}px` + : `${backButtonTextBox.x - LARGE_TITLE_TRANSLATION_OFFSET}px`; + + /** + * In the forward direction, the large title should start at its normal size and + * then scale down to be (roughly) the size of the back button on the other view. + * In the backward direction, the large title should start at (roughly) the size + * of the back button and then scale up to its original size. + * Note that since both elements either fade in or fade out over the course of the + * animation, neither element will be fully visible on top of the other. As a result, + * the overlap does not need to be perfect, so approximate values are acceptable here. + */ + + /** + * When the title and back button texts match then they should overlap during the + * page transition. If the texts do not match up then the large title text scale + * adjusts to not perfectly match the back button text otherwise the proportions + * will be incorrect. When the texts match we scale both the width and height to + * account for font weight differences between the title and back button. + */ + const doTitleAndButtonTextsMatch = backButtonTextEl.textContent?.trim() === largeTitleEl.textContent?.trim(); + + const WIDTH_SCALE = backButtonTextBox.width / largeTitleTextBox.width; + HEIGHT_SCALE = backButtonTextBox.height / (largeTitleTextBox.height - LARGE_TITLE_SIZE_OFFSET); + + /** + * Even though we set TEXT_START_SCALE to HEIGHT_SCALE above, we potentially need + * to re-compute this here since the HEIGHT_SCALE may have changed. + */ + END_SCALE = doTitleAndButtonTextsMatch ? `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})` : `scale(${HEIGHT_SCALE})`; + } /** - * When the title and back button texts match - * then they should overlap during the page transition. - * If the texts do not match up then the large title text scale adjusts - * to not perfectly match the back button text otherwise the - * proportions will be incorrect. - * When the texts match we scale both the width and height to account for - * font weight differences between the title and back button. + * The midpoints of the back button and the title should align such that the back + * button and title appear to be centered with each other. */ - const doTitleAndButtonTextsMatch = backButtonTextEl.textContent?.trim() === largeTitleEl.textContent?.trim(); - - const WIDTH_SCALE = backButtonTextBox.width / largeTitleTextBox.width; - const HEIGHT_SCALE = backButtonTextBox.height / (largeTitleTextBox.height - LARGE_TITLE_SIZE_OFFSET); - - const START_SCALE = 'scale(1)'; - - const END_SCALE = doTitleAndButtonTextsMatch ? `scale(${WIDTH_SCALE}, ${HEIGHT_SCALE})` : `scale(${HEIGHT_SCALE})`; + const backButtonMidPoint = backButtonBox.top + backButtonBox.height / 2; + const titleMidPoint = (largeTitleBox.height * HEIGHT_SCALE) / 2; + const END_TRANSLATE_Y = `${backButtonMidPoint - titleMidPoint}px`; const BACKWARDS_KEYFRAMES = [ { offset: 0, opacity: 0, transform: `translate3d(${END_TRANSLATE_X}, ${END_TRANSLATE_Y}, 0) ${END_SCALE}` }, diff --git a/docs/component-guide.md b/docs/component-guide.md index 0b0bdf490d1..e0ec370749c 100644 --- a/docs/component-guide.md +++ b/docs/component-guide.md @@ -152,9 +152,6 @@ The focused state should be enabled for elements with actions when tabbed to via > [!WARNING] > Do not use `:focus` because that will cause the focus to apply even when an element is tapped (because the element is now focused). Instead, we only want the focus state to be shown when it makes sense which is what the `.ion-focusable` utility mentioned below does. -> [!NOTE] -> The [`:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) pseudo-class mostly does the same thing as our JavaScript-driven utility. However, it does not work well with Shadow DOM components as the element that receives focus is typically inside of the Shadow DOM, but we usually want to set the `:focus-visible` state on the host so we can style other parts of the component. Using other combinations such as `:has(:focus-visible)` does not work because `:has` does not pierce the Shadow DOM (as that would leak implementation details about the Shadow DOM contents). `:focus-within` does work with the Shadow DOM, but that has the same problem as `:focus` that was mentioned before. Unfortunately, a [`:focus-visible-within` pseudo-class does not exist yet](https://github.com/WICG/focus-visible/issues/151). - > [!IMPORTANT] > Make sure the component has the correct [component structure](#component-structure) before continuing. @@ -215,6 +212,15 @@ ion-button { } ``` +#### When to use `.ion-focusable` versus `:focus-visible` + +The [`:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) pseudo-class mostly does the same thing as our JavaScript-driven utility. However, it does not work well with Shadow DOM components as the element that receives focus is typically inside of the Shadow DOM, but we usually want to set the `:focus-visible` state on the host so we can style other parts of the component. + +Using other combinations such as `:has(:focus-visible)` does not work because `:has` does not pierce the Shadow DOM (as that would leak implementation details about the Shadow DOM contents). `:focus-within` does work with the Shadow DOM, but that has the same problem as `:focus` that was mentioned before. Unfortunately, a [`:focus-visible-within` pseudo-class does not exist yet](https://github.com/WICG/focus-visible/issues/151). + +The `.ion-focusable` class should be used when you want to style Element A based on the state of Element B. For example, the Button component styles the host of the component (Element A) when the native `button` inside the Shadow DOM (Element B) has focus. + +On the other hand, the `:focus-visible` pseudo-class can be used when you want to style the element based on its own state. For example, we could use `:focus-visible` to style the clear icon on Input when the icon itself is focused. ### Hover diff --git a/docs/core/testing/api.md b/docs/core/testing/api.md index f3fea6d524a..ecee62b7e6a 100644 --- a/docs/core/testing/api.md +++ b/docs/core/testing/api.md @@ -174,6 +174,19 @@ configs().forEach(({ config, title }) => { }); ``` +#### `spyOnEvent` with Locators + +Locators have been updated with a `spyOnEvent` method which allows you to listen for an event on the element that the locator matches. Note that Playwright does not support changing the type of an existing fixture, so Locators that use `spyOnEvent` need to be manually cast as `E2ELocator`: + +```typescript +import type { E2ELocator } from '@utils/test/playwright'; + +... + +const alert = page.locator('ion-alert') as E2ELocator; +const ionAlertDidPresent = await alert.spyOnEvent('ionAlertDidPresent'); +``` + ### Using `setIonViewport` `setIonViewport` is only needed when a) you are using `ion-content` and b) you need to take a screenshot of the full page (including content that may overflow offscreen). diff --git a/core/src/utils/test/playwright/docs/assets/vscode-wsl.png b/docs/core/testing/assets/vscode-wsl.png similarity index 100% rename from core/src/utils/test/playwright/docs/assets/vscode-wsl.png rename to docs/core/testing/assets/vscode-wsl.png diff --git a/lerna.json b/lerna.json index a83d3d75754..31276bec822 100644 --- a/lerna.json +++ b/lerna.json @@ -3,5 +3,5 @@ "core", "packages/*" ], - "version": "8.0.1" + "version": "8.0.2" } diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md index 6f2006a2af9..518cc13cadc 100644 --- a/packages/angular-server/CHANGELOG.md +++ b/packages/angular-server/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [8.0.2](https://github.com/ionic-team/ionic-framework/compare/v8.0.1...v8.0.2) (2024-05-01) + +**Note:** Version bump only for package @ionic/angular-server + + + + + ## [8.0.1](https://github.com/ionic-team/ionic-framework/compare/v8.0.0...v8.0.1) (2024-04-24) **Note:** Version bump only for package @ionic/angular-server diff --git a/packages/angular-server/package-lock.json b/packages/angular-server/package-lock.json index 5c425935b39..e475bea0f96 100644 --- a/packages/angular-server/package-lock.json +++ b/packages/angular-server/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/angular-server", - "version": "8.0.1", + "version": "8.0.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/angular-server", - "version": "8.0.1", + "version": "8.0.2", "license": "MIT", "dependencies": { - "@ionic/core": "^8.0.1" + "@ionic/core": "^8.0.2" }, "devDependencies": { "@angular-eslint/eslint-plugin": "^16.0.0", @@ -1119,11 +1119,11 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.1.tgz", - "integrity": "sha512-6FEa0kSXSs82aCYcB7JcLGt5Z0XBU8mRFQGVrJtdh3ybQQntIAWKHc9H2OFaiT3SSAK+XQqlU6kq0jM9nWKveQ==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.2.tgz", + "integrity": "sha512-fY8ThzRgXXCjszVjIzLEzmlMSyfqoMWF7DxO9mOO4TrFObzDZ5SWGn3mU2wacqXO0iO2hik3V2O0rfLEWzvaug==", "dependencies": { - "@stencil/core": "^4.17.1", + "@stencil/core": "^4.17.2", "ionicons": "^7.2.2", "tslib": "^2.1.0" } @@ -1628,9 +1628,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.17.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.1.tgz", - "integrity": "sha512-nlARe1QtK5abnCG8kPQKJMWiELg39vKabvf3ebm6YEhQA35CgrxC1pVYTsYq3yktJKoY+k+VzGRnATLKyaLbvA==", + "version": "4.17.2", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.2.tgz", + "integrity": "sha512-MX7yaLmpTU9iZvCire9nhecTcE0qBlV0vPWrLMeIXewYN7/hb8B3NjnhQyBKC93FDPI8NBRmt6KIugLw9zcRZg==", "bin": { "stencil": "bin/stencil" }, @@ -7011,11 +7011,11 @@ "dev": true }, "@ionic/core": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.1.tgz", - "integrity": "sha512-6FEa0kSXSs82aCYcB7JcLGt5Z0XBU8mRFQGVrJtdh3ybQQntIAWKHc9H2OFaiT3SSAK+XQqlU6kq0jM9nWKveQ==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.2.tgz", + "integrity": "sha512-fY8ThzRgXXCjszVjIzLEzmlMSyfqoMWF7DxO9mOO4TrFObzDZ5SWGn3mU2wacqXO0iO2hik3V2O0rfLEWzvaug==", "requires": { - "@stencil/core": "^4.17.1", + "@stencil/core": "^4.17.2", "ionicons": "^7.2.2", "tslib": "^2.1.0" } @@ -7322,9 +7322,9 @@ } }, "@stencil/core": { - "version": "4.17.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.1.tgz", - "integrity": "sha512-nlARe1QtK5abnCG8kPQKJMWiELg39vKabvf3ebm6YEhQA35CgrxC1pVYTsYq3yktJKoY+k+VzGRnATLKyaLbvA==" + "version": "4.17.2", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.2.tgz", + "integrity": "sha512-MX7yaLmpTU9iZvCire9nhecTcE0qBlV0vPWrLMeIXewYN7/hb8B3NjnhQyBKC93FDPI8NBRmt6KIugLw9zcRZg==" }, "@types/estree": { "version": "1.0.5", diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json index ec5539523f0..89b049f0785 100644 --- a/packages/angular-server/package.json +++ b/packages/angular-server/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/angular-server", - "version": "8.0.1", + "version": "8.0.2", "description": "Angular SSR Module for Ionic", "keywords": [ "ionic", @@ -62,6 +62,6 @@ }, "prettier": "@ionic/prettier-config", "dependencies": { - "@ionic/core": "^8.0.1" + "@ionic/core": "^8.0.2" } } diff --git a/packages/angular/CHANGELOG.md b/packages/angular/CHANGELOG.md index 8a0f45625db..526d1d78053 100644 --- a/packages/angular/CHANGELOG.md +++ b/packages/angular/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [8.0.2](https://github.com/ionic-team/ionic-framework/compare/v8.0.1...v8.0.2) (2024-05-01) + +**Note:** Version bump only for package @ionic/angular + + + + + ## [8.0.1](https://github.com/ionic-team/ionic-framework/compare/v8.0.0...v8.0.1) (2024-04-24) **Note:** Version bump only for package @ionic/angular diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json index 7a38332a6c8..fa6e054237a 100644 --- a/packages/angular/package-lock.json +++ b/packages/angular/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/angular", - "version": "8.0.1", + "version": "8.0.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/angular", - "version": "8.0.1", + "version": "8.0.2", "license": "MIT", "dependencies": { - "@ionic/core": "^8.0.1", + "@ionic/core": "^8.0.2", "ionicons": "^7.0.0", "jsonc-parser": "^3.0.0", "tslib": "^2.3.0" @@ -1398,11 +1398,11 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.1.tgz", - "integrity": "sha512-6FEa0kSXSs82aCYcB7JcLGt5Z0XBU8mRFQGVrJtdh3ybQQntIAWKHc9H2OFaiT3SSAK+XQqlU6kq0jM9nWKveQ==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.2.tgz", + "integrity": "sha512-fY8ThzRgXXCjszVjIzLEzmlMSyfqoMWF7DxO9mOO4TrFObzDZ5SWGn3mU2wacqXO0iO2hik3V2O0rfLEWzvaug==", "dependencies": { - "@stencil/core": "^4.17.1", + "@stencil/core": "^4.17.2", "ionicons": "^7.2.2", "tslib": "^2.1.0" } @@ -2203,9 +2203,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.17.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.1.tgz", - "integrity": "sha512-nlARe1QtK5abnCG8kPQKJMWiELg39vKabvf3ebm6YEhQA35CgrxC1pVYTsYq3yktJKoY+k+VzGRnATLKyaLbvA==", + "version": "4.17.2", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.2.tgz", + "integrity": "sha512-MX7yaLmpTU9iZvCire9nhecTcE0qBlV0vPWrLMeIXewYN7/hb8B3NjnhQyBKC93FDPI8NBRmt6KIugLw9zcRZg==", "bin": { "stencil": "bin/stencil" }, @@ -9820,11 +9820,11 @@ "dev": true }, "@ionic/core": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.1.tgz", - "integrity": "sha512-6FEa0kSXSs82aCYcB7JcLGt5Z0XBU8mRFQGVrJtdh3ybQQntIAWKHc9H2OFaiT3SSAK+XQqlU6kq0jM9nWKveQ==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.2.tgz", + "integrity": "sha512-fY8ThzRgXXCjszVjIzLEzmlMSyfqoMWF7DxO9mOO4TrFObzDZ5SWGn3mU2wacqXO0iO2hik3V2O0rfLEWzvaug==", "requires": { - "@stencil/core": "^4.17.1", + "@stencil/core": "^4.17.2", "ionicons": "^7.2.2", "tslib": "^2.1.0" } @@ -10375,9 +10375,9 @@ } }, "@stencil/core": { - "version": "4.17.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.1.tgz", - "integrity": "sha512-nlARe1QtK5abnCG8kPQKJMWiELg39vKabvf3ebm6YEhQA35CgrxC1pVYTsYq3yktJKoY+k+VzGRnATLKyaLbvA==" + "version": "4.17.2", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.2.tgz", + "integrity": "sha512-MX7yaLmpTU9iZvCire9nhecTcE0qBlV0vPWrLMeIXewYN7/hb8B3NjnhQyBKC93FDPI8NBRmt6KIugLw9zcRZg==" }, "@tootallnate/once": { "version": "2.0.0", diff --git a/packages/angular/package.json b/packages/angular/package.json index 59579bd9eb4..138926bb887 100644 --- a/packages/angular/package.json +++ b/packages/angular/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/angular", - "version": "8.0.1", + "version": "8.0.2", "description": "Angular specific wrappers for @ionic/core", "keywords": [ "ionic", @@ -47,7 +47,7 @@ } }, "dependencies": { - "@ionic/core": "^8.0.1", + "@ionic/core": "^8.0.2", "ionicons": "^7.0.0", "jsonc-parser": "^3.0.0", "tslib": "^2.3.0" diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index 8253b0876f2..868acb5fea9 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -53,10 +53,9 @@ import type { AccordionGroupChangeEventDetail as IIonAccordionGroupAccordionGrou export declare interface IonAccordionGroup extends Components.IonAccordionGroup { /** - * Emitted when the value property has changed -as a result of a user action such as a click. -This event will not emit when programmatically setting -the value property. + * Emitted when the value property has changed as a result of a user action such as a click. + +This event will not emit when programmatically setting the `value` property. */ ionChange: EventEmitter>; } @@ -530,10 +529,9 @@ import type { CheckboxChangeEventDetail as IIonCheckboxCheckboxChangeEventDetail export declare interface IonCheckbox extends Components.IonCheckbox { /** - * Emitted when the checked property has changed -as a result of a user action such as a click. -This event will not emit when programmatically -setting the checked property. + * Emitted when the checked property has changed as a result of a user action such as a click. + +This event will not emit when programmatically setting the `checked` property. */ ionChange: EventEmitter>; /** @@ -664,6 +662,8 @@ export declare interface IonDatetime extends Components.IonDatetime { ionCancel: EventEmitter>; /** * Emitted when the value (selected date) has changed. + +This event will not emit when programmatically setting the `value` property. */ ionChange: EventEmitter>; /** @@ -1001,6 +1001,8 @@ event fires at a different moment: from a date picker for ``, pressing the "Enter" key, etc.). - When the element loses focus after its value has changed: for elements where the user's interaction is typing. + +This event will not emit when programmatically setting the `value` property. */ ionChange: EventEmitter>; /** @@ -1487,6 +1489,8 @@ import type { PickerColumnChangeEventDetail as IIonPickerColumnPickerColumnChang export declare interface IonPickerColumn extends Components.IonPickerColumn { /** * Emitted when the value has changed. + +This event will not emit when programmatically setting the `value` property. */ ionChange: EventEmitter>; } @@ -1656,6 +1660,8 @@ import type { RadioGroupChangeEventDetail as IIonRadioGroupRadioGroupChangeEvent export declare interface IonRadioGroup extends Components.IonRadioGroup { /** * Emitted when the value has changed. + +This event will not emit when programmatically setting the `value` property. */ ionChange: EventEmitter>; } @@ -1692,7 +1698,7 @@ modifies the element's value: - When the user releases the knob after dragging; - When the user moves the knob with keyboard arrows -`ionChange` is not fired when the value is changed programmatically. +This event will not emit when programmatically setting the `value` property. */ ionChange: EventEmitter>; /** @@ -1922,6 +1928,8 @@ The `ionChange` event is fired when the value has been committed by the user. This can happen when the element loses focus or when the "Enter" key is pressed. `ionChange` can also fire when clicking the clear or cancel buttons. + +This event will not emit when programmatically setting the `value` property. */ ionChange: EventEmitter>; /** @@ -1967,8 +1975,9 @@ import type { SegmentChangeEventDetail as IIonSegmentSegmentChangeEventDetail } export declare interface IonSegment extends Components.IonSegment { /** - * Emitted when the value property has changed and any -dragging pointer has been released from `ion-segment`. + * Emitted when the value property has changed and any dragging pointer has been released from `ion-segment`. + +This event will not emit when programmatically setting the `value` property. */ ionChange: EventEmitter>; } @@ -2022,6 +2031,8 @@ import type { SelectChangeEventDetail as IIonSelectSelectChangeEventDetail } fro export declare interface IonSelect extends Components.IonSelect { /** * Emitted when the value has changed. + +This event will not emit when programmatically setting the `value` property. */ ionChange: EventEmitter>; /** @@ -2232,6 +2243,8 @@ export declare interface IonTextarea extends Components.IonTextarea { * The `ionChange` event is fired when the user modifies the textarea's value. Unlike the `ionInput` event, the `ionChange` event is fired when the element loses focus after its value has been modified. + +This event will not emit when programmatically setting the `value` property. */ ionChange: EventEmitter>; /** @@ -2384,8 +2397,9 @@ import type { ToggleChangeEventDetail as IIonToggleToggleChangeEventDetail } fro export declare interface IonToggle extends Components.IonToggle { /** - * Emitted when the user switches the toggle on or off. Does not emit -when programmatically changing the value of the `checked` property. + * Emitted when the user switches the toggle on or off. + +This event will not emit when programmatically setting the `checked` property. */ ionChange: EventEmitter>; /** diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts index c319aa55271..4f428def603 100644 --- a/packages/angular/standalone/src/directives/proxies.ts +++ b/packages/angular/standalone/src/directives/proxies.ts @@ -126,10 +126,9 @@ import type { AccordionGroupChangeEventDetail as IIonAccordionGroupAccordionGrou export declare interface IonAccordionGroup extends Components.IonAccordionGroup { /** - * Emitted when the value property has changed -as a result of a user action such as a click. -This event will not emit when programmatically setting -the value property. + * Emitted when the value property has changed as a result of a user action such as a click. + +This event will not emit when programmatically setting the `value` property. */ ionChange: EventEmitter>; } @@ -1486,6 +1485,8 @@ import type { PickerColumnChangeEventDetail as IIonPickerColumnPickerColumnChang export declare interface IonPickerColumn extends Components.IonPickerColumn { /** * Emitted when the value has changed. + +This event will not emit when programmatically setting the `value` property. */ ionChange: EventEmitter>; } diff --git a/packages/docs/CHANGELOG.md b/packages/docs/CHANGELOG.md index 741e093784b..3d45605e1ff 100644 --- a/packages/docs/CHANGELOG.md +++ b/packages/docs/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [8.0.2](https://github.com/ionic-team/ionic-framework/compare/v8.0.1...v8.0.2) (2024-05-01) + +**Note:** Version bump only for package @ionic/docs + + + + + ## [8.0.1](https://github.com/ionic-team/ionic-framework/compare/v8.0.0...v8.0.1) (2024-04-24) **Note:** Version bump only for package @ionic/docs diff --git a/packages/docs/package-lock.json b/packages/docs/package-lock.json index 414830a533e..c103caf51c7 100644 --- a/packages/docs/package-lock.json +++ b/packages/docs/package-lock.json @@ -1,12 +1,12 @@ { "name": "@ionic/docs", - "version": "8.0.1", + "version": "8.0.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/docs", - "version": "8.0.1", + "version": "8.0.2", "license": "MIT" } } diff --git a/packages/docs/package.json b/packages/docs/package.json index 41d4adee01e..7569f7c74c1 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/docs", - "version": "8.0.1", + "version": "8.0.2", "description": "Pre-packaged API documentation for the Ionic docs.", "main": "core.json", "types": "core.d.ts", diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md index 4933770c8dc..812311eced8 100644 --- a/packages/react-router/CHANGELOG.md +++ b/packages/react-router/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [8.0.2](https://github.com/ionic-team/ionic-framework/compare/v8.0.1...v8.0.2) (2024-05-01) + +**Note:** Version bump only for package @ionic/react-router + + + + + ## [8.0.1](https://github.com/ionic-team/ionic-framework/compare/v8.0.0...v8.0.1) (2024-04-24) **Note:** Version bump only for package @ionic/react-router diff --git a/packages/react-router/package-lock.json b/packages/react-router/package-lock.json index 9e310005ac7..c5c8ce36501 100644 --- a/packages/react-router/package-lock.json +++ b/packages/react-router/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/react-router", - "version": "8.0.1", + "version": "8.0.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/react-router", - "version": "8.0.1", + "version": "8.0.2", "license": "MIT", "dependencies": { - "@ionic/react": "^8.0.1", + "@ionic/react": "^8.0.2", "tslib": "*" }, "devDependencies": { @@ -238,11 +238,11 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.1.tgz", - "integrity": "sha512-6FEa0kSXSs82aCYcB7JcLGt5Z0XBU8mRFQGVrJtdh3ybQQntIAWKHc9H2OFaiT3SSAK+XQqlU6kq0jM9nWKveQ==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.2.tgz", + "integrity": "sha512-fY8ThzRgXXCjszVjIzLEzmlMSyfqoMWF7DxO9mOO4TrFObzDZ5SWGn3mU2wacqXO0iO2hik3V2O0rfLEWzvaug==", "dependencies": { - "@stencil/core": "^4.17.1", + "@stencil/core": "^4.17.2", "ionicons": "^7.2.2", "tslib": "^2.1.0" } @@ -414,11 +414,11 @@ } }, "node_modules/@ionic/react": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.0.1.tgz", - "integrity": "sha512-5AtrqzEk5lnr4ztm4PDnjXs8OhknGVSclCxef1InmhE2EMSFrIV8SZOdV+fCMinKSUcAatxss4uGGGChcXFcSQ==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.0.2.tgz", + "integrity": "sha512-NPZYRrXgP+gZcdheBlpNvFB4pkFDZJL0sdbCBU71Eu2Btz0O0xzxDV4N91Y5eMjGVCoNcJLKWqnwoDJm+vg6pw==", "dependencies": { - "@ionic/core": "8.0.1", + "@ionic/core": "8.0.2", "ionicons": "^7.0.0", "tslib": "*" }, @@ -667,9 +667,9 @@ ] }, "node_modules/@stencil/core": { - "version": "4.17.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.1.tgz", - "integrity": "sha512-nlARe1QtK5abnCG8kPQKJMWiELg39vKabvf3ebm6YEhQA35CgrxC1pVYTsYq3yktJKoY+k+VzGRnATLKyaLbvA==", + "version": "4.17.2", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.2.tgz", + "integrity": "sha512-MX7yaLmpTU9iZvCire9nhecTcE0qBlV0vPWrLMeIXewYN7/hb8B3NjnhQyBKC93FDPI8NBRmt6KIugLw9zcRZg==", "bin": { "stencil": "bin/stencil" }, @@ -4057,11 +4057,11 @@ "dev": true }, "@ionic/core": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.1.tgz", - "integrity": "sha512-6FEa0kSXSs82aCYcB7JcLGt5Z0XBU8mRFQGVrJtdh3ybQQntIAWKHc9H2OFaiT3SSAK+XQqlU6kq0jM9nWKveQ==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.2.tgz", + "integrity": "sha512-fY8ThzRgXXCjszVjIzLEzmlMSyfqoMWF7DxO9mOO4TrFObzDZ5SWGn3mU2wacqXO0iO2hik3V2O0rfLEWzvaug==", "requires": { - "@stencil/core": "^4.17.1", + "@stencil/core": "^4.17.2", "ionicons": "^7.2.2", "tslib": "^2.1.0" } @@ -4163,11 +4163,11 @@ "requires": {} }, "@ionic/react": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.0.1.tgz", - "integrity": "sha512-5AtrqzEk5lnr4ztm4PDnjXs8OhknGVSclCxef1InmhE2EMSFrIV8SZOdV+fCMinKSUcAatxss4uGGGChcXFcSQ==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.0.2.tgz", + "integrity": "sha512-NPZYRrXgP+gZcdheBlpNvFB4pkFDZJL0sdbCBU71Eu2Btz0O0xzxDV4N91Y5eMjGVCoNcJLKWqnwoDJm+vg6pw==", "requires": { - "@ionic/core": "8.0.1", + "@ionic/core": "8.0.2", "ionicons": "^7.0.0", "tslib": "*" } @@ -4304,9 +4304,9 @@ "optional": true }, "@stencil/core": { - "version": "4.17.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.1.tgz", - "integrity": "sha512-nlARe1QtK5abnCG8kPQKJMWiELg39vKabvf3ebm6YEhQA35CgrxC1pVYTsYq3yktJKoY+k+VzGRnATLKyaLbvA==" + "version": "4.17.2", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.2.tgz", + "integrity": "sha512-MX7yaLmpTU9iZvCire9nhecTcE0qBlV0vPWrLMeIXewYN7/hb8B3NjnhQyBKC93FDPI8NBRmt6KIugLw9zcRZg==" }, "@types/estree": { "version": "1.0.4", diff --git a/packages/react-router/package.json b/packages/react-router/package.json index 8e34cd178ce..076b9b81847 100644 --- a/packages/react-router/package.json +++ b/packages/react-router/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/react-router", - "version": "8.0.1", + "version": "8.0.2", "description": "React Router wrapper for @ionic/react", "keywords": [ "ionic", @@ -36,7 +36,7 @@ "dist/" ], "dependencies": { - "@ionic/react": "^8.0.1", + "@ionic/react": "^8.0.2", "tslib": "*" }, "peerDependencies": { diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index fd560e3bf42..08068bce590 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [8.0.2](https://github.com/ionic-team/ionic-framework/compare/v8.0.1...v8.0.2) (2024-05-01) + +**Note:** Version bump only for package @ionic/react + + + + + ## [8.0.1](https://github.com/ionic-team/ionic-framework/compare/v8.0.0...v8.0.1) (2024-04-24) **Note:** Version bump only for package @ionic/react diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json index cf3de79fc82..fb7680e1c11 100644 --- a/packages/react/package-lock.json +++ b/packages/react/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/react", - "version": "8.0.1", + "version": "8.0.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/react", - "version": "8.0.1", + "version": "8.0.2", "license": "MIT", "dependencies": { - "@ionic/core": "^8.0.1", + "@ionic/core": "^8.0.2", "ionicons": "^7.0.0", "tslib": "*" }, @@ -798,11 +798,11 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.1.tgz", - "integrity": "sha512-6FEa0kSXSs82aCYcB7JcLGt5Z0XBU8mRFQGVrJtdh3ybQQntIAWKHc9H2OFaiT3SSAK+XQqlU6kq0jM9nWKveQ==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.2.tgz", + "integrity": "sha512-fY8ThzRgXXCjszVjIzLEzmlMSyfqoMWF7DxO9mOO4TrFObzDZ5SWGn3mU2wacqXO0iO2hik3V2O0rfLEWzvaug==", "dependencies": { - "@stencil/core": "^4.17.1", + "@stencil/core": "^4.17.2", "ionicons": "^7.2.2", "tslib": "^2.1.0" } @@ -1661,9 +1661,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.17.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.1.tgz", - "integrity": "sha512-nlARe1QtK5abnCG8kPQKJMWiELg39vKabvf3ebm6YEhQA35CgrxC1pVYTsYq3yktJKoY+k+VzGRnATLKyaLbvA==", + "version": "4.17.2", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.2.tgz", + "integrity": "sha512-MX7yaLmpTU9iZvCire9nhecTcE0qBlV0vPWrLMeIXewYN7/hb8B3NjnhQyBKC93FDPI8NBRmt6KIugLw9zcRZg==", "bin": { "stencil": "bin/stencil" }, @@ -13035,11 +13035,11 @@ "dev": true }, "@ionic/core": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.1.tgz", - "integrity": "sha512-6FEa0kSXSs82aCYcB7JcLGt5Z0XBU8mRFQGVrJtdh3ybQQntIAWKHc9H2OFaiT3SSAK+XQqlU6kq0jM9nWKveQ==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.2.tgz", + "integrity": "sha512-fY8ThzRgXXCjszVjIzLEzmlMSyfqoMWF7DxO9mOO4TrFObzDZ5SWGn3mU2wacqXO0iO2hik3V2O0rfLEWzvaug==", "requires": { - "@stencil/core": "^4.17.1", + "@stencil/core": "^4.17.2", "ionicons": "^7.2.2", "tslib": "^2.1.0" } @@ -13631,9 +13631,9 @@ } }, "@stencil/core": { - "version": "4.17.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.1.tgz", - "integrity": "sha512-nlARe1QtK5abnCG8kPQKJMWiELg39vKabvf3ebm6YEhQA35CgrxC1pVYTsYq3yktJKoY+k+VzGRnATLKyaLbvA==" + "version": "4.17.2", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.2.tgz", + "integrity": "sha512-MX7yaLmpTU9iZvCire9nhecTcE0qBlV0vPWrLMeIXewYN7/hb8B3NjnhQyBKC93FDPI8NBRmt6KIugLw9zcRZg==" }, "@szmarczak/http-timer": { "version": "4.0.6", diff --git a/packages/react/package.json b/packages/react/package.json index c73a53fe36f..062a193f2e0 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/react", - "version": "8.0.1", + "version": "8.0.2", "description": "React specific wrapper for @ionic/core", "keywords": [ "ionic", @@ -39,7 +39,7 @@ "css/" ], "dependencies": { - "@ionic/core": "^8.0.1", + "@ionic/core": "^8.0.2", "ionicons": "^7.0.0", "tslib": "*" }, diff --git a/packages/vue-router/CHANGELOG.md b/packages/vue-router/CHANGELOG.md index 6b74a7141fc..1816732d250 100644 --- a/packages/vue-router/CHANGELOG.md +++ b/packages/vue-router/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [8.0.2](https://github.com/ionic-team/ionic-framework/compare/v8.0.1...v8.0.2) (2024-05-01) + +**Note:** Version bump only for package @ionic/vue-router + + + + + ## [8.0.1](https://github.com/ionic-team/ionic-framework/compare/v8.0.0...v8.0.1) (2024-04-24) **Note:** Version bump only for package @ionic/vue-router diff --git a/packages/vue-router/package-lock.json b/packages/vue-router/package-lock.json index 2bbe138bb05..3c73b224a15 100644 --- a/packages/vue-router/package-lock.json +++ b/packages/vue-router/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/vue-router", - "version": "8.0.1", + "version": "8.0.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/vue-router", - "version": "8.0.1", + "version": "8.0.2", "license": "MIT", "dependencies": { - "@ionic/vue": "^8.0.1" + "@ionic/vue": "^8.0.2" }, "devDependencies": { "@ionic/eslint-config": "^0.3.0", @@ -661,11 +661,11 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.1.tgz", - "integrity": "sha512-6FEa0kSXSs82aCYcB7JcLGt5Z0XBU8mRFQGVrJtdh3ybQQntIAWKHc9H2OFaiT3SSAK+XQqlU6kq0jM9nWKveQ==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.2.tgz", + "integrity": "sha512-fY8ThzRgXXCjszVjIzLEzmlMSyfqoMWF7DxO9mOO4TrFObzDZ5SWGn3mU2wacqXO0iO2hik3V2O0rfLEWzvaug==", "dependencies": { - "@stencil/core": "^4.17.1", + "@stencil/core": "^4.17.2", "ionicons": "^7.2.2", "tslib": "^2.1.0" } @@ -852,11 +852,11 @@ } }, "node_modules/@ionic/vue": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.0.1.tgz", - "integrity": "sha512-BRP5ig5AfazmuVHJfpnd8FmlNIZZEkF/bn6iqm0nIyvtsd4nweSYCgZEjClrHU2eKK0I/xCIaPnatHt/NLMM5A==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.0.2.tgz", + "integrity": "sha512-la9KtOXFVUUXB3NPh7HVaPSiMDifBePS+4wE8B4U8C969frYFKaw6QeaiRtwlPGwSctL2IrrvzVd3uAvepJxpg==", "dependencies": { - "@ionic/core": "8.0.1", + "@ionic/core": "8.0.2", "ionicons": "^7.0.0" } }, @@ -1508,9 +1508,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.17.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.1.tgz", - "integrity": "sha512-nlARe1QtK5abnCG8kPQKJMWiELg39vKabvf3ebm6YEhQA35CgrxC1pVYTsYq3yktJKoY+k+VzGRnATLKyaLbvA==", + "version": "4.17.2", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.2.tgz", + "integrity": "sha512-MX7yaLmpTU9iZvCire9nhecTcE0qBlV0vPWrLMeIXewYN7/hb8B3NjnhQyBKC93FDPI8NBRmt6KIugLw9zcRZg==", "bin": { "stencil": "bin/stencil" }, @@ -7878,11 +7878,11 @@ "dev": true }, "@ionic/core": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.1.tgz", - "integrity": "sha512-6FEa0kSXSs82aCYcB7JcLGt5Z0XBU8mRFQGVrJtdh3ybQQntIAWKHc9H2OFaiT3SSAK+XQqlU6kq0jM9nWKveQ==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.2.tgz", + "integrity": "sha512-fY8ThzRgXXCjszVjIzLEzmlMSyfqoMWF7DxO9mOO4TrFObzDZ5SWGn3mU2wacqXO0iO2hik3V2O0rfLEWzvaug==", "requires": { - "@stencil/core": "^4.17.1", + "@stencil/core": "^4.17.2", "ionicons": "^7.2.2", "tslib": "^2.1.0" } @@ -7993,11 +7993,11 @@ "requires": {} }, "@ionic/vue": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.0.1.tgz", - "integrity": "sha512-BRP5ig5AfazmuVHJfpnd8FmlNIZZEkF/bn6iqm0nIyvtsd4nweSYCgZEjClrHU2eKK0I/xCIaPnatHt/NLMM5A==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.0.2.tgz", + "integrity": "sha512-la9KtOXFVUUXB3NPh7HVaPSiMDifBePS+4wE8B4U8C969frYFKaw6QeaiRtwlPGwSctL2IrrvzVd3uAvepJxpg==", "requires": { - "@ionic/core": "8.0.1", + "@ionic/core": "8.0.2", "ionicons": "^7.0.0" } }, @@ -8461,9 +8461,9 @@ } }, "@stencil/core": { - "version": "4.17.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.1.tgz", - "integrity": "sha512-nlARe1QtK5abnCG8kPQKJMWiELg39vKabvf3ebm6YEhQA35CgrxC1pVYTsYq3yktJKoY+k+VzGRnATLKyaLbvA==" + "version": "4.17.2", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.2.tgz", + "integrity": "sha512-MX7yaLmpTU9iZvCire9nhecTcE0qBlV0vPWrLMeIXewYN7/hb8B3NjnhQyBKC93FDPI8NBRmt6KIugLw9zcRZg==" }, "@tootallnate/once": { "version": "2.0.0", diff --git a/packages/vue-router/package.json b/packages/vue-router/package.json index a29095427f9..ca28c9c480a 100644 --- a/packages/vue-router/package.json +++ b/packages/vue-router/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/vue-router", - "version": "8.0.1", + "version": "8.0.2", "description": "Vue Router integration for @ionic/vue", "scripts": { "test.spec": "jest", @@ -44,7 +44,7 @@ }, "homepage": "https://github.com/ionic-team/ionic#readme", "dependencies": { - "@ionic/vue": "^8.0.1" + "@ionic/vue": "^8.0.2" }, "devDependencies": { "@ionic/eslint-config": "^0.3.0", diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md index f34492dac39..26d6326e673 100644 --- a/packages/vue/CHANGELOG.md +++ b/packages/vue/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [8.0.2](https://github.com/ionic-team/ionic-framework/compare/v8.0.1...v8.0.2) (2024-05-01) + +**Note:** Version bump only for package @ionic/vue + + + + + ## [8.0.1](https://github.com/ionic-team/ionic-framework/compare/v8.0.0...v8.0.1) (2024-04-24) **Note:** Version bump only for package @ionic/vue diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json index b74b09a95c1..eb1534bbdd9 100644 --- a/packages/vue/package-lock.json +++ b/packages/vue/package-lock.json @@ -1,15 +1,15 @@ { "name": "@ionic/vue", - "version": "8.0.1", + "version": "8.0.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@ionic/vue", - "version": "8.0.1", + "version": "8.0.2", "license": "MIT", "dependencies": { - "@ionic/core": "^8.0.1", + "@ionic/core": "^8.0.2", "ionicons": "^7.0.0" }, "devDependencies": { @@ -208,11 +208,11 @@ "dev": true }, "node_modules/@ionic/core": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.1.tgz", - "integrity": "sha512-6FEa0kSXSs82aCYcB7JcLGt5Z0XBU8mRFQGVrJtdh3ybQQntIAWKHc9H2OFaiT3SSAK+XQqlU6kq0jM9nWKveQ==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.2.tgz", + "integrity": "sha512-fY8ThzRgXXCjszVjIzLEzmlMSyfqoMWF7DxO9mOO4TrFObzDZ5SWGn3mU2wacqXO0iO2hik3V2O0rfLEWzvaug==", "dependencies": { - "@stencil/core": "^4.17.1", + "@stencil/core": "^4.17.2", "ionicons": "^7.2.2", "tslib": "^2.1.0" } @@ -628,9 +628,9 @@ ] }, "node_modules/@stencil/core": { - "version": "4.17.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.1.tgz", - "integrity": "sha512-nlARe1QtK5abnCG8kPQKJMWiELg39vKabvf3ebm6YEhQA35CgrxC1pVYTsYq3yktJKoY+k+VzGRnATLKyaLbvA==", + "version": "4.17.2", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.2.tgz", + "integrity": "sha512-MX7yaLmpTU9iZvCire9nhecTcE0qBlV0vPWrLMeIXewYN7/hb8B3NjnhQyBKC93FDPI8NBRmt6KIugLw9zcRZg==", "bin": { "stencil": "bin/stencil" }, @@ -3959,11 +3959,11 @@ "dev": true }, "@ionic/core": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.1.tgz", - "integrity": "sha512-6FEa0kSXSs82aCYcB7JcLGt5Z0XBU8mRFQGVrJtdh3ybQQntIAWKHc9H2OFaiT3SSAK+XQqlU6kq0jM9nWKveQ==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.0.2.tgz", + "integrity": "sha512-fY8ThzRgXXCjszVjIzLEzmlMSyfqoMWF7DxO9mOO4TrFObzDZ5SWGn3mU2wacqXO0iO2hik3V2O0rfLEWzvaug==", "requires": { - "@stencil/core": "^4.17.1", + "@stencil/core": "^4.17.2", "ionicons": "^7.2.2", "tslib": "^2.1.0" }, @@ -4203,9 +4203,9 @@ "optional": true }, "@stencil/core": { - "version": "4.17.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.1.tgz", - "integrity": "sha512-nlARe1QtK5abnCG8kPQKJMWiELg39vKabvf3ebm6YEhQA35CgrxC1pVYTsYq3yktJKoY+k+VzGRnATLKyaLbvA==" + "version": "4.17.2", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.2.tgz", + "integrity": "sha512-MX7yaLmpTU9iZvCire9nhecTcE0qBlV0vPWrLMeIXewYN7/hb8B3NjnhQyBKC93FDPI8NBRmt6KIugLw9zcRZg==" }, "@types/estree": { "version": "1.0.4", diff --git a/packages/vue/package.json b/packages/vue/package.json index a440999a282..9a35898e6b9 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -1,6 +1,6 @@ { "name": "@ionic/vue", - "version": "8.0.1", + "version": "8.0.2", "description": "Vue specific wrapper for @ionic/core", "scripts": { "eslint": "eslint src", @@ -66,7 +66,7 @@ "vue-router": "^4.0.16" }, "dependencies": { - "@ionic/core": "^8.0.1", + "@ionic/core": "^8.0.2", "ionicons": "^7.0.0" }, "vetur": {