mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
Compare commits
23 Commits
datetime-r
...
v8.0.2
| Author | SHA1 | Date | |
|---|---|---|---|
|
101b50e14c | ||
|
|
a01c3d49bb | ||
|
|
bd8d065e1a | ||
|
|
4d09890d69 | ||
|
|
aebf69464d | ||
|
|
4f035ff5e5 | ||
|
|
f15b62a9ca | ||
|
|
fa85f030cf | ||
|
|
c4b98ff769 | ||
|
|
ca01fe807f | ||
|
|
6e8bf4914f | ||
|
|
0873dc2ffb | ||
|
|
dc1172a841 | ||
|
|
e60890c483 | ||
|
|
6fd4b50697 | ||
|
|
fa60838702 | ||
|
|
b76debe7ea | ||
|
|
ee49824a84 | ||
|
|
23321f7ab2 | ||
|
|
3a10821217 | ||
|
|
e8e5c4e1b6 | ||
|
|
2fc81ddc9b | ||
|
|
5dcf5748c6 |
2
.github/ISSUE_TEMPLATE/bug_report.yml
vendored
2
.github/ISSUE_TEMPLATE/bug_report.yml
vendored
@@ -23,7 +23,7 @@ body:
|
||||
description: Which version(s) of Ionic Framework does this issue impact? [Ionic Framework 1.x to 6.x are no longer supported](https://ionicframework.com/docs/reference/support#framework-maintenance-and-support-status). For extended support, considering visiting [Ionic's Enterprise offering](https://ionic.io/enterprise).
|
||||
options:
|
||||
- v7.x
|
||||
- v8.x (Beta)
|
||||
- v8.x
|
||||
- Nightly
|
||||
multiple: true
|
||||
validations:
|
||||
|
||||
2
.github/workflows/release.yml
vendored
2
.github/workflows/release.yml
vendored
@@ -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".
|
||||
|
||||
26
CHANGELOG.md
26
CHANGELOG.md
@@ -3,6 +3,32 @@
|
||||
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)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **input:** clear button can be navigated using screen reader ([#29366](https://github.com/ionic-team/ionic-framework/issues/29366)) ([ee49824](https://github.com/ionic-team/ionic-framework/commit/ee49824a84df7a7b002f41dab7b935fbcdb64946)), closes [#29358](https://github.com/ionic-team/ionic-framework/issues/29358)
|
||||
* **input:** debounce is set with binding syntax in angular on load ([#29377](https://github.com/ionic-team/ionic-framework/issues/29377)) ([23321f7](https://github.com/ionic-team/ionic-framework/commit/23321f7ab2a242c3c4193fd6cece3f1c7c0034ef)), closes [#29374](https://github.com/ionic-team/ionic-framework/issues/29374)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [8.0.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-rc.2...v8.0.0) (2024-04-17)
|
||||
|
||||
**Note:** Version bump only for package ionic-framework
|
||||
|
||||
@@ -3,6 +3,32 @@
|
||||
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)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **input:** clear button can be navigated using screen reader ([#29366](https://github.com/ionic-team/ionic-framework/issues/29366)) ([ee49824](https://github.com/ionic-team/ionic-framework/commit/ee49824a84df7a7b002f41dab7b935fbcdb64946)), closes [#29358](https://github.com/ionic-team/ionic-framework/issues/29358)
|
||||
* **input:** debounce is set with binding syntax in angular on load ([#29377](https://github.com/ionic-team/ionic-framework/issues/29377)) ([23321f7](https://github.com/ionic-team/ionic-framework/commit/23321f7ab2a242c3c4193fd6cece3f1c7c0034ef)), closes [#29374](https://github.com/ionic-team/ionic-framework/issues/29374)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [8.0.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-rc.2...v8.0.0) (2024-04-17)
|
||||
|
||||
**Note:** Version bump only for package @ionic/core
|
||||
|
||||
@@ -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
|
||||
|
||||
152
core/package-lock.json
generated
152
core/package-lock.json
generated
@@ -1,24 +1,24 @@
|
||||
{
|
||||
"name": "@ionic/core",
|
||||
"version": "8.0.0",
|
||||
"version": "8.0.2",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@ionic/core",
|
||||
"version": "8.0.0",
|
||||
"version": "8.0.2",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@stencil/core": "^4.12.2",
|
||||
"@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.4",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.4.tgz",
|
||||
"integrity": "sha512-iZBgvx3o4amzKv5ttA+QHB6i7cxK+/mYpCQd1tnSdipg6ZkvfBhg1HkzhEqHk+I7MNur+QwgYDZho9+ycHRwOw==",
|
||||
"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.15.0",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.15.0.tgz",
|
||||
"integrity": "sha512-C5syM3chCyxX0Os5M+ZWrBujjqwUfrTb87YiLr8RC+kMTmIpnRvvtj8/s3QYDGdDENGRxGkBpeboVh82IGqk0w==",
|
||||
"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.4",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.4.tgz",
|
||||
"integrity": "sha512-iZBgvx3o4amzKv5ttA+QHB6i7cxK+/mYpCQd1tnSdipg6ZkvfBhg1HkzhEqHk+I7MNur+QwgYDZho9+ycHRwOw==",
|
||||
"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.15.0",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.15.0.tgz",
|
||||
"integrity": "sha512-C5syM3chCyxX0Os5M+ZWrBujjqwUfrTb87YiLr8RC+kMTmIpnRvvtj8/s3QYDGdDENGRxGkBpeboVh82IGqk0w=="
|
||||
"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": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ionic/core",
|
||||
"version": "8.0.0",
|
||||
"version": "8.0.2",
|
||||
"description": "Base components for Ionic",
|
||||
"keywords": [
|
||||
"ionic",
|
||||
@@ -31,16 +31,16 @@
|
||||
"loader/"
|
||||
],
|
||||
"dependencies": {
|
||||
"@stencil/core": "^4.12.2",
|
||||
"@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",
|
||||
|
||||
@@ -14,6 +14,20 @@
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
/**
|
||||
* The term `palette` is used to as a param to match the
|
||||
* Ionic docs, plus here is already a `ionic:theme` query being
|
||||
* used for `md`, `ios`, and `ionic` themes.
|
||||
*/
|
||||
const palette = window.location.search.match(/palette=([a-z]+)/);
|
||||
if (palette && palette[1] !== 'light') {
|
||||
const linkTag = document.createElement('link');
|
||||
linkTag.setAttribute('rel', 'stylesheet');
|
||||
linkTag.setAttribute('type', 'text/css');
|
||||
linkTag.setAttribute('href', `/css/palettes/${palette[1]}.always.css`);
|
||||
document.head.appendChild(linkTag);
|
||||
}
|
||||
|
||||
window.Ionic = window.Ionic || {};
|
||||
window.Ionic.config = window.Ionic.config || {};
|
||||
|
||||
|
||||
24
core/src/components.d.ts
vendored
24
core/src/components.d.ts
vendored
@@ -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<AccordionGroupChangeEventDetail>) => void;
|
||||
/**
|
||||
@@ -5345,7 +5345,7 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
"onIonBlur"?: (event: IonCheckboxCustomEvent<void>) => 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<CheckboxChangeEventDetail>) => void;
|
||||
/**
|
||||
@@ -5601,7 +5601,7 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
"onIonCancel"?: (event: IonDatetimeCustomEvent<void>) => 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<DatetimeChangeEventDetail>) => void;
|
||||
/**
|
||||
@@ -5971,7 +5971,7 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
"onIonBlur"?: (event: IonInputCustomEvent<FocusEvent>) => 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 `<ion-input type="date">`, 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 `<ion-input type="date">`, 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<InputChangeEventDetail>) => 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<PickerColumnChangeEventDetail>) => 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<RadioGroupChangeEventDetail>) => void;
|
||||
/**
|
||||
@@ -7023,7 +7023,7 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
"onIonBlur"?: (event: IonRangeCustomEvent<void>) => void;
|
||||
/**
|
||||
* The `ionChange` event is fired for `<ion-range>` 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 `<ion-range>` 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<RangeChangeEventDetail>) => void;
|
||||
/**
|
||||
@@ -7324,7 +7324,7 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
"onIonCancel"?: (event: IonSearchbarCustomEvent<void>) => void;
|
||||
/**
|
||||
* The `ionChange` event is fired for `<ion-searchbar>` 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 `<ion-searchbar>` 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<SearchbarChangeEventDetail>) => 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<SegmentChangeEventDetail>) => void;
|
||||
/**
|
||||
@@ -7506,7 +7506,7 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
"onIonCancel"?: (event: IonSelectCustomEvent<void>) => 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<SelectChangeEventDetail>) => void;
|
||||
/**
|
||||
@@ -7809,7 +7809,7 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
"onIonBlur"?: (event: IonTextareaCustomEvent<FocusEvent>) => 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<TextareaChangeEventDetail>) => void;
|
||||
/**
|
||||
@@ -8028,7 +8028,7 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
"onIonBlur"?: (event: IonToggleCustomEvent<void>) => 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<ToggleChangeEventDetail>) => void;
|
||||
/**
|
||||
|
||||
@@ -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<AccordionGroupChangeEventDetail>;
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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%);
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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%;
|
||||
|
||||
@@ -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%;
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -4,4 +4,4 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Text color of the back button
|
||||
$back-button-md-color: currentColor !default;
|
||||
$back-button-md-color: currentColor;
|
||||
|
||||
@@ -4,4 +4,4 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Border radius of the badge
|
||||
$badge-ios-border-radius: 10px !default;
|
||||
$badge-ios-border-radius: 10px;
|
||||
|
||||
@@ -4,4 +4,4 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Border radius of the badge
|
||||
$badge-md-border-radius: 4px !default;
|
||||
$badge-md-border-radius: 4px;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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));
|
||||
|
||||
@@ -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));
|
||||
|
||||
@@ -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));
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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<CheckboxChangeEventDetail>;
|
||||
|
||||
|
||||
@@ -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;
|
||||
$checkbox-item-label-margin-bottom: 10px;
|
||||
@@ -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;
|
||||
);
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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<DatetimeChangeEventDetail>;
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -5,4 +5,4 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Margin of the FAB List
|
||||
$fab-list-margin: 10px !default;
|
||||
$fab-list-margin: 10px;
|
||||
|
||||
@@ -5,4 +5,4 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Margin of the FAB Container
|
||||
$fab-content-margin: 10px !default;
|
||||
$fab-content-margin: 10px;
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -296,6 +296,8 @@ export class Input implements ComponentInterface {
|
||||
* from a date picker for `<ion-input type="date">`, 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<InputChangeEventDetail>;
|
||||
|
||||
@@ -366,6 +368,7 @@ export class Input implements ComponentInterface {
|
||||
* such as [type] in Angular.
|
||||
*/
|
||||
this.onTypeChange();
|
||||
this.debounceChanged();
|
||||
}
|
||||
|
||||
componentDidRender() {
|
||||
@@ -782,6 +785,15 @@ export class Input implements ComponentInterface {
|
||||
*/
|
||||
ev.preventDefault();
|
||||
}}
|
||||
onFocusin={(ev) => {
|
||||
/**
|
||||
* Prevent the focusin event from bubbling otherwise it will cause the focusin
|
||||
* event listener in scroll assist to fire. When this fires, focus will be moved
|
||||
* back to the input even if the clear button was never tapped. This poses issues
|
||||
* for screen readers as it means users would be unable to swipe past the clear button.
|
||||
*/
|
||||
ev.stopPropagation();
|
||||
}}
|
||||
onClick={this.clearTextInput}
|
||||
>
|
||||
<ion-icon aria-hidden="true" icon={mode === 'ios' ? closeCircle : closeSharp}></ion-icon>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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(
|
||||
`
|
||||
<ion-list>
|
||||
<ion-item>Item</ion-item>
|
||||
<ion-item>Item</ion-item>
|
||||
</ion-list>
|
||||
`,
|
||||
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([]);
|
||||
});
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -4,4 +4,4 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Border radius for the modal
|
||||
$modal-ios-border-radius: 10px !default;
|
||||
$modal-ios-border-radius: 10px;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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<PickerColumnChangeEventDetail>;
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user