mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
Compare commits
1 Commits
new
...
datetime-r
| Author | SHA1 | Date | |
|---|---|---|---|
|
674bfeb0c8 |
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
|
||||
- v8.x (Beta)
|
||||
- Nightly
|
||||
multiple: true
|
||||
validations:
|
||||
|
||||
2
.github/workflows/release.yml
vendored
2
.github/workflows/release.yml
vendored
@@ -22,6 +22,8 @@ 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".
|
||||
|
||||
12
CHANGELOG.md
12
CHANGELOG.md
@@ -3,18 +3,6 @@
|
||||
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
|
||||
|
||||
@@ -3,18 +3,6 @@
|
||||
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
|
||||
|
||||
30
core/package-lock.json
generated
30
core/package-lock.json
generated
@@ -1,15 +1,15 @@
|
||||
{
|
||||
"name": "@ionic/core",
|
||||
"version": "8.0.1",
|
||||
"version": "8.0.0",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@ionic/core",
|
||||
"version": "8.0.1",
|
||||
"version": "8.0.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@stencil/core": "^4.17.1",
|
||||
"@stencil/core": "^4.12.2",
|
||||
"ionicons": "^7.2.2",
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
@@ -660,9 +660,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@capacitor/core": {
|
||||
"version": "5.7.5",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.5.tgz",
|
||||
"integrity": "sha512-babBo26lgIyKkAOr/AbPq5wwi9I4uHDP0lBteJq7p4xZElA6tAA8mD3xRH1/4EKmZ4+acYpKmmyegX3zsVh37A==",
|
||||
"version": "5.7.4",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.4.tgz",
|
||||
"integrity": "sha512-iZBgvx3o4amzKv5ttA+QHB6i7cxK+/mYpCQd1tnSdipg6ZkvfBhg1HkzhEqHk+I7MNur+QwgYDZho9+ycHRwOw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"tslib": "^2.1.0"
|
||||
@@ -1786,9 +1786,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@stencil/core": {
|
||||
"version": "4.17.1",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.1.tgz",
|
||||
"integrity": "sha512-nlARe1QtK5abnCG8kPQKJMWiELg39vKabvf3ebm6YEhQA35CgrxC1pVYTsYq3yktJKoY+k+VzGRnATLKyaLbvA==",
|
||||
"version": "4.15.0",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.15.0.tgz",
|
||||
"integrity": "sha512-C5syM3chCyxX0Os5M+ZWrBujjqwUfrTb87YiLr8RC+kMTmIpnRvvtj8/s3QYDGdDENGRxGkBpeboVh82IGqk0w==",
|
||||
"bin": {
|
||||
"stencil": "bin/stencil"
|
||||
},
|
||||
@@ -10703,9 +10703,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"@capacitor/core": {
|
||||
"version": "5.7.5",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.5.tgz",
|
||||
"integrity": "sha512-babBo26lgIyKkAOr/AbPq5wwi9I4uHDP0lBteJq7p4xZElA6tAA8mD3xRH1/4EKmZ4+acYpKmmyegX3zsVh37A==",
|
||||
"version": "5.7.4",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.4.tgz",
|
||||
"integrity": "sha512-iZBgvx3o4amzKv5ttA+QHB6i7cxK+/mYpCQd1tnSdipg6ZkvfBhg1HkzhEqHk+I7MNur+QwgYDZho9+ycHRwOw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"tslib": "^2.1.0"
|
||||
@@ -11516,9 +11516,9 @@
|
||||
"requires": {}
|
||||
},
|
||||
"@stencil/core": {
|
||||
"version": "4.17.1",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.1.tgz",
|
||||
"integrity": "sha512-nlARe1QtK5abnCG8kPQKJMWiELg39vKabvf3ebm6YEhQA35CgrxC1pVYTsYq3yktJKoY+k+VzGRnATLKyaLbvA=="
|
||||
"version": "4.15.0",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.15.0.tgz",
|
||||
"integrity": "sha512-C5syM3chCyxX0Os5M+ZWrBujjqwUfrTb87YiLr8RC+kMTmIpnRvvtj8/s3QYDGdDENGRxGkBpeboVh82IGqk0w=="
|
||||
},
|
||||
"@stencil/react-output-target": {
|
||||
"version": "0.5.3",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ionic/core",
|
||||
"version": "8.0.1",
|
||||
"version": "8.0.0",
|
||||
"description": "Base components for Ionic",
|
||||
"keywords": [
|
||||
"ionic",
|
||||
@@ -31,7 +31,7 @@
|
||||
"loader/"
|
||||
],
|
||||
"dependencies": {
|
||||
"@stencil/core": "^4.17.1",
|
||||
"@stencil/core": "^4.12.2",
|
||||
"ionicons": "^7.2.2",
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
|
||||
@@ -14,20 +14,6 @@
|
||||
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;
|
||||
$accordion-md-border-radius: 6px !default;
|
||||
|
||||
/// @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);
|
||||
$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;
|
||||
|
||||
/// @prop - Margin of the expanded accordion
|
||||
$accordion-md-expanded-margin: 16px;
|
||||
$accordion-md-expanded-margin: 16px !default;
|
||||
|
||||
@@ -4,16 +4,16 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Background color of the accordion
|
||||
$accordion-background-color: var(--ion-background-color, #ffffff);
|
||||
$accordion-background-color: var(--ion-background-color, #ffffff) !default;
|
||||
|
||||
/// @prop - Duration of the accordion transition
|
||||
$accordion-transition-duration: 300ms;
|
||||
$accordion-transition-duration: 300ms !default;
|
||||
|
||||
/// @prop - Timing function of the accordion transition
|
||||
$accordion-transition-easing: cubic-bezier(0.25, 0.8, 0.5, 1);
|
||||
$accordion-transition-easing: cubic-bezier(0.25, 0.8, 0.5, 1) !default;
|
||||
|
||||
/// @prop - Opacity of the disabled accordion
|
||||
$accordion-disabled-opacity: 0.4;
|
||||
$accordion-disabled-opacity: 0.4 !default;
|
||||
|
||||
/// @prop - Margin of the inset accordion
|
||||
$accordion-inset-margin: 16px;
|
||||
$accordion-inset-margin: 16px !default;
|
||||
|
||||
@@ -4,145 +4,145 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Text align of the action sheet
|
||||
$action-sheet-ios-text-align: center;
|
||||
$action-sheet-ios-text-align: center !default;
|
||||
|
||||
/// @prop - Padding top of the action sheet
|
||||
$action-sheet-ios-padding-top: 0;
|
||||
$action-sheet-ios-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the action sheet
|
||||
$action-sheet-ios-padding-end: 8px;
|
||||
$action-sheet-ios-padding-end: 8px !default;
|
||||
|
||||
/// @prop - Padding bottom of the action sheet
|
||||
$action-sheet-ios-padding-bottom: $action-sheet-ios-padding-top;
|
||||
$action-sheet-ios-padding-bottom: $action-sheet-ios-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the action sheet
|
||||
$action-sheet-ios-padding-start: $action-sheet-ios-padding-end;
|
||||
$action-sheet-ios-padding-start: $action-sheet-ios-padding-end !default;
|
||||
|
||||
/// @prop - Top margin of the action sheet button group
|
||||
$action-sheet-ios-group-margin-top: 10px;
|
||||
$action-sheet-ios-group-margin-top: 10px !default;
|
||||
|
||||
/// @prop - Bottom margin of the action sheet button group
|
||||
$action-sheet-ios-group-margin-bottom: 10px;
|
||||
$action-sheet-ios-group-margin-bottom: 10px !default;
|
||||
|
||||
/// @prop - Background color of the action sheet
|
||||
$action-sheet-ios-background-color: $overlay-ios-background-color;
|
||||
$action-sheet-ios-background-color: $overlay-ios-background-color !default;
|
||||
|
||||
/// @prop - Border radius of the action sheet
|
||||
$action-sheet-ios-border-radius: 13px;
|
||||
$action-sheet-ios-border-radius: 13px !default;
|
||||
|
||||
|
||||
// Action Sheet Title
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top of the action sheet title
|
||||
$action-sheet-ios-title-padding-top: 14px;
|
||||
$action-sheet-ios-title-padding-top: 14px !default;
|
||||
|
||||
/// @prop - Padding end of the action sheet title
|
||||
$action-sheet-ios-title-padding-end: 10px;
|
||||
$action-sheet-ios-title-padding-end: 10px !default;
|
||||
|
||||
/// @prop - Padding bottom of the action sheet title
|
||||
$action-sheet-ios-title-padding-bottom: 13px;
|
||||
$action-sheet-ios-title-padding-bottom: 13px !default;
|
||||
|
||||
/// @prop - Padding start of the action sheet title
|
||||
$action-sheet-ios-title-padding-start: $action-sheet-ios-title-padding-end;
|
||||
$action-sheet-ios-title-padding-start: $action-sheet-ios-title-padding-end !default;
|
||||
|
||||
/// @prop - Color of the action sheet title
|
||||
$action-sheet-ios-title-color: $text-color-step-600;
|
||||
$action-sheet-ios-title-color: $text-color-step-600 !default;
|
||||
|
||||
/// @prop - Font size of the action sheet title
|
||||
$action-sheet-ios-title-font-size: dynamic-font-min(1, 13px);
|
||||
$action-sheet-ios-title-font-size: dynamic-font-min(1, 13px) !default;
|
||||
|
||||
/// @prop - Font weight of the action sheet title
|
||||
$action-sheet-ios-title-font-weight: 400;
|
||||
$action-sheet-ios-title-font-weight: 400 !default;
|
||||
|
||||
/// @prop - Font weight of the action sheet title when it has a sub title
|
||||
$action-sheet-ios-title-with-sub-title-font-weight: 600;
|
||||
$action-sheet-ios-title-with-sub-title-font-weight: 600 !default;
|
||||
|
||||
// Action Sheet Subtitle
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the action sheet sub title
|
||||
$action-sheet-ios-sub-title-font-size: dynamic-font-min(1, 13px);
|
||||
$action-sheet-ios-sub-title-font-size: dynamic-font-min(1, 13px) !default;
|
||||
|
||||
/// @prop - Padding top of the action sheet sub title
|
||||
$action-sheet-ios-sub-title-padding-top: 6px;
|
||||
$action-sheet-ios-sub-title-padding-top: 6px !default;
|
||||
|
||||
/// @prop - Padding end of the action sheet sub title
|
||||
$action-sheet-ios-sub-title-padding-end: 0;
|
||||
$action-sheet-ios-sub-title-padding-end: 0 !default;
|
||||
|
||||
/// @prop - Padding bottom of the action sheet sub title
|
||||
$action-sheet-ios-sub-title-padding-bottom: 0;
|
||||
$action-sheet-ios-sub-title-padding-bottom: 0 !default;
|
||||
|
||||
/// @prop - Padding start of the action sheet sub title
|
||||
$action-sheet-ios-sub-title-padding-start: $action-sheet-ios-sub-title-padding-end;
|
||||
$action-sheet-ios-sub-title-padding-start: $action-sheet-ios-sub-title-padding-end !default;
|
||||
|
||||
|
||||
// Action Sheet Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Minimum height of the action sheet button
|
||||
$action-sheet-ios-button-height: 56px;
|
||||
$action-sheet-ios-button-height: 56px !default;
|
||||
|
||||
/// @prop - Padding of the action sheet button
|
||||
$action-sheet-ios-button-padding: 14px;
|
||||
$action-sheet-ios-button-padding: 14px !default;
|
||||
|
||||
/// @prop - Text color of the action sheet button
|
||||
$action-sheet-ios-button-text-color: ion-color(primary, base);
|
||||
$action-sheet-ios-button-text-color: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Font size of the action sheet button icon
|
||||
$action-sheet-ios-button-icon-font-size: dynamic-font-min(1, 28px);
|
||||
$action-sheet-ios-button-icon-font-size: dynamic-font-min(1, 28px) !default;
|
||||
|
||||
/// @prop - Padding right of the action sheet button icon
|
||||
$action-sheet-ios-button-icon-padding-right: .3em;
|
||||
$action-sheet-ios-button-icon-padding-right: .3em !default;
|
||||
|
||||
/// @prop - Font size of the action sheet button
|
||||
$action-sheet-ios-button-font-size: dynamic-font-min(1, 20px);
|
||||
$action-sheet-ios-button-font-size: dynamic-font-min(1, 20px) !default;
|
||||
|
||||
/// @prop - Border color alpha of the action sheet button
|
||||
$action-sheet-ios-button-border-color-alpha: .08;
|
||||
$action-sheet-ios-button-border-color-alpha: .08 !default;
|
||||
|
||||
/// @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);
|
||||
$action-sheet-ios-button-border-color: rgba($text-color-rgb, $action-sheet-ios-button-border-color-alpha) !default;
|
||||
|
||||
/// @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;
|
||||
$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;
|
||||
|
||||
/// @prop - Background color of the activated action sheet button
|
||||
$action-sheet-ios-button-background-activated: $text-color;
|
||||
$action-sheet-ios-button-background-activated: $text-color !default;
|
||||
|
||||
/// @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));
|
||||
$action-sheet-ios-button-background-selected: var(--ion-color-step-150, var(--ion-background-color-step-150, $background-color)) !default;
|
||||
|
||||
/// @prop - Destructive text color of the action sheet button
|
||||
$action-sheet-ios-button-destructive-text-color: ion-color(danger, base);
|
||||
$action-sheet-ios-button-destructive-text-color: ion-color(danger, base) !default;
|
||||
|
||||
/// @prop - Font weight of the action sheet cancel button
|
||||
$action-sheet-ios-button-cancel-font-weight: 600;
|
||||
$action-sheet-ios-button-cancel-font-weight: 600 !default;
|
||||
|
||||
|
||||
// Action Sheet Translucent
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Background color alpha of the action sheet when translucent
|
||||
$action-sheet-ios-translucent-background-color-alpha: .8;
|
||||
$action-sheet-ios-translucent-background-color-alpha: .8 !default;
|
||||
|
||||
/// @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);
|
||||
$action-sheet-ios-translucent-background-color: rgba($background-color-rgb, $action-sheet-ios-translucent-background-color-alpha) !default;
|
||||
|
||||
/// @prop - Border color alpha of the action sheet when translucent
|
||||
$action-sheet-ios-translucent-border-color-alpha: .4;
|
||||
$action-sheet-ios-translucent-border-color-alpha: .4 !default;
|
||||
|
||||
/// @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);
|
||||
$action-sheet-ios-translucent-border-color: rgba($background-color-rgb, $action-sheet-ios-translucent-border-color-alpha) !default;
|
||||
|
||||
/// @prop - Background color alpha of the activated action sheet when translucent
|
||||
$action-sheet-ios-translucent-background-color-activated-alpha: .7;
|
||||
$action-sheet-ios-translucent-background-color-activated-alpha: .7 !default;
|
||||
|
||||
/// @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);
|
||||
$action-sheet-ios-translucent-background-color-activated: rgba($background-color-rgb, $action-sheet-ios-translucent-background-color-activated-alpha) !default;
|
||||
|
||||
/// @prop - Filter of the translucent action-sheet group
|
||||
$action-sheet-ios-group-translucent-filter: saturate(280%) blur(20px);
|
||||
$action-sheet-ios-group-translucent-filter: saturate(280%) blur(20px) !default;
|
||||
|
||||
/// @prop - Filter of the translucent action-sheet button
|
||||
$action-sheet-ios-button-translucent-filter: saturate(120%);
|
||||
$action-sheet-ios-button-translucent-filter: saturate(120%) !default;
|
||||
|
||||
@@ -4,100 +4,100 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Text align of the action sheet
|
||||
$action-sheet-md-text-align: start;
|
||||
$action-sheet-md-text-align: start !default;
|
||||
|
||||
/// @prop - Background color of the action sheet
|
||||
$action-sheet-md-background-color: $overlay-md-background-color;
|
||||
$action-sheet-md-background-color: $overlay-md-background-color !default;
|
||||
|
||||
/// @prop - Padding top of the action sheet
|
||||
$action-sheet-md-padding-top: 0;
|
||||
$action-sheet-md-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding bottom of the action sheet
|
||||
$action-sheet-md-padding-bottom: var(--ion-safe-area-bottom);
|
||||
$action-sheet-md-padding-bottom: var(--ion-safe-area-bottom) !default;
|
||||
|
||||
|
||||
// Action Sheet Title
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Height of the action sheet title
|
||||
$action-sheet-md-title-height: 60px;
|
||||
$action-sheet-md-title-height: 60px !default;
|
||||
|
||||
/// @prop - Color of the action sheet title
|
||||
$action-sheet-md-title-color: rgba($text-color-rgb, 0.54);
|
||||
$action-sheet-md-title-color: rgba($text-color-rgb, 0.54) !default;
|
||||
|
||||
/// @prop - Font size of the action sheet title
|
||||
$action-sheet-md-title-font-size: dynamic-font(16px);
|
||||
$action-sheet-md-title-font-size: dynamic-font(16px) !default;
|
||||
|
||||
/// @prop - Padding top of the action sheet title
|
||||
$action-sheet-md-title-padding-top: 20px;
|
||||
$action-sheet-md-title-padding-top: 20px !default;
|
||||
|
||||
/// @prop - Padding end of the action sheet title
|
||||
$action-sheet-md-title-padding-end: 16px;
|
||||
$action-sheet-md-title-padding-end: 16px !default;
|
||||
|
||||
/// @prop - Padding bottom of the action sheet title
|
||||
$action-sheet-md-title-padding-bottom: 17px;
|
||||
$action-sheet-md-title-padding-bottom: 17px !default;
|
||||
|
||||
/// @prop - Padding start of the action sheet title
|
||||
$action-sheet-md-title-padding-start: $action-sheet-md-title-padding-end;
|
||||
$action-sheet-md-title-padding-start: $action-sheet-md-title-padding-end !default;
|
||||
|
||||
|
||||
// Action Sheet Subtitle
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the action sheet sub title
|
||||
$action-sheet-md-sub-title-font-size: dynamic-font(14px);
|
||||
$action-sheet-md-sub-title-font-size: dynamic-font(14px) !default;
|
||||
|
||||
/// @prop - Padding top of the action sheet sub title
|
||||
$action-sheet-md-sub-title-padding-top: 16px;
|
||||
$action-sheet-md-sub-title-padding-top: 16px !default;
|
||||
|
||||
/// @prop - Padding end of the action sheet sub title
|
||||
$action-sheet-md-sub-title-padding-end: 0;
|
||||
$action-sheet-md-sub-title-padding-end: 0 !default;
|
||||
|
||||
/// @prop - Padding bottom of the action sheet sub title
|
||||
$action-sheet-md-sub-title-padding-bottom: 0;
|
||||
$action-sheet-md-sub-title-padding-bottom: 0 !default;
|
||||
|
||||
/// @prop - Padding start of the action sheet sub title
|
||||
$action-sheet-md-sub-title-padding-start: $action-sheet-md-sub-title-padding-end;
|
||||
$action-sheet-md-sub-title-padding-start: $action-sheet-md-sub-title-padding-end !default;
|
||||
|
||||
|
||||
// Action Sheet Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Minimum height of the action sheet button
|
||||
$action-sheet-md-button-height: 52px;
|
||||
$action-sheet-md-button-height: 52px !default;
|
||||
|
||||
/// @prop - Text color of the action sheet button
|
||||
$action-sheet-md-button-text-color: $text-color-step-150;
|
||||
$action-sheet-md-button-text-color: $text-color-step-150 !default;
|
||||
|
||||
/// @prop - Font size of the action sheet button
|
||||
$action-sheet-md-button-font-size: dynamic-font(16px);
|
||||
$action-sheet-md-button-font-size: dynamic-font(16px) !default;
|
||||
|
||||
/// @prop - Padding top of the action sheet button
|
||||
$action-sheet-md-button-padding-top: 12px;
|
||||
$action-sheet-md-button-padding-top: 12px !default;
|
||||
|
||||
/// @prop - Padding end of the action sheet button
|
||||
$action-sheet-md-button-padding-end: 16px;
|
||||
$action-sheet-md-button-padding-end: 16px !default;
|
||||
|
||||
/// @prop - Padding bottom of the action sheet button
|
||||
$action-sheet-md-button-padding-bottom: $action-sheet-md-button-padding-top;
|
||||
$action-sheet-md-button-padding-bottom: $action-sheet-md-button-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the action sheet button
|
||||
$action-sheet-md-button-padding-start: $action-sheet-md-button-padding-end;
|
||||
$action-sheet-md-button-padding-start: $action-sheet-md-button-padding-end !default;
|
||||
|
||||
// Action Sheet Icon
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the icon in the action sheet button
|
||||
$action-sheet-md-icon-font-size: dynamic-font(24px);
|
||||
$action-sheet-md-icon-font-size: dynamic-font(24px) !default;
|
||||
|
||||
/// @prop - Margin top of the icon in the action sheet button
|
||||
$action-sheet-md-icon-margin-top: 0;
|
||||
$action-sheet-md-icon-margin-top: 0 !default;
|
||||
|
||||
/// @prop - Margin end of the icon in the action sheet button
|
||||
$action-sheet-md-icon-margin-end: 32px;
|
||||
$action-sheet-md-icon-margin-end: 32px !default;
|
||||
|
||||
/// @prop - Margin bottom of the icon in the action sheet button
|
||||
$action-sheet-md-icon-margin-bottom: 0;
|
||||
$action-sheet-md-icon-margin-bottom: 0 !default;
|
||||
|
||||
/// @prop - Margin start of the icon in the action sheet button
|
||||
$action-sheet-md-icon-margin-start: 0;
|
||||
$action-sheet-md-icon-margin-start: 0 !default;
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Width of the action sheet
|
||||
$action-sheet-width: 100%;
|
||||
$action-sheet-width: 100% !default;
|
||||
|
||||
/// @prop - Maximum width of the action sheet
|
||||
$action-sheet-max-width: 500px;
|
||||
$action-sheet-max-width: 500px !default;
|
||||
|
||||
@@ -6,136 +6,136 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the alert
|
||||
$alert-ios-font-size: dynamic-font-min(1, 14px);
|
||||
$alert-ios-font-size: dynamic-font-min(1, 14px) !default;
|
||||
|
||||
/// @prop - Max width of the alert
|
||||
$alert-ios-max-width: dynamic-font-clamp(1, 270px, 1.2);
|
||||
$alert-ios-max-width: dynamic-font-clamp(1, 270px, 1.2) !default;
|
||||
|
||||
/// @prop - Border radius of the alert
|
||||
$alert-ios-border-radius: 13px;
|
||||
$alert-ios-border-radius: 13px !default;
|
||||
|
||||
/// @prop - Background color of the alert
|
||||
$alert-ios-background-color: $overlay-ios-background-color;
|
||||
$alert-ios-background-color: $overlay-ios-background-color !default;
|
||||
|
||||
/// @prop - Background color alpha of the alert when translucent
|
||||
$alert-ios-translucent-background-color-alpha: .9;
|
||||
$alert-ios-translucent-background-color-alpha: .9 !default;
|
||||
|
||||
/// @prop - Background color of the alert when translucent
|
||||
$alert-ios-translucent-background-color: rgba($background-color-rgb, $alert-ios-translucent-background-color-alpha);
|
||||
$alert-ios-translucent-background-color: rgba($background-color-rgb, $alert-ios-translucent-background-color-alpha) !default;
|
||||
|
||||
/// @prop - Box shadow of the alert
|
||||
$alert-ios-box-shadow: none;
|
||||
$alert-ios-box-shadow: none !default;
|
||||
|
||||
/// @prop - Padding top of the alert head
|
||||
$alert-ios-head-padding-top: 12px;
|
||||
$alert-ios-head-padding-top: 12px !default;
|
||||
|
||||
/// @prop - Padding end of the alert head
|
||||
$alert-ios-head-padding-end: 16px;
|
||||
$alert-ios-head-padding-end: 16px !default;
|
||||
|
||||
/// @prop - Padding bottom of the alert head
|
||||
$alert-ios-head-padding-bottom: 7px;
|
||||
$alert-ios-head-padding-bottom: 7px !default;
|
||||
|
||||
/// @prop - Padding start of the alert head
|
||||
$alert-ios-head-padding-start: $alert-ios-head-padding-end;
|
||||
$alert-ios-head-padding-start: $alert-ios-head-padding-end !default;
|
||||
|
||||
/// @prop - Text align of the alert head
|
||||
$alert-ios-head-text-align: center;
|
||||
$alert-ios-head-text-align: center !default;
|
||||
|
||||
/// @prop - Color of the alert title
|
||||
$alert-ios-title-color: $text-color;
|
||||
$alert-ios-title-color: $text-color !default;
|
||||
|
||||
/// @prop - Margin top of the alert title
|
||||
$alert-ios-title-margin-top: 8px;
|
||||
$alert-ios-title-margin-top: 8px !default;
|
||||
|
||||
/// @prop - Font size of the alert title
|
||||
$alert-ios-title-font-size: dynamic-font-min(1, 17px);
|
||||
$alert-ios-title-font-size: dynamic-font-min(1, 17px) !default;
|
||||
|
||||
/// @prop - Font weight of the alert title
|
||||
$alert-ios-title-font-weight: 600;
|
||||
$alert-ios-title-font-weight: 600 !default;
|
||||
|
||||
/// @prop - Font size of the alert sub title
|
||||
$alert-ios-sub-title-font-size: dynamic-font-min(1, 14px);
|
||||
$alert-ios-sub-title-font-size: dynamic-font-min(1, 14px) !default;
|
||||
|
||||
/// @prop - Text color of the alert sub title
|
||||
$alert-ios-sub-title-text-color: $text-color-step-400;
|
||||
$alert-ios-sub-title-text-color: $text-color-step-400 !default;
|
||||
|
||||
/// @prop - Padding top of the alert message
|
||||
$alert-ios-message-padding-top: 0;
|
||||
$alert-ios-message-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the alert message
|
||||
$alert-ios-message-padding-end: 16px;
|
||||
$alert-ios-message-padding-end: 16px !default;
|
||||
|
||||
/// @prop - Padding bottom of the alert message
|
||||
$alert-ios-message-padding-bottom: 21px;
|
||||
$alert-ios-message-padding-bottom: 21px !default;
|
||||
|
||||
/// @prop - Padding start of the alert message
|
||||
$alert-ios-message-padding-start: $alert-ios-message-padding-end;
|
||||
$alert-ios-message-padding-start: $alert-ios-message-padding-end !default;
|
||||
|
||||
/// @prop - Font size of the alert message
|
||||
$alert-ios-message-font-size: dynamic-font-min(1, 13px);
|
||||
$alert-ios-message-font-size: dynamic-font-min(1, 13px) !default;
|
||||
|
||||
/// @prop - Text align of the alert message
|
||||
$alert-ios-message-text-align: center;
|
||||
$alert-ios-message-text-align: center !default;
|
||||
|
||||
/// @prop - Text color of the alert message
|
||||
$alert-ios-message-text-color: $text-color;
|
||||
$alert-ios-message-text-color: $text-color !default;
|
||||
|
||||
/// @prop - Padding top of the alert empty message
|
||||
$alert-ios-message-empty-padding-top: 0;
|
||||
$alert-ios-message-empty-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the alert empty message
|
||||
$alert-ios-message-empty-padding-end: 0;
|
||||
$alert-ios-message-empty-padding-end: 0 !default;
|
||||
|
||||
/// @prop - Padding bottom of the alert empty message
|
||||
$alert-ios-message-empty-padding-bottom: 12px;
|
||||
$alert-ios-message-empty-padding-bottom: 12px !default;
|
||||
|
||||
/// @prop - Padding start of the alert empty message
|
||||
$alert-ios-message-empty-padding-start: 0;
|
||||
$alert-ios-message-empty-padding-start: 0 !default;
|
||||
|
||||
/// @prop - Maximum height of the alert content
|
||||
$alert-ios-content-max-height: 240px;
|
||||
$alert-ios-content-max-height: 240px !default;
|
||||
|
||||
/// @prop - Margin top of the alert input
|
||||
$alert-ios-input-margin-top: 10px;
|
||||
$alert-ios-input-margin-top: 10px !default;
|
||||
|
||||
/// @prop - Padding top on the alert input
|
||||
$alert-ios-input-padding-top: 7px;
|
||||
$alert-ios-input-padding-top: 7px !default;
|
||||
|
||||
/// @prop - Padding end on the alert input
|
||||
$alert-ios-input-padding-end: $alert-ios-input-padding-top;
|
||||
$alert-ios-input-padding-end: $alert-ios-input-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom on the alert input
|
||||
$alert-ios-input-padding-bottom: $alert-ios-input-padding-top;
|
||||
$alert-ios-input-padding-bottom: $alert-ios-input-padding-top !default;
|
||||
|
||||
/// @prop - Padding start on the alert input
|
||||
$alert-ios-input-padding-start: $alert-ios-input-padding-end;
|
||||
$alert-ios-input-padding-start: $alert-ios-input-padding-end !default;
|
||||
|
||||
/// @prop - Placeholder Color for input
|
||||
$alert-ios-input-placeholder-color: $placeholder-text-color;
|
||||
$alert-ios-input-placeholder-color: $placeholder-text-color !default;
|
||||
|
||||
/// @prop - Border color of the alert input
|
||||
$alert-ios-input-border-color: $background-color-step-250;
|
||||
$alert-ios-input-border-color: $background-color-step-250 !default;
|
||||
|
||||
/// @prop - Border of the alert input
|
||||
$alert-ios-input-border: $hairlines-width solid $alert-ios-input-border-color;
|
||||
$alert-ios-input-border: $hairlines-width solid $alert-ios-input-border-color !default;
|
||||
|
||||
/// @prop - Border radius of the alert input
|
||||
$alert-ios-input-border-radius: 7px;
|
||||
$alert-ios-input-border-radius: 7px !default;
|
||||
|
||||
/// @prop - Background color of the alert input
|
||||
$alert-ios-input-background-color: $background-color;
|
||||
$alert-ios-input-background-color: $background-color !default;
|
||||
|
||||
/// @prop - Flex wrap of the alert button group
|
||||
$alert-ios-button-group-flex-wrap: wrap;
|
||||
$alert-ios-button-group-flex-wrap: wrap !default;
|
||||
|
||||
/// @prop - Flex of the alert button
|
||||
$alert-ios-button-flex: 1 1 auto;
|
||||
$alert-ios-button-flex: 1 1 auto !default;
|
||||
|
||||
/// @prop - Margin of the alert button
|
||||
$alert-ios-button-margin: 0;
|
||||
$alert-ios-button-margin: 0 !default;
|
||||
|
||||
/// @prop - Min width of the alert button
|
||||
$alert-ios-button-min-width: 50%;
|
||||
$alert-ios-button-min-width: 50% !default;
|
||||
|
||||
/// @prop - Height of the alert button
|
||||
/**
|
||||
@@ -147,172 +147,172 @@ $alert-ios-button-min-width: 50%;
|
||||
* a hairline (<1px) width, this will cause subpixel rendering
|
||||
* differences across browsers.
|
||||
*/
|
||||
$alert-ios-button-height: dynamic-font-min(1, 44px);
|
||||
$alert-ios-button-height: dynamic-font-min(1, 44px) !default;
|
||||
|
||||
/// @prop - Padding of the alert button
|
||||
$alert-ios-button-padding: 8px;
|
||||
$alert-ios-button-padding: 8px !default;
|
||||
|
||||
/// @prop - Font size of the alert button
|
||||
$alert-ios-button-font-size: dynamic-font-min(1, 17px);
|
||||
$alert-ios-button-font-size: dynamic-font-min(1, 17px) !default;
|
||||
|
||||
/// @prop - Color of the text in the alert button
|
||||
$alert-ios-button-text-color: ion-color(primary, base);
|
||||
$alert-ios-button-text-color: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Destructive text color of the alert button
|
||||
$alert-ios-button-destructive-text-color: ion-color(danger, base);
|
||||
$alert-ios-button-destructive-text-color: ion-color(danger, base) !default;
|
||||
|
||||
/// @prop - Background color of the alert button
|
||||
$alert-ios-button-background-color: transparent;
|
||||
$alert-ios-button-background-color: transparent !default;
|
||||
|
||||
/// @prop - Background color alpha of the alert activated button
|
||||
$alert-ios-button-background-color-alpha-activated: .1;
|
||||
$alert-ios-button-background-color-alpha-activated: .1 !default;
|
||||
|
||||
/// @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);
|
||||
$alert-ios-button-background-color-activated: rgba($text-color-rgb, $alert-ios-button-background-color-alpha-activated) !default;
|
||||
|
||||
/// @prop - Border width of the alert button
|
||||
$alert-ios-button-border-width: $hairlines-width;
|
||||
$alert-ios-button-border-width: $hairlines-width !default;
|
||||
|
||||
/// @prop - Border style of the alert button
|
||||
$alert-ios-button-border-style: solid;
|
||||
$alert-ios-button-border-style: solid !default;
|
||||
|
||||
/// @prop - Border color alpha of the alert button
|
||||
$alert-ios-button-border-color-alpha: .2;
|
||||
$alert-ios-button-border-color-alpha: .2 !default;
|
||||
|
||||
/// @prop - Border color of the alert button
|
||||
$alert-ios-button-border-color: rgba($text-color-rgb, $alert-ios-button-border-color-alpha);
|
||||
$alert-ios-button-border-color: rgba($text-color-rgb, $alert-ios-button-border-color-alpha) !default;
|
||||
|
||||
/// @prop - Border radius of the alert button
|
||||
$alert-ios-button-border-radius: 0;
|
||||
$alert-ios-button-border-radius: 0 !default;
|
||||
|
||||
/// @prop - Font weight of the main text on the alert button
|
||||
$alert-ios-button-main-font-weight: bold;
|
||||
$alert-ios-button-main-font-weight: bold !default;
|
||||
|
||||
/// @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;
|
||||
$alert-ios-list-border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color !default;
|
||||
|
||||
/// @prop - Padding top on the label for the radio alert
|
||||
$alert-ios-radio-label-padding-top: 13px;
|
||||
$alert-ios-radio-label-padding-top: 13px !default;
|
||||
|
||||
/// @prop - Padding end on the label for the radio alert
|
||||
$alert-ios-radio-label-padding-end: $alert-ios-radio-label-padding-top;
|
||||
$alert-ios-radio-label-padding-end: $alert-ios-radio-label-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom on the label for the radio alert
|
||||
$alert-ios-radio-label-padding-bottom: $alert-ios-radio-label-padding-top;
|
||||
$alert-ios-radio-label-padding-bottom: $alert-ios-radio-label-padding-top !default;
|
||||
|
||||
/// @prop - Padding start on the label for the radio alert
|
||||
$alert-ios-radio-label-padding-start: $alert-ios-radio-label-padding-end;
|
||||
$alert-ios-radio-label-padding-start: $alert-ios-radio-label-padding-end !default;
|
||||
|
||||
/// @prop - Text color of the label for the radio alert
|
||||
$alert-ios-radio-label-text-color: $text-color;
|
||||
$alert-ios-radio-label-text-color: $text-color !default;
|
||||
|
||||
/// @prop - Text color of the label for the checked radio alert
|
||||
$alert-ios-radio-label-text-color-checked: $alert-ios-button-text-color;
|
||||
$alert-ios-radio-label-text-color-checked: $alert-ios-button-text-color !default;
|
||||
|
||||
/// @prop - Min width of the radio alert
|
||||
$alert-ios-radio-min-width: 30px;
|
||||
$alert-ios-radio-min-width: 30px !default;
|
||||
|
||||
/// @prop - Top of the icon in the radio alert
|
||||
$alert-ios-radio-icon-top: -7px;
|
||||
$alert-ios-radio-icon-top: -7px !default;
|
||||
|
||||
/// @prop - Start of the icon in the radio alert
|
||||
$alert-ios-radio-icon-start: 7px;
|
||||
$alert-ios-radio-icon-start: 7px !default;
|
||||
|
||||
/// @prop - Width of the icon in the radio alert
|
||||
$alert-ios-radio-icon-width: 6px;
|
||||
$alert-ios-radio-icon-width: 6px !default;
|
||||
|
||||
/// @prop - Height of the icon in the radio alert
|
||||
$alert-ios-radio-icon-height: 12px;
|
||||
$alert-ios-radio-icon-height: 12px !default;
|
||||
|
||||
/// @prop - Border width of the icon in the radio alert
|
||||
$alert-ios-radio-icon-border-width: 2px;
|
||||
$alert-ios-radio-icon-border-width: 2px !default;
|
||||
|
||||
/// @prop - Border style of the icon in the radio alert
|
||||
$alert-ios-radio-icon-border-style: solid;
|
||||
$alert-ios-radio-icon-border-style: solid !default;
|
||||
|
||||
/// @prop - Border color of the icon in the radio alert
|
||||
$alert-ios-radio-icon-border-color: $alert-ios-button-text-color;
|
||||
$alert-ios-radio-icon-border-color: $alert-ios-button-text-color !default;
|
||||
|
||||
/// @prop - Transform of the icon in the radio alert
|
||||
$alert-ios-radio-icon-transform: rotate(45deg);
|
||||
$alert-ios-radio-icon-transform: rotate(45deg) !default;
|
||||
|
||||
/// @prop - Padding top of the label for the checkbox in the alert
|
||||
$alert-ios-checkbox-label-padding-top: 13px;
|
||||
$alert-ios-checkbox-label-padding-top: 13px !default;
|
||||
|
||||
/// @prop - Padding end of the label for the checkbox in the alert
|
||||
$alert-ios-checkbox-label-padding-end: $alert-ios-checkbox-label-padding-top;
|
||||
$alert-ios-checkbox-label-padding-end: $alert-ios-checkbox-label-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom of the label for the checkbox in the alert
|
||||
$alert-ios-checkbox-label-padding-bottom: $alert-ios-checkbox-label-padding-top;
|
||||
$alert-ios-checkbox-label-padding-bottom: $alert-ios-checkbox-label-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the label for the checkbox in the alert
|
||||
$alert-ios-checkbox-label-padding-start: $alert-ios-checkbox-label-padding-end;
|
||||
$alert-ios-checkbox-label-padding-start: $alert-ios-checkbox-label-padding-end !default;
|
||||
|
||||
/// @prop - Text color of the label for the checkbox in the alert
|
||||
$alert-ios-checkbox-label-text-color: $text-color;
|
||||
$alert-ios-checkbox-label-text-color: $text-color !default;
|
||||
|
||||
/// @prop - Margin top of the checkbox in the alert
|
||||
$alert-ios-checkbox-margin-top: 10px;
|
||||
$alert-ios-checkbox-margin-top: 10px !default;
|
||||
|
||||
/// @prop - Margin end of the checkbox in the alert
|
||||
$alert-ios-checkbox-margin-end: 6px;
|
||||
$alert-ios-checkbox-margin-end: 6px !default;
|
||||
|
||||
/// @prop - Margin bottom of the checkbox in the alert
|
||||
$alert-ios-checkbox-margin-bottom: 10px;
|
||||
$alert-ios-checkbox-margin-bottom: 10px !default;
|
||||
|
||||
/// @prop - Margin start of the checkbox in the alert
|
||||
$alert-ios-checkbox-margin-start: 16px;
|
||||
$alert-ios-checkbox-margin-start: 16px !default;
|
||||
|
||||
/// @prop - Size of the checkbox in the alert
|
||||
$alert-ios-checkbox-size: dynamic-font-max(22px, 2.538);
|
||||
$alert-ios-checkbox-size: dynamic-font-max(22px, 2.538) !default;
|
||||
|
||||
/// @prop - Border width of the checkbox in the alert
|
||||
$alert-ios-checkbox-border-width: dynamic-font(2px);
|
||||
$alert-ios-checkbox-border-width: dynamic-font(2px) !default;
|
||||
|
||||
/// @prop - Border style of the checkbox in the alert
|
||||
$alert-ios-checkbox-border-style: solid;
|
||||
$alert-ios-checkbox-border-style: solid !default;
|
||||
|
||||
/// @prop - Border radius of the checkbox in the alert
|
||||
$alert-ios-checkbox-border-radius: 50%;
|
||||
$alert-ios-checkbox-border-radius: 50% !default;
|
||||
|
||||
/// @prop - Border color of the checkbox in the alert when off
|
||||
$alert-ios-checkbox-border-color-off: $item-ios-border-color;
|
||||
$alert-ios-checkbox-border-color-off: $item-ios-border-color !default;
|
||||
|
||||
/// @prop - Border color of the checkbox in the alert when on
|
||||
$alert-ios-checkbox-border-color-on: ion-color(primary, base);
|
||||
$alert-ios-checkbox-border-color-on: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Background color of the checkbox in the alert when off
|
||||
$alert-ios-checkbox-background-color-off: $item-ios-background;
|
||||
$alert-ios-checkbox-background-color-off: $item-ios-background !default;
|
||||
|
||||
/// @prop - Background color of the checkbox in the alert when on
|
||||
$alert-ios-checkbox-background-color-on: ion-color(primary, base);
|
||||
$alert-ios-checkbox-background-color-on: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Top of the icon in the checkbox alert
|
||||
$alert-ios-checkbox-icon-top: calc($alert-ios-checkbox-size / 8);
|
||||
$alert-ios-checkbox-icon-top: calc($alert-ios-checkbox-size / 8) !default;
|
||||
|
||||
/// @prop - Start of the icon in the checkbox alert
|
||||
$alert-ios-checkbox-icon-start: calc($alert-ios-checkbox-size / 3);
|
||||
$alert-ios-checkbox-icon-start: calc($alert-ios-checkbox-size / 3) !default;
|
||||
|
||||
/// @prop - Width of the icon in the checkbox alert
|
||||
$alert-ios-checkbox-icon-width: calc($alert-ios-checkbox-size / 6 + 1px);
|
||||
$alert-ios-checkbox-icon-width: calc($alert-ios-checkbox-size / 6 + 1px) !default;
|
||||
|
||||
/// @prop - Height of the icon in the checkbox alert
|
||||
$alert-ios-checkbox-icon-height: calc($alert-ios-checkbox-size * 0.5);
|
||||
$alert-ios-checkbox-icon-height: calc($alert-ios-checkbox-size * 0.5) !default;
|
||||
|
||||
/// @prop - Border width of the icon in the checkbox alert
|
||||
$alert-ios-checkbox-icon-border-width: $alert-ios-checkbox-border-width;
|
||||
$alert-ios-checkbox-icon-border-width: $alert-ios-checkbox-border-width !default;
|
||||
|
||||
/// @prop - Border style of the icon in the checkbox alert
|
||||
$alert-ios-checkbox-icon-border-style: $alert-ios-checkbox-border-style;
|
||||
$alert-ios-checkbox-icon-border-style: $alert-ios-checkbox-border-style !default;
|
||||
|
||||
/// @prop - Border color of the icon in the checkbox alert
|
||||
$alert-ios-checkbox-icon-border-color: $background-color;
|
||||
$alert-ios-checkbox-icon-border-color: $background-color !default;
|
||||
|
||||
/// @prop - Transform of the icon in the checkbox alert
|
||||
$alert-ios-checkbox-icon-transform: rotate(45deg);
|
||||
$alert-ios-checkbox-icon-transform: rotate(45deg) !default;
|
||||
|
||||
/// @prop - Filter of the translucent alert
|
||||
$alert-ios-translucent-filter: saturate(180%) blur(20px);
|
||||
$alert-ios-translucent-filter: saturate(180%) blur(20px) !default;
|
||||
|
||||
/// @prop - Height of the tappable inputs in the checkbox alert
|
||||
$alert-ios-tappable-height: $item-ios-min-height;
|
||||
$alert-ios-tappable-height: $item-ios-min-height !default;
|
||||
|
||||
@@ -5,10 +5,10 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the alert
|
||||
$alert-md-font-size: dynamic-font(14px);
|
||||
$alert-md-font-size: dynamic-font(14px) !default;
|
||||
|
||||
/// @prop - Max width of the alert
|
||||
$alert-md-max-width: 280px;
|
||||
$alert-md-max-width: 280px !default;
|
||||
|
||||
/// @prop - Max width of the alert on a tablet
|
||||
/**
|
||||
@@ -19,313 +19,313 @@ $alert-md-max-width: 280px;
|
||||
* 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);
|
||||
$alert-md-max-width-tablet: min(calc(100vw - 96px), 560px) !default;
|
||||
|
||||
/// @prop - Max width of the alert on a tablet
|
||||
$alert-md-max-height-tablet: min(calc(100vh - 96px), 560px);
|
||||
$alert-md-max-height-tablet: min(calc(100vh - 96px), 560px) !default;
|
||||
|
||||
/// @prop - Border radius of the alert
|
||||
$alert-md-border-radius: 4px;
|
||||
$alert-md-border-radius: 4px !default;
|
||||
|
||||
/// @prop - Background color of the alert
|
||||
$alert-md-background-color: $overlay-md-background-color;
|
||||
$alert-md-background-color: $overlay-md-background-color !default;
|
||||
|
||||
/// @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);
|
||||
$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;
|
||||
|
||||
/// @prop - Padding top of the alert head
|
||||
$alert-md-head-padding-top: 20px;
|
||||
$alert-md-head-padding-top: 20px !default;
|
||||
|
||||
/// @prop - Padding end of the alert head
|
||||
$alert-md-head-padding-end: 23px;
|
||||
$alert-md-head-padding-end: 23px !default;
|
||||
|
||||
/// @prop - Padding bottom of the alert head
|
||||
$alert-md-head-padding-bottom: 15px;
|
||||
$alert-md-head-padding-bottom: 15px !default;
|
||||
|
||||
/// @prop - Padding start of the alert head
|
||||
$alert-md-head-padding-start: $alert-md-head-padding-end;
|
||||
$alert-md-head-padding-start: $alert-md-head-padding-end !default;
|
||||
|
||||
/// @prop - Text align of the alert head
|
||||
$alert-md-head-text-align: start;
|
||||
$alert-md-head-text-align: start !default;
|
||||
|
||||
/// @prop - Color of the alert title
|
||||
$alert-md-title-color: $text-color;
|
||||
$alert-md-title-color: $text-color !default;
|
||||
|
||||
/// @prop - Font size of the alert title
|
||||
$alert-md-title-font-size: dynamic-font(20px);
|
||||
$alert-md-title-font-size: dynamic-font(20px) !default;
|
||||
|
||||
/// @prop - Font weight of the alert title
|
||||
$alert-md-title-font-weight: 500;
|
||||
$alert-md-title-font-weight: 500 !default;
|
||||
|
||||
/// @prop - Font size of the alert sub title
|
||||
$alert-md-sub-title-font-size: dynamic-font(16px);
|
||||
$alert-md-sub-title-font-size: dynamic-font(16px) !default;
|
||||
|
||||
/// @prop - Text color of the alert sub title
|
||||
$alert-md-sub-title-text-color: $text-color;
|
||||
$alert-md-sub-title-text-color: $text-color !default;
|
||||
|
||||
/// @prop - Padding top of the alert message
|
||||
$alert-md-message-padding-top: 20px;
|
||||
$alert-md-message-padding-top: 20px !default;
|
||||
|
||||
/// @prop - Padding end of the alert message
|
||||
$alert-md-message-padding-end: 24px;
|
||||
$alert-md-message-padding-end: 24px !default;
|
||||
|
||||
/// @prop - Padding bottom of the alert message
|
||||
$alert-md-message-padding-bottom: $alert-md-message-padding-top;
|
||||
$alert-md-message-padding-bottom: $alert-md-message-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the alert message
|
||||
$alert-md-message-padding-start: $alert-md-message-padding-end;
|
||||
$alert-md-message-padding-start: $alert-md-message-padding-end !default;
|
||||
|
||||
/// @prop - Font size of the alert message
|
||||
$alert-md-message-font-size: dynamic-font(16px);
|
||||
$alert-md-message-font-size: dynamic-font(16px) !default;
|
||||
|
||||
/// @prop - Text color of the alert message
|
||||
$alert-md-message-text-color: $text-color-step-450;
|
||||
$alert-md-message-text-color: $text-color-step-450 !default;
|
||||
|
||||
/// @prop - Padding top of the alert empty message
|
||||
$alert-md-message-empty-padding-top: 0;
|
||||
$alert-md-message-empty-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the alert empty message
|
||||
$alert-md-message-empty-padding-end: $alert-md-message-empty-padding-top;
|
||||
$alert-md-message-empty-padding-end: $alert-md-message-empty-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom of the alert empty message
|
||||
$alert-md-message-empty-padding-bottom: $alert-md-message-empty-padding-top;
|
||||
$alert-md-message-empty-padding-bottom: $alert-md-message-empty-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the alert empty message
|
||||
$alert-md-message-empty-padding-start: $alert-md-message-empty-padding-end;
|
||||
$alert-md-message-empty-padding-start: $alert-md-message-empty-padding-end !default;
|
||||
|
||||
/// @prop - Maximum height of the alert content
|
||||
$alert-md-content-max-height: 266px;
|
||||
$alert-md-content-max-height: 266px !default;
|
||||
|
||||
/// @prop - Border width of the alert input
|
||||
$alert-md-input-border-width: 1px;
|
||||
$alert-md-input-border-width: 1px !default;
|
||||
|
||||
/// @prop - Border style of the alert input
|
||||
$alert-md-input-border-style: solid;
|
||||
$alert-md-input-border-style: solid !default;
|
||||
|
||||
/// @prop - Border color of the alert input
|
||||
$alert-md-input-border-color: $background-color-step-150;
|
||||
$alert-md-input-border-color: $background-color-step-150 !default;
|
||||
|
||||
/// @prop - Text color of the alert input
|
||||
$alert-md-input-text-color: $text-color;
|
||||
$alert-md-input-text-color: $text-color !default;
|
||||
|
||||
/// @prop - Border width of the alert input when focused
|
||||
$alert-md-input-border-width-focused: 2px;
|
||||
$alert-md-input-border-width-focused: 2px !default;
|
||||
|
||||
/// @prop - Border style of the alert input when focused
|
||||
$alert-md-input-border-style-focused: $alert-md-input-border-style;
|
||||
$alert-md-input-border-style-focused: $alert-md-input-border-style !default;
|
||||
|
||||
/// @prop - Border color of the alert input when focused
|
||||
$alert-md-input-border-color-focused: ion-color(primary, base);
|
||||
$alert-md-input-border-color-focused: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Margin top of the alert input
|
||||
$alert-md-input-margin-top: 5px;
|
||||
$alert-md-input-margin-top: 5px !default;
|
||||
|
||||
/// @prop - Margin end of the alert input
|
||||
$alert-md-input-margin-end: 0;
|
||||
$alert-md-input-margin-end: 0 !default;
|
||||
|
||||
/// @prop - Margin bottom of the alert input
|
||||
$alert-md-input-margin-bottom: 5px;
|
||||
$alert-md-input-margin-bottom: 5px !default;
|
||||
|
||||
/// @prop - Margin start of the alert input
|
||||
$alert-md-input-margin-start: 0;
|
||||
$alert-md-input-margin-start: 0 !default;
|
||||
|
||||
/// @prop - Placeholder Color for input
|
||||
$alert-md-input-placeholder-color: $placeholder-text-color;
|
||||
$alert-md-input-placeholder-color: $placeholder-text-color !default;
|
||||
|
||||
/// @prop - Flex wrap of the alert button group
|
||||
$alert-md-button-group-flex-wrap: wrap-reverse;
|
||||
$alert-md-button-group-flex-wrap: wrap-reverse !default;
|
||||
|
||||
/// @prop - Justify content of the alert button group
|
||||
$alert-md-button-group-justify-content: flex-end;
|
||||
$alert-md-button-group-justify-content: flex-end !default;
|
||||
|
||||
/// @prop - Padding top of the alert button
|
||||
$alert-md-button-padding-top: 10px;
|
||||
$alert-md-button-padding-top: 10px !default;
|
||||
|
||||
/// @prop - Padding end of the alert button
|
||||
$alert-md-button-padding-end: $alert-md-button-padding-top;
|
||||
$alert-md-button-padding-end: $alert-md-button-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom of the alert button
|
||||
$alert-md-button-padding-bottom: $alert-md-button-padding-top;
|
||||
$alert-md-button-padding-bottom: $alert-md-button-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the alert button
|
||||
$alert-md-button-padding-start: $alert-md-button-padding-end;
|
||||
$alert-md-button-padding-start: $alert-md-button-padding-end !default;
|
||||
|
||||
/// @prop - Margin top of the alert button
|
||||
$alert-md-button-margin-top: 0;
|
||||
$alert-md-button-margin-top: 0 !default;
|
||||
|
||||
/// @prop - Margin end of the alert button
|
||||
$alert-md-button-margin-end: 8px;
|
||||
$alert-md-button-margin-end: 8px !default;
|
||||
|
||||
/// @prop - Margin bottom of the alert button
|
||||
$alert-md-button-margin-bottom: 0;
|
||||
$alert-md-button-margin-bottom: 0 !default;
|
||||
|
||||
/// @prop - Margin start of the alert button
|
||||
$alert-md-button-margin-start: 0;
|
||||
$alert-md-button-margin-start: 0 !default;
|
||||
|
||||
/// @prop - Font weight of the alert button
|
||||
$alert-md-button-font-weight: 500;
|
||||
$alert-md-button-font-weight: 500 !default;
|
||||
|
||||
/// @prop - Text color of the alert button
|
||||
$alert-md-button-text-color: ion-color(primary, base);
|
||||
$alert-md-button-text-color: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Background color of the alert button
|
||||
$alert-md-button-background-color: transparent;
|
||||
$alert-md-button-background-color: transparent !default;
|
||||
|
||||
/// @prop - Border radius of the alert button
|
||||
$alert-md-button-border-radius: 2px;
|
||||
$alert-md-button-border-radius: 2px !default;
|
||||
|
||||
/// @prop - Text transform of the alert button
|
||||
$alert-md-button-text-transform: uppercase;
|
||||
$alert-md-button-text-transform: uppercase !default;
|
||||
|
||||
/// @prop - Text align of the alert button
|
||||
$alert-md-button-text-align: end;
|
||||
$alert-md-button-text-align: end !default;
|
||||
|
||||
/// @prop - Border top of the alert list
|
||||
$alert-md-list-border-top: 1px solid $alert-md-input-border-color;
|
||||
$alert-md-list-border-top: 1px solid $alert-md-input-border-color !default;
|
||||
|
||||
/// @prop - Border bottom of the alert list
|
||||
$alert-md-list-border-bottom: $alert-md-list-border-top;
|
||||
$alert-md-list-border-bottom: $alert-md-list-border-top !default;
|
||||
|
||||
/// @prop - Top of the alert radio
|
||||
$alert-md-radio-top: 0;
|
||||
$alert-md-radio-top: 0 !default;
|
||||
|
||||
/// @prop - Left of the alert radio
|
||||
$alert-md-radio-left: 26px;
|
||||
$alert-md-radio-left: 26px !default;
|
||||
|
||||
/// @prop - Width of the alert radio
|
||||
$alert-md-radio-width: 20px;
|
||||
$alert-md-radio-width: 20px !default;
|
||||
|
||||
/// @prop - Height of the alert radio
|
||||
$alert-md-radio-height: $alert-md-radio-width;
|
||||
$alert-md-radio-height: $alert-md-radio-width !default;
|
||||
|
||||
/// @prop - Border width of the alert radio
|
||||
$alert-md-radio-border-width: 2px;
|
||||
$alert-md-radio-border-width: 2px !default;
|
||||
|
||||
/// @prop - Border style of the alert radio
|
||||
$alert-md-radio-border-style: solid;
|
||||
$alert-md-radio-border-style: solid !default;
|
||||
|
||||
/// @prop - Border radius of the alert radio
|
||||
$alert-md-radio-border-radius: 50%;
|
||||
$alert-md-radio-border-radius: 50% !default;
|
||||
|
||||
/// @prop - Border color of the alert radio when off
|
||||
$alert-md-radio-border-color-off: $background-color-step-550;
|
||||
$alert-md-radio-border-color-off: $background-color-step-550 !default;
|
||||
|
||||
/// @prop - Border color of the alert radio when on
|
||||
$alert-md-radio-border-color-on: $alert-md-button-text-color;
|
||||
$alert-md-radio-border-color-on: $alert-md-button-text-color !default;
|
||||
|
||||
/// @prop - Width of the icon in the alert radio
|
||||
$alert-md-radio-icon-width: $alert-md-radio-width * 0.5;
|
||||
$alert-md-radio-icon-width: $alert-md-radio-width * 0.5 !default;
|
||||
|
||||
/// @prop - Height of the icon in the alert radio
|
||||
$alert-md-radio-icon-height: $alert-md-radio-icon-width;
|
||||
$alert-md-radio-icon-height: $alert-md-radio-icon-width !default;
|
||||
|
||||
/// @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;
|
||||
$alert-md-radio-icon-top: ($alert-md-radio-width - $alert-md-radio-icon-width - $alert-md-radio-border-width * 2) * 0.5 !default;
|
||||
|
||||
/// @prop - Start of the icon in the radio alert
|
||||
$alert-md-radio-icon-start: $alert-md-radio-icon-top;
|
||||
$alert-md-radio-icon-start: $alert-md-radio-icon-top !default;
|
||||
|
||||
/// @prop - Border radius of the icon in the alert radio
|
||||
$alert-md-radio-icon-border-radius: $alert-md-radio-border-radius;
|
||||
$alert-md-radio-icon-border-radius: $alert-md-radio-border-radius !default;
|
||||
|
||||
/// @prop - Transform of the icon in the alert radio when off
|
||||
$alert-md-radio-icon-transform-off: scale3d(0, 0, 0);
|
||||
$alert-md-radio-icon-transform-off: scale3d(0, 0, 0) !default;
|
||||
|
||||
/// @prop - Transform of the icon in the alert radio when on
|
||||
$alert-md-radio-icon-transform-on: scale3d(1, 1, 1);
|
||||
$alert-md-radio-icon-transform-on: scale3d(1, 1, 1) !default;
|
||||
|
||||
/// @prop - Transition of the icon in the alert radio
|
||||
$alert-md-radio-icon-transition: transform 280ms cubic-bezier(.4, 0, .2, 1);
|
||||
$alert-md-radio-icon-transition: transform 280ms cubic-bezier(.4, 0, .2, 1) !default;
|
||||
|
||||
/// @prop - Padding top on the label for the radio alert
|
||||
$alert-md-radio-label-padding-top: 13px;
|
||||
$alert-md-radio-label-padding-top: 13px !default;
|
||||
|
||||
/// @prop - Padding end on the label for the radio alert
|
||||
$alert-md-radio-label-padding-end: 26px;
|
||||
$alert-md-radio-label-padding-end: 26px !default;
|
||||
|
||||
/// @prop - Padding bottom on the label for the radio alert
|
||||
$alert-md-radio-label-padding-bottom: $alert-md-radio-label-padding-top;
|
||||
$alert-md-radio-label-padding-bottom: $alert-md-radio-label-padding-top !default;
|
||||
|
||||
/// @prop - Padding start on the label for the radio alert
|
||||
$alert-md-radio-label-padding-start: $alert-md-radio-label-padding-end + 26px;
|
||||
$alert-md-radio-label-padding-start: $alert-md-radio-label-padding-end + 26px !default;
|
||||
|
||||
/// @prop - Font size of the label for the radio alert
|
||||
$alert-md-radio-label-font-size: dynamic-font(16px);
|
||||
$alert-md-radio-label-font-size: dynamic-font(16px) !default;
|
||||
|
||||
/// @prop - Text color of the label for the radio alert
|
||||
$alert-md-radio-label-text-color: $text-color-step-150;
|
||||
$alert-md-radio-label-text-color: $text-color-step-150 !default;
|
||||
|
||||
/// @prop - Text color of the label for the checked radio alert
|
||||
$alert-md-radio-label-text-color-checked: $alert-md-radio-label-text-color;
|
||||
$alert-md-radio-label-text-color-checked: $alert-md-radio-label-text-color !default;
|
||||
|
||||
/// @prop - Top of the checkbox in the alert
|
||||
$alert-md-checkbox-top: 0;
|
||||
$alert-md-checkbox-top: 0 !default;
|
||||
|
||||
/// @prop - Left of the checkbox in the alert
|
||||
$alert-md-checkbox-left: 26px;
|
||||
$alert-md-checkbox-left: 26px !default;
|
||||
|
||||
/// @prop - Width of the checkbox in the alert
|
||||
$alert-md-checkbox-width: 16px;
|
||||
$alert-md-checkbox-width: 16px !default;
|
||||
|
||||
/// @prop - Height of the checkbox in the alert
|
||||
$alert-md-checkbox-height: 16px;
|
||||
$alert-md-checkbox-height: 16px !default;
|
||||
|
||||
/// @prop - Border width of the checkbox in the alert
|
||||
$alert-md-checkbox-border-width: 2px;
|
||||
$alert-md-checkbox-border-width: 2px !default;
|
||||
|
||||
/// @prop - Border style of the checkbox in the alert
|
||||
$alert-md-checkbox-border-style: solid;
|
||||
$alert-md-checkbox-border-style: solid !default;
|
||||
|
||||
/// @prop - Border radius of the checkbox in the alert
|
||||
$alert-md-checkbox-border-radius: 2px;
|
||||
$alert-md-checkbox-border-radius: 2px !default;
|
||||
|
||||
/// @prop - Border color of the checkbox in the alert when off
|
||||
$alert-md-checkbox-border-color-off: $background-color-step-550;
|
||||
$alert-md-checkbox-border-color-off: $background-color-step-550 !default;
|
||||
|
||||
/// @prop - Border color of the checkbox in the alert when on
|
||||
$alert-md-checkbox-border-color-on: $alert-md-button-text-color;
|
||||
$alert-md-checkbox-border-color-on: $alert-md-button-text-color !default;
|
||||
|
||||
/// @prop - Top of the icon in the checkbox alert
|
||||
$alert-md-checkbox-icon-top: 0;
|
||||
$alert-md-checkbox-icon-top: 0 !default;
|
||||
|
||||
/// @prop - Start of the icon in the checkbox alert
|
||||
$alert-md-checkbox-icon-start: 3px;
|
||||
$alert-md-checkbox-icon-start: 3px !default;
|
||||
|
||||
/// @prop - Width of the icon in the checkbox alert
|
||||
$alert-md-checkbox-icon-width: 6px;
|
||||
$alert-md-checkbox-icon-width: 6px !default;
|
||||
|
||||
/// @prop - Height of the icon in the checkbox alert
|
||||
$alert-md-checkbox-icon-height: 10px;
|
||||
$alert-md-checkbox-icon-height: 10px !default;
|
||||
|
||||
/// @prop - Border width of the icon in the checkbox alert
|
||||
$alert-md-checkbox-icon-border-width: 2px;
|
||||
$alert-md-checkbox-icon-border-width: 2px !default;
|
||||
|
||||
/// @prop - Border style of the icon in the checkbox alert
|
||||
$alert-md-checkbox-icon-border-style: solid;
|
||||
$alert-md-checkbox-icon-border-style: solid !default;
|
||||
|
||||
/// @prop - Border color of the icon in the checkbox alert
|
||||
$alert-md-checkbox-icon-border-color: ion-color(primary, contrast);
|
||||
$alert-md-checkbox-icon-border-color: ion-color(primary, contrast) !default;
|
||||
|
||||
/// @prop - Transform of the icon in the checkbox alert
|
||||
$alert-md-checkbox-icon-transform: rotate(45deg);
|
||||
$alert-md-checkbox-icon-transform: rotate(45deg) !default;
|
||||
|
||||
/// @prop - Padding top of the label for the checkbox in the alert
|
||||
$alert-md-checkbox-label-padding-top: 13px;
|
||||
$alert-md-checkbox-label-padding-top: 13px !default;
|
||||
|
||||
/// @prop - Padding end of the label for the checkbox in the alert
|
||||
$alert-md-checkbox-label-padding-end: $alert-md-checkbox-left;
|
||||
$alert-md-checkbox-label-padding-end: $alert-md-checkbox-left !default;
|
||||
|
||||
/// @prop - Padding bottom of the label for the checkbox in the alert
|
||||
$alert-md-checkbox-label-padding-bottom: $alert-md-checkbox-label-padding-top;
|
||||
$alert-md-checkbox-label-padding-bottom: $alert-md-checkbox-label-padding-top !default;
|
||||
|
||||
/// @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;
|
||||
$alert-md-checkbox-label-padding-start: $alert-md-checkbox-label-padding-end + 27px !default;
|
||||
|
||||
/// @prop - Text color of the label for the checkbox in the alert
|
||||
$alert-md-checkbox-label-text-color: $text-color-step-150;
|
||||
$alert-md-checkbox-label-text-color: $text-color-step-150 !default;
|
||||
|
||||
/// @prop - Font size of the label for the checkbox in the alert
|
||||
$alert-md-checkbox-label-font-size: dynamic-font(16px);
|
||||
$alert-md-checkbox-label-font-size: dynamic-font(16px) !default;
|
||||
|
||||
/// @prop - Height of the tappable inputs in the checkbox alert
|
||||
$alert-md-tappable-height: $item-md-min-height;
|
||||
$alert-md-tappable-height: $item-md-min-height !default;
|
||||
|
||||
@@ -4,16 +4,16 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Minimum width of the alert
|
||||
$alert-min-width: 250px;
|
||||
$alert-min-width: 250px !default;
|
||||
|
||||
/// @prop - Maximum height of the alert
|
||||
$alert-max-height: 90%;
|
||||
$alert-max-height: 90% !default;
|
||||
|
||||
/// @prop - Line height of the alert button
|
||||
$alert-button-line-height: dynamic-font(20px);
|
||||
$alert-button-line-height: dynamic-font(20px) !default;
|
||||
|
||||
/// @prop - Font size of the alert button
|
||||
$alert-button-font-size: dynamic-font(14px);
|
||||
$alert-button-font-size: dynamic-font(14px) !default;
|
||||
|
||||
/// @prop - Minimum height of a textarea in the alert
|
||||
$alert-input-min-height: 37px;
|
||||
$alert-input-min-height: 37px !default;
|
||||
|
||||
@@ -5,10 +5,10 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Width of the avatar
|
||||
$avatar-ios-width: 48px;
|
||||
$avatar-ios-width: 48px !default;
|
||||
|
||||
/// @prop - Height of the avatar
|
||||
$avatar-ios-height: $avatar-ios-width;
|
||||
$avatar-ios-height: $avatar-ios-width !default;
|
||||
|
||||
/// @prop - Border radius of the avatar
|
||||
$avatar-ios-border-radius: 50%;
|
||||
$avatar-ios-border-radius: 50% !default;
|
||||
|
||||
@@ -5,10 +5,10 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Width of the avatar
|
||||
$avatar-md-width: 64px;
|
||||
$avatar-md-width: 64px !default;
|
||||
|
||||
/// @prop - Height of the avatar
|
||||
$avatar-md-height: $avatar-md-width;
|
||||
$avatar-md-height: $avatar-md-width !default;
|
||||
|
||||
/// @prop - Border radius of the avatar
|
||||
$avatar-md-border-radius: 50%;
|
||||
$avatar-md-border-radius: 50% !default;
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Z index of the back button
|
||||
$back-button-ios-button-z-index: $z-index-toolbar-buttons;
|
||||
$back-button-ios-button-z-index: $z-index-toolbar-buttons !default;
|
||||
|
||||
/// @prop - Text color of the back button
|
||||
$back-button-ios-color: ion-color(primary, base);
|
||||
$back-button-ios-color: ion-color(primary, base) !default;
|
||||
|
||||
@@ -4,4 +4,4 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Text color of the back button
|
||||
$back-button-md-color: currentColor;
|
||||
$back-button-md-color: currentColor !default;
|
||||
|
||||
@@ -4,4 +4,4 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Border radius of the badge
|
||||
$badge-ios-border-radius: 10px;
|
||||
$badge-ios-border-radius: 10px !default;
|
||||
|
||||
@@ -4,4 +4,4 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Border radius of the badge
|
||||
$badge-md-border-radius: 4px;
|
||||
$badge-md-border-radius: 4px !default;
|
||||
|
||||
@@ -4,25 +4,25 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top of the badge
|
||||
$badge-padding-top: 3px;
|
||||
$badge-padding-top: 3px !default;
|
||||
|
||||
/// @prop - Padding end of the badge
|
||||
$badge-padding-end: 8px;
|
||||
$badge-padding-end: 8px !default;
|
||||
|
||||
/// @prop - Padding bottom of the badge
|
||||
$badge-padding-bottom: $badge-padding-top;
|
||||
$badge-padding-bottom: $badge-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the badge
|
||||
$badge-padding-start: $badge-padding-end;
|
||||
$badge-padding-start: $badge-padding-end !default;
|
||||
|
||||
/// @prop - Minimum width of the badge
|
||||
$badge-min-width: 10px;
|
||||
$badge-min-width: 10px !default;
|
||||
|
||||
/// @prop - Baseline font size of the badge
|
||||
$badge-baseline-font-size: 13px;
|
||||
$badge-baseline-font-size: 13px !default;
|
||||
|
||||
/// @prop - Font size of the badge
|
||||
$badge-font-size: dynamic-font($badge-baseline-font-size);
|
||||
$badge-font-size: dynamic-font($badge-baseline-font-size) !default;
|
||||
|
||||
/// @prop - Font weight of the badge
|
||||
$badge-font-weight: bold;
|
||||
$badge-font-weight: bold !default;
|
||||
|
||||
@@ -4,31 +4,31 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Color of the breadcrumb
|
||||
$breadcrumb-ios-color: var(--ion-color-step-850, var(--ion-text-color-step-150, #2d4665));
|
||||
$breadcrumb-ios-color: var(--ion-color-step-850, var(--ion-text-color-step-150, #2d4665)) !default;
|
||||
|
||||
/// @prop - Color of the active breadcrumb
|
||||
$breadcrumb-ios-color-active: var(--ion-text-color, #03060b);
|
||||
$breadcrumb-ios-color-active: var(--ion-text-color, #03060b) !default;
|
||||
|
||||
/// @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)));
|
||||
$breadcrumb-ios-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, rgba(233, 237, 243, 0.7))) !default;
|
||||
|
||||
/// @prop - Color of the breadcrumb icon
|
||||
$breadcrumb-ios-icon-color: var(--ion-color-step-400, var(--ion-text-color-step-600, #92a0b3));
|
||||
$breadcrumb-ios-icon-color: var(--ion-color-step-400, var(--ion-text-color-step-600, #92a0b3)) !default;
|
||||
|
||||
/// @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));
|
||||
$breadcrumb-ios-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #242d39)) !default;
|
||||
|
||||
/// @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));
|
||||
$breadcrumb-ios-icon-color-focused: var(--ion-color-step-750, var(--ion-text-color-step-250, #445b78)) !default;
|
||||
|
||||
/// @prop - Color of the breadcrumb separator
|
||||
$breadcrumb-ios-separator-color: $breadcrumb-separator-color;
|
||||
$breadcrumb-ios-separator-color: $breadcrumb-separator-color !default;
|
||||
|
||||
/// @prop - Color of the breadcrumb indicator
|
||||
$breadcrumb-ios-indicator-color: $breadcrumb-ios-separator-color;
|
||||
$breadcrumb-ios-indicator-color: $breadcrumb-ios-separator-color !default;
|
||||
|
||||
/// @prop - Background color of the breadcrumb indicator
|
||||
$breadcrumb-ios-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e9edf3));
|
||||
$breadcrumb-ios-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e9edf3)) !default;
|
||||
|
||||
/// @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));
|
||||
$breadcrumb-ios-indicator-background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9e0ea)) !default;
|
||||
|
||||
@@ -4,43 +4,43 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Color of the breadcrumb
|
||||
$breadcrumb-md-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #677483));
|
||||
$breadcrumb-md-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #677483)) !default;
|
||||
|
||||
/// @prop - Color of the active breadcrumb
|
||||
$breadcrumb-md-color-active: var(--ion-text-color, #03060b);
|
||||
$breadcrumb-md-color-active: var(--ion-text-color, #03060b) !default;
|
||||
|
||||
/// @prop - Color of the focused breadcrumb
|
||||
$breadcrumb-md-color-focused: var(--ion-color-step-800, var(--ion-text-color-step-200, #35404e));
|
||||
$breadcrumb-md-color-focused: var(--ion-color-step-800, var(--ion-text-color-step-200, #35404e)) !default;
|
||||
|
||||
/// @prop - Background color of the focused breadcrumb
|
||||
$breadcrumb-md-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, #fff));
|
||||
$breadcrumb-md-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, #fff)) !default;
|
||||
|
||||
/// @prop - Color of the breadcrumb icon
|
||||
$breadcrumb-md-icon-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #7d8894));
|
||||
$breadcrumb-md-icon-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #7d8894)) !default;
|
||||
|
||||
/// @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));
|
||||
$breadcrumb-md-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #222d3a)) !default;
|
||||
|
||||
/// @prop - Margin top of the breadcrumb separator
|
||||
$breadcrumb-md-separator-margin-top: -1px;
|
||||
$breadcrumb-md-separator-margin-top: -1px !default;
|
||||
|
||||
/// @prop - Margin end of the breadcrumb separator
|
||||
$breadcrumb-md-separator-margin-end: 10px;
|
||||
$breadcrumb-md-separator-margin-end: 10px !default;
|
||||
|
||||
/// @prop - Margin bottom of the breadcrumb separator
|
||||
$breadcrumb-md-separator-margin-bottom: null;
|
||||
$breadcrumb-md-separator-margin-bottom: null !default;
|
||||
|
||||
/// @prop - Margin start of the breadcrumb separator
|
||||
$breadcrumb-md-separator-margin-start: 10px;
|
||||
$breadcrumb-md-separator-margin-start: 10px !default;
|
||||
|
||||
/// @prop - Color of the breadcrumb separator
|
||||
$breadcrumb-md-separator-color: $breadcrumb-separator-color;
|
||||
$breadcrumb-md-separator-color: $breadcrumb-separator-color !default;
|
||||
|
||||
/// @prop - Color of the breadcrumb indicator
|
||||
$breadcrumb-md-indicator-color: $breadcrumb-md-separator-color;
|
||||
$breadcrumb-md-indicator-color: $breadcrumb-md-separator-color !default;
|
||||
|
||||
/// @prop - Background color of the breadcrumb indicator
|
||||
$breadcrumb-md-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #eef1f3));
|
||||
$breadcrumb-md-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #eef1f3)) !default;
|
||||
|
||||
/// @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));
|
||||
$breadcrumb-md-indicator-background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #dfe5e8)) !default;
|
||||
|
||||
@@ -4,12 +4,12 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font weight of the breadcrumb
|
||||
$breadcrumb-font-weight: 400;
|
||||
$breadcrumb-font-weight: 400 !default;
|
||||
|
||||
$breadcrumb-baseline-font-size: 16px;
|
||||
$breadcrumb-baseline-font-size: 16px !default;
|
||||
|
||||
/// @prop - Font size of the breadcrumb
|
||||
$breadcrumb-font-size: dynamic-font($breadcrumb-baseline-font-size);
|
||||
$breadcrumb-font-size: dynamic-font($breadcrumb-baseline-font-size) !default;
|
||||
|
||||
/// @prop - Color of the breadcrumb separator
|
||||
$breadcrumb-separator-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a));
|
||||
$breadcrumb-separator-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a)) !default;
|
||||
|
||||
@@ -4,108 +4,108 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Margin top of the button
|
||||
$button-ios-margin-top: 4px;
|
||||
$button-ios-margin-top: 4px !default;
|
||||
|
||||
/// @prop - Margin end of the button
|
||||
$button-ios-margin-end: 2px;
|
||||
$button-ios-margin-end: 2px !default;
|
||||
|
||||
/// @prop - Margin bottom of the button
|
||||
$button-ios-margin-bottom: 4px;
|
||||
$button-ios-margin-bottom: 4px !default;
|
||||
|
||||
/// @prop - Margin start of the button
|
||||
$button-ios-margin-start: 2px;
|
||||
$button-ios-margin-start: 2px !default;
|
||||
|
||||
/// @prop - Padding top of the button
|
||||
$button-ios-padding-top: 13px;
|
||||
$button-ios-padding-top: 13px !default;
|
||||
|
||||
/// @prop - Padding end of the button
|
||||
$button-ios-padding-end: 1em;
|
||||
$button-ios-padding-end: 1em !default;
|
||||
|
||||
/// @prop - Padding bottom of the button
|
||||
$button-ios-padding-bottom: $button-ios-padding-top;
|
||||
$button-ios-padding-bottom: $button-ios-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the button
|
||||
$button-ios-padding-start: $button-ios-padding-end;
|
||||
$button-ios-padding-start: $button-ios-padding-end !default;
|
||||
|
||||
/// @prop - Minimum height of the button
|
||||
$button-ios-min-height: 3.1em;
|
||||
$button-ios-min-height: 3.1em !default;
|
||||
|
||||
/// @prop - Border radius of the button
|
||||
$button-ios-border-radius: 14px;
|
||||
$button-ios-border-radius: 14px !default;
|
||||
|
||||
/// @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);
|
||||
$button-ios-font-size: dynamic-font-max(16px, 3) !default;
|
||||
|
||||
/// @prop - Font weight of the button text
|
||||
$button-ios-font-weight: 500;
|
||||
$button-ios-font-weight: 500 !default;
|
||||
|
||||
// iOS Large Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top of the large button
|
||||
$button-ios-large-padding-top: 17px;
|
||||
$button-ios-large-padding-top: 17px !default;
|
||||
|
||||
/// @prop - Padding end of the large button
|
||||
$button-ios-large-padding-end: 1em;
|
||||
$button-ios-large-padding-end: 1em !default;
|
||||
|
||||
/// @prop - Padding bottom of the large button
|
||||
$button-ios-large-padding-bottom: $button-ios-large-padding-top;
|
||||
$button-ios-large-padding-bottom: $button-ios-large-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the large button
|
||||
$button-ios-large-padding-start: $button-ios-large-padding-end;
|
||||
$button-ios-large-padding-start: $button-ios-large-padding-end !default;
|
||||
|
||||
/// @prop - Minimum height of the large button
|
||||
$button-ios-large-min-height: 3.1em;
|
||||
$button-ios-large-min-height: 3.1em !default;
|
||||
|
||||
/// @prop - Border radius of the large button
|
||||
$button-ios-large-border-radius: 16px;
|
||||
$button-ios-large-border-radius: 16px !default;
|
||||
|
||||
/// @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);
|
||||
$button-ios-large-font-size: dynamic-font-max(20px, 3) !default;
|
||||
|
||||
|
||||
// iOS Small Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top of the small button
|
||||
$button-ios-small-padding-top: 4px;
|
||||
$button-ios-small-padding-top: 4px !default;
|
||||
|
||||
/// @prop - Padding end of the small button
|
||||
$button-ios-small-padding-end: .9em;
|
||||
$button-ios-small-padding-end: .9em !default;
|
||||
|
||||
/// @prop - Padding bottom of the small button
|
||||
$button-ios-small-padding-bottom: $button-ios-small-padding-top;
|
||||
$button-ios-small-padding-bottom: $button-ios-small-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the small button
|
||||
$button-ios-small-padding-start: $button-ios-small-padding-end;
|
||||
$button-ios-small-padding-start: $button-ios-small-padding-end !default;
|
||||
|
||||
/// @prop - Minimum height of the small button
|
||||
$button-ios-small-min-height: 2.1em;
|
||||
$button-ios-small-min-height: 2.1em !default;
|
||||
|
||||
/// @prop - Border radius of the small button
|
||||
$button-ios-small-border-radius: 6px;
|
||||
$button-ios-small-border-radius: 6px !default;
|
||||
|
||||
/// @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);
|
||||
$button-ios-small-font-size: dynamic-font-max(13px, 3) !default;
|
||||
|
||||
|
||||
// iOS Outline Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Border width of the outline button
|
||||
$button-ios-outline-border-width: 1px;
|
||||
$button-ios-outline-border-width: 1px !default;
|
||||
|
||||
/// @prop - Border style of the outline button
|
||||
$button-ios-outline-border-style: solid;
|
||||
$button-ios-outline-border-style: solid !default;
|
||||
|
||||
/// @prop - Border radius of the outline button
|
||||
$button-ios-outline-border-radius: $button-ios-border-radius;
|
||||
$button-ios-outline-border-radius: $button-ios-border-radius !default;
|
||||
|
||||
// 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);
|
||||
$button-ios-clear-font-size: dynamic-font-max(17px, 3) !default;
|
||||
|
||||
/// @prop - Font weight of the clear button
|
||||
$button-ios-clear-font-weight: normal;
|
||||
$button-ios-clear-font-weight: normal !default;
|
||||
|
||||
/// @prop - Letter spacing of the button
|
||||
$button-ios-letter-spacing: 0;
|
||||
$button-ios-letter-spacing: 0 !default;
|
||||
|
||||
/// @prop - Opacity of the activated clear button
|
||||
$button-ios-clear-opacity-activated: .4;
|
||||
$button-ios-clear-opacity-activated: .4 !default;
|
||||
|
||||
/// @prop - Opacity of the clear button on hover
|
||||
$button-ios-clear-opacity-hover: .6;
|
||||
$button-ios-clear-opacity-hover: .6 !default;
|
||||
|
||||
// iOS Round Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top of the round button
|
||||
$button-ios-round-padding-top: $button-round-padding-top;
|
||||
$button-ios-round-padding-top: $button-round-padding-top !default;
|
||||
|
||||
/// @prop - Padding end of the round button
|
||||
$button-ios-round-padding-end: $button-round-padding-end;
|
||||
$button-ios-round-padding-end: $button-round-padding-end !default;
|
||||
|
||||
/// @prop - Padding bottom of the round button
|
||||
$button-ios-round-padding-bottom: $button-round-padding-bottom;
|
||||
$button-ios-round-padding-bottom: $button-round-padding-bottom !default;
|
||||
|
||||
/// @prop - Padding start of the round button
|
||||
$button-ios-round-padding-start: $button-round-padding-start;
|
||||
$button-ios-round-padding-start: $button-round-padding-start !default;
|
||||
|
||||
/// @prop - Border radius of the round button
|
||||
$button-ios-round-border-radius: $button-round-border-radius;
|
||||
$button-ios-round-border-radius: $button-round-border-radius !default;
|
||||
|
||||
|
||||
// iOS Decorator Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font weight of the strong button
|
||||
$button-ios-strong-font-weight: 600;
|
||||
$button-ios-strong-font-weight: 600 !default;
|
||||
|
||||
@@ -7,113 +7,113 @@
|
||||
$button-md-margin-top: 4px;
|
||||
|
||||
/// @prop - Margin end of the button
|
||||
$button-md-margin-end: 2px;
|
||||
$button-md-margin-end: 2px !default;
|
||||
|
||||
/// @prop - Margin bottom of the button
|
||||
$button-md-margin-bottom: 4px;
|
||||
$button-md-margin-bottom: 4px !default;
|
||||
|
||||
/// @prop - Margin start of the button
|
||||
$button-md-margin-start: 2px;
|
||||
$button-md-margin-start: 2px !default;
|
||||
|
||||
/// @prop - Padding top of the button
|
||||
$button-md-padding-top: 8px;
|
||||
$button-md-padding-top: 8px !default;
|
||||
|
||||
/// @prop - Padding end of the button
|
||||
$button-md-padding-end: 1.1em;
|
||||
$button-md-padding-end: 1.1em !default;
|
||||
|
||||
/// @prop - Padding bottom of the button
|
||||
$button-md-padding-bottom: $button-md-padding-top;
|
||||
$button-md-padding-bottom: $button-md-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the button
|
||||
$button-md-padding-start: 1.1em;
|
||||
$button-md-padding-start: 1.1em !default;
|
||||
|
||||
/// @prop - Minimum height of the button
|
||||
$button-md-min-height: 36px;
|
||||
$button-md-min-height: 36px !default;
|
||||
|
||||
/// @prop - Border radius of the button
|
||||
$button-md-border-radius: 4px;
|
||||
$button-md-border-radius: 4px !default;
|
||||
|
||||
/// @prop - Font size of the button text
|
||||
$button-md-font-size: dynamic-font(14px);
|
||||
$button-md-font-size: dynamic-font(14px) !default;
|
||||
|
||||
/// @prop - Font weight of the button text
|
||||
$button-md-font-weight: 500;
|
||||
$button-md-font-weight: 500 !default;
|
||||
|
||||
/// @prop - Capitalization of the button text
|
||||
$button-md-text-transform: uppercase;
|
||||
$button-md-text-transform: uppercase !default;
|
||||
|
||||
$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);
|
||||
$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;
|
||||
|
||||
/// @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);
|
||||
$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;
|
||||
|
||||
// Material Design Large Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top of the large button
|
||||
$button-md-large-padding-top: 14px;
|
||||
$button-md-large-padding-top: 14px !default;
|
||||
|
||||
/// @prop - Padding end of the large button
|
||||
$button-md-large-padding-end: 1em;
|
||||
$button-md-large-padding-end: 1em !default;
|
||||
|
||||
/// @prop - Padding bottom of the large button
|
||||
$button-md-large-padding-bottom: $button-md-large-padding-top;
|
||||
$button-md-large-padding-bottom: $button-md-large-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the large button
|
||||
$button-md-large-padding-start: $button-md-large-padding-end;
|
||||
$button-md-large-padding-start: $button-md-large-padding-end !default;
|
||||
|
||||
/// @prop - Minimum height of the large button
|
||||
$button-md-large-min-height: 2.8em;
|
||||
$button-md-large-min-height: 2.8em !default;
|
||||
|
||||
/// @prop - Font size of the large button
|
||||
$button-md-large-font-size: dynamic-font(20px);
|
||||
$button-md-large-font-size: dynamic-font(20px) !default;
|
||||
|
||||
|
||||
// Material Design Small Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top of the small button
|
||||
$button-md-small-padding-top: 4px;
|
||||
$button-md-small-padding-top: 4px !default;
|
||||
|
||||
/// @prop - Padding end of the small button
|
||||
$button-md-small-padding-end: .9em;
|
||||
$button-md-small-padding-end: .9em !default;
|
||||
|
||||
/// @prop - Padding bottom of the small button
|
||||
$button-md-small-padding-bottom: $button-md-small-padding-top;
|
||||
$button-md-small-padding-bottom: $button-md-small-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the small button
|
||||
$button-md-small-padding-start: $button-md-small-padding-end;
|
||||
$button-md-small-padding-start: $button-md-small-padding-end !default;
|
||||
|
||||
/// @prop - Minimum height of the small button
|
||||
$button-md-small-min-height: 2.1em;
|
||||
$button-md-small-min-height: 2.1em !default;
|
||||
|
||||
/// @prop - Font size of the small button
|
||||
$button-md-small-font-size: dynamic-font(13px);
|
||||
$button-md-small-font-size: dynamic-font(13px) !default;
|
||||
|
||||
// Material Design Round Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top of the round button
|
||||
$button-md-round-padding-top: $button-round-padding-top;
|
||||
$button-md-round-padding-top: $button-round-padding-top !default;
|
||||
|
||||
/// @prop - Padding end of the round button
|
||||
$button-md-round-padding-end: $button-round-padding-end;
|
||||
$button-md-round-padding-end: $button-round-padding-end !default;
|
||||
|
||||
/// @prop - Padding bottom of the round button
|
||||
$button-md-round-padding-bottom: $button-round-padding-bottom;
|
||||
$button-md-round-padding-bottom: $button-round-padding-bottom !default;
|
||||
|
||||
/// @prop - Padding start of the round button
|
||||
$button-md-round-padding-start: $button-round-padding-start;
|
||||
$button-md-round-padding-start: $button-round-padding-start !default;
|
||||
|
||||
/// @prop - Border radius of the round button
|
||||
$button-md-round-border-radius: $button-round-border-radius;
|
||||
$button-md-round-border-radius: $button-round-border-radius !default;
|
||||
|
||||
|
||||
// Material Design Decorator Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font weight of the strong button
|
||||
$button-md-strong-font-weight: bold;
|
||||
$button-md-strong-font-weight: bold !default;
|
||||
|
||||
@@ -4,16 +4,16 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top of the round button
|
||||
$button-round-padding-top: 0;
|
||||
$button-round-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the round button
|
||||
$button-round-padding-end: 26px;
|
||||
$button-round-padding-end: 26px !default;
|
||||
|
||||
/// @prop - Padding bottom of the round button
|
||||
$button-round-padding-bottom: $button-round-padding-top;
|
||||
$button-round-padding-bottom: $button-round-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the round button
|
||||
$button-round-padding-start: $button-round-padding-end;
|
||||
$button-round-padding-start: $button-round-padding-end !default;
|
||||
|
||||
/// @prop - Border radius of the round button
|
||||
$button-round-border-radius: 999px;
|
||||
$button-round-border-radius: 999px !default;
|
||||
|
||||
@@ -4,16 +4,16 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top of the card
|
||||
$card-ios-padding-top: 20px;
|
||||
$card-ios-padding-top: 20px !default;
|
||||
|
||||
/// @prop - Padding end of the card
|
||||
$card-ios-padding-end: $card-ios-padding-top;
|
||||
$card-ios-padding-end: $card-ios-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom of the card
|
||||
$card-ios-padding-bottom: $card-ios-padding-top;
|
||||
$card-ios-padding-bottom: $card-ios-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the card
|
||||
$card-ios-padding-start: $card-ios-padding-top;
|
||||
$card-ios-padding-start: $card-ios-padding-top !default;
|
||||
|
||||
/// @prop - Font size of the card
|
||||
$card-ios-font-size: dynamic-font(16px);
|
||||
$card-ios-font-size: dynamic-font(16px) !default;
|
||||
|
||||
@@ -4,19 +4,19 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top of the card
|
||||
$card-md-padding-top: 13px;
|
||||
$card-md-padding-top: 13px !default;
|
||||
|
||||
/// @prop - Padding right of the card
|
||||
$card-md-padding-end: 16px;
|
||||
$card-md-padding-end: 16px !default;
|
||||
|
||||
/// @prop - Padding bottom of the card
|
||||
$card-md-padding-bottom: 13px;
|
||||
$card-md-padding-bottom: 13px !default;
|
||||
|
||||
/// @prop - Padding start of the card
|
||||
$card-md-padding-start: 16px;
|
||||
$card-md-padding-start: 16px !default;
|
||||
|
||||
/// @prop - Font size of the card
|
||||
$card-md-font-size: dynamic-font(14px);
|
||||
$card-md-font-size: dynamic-font(14px) !default;
|
||||
|
||||
/// @prop - Line height of the card
|
||||
$card-md-line-height: 1.5;
|
||||
$card-md-line-height: 1.5 !default;
|
||||
|
||||
@@ -4,22 +4,22 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top of the card header
|
||||
$card-ios-header-padding-top: 20px;
|
||||
$card-ios-header-padding-top: 20px !default;
|
||||
|
||||
/// @prop - Padding end of the card header
|
||||
$card-ios-header-padding-end: $card-ios-header-padding-top;
|
||||
$card-ios-header-padding-end: $card-ios-header-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom of the card header
|
||||
$card-ios-header-padding-bottom: 16px;
|
||||
$card-ios-header-padding-bottom: 16px !default;
|
||||
|
||||
/// @prop - Padding start of the card header
|
||||
$card-ios-header-padding-start: $card-ios-header-padding-end;
|
||||
$card-ios-header-padding-start: $card-ios-header-padding-end !default;
|
||||
|
||||
/// @prop - Filter of the translucent card header background color alpha
|
||||
$card-ios-header-translucent-background-color-alpha: .9;
|
||||
$card-ios-header-translucent-background-color-alpha: .9 !default;
|
||||
|
||||
/// @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);
|
||||
$card-ios-header-translucent-background-color: rgba($background-color-rgb, $card-ios-header-translucent-background-color-alpha) !default;
|
||||
|
||||
/// @prop - Filter of the translucent card header
|
||||
$card-ios-header-translucent-filter: saturate(180%) blur(30px);
|
||||
$card-ios-header-translucent-filter: saturate(180%) blur(30px) !default;
|
||||
|
||||
@@ -4,13 +4,13 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top of the card header
|
||||
$card-md-header-padding-top: 16px;
|
||||
$card-md-header-padding-top: 16px !default;
|
||||
|
||||
/// @prop - Padding end of the card header
|
||||
$card-md-header-padding-end: $card-md-header-padding-top;
|
||||
$card-md-header-padding-end: $card-md-header-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom of the card header
|
||||
$card-md-header-padding-bottom: $card-md-header-padding-top;
|
||||
$card-md-header-padding-bottom: $card-md-header-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the card header
|
||||
$card-md-header-padding-start: $card-md-header-padding-end;
|
||||
$card-md-header-padding-start: $card-md-header-padding-end !default;
|
||||
|
||||
@@ -4,40 +4,40 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the card subtitle
|
||||
$card-ios-subtitle-font-size: dynamic-font(12px);
|
||||
$card-ios-subtitle-font-size: dynamic-font(12px) !default;
|
||||
|
||||
/// @prop - Font weight of the card subtitle
|
||||
$card-ios-subtitle-font-weight: 700;
|
||||
$card-ios-subtitle-font-weight: 700 !default;
|
||||
|
||||
/// @prop - Font weight of the card subtitle
|
||||
$card-ios-subtitle-text-transform: uppercase;
|
||||
$card-ios-subtitle-text-transform: uppercase !default;
|
||||
|
||||
/// @prop - Letter spacing of the card subtitle
|
||||
$card-ios-subtitle-letter-spacing: .4px;
|
||||
$card-ios-subtitle-letter-spacing: .4px !default;
|
||||
|
||||
/// @prop - Padding top of the card subtitle
|
||||
$card-ios-subtitle-padding-top: 0;
|
||||
$card-ios-subtitle-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the card subtitle
|
||||
$card-ios-subtitle-padding-end: $card-ios-subtitle-padding-top;
|
||||
$card-ios-subtitle-padding-end: $card-ios-subtitle-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom of the card subtitle
|
||||
$card-ios-subtitle-padding-bottom: $card-ios-subtitle-padding-top;
|
||||
$card-ios-subtitle-padding-bottom: $card-ios-subtitle-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the card subtitle
|
||||
$card-ios-subtitle-padding-start: $card-ios-subtitle-padding-end;
|
||||
$card-ios-subtitle-padding-start: $card-ios-subtitle-padding-end !default;
|
||||
|
||||
/// @prop - Margin top of the card subtitle
|
||||
$card-ios-subtitle-margin-top: 0;
|
||||
$card-ios-subtitle-margin-top: 0 !default;
|
||||
|
||||
/// @prop - Margin end of the card subtitle
|
||||
$card-ios-subtitle-margin-end: $card-ios-subtitle-margin-top;
|
||||
$card-ios-subtitle-margin-end: $card-ios-subtitle-margin-top !default;
|
||||
|
||||
/// @prop - Margin bottom of the card subtitle
|
||||
$card-ios-subtitle-margin-bottom: 4px;
|
||||
$card-ios-subtitle-margin-bottom: 4px !default;
|
||||
|
||||
/// @prop - Margin start of the card subtitle
|
||||
$card-ios-subtitle-margin-start: $card-ios-subtitle-margin-end;
|
||||
$card-ios-subtitle-margin-start: $card-ios-subtitle-margin-end !default;
|
||||
|
||||
/// @prop - Color of the card subtitle
|
||||
$card-ios-subtitle-color: $text-color-step-400;
|
||||
$card-ios-subtitle-color: $text-color-step-400 !default;
|
||||
|
||||
@@ -4,31 +4,31 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the card subtitle
|
||||
$card-md-subtitle-font-size: dynamic-font(14px);
|
||||
$card-md-subtitle-font-size: dynamic-font(14px) !default;
|
||||
|
||||
/// @prop - Padding top of the card subtitle
|
||||
$card-md-subtitle-padding-top: 0;
|
||||
$card-md-subtitle-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the card subtitle
|
||||
$card-md-subtitle-padding-end: $card-md-subtitle-padding-top;
|
||||
$card-md-subtitle-padding-end: $card-md-subtitle-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom of the card subtitle
|
||||
$card-md-subtitle-padding-bottom: $card-md-subtitle-padding-top;
|
||||
$card-md-subtitle-padding-bottom: $card-md-subtitle-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the card subtitle
|
||||
$card-md-subtitle-padding-start: $card-md-subtitle-padding-end;
|
||||
$card-md-subtitle-padding-start: $card-md-subtitle-padding-end !default;
|
||||
|
||||
/// @prop - Margin top of the card subtitle
|
||||
$card-md-subtitle-margin-top: 0;
|
||||
$card-md-subtitle-margin-top: 0 !default;
|
||||
|
||||
/// @prop - Margin end of the card subtitle
|
||||
$card-md-subtitle-margin-end: $card-md-subtitle-margin-top;
|
||||
$card-md-subtitle-margin-end: $card-md-subtitle-margin-top !default;
|
||||
|
||||
/// @prop - Margin bottom of the card subtitle
|
||||
$card-md-subtitle-margin-bottom: 0;
|
||||
$card-md-subtitle-margin-bottom: 0 !default;
|
||||
|
||||
/// @prop - Margin start of the card subtitle
|
||||
$card-md-subtitle-margin-start: $card-md-subtitle-margin-end;
|
||||
$card-md-subtitle-margin-start: $card-md-subtitle-margin-end !default;
|
||||
|
||||
/// @prop - Color of the card subtitle
|
||||
$card-md-subtitle-color: $text-color-step-450;
|
||||
$card-md-subtitle-color: $text-color-step-450 !default;
|
||||
|
||||
@@ -4,34 +4,34 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the card title
|
||||
$card-ios-title-font-size: dynamic-font(28px);
|
||||
$card-ios-title-font-size: dynamic-font(28px) !default;
|
||||
|
||||
/// @prop - Font weight of the card title
|
||||
$card-ios-title-font-weight: 700;
|
||||
$card-ios-title-font-weight: 700 !default;
|
||||
|
||||
/// @prop - Padding top of the card title
|
||||
$card-ios-title-padding-top: 0;
|
||||
$card-ios-title-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the card title
|
||||
$card-ios-title-padding-end: $card-ios-title-padding-top;
|
||||
$card-ios-title-padding-end: $card-ios-title-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom of the card title
|
||||
$card-ios-title-padding-bottom: $card-ios-title-padding-top;
|
||||
$card-ios-title-padding-bottom: $card-ios-title-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the card title
|
||||
$card-ios-title-padding-start: $card-ios-title-padding-top;
|
||||
$card-ios-title-padding-start: $card-ios-title-padding-top !default;
|
||||
|
||||
/// @prop - Margin top of the card title
|
||||
$card-ios-title-margin-top: 0;
|
||||
$card-ios-title-margin-top: 0 !default;
|
||||
|
||||
/// @prop - Margin end of the card title
|
||||
$card-ios-title-margin-end: $card-ios-title-margin-top;
|
||||
$card-ios-title-margin-end: $card-ios-title-margin-top !default;
|
||||
|
||||
/// @prop - Margin bottom of the card title
|
||||
$card-ios-title-margin-bottom: $card-ios-title-margin-top;
|
||||
$card-ios-title-margin-bottom: $card-ios-title-margin-top !default;
|
||||
|
||||
/// @prop - Margin start of the card title
|
||||
$card-ios-title-margin-start: $card-ios-title-margin-top;
|
||||
$card-ios-title-margin-start: $card-ios-title-margin-top !default;
|
||||
|
||||
/// @prop - Color of the card title
|
||||
$card-ios-title-text-color: $text-color;
|
||||
$card-ios-title-text-color: $text-color !default;
|
||||
|
||||
@@ -4,31 +4,31 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the card title
|
||||
$card-md-title-font-size: dynamic-font(20px);
|
||||
$card-md-title-font-size: dynamic-font(20px) !default;
|
||||
|
||||
/// @prop - Padding top of the card title
|
||||
$card-md-title-padding-top: 0;
|
||||
$card-md-title-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the card title
|
||||
$card-md-title-padding-end: $card-md-title-padding-top;
|
||||
$card-md-title-padding-end: $card-md-title-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom of the card title
|
||||
$card-md-title-padding-bottom: $card-md-title-padding-top;
|
||||
$card-md-title-padding-bottom: $card-md-title-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the card title
|
||||
$card-md-title-padding-start: $card-md-title-padding-end;
|
||||
$card-md-title-padding-start: $card-md-title-padding-end !default;
|
||||
|
||||
/// @prop - Margin top of the card title
|
||||
$card-md-title-margin-top: 0;
|
||||
$card-md-title-margin-top: 0 !default;
|
||||
|
||||
/// @prop - Margin end of the card title
|
||||
$card-md-title-margin-end: $card-md-title-margin-top;
|
||||
$card-md-title-margin-end: $card-md-title-margin-top !default;
|
||||
|
||||
/// @prop - Margin bottom of the card title
|
||||
$card-md-title-margin-bottom: $card-md-title-margin-top;
|
||||
$card-md-title-margin-bottom: $card-md-title-margin-top !default;
|
||||
|
||||
/// @prop - Margin start of the card title
|
||||
$card-md-title-margin-start: $card-md-title-margin-end;
|
||||
$card-md-title-margin-start: $card-md-title-margin-end !default;
|
||||
|
||||
/// @prop - Color of the card title
|
||||
$card-md-title-text-color: $text-color-step-150;
|
||||
$card-md-title-text-color: $text-color-step-150 !default;
|
||||
|
||||
@@ -4,31 +4,31 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Margin top of the card
|
||||
$card-ios-margin-top: 24px;
|
||||
$card-ios-margin-top: 24px !default;
|
||||
|
||||
/// @prop - Margin end of the card
|
||||
$card-ios-margin-end: 16px;
|
||||
$card-ios-margin-end: 16px !default;
|
||||
|
||||
/// @prop - Margin bottom of the card
|
||||
$card-ios-margin-bottom: $card-ios-margin-top;
|
||||
$card-ios-margin-bottom: $card-ios-margin-top !default;
|
||||
|
||||
/// @prop - Margin start of the card
|
||||
$card-ios-margin-start: 16px;
|
||||
$card-ios-margin-start: 16px !default;
|
||||
|
||||
/// @prop - Box shadow color of the card
|
||||
$card-ios-box-shadow-color: rgba(0, 0, 0, .12);
|
||||
$card-ios-box-shadow-color: rgba(0, 0, 0, .12) !default;
|
||||
|
||||
/// @prop - Box shadow of the card
|
||||
$card-ios-box-shadow: 0 4px 16px $card-ios-box-shadow-color;
|
||||
$card-ios-box-shadow: 0 4px 16px $card-ios-box-shadow-color !default;
|
||||
|
||||
/// @prop - Border radius of the card
|
||||
$card-ios-border-radius: 8px;
|
||||
$card-ios-border-radius: 8px !default;
|
||||
|
||||
/// @prop - Font size of the card
|
||||
$card-ios-font-size: dynamic-font(14px);
|
||||
$card-ios-font-size: dynamic-font(14px) !default;
|
||||
|
||||
/// @prop - Transition timing function of the card
|
||||
$card-ios-transition-timing-function: cubic-bezier(0.12, 0.72, 0.29, 1);
|
||||
$card-ios-transition-timing-function: cubic-bezier(0.12, 0.72, 0.29, 1) !default;
|
||||
|
||||
/// @prop - Transform of the card on activate
|
||||
$card-ios-transform-activated: scale3d(.97, .97, 1);
|
||||
$card-ios-transform-activated: scale3d(.97, .97, 1) !default;
|
||||
|
||||
@@ -4,25 +4,25 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Margin top of the card
|
||||
$card-md-margin-top: 10px;
|
||||
$card-md-margin-top: 10px !default;
|
||||
|
||||
/// @prop - Margin end of the card
|
||||
$card-md-margin-end: 10px;
|
||||
$card-md-margin-end: 10px !default;
|
||||
|
||||
/// @prop - Margin bottom of the card
|
||||
$card-md-margin-bottom: 10px;
|
||||
$card-md-margin-bottom: 10px !default;
|
||||
|
||||
/// @prop - Margin start of the card
|
||||
$card-md-margin-start: 10px;
|
||||
$card-md-margin-start: 10px !default;
|
||||
|
||||
/// @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);
|
||||
$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;
|
||||
|
||||
/// @prop - Border radius of the card
|
||||
$card-md-border-radius: 4px;
|
||||
$card-md-border-radius: 4px !default;
|
||||
|
||||
/// @prop - Font size of the card
|
||||
$card-md-font-size: dynamic-font(14px);
|
||||
$card-md-font-size: dynamic-font(14px) !default;
|
||||
|
||||
/// @prop - Line height of the card
|
||||
$card-md-line-height: 1.5;
|
||||
$card-md-line-height: 1.5 !default;
|
||||
|
||||
@@ -6,25 +6,25 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Background color of the checkbox when off
|
||||
$checkbox-ios-background-color-off: $item-ios-background;
|
||||
$checkbox-ios-background-color-off: $item-ios-background !default;
|
||||
|
||||
/// @prop - Size of the checkbox icon
|
||||
$checkbox-ios-icon-size: dynamic-font-max(22px, 2.538);
|
||||
$checkbox-ios-icon-size: dynamic-font-max(22px, 2.538) !default;
|
||||
|
||||
/// @prop - Border color of the checkbox icon when off
|
||||
$checkbox-ios-icon-border-color-off: rgba($text-color-rgb, 0.23);
|
||||
$checkbox-ios-icon-border-color-off: rgba($text-color-rgb, 0.23) !default;
|
||||
|
||||
/// @prop - Border width of the checkbox icon
|
||||
$checkbox-ios-icon-border-width: dynamic-font(2px);
|
||||
$checkbox-ios-icon-border-width: dynamic-font(2px) !default;
|
||||
|
||||
/// @prop - Border style of the checkbox icon
|
||||
$checkbox-ios-icon-border-style: solid;
|
||||
$checkbox-ios-icon-border-style: solid !default;
|
||||
|
||||
/// @prop - Border radius of the checkbox icon
|
||||
$checkbox-ios-icon-border-radius: 50%;
|
||||
$checkbox-ios-icon-border-radius: 50% !default;
|
||||
|
||||
/// @prop - Opacity of the disabled checkbox
|
||||
$checkbox-ios-disabled-opacity: $form-control-ios-disabled-opacity;
|
||||
$checkbox-ios-disabled-opacity: $form-control-ios-disabled-opacity !default;
|
||||
|
||||
/// @prop - Checkmark width of the checkbox icon
|
||||
$checkbox-ios-icon-checkmark-width: 1.5px;
|
||||
$checkbox-ios-icon-checkmark-width: 1.5px !default;
|
||||
|
||||
@@ -5,30 +5,30 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Opacity of the disabled checkbox label
|
||||
$checkbox-md-disabled-opacity: $form-control-md-disabled-opacity;
|
||||
$checkbox-md-disabled-opacity: $form-control-md-disabled-opacity !default;
|
||||
|
||||
/// @prop - Background color of the checkbox icon when off
|
||||
$checkbox-md-icon-background-color-off: $item-md-background;
|
||||
$checkbox-md-icon-background-color-off: $item-md-background !default;
|
||||
|
||||
/// @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;
|
||||
$checkbox-md-icon-size: 18px !default;
|
||||
|
||||
/// @prop - Border width of the checkbox icon
|
||||
$checkbox-md-icon-border-width: 2px;
|
||||
$checkbox-md-icon-border-width: 2px !default;
|
||||
|
||||
/// @prop - Border style of the checkbox icon
|
||||
$checkbox-md-icon-border-style: solid;
|
||||
$checkbox-md-icon-border-style: solid !default;
|
||||
|
||||
/// @prop - Border color of the checkbox icon when off
|
||||
$checkbox-md-icon-border-color-off: rgb($text-color-rgb, 0.60);
|
||||
$checkbox-md-icon-border-color-off: rgb($text-color-rgb, 0.60) !default;
|
||||
|
||||
/// @prop - Transition duration of the checkbox
|
||||
$checkbox-md-transition-duration: 180ms;
|
||||
$checkbox-md-transition-duration: 180ms !default;
|
||||
|
||||
/// @prop - Transition easing of the checkbox
|
||||
$checkbox-md-transition-easing: cubic-bezier(.4, 0, .2, 1);
|
||||
$checkbox-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default;
|
||||
|
||||
/// @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);
|
||||
/// 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;
|
||||
$checkbox-md-icon-disabled-opacity: 0.63 !default;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/// @prop - Top margin of checkbox's label when in an item
|
||||
$checkbox-item-label-margin-top: 10px;
|
||||
$checkbox-item-label-margin-top: 10px !default;
|
||||
|
||||
/// @prop - Bottom margin of checkbox's label when in an item
|
||||
$checkbox-item-label-margin-bottom: 10px;
|
||||
$checkbox-item-label-margin-bottom: 10px !default;
|
||||
@@ -5,7 +5,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - The padding for the grid column
|
||||
$grid-column-padding: var(--ion-grid-column-padding, 5px);
|
||||
$grid-column-padding: var(--ion-grid-column-padding, 5px) !default;
|
||||
|
||||
/// @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;
|
||||
$datetime-ios-border-color: 0.55px solid $background-color-step-200 !default;
|
||||
|
||||
/// @prop - Padding for content
|
||||
$datetime-ios-padding: 16px;
|
||||
$datetime-ios-padding: 16px !default;
|
||||
|
||||
/// @prop - The font size at which layouts may change to accommodate Dynamic Type
|
||||
$datetime-dynamic-font-breakpoint: 24px;
|
||||
$datetime-dynamic-font-breakpoint: 24px !default;
|
||||
|
||||
/// @prop - Width of the calendar day
|
||||
$datetime-ios-day-width: 40px;
|
||||
$datetime-ios-day-width: 40px !default;
|
||||
|
||||
/// @prop - Height of the calendar day
|
||||
$datetime-ios-day-height: $datetime-ios-day-width;
|
||||
$datetime-ios-day-height: $datetime-ios-day-width !default;
|
||||
|
||||
@@ -2,22 +2,22 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size for title in header
|
||||
$datetime-md-title-font-size: dynamic-font(12px);
|
||||
$datetime-md-title-font-size: dynamic-font(12px) !default;
|
||||
|
||||
/// @prop - Font size for selected date in header
|
||||
$datetime-md-selected-date-font-size: dynamic-font(34px);
|
||||
$datetime-md-selected-date-font-size: dynamic-font(34px) !default;
|
||||
|
||||
/// @prop - Font size for calendar day button
|
||||
$datetime-md-calendar-item-font-size: dynamic-font(14px);
|
||||
$datetime-md-calendar-item-font-size: dynamic-font(14px) !default;
|
||||
|
||||
/// @prop - Padding for content in header
|
||||
$datetime-md-header-padding: 20px;
|
||||
$datetime-md-header-padding: 20px !default;
|
||||
|
||||
/// @prop - Padding for content
|
||||
$datetime-md-padding: 16px;
|
||||
$datetime-md-padding: 16px !default;
|
||||
|
||||
/// @prop - Width of the calendar day
|
||||
$datetime-md-day-width: 42px;
|
||||
$datetime-md-day-width: 42px !default;
|
||||
|
||||
/// @prop - Height of the calendar day
|
||||
$datetime-md-day-height: $datetime-md-day-width;
|
||||
$datetime-md-day-height: $datetime-md-day-width !default;
|
||||
|
||||
@@ -847,6 +847,23 @@ export class Datetime implements ComponentInterface {
|
||||
this.maxParts = parseMaxParts(max, defaultParts);
|
||||
};
|
||||
|
||||
private centerCalendarGrid = (workingMonth: HTMLElement) => {
|
||||
const { el, calendarBodyRef } = this;
|
||||
|
||||
if (!calendarBodyRef) return;
|
||||
|
||||
const monthRight = workingMonth.offsetLeft + workingMonth.offsetWidth;
|
||||
const elRight = el.offsetLeft + el.offsetWidth;
|
||||
|
||||
if (monthRight > elRight) {
|
||||
calendarBodyRef.scrollLeft = workingMonth.clientWidth;
|
||||
console.log('LTR', workingMonth)
|
||||
} else {
|
||||
calendarBodyRef.scrollLeft = -workingMonth.clientWidth;
|
||||
console.log('RTL', workingMonth)
|
||||
}
|
||||
}
|
||||
|
||||
private initializeCalendarListener = () => {
|
||||
const calendarBodyRef = this.calendarBodyRef;
|
||||
if (!calendarBodyRef) {
|
||||
@@ -868,11 +885,11 @@ export class Datetime implements ComponentInterface {
|
||||
* the months in a row allows us to mostly sidestep
|
||||
* that issue.
|
||||
*/
|
||||
const months = calendarBodyRef.querySelectorAll('.calendar-month');
|
||||
const months = calendarBodyRef.querySelectorAll<HTMLElement>('.calendar-month');
|
||||
|
||||
const startMonth = months[0] as HTMLElement;
|
||||
const workingMonth = months[1] as HTMLElement;
|
||||
const endMonth = months[2] as HTMLElement;
|
||||
const startMonth = months[0];
|
||||
const workingMonth = months[1];
|
||||
const endMonth = months[2];
|
||||
const mode = getIonMode(this);
|
||||
const needsiOSRubberBandFix = mode === 'ios' && typeof navigator !== 'undefined' && navigator.maxTouchPoints > 1;
|
||||
|
||||
@@ -883,7 +900,7 @@ export class Datetime implements ComponentInterface {
|
||||
* if element is not in viewport. Use scrollLeft instead.
|
||||
*/
|
||||
writeTask(() => {
|
||||
calendarBodyRef.scrollLeft = startMonth.clientWidth * (isRTL(this.el) ? -1 : 1);
|
||||
this.centerCalendarGrid(workingMonth);
|
||||
|
||||
const getChangedMonth = (parts: DatetimeParts): DatetimeParts | undefined => {
|
||||
const box = calendarBodyRef.getBoundingClientRect();
|
||||
@@ -953,6 +970,7 @@ export class Datetime implements ComponentInterface {
|
||||
* then we can return early.
|
||||
*/
|
||||
const newDate = getChangedMonth(this.workingParts);
|
||||
console.log(newDate,this.workingParts)
|
||||
if (!newDate) return;
|
||||
|
||||
const { month, day, year } = newDate;
|
||||
@@ -993,7 +1011,7 @@ export class Datetime implements ComponentInterface {
|
||||
year,
|
||||
});
|
||||
|
||||
calendarBodyRef.scrollLeft = workingMonth.clientWidth * (isRTL(this.el) ? -1 : 1);
|
||||
this.centerCalendarGrid(workingMonth);
|
||||
calendarBodyRef.style.removeProperty('overflow');
|
||||
|
||||
if (this.resolveForceDateScrolling) {
|
||||
@@ -1185,7 +1203,7 @@ export class Datetime implements ComponentInterface {
|
||||
*/
|
||||
const hasCalendarGrid = !preferWheel && ['date-time', 'time-date', 'date'].includes(presentation);
|
||||
if (minParts !== undefined && hasCalendarGrid && calendarBodyRef) {
|
||||
const workingMonth = calendarBodyRef.querySelector('.calendar-month:nth-of-type(1)');
|
||||
const workingMonth = calendarBodyRef.querySelector<HTMLElement>('.calendar-month:nth-of-type(1)');
|
||||
/**
|
||||
* We need to make sure the datetime is not in the process
|
||||
* of scrolling to a new datetime value if the value
|
||||
@@ -1200,7 +1218,7 @@ export class Datetime implements ComponentInterface {
|
||||
* and the resolveForceDateScrolling promise never resolves.
|
||||
*/
|
||||
if (workingMonth && forceRenderDate === undefined) {
|
||||
calendarBodyRef.scrollLeft = workingMonth.clientWidth * (isRTL(this.el) ? -1 : 1);
|
||||
this.centerCalendarGrid(workingMonth);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1464,16 +1482,24 @@ export class Datetime implements ComponentInterface {
|
||||
return;
|
||||
}
|
||||
|
||||
const nextMonth = calendarBodyRef.querySelector('.calendar-month:last-of-type');
|
||||
const nextMonth = calendarBodyRef.querySelector<HTMLElement>('.calendar-month:last-of-type');
|
||||
if (!nextMonth) {
|
||||
return;
|
||||
}
|
||||
|
||||
const left = (nextMonth as HTMLElement).offsetWidth * 2;
|
||||
const left = nextMonth.offsetWidth * 2;
|
||||
|
||||
if (!calendarBodyRef) return;
|
||||
|
||||
console.log('yay',left)
|
||||
|
||||
const monthRight = nextMonth.offsetLeft + nextMonth.offsetWidth;
|
||||
const elRight = this.el.offsetLeft + this.el.offsetWidth;
|
||||
const direction = monthRight > elRight ? 1 : -1;
|
||||
|
||||
calendarBodyRef.scrollTo({
|
||||
top: 0,
|
||||
left: left * (isRTL(this.el) ? -1 : 1),
|
||||
left: left * direction,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
};
|
||||
|
||||
@@ -99,170 +99,12 @@
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content class="ion-padding">
|
||||
<div class="grid">
|
||||
<div class="grid-item">
|
||||
<h2>Inline</h2>
|
||||
<ion-datetime value="2020-03-14T14:23:00.000Z" id="inline-datetime"></ion-datetime>
|
||||
</div>
|
||||
|
||||
<div class="grid-item">
|
||||
<h2>Inline - No Default Value</h2>
|
||||
<ion-datetime id="inline-datetime-no-value"></ion-datetime>
|
||||
</div>
|
||||
|
||||
<div class="grid-item">
|
||||
<h2>Popover</h2>
|
||||
<ion-button onclick="presentPopover(defaultPopover, event)">Present Popover</ion-button>
|
||||
<ion-popover class="datetime-popover" id="default-popover">
|
||||
<ion-datetime></ion-datetime>
|
||||
</ion-popover>
|
||||
</div>
|
||||
|
||||
<div class="grid-item">
|
||||
<h2>Modal</h2>
|
||||
<ion-button onclick="presentModal()">Present Modal</ion-button>
|
||||
</div>
|
||||
|
||||
<div class="grid-item">
|
||||
<h2>Inline - Custom</h2>
|
||||
<ion-datetime show-default-buttons="true" color="danger" id="custom-datetime" show-clear-button="true">
|
||||
<span slot="title">Select Date</span>
|
||||
</ion-datetime>
|
||||
</div>
|
||||
|
||||
<div class="grid-item">
|
||||
<h2>Popover - Custom</h2>
|
||||
<ion-button id="open-popover">Present Popover</ion-button>
|
||||
<ion-popover class="datetime-popover" trigger="open-popover" id="custom-popover">
|
||||
<ion-datetime>
|
||||
<span slot="title">My Custom Title</span>
|
||||
<ion-buttons slot="buttons">
|
||||
<ion-button color="danger">Destroy</ion-button>
|
||||
<ion-button color="primary">Confirm</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-datetime>
|
||||
</ion-popover>
|
||||
</div>
|
||||
|
||||
<div class="grid-item">
|
||||
<h2>Modal - Custom</h2>
|
||||
<ion-button id="open-modal">Present Modal</ion-button>
|
||||
<ion-modal trigger="open-modal" id="modal">
|
||||
<ion-datetime>
|
||||
<span slot="title">My Custom Title</span>
|
||||
<ion-buttons slot="buttons">
|
||||
<ion-button color="danger">Destroy</ion-button>
|
||||
<ion-button color="primary">Confirm</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-datetime>
|
||||
</ion-modal>
|
||||
</div>
|
||||
|
||||
<div class="grid-item">
|
||||
<h2>formatOptions</h2>
|
||||
<ion-datetime value="2020-03-14T14:23:00.000Z" id="format-options-datetime">
|
||||
<span slot="title">Select Date</span>
|
||||
</ion-datetime>
|
||||
</div>
|
||||
<ion-datetime></ion-datetime>
|
||||
<ion-datetime dir="rtl"></ion-datetime>
|
||||
<div dir="rtl">
|
||||
<ion-datetime></ion-datetime>
|
||||
</div>
|
||||
</ion-content>
|
||||
<script>
|
||||
const datetimes = document.querySelectorAll('ion-datetime');
|
||||
const color = document.querySelector('#color');
|
||||
const locale = document.querySelector('#locale');
|
||||
const datetime = document.querySelector('ion-datetime');
|
||||
const buttons = document.querySelectorAll('ion-button');
|
||||
const titleToggle = document.querySelector('#titleToggle');
|
||||
const buttonsToggle = document.querySelector('#buttonsToggle');
|
||||
|
||||
locale.addEventListener('ionBlur', (ev) => {
|
||||
const value = ev.target.value;
|
||||
datetimes.forEach((datetime) => {
|
||||
datetime.locale = !!value ? value : 'default';
|
||||
});
|
||||
});
|
||||
|
||||
const darkModeCheckbox = document.querySelector('ion-checkbox');
|
||||
darkModeCheckbox.addEventListener('ionChange', (ev) => {
|
||||
document.documentElement.classList.toggle('ion-palette-dark');
|
||||
});
|
||||
|
||||
color.addEventListener('ionChange', (ev) => {
|
||||
datetime.color = ev.target.value;
|
||||
buttons.forEach((button) => {
|
||||
button.color = ev.target.value;
|
||||
});
|
||||
});
|
||||
|
||||
titleToggle.addEventListener('ionChange', (ev) => {
|
||||
datetimes.forEach((datetime) => {
|
||||
datetime.showDefaultTitle = ev.detail.checked;
|
||||
});
|
||||
});
|
||||
buttonsToggle.addEventListener('ionChange', (ev) => {
|
||||
datetimes.forEach((datetime) => {
|
||||
datetime.showDefaultButtons = ev.detail.checked;
|
||||
});
|
||||
});
|
||||
|
||||
datetimes.forEach((datetime) => {
|
||||
datetime.addEventListener('ionFocus', () => {
|
||||
console.log('Listen ionFocus: fired');
|
||||
});
|
||||
|
||||
datetime.addEventListener('ionBlur', () => {
|
||||
console.log('Listen ionBlur: fired');
|
||||
});
|
||||
});
|
||||
|
||||
const defaultPopover = document.querySelector('ion-popover#default-popover');
|
||||
const customPopover = document.querySelector('ion-popover#custom-popover');
|
||||
const presentPopover = (popover, ev) => {
|
||||
popover.event = ev;
|
||||
popover.showBackdrop = false;
|
||||
popover.isOpen = true;
|
||||
|
||||
const dismiss = () => {
|
||||
popover.isOpen = false;
|
||||
popover.event = undefined;
|
||||
|
||||
popover.removeEventListener('didDismiss', dismiss);
|
||||
};
|
||||
|
||||
popover.addEventListener('didDismiss', dismiss);
|
||||
};
|
||||
|
||||
const presentModal = async () => {
|
||||
const modal = await createModal();
|
||||
|
||||
await modal.present();
|
||||
};
|
||||
|
||||
const createModal = () => {
|
||||
// create component to open
|
||||
const element = document.createElement('div');
|
||||
element.innerHTML = `
|
||||
<ion-datetime show-default-buttons="true" color="danger">
|
||||
<span slot="title">Select Date</span>
|
||||
</ion-datetime>
|
||||
`;
|
||||
|
||||
// present the modal
|
||||
const modalElement = Object.assign(document.createElement('ion-modal'), {
|
||||
component: element,
|
||||
});
|
||||
|
||||
const app = document.querySelector('ion-app');
|
||||
app.appendChild(modalElement);
|
||||
return modalElement;
|
||||
};
|
||||
|
||||
const formatOptions = document.querySelector('#format-options-datetime');
|
||||
formatOptions.formatOptions = {
|
||||
time: { hour: '2-digit', minute: '2-digit' },
|
||||
date: { day: '2-digit', month: 'long', era: 'short' },
|
||||
};
|
||||
</script>
|
||||
</ion-app>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -4,58 +4,58 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Box shadow of the FAB button
|
||||
$fab-ios-box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
|
||||
$fab-ios-box-shadow: 0 4px 16px rgba(0, 0, 0, .12) !default;
|
||||
|
||||
/// @prop - Box shadow of the activated FAB button
|
||||
$fab-ios-box-shadow-activated: $fab-ios-box-shadow;
|
||||
$fab-ios-box-shadow-activated: $fab-ios-box-shadow !default;
|
||||
|
||||
/// @prop - Transform of the FAB button
|
||||
$fab-ios-transform: scale(1.1);
|
||||
$fab-ios-transform: scale(1.1) !default;
|
||||
|
||||
/// @prop - Transition of the FAB button
|
||||
$fab-ios-transition: .2s transform cubic-bezier(.25, 1.11, .78, 1.59);
|
||||
$fab-ios-transition: .2s transform cubic-bezier(.25, 1.11, .78, 1.59) !default;
|
||||
|
||||
/// @prop - Transition of the activated FAB button
|
||||
$fab-ios-transition-activated: .2s transform ease-out;
|
||||
$fab-ios-transition-activated: .2s transform ease-out !default;
|
||||
|
||||
/// @prop - Background color of the button
|
||||
$fab-ios-background-color: ion-color(primary, base);
|
||||
$fab-ios-background-color: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Background color of the activated button
|
||||
$fab-ios-background-color-activated: ion-color(primary, shade);
|
||||
$fab-ios-background-color-activated: ion-color(primary, shade) !default;
|
||||
|
||||
/// @prop - Text color of the button
|
||||
$fab-ios-text-color: ion-color(primary, contrast);
|
||||
$fab-ios-text-color: ion-color(primary, contrast) !default;
|
||||
|
||||
/// @prop - Font size of the button icon
|
||||
$fab-ios-icon-font-size: 28px;
|
||||
$fab-ios-icon-font-size: 28px !default;
|
||||
|
||||
/// @prop - Background color of the button in a list
|
||||
$fab-ios-list-button-background-color: ion-color(light, base);
|
||||
$fab-ios-list-button-background-color: ion-color(light, base) !default;
|
||||
|
||||
/// @prop - Background color of the activated button in a list
|
||||
$fab-ios-list-button-background-color-activated: ion-color(light, shade);
|
||||
$fab-ios-list-button-background-color-activated: ion-color(light, shade) !default;
|
||||
|
||||
/// @prop - Background color of the hovered button in a list
|
||||
$fab-ios-list-button-background-color-hover: ion-color(light, tint);
|
||||
$fab-ios-list-button-background-color-hover: ion-color(light, tint) !default;
|
||||
|
||||
/// @prop - Text color of the button in a list
|
||||
$fab-ios-list-button-text-color: ion-color(light, contrast);
|
||||
$fab-ios-list-button-text-color: ion-color(light, contrast) !default;
|
||||
|
||||
/// @prop - Font size of the button icon in a list
|
||||
$fab-ios-list-button-icon-font-size: 18px;
|
||||
$fab-ios-list-button-icon-font-size: 18px !default;
|
||||
|
||||
// Translucent FAB Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Backdrop filter of the translucent button
|
||||
$fab-ios-translucent-filter: saturate(180%) blur(20px);
|
||||
$fab-ios-translucent-filter: saturate(180%) blur(20px) !default;
|
||||
|
||||
/// @prop - Alpha level of the translucent button background
|
||||
$fab-ios-translucent-background-alpha: .9;
|
||||
$fab-ios-translucent-background-alpha: .9 !default;
|
||||
|
||||
/// @prop - Alpha level of the translucent button background on hover
|
||||
$fab-ios-translucent-background-alpha-hover: .8;
|
||||
$fab-ios-translucent-background-alpha-hover: .8 !default;
|
||||
|
||||
/// @prop - Alpha level of the translucent button background on focus
|
||||
$fab-ios-translucent-background-alpha-focused: .82;
|
||||
$fab-ios-translucent-background-alpha-focused: .82 !default;
|
||||
|
||||
@@ -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);
|
||||
$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;
|
||||
|
||||
/// @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);
|
||||
$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;
|
||||
|
||||
/// @prop - Background color of the button
|
||||
$fab-md-background-color: ion-color(primary, base);
|
||||
$fab-md-background-color: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Text color of the button
|
||||
$fab-md-text-color: ion-color(primary, contrast);
|
||||
$fab-md-text-color: ion-color(primary, contrast) !default;
|
||||
|
||||
/// @prop - Font size of the button icon
|
||||
$fab-md-icon-font-size: 24px;
|
||||
$fab-md-icon-font-size: 24px !default;
|
||||
|
||||
/// @prop - Background color of the button in a list
|
||||
$fab-md-list-button-background-color: ion-color(light, base);
|
||||
$fab-md-list-button-background-color: ion-color(light, base) !default;
|
||||
|
||||
/// @prop - Background color of the activated button in a list
|
||||
$fab-md-list-button-background-color-activated: ion-color(light, shade);
|
||||
$fab-md-list-button-background-color-activated: ion-color(light, shade) !default;
|
||||
|
||||
/// @prop - Background color of the activated button in a list
|
||||
$fab-md-list-button-background-color-hover: ion-color(light, tint);
|
||||
$fab-md-list-button-background-color-hover: ion-color(light, tint) !default;
|
||||
|
||||
/// @prop - Text color of the button in a list
|
||||
$fab-md-list-button-text-color: rgba($text-color-rgb, 0.54);
|
||||
$fab-md-list-button-text-color: rgba($text-color-rgb, 0.54) !default;
|
||||
|
||||
/// @prop - Font size of the button icon in a list
|
||||
$fab-md-list-button-icon-font-size: 18px;
|
||||
$fab-md-list-button-icon-font-size: 18px !default;
|
||||
|
||||
@@ -4,13 +4,13 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Width and height of the FAB button
|
||||
$fab-size: 56px;
|
||||
$fab-size: 56px !default;
|
||||
|
||||
/// @prop - Width and height of the mini FAB button
|
||||
$fab-small-size: 40px;
|
||||
$fab-small-size: 40px !default;
|
||||
|
||||
/// @prop - Border radius of the FAB button
|
||||
$fab-border-radius: 50%;
|
||||
$fab-border-radius: 50% !default;
|
||||
|
||||
/// @prop - Margin applied to the small FAB button
|
||||
$fab-button-small-margin: 8px;
|
||||
$fab-button-small-margin: 8px !default;
|
||||
|
||||
@@ -5,4 +5,4 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Margin of the FAB List
|
||||
$fab-list-margin: 10px;
|
||||
$fab-list-margin: 10px !default;
|
||||
|
||||
@@ -5,4 +5,4 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Margin of the FAB Container
|
||||
$fab-content-margin: 10px;
|
||||
$fab-content-margin: 10px !default;
|
||||
|
||||
@@ -4,4 +4,4 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Filter of the translucent footer
|
||||
$footer-ios-translucent-filter: saturate(180%) blur(20px);
|
||||
$footer-ios-translucent-filter: saturate(180%) blur(20px) !default;
|
||||
|
||||
@@ -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);
|
||||
0 1px 10px 0 rgba(0, 0, 0, 0.12) !default;
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - The padding for the grid
|
||||
$grid-padding: var(--ion-grid-padding, 5px);
|
||||
$grid-padding: var(--ion-grid-padding, 5px) !default;
|
||||
|
||||
/// @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);
|
||||
$header-ios-translucent-filter: saturate(180%) blur($header-ios-blur) !default;
|
||||
|
||||
@@ -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);
|
||||
0 1px 10px 0 rgba(0, 0, 0, 0.12) !default;
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Color of the infinite scroll loading indicator
|
||||
$infinite-scroll-ios-loading-color: $text-color-step-400;
|
||||
$infinite-scroll-ios-loading-color: $text-color-step-400 !default;
|
||||
|
||||
/// @prop - Color of the infinite scroll loading indicator text
|
||||
$infinite-scroll-ios-loading-text-color: $infinite-scroll-ios-loading-color;
|
||||
$infinite-scroll-ios-loading-text-color: $infinite-scroll-ios-loading-color !default;
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Color of the infinite scroll loading indicator
|
||||
$infinite-scroll-md-loading-color: $text-color-step-400;
|
||||
$infinite-scroll-md-loading-color: $text-color-step-400 !default;
|
||||
|
||||
/// @prop - Color of the infinite scroll loading indicator text
|
||||
$infinite-scroll-md-loading-text-color: $infinite-scroll-md-loading-color;
|
||||
$infinite-scroll-md-loading-text-color: $infinite-scroll-md-loading-color !default;
|
||||
|
||||
@@ -4,28 +4,28 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Minimum height of the infinite scroll content
|
||||
$infinite-scroll-content-min-height: 84px;
|
||||
$infinite-scroll-content-min-height: 84px !default;
|
||||
|
||||
/// @prop - Margin top of the infinite scroll loading icon
|
||||
$infinite-scroll-loading-margin-top: 0;
|
||||
$infinite-scroll-loading-margin-top: 0 !default;
|
||||
|
||||
/// @prop - Margin end of the infinite scroll loading icon
|
||||
$infinite-scroll-loading-margin-end: 0;
|
||||
$infinite-scroll-loading-margin-end: 0 !default;
|
||||
|
||||
/// @prop - Margin bottom of the infinite scroll loading icon
|
||||
$infinite-scroll-loading-margin-bottom: 32px;
|
||||
$infinite-scroll-loading-margin-bottom: 32px !default;
|
||||
|
||||
/// @prop - Margin start of the infinite scroll loading icon
|
||||
$infinite-scroll-loading-margin-start: $infinite-scroll-loading-margin-end;
|
||||
$infinite-scroll-loading-margin-start: $infinite-scroll-loading-margin-end !default;
|
||||
|
||||
/// @prop - Margin top of the infinite scroll loading text
|
||||
$infinite-scroll-loading-text-margin-top: 4px;
|
||||
$infinite-scroll-loading-text-margin-top: 4px !default;
|
||||
|
||||
/// @prop - Margin end of the infinite scroll loading text
|
||||
$infinite-scroll-loading-text-margin-end: 32px;
|
||||
$infinite-scroll-loading-text-margin-end: 32px !default;
|
||||
|
||||
/// @prop - Margin bottom of the infinite scroll loading text
|
||||
$infinite-scroll-loading-text-margin-bottom: 0;
|
||||
$infinite-scroll-loading-text-margin-bottom: 0 !default;
|
||||
|
||||
/// @prop - Margin start of the infinite scroll loading text
|
||||
$infinite-scroll-loading-text-margin-start: $infinite-scroll-loading-text-margin-end;
|
||||
$infinite-scroll-loading-text-margin-start: $infinite-scroll-loading-text-margin-end !default;
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the input
|
||||
$input-ios-font-size: inherit;
|
||||
$input-ios-font-size: inherit !default;
|
||||
|
||||
/// @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;
|
||||
$input-ios-disabled-opacity: $form-control-ios-disabled-opacity !default;
|
||||
|
||||
@@ -5,10 +5,10 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the input
|
||||
$input-md-font-size: inherit;
|
||||
$input-md-font-size: inherit !default;
|
||||
|
||||
/// @prop - The amount of whitespace to display on either side of the floating label
|
||||
$input-md-floating-label-padding: 4px;
|
||||
$input-md-floating-label-padding: 4px !default;
|
||||
|
||||
/// @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;
|
||||
$input-md-disabled-opacity: $form-control-md-disabled-opacity !default;
|
||||
|
||||
@@ -366,7 +366,6 @@ export class Input implements ComponentInterface {
|
||||
* such as [type] in Angular.
|
||||
*/
|
||||
this.onTypeChange();
|
||||
this.debounceChanged();
|
||||
}
|
||||
|
||||
componentDidRender() {
|
||||
@@ -783,15 +782,6 @@ 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;
|
||||
$item-divider-ios-min-height: 28px !default;
|
||||
|
||||
/// @prop - Font size of the item
|
||||
$item-divider-ios-font-size: dynamic-font(17px);
|
||||
$item-divider-ios-font-size: dynamic-font(17px) !default;
|
||||
|
||||
/// @prop - Font weight of the item
|
||||
$item-divider-ios-font-weight: 600;
|
||||
$item-divider-ios-font-weight: 600 !default;
|
||||
|
||||
/// @prop - Background for the divider
|
||||
$item-divider-ios-background: $background-color-step-100;
|
||||
$item-divider-ios-background: $background-color-step-100 !default;
|
||||
|
||||
/// @prop - Color for the divider
|
||||
$item-divider-ios-color: $text-color-step-150;
|
||||
$item-divider-ios-color: $text-color-step-150 !default;
|
||||
|
||||
/// @prop - Padding start for the divider
|
||||
$item-divider-ios-padding-start: $item-ios-padding-start;
|
||||
$item-divider-ios-padding-start: $item-ios-padding-start !default;
|
||||
|
||||
/// @prop - Padding end for the divider
|
||||
$item-divider-ios-padding-end: $item-ios-padding-end;
|
||||
$item-divider-ios-padding-end: $item-ios-padding-end !default;
|
||||
|
||||
@@ -5,22 +5,22 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Minimum height for the divider
|
||||
$item-divider-md-min-height: 30px;
|
||||
$item-divider-md-min-height: 30px !default;
|
||||
|
||||
/// @prop - Color for the divider
|
||||
$item-divider-md-color: $text-color-step-600;
|
||||
$item-divider-md-color: $text-color-step-600 !default;
|
||||
|
||||
/// @prop - Background for the divider
|
||||
$item-divider-md-background: $background-color;
|
||||
$item-divider-md-background: $background-color !default;
|
||||
|
||||
/// @prop - Font size for the divider
|
||||
$item-divider-md-font-size: 14px;
|
||||
$item-divider-md-font-size: 14px !default;
|
||||
|
||||
/// @prop - Border bottom for the divider
|
||||
$item-divider-md-border-bottom: 1px solid $item-md-border-color;
|
||||
$item-divider-md-border-bottom: 1px solid $item-md-border-color !default;
|
||||
|
||||
/// @prop - Padding start for the divider
|
||||
$item-divider-md-padding-start: $item-md-padding-start;
|
||||
$item-divider-md-padding-start: $item-md-padding-start !default;
|
||||
|
||||
/// @prop - Padding end for the divider
|
||||
$item-divider-md-padding-end: $item-md-padding-end;
|
||||
$item-divider-md-padding-end: $item-md-padding-end !default;
|
||||
|
||||
@@ -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);
|
||||
$item-option-button-ios-font-size: dynamic-font-clamp(1, 16px, 2.2) !default;
|
||||
|
||||
@@ -4,4 +4,4 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the sliding option button
|
||||
$item-option-button-md-font-size: dynamic-font(14px);
|
||||
$item-option-button-md-font-size: dynamic-font(14px) !default;
|
||||
|
||||
@@ -4,107 +4,107 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Minimum height of the item
|
||||
$item-ios-min-height: 44px;
|
||||
$item-ios-min-height: 44px !default;
|
||||
|
||||
/// @prop - Font size of the item
|
||||
$item-ios-font-size: dynamic-font(16px);
|
||||
$item-ios-font-size: dynamic-font(16px) !default;
|
||||
|
||||
/// @prop - Margin top of the item paragraph
|
||||
$item-ios-paragraph-margin-top: 0;
|
||||
$item-ios-paragraph-margin-top: 0 !default;
|
||||
|
||||
/// @prop - Margin end of the item paragraph
|
||||
$item-ios-paragraph-margin-end: 0;
|
||||
$item-ios-paragraph-margin-end: 0 !default;
|
||||
|
||||
/// @prop - Margin bottom of the item paragraph
|
||||
$item-ios-paragraph-margin-bottom: 2px;
|
||||
$item-ios-paragraph-margin-bottom: 2px !default;
|
||||
|
||||
/// @prop - Margin start of the item paragraph
|
||||
$item-ios-paragraph-margin-start: $item-ios-paragraph-margin-end;
|
||||
$item-ios-paragraph-margin-start: $item-ios-paragraph-margin-end !default;
|
||||
|
||||
/// @prop - Font size of the item paragraph
|
||||
$item-ios-paragraph-font-size: dynamic-font(14px);
|
||||
$item-ios-paragraph-font-size: dynamic-font(14px) !default;
|
||||
|
||||
/// @prop - Color of the item paragraph
|
||||
$item-ios-paragraph-text-color: var(--ion-text-color-step-550, #a3a3a3);
|
||||
$item-ios-paragraph-text-color: var(--ion-text-color-step-550, #a3a3a3) !default;
|
||||
|
||||
/// @prop - Width of the avatar in the item
|
||||
$item-ios-avatar-width: 36px;
|
||||
$item-ios-avatar-width: 36px !default;
|
||||
|
||||
/// @prop - Height of the avatar in the item
|
||||
$item-ios-avatar-height: $item-ios-avatar-width;
|
||||
$item-ios-avatar-height: $item-ios-avatar-width !default;
|
||||
|
||||
/// @prop - Size of the thumbnail in the item
|
||||
$item-ios-thumbnail-size: 56px;
|
||||
$item-ios-thumbnail-size: 56px !default;
|
||||
|
||||
/// @prop - Padding top for the item content
|
||||
$item-ios-padding-top: 10px;
|
||||
$item-ios-padding-top: 10px !default;
|
||||
|
||||
/// @prop - Padding end for the item content
|
||||
$item-ios-padding-end: 16px;
|
||||
$item-ios-padding-end: 16px !default;
|
||||
|
||||
/// @prop - Padding bottom for the item content
|
||||
$item-ios-padding-bottom: 10px;
|
||||
$item-ios-padding-bottom: 10px !default;
|
||||
|
||||
/// @prop - Padding start for the item content
|
||||
$item-ios-padding-start: 16px;
|
||||
$item-ios-padding-start: 16px !default;
|
||||
|
||||
/// @prop - Border bottom width for the item when lines are displayed
|
||||
$item-ios-border-bottom-width: $hairlines-width;
|
||||
$item-ios-border-bottom-width: $hairlines-width !default;
|
||||
|
||||
/// @prop - Border bottom style for the item when lines are displayed
|
||||
$item-ios-border-bottom-style: solid;
|
||||
$item-ios-border-bottom-style: solid !default;
|
||||
|
||||
/// @prop - Border bottom color for the item when lines are displayed
|
||||
$item-ios-border-bottom-color: $item-ios-border-color;
|
||||
$item-ios-border-bottom-color: $item-ios-border-color !default;
|
||||
|
||||
|
||||
// Item Slots
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Margin top for the start slot
|
||||
$item-ios-slot-start-margin-top: 2px;
|
||||
$item-ios-slot-start-margin-top: 2px !default;
|
||||
|
||||
/// @prop - Margin end for the start slot
|
||||
$item-ios-slot-start-margin-end: $item-ios-padding-end;
|
||||
$item-ios-slot-start-margin-end: $item-ios-padding-end !default;
|
||||
|
||||
/// @prop - Margin bottom for the start slot
|
||||
$item-ios-slot-start-margin-bottom: $item-ios-slot-start-margin-top;
|
||||
$item-ios-slot-start-margin-bottom: $item-ios-slot-start-margin-top !default;
|
||||
|
||||
/// @prop - Margin start for the start slot
|
||||
$item-ios-slot-start-margin-start: 0;
|
||||
$item-ios-slot-start-margin-start: 0 !default;
|
||||
|
||||
/// @prop - Margin top for the end slot
|
||||
$item-ios-slot-end-margin-top: null;
|
||||
$item-ios-slot-end-margin-top: null !default;
|
||||
|
||||
/// @prop - Margin end for the end slot
|
||||
$item-ios-slot-end-margin-end: null;
|
||||
$item-ios-slot-end-margin-end: null !default;
|
||||
|
||||
/// @prop - Margin bottom for the end slot
|
||||
$item-ios-slot-end-margin-bottom: $item-ios-slot-end-margin-top;
|
||||
$item-ios-slot-end-margin-bottom: $item-ios-slot-end-margin-top !default;
|
||||
|
||||
/// @prop - Margin start for the end slot
|
||||
$item-ios-slot-end-margin-start: null;
|
||||
$item-ios-slot-end-margin-start: null !default;
|
||||
|
||||
/// @prop - Margin top for an icon in the start/end slot
|
||||
$item-ios-icon-slot-margin-top: 7px;
|
||||
$item-ios-icon-slot-margin-top: 7px !default;
|
||||
|
||||
/// @prop - Margin end for an icon in the start/end slot
|
||||
$item-ios-icon-slot-margin-end: null;
|
||||
$item-ios-icon-slot-margin-end: null !default;
|
||||
|
||||
/// @prop - Margin bottom for an icon in the start/end slot
|
||||
$item-ios-icon-slot-margin-bottom: 7px;
|
||||
$item-ios-icon-slot-margin-bottom: 7px !default;
|
||||
|
||||
/// @prop - Margin start for an icon in the start/end slot
|
||||
$item-ios-icon-slot-margin-start: null;
|
||||
$item-ios-icon-slot-margin-start: null !default;
|
||||
|
||||
/// @prop - Margin top for the end slot inside of a floating/stacked label
|
||||
$item-ios-label-slot-end-margin-top: 7px;
|
||||
$item-ios-label-slot-end-margin-top: 7px !default;
|
||||
|
||||
/// @prop - Margin end for the end slot inside of a floating/stacked label
|
||||
$item-ios-label-slot-end-margin-end: null;
|
||||
$item-ios-label-slot-end-margin-end: null !default;
|
||||
|
||||
/// @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;
|
||||
$item-ios-label-slot-end-margin-bottom: $item-ios-label-slot-end-margin-top !default;
|
||||
|
||||
/// @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;
|
||||
$item-ios-label-slot-end-margin-start: $item-ios-label-slot-end-margin-end !default;
|
||||
|
||||
@@ -4,182 +4,182 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Minimum height of the item
|
||||
$item-md-min-height: 48px;
|
||||
$item-md-min-height: 48px !default;
|
||||
|
||||
/// @prop - Color of the item paragraph
|
||||
$item-md-paragraph-text-color: $text-color-step-400;
|
||||
$item-md-paragraph-text-color: $text-color-step-400 !default;
|
||||
|
||||
/// @prop - Font size of the item
|
||||
$item-md-font-size: 16px;
|
||||
$item-md-font-size: 16px !default;
|
||||
|
||||
/// @prop - Width of the avatar in the item
|
||||
$item-md-avatar-width: 40px;
|
||||
$item-md-avatar-width: 40px !default;
|
||||
|
||||
/// @prop - Height of the avatar in the item
|
||||
$item-md-avatar-height: $item-md-avatar-width;
|
||||
$item-md-avatar-height: $item-md-avatar-width !default;
|
||||
|
||||
/// @prop - Size of the thumbnail in the item
|
||||
$item-md-thumbnail-size: 56px;
|
||||
$item-md-thumbnail-size: 56px !default;
|
||||
|
||||
/// @prop - Padding top for the item content
|
||||
$item-md-padding-top: 10px;
|
||||
$item-md-padding-top: 10px !default;
|
||||
|
||||
/// @prop - Padding end for the item content
|
||||
$item-md-padding-end: 16px;
|
||||
$item-md-padding-end: 16px !default;
|
||||
|
||||
/// @prop - Padding bottom for the item content
|
||||
$item-md-padding-bottom: 11px;
|
||||
$item-md-padding-bottom: 11px !default;
|
||||
|
||||
/// @prop - Padding start for the item content
|
||||
$item-md-padding-start: 16px;
|
||||
$item-md-padding-start: 16px !default;
|
||||
|
||||
/// @prop - Border bottom width for the item when lines are displayed
|
||||
$item-md-border-bottom-width: 1px;
|
||||
$item-md-border-bottom-width: 1px !default;
|
||||
|
||||
/// @prop - Border bottom style for the item when lines are displayed
|
||||
$item-md-border-bottom-style: solid;
|
||||
$item-md-border-bottom-style: solid !default;
|
||||
|
||||
/// @prop - Border bottom color for the item when lines are displayed
|
||||
$item-md-border-bottom-color: $item-md-border-color;
|
||||
$item-md-border-bottom-color: $item-md-border-color !default;
|
||||
|
||||
// Item Label
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Margin top of the label
|
||||
$item-md-label-margin-top: 10px;
|
||||
$item-md-label-margin-top: 10px !default;
|
||||
|
||||
/// @prop - Margin end of the label
|
||||
$item-md-label-margin-end: 0;
|
||||
$item-md-label-margin-end: 0 !default;
|
||||
|
||||
/// @prop - Margin bottom of the label
|
||||
$item-md-label-margin-bottom: 10px;
|
||||
$item-md-label-margin-bottom: 10px !default;
|
||||
|
||||
/// @prop - Margin start of the label
|
||||
$item-md-label-margin-start: 0;
|
||||
$item-md-label-margin-start: 0 !default;
|
||||
|
||||
|
||||
// Item Slots
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Margin start for the start slot
|
||||
$item-md-start-slot-margin-start: null;
|
||||
$item-md-start-slot-margin-start: null !default;
|
||||
|
||||
/// @prop - Margin end for the start slot
|
||||
$item-md-start-slot-margin-end: 16px;
|
||||
$item-md-start-slot-margin-end: 16px !default;
|
||||
|
||||
/// @prop - Margin start for the end slot
|
||||
$item-md-end-slot-margin-start: 16px;
|
||||
$item-md-end-slot-margin-start: 16px !default;
|
||||
|
||||
/// @prop - Margin end for the end slot
|
||||
$item-md-end-slot-margin-end: null;
|
||||
$item-md-end-slot-margin-end: null !default;
|
||||
|
||||
/// @prop - Margin top for content in the start/end slot in a multi-line item
|
||||
$item-md-multi-line-slot-margin-top: 16px;
|
||||
$item-md-multi-line-slot-margin-top: 16px !default;
|
||||
|
||||
/// @prop - Margin end for content in the start/end slot in a multi-line item
|
||||
$item-md-multi-line-slot-margin-end: null;
|
||||
$item-md-multi-line-slot-margin-end: null !default;
|
||||
|
||||
/// @prop - Margin bottom for content in the start/end slot in a multi-line item
|
||||
$item-md-multi-line-slot-margin-bottom: 16px;
|
||||
$item-md-multi-line-slot-margin-bottom: 16px !default;
|
||||
|
||||
/// @prop - Margin start for content in the start/end slot in a multi-line item
|
||||
$item-md-multi-line-slot-margin-start: null;
|
||||
$item-md-multi-line-slot-margin-start: null !default;
|
||||
|
||||
|
||||
// Icon Slots
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Margin top for an icon in the start/end slot
|
||||
$item-md-icon-slot-margin-top: 12px;
|
||||
$item-md-icon-slot-margin-top: 12px !default;
|
||||
|
||||
/// @prop - Margin end for an icon in the start/end slot
|
||||
$item-md-icon-slot-margin-end: null;
|
||||
$item-md-icon-slot-margin-end: null !default;
|
||||
|
||||
/// @prop - Margin bottom for an icon in the start/end slot
|
||||
$item-md-icon-slot-margin-bottom: $item-md-icon-slot-margin-top;
|
||||
$item-md-icon-slot-margin-bottom: $item-md-icon-slot-margin-top !default;
|
||||
|
||||
/// @prop - Margin start for an icon in the start/end slot
|
||||
$item-md-icon-slot-margin-start: null;
|
||||
$item-md-icon-slot-margin-start: null !default;
|
||||
|
||||
/// @prop - Margin start for an icon in the start slot
|
||||
$item-md-icon-start-slot-margin-start: null;
|
||||
$item-md-icon-start-slot-margin-start: null !default;
|
||||
|
||||
/// @prop - Margin end for an icon in the start slot
|
||||
$item-md-icon-start-slot-margin-end: 32px;
|
||||
$item-md-icon-start-slot-margin-end: 32px !default;
|
||||
|
||||
/// @prop - Margin end for an icon in the start slot
|
||||
$item-md-input-icon-start-slot-margin-end: 8px;
|
||||
$item-md-input-icon-start-slot-margin-end: 8px !default;
|
||||
|
||||
/// @prop - Margin start for an icon in the end slot
|
||||
$item-md-icon-end-slot-margin-start: 16px;
|
||||
$item-md-icon-end-slot-margin-start: 16px !default;
|
||||
|
||||
/// @prop - Margin end for an icon in the end slot
|
||||
$item-md-icon-end-slot-margin-end: null;
|
||||
$item-md-icon-end-slot-margin-end: null !default;
|
||||
|
||||
/// @prop - Color for an icon in the start/end slot
|
||||
$item-md-icon-slot-color: rgba($text-color-rgb, 0.54);
|
||||
$item-md-icon-slot-color: rgba($text-color-rgb, 0.54) !default;
|
||||
|
||||
/// @prop - Font size of an icon in the start/end slot
|
||||
$item-md-icon-slot-font-size: 24px;
|
||||
$item-md-icon-slot-font-size: 24px !default;
|
||||
|
||||
|
||||
// Label Slots
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Margin top for the end slot inside of a floating/stacked label
|
||||
$item-md-label-slot-end-margin-top: 7px;
|
||||
$item-md-label-slot-end-margin-top: 7px !default;
|
||||
|
||||
/// @prop - Margin end for the end slot inside of a floating/stacked label
|
||||
$item-md-label-slot-end-margin-end: null;
|
||||
$item-md-label-slot-end-margin-end: null !default;
|
||||
|
||||
/// @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;
|
||||
$item-md-label-slot-end-margin-bottom: $item-md-label-slot-end-margin-top !default;
|
||||
|
||||
/// @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;
|
||||
$item-md-label-slot-end-margin-start: $item-md-label-slot-end-margin-end !default;
|
||||
|
||||
|
||||
// Note Slots
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of a note in the start/end slot
|
||||
$item-md-note-slot-font-size: dynamic-font(11px);
|
||||
$item-md-note-slot-font-size: dynamic-font(11px) !default;
|
||||
|
||||
/// @prop - Padding top for a note in the start/end slot
|
||||
$item-md-note-slot-padding-top: 18px;
|
||||
$item-md-note-slot-padding-top: 18px !default;
|
||||
|
||||
/// @prop - Padding end for a note in the start/end slot
|
||||
$item-md-note-slot-padding-end: 0;
|
||||
$item-md-note-slot-padding-end: 0 !default;
|
||||
|
||||
/// @prop - Padding bottom for a note in the start/end slot
|
||||
$item-md-note-slot-padding-bottom: 10px;
|
||||
$item-md-note-slot-padding-bottom: 10px !default;
|
||||
|
||||
/// @prop - Padding start for a note in the start/end slot
|
||||
$item-md-note-slot-padding-start: $item-md-note-slot-padding-end;
|
||||
$item-md-note-slot-padding-start: $item-md-note-slot-padding-end !default;
|
||||
|
||||
// Avatar/Thumbnail Slots
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Margin top for an avatar/thumbnail in the start/end slot
|
||||
$item-md-media-slot-margin-top: 8px;
|
||||
$item-md-media-slot-margin-top: 8px !default;
|
||||
|
||||
/// @prop - Margin end for an avatar/thumbnail in the start/end slot
|
||||
$item-md-media-slot-margin-end: null;
|
||||
$item-md-media-slot-margin-end: null !default;
|
||||
|
||||
/// @prop - Margin bottom for an avatar/thumbnail in the start/end slot
|
||||
$item-md-media-slot-margin-bottom: 8px;
|
||||
$item-md-media-slot-margin-bottom: 8px !default;
|
||||
|
||||
/// @prop - Margin start for an avatar/thumbnail in the start/end slot
|
||||
$item-md-media-slot-margin-start: $item-md-media-slot-margin-end;
|
||||
$item-md-media-slot-margin-start: $item-md-media-slot-margin-end !default;
|
||||
|
||||
/// @prop - Margin start for an avatar/thumbnail in the start slot
|
||||
$item-md-media-start-slot-margin-start: null;
|
||||
$item-md-media-start-slot-margin-start: null !default;
|
||||
|
||||
/// @prop - Margin end for an avatar/thumbnail in the start slot
|
||||
$item-md-media-start-slot-margin-end: 16px;
|
||||
$item-md-media-start-slot-margin-end: 16px !default;
|
||||
|
||||
/// @prop - Margin start for an avatar/thumbnail in the end slot
|
||||
$item-md-media-end-slot-margin-start: 16px;
|
||||
$item-md-media-end-slot-margin-start: 16px !default;
|
||||
|
||||
/// @prop - Margin end for an avatar/thumbnail in the end slot
|
||||
$item-md-media-end-slot-margin-end: null;
|
||||
$item-md-media-end-slot-margin-end: null !default;
|
||||
|
||||
@@ -7,7 +7,10 @@ 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 }).analyze();
|
||||
const results = await new AxeBuilder({ page })
|
||||
// TODO(FW-404): Re-enable rule once select is updated to avoid nested-interactive
|
||||
.disableRules('nested-interactive')
|
||||
.analyze();
|
||||
expect(results.violations).toEqual([]);
|
||||
});
|
||||
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Text color of the stacked/floating label when it is focused
|
||||
$label-ios-text-color-focused: null;
|
||||
$label-ios-text-color-focused: null !default;
|
||||
|
||||
/// @prop - Font size of the label when the text wraps
|
||||
$label-ios-text-wrap-font-size: dynamic-font(14px);
|
||||
$label-ios-text-wrap-font-size: dynamic-font(14px) !default;
|
||||
|
||||
/// @prop - Line height of the label when the text wraps
|
||||
$label-ios-text-wrap-line-height: 1.5;
|
||||
$label-ios-text-wrap-line-height: 1.5 !default;
|
||||
|
||||
/// @prop - Color of the item paragraph
|
||||
$item-ios-paragraph-text-color: $text-color-step-600;
|
||||
$item-ios-paragraph-text-color: $text-color-step-600 !default;
|
||||
|
||||
@@ -5,10 +5,10 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Text color of the stacked/floating label when it is focused
|
||||
$label-md-text-color-focused: ion-color(primary, base);
|
||||
$label-md-text-color-focused: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Line height of the label when the text wraps
|
||||
$label-md-text-wrap-line-height: 1.5;
|
||||
$label-md-text-wrap-line-height: 1.5 !default;
|
||||
|
||||
/// @prop - Transition timing function of the label (stacked / focused)
|
||||
$label-md-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
|
||||
$label-md-transition-timing-function: cubic-bezier(.4, 0, .2, 1) !default;
|
||||
|
||||
@@ -5,19 +5,19 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding start of the list header
|
||||
$list-header-ios-padding-start: $item-ios-padding-start;
|
||||
$list-header-ios-padding-start: $item-ios-padding-start !default;
|
||||
|
||||
/// @prop - Font size of the list header
|
||||
$list-header-ios-font-size: dynamic-font-max(22px, 2.55);
|
||||
$list-header-ios-font-size: dynamic-font-max(22px, 2.55) !default;
|
||||
|
||||
/// @prop - Font weight of the list header
|
||||
$list-header-ios-font-weight: 700;
|
||||
$list-header-ios-font-weight: 700 !default;
|
||||
|
||||
/// @prop - Letter spacing of the list header
|
||||
$list-header-ios-letter-spacing: 0;
|
||||
$list-header-ios-letter-spacing: 0 !default;
|
||||
|
||||
/// @prop - Text color of the list header
|
||||
$list-header-ios-color: $text-color-step-150;
|
||||
$list-header-ios-color: $text-color-step-150 !default;
|
||||
|
||||
/// @prop - Background color of the list header
|
||||
$list-header-ios-background-color: transparent;
|
||||
$list-header-ios-background-color: transparent !default;
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding start of the list header
|
||||
$list-header-md-padding-start: $item-md-padding-start;
|
||||
$list-header-md-padding-start: $item-md-padding-start !default;
|
||||
|
||||
/// @prop - Minimum height of the list header
|
||||
$list-header-md-min-height: 45px;
|
||||
$list-header-md-min-height: 45px !default;
|
||||
|
||||
/// @prop - Font size of the list header
|
||||
$list-header-md-font-size: dynamic-font(14px);
|
||||
$list-header-md-font-size: dynamic-font(14px) !default;
|
||||
|
||||
/// @prop - Text color of the list header
|
||||
$list-header-md-color: $text-color;
|
||||
$list-header-md-color: $text-color !default;
|
||||
|
||||
@@ -5,31 +5,31 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Margin top of the list
|
||||
$list-ios-margin-top: null;
|
||||
$list-ios-margin-top: null !default;
|
||||
|
||||
/// @prop - Margin end of the list
|
||||
$list-ios-margin-end: null;
|
||||
$list-ios-margin-end: null !default;
|
||||
|
||||
/// @prop - Margin bottom of the list
|
||||
$list-ios-margin-bottom: null;
|
||||
$list-ios-margin-bottom: null !default;
|
||||
|
||||
/// @prop - Margin start of the list
|
||||
$list-ios-margin-start: null;
|
||||
$list-ios-margin-start: null !default;
|
||||
|
||||
/// @prop - Border bottom of the item in a list
|
||||
$list-ios-item-border-bottom-width: $item-ios-border-bottom-width;
|
||||
$list-ios-item-border-bottom-width: $item-ios-border-bottom-width !default;
|
||||
|
||||
/// @prop - Margin top of the inset list
|
||||
$list-inset-ios-margin-top: 16px;
|
||||
$list-inset-ios-margin-top: 16px !default;
|
||||
|
||||
/// @prop - Margin end of the inset list
|
||||
$list-inset-ios-margin-end: 16px;
|
||||
$list-inset-ios-margin-end: 16px !default;
|
||||
|
||||
/// @prop - Margin bottom of the inset list
|
||||
$list-inset-ios-margin-bottom: 16px;
|
||||
$list-inset-ios-margin-bottom: 16px !default;
|
||||
|
||||
/// @prop - Margin start of the inset list
|
||||
$list-inset-ios-margin-start: 16px;
|
||||
$list-inset-ios-margin-start: 16px !default;
|
||||
|
||||
/// @prop - Border radius of the inset list
|
||||
$list-inset-ios-border-radius: 10px;
|
||||
$list-inset-ios-border-radius: 10px !default;
|
||||
|
||||
@@ -5,43 +5,43 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Margin top of the list
|
||||
$list-md-margin-top: 0;
|
||||
$list-md-margin-top: 0 !default;
|
||||
|
||||
/// @prop - Margin end of the list
|
||||
$list-md-margin-end: 0;
|
||||
$list-md-margin-end: 0 !default;
|
||||
|
||||
/// @prop - Margin bottom of the list
|
||||
$list-md-margin-bottom: 0;
|
||||
$list-md-margin-bottom: 0 !default;
|
||||
|
||||
/// @prop - Margin start of the list
|
||||
$list-md-margin-start: 0;
|
||||
$list-md-margin-start: 0 !default;
|
||||
|
||||
/// @prop - Padding top of the list
|
||||
$list-md-padding-top: 8px;
|
||||
$list-md-padding-top: 8px !default;
|
||||
|
||||
/// @prop - Padding end of the list
|
||||
$list-md-padding-end: 0;
|
||||
$list-md-padding-end: 0 !default;
|
||||
|
||||
/// @prop - Padding bottom of the list
|
||||
$list-md-padding-bottom: 8px;
|
||||
$list-md-padding-bottom: 8px !default;
|
||||
|
||||
/// @prop - Padding start of the list
|
||||
$list-md-padding-start: 0;
|
||||
$list-md-padding-start: 0 !default;
|
||||
|
||||
/// @prop - Border bottom of the item in a list
|
||||
$list-md-item-border-bottom-width: $item-md-border-bottom-width;
|
||||
$list-md-item-border-bottom-width: $item-md-border-bottom-width !default;
|
||||
|
||||
/// @prop - Margin top of the inset list
|
||||
$list-inset-md-margin-top: 16px;
|
||||
$list-inset-md-margin-top: 16px !default;
|
||||
|
||||
/// @prop - Margin end of the inset list
|
||||
$list-inset-md-margin-end: 16px;
|
||||
$list-inset-md-margin-end: 16px !default;
|
||||
|
||||
/// @prop - Margin bottom of the inset list
|
||||
$list-inset-md-margin-bottom: 16px;
|
||||
$list-inset-md-margin-bottom: 16px !default;
|
||||
|
||||
/// @prop - Margin start of the inset list
|
||||
$list-inset-md-margin-start: 16px;
|
||||
$list-inset-md-margin-start: 16px !default;
|
||||
|
||||
/// @prop - Border radius of the inset list
|
||||
$list-inset-md-border-radius: 2px;
|
||||
$list-inset-md-border-radius: 2px !default;
|
||||
|
||||
@@ -4,46 +4,46 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the loading wrapper
|
||||
$loading-ios-font-size: dynamic-font(14px);
|
||||
$loading-ios-font-size: dynamic-font(14px) !default;
|
||||
|
||||
/// @prop - Padding top of the loading wrapper
|
||||
$loading-ios-padding-top: 24px;
|
||||
$loading-ios-padding-top: 24px !default;
|
||||
|
||||
/// @prop - Padding end of the loading wrapper
|
||||
$loading-ios-padding-end: 34px;
|
||||
$loading-ios-padding-end: 34px !default;
|
||||
|
||||
/// @prop - Padding bottom of the loading wrapper
|
||||
$loading-ios-padding-bottom: $loading-ios-padding-top;
|
||||
$loading-ios-padding-bottom: $loading-ios-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the loading wrapper
|
||||
$loading-ios-padding-start: $loading-ios-padding-end;
|
||||
$loading-ios-padding-start: $loading-ios-padding-end !default;
|
||||
|
||||
/// @prop - Max width of the loading wrapper
|
||||
$loading-ios-max-width: 270px;
|
||||
$loading-ios-max-width: 270px !default;
|
||||
|
||||
/// @prop - Maximum height of the loading wrapper
|
||||
$loading-ios-max-height: 90%;
|
||||
$loading-ios-max-height: 90% !default;
|
||||
|
||||
/// @prop - Border radius of the loading wrapper
|
||||
$loading-ios-border-radius: 8px;
|
||||
$loading-ios-border-radius: 8px !default;
|
||||
|
||||
/// @prop - Text color of the loading wrapper
|
||||
$loading-ios-text-color: $text-color;
|
||||
$loading-ios-text-color: $text-color !default;
|
||||
|
||||
/// @prop - Background of the loading wrapper
|
||||
$loading-ios-background-color: $overlay-ios-background-color;
|
||||
$loading-ios-background-color: $overlay-ios-background-color !default;
|
||||
|
||||
/// @prop - Background color alpha of the translucent loading wrapper
|
||||
$loading-ios-translucent-background-color-alpha: .8;
|
||||
$loading-ios-translucent-background-color-alpha: .8 !default;
|
||||
|
||||
/// @prop - Background color of the translucent loading wrapper
|
||||
$loading-ios-translucent-background-color: rgba($background-color-rgb, $loading-ios-translucent-background-color-alpha);
|
||||
$loading-ios-translucent-background-color: rgba($background-color-rgb, $loading-ios-translucent-background-color-alpha) !default;
|
||||
|
||||
/// @prop - Font weight of the loading content
|
||||
$loading-ios-content-font-weight: bold;
|
||||
$loading-ios-content-font-weight: bold !default;
|
||||
|
||||
/// @prop - Color of the loading spinner
|
||||
$loading-ios-spinner-color: $text-color-step-400;
|
||||
$loading-ios-spinner-color: $text-color-step-400 !default;
|
||||
|
||||
/// @prop - Filter of the translucent loading
|
||||
$loading-ios-translucent-filter: saturate(180%) blur(20px);
|
||||
$loading-ios-translucent-filter: saturate(180%) blur(20px) !default;
|
||||
|
||||
@@ -4,40 +4,40 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font size of the loading wrapper
|
||||
$loading-md-font-size: dynamic-font(14px);
|
||||
$loading-md-font-size: dynamic-font(14px) !default;
|
||||
|
||||
/// @prop - Padding top of the loading wrapper
|
||||
$loading-md-padding-top: 24px;
|
||||
$loading-md-padding-top: 24px !default;
|
||||
|
||||
/// @prop - Padding end of the loading wrapper
|
||||
$loading-md-padding-end: $loading-md-padding-top;
|
||||
$loading-md-padding-end: $loading-md-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom of the loading wrapper
|
||||
$loading-md-padding-bottom: $loading-md-padding-top;
|
||||
$loading-md-padding-bottom: $loading-md-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the loading wrapper
|
||||
$loading-md-padding-start: $loading-md-padding-end;
|
||||
$loading-md-padding-start: $loading-md-padding-end !default;
|
||||
|
||||
/// @prop - Max width of the loading wrapper
|
||||
$loading-md-max-width: 280px;
|
||||
$loading-md-max-width: 280px !default;
|
||||
|
||||
/// @prop - Maximum height of the loading wrapper
|
||||
$loading-md-max-height: 90%;
|
||||
$loading-md-max-height: 90% !default;
|
||||
|
||||
/// @prop - Border radius of the loading wrapper
|
||||
$loading-md-border-radius: 2px;
|
||||
$loading-md-border-radius: 2px !default;
|
||||
|
||||
/// @prop - Text color of the loading wrapper
|
||||
$loading-md-text-color: $text-color-step-150;
|
||||
$loading-md-text-color: $text-color-step-150 !default;
|
||||
|
||||
/// @prop - Background of the loading wrapper
|
||||
$loading-md-background: $background-color-step-50;
|
||||
$loading-md-background: $background-color-step-50 !default;
|
||||
|
||||
/// @prop - Box shadow color of the loading wrapper
|
||||
$loading-md-box-shadow-color: rgba(0, 0, 0, .4);
|
||||
$loading-md-box-shadow-color: rgba(0, 0, 0, .4) !default;
|
||||
|
||||
/// @prop - Box shadow of the loading wrapper
|
||||
$loading-md-box-shadow: 0 16px 20px $loading-md-box-shadow-color;
|
||||
$loading-md-box-shadow: 0 16px 20px $loading-md-box-shadow-color !default;
|
||||
|
||||
/// @prop - Color of the loading spinner
|
||||
$loading-md-spinner-color: ion-color(primary, base);
|
||||
$loading-md-spinner-color: ion-color(primary, base) !default;
|
||||
|
||||
@@ -4,22 +4,22 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Box shadow color of the menu
|
||||
$menu-ios-box-shadow-color: rgba(0, 0, 0, .08);
|
||||
$menu-ios-box-shadow-color: rgba(0, 0, 0, .08) !default;
|
||||
|
||||
/// @prop - Box shadow of the menu
|
||||
$menu-ios-box-shadow: -8px 0 42px $menu-ios-box-shadow-color;
|
||||
$menu-ios-box-shadow: -8px 0 42px $menu-ios-box-shadow-color !default;
|
||||
|
||||
/// @prop - Box shadow of the menu in rtl mode
|
||||
$menu-ios-box-shadow-rtl: 8px 0 42px $menu-ios-box-shadow-color;
|
||||
$menu-ios-box-shadow-rtl: 8px 0 42px $menu-ios-box-shadow-color !default;
|
||||
|
||||
/// @prop - Box shadow of the reveal menu
|
||||
$menu-ios-box-shadow-reveal: $menu-ios-box-shadow;
|
||||
$menu-ios-box-shadow-reveal: $menu-ios-box-shadow !default;
|
||||
|
||||
/// @prop - Box shadow of the reveal menu
|
||||
$menu-ios-box-shadow-reveal-rtl: $menu-ios-box-shadow-rtl;
|
||||
$menu-ios-box-shadow-reveal-rtl: $menu-ios-box-shadow-rtl !default;
|
||||
|
||||
/// @prop - Box shadow of the push menu
|
||||
$menu-ios-box-shadow-push: null;
|
||||
$menu-ios-box-shadow-push: null !default;
|
||||
|
||||
/// @prop - Box shadow of the overlay menu
|
||||
$menu-ios-box-shadow-overlay: null;
|
||||
$menu-ios-box-shadow-overlay: null !default;
|
||||
|
||||
@@ -4,4 +4,4 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Box shadow of the menu
|
||||
$menu-md-box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18);
|
||||
$menu-md-box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18) !default;
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Width of the menu
|
||||
$menu-width: 304px;
|
||||
$menu-width: 304px !default;
|
||||
|
||||
/// @prop - Width of the menu on small devices (under 340px)
|
||||
$menu-small-width: $menu-width - 40px;
|
||||
$menu-small-width: $menu-width - 40px !default;
|
||||
|
||||
@@ -4,4 +4,4 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Border radius for the modal
|
||||
$modal-ios-border-radius: 10px;
|
||||
$modal-ios-border-radius: 10px !default;
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Box shadow color of the alert
|
||||
$modal-inset-box-shadow-color: rgba(0, 0, 0, .4);
|
||||
$modal-inset-box-shadow-color: rgba(0, 0, 0, .4) !default;
|
||||
|
||||
/// @prop - Box shadow of the alert
|
||||
$modal-inset-box-shadow: 0 28px 48px $modal-inset-box-shadow-color;
|
||||
$modal-inset-box-shadow: 0 28px 48px $modal-inset-box-shadow-color !default;
|
||||
|
||||
@@ -4,22 +4,22 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Min width of the modal inset
|
||||
$modal-inset-min-width: 768px;
|
||||
$modal-inset-min-width: 768px !default;
|
||||
|
||||
/// @prop - Minimum height of the small modal inset
|
||||
$modal-inset-min-height-small: 600px;
|
||||
$modal-inset-min-height-small: 600px !default;
|
||||
|
||||
/// @prop - Minimum height of the large modal inset
|
||||
$modal-inset-min-height-large: 768px;
|
||||
$modal-inset-min-height-large: 768px !default;
|
||||
|
||||
/// @prop - Width of the large modal inset
|
||||
$modal-inset-width: 600px;
|
||||
$modal-inset-width: 600px !default;
|
||||
|
||||
/// @prop - Height of the small modal inset
|
||||
$modal-inset-height-small: 500px;
|
||||
$modal-inset-height-small: 500px !default;
|
||||
|
||||
/// @prop - Height of the large modal inset
|
||||
$modal-inset-height-large: 600px;
|
||||
$modal-inset-height-large: 600px !default;
|
||||
|
||||
/// @prop - Text color of the modal content
|
||||
$modal-text-color: $text-color;
|
||||
$modal-text-color: $text-color !default;
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Text color of the note
|
||||
$note-ios-color: $text-color-step-650;
|
||||
$note-ios-color: $text-color-step-650 !default;
|
||||
|
||||
/// @prop - Font size of the note
|
||||
$note-ios-font-size: dynamic-font-min(0.875, 16px);
|
||||
$note-ios-font-size: dynamic-font-min(0.875, 16px) !default;
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Text color of the note
|
||||
$note-md-color: $text-color-step-400;
|
||||
$note-md-color: $text-color-step-400 !default;
|
||||
|
||||
/// @prop - Font size of the note
|
||||
$note-md-font-size: dynamic-font(14px);
|
||||
$note-md-font-size: dynamic-font(14px) !default;
|
||||
|
||||
@@ -4,85 +4,85 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Height of the picker wrapper
|
||||
$picker-ios-height: 260px;
|
||||
$picker-ios-height: 260px !default;
|
||||
|
||||
/// @prop - Border color of the picker wrapper
|
||||
$picker-ios-border-color: $item-ios-border-color;
|
||||
$picker-ios-border-color: $item-ios-border-color !default;
|
||||
|
||||
/// @prop - Background Color of the picker wrapper
|
||||
$picker-ios-background-color: $background-color;
|
||||
$picker-ios-background-color: $background-color !default;
|
||||
|
||||
/// @prop - Top Background Color of the picker wrapper gradient
|
||||
$picker-ios-top-background-color: var(--background, $picker-ios-background-color);
|
||||
$picker-ios-top-background-color: var(--background, $picker-ios-background-color) !default;
|
||||
|
||||
/// @prop - Bottom Background Color alpha of the picker wrapper gradient
|
||||
$picker-ios-bottom-background-color-alpha: .8;
|
||||
$picker-ios-bottom-background-color-alpha: .8 !default;
|
||||
|
||||
/// @prop - Bottom Background Color of the picker wrapper gradient
|
||||
$picker-ios-bottom-background-color: rgba(var(--background-rgb, $background-color-rgb), $picker-ios-bottom-background-color-alpha);
|
||||
$picker-ios-bottom-background-color: rgba(var(--background-rgb, $background-color-rgb), $picker-ios-bottom-background-color-alpha) !default;
|
||||
|
||||
/// @prop - Height of the picker toolbar
|
||||
$picker-ios-toolbar-height: 44px;
|
||||
$picker-ios-toolbar-height: 44px !default;
|
||||
|
||||
/// @prop - Height of the picker button
|
||||
$picker-ios-button-height: $picker-ios-toolbar-height;
|
||||
$picker-ios-button-height: $picker-ios-toolbar-height !default;
|
||||
|
||||
/// @prop - Text color of the picker button
|
||||
$picker-ios-button-text-color: ion-color(primary, base);
|
||||
$picker-ios-button-text-color: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Font size of the picker button
|
||||
$picker-ios-button-font-size: 16px;
|
||||
$picker-ios-button-font-size: 16px !default;
|
||||
|
||||
/// @prop - Padding top of the picker button
|
||||
$picker-ios-button-padding-top: 0;
|
||||
$picker-ios-button-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the picker button
|
||||
$picker-ios-button-padding-end: 1em;
|
||||
$picker-ios-button-padding-end: 1em !default;
|
||||
|
||||
/// @prop - Padding bottom of the picker button
|
||||
$picker-ios-button-padding-bottom: $picker-ios-button-padding-top;
|
||||
$picker-ios-button-padding-bottom: $picker-ios-button-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the picker button
|
||||
$picker-ios-button-padding-start: $picker-ios-button-padding-end;
|
||||
$picker-ios-button-padding-start: $picker-ios-button-padding-end !default;
|
||||
|
||||
/// @prop - Font weight of the strong picker button
|
||||
$picker-ios-button-strong-font-weight: 600;
|
||||
$picker-ios-button-strong-font-weight: 600 !default;
|
||||
|
||||
/// @prop - Padding top of the picker column
|
||||
$picker-ios-column-padding-top: 0;
|
||||
$picker-ios-column-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the picker column
|
||||
$picker-ios-column-padding-end: 4px;
|
||||
$picker-ios-column-padding-end: 4px !default;
|
||||
|
||||
/// @prop - Padding bottom of the picker column
|
||||
$picker-ios-column-padding-bottom: $picker-ios-column-padding-top;
|
||||
$picker-ios-column-padding-bottom: $picker-ios-column-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the picker column
|
||||
$picker-ios-column-padding-start: $picker-ios-column-padding-end;
|
||||
$picker-ios-column-padding-start: $picker-ios-column-padding-end !default;
|
||||
|
||||
/// @prop - Perspective of the picker column
|
||||
$picker-ios-column-perspective: 1000px;
|
||||
$picker-ios-column-perspective: 1000px !default;
|
||||
|
||||
/// @prop - Padding top of the picker option
|
||||
$picker-ios-option-padding-top: 0;
|
||||
$picker-ios-option-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the picker option
|
||||
$picker-ios-option-padding-end: $picker-ios-option-padding-top;
|
||||
$picker-ios-option-padding-end: $picker-ios-option-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom of the picker option
|
||||
$picker-ios-option-padding-bottom: $picker-ios-option-padding-top;
|
||||
$picker-ios-option-padding-bottom: $picker-ios-option-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the picker option
|
||||
$picker-ios-option-padding-start: $picker-ios-option-padding-end;
|
||||
$picker-ios-option-padding-start: $picker-ios-option-padding-end !default;
|
||||
|
||||
/// @prop - Text color of the picker option
|
||||
$picker-ios-option-text-color: $item-ios-color;
|
||||
$picker-ios-option-text-color: $item-ios-color !default;
|
||||
|
||||
/// @prop - Font size of the picker option
|
||||
$picker-ios-option-font-size: 20px;
|
||||
$picker-ios-option-font-size: 20px !default;
|
||||
|
||||
/// @prop - Height of the picker option
|
||||
$picker-ios-option-height: 42px;
|
||||
$picker-ios-option-height: 42px !default;
|
||||
|
||||
/// @prop - Offset y of the picker option
|
||||
$picker-ios-option-offset-y: (($picker-ios-height - $picker-ios-toolbar-height) * 0.5) - ($picker-ios-option-height * 0.5) - 10;
|
||||
$picker-ios-option-offset-y: (($picker-ios-height - $picker-ios-toolbar-height) * 0.5) - ($picker-ios-option-height * 0.5) - 10 !default;
|
||||
|
||||
@@ -4,73 +4,73 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Height of the picker wrapper
|
||||
$picker-md-height: 260px;
|
||||
$picker-md-height: 260px !default;
|
||||
|
||||
/// @prop - Border color of the picker wrapper
|
||||
$picker-md-border-color: $item-md-border-color;
|
||||
$picker-md-border-color: $item-md-border-color !default;
|
||||
|
||||
/// @prop - Background Color of the picker wrapper
|
||||
$picker-md-background-color: $background-color;
|
||||
$picker-md-background-color: $background-color !default;
|
||||
|
||||
/// @prop - Top Background Color of the picker wrapper gradient
|
||||
$picker-md-top-background-color: $picker-md-background-color;
|
||||
$picker-md-top-background-color: $picker-md-background-color !default;
|
||||
|
||||
/// @prop - Bottom Background Color alpha of the picker wrapper gradient
|
||||
$picker-md-bottom-background-color-alpha: .8;
|
||||
$picker-md-bottom-background-color-alpha: .8 !default;
|
||||
|
||||
/// @prop - Bottom Background Color of the picker wrapper gradient
|
||||
$picker-md-bottom-background-color: rgba($background-color-rgb, $picker-md-bottom-background-color-alpha);
|
||||
$picker-md-bottom-background-color: rgba($background-color-rgb, $picker-md-bottom-background-color-alpha) !default;
|
||||
|
||||
/// @prop - Height of the picker toolbar
|
||||
$picker-md-toolbar-height: 44px;
|
||||
$picker-md-toolbar-height: 44px !default;
|
||||
|
||||
/// @prop - Height of the picker button
|
||||
$picker-md-button-height: $picker-md-toolbar-height;
|
||||
$picker-md-button-height: $picker-md-toolbar-height !default;
|
||||
|
||||
/// @prop - Text color of the picker button
|
||||
$picker-md-button-text-color: ion-color(primary, base);
|
||||
$picker-md-button-text-color: ion-color(primary, base) !default;
|
||||
|
||||
/// @prop - Background of the picker button
|
||||
$picker-md-button-background-color: transparent;
|
||||
$picker-md-button-background-color: transparent !default;
|
||||
|
||||
/// @prop - Font size of the picker button
|
||||
$picker-md-button-font-size: 14px;
|
||||
$picker-md-button-font-size: 14px !default;
|
||||
|
||||
/// @prop - Padding top of the picker column
|
||||
$picker-md-column-padding-top: 0;
|
||||
$picker-md-column-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the picker column
|
||||
$picker-md-column-padding-end: 8px;
|
||||
$picker-md-column-padding-end: 8px !default;
|
||||
|
||||
/// @prop - Padding bottom of the picker column
|
||||
$picker-md-column-padding-bottom: $picker-md-column-padding-top;
|
||||
$picker-md-column-padding-bottom: $picker-md-column-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the picker column
|
||||
$picker-md-column-padding-start: $picker-md-column-padding-end;
|
||||
$picker-md-column-padding-start: $picker-md-column-padding-end !default;
|
||||
|
||||
/// @prop - Padding top of the picker option
|
||||
$picker-md-option-padding-top: 0;
|
||||
$picker-md-option-padding-top: 0 !default;
|
||||
|
||||
/// @prop - Padding end of the picker option
|
||||
$picker-md-option-padding-end: $picker-md-option-padding-top;
|
||||
$picker-md-option-padding-end: $picker-md-option-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom of the picker option
|
||||
$picker-md-option-padding-bottom: $picker-md-option-padding-top;
|
||||
$picker-md-option-padding-bottom: $picker-md-option-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the picker option
|
||||
$picker-md-option-padding-start: $picker-md-option-padding-end;
|
||||
$picker-md-option-padding-start: $picker-md-option-padding-end !default;
|
||||
|
||||
/// @prop - Text color of the picker option
|
||||
$picker-md-option-text-color: $item-md-color;
|
||||
$picker-md-option-text-color: $item-md-color !default;
|
||||
|
||||
/// @prop - Font size of the picker option
|
||||
$picker-md-option-font-size: 22px;
|
||||
$picker-md-option-font-size: 22px !default;
|
||||
|
||||
/// @prop - Height of the picker option
|
||||
$picker-md-option-height: 42px;
|
||||
$picker-md-option-height: 42px !default;
|
||||
|
||||
/// @prop - Offset y of the picker option
|
||||
$picker-md-option-offset-y: (($picker-md-height - $picker-md-toolbar-height) * 0.5) - ($picker-md-option-height * 0.5) - 10;
|
||||
$picker-md-option-offset-y: (($picker-md-height - $picker-md-toolbar-height) * 0.5) - ($picker-md-option-height * 0.5) - 10 !default;
|
||||
|
||||
/// @prop - Text color of the selected picker option
|
||||
$picker-md-option-selected-color: ion-color(primary, base);
|
||||
$picker-md-option-selected-color: ion-color(primary, base) !default;
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Width of the picker
|
||||
$picker-width: 100%;
|
||||
$picker-width: 100% !default;
|
||||
|
||||
/// @prop - Max width of the picker
|
||||
$picker-max-width: 500px;
|
||||
$picker-max-width: 500px !default;
|
||||
|
||||
@@ -4,25 +4,25 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Width of the popover content
|
||||
$popover-ios-width: 200px;
|
||||
$popover-ios-width: 200px !default;
|
||||
|
||||
/// @prop - Maximum height of the popover content
|
||||
$popover-ios-max-height: 90%;
|
||||
$popover-ios-max-height: 90% !default;
|
||||
|
||||
/// @prop - Border radius of the popover content
|
||||
$popover-ios-border-radius: 10px;
|
||||
$popover-ios-border-radius: 10px !default;
|
||||
|
||||
/// @prop - Background color alpha of the popover content
|
||||
$popover-ios-translucent-background-color-alpha: .8;
|
||||
$popover-ios-translucent-background-color-alpha: .8 !default;
|
||||
|
||||
/// @prop - Background color of the popover content
|
||||
$popover-ios-translucent-background-color: rgba($background-color-rgb, $popover-ios-translucent-background-color-alpha);
|
||||
$popover-ios-translucent-background-color: rgba($background-color-rgb, $popover-ios-translucent-background-color-alpha) !default;
|
||||
|
||||
/// @prop - Filter of the translucent popover
|
||||
$popover-ios-translucent-filter: saturate(180%) blur(20px);
|
||||
$popover-ios-translucent-filter: saturate(180%) blur(20px) !default;
|
||||
|
||||
/// $prop - Box shadow of popover on desktop
|
||||
$popover-ios-desktop-box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12);
|
||||
$popover-ios-desktop-box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12) !default;
|
||||
|
||||
/// $prop - Border of popover content on desktop
|
||||
$popover-ios-desktop-border: 0.5px solid $background-color-step-100;
|
||||
$popover-ios-desktop-border: 0.5px solid $background-color-step-100 !default;
|
||||
|
||||
@@ -4,13 +4,13 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Width of the popover content
|
||||
$popover-md-width: 250px;
|
||||
$popover-md-width: 250px !default;
|
||||
|
||||
/// @prop - Maximum height of the popover content
|
||||
$popover-md-max-height: 90%;
|
||||
$popover-md-max-height: 90% !default;
|
||||
|
||||
/// @prop - Border radius of the popover content
|
||||
$popover-md-border-radius: 4px;
|
||||
$popover-md-border-radius: 4px !default;
|
||||
|
||||
/// @prop - Box shadow of the popover content
|
||||
$popover-md-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
|
||||
$popover-md-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12) !default;
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Text color of the popover content
|
||||
$popover-text-color: $text-color;
|
||||
$popover-text-color: $text-color !default;
|
||||
|
||||
/// @prop - Background color of the popover content
|
||||
$popover-background-color: $background-color;
|
||||
$popover-background-color: $background-color !default;
|
||||
@@ -2,7 +2,7 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Height of the progress bar
|
||||
$progress-bar-ios-height: 4px;
|
||||
$progress-bar-ios-height: 4px !default;
|
||||
|
||||
/// @prop - Border radius of the progress bar container
|
||||
$progress-bar-ios-border-radius: 9999px;
|
||||
$progress-bar-ios-border-radius: 9999px !default;
|
||||
|
||||
@@ -2,4 +2,4 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Height of the progress bar
|
||||
$progress-bar-md-height: 4px;
|
||||
$progress-bar-md-height: 4px !default;
|
||||
|
||||
@@ -5,19 +5,19 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Background color of focus indicator for radio when focused
|
||||
$radio-ios-background-color-focused: ion-color(primary, tint);
|
||||
$radio-ios-background-color-focused: ion-color(primary, tint) !default;
|
||||
|
||||
/// @prop - Width of the radio icon
|
||||
$radio-ios-icon-width: dynamic-font(15px);
|
||||
$radio-ios-icon-width: dynamic-font(15px) !default;
|
||||
|
||||
/// @prop - Height of the radio icon
|
||||
$radio-ios-icon-height: dynamic-font(24px);
|
||||
$radio-ios-icon-height: dynamic-font(24px) !default;
|
||||
|
||||
/// @prop - Border width of the radio icon
|
||||
$radio-ios-icon-border-width: dynamic-font(2px);
|
||||
$radio-ios-icon-border-width: dynamic-font(2px) !default;
|
||||
|
||||
/// @prop - Border style of the radio icon
|
||||
$radio-ios-icon-border-style: solid;
|
||||
$radio-ios-icon-border-style: solid !default;
|
||||
|
||||
/// @prop - Opacity of the disabled radio
|
||||
$radio-ios-disabled-opacity: $form-control-ios-disabled-opacity;
|
||||
$radio-ios-disabled-opacity: $form-control-ios-disabled-opacity !default;
|
||||
|
||||
@@ -5,37 +5,37 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Color of the checked radio
|
||||
$radio-md-color-on: current-color(base);
|
||||
$radio-md-color-on: current-color(base) !default;
|
||||
|
||||
/// @prop - Background color of focus indicator for radio when focused
|
||||
$radio-md-background-color-focused: ion-color(primary, tint);
|
||||
$radio-md-background-color-focused: ion-color(primary, tint) !default;
|
||||
|
||||
/// @prop - Color of the unchecked radio
|
||||
$radio-md-color-off: rgb($text-color-rgb, 0.60);
|
||||
$radio-md-color-off: rgb($text-color-rgb, 0.60) !default;
|
||||
|
||||
/// @prop - Width of the radio icon
|
||||
$radio-md-icon-width: dynamic-font(20px);
|
||||
$radio-md-icon-width: dynamic-font(20px) !default;
|
||||
|
||||
/// @prop - Height of the radio icon
|
||||
$radio-md-icon-height: dynamic-font(20px);
|
||||
$radio-md-icon-height: dynamic-font(20px) !default;
|
||||
|
||||
/// @prop - Border width of the radio icon
|
||||
$radio-md-icon-border-width: dynamic-font(2px);
|
||||
$radio-md-icon-border-width: dynamic-font(2px) !default;
|
||||
|
||||
/// @prop - Border style of the radio icon
|
||||
$radio-md-icon-border-style: solid;
|
||||
$radio-md-icon-border-style: solid !default;
|
||||
|
||||
/// @prop - Border radius of the radio icon
|
||||
$radio-md-icon-border-radius: 50%;
|
||||
$radio-md-icon-border-radius: 50% !default;
|
||||
|
||||
/// @prop - Transition duration of the radio
|
||||
$radio-md-transition-duration: 280ms;
|
||||
$radio-md-transition-duration: 280ms !default;
|
||||
|
||||
/// @prop - Transition easing of the radio
|
||||
$radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1);
|
||||
$radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default;
|
||||
|
||||
/// @prop - Opacity of the disabled radio label
|
||||
$radio-md-disabled-opacity: $form-control-md-disabled-opacity;
|
||||
$radio-md-disabled-opacity: $form-control-md-disabled-opacity !default;
|
||||
|
||||
/// @prop - Opacity of the disabled radio
|
||||
/// This value is used because the radio color is set to
|
||||
@@ -44,4 +44,4 @@ $radio-md-disabled-opacity: $form-control-md-disabled-opacity;
|
||||
/// opacity is applied on top of the transparent color so
|
||||
/// this opacity gets us the equivalent of applying `0.38`
|
||||
/// on top of an opaque radio `rgb(0, 0, 0, 1.0)`
|
||||
$radio-md-icon-disabled-opacity: 0.63;
|
||||
$radio-md-icon-disabled-opacity: 0.63 !default;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/// @prop - Top margin of radio's label when in an item
|
||||
$radio-item-label-margin-top: 10px;
|
||||
$radio-item-label-margin-top: 10px !default;
|
||||
|
||||
/// @prop - Bottom margin of radio's label when in an item
|
||||
$radio-item-label-margin-bottom: 10px;
|
||||
$radio-item-label-margin-bottom: 10px !default;
|
||||
@@ -4,71 +4,71 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top/bottom of the range
|
||||
$range-ios-padding-vertical: 8px;
|
||||
$range-ios-padding-vertical: 8px !default;
|
||||
|
||||
/// @prop - Padding start/end of the range - modern syntax
|
||||
/**
|
||||
* 24px was chosen so the knob and its
|
||||
* shadow do not get cut off by the item.
|
||||
*/
|
||||
$range-ios-item-padding-horizontal: 24px;
|
||||
$range-ios-item-padding-horizontal: 24px !default;
|
||||
|
||||
/// @prop - Height of the range slider
|
||||
$range-ios-slider-height: 42px;
|
||||
$range-ios-slider-height: 42px !default;
|
||||
|
||||
/// @prop - Height of the area that will select the range knob
|
||||
$range-ios-hit-height: $range-ios-slider-height;
|
||||
$range-ios-hit-height: $range-ios-slider-height !default;
|
||||
|
||||
/// @prop - Height of the range bar
|
||||
$range-ios-bar-height: 4px;
|
||||
$range-ios-bar-height: 4px !default;
|
||||
|
||||
/// @prop - Background of the range bar
|
||||
$range-ios-bar-background-color: var(--ion-color-step-900, var(--ion-background-color-step-900, #e6e6e6));
|
||||
$range-ios-bar-background-color: var(--ion-color-step-900, var(--ion-background-color-step-900, #e6e6e6)) !default;
|
||||
|
||||
/// @prop - Border radius of the range bar
|
||||
$range-ios-bar-border-radius: 2px;
|
||||
$range-ios-bar-border-radius: 2px !default;
|
||||
|
||||
/// @prop - Width of the range knob
|
||||
$range-ios-knob-width: 26px;
|
||||
$range-ios-knob-width: 26px !default;
|
||||
|
||||
/// @prop - Box shadow of the range knob
|
||||
$range-ios-knob-box-shadow: 0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12);
|
||||
$range-ios-knob-box-shadow: 0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12) !default;
|
||||
|
||||
/// @prop - Background of the range knob
|
||||
$range-ios-knob-background-color: #ffffff;
|
||||
$range-ios-knob-background-color: #ffffff !default;
|
||||
|
||||
/// @prop - Width of the range tick
|
||||
$range-ios-tick-width: $range-ios-bar-height;
|
||||
$range-ios-tick-width: $range-ios-bar-height !default;
|
||||
|
||||
/// @prop - Height of the range tick
|
||||
$range-ios-tick-height: 8px;
|
||||
$range-ios-tick-height: 8px !default;
|
||||
|
||||
/// @prop - Border radius of the range tick
|
||||
$range-ios-tick-border-radius: 0;
|
||||
$range-ios-tick-border-radius: 0 !default;
|
||||
|
||||
/// @prop - Background of the range tick
|
||||
$range-ios-tick-background-color: $range-ios-bar-background-color;
|
||||
$range-ios-tick-background-color: $range-ios-bar-background-color !default;
|
||||
|
||||
/// @prop - Background of the range pin
|
||||
$range-ios-pin-background-color: transparent;
|
||||
$range-ios-pin-background-color: transparent !default;
|
||||
|
||||
/// @prop - Color of the range pin
|
||||
$range-ios-pin-color: $text-color;
|
||||
$range-ios-pin-color: $text-color !default;
|
||||
|
||||
/// @prop - Font size of the range pin
|
||||
$range-ios-pin-font-size: dynamic-font(12px);
|
||||
$range-ios-pin-font-size: dynamic-font(12px) !default;
|
||||
|
||||
/// @prop - Padding top of the range pin
|
||||
$range-ios-pin-padding-top: 8px;
|
||||
$range-ios-pin-padding-top: 8px !default;
|
||||
|
||||
/// @prop - Padding end of the range pin
|
||||
$range-ios-pin-padding-end: $range-ios-pin-padding-top;
|
||||
$range-ios-pin-padding-end: $range-ios-pin-padding-top !default;
|
||||
|
||||
/// @prop - Padding bottom of the range pin
|
||||
$range-ios-pin-padding-bottom: $range-ios-pin-padding-top;
|
||||
$range-ios-pin-padding-bottom: $range-ios-pin-padding-top !default;
|
||||
|
||||
/// @prop - Padding start of the range pin
|
||||
$range-ios-pin-padding-start: $range-ios-pin-padding-end;
|
||||
$range-ios-pin-padding-start: $range-ios-pin-padding-end !default;
|
||||
|
||||
/// @prop - Opacity of the disabled range
|
||||
$range-ios-disabled-opacity: $form-control-ios-disabled-opacity;
|
||||
$range-ios-disabled-opacity: $form-control-ios-disabled-opacity !default;
|
||||
|
||||
@@ -4,44 +4,44 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top/bottom of the range
|
||||
$range-md-padding-vertical: 8px;
|
||||
$range-md-padding-vertical: 8px !default;
|
||||
|
||||
/// @prop - Padding start/end of the range - modern range
|
||||
/**
|
||||
* 18px was chosen so the knob and its focus/active
|
||||
* effects do not get cut off by the item.
|
||||
*/
|
||||
$range-md-item-padding-horizontal: 18px;
|
||||
$range-md-item-padding-horizontal: 18px !default;
|
||||
|
||||
/// @prop - Height of the range slider
|
||||
$range-md-slider-height: 42px;
|
||||
$range-md-slider-height: 42px !default;
|
||||
|
||||
/// @prop - Height of the range bar
|
||||
$range-md-bar-height: 2px;
|
||||
$range-md-bar-height: 2px !default;
|
||||
|
||||
/// @prop - Background of the range bar
|
||||
$range-md-bar-background-color: $background-color-step-250;
|
||||
$range-md-bar-background-color: $background-color-step-250 !default;
|
||||
|
||||
/// @prop - Font size of the range pin
|
||||
$range-md-pin-font-size: dynamic-font(12px);
|
||||
$range-md-pin-font-size: dynamic-font(12px) !default;
|
||||
|
||||
/// @prop - Padding top/bottom of the range pin
|
||||
$range-md-pin-padding-vertical: 8px;
|
||||
$range-md-pin-padding-vertical: 8px !default;
|
||||
|
||||
/// @prop - Padding start/end of the range pin
|
||||
$range-md-pin-padding-horizontal: 0;
|
||||
$range-md-pin-padding-horizontal: 0 !default;
|
||||
|
||||
/// @prop - Width and height of the range pin
|
||||
$range-md-pin-dimension: dynamic-font(28px);
|
||||
$range-md-pin-dimension: dynamic-font(28px) !default;
|
||||
|
||||
/// @prop - Opacity of the indicator shown when the range knob is hovered
|
||||
$range-md-knob-indicator-opacity-hover: 0.13;
|
||||
$range-md-knob-indicator-opacity-hover: 0.13 !default;
|
||||
|
||||
/// @prop - Opacity of the indicator shown when the range knob is focused
|
||||
$range-md-knob-indicator-opacity-focus: 0.13;
|
||||
$range-md-knob-indicator-opacity-focus: 0.13 !default;
|
||||
|
||||
/// @prop - Opacity of the indicator shown when the range knob is active
|
||||
$range-md-knob-indicator-opacity-active: 0.25;
|
||||
$range-md-knob-indicator-opacity-active: 0.25 !default;
|
||||
|
||||
/// @prop - Opacity of the disabled range
|
||||
$range-md-disabled-opacity: $form-control-md-disabled-opacity;
|
||||
$range-md-disabled-opacity: $form-control-md-disabled-opacity !default;
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/// @prop - Top margin of range's label when in an item
|
||||
$range-item-label-margin-top: 10px;
|
||||
$range-item-label-margin-top: 10px !default;
|
||||
|
||||
/// @prop - Bottom margin of range's label when in an item
|
||||
// We don't add additional margin because the native container
|
||||
// has additional white space. Otherwise there would be too
|
||||
// much white space at the bottom of the item.
|
||||
$range-item-label-margin-bottom: 0px;
|
||||
$range-item-label-margin-bottom: 0px !default;
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
/// @prop - Color of the refresher icon
|
||||
$refresher-ios-icon-color: $text-color;
|
||||
$refresher-ios-icon-color: $text-color !default;
|
||||
|
||||
/// @prop - Text color of the refresher content
|
||||
$refresher-ios-text-color: $text-color;
|
||||
$refresher-ios-text-color: $text-color !default;
|
||||
|
||||
/// @prop - Color of the native refresher spinner
|
||||
$refresher-ios-native-spinner-color: var(--ion-color-step-450, var(--ion-background-color-step-450, #747577));
|
||||
$refresher-ios-native-spinner-color: var(--ion-color-step-450, var(--ion-background-color-step-450, #747577)) !default;
|
||||
|
||||
/// @prop - Width of the native refresher spinner
|
||||
$refresher-ios-native-spinner-width: 32px;
|
||||
$refresher-ios-native-spinner-width: 32px !default;
|
||||
|
||||
/// @prop - Height of the native refresher spinner
|
||||
$refresher-ios-native-spinner-height: 32px;
|
||||
$refresher-ios-native-spinner-height: 32px !default;
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user