mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
Compare commits
54 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
6e8bf4914f | ||
|
|
0873dc2ffb | ||
|
|
dc1172a841 | ||
|
|
e60890c483 | ||
|
|
6fd4b50697 | ||
|
|
fa60838702 | ||
|
|
b76debe7ea | ||
|
|
ee49824a84 | ||
|
|
23321f7ab2 | ||
|
|
3a10821217 | ||
|
|
e8e5c4e1b6 | ||
|
|
2fc81ddc9b | ||
|
|
5dcf5748c6 | ||
|
|
6b13e1323f | ||
|
|
eb7ba2355a | ||
|
|
30552f1cef | ||
|
|
2d8c9f4942 | ||
|
|
bf1ae7b6fe | ||
|
|
84ea30db4e | ||
|
|
f7aa4a7e6b | ||
|
|
ffd1bf5139 | ||
|
|
73af759906 | ||
|
|
4f68044f84 | ||
|
|
c69adbf988 | ||
|
|
cde84983b2 | ||
|
|
3f3f196a24 | ||
|
|
ffce443585 | ||
|
|
4698d22413 | ||
|
|
bfaf528e61 | ||
|
|
9b59138011 | ||
|
|
4efdc88a29 | ||
|
|
7b90025d31 | ||
|
|
176bb43262 | ||
|
|
c9916ff4b5 | ||
|
|
9738228bc0 | ||
|
|
f0da2c1727 | ||
|
|
368fb2fc70 | ||
|
|
8259cd0cd9 | ||
|
|
638ad30b59 | ||
|
|
ea8e220861 | ||
|
|
8ee5790d1f | ||
|
|
2562392a62 | ||
|
|
d8599b3282 | ||
|
|
1388014b65 | ||
|
|
1073d22b56 | ||
|
|
cea0b493fc | ||
|
|
adf220b681 | ||
|
|
e64015a609 | ||
|
|
3d9871a77f | ||
|
|
e91fee4f2d | ||
|
|
b315b0cb29 | ||
|
|
7b6c330f17 | ||
|
|
b3cd49bf22 | ||
|
|
6c36cef241 |
23
.github/CODEOWNERS
vendored
23
.github/CODEOWNERS
vendored
@@ -13,30 +13,7 @@
|
||||
|
||||
* @ionic-team/framework
|
||||
|
||||
# Frameworks
|
||||
|
||||
## Angular
|
||||
|
||||
/packages/angular/ @sean-perkins @thetaPC
|
||||
/packages/angular-server @sean-perkins @thetaPC
|
||||
/packages/angular/test @thetaPC
|
||||
|
||||
## Vue
|
||||
|
||||
/packages/vue/ @thetaPC
|
||||
/packages/vue-router/ @liamdebeasi @thetaPC
|
||||
/packages/vue/test/ @thetaPC
|
||||
/packages/vue-router/__tests__ @thetaPC
|
||||
|
||||
# Components
|
||||
|
||||
/core/src/components/datetime/ @sean-perkins
|
||||
|
||||
/core/src/components/nav/ @sean-perkins
|
||||
/core/src/components/nav-link/ @sean-perkins
|
||||
|
||||
# Utilities
|
||||
|
||||
/core/src/utils/content/ @sean-perkins
|
||||
/core/src/utils/gesture/ @liamdebeasi
|
||||
/core/src/utils/input-shims/ @liamdebeasi
|
||||
|
||||
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/PULL_REQUEST_TEMPLATE.md
vendored
2
.github/PULL_REQUEST_TEMPLATE.md
vendored
@@ -25,7 +25,7 @@ Issue number: resolves #
|
||||
If this introduces a breaking change:
|
||||
1. Describe the impact and migration path for existing applications below.
|
||||
2. Update the BREAKING.md file with the breaking change.
|
||||
3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information.
|
||||
3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information.
|
||||
-->
|
||||
|
||||
|
||||
|
||||
4
.github/workflows/assign-issues.yml
vendored
4
.github/workflows/assign-issues.yml
vendored
@@ -11,8 +11,8 @@ jobs:
|
||||
issues: write
|
||||
steps:
|
||||
- name: 'Auto-assign issue'
|
||||
uses: pozil/auto-assign-issue@edee9537367a8fbc625d27f9e10aa8bad47b8723 # v1.13.0
|
||||
uses: pozil/auto-assign-issue@65947009a243e6b3993edeef4e64df3ca85d760c # v1.14.0
|
||||
with:
|
||||
assignees: liamdebeasi, sean-perkins, brandyscarney, amandaejohnston, thetaPC
|
||||
assignees: liamdebeasi, sean-perkins, brandyscarney, thetaPC
|
||||
numOfAssignee: 1
|
||||
allowSelfAssign: false
|
||||
|
||||
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".
|
||||
|
||||
1
.vercelignore
Normal file
1
.vercelignore
Normal file
@@ -0,0 +1 @@
|
||||
core/src/components/**/*/*.png
|
||||
64
CHANGELOG.md
64
CHANGELOG.md
@@ -3,6 +3,70 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [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
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [8.0.0-rc.2](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-rc.1...v8.0.0-rc.2) (2024-04-17)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **dark-palette:** improve base colors ([#29239](https://github.com/ionic-team/ionic-framework/issues/29239)) ([4698d22](https://github.com/ionic-team/ionic-framework/commit/4698d22413966b59f9fa65b4e2533695cf00ed70)), closes [#29219](https://github.com/ionic-team/ionic-framework/issues/29219)
|
||||
* **form-controls:** adjust flex properties inside of an item ([#29328](https://github.com/ionic-team/ionic-framework/issues/29328)) ([9b59138](https://github.com/ionic-team/ionic-framework/commit/9b59138011fd1e71def209ec3a43fb7f91b58949)), closes [#29319](https://github.com/ionic-team/ionic-framework/issues/29319)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.8.5](https://github.com/ionic-team/ionic-framework/compare/v7.8.4...v7.8.5) (2024-04-17)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **modal:** improve sheet modal scrolling and gesture behavior ([#29312](https://github.com/ionic-team/ionic-framework/issues/29312)) ([9738228](https://github.com/ionic-team/ionic-framework/commit/9738228bc05abe3e2012e57b0e6b85f0ec06f66b)), closes [#24583](https://github.com/ionic-team/ionic-framework/issues/24583)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [8.0.0-rc.1](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-rc.0...v8.0.0-rc.1) (2024-04-10)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **button:** use clamp for font sizes on circle shape ([#29200](https://github.com/ionic-team/ionic-framework/issues/29200)) ([4d6edee](https://github.com/ionic-team/ionic-framework/commit/4d6edee89c7bb2cb669d67730d7ddf24c78b3cb1))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.8.4](https://github.com/ionic-team/ionic-framework/compare/v7.8.3...v7.8.4) (2024-04-10)
|
||||
|
||||
|
||||
### Performance Improvements
|
||||
|
||||
* **styles:** compress distributed global stylesheets ([#29275](https://github.com/ionic-team/ionic-framework/issues/29275)) ([b3cd49b](https://github.com/ionic-team/ionic-framework/commit/b3cd49bf2219aacffc1ac34acbae7c76ef243765))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.8.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.2...v7.8.3) (2024-04-03)
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
<a href="https://github.com/ionic-team/ionic-framework/blob/main/LICENSE">
|
||||
<img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="Ionic Framework is released under the MIT license." />
|
||||
</a>
|
||||
<a href="https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md">
|
||||
<a href="https://github.com/ionic-team/ionic/blob/main/docs/CONTRIBUTING.md">
|
||||
<img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
|
||||
</a>
|
||||
<a href="https://twitter.com/Ionicframework">
|
||||
@@ -38,7 +38,7 @@
|
||||
Documentation
|
||||
</a>
|
||||
<span> · </span>
|
||||
<a href="https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md">Contribute</a>
|
||||
<a href="https://github.com/ionic-team/ionic/blob/main/docs/CONTRIBUTING.md">Contribute</a>
|
||||
<span> · </span>
|
||||
<a href="https://blog.ionicframework.com/">Blog</a>
|
||||
<br />
|
||||
@@ -88,7 +88,7 @@ The Ionic Conference App is a full featured Ionic app. It is the perfect startin
|
||||
### Contributing
|
||||
|
||||
Thanks for your interest in contributing! Read up on our guidelines for
|
||||
[contributing](https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md)
|
||||
[contributing](https://github.com/ionic-team/ionic/blob/main/docs/CONTRIBUTING.md)
|
||||
and then look through our issues with a [help wanted](https://github.com/ionic-team/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
|
||||
label.
|
||||
|
||||
|
||||
@@ -3,6 +3,70 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [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
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [8.0.0-rc.2](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-rc.1...v8.0.0-rc.2) (2024-04-17)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **dark-palette:** improve base colors ([#29239](https://github.com/ionic-team/ionic-framework/issues/29239)) ([4698d22](https://github.com/ionic-team/ionic-framework/commit/4698d22413966b59f9fa65b4e2533695cf00ed70)), closes [#29219](https://github.com/ionic-team/ionic-framework/issues/29219)
|
||||
* **form-controls:** adjust flex properties inside of an item ([#29328](https://github.com/ionic-team/ionic-framework/issues/29328)) ([9b59138](https://github.com/ionic-team/ionic-framework/commit/9b59138011fd1e71def209ec3a43fb7f91b58949)), closes [#29319](https://github.com/ionic-team/ionic-framework/issues/29319)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.8.5](https://github.com/ionic-team/ionic-framework/compare/v7.8.4...v7.8.5) (2024-04-17)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **modal:** improve sheet modal scrolling and gesture behavior ([#29312](https://github.com/ionic-team/ionic-framework/issues/29312)) ([9738228](https://github.com/ionic-team/ionic-framework/commit/9738228bc05abe3e2012e57b0e6b85f0ec06f66b)), closes [#24583](https://github.com/ionic-team/ionic-framework/issues/24583)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [8.0.0-rc.1](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-rc.0...v8.0.0-rc.1) (2024-04-10)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **button:** use clamp for font sizes on circle shape ([#29200](https://github.com/ionic-team/ionic-framework/issues/29200)) ([4d6edee](https://github.com/ionic-team/ionic-framework/commit/4d6edee89c7bb2cb669d67730d7ddf24c78b3cb1))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.8.4](https://github.com/ionic-team/ionic-framework/compare/v7.8.3...v7.8.4) (2024-04-10)
|
||||
|
||||
|
||||
### Performance Improvements
|
||||
|
||||
* **styles:** compress distributed global stylesheets ([#29275](https://github.com/ionic-team/ionic-framework/issues/29275)) ([b3cd49b](https://github.com/ionic-team/ionic-framework/commit/b3cd49bf2219aacffc1ac34acbae7c76ef243765))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.8.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.2...v7.8.3) (2024-04-03)
|
||||
|
||||
|
||||
@@ -549,7 +549,7 @@ ion-infinite-scroll-content,prop,loadingText,IonicSafeString | string | undefine
|
||||
|
||||
ion-input,scoped
|
||||
ion-input,prop,autocapitalize,string,'off',false,false
|
||||
ion-input,prop,autocomplete,"name" | "on" | "off" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo",'off',false,false
|
||||
ion-input,prop,autocomplete,"name" | "email" | "tel" | "url" | "on" | "off" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo",'off',false,false
|
||||
ion-input,prop,autocorrect,"off" | "on",'off',false,false
|
||||
ion-input,prop,autofocus,boolean,false,false,false
|
||||
ion-input,prop,clearInput,boolean,false,false,false
|
||||
@@ -1173,7 +1173,7 @@ ion-row,shadow
|
||||
ion-searchbar,scoped
|
||||
ion-searchbar,prop,animated,boolean,false,false,false
|
||||
ion-searchbar,prop,autocapitalize,string,'off',false,false
|
||||
ion-searchbar,prop,autocomplete,"name" | "on" | "off" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo",'off',false,false
|
||||
ion-searchbar,prop,autocomplete,"name" | "email" | "tel" | "url" | "on" | "off" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo",'off',false,false
|
||||
ion-searchbar,prop,autocorrect,"off" | "on",'off',false,false
|
||||
ion-searchbar,prop,cancelButtonIcon,string,config.get('backButtonIcon', arrowBackSharp) as string,false,false
|
||||
ion-searchbar,prop,cancelButtonText,string,'Cancel',false,false
|
||||
|
||||
745
core/package-lock.json
generated
745
core/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ionic/core",
|
||||
"version": "8.0.0-rc.0",
|
||||
"version": "8.0.1",
|
||||
"description": "Base components for Ionic",
|
||||
"keywords": [
|
||||
"ionic",
|
||||
@@ -31,7 +31,7 @@
|
||||
"loader/"
|
||||
],
|
||||
"dependencies": {
|
||||
"@stencil/core": "^4.12.2",
|
||||
"@stencil/core": "^4.17.1",
|
||||
"ionicons": "^7.2.2",
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
@@ -54,12 +54,13 @@
|
||||
"@types/node": "^14.6.0",
|
||||
"@typescript-eslint/eslint-plugin": "^6.7.2",
|
||||
"@typescript-eslint/parser": "^6.7.2",
|
||||
"chalk": "^5.3.0",
|
||||
"clean-css-cli": "^5.6.1",
|
||||
"domino": "^2.1.6",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-custom-rules": "file:custom-rules",
|
||||
"execa": "^5.0.0",
|
||||
"execa": "^8.0.1",
|
||||
"fs-extra": "^9.0.1",
|
||||
"jest": "^29.7.0",
|
||||
"jest-cli": "^29.7.0",
|
||||
@@ -77,7 +78,7 @@
|
||||
"build.docs.json": "stencil build --docs-json dist/docs.json",
|
||||
"clean": "node scripts/clean.js",
|
||||
"css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css",
|
||||
"css.sass": "sass --embed-sources src/css:./css",
|
||||
"css.sass": "sass --embed-sources --style compressed src/css:./css",
|
||||
"eslint": "eslint src",
|
||||
"lint": "npm run lint.ts && npm run lint.sass && npm run prettier -- --write --cache",
|
||||
"lint.fix": "npm run lint.ts.fix && npm run lint.sass.fix && npm run prettier -- --write --cache",
|
||||
@@ -96,10 +97,9 @@
|
||||
"test.treeshake": "node scripts/treeshaking.js dist/index.js",
|
||||
"validate": "npm run lint && npm run test && npm run build && npm run test.treeshake",
|
||||
"docker.build": "docker build -t ionic-playwright .",
|
||||
"test.e2e.docker": "npm run docker.build && docker run -it --rm -e DISPLAY=$(cat docker-display.txt) -v $(cat docker-display-volume.txt) --ipc=host --mount=type=bind,source=./,target=/ionic ionic-playwright npm run test.e2e --",
|
||||
"test.e2e.docker": "npm run docker.build && node ./scripts/docker.mjs",
|
||||
"test.e2e.docker.update-snapshots": "npm run test.e2e.docker -- --update-snapshots",
|
||||
"test.e2e.docker.ci": "npm run docker.build && docker run -e CI='true' --rm --ipc=host --mount=type=bind,source=./,target=/ionic ionic-playwright npm run test.e2e --",
|
||||
"test.report": "npx playwright show-report"
|
||||
"test.e2e.docker.ci": "npm run docker.build && CI=true node ./scripts/docker.mjs"
|
||||
},
|
||||
"author": "Ionic Team",
|
||||
"license": "MIT",
|
||||
|
||||
56
core/scripts/docker.mjs
Normal file
56
core/scripts/docker.mjs
Normal file
@@ -0,0 +1,56 @@
|
||||
import { execa } from 'execa';
|
||||
import * as fs from 'fs';
|
||||
import { resolve } from 'path';
|
||||
import chalk from 'chalk';
|
||||
|
||||
const removeNewline = (string) => {
|
||||
return string.replace(/(\r\n|\n|\r)/gm, "");
|
||||
}
|
||||
|
||||
const readConfigFile = (file) => {
|
||||
if (fs.existsSync(file)) {
|
||||
return fs.readFileSync(file, { encoding: 'utf-8' });
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
// These files are optional, so we don't want to error if they don't exist
|
||||
const display = removeNewline(readConfigFile('docker-display.txt'));
|
||||
const displayVolume = removeNewline(readConfigFile('docker-display-volume.txt'));
|
||||
|
||||
// Using --mount requires an absolute path which is what this gives us.
|
||||
const pwd = resolve('./');
|
||||
|
||||
/**
|
||||
* -it will let the user gracefully kill the process using Ctrl+C (or equivalent)
|
||||
* -e DISPLAY and -v handle configuration for headed mode
|
||||
* --ipc=host is recommended when using Chromium to avoid out of memory crashes: https://playwright.dev/docs/ci#docker
|
||||
* --init is recommended to avoid zombie processes: https://playwright.dev/docs/ci#docker
|
||||
* --mount allow us to mount the local Ionic project inside of the Docker container so devs do not need to re-build the project in Docker.
|
||||
*/
|
||||
const args = ['run', '--rm', '--init', `-e DISPLAY=${display}`, `-v ${displayVolume}`, '--ipc=host', `--mount=type=bind,source=${pwd},target=/ionic`, 'ionic-playwright', 'npm run test.e2e --', ...process.argv.slice(2)];
|
||||
|
||||
// Set the CI env variable so Playwright uses the CI config
|
||||
if (process.env.CI) {
|
||||
args.splice(1, 0, '-e CI=true');
|
||||
/**
|
||||
* Otherwise, we should let the session be interactive locally. This will
|
||||
* not work on CI which is why we do not apply it there.
|
||||
*/
|
||||
} else {
|
||||
args.splice(1, 0, '-it');
|
||||
}
|
||||
|
||||
/**
|
||||
* While these config files are optional to run the tests, they are required to run
|
||||
* the tests in headed mode. Add a warning if dev tries to run headed tests without
|
||||
* the correct config files.
|
||||
*/
|
||||
const requestHeaded = process.argv.find(arg => arg.includes('headed'));
|
||||
const hasHeadedConfigFiles = display && displayVolume;
|
||||
if (requestHeaded && !hasHeadedConfigFiles) {
|
||||
console.warn(chalk.yellow.bold('\n⚠️ You are running tests in headed mode, but one or more of your headed config files was not found.\nPlease ensure that both docker-display.txt and docker-display-volume.txt have been created in the correct location.\n'));
|
||||
}
|
||||
|
||||
execa('docker', args, { shell: true, stdio: 'inherit' });
|
||||
@@ -1,44 +1,4 @@
|
||||
|
||||
## Build
|
||||
# Core Scripts
|
||||
|
||||
### 1. Clone ionic
|
||||
|
||||
git@github.com:ionic-team/ionic.git
|
||||
cd ionic
|
||||
|
||||
### 2. Run `npm install`
|
||||
|
||||
cd core
|
||||
npm install
|
||||
|
||||
|
||||
Notice that `@ionic/core` lives in `core`.
|
||||
|
||||
### 3. Run `npm start`
|
||||
|
||||
Make sure you are inside the `core` directory.
|
||||
|
||||
npm start
|
||||
|
||||
With the `dev` command, Ionic components will be built with [Stencil](https://stenciljs.com/), changes to source files are watched, a local http server will startup, and http://localhost:3333/ will open in a browser.
|
||||
|
||||
### 4. Preview
|
||||
|
||||
Navigate to http://localhost:3333/src/components/. Each component has small e2e apps found in the `test` directory, for example: http://localhost:3333/src/components/button/test/basic
|
||||
|
||||
As changes are made in an editor to source files, the e2e app will live-reload.
|
||||
|
||||
## How to contribute
|
||||
|
||||
1. `npm start` allows you to modify the components and have live reloading, just like another ionic app.
|
||||
|
||||
2. When everything looks good, run `npm run validate` to verify the tests linter and production build passes.
|
||||
|
||||
|
||||
# Deploy
|
||||
|
||||
1. `npm run prepare.deploy`
|
||||
2. Review/update changelog
|
||||
3. Commit updates using the package name and version number as the commit message.
|
||||
4. `npm run deploy`
|
||||
5. :tada:
|
||||
This file has been moved to [/docs/core/testing/preview-changes.md](/docs/core/testing/preview-changes.md).
|
||||
|
||||
@@ -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 || {};
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -38,6 +38,8 @@
|
||||
}
|
||||
|
||||
:host(.in-item) {
|
||||
flex: 1 1 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
<title>Datetime - Basic</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
||||
<link href="../../../../../css/palettes/dark.class.css" rel="stylesheet" />
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
@@ -49,158 +50,6 @@
|
||||
ion-datetime {
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
body.dark {
|
||||
--ion-color-primary: #428cff;
|
||||
--ion-color-primary-rgb: 66, 140, 255;
|
||||
--ion-color-primary-contrast: #ffffff;
|
||||
--ion-color-primary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-primary-shade: #3a7be0;
|
||||
--ion-color-primary-tint: #5598ff;
|
||||
|
||||
--ion-color-secondary: #50c8ff;
|
||||
--ion-color-secondary-rgb: 80, 200, 255;
|
||||
--ion-color-secondary-contrast: #ffffff;
|
||||
--ion-color-secondary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-secondary-shade: #46b0e0;
|
||||
--ion-color-secondary-tint: #62ceff;
|
||||
|
||||
--ion-color-tertiary: #6a64ff;
|
||||
--ion-color-tertiary-rgb: 106, 100, 255;
|
||||
--ion-color-tertiary-contrast: #ffffff;
|
||||
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-tertiary-shade: #5d58e0;
|
||||
--ion-color-tertiary-tint: #7974ff;
|
||||
|
||||
--ion-color-success: #2fdf75;
|
||||
--ion-color-success-rgb: 47, 223, 117;
|
||||
--ion-color-success-contrast: #000000;
|
||||
--ion-color-success-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-success-shade: #29c467;
|
||||
--ion-color-success-tint: #44e283;
|
||||
|
||||
--ion-color-warning: #ffd534;
|
||||
--ion-color-warning-rgb: 255, 213, 52;
|
||||
--ion-color-warning-contrast: #000000;
|
||||
--ion-color-warning-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-warning-shade: #e0bb2e;
|
||||
--ion-color-warning-tint: #ffd948;
|
||||
|
||||
--ion-color-danger: #ff4961;
|
||||
--ion-color-danger-rgb: 255, 73, 97;
|
||||
--ion-color-danger-contrast: #ffffff;
|
||||
--ion-color-danger-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-danger-shade: #e04055;
|
||||
--ion-color-danger-tint: #ff5b71;
|
||||
|
||||
--ion-color-dark: #f4f5f8;
|
||||
--ion-color-dark-rgb: 244, 245, 248;
|
||||
--ion-color-dark-contrast: #000000;
|
||||
--ion-color-dark-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-dark-shade: #d7d8da;
|
||||
--ion-color-dark-tint: #f5f6f9;
|
||||
|
||||
--ion-color-medium: #989aa2;
|
||||
--ion-color-medium-rgb: 152, 154, 162;
|
||||
--ion-color-medium-contrast: #000000;
|
||||
--ion-color-medium-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-medium-shade: #86888f;
|
||||
--ion-color-medium-tint: #a2a4ab;
|
||||
|
||||
--ion-color-light: #222428;
|
||||
--ion-color-light-rgb: 34, 36, 40;
|
||||
--ion-color-light-contrast: #ffffff;
|
||||
--ion-color-light-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-light-shade: #1e2023;
|
||||
--ion-color-light-tint: #383a3e;
|
||||
}
|
||||
|
||||
/*
|
||||
* iOS Dark Theme
|
||||
* -------------------------------------------
|
||||
*/
|
||||
|
||||
.ios body.dark {
|
||||
--ion-background-color: #000000;
|
||||
--ion-background-color-rgb: 0, 0, 0;
|
||||
|
||||
--ion-text-color: #ffffff;
|
||||
--ion-text-color-rgb: 255, 255, 255;
|
||||
|
||||
--ion-color-step-50: #0d0d0d;
|
||||
--ion-color-step-100: #1a1a1a;
|
||||
--ion-color-step-150: #262626;
|
||||
--ion-color-step-200: #333333;
|
||||
--ion-color-step-250: #404040;
|
||||
--ion-color-step-300: #4d4d4d;
|
||||
--ion-color-step-350: #595959;
|
||||
--ion-color-step-400: #666666;
|
||||
--ion-color-step-450: #737373;
|
||||
--ion-color-step-500: #808080;
|
||||
--ion-color-step-550: #8c8c8c;
|
||||
--ion-color-step-600: #999999;
|
||||
--ion-color-step-650: #a6a6a6;
|
||||
--ion-color-step-700: #b3b3b3;
|
||||
--ion-color-step-750: #bfbfbf;
|
||||
--ion-color-step-800: #cccccc;
|
||||
--ion-color-step-850: #d9d9d9;
|
||||
--ion-color-step-900: #e6e6e6;
|
||||
--ion-color-step-950: #f2f2f2;
|
||||
|
||||
--ion-item-background: #000000;
|
||||
|
||||
--ion-card-background: #1c1c1d;
|
||||
}
|
||||
|
||||
.ios body.dark ion-modal {
|
||||
--ion-background-color: var(--ion-color-step-100);
|
||||
--ion-toolbar-background: var(--ion-color-step-150);
|
||||
--ion-toolbar-border-color: var(--ion-color-step-250);
|
||||
--ion-item-background: var(--ion-color-step-150);
|
||||
}
|
||||
|
||||
/*
|
||||
* Material Design Dark Theme
|
||||
* -------------------------------------------
|
||||
*/
|
||||
|
||||
.md body.dark {
|
||||
--ion-background-color: #121212;
|
||||
--ion-background-color-rgb: 18, 18, 18;
|
||||
|
||||
--ion-text-color: #ffffff;
|
||||
--ion-text-color-rgb: 255, 255, 255;
|
||||
|
||||
--ion-border-color: #222222;
|
||||
|
||||
--ion-color-step-50: #1e1e1e;
|
||||
--ion-color-step-100: #2a2a2a;
|
||||
--ion-color-step-150: #363636;
|
||||
--ion-color-step-200: #414141;
|
||||
--ion-color-step-250: #4d4d4d;
|
||||
--ion-color-step-300: #595959;
|
||||
--ion-color-step-350: #656565;
|
||||
--ion-color-step-400: #717171;
|
||||
--ion-color-step-450: #7d7d7d;
|
||||
--ion-color-step-500: #898989;
|
||||
--ion-color-step-550: #949494;
|
||||
--ion-color-step-600: #a0a0a0;
|
||||
--ion-color-step-650: #acacac;
|
||||
--ion-color-step-700: #b8b8b8;
|
||||
--ion-color-step-750: #c4c4c4;
|
||||
--ion-color-step-800: #d0d0d0;
|
||||
--ion-color-step-850: #dbdbdb;
|
||||
--ion-color-step-900: #e7e7e7;
|
||||
--ion-color-step-950: #f3f3f3;
|
||||
|
||||
--ion-item-background: #1e1e1e;
|
||||
|
||||
--ion-toolbar-background: #1f1f1f;
|
||||
|
||||
--ion-tab-bar-background: #1f1f1f;
|
||||
|
||||
--ion-card-background: #1e1e1e;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -335,12 +184,9 @@
|
||||
|
||||
const darkModeCheckbox = document.querySelector('ion-checkbox');
|
||||
darkModeCheckbox.addEventListener('ionChange', (ev) => {
|
||||
if (ev.detail.checked) {
|
||||
document.body.classList.add('dark');
|
||||
} else {
|
||||
document.body.classList.remove('dark');
|
||||
}
|
||||
document.documentElement.classList.toggle('ion-palette-dark');
|
||||
});
|
||||
|
||||
color.addEventListener('ionChange', (ev) => {
|
||||
datetime.color = ev.target.value;
|
||||
buttons.forEach((button) => {
|
||||
|
||||
@@ -4,19 +4,28 @@ import { configs, test } from '@utils/test/playwright';
|
||||
/**
|
||||
* This behavior does not vary across directions
|
||||
*/
|
||||
configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
||||
configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, screenshot, config }) => {
|
||||
test.describe(title('datetime: color'), () => {
|
||||
test('should not have visual regressions', async ({ page }) => {
|
||||
await page.goto('/src/components/datetime/test/color', config);
|
||||
await page.setContent(
|
||||
`
|
||||
<div id="container" style="width: 250px;">
|
||||
<ion-datetime
|
||||
color="danger"
|
||||
value="2022-05-03"
|
||||
show-default-title="true"
|
||||
show-default-buttons="true"
|
||||
></ion-datetime>
|
||||
</div>
|
||||
`,
|
||||
config
|
||||
);
|
||||
|
||||
const datetime = page.locator('#color-datetime');
|
||||
const container = page.locator('#container');
|
||||
|
||||
await expect(datetime).toHaveScreenshot(screenshot(`datetime-color`));
|
||||
await page.locator('.datetime-ready').waitFor();
|
||||
|
||||
await page.evaluate(() => document.body.classList.toggle('dark'));
|
||||
await page.waitForChanges();
|
||||
|
||||
await expect(datetime).toHaveScreenshot(screenshot(`datetime-color-dark`));
|
||||
await expect(container).toHaveScreenshot(screenshot(`datetime-color`));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
@@ -5,6 +5,7 @@
|
||||
<title>Datetime - Color</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
||||
<link href="../../../../../css/palettes/dark.class.css" rel="stylesheet" />
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
@@ -39,163 +40,6 @@
|
||||
#color-name::first-letter {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
/*
|
||||
* Dark Theme
|
||||
* -------------------------------------------
|
||||
*/
|
||||
|
||||
body.dark {
|
||||
--ion-color-primary: #428cff;
|
||||
--ion-color-primary-rgb: 66, 140, 255;
|
||||
--ion-color-primary-contrast: #ffffff;
|
||||
--ion-color-primary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-primary-shade: #3a7be0;
|
||||
--ion-color-primary-tint: #5598ff;
|
||||
|
||||
--ion-color-secondary: #50c8ff;
|
||||
--ion-color-secondary-rgb: 80, 200, 255;
|
||||
--ion-color-secondary-contrast: #ffffff;
|
||||
--ion-color-secondary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-secondary-shade: #46b0e0;
|
||||
--ion-color-secondary-tint: #62ceff;
|
||||
|
||||
--ion-color-tertiary: #6a64ff;
|
||||
--ion-color-tertiary-rgb: 106, 100, 255;
|
||||
--ion-color-tertiary-contrast: #ffffff;
|
||||
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-tertiary-shade: #5d58e0;
|
||||
--ion-color-tertiary-tint: #7974ff;
|
||||
|
||||
--ion-color-success: #2fdf75;
|
||||
--ion-color-success-rgb: 47, 223, 117;
|
||||
--ion-color-success-contrast: #000000;
|
||||
--ion-color-success-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-success-shade: #29c467;
|
||||
--ion-color-success-tint: #44e283;
|
||||
|
||||
--ion-color-warning: #ffd534;
|
||||
--ion-color-warning-rgb: 255, 213, 52;
|
||||
--ion-color-warning-contrast: #000000;
|
||||
--ion-color-warning-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-warning-shade: #e0bb2e;
|
||||
--ion-color-warning-tint: #ffd948;
|
||||
|
||||
--ion-color-danger: #ff4961;
|
||||
--ion-color-danger-rgb: 255, 73, 97;
|
||||
--ion-color-danger-contrast: #ffffff;
|
||||
--ion-color-danger-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-danger-shade: #e04055;
|
||||
--ion-color-danger-tint: #ff5b71;
|
||||
|
||||
--ion-color-dark: #f4f5f8;
|
||||
--ion-color-dark-rgb: 244, 245, 248;
|
||||
--ion-color-dark-contrast: #000000;
|
||||
--ion-color-dark-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-dark-shade: #d7d8da;
|
||||
--ion-color-dark-tint: #f5f6f9;
|
||||
|
||||
--ion-color-medium: #989aa2;
|
||||
--ion-color-medium-rgb: 152, 154, 162;
|
||||
--ion-color-medium-contrast: #000000;
|
||||
--ion-color-medium-contrast-rgb: 0, 0, 0;
|
||||
--ion-color-medium-shade: #86888f;
|
||||
--ion-color-medium-tint: #a2a4ab;
|
||||
|
||||
--ion-color-light: #222428;
|
||||
--ion-color-light-rgb: 34, 36, 40;
|
||||
--ion-color-light-contrast: #ffffff;
|
||||
--ion-color-light-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-light-shade: #1e2023;
|
||||
--ion-color-light-tint: #383a3e;
|
||||
}
|
||||
|
||||
/*
|
||||
* iOS Dark Theme
|
||||
* -------------------------------------------
|
||||
*/
|
||||
|
||||
.ios body.dark {
|
||||
--ion-background-color: #000000;
|
||||
--ion-background-color-rgb: 0, 0, 0;
|
||||
|
||||
--ion-text-color: #ffffff;
|
||||
--ion-text-color-rgb: 255, 255, 255;
|
||||
|
||||
--ion-color-step-50: #0d0d0d;
|
||||
--ion-color-step-100: #1a1a1a;
|
||||
--ion-color-step-150: #262626;
|
||||
--ion-color-step-200: #333333;
|
||||
--ion-color-step-250: #404040;
|
||||
--ion-color-step-300: #4d4d4d;
|
||||
--ion-color-step-350: #595959;
|
||||
--ion-color-step-400: #666666;
|
||||
--ion-color-step-450: #737373;
|
||||
--ion-color-step-500: #808080;
|
||||
--ion-color-step-550: #8c8c8c;
|
||||
--ion-color-step-600: #999999;
|
||||
--ion-color-step-650: #a6a6a6;
|
||||
--ion-color-step-700: #b3b3b3;
|
||||
--ion-color-step-750: #bfbfbf;
|
||||
--ion-color-step-800: #cccccc;
|
||||
--ion-color-step-850: #d9d9d9;
|
||||
--ion-color-step-900: #e6e6e6;
|
||||
--ion-color-step-950: #f2f2f2;
|
||||
|
||||
--ion-item-background: #000000;
|
||||
|
||||
--ion-card-background: #1c1c1d;
|
||||
}
|
||||
|
||||
.ios body.dark ion-modal {
|
||||
--ion-background-color: var(--ion-color-step-100);
|
||||
--ion-toolbar-background: var(--ion-color-step-150);
|
||||
--ion-toolbar-border-color: var(--ion-color-step-250);
|
||||
--ion-item-background: var(--ion-color-step-150);
|
||||
}
|
||||
|
||||
/*
|
||||
* Material Design Dark Theme
|
||||
* -------------------------------------------
|
||||
*/
|
||||
|
||||
.md body.dark {
|
||||
--ion-background-color: #121212;
|
||||
--ion-background-color-rgb: 18, 18, 18;
|
||||
|
||||
--ion-text-color: #ffffff;
|
||||
--ion-text-color-rgb: 255, 255, 255;
|
||||
|
||||
--ion-border-color: #222222;
|
||||
|
||||
--ion-color-step-50: #1e1e1e;
|
||||
--ion-color-step-100: #2a2a2a;
|
||||
--ion-color-step-150: #363636;
|
||||
--ion-color-step-200: #414141;
|
||||
--ion-color-step-250: #4d4d4d;
|
||||
--ion-color-step-300: #595959;
|
||||
--ion-color-step-350: #656565;
|
||||
--ion-color-step-400: #717171;
|
||||
--ion-color-step-450: #7d7d7d;
|
||||
--ion-color-step-500: #898989;
|
||||
--ion-color-step-550: #949494;
|
||||
--ion-color-step-600: #a0a0a0;
|
||||
--ion-color-step-650: #acacac;
|
||||
--ion-color-step-700: #b8b8b8;
|
||||
--ion-color-step-750: #c4c4c4;
|
||||
--ion-color-step-800: #d0d0d0;
|
||||
--ion-color-step-850: #dbdbdb;
|
||||
--ion-color-step-900: #e7e7e7;
|
||||
--ion-color-step-950: #f3f3f3;
|
||||
|
||||
--ion-item-background: #1e1e1e;
|
||||
|
||||
--ion-toolbar-background: #1f1f1f;
|
||||
|
||||
--ion-tab-bar-background: #1f1f1f;
|
||||
|
||||
--ion-card-background: #1e1e1e;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -231,15 +75,15 @@
|
||||
const colorDatetime = document.querySelector('#color-datetime');
|
||||
const colorName = document.querySelector('#color-name');
|
||||
const colorSelect = document.querySelector('ion-select');
|
||||
const darkModeToggle = document.querySelector('ion-checkbox');
|
||||
const darkModeCheckbox = document.querySelector('ion-checkbox');
|
||||
|
||||
colorSelect.addEventListener('ionChange', (ev) => {
|
||||
colorDatetime.color = ev.detail.value;
|
||||
colorName.innerHTML = ev.detail.value;
|
||||
});
|
||||
|
||||
darkModeToggle.addEventListener('ionChange', (ev) => {
|
||||
document.body.classList.toggle('dark');
|
||||
darkModeCheckbox.addEventListener('ionChange', (ev) => {
|
||||
document.documentElement.classList.toggle('ion-palette-dark');
|
||||
});
|
||||
</script>
|
||||
</ion-app>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -366,6 +366,7 @@ export class Input implements ComponentInterface {
|
||||
* such as [type] in Angular.
|
||||
*/
|
||||
this.onTypeChange();
|
||||
this.debounceChanged();
|
||||
}
|
||||
|
||||
componentDidRender() {
|
||||
@@ -782,6 +783,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;
|
||||
|
||||
@@ -7,10 +7,7 @@ configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => {
|
||||
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.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user