@ionic/core 8.2.3-dev.11723022900.1196a7bf → 8.2.3-dev.11724326037.1eacfaff

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (96) hide show
  1. package/components/button.js +7 -6
  2. package/components/ion-card-content.js +5 -5
  3. package/components/ion-card-header.js +4 -4
  4. package/components/ion-card-subtitle.js +4 -4
  5. package/components/ion-card.js +3 -3
  6. package/components/ion-input-password-toggle.js +11 -7
  7. package/components/item.js +11 -4
  8. package/components/ripple-effect.js +15 -5
  9. package/components/spinner.js +4 -5
  10. package/dist/cjs/ion-button_2.cjs.entry.js +6 -5
  11. package/dist/cjs/ion-card_5.cjs.entry.js +16 -16
  12. package/dist/cjs/ion-input-password-toggle.cjs.entry.js +11 -7
  13. package/dist/cjs/ion-item_8.cjs.entry.js +11 -4
  14. package/dist/cjs/ion-ripple-effect.cjs.entry.js +14 -4
  15. package/dist/cjs/ion-spinner.cjs.entry.js +3 -4
  16. package/dist/cjs/ionic.cjs.js +1 -1
  17. package/dist/cjs/loader.cjs.js +1 -1
  18. package/dist/collection/components/button/button.ionic.css +346 -211
  19. package/dist/collection/components/button/button.ios.css +87 -20
  20. package/dist/collection/components/button/button.js +4 -3
  21. package/dist/collection/components/button/button.md.css +87 -20
  22. package/dist/collection/components/button/test/basic/button.e2e.js +3 -3
  23. package/dist/collection/components/button/test/clear/button.e2e.js +1 -1
  24. package/dist/collection/components/button/test/outline/button.e2e.js +1 -1
  25. package/dist/collection/components/card/card.ionic.css +61 -10
  26. package/dist/collection/components/card/card.ios.css +37 -12
  27. package/dist/collection/components/card/card.md.css +37 -12
  28. package/dist/collection/components/card-content/card-content.ionic.css +92 -0
  29. package/dist/collection/components/card-content/card-content.ios.css +4 -1
  30. package/dist/collection/components/card-content/card-content.js +3 -3
  31. package/dist/collection/components/card-content/card-content.md.css +4 -1
  32. package/dist/collection/components/card-header/card-header.ionic.css +89 -0
  33. package/dist/collection/components/card-header/card-header.ios.css +15 -15
  34. package/dist/collection/components/card-header/card-header.js +4 -4
  35. package/dist/collection/components/card-header/card-header.md.css +15 -15
  36. package/dist/collection/components/card-subtitle/card-subtitle.ionic.css +148 -0
  37. package/dist/collection/components/card-subtitle/card-subtitle.js +4 -4
  38. package/dist/collection/components/card-title/card-title.ios.css +61 -0
  39. package/dist/collection/components/card-title/card-title.md.css +61 -0
  40. package/dist/collection/components/input-password-toggle/input-password-toggle.common.css +61 -0
  41. package/dist/collection/components/input-password-toggle/input-password-toggle.ionic.css +137 -0
  42. package/dist/collection/components/input-password-toggle/input-password-toggle.js +9 -7
  43. package/dist/collection/components/input-password-toggle/test/basic/input-password-toggle.e2e.js +1 -1
  44. package/dist/collection/components/item/item.ionic.css +12 -0
  45. package/dist/collection/components/item/item.js +10 -3
  46. package/dist/collection/components/ripple-effect/ripple-effect.ionic.css +154 -0
  47. package/dist/collection/components/ripple-effect/ripple-effect.js +7 -3
  48. package/dist/collection/components/spinner/spinner.js +4 -5
  49. package/dist/docs.json +157 -1
  50. package/dist/esm/ion-button_2.entry.js +7 -6
  51. package/dist/esm/ion-card_5.entry.js +16 -16
  52. package/dist/esm/ion-input-password-toggle.entry.js +11 -7
  53. package/dist/esm/ion-item_8.entry.js +11 -4
  54. package/dist/esm/ion-ripple-effect.entry.js +14 -4
  55. package/dist/esm/ion-spinner.entry.js +4 -5
  56. package/dist/esm/ionic.js +1 -1
  57. package/dist/esm/loader.js +1 -1
  58. package/dist/esm-es5/ion-button_2.entry.js +1 -1
  59. package/dist/esm-es5/ion-card_5.entry.js +1 -1
  60. package/dist/esm-es5/ion-input-password-toggle.entry.js +1 -1
  61. package/dist/esm-es5/ion-item_8.entry.js +1 -1
  62. package/dist/esm-es5/ion-ripple-effect.entry.js +1 -1
  63. package/dist/esm-es5/ion-spinner.entry.js +1 -1
  64. package/dist/esm-es5/ionic.js +1 -1
  65. package/dist/esm-es5/loader.js +1 -1
  66. package/dist/ionic/ionic.esm.js +1 -1
  67. package/dist/ionic/p-22952d7a.system.entry.js +4 -0
  68. package/dist/ionic/p-33dd8047.system.entry.js +4 -0
  69. package/dist/ionic/p-3d9c39bc.entry.js +4 -0
  70. package/dist/ionic/p-4f053633.system.entry.js +4 -0
  71. package/dist/ionic/p-7b590e46.system.js +1 -1
  72. package/dist/ionic/p-8b09c4cb.system.entry.js +4 -0
  73. package/dist/ionic/p-91b33f25.entry.js +4 -0
  74. package/dist/ionic/p-a0e155e1.system.entry.js +4 -0
  75. package/dist/ionic/p-a814eee1.entry.js +4 -0
  76. package/dist/ionic/p-c1bb715a.entry.js +4 -0
  77. package/dist/ionic/p-d3c9617d.system.entry.js +4 -0
  78. package/dist/ionic/p-d45fd591.entry.js +4 -0
  79. package/dist/ionic/p-f1aa5723.entry.js +4 -0
  80. package/dist/types/components/item/item.d.ts +5 -0
  81. package/hydrate/index.js +62 -41
  82. package/package.json +1 -1
  83. package/dist/collection/components/input-password-toggle/input-password-toggle.css +0 -0
  84. package/dist/ionic/p-128f0f15.system.entry.js +0 -4
  85. package/dist/ionic/p-1be0295f.entry.js +0 -4
  86. package/dist/ionic/p-41c9fb60.entry.js +0 -4
  87. package/dist/ionic/p-42452dc9.entry.js +0 -4
  88. package/dist/ionic/p-4d6c2031.system.entry.js +0 -4
  89. package/dist/ionic/p-4fdbf0ef.entry.js +0 -4
  90. package/dist/ionic/p-7459eeb7.system.entry.js +0 -4
  91. package/dist/ionic/p-8102551e.system.entry.js +0 -4
  92. package/dist/ionic/p-924deb6b.entry.js +0 -4
  93. package/dist/ionic/p-b1938594.entry.js +0 -4
  94. package/dist/ionic/p-bbefc52b.system.entry.js +0 -4
  95. package/dist/ionic/p-d774e194.system.entry.js +0 -4
  96. /package/dist/collection/components/ripple-effect/{ripple-effect.css → ripple-effect.common.css} +0 -0
@@ -10,7 +10,7 @@ import { getIonTheme } from "../../global/ionic-global";
10
10
  export class CardContent {
11
11
  render() {
12
12
  const theme = getIonTheme(this);
13
- return (h(Host, { key: '7f0d7d9da6b87e85640c02d4f402494f8f7eba73', class: {
13
+ return (h(Host, { key: 'ed8e7ee07b2ccd99427025ff4a796f5602fdd666', class: {
14
14
  [theme]: true,
15
15
  // Used internally for styling
16
16
  [`card-content-${theme}`]: true,
@@ -21,14 +21,14 @@ export class CardContent {
21
21
  return {
22
22
  "ios": ["card-content.ios.scss"],
23
23
  "md": ["card-content.md.scss"],
24
- "ionic": ["card-content.md.scss"]
24
+ "ionic": ["card-content.ionic.scss"]
25
25
  };
26
26
  }
27
27
  static get styleUrls() {
28
28
  return {
29
29
  "ios": ["card-content.ios.css"],
30
30
  "md": ["card-content.md.css"],
31
- "ionic": ["card-content.md.css"]
31
+ "ionic": ["card-content.ionic.css"]
32
32
  };
33
33
  }
34
34
  }
@@ -1,3 +1,7 @@
1
+ ion-card-content {
2
+ position: relative;
3
+ }
4
+
1
5
  /**
2
6
  * Convert a pixels given value into rem
3
7
  *
@@ -61,7 +65,6 @@
61
65
  */
62
66
  ion-card-content {
63
67
  display: block;
64
- position: relative;
65
68
  }
66
69
 
67
70
  /**
@@ -0,0 +1,89 @@
1
+ :host {
2
+ --background: transparent;
3
+ --color: inherit;
4
+ display: flex;
5
+ position: relative;
6
+ flex-direction: column;
7
+ background: var(--background);
8
+ color: var(--color);
9
+ }
10
+
11
+ :host(.ion-color) {
12
+ background: var(--ion-color-base);
13
+ color: var(--ion-color-contrast);
14
+ }
15
+
16
+ /**
17
+ * Convert a pixels given value into rem
18
+ *
19
+ * @param pixels - Value in pixels to be converted (i.e. px)
20
+ * @param context (optional) - Baseline value
21
+ */
22
+ /**
23
+ * This is an auto-generated file, please do not change it directly.
24
+ * Ionic Design System
25
+ */
26
+ /**
27
+ * A heuristic that applies CSS to tablet
28
+ * viewports.
29
+ *
30
+ * Usage:
31
+ * @include tablet-viewport() {
32
+ * :host {
33
+ * background-color: green;
34
+ * }
35
+ * }
36
+ */
37
+ /**
38
+ * A heuristic that applies CSS to mobile
39
+ * viewports (i.e. phones, not tablets).
40
+ *
41
+ * Usage:
42
+ * @include mobile-viewport() {
43
+ * :host {
44
+ * background-color: blue;
45
+ * }
46
+ * }
47
+ */
48
+ /**
49
+ * Convert a font size to a dynamic font size.
50
+ * Fonts that participate in Dynamic Type should use
51
+ * dynamic font sizes.
52
+ * @param size - The initial font size including the unit (i.e. px or pt)
53
+ * @param unit (optional) - The unit to convert to. Use this if you want to
54
+ * convert to a unit other than $baselineUnit.
55
+ */
56
+ /**
57
+ * Convert a font size to a dynamic font size but impose
58
+ * a maximum font size.
59
+ * @param size - The initial font size including the unit (i.e. px or pt)
60
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
61
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
62
+ * convert to a unit other than $baselineUnit.
63
+ */
64
+ /**
65
+ * Convert a font size to a dynamic font size but impose
66
+ * a minimum font size.
67
+ * @param size - The initial font size including the unit (i.e. px or pt)
68
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
69
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
70
+ * convert to a unit other than $baselineUnit.
71
+ */
72
+ /**
73
+ * Convert a font size to a dynamic font size but impose
74
+ * maximum and minimum font sizes.
75
+ * @param size - The initial font size including the unit (i.e. px or pt)
76
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
77
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
78
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
79
+ * convert to a unit other than $baselineUnit.
80
+ */
81
+ :host {
82
+ -webkit-padding-start: var(--ionic-space-400, 16px);
83
+ padding-inline-start: var(--ionic-space-400, 16px);
84
+ -webkit-padding-end: var(--ionic-space-400, 16px);
85
+ padding-inline-end: var(--ionic-space-400, 16px);
86
+ padding-top: var(--ionic-space-400, 16px);
87
+ padding-bottom: var(--ionic-space-400, 16px);
88
+ gap: var(--ionic-space-050, 2px);
89
+ }
@@ -1,3 +1,18 @@
1
+ :host {
2
+ --background: transparent;
3
+ --color: inherit;
4
+ display: flex;
5
+ position: relative;
6
+ flex-direction: column;
7
+ background: var(--background);
8
+ color: var(--color);
9
+ }
10
+
11
+ :host(.ion-color) {
12
+ background: var(--ion-color-base);
13
+ color: var(--ion-color-contrast);
14
+ }
15
+
1
16
  /**
2
17
  * Convert a pixels given value into rem
3
18
  *
@@ -59,21 +74,6 @@
59
74
  * }
60
75
  * }
61
76
  */
62
- :host {
63
- --background: transparent;
64
- --color: inherit;
65
- display: flex;
66
- position: relative;
67
- flex-direction: column;
68
- background: var(--background);
69
- color: var(--color);
70
- }
71
-
72
- :host(.ion-color) {
73
- background: var(--ion-color-base);
74
- color: var(--ion-color-contrast);
75
- }
76
-
77
77
  /**
78
78
  * Convert a pixels given value into rem
79
79
  *
@@ -15,11 +15,11 @@ export class CardHeader {
15
15
  }
16
16
  render() {
17
17
  const theme = getIonTheme(this);
18
- return (h(Host, { key: '8d0b55caa6295f60a607b401b84077f7bd2d069b', class: createColorClasses(this.color, {
18
+ return (h(Host, { key: 'cff2da9905efddd8397f741282987530c042baf8', class: createColorClasses(this.color, {
19
19
  'card-header-translucent': this.translucent,
20
20
  'ion-inherit-color': true,
21
21
  [theme]: true,
22
- }) }, h("slot", { key: '4b5e745481d86493e821a329203fb42867743bb3' })));
22
+ }) }, h("slot", { key: '1bfe2d1ac2a171e4ce6cfb7da30a3307388d0483' })));
23
23
  }
24
24
  static get is() { return "ion-card-header"; }
25
25
  static get encapsulation() { return "shadow"; }
@@ -27,14 +27,14 @@ export class CardHeader {
27
27
  return {
28
28
  "ios": ["card-header.ios.scss"],
29
29
  "md": ["card-header.md.scss"],
30
- "ionic": ["card-header.md.scss"]
30
+ "ionic": ["card-header.ionic.scss"]
31
31
  };
32
32
  }
33
33
  static get styleUrls() {
34
34
  return {
35
35
  "ios": ["card-header.ios.css"],
36
36
  "md": ["card-header.md.css"],
37
- "ionic": ["card-header.md.css"]
37
+ "ionic": ["card-header.ionic.css"]
38
38
  };
39
39
  }
40
40
  static get properties() {
@@ -1,3 +1,18 @@
1
+ :host {
2
+ --background: transparent;
3
+ --color: inherit;
4
+ display: flex;
5
+ position: relative;
6
+ flex-direction: column;
7
+ background: var(--background);
8
+ color: var(--color);
9
+ }
10
+
11
+ :host(.ion-color) {
12
+ background: var(--ion-color-base);
13
+ color: var(--ion-color-contrast);
14
+ }
15
+
1
16
  /**
2
17
  * Convert a pixels given value into rem
3
18
  *
@@ -59,21 +74,6 @@
59
74
  * }
60
75
  * }
61
76
  */
62
- :host {
63
- --background: transparent;
64
- --color: inherit;
65
- display: flex;
66
- position: relative;
67
- flex-direction: column;
68
- background: var(--background);
69
- color: var(--color);
70
- }
71
-
72
- :host(.ion-color) {
73
- background: var(--ion-color-base);
74
- color: var(--ion-color-contrast);
75
- }
76
-
77
77
  /**
78
78
  * Convert a pixels given value into rem
79
79
  *
@@ -0,0 +1,148 @@
1
+ /**
2
+ * Convert a pixels given value into rem
3
+ *
4
+ * @param pixels - Value in pixels to be converted (i.e. px)
5
+ * @param context (optional) - Baseline value
6
+ */
7
+ /**
8
+ * Convert a font size to a dynamic font size.
9
+ * Fonts that participate in Dynamic Type should use
10
+ * dynamic font sizes.
11
+ * @param size - The initial font size including the unit (i.e. px or pt)
12
+ * @param unit (optional) - The unit to convert to. Use this if you want to
13
+ * convert to a unit other than $baselineUnit.
14
+ */
15
+ /**
16
+ * Convert a font size to a dynamic font size but impose
17
+ * a maximum font size.
18
+ * @param size - The initial font size including the unit (i.e. px or pt)
19
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
20
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
21
+ * convert to a unit other than $baselineUnit.
22
+ */
23
+ /**
24
+ * Convert a font size to a dynamic font size but impose
25
+ * a minimum font size.
26
+ * @param size - The initial font size including the unit (i.e. px or pt)
27
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
28
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
29
+ * convert to a unit other than $baselineUnit.
30
+ */
31
+ /**
32
+ * Convert a font size to a dynamic font size but impose
33
+ * maximum and minimum font sizes.
34
+ * @param size - The initial font size including the unit (i.e. px or pt)
35
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
36
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
37
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
38
+ * convert to a unit other than $baselineUnit.
39
+ */
40
+ /**
41
+ * A heuristic that applies CSS to tablet
42
+ * viewports.
43
+ *
44
+ * Usage:
45
+ * @include tablet-viewport() {
46
+ * :host {
47
+ * background-color: green;
48
+ * }
49
+ * }
50
+ */
51
+ /**
52
+ * A heuristic that applies CSS to mobile
53
+ * viewports (i.e. phones, not tablets).
54
+ *
55
+ * Usage:
56
+ * @include mobile-viewport() {
57
+ * :host {
58
+ * background-color: blue;
59
+ * }
60
+ * }
61
+ */
62
+ :host {
63
+ /**
64
+ * @prop --color: Color of the card subtitle
65
+ */
66
+ display: block;
67
+ position: relative;
68
+ color: var(--color);
69
+ }
70
+
71
+ :host(.ion-color) {
72
+ color: var(--ion-color-base);
73
+ }
74
+
75
+ /**
76
+ * Convert a pixels given value into rem
77
+ *
78
+ * @param pixels - Value in pixels to be converted (i.e. px)
79
+ * @param context (optional) - Baseline value
80
+ */
81
+ /**
82
+ * This is an auto-generated file, please do not change it directly.
83
+ * Ionic Design System
84
+ */
85
+ /**
86
+ * A heuristic that applies CSS to tablet
87
+ * viewports.
88
+ *
89
+ * Usage:
90
+ * @include tablet-viewport() {
91
+ * :host {
92
+ * background-color: green;
93
+ * }
94
+ * }
95
+ */
96
+ /**
97
+ * A heuristic that applies CSS to mobile
98
+ * viewports (i.e. phones, not tablets).
99
+ *
100
+ * Usage:
101
+ * @include mobile-viewport() {
102
+ * :host {
103
+ * background-color: blue;
104
+ * }
105
+ * }
106
+ */
107
+ /**
108
+ * Convert a font size to a dynamic font size.
109
+ * Fonts that participate in Dynamic Type should use
110
+ * dynamic font sizes.
111
+ * @param size - The initial font size including the unit (i.e. px or pt)
112
+ * @param unit (optional) - The unit to convert to. Use this if you want to
113
+ * convert to a unit other than $baselineUnit.
114
+ */
115
+ /**
116
+ * Convert a font size to a dynamic font size but impose
117
+ * a maximum font size.
118
+ * @param size - The initial font size including the unit (i.e. px or pt)
119
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
120
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
121
+ * convert to a unit other than $baselineUnit.
122
+ */
123
+ /**
124
+ * Convert a font size to a dynamic font size but impose
125
+ * a minimum font size.
126
+ * @param size - The initial font size including the unit (i.e. px or pt)
127
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
128
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
129
+ * convert to a unit other than $baselineUnit.
130
+ */
131
+ /**
132
+ * Convert a font size to a dynamic font size but impose
133
+ * maximum and minimum font sizes.
134
+ * @param size - The initial font size including the unit (i.e. px or pt)
135
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
136
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
137
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
138
+ * convert to a unit other than $baselineUnit.
139
+ */
140
+ :host {
141
+ --color: var(--ionic-color-neutral-800, #626262);
142
+ font-size: var(--ionic-font-size-400, 1rem);
143
+ font-weight: var(--ionic-font-weight-regular, 400);
144
+ letter-spacing: var(--ionic-letter-spacing-0, 0);
145
+ line-height: var(--ionic-line-height-600, 24px);
146
+ text-decoration: none;
147
+ text-transform: none;
148
+ }
@@ -14,10 +14,10 @@ export class CardSubtitle {
14
14
  }
15
15
  render() {
16
16
  const theme = getIonTheme(this);
17
- return (h(Host, { key: '37a73ff9acef0817bb86f5d631e8ea982c8944b9', role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
17
+ return (h(Host, { key: '0fc5039135810295040bbe1940ee22add6c955ac', role: "heading", "aria-level": "3", class: createColorClasses(this.color, {
18
18
  'ion-inherit-color': true,
19
19
  [theme]: true,
20
- }) }, h("slot", { key: '82196ebafd2b54bb74de8dd28513d6e9cabd12f9' })));
20
+ }) }, h("slot", { key: 'f9730146a6e6e8f4741c8ee2ce34e4822e84e316' })));
21
21
  }
22
22
  static get is() { return "ion-card-subtitle"; }
23
23
  static get encapsulation() { return "shadow"; }
@@ -25,14 +25,14 @@ export class CardSubtitle {
25
25
  return {
26
26
  "ios": ["card-subtitle.ios.scss"],
27
27
  "md": ["card-subtitle.md.scss"],
28
- "ionic": ["card-subtitle.md.scss"]
28
+ "ionic": ["card-subtitle.ionic.scss"]
29
29
  };
30
30
  }
31
31
  static get styleUrls() {
32
32
  return {
33
33
  "ios": ["card-subtitle.ios.css"],
34
34
  "md": ["card-subtitle.md.css"],
35
- "ionic": ["card-subtitle.md.css"]
35
+ "ionic": ["card-subtitle.ionic.css"]
36
36
  };
37
37
  }
38
38
  static get properties() {
@@ -72,6 +72,67 @@
72
72
  color: var(--ion-color-base);
73
73
  }
74
74
 
75
+ /**
76
+ * Convert a pixels given value into rem
77
+ *
78
+ * @param pixels - Value in pixels to be converted (i.e. px)
79
+ * @param context (optional) - Baseline value
80
+ */
81
+ /**
82
+ * Convert a font size to a dynamic font size.
83
+ * Fonts that participate in Dynamic Type should use
84
+ * dynamic font sizes.
85
+ * @param size - The initial font size including the unit (i.e. px or pt)
86
+ * @param unit (optional) - The unit to convert to. Use this if you want to
87
+ * convert to a unit other than $baselineUnit.
88
+ */
89
+ /**
90
+ * Convert a font size to a dynamic font size but impose
91
+ * a maximum font size.
92
+ * @param size - The initial font size including the unit (i.e. px or pt)
93
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
94
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
95
+ * convert to a unit other than $baselineUnit.
96
+ */
97
+ /**
98
+ * Convert a font size to a dynamic font size but impose
99
+ * a minimum font size.
100
+ * @param size - The initial font size including the unit (i.e. px or pt)
101
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
102
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
103
+ * convert to a unit other than $baselineUnit.
104
+ */
105
+ /**
106
+ * Convert a font size to a dynamic font size but impose
107
+ * maximum and minimum font sizes.
108
+ * @param size - The initial font size including the unit (i.e. px or pt)
109
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
110
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
111
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
112
+ * convert to a unit other than $baselineUnit.
113
+ */
114
+ /**
115
+ * A heuristic that applies CSS to tablet
116
+ * viewports.
117
+ *
118
+ * Usage:
119
+ * @include tablet-viewport() {
120
+ * :host {
121
+ * background-color: green;
122
+ * }
123
+ * }
124
+ */
125
+ /**
126
+ * A heuristic that applies CSS to mobile
127
+ * viewports (i.e. phones, not tablets).
128
+ *
129
+ * Usage:
130
+ * @include mobile-viewport() {
131
+ * :host {
132
+ * background-color: blue;
133
+ * }
134
+ * }
135
+ */
75
136
  /**
76
137
  * Convert a pixels given value into rem
77
138
  *
@@ -72,6 +72,67 @@
72
72
  color: var(--ion-color-base);
73
73
  }
74
74
 
75
+ /**
76
+ * Convert a pixels given value into rem
77
+ *
78
+ * @param pixels - Value in pixels to be converted (i.e. px)
79
+ * @param context (optional) - Baseline value
80
+ */
81
+ /**
82
+ * Convert a font size to a dynamic font size.
83
+ * Fonts that participate in Dynamic Type should use
84
+ * dynamic font sizes.
85
+ * @param size - The initial font size including the unit (i.e. px or pt)
86
+ * @param unit (optional) - The unit to convert to. Use this if you want to
87
+ * convert to a unit other than $baselineUnit.
88
+ */
89
+ /**
90
+ * Convert a font size to a dynamic font size but impose
91
+ * a maximum font size.
92
+ * @param size - The initial font size including the unit (i.e. px or pt)
93
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
94
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
95
+ * convert to a unit other than $baselineUnit.
96
+ */
97
+ /**
98
+ * Convert a font size to a dynamic font size but impose
99
+ * a minimum font size.
100
+ * @param size - The initial font size including the unit (i.e. px or pt)
101
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
102
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
103
+ * convert to a unit other than $baselineUnit.
104
+ */
105
+ /**
106
+ * Convert a font size to a dynamic font size but impose
107
+ * maximum and minimum font sizes.
108
+ * @param size - The initial font size including the unit (i.e. px or pt)
109
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
110
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
111
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
112
+ * convert to a unit other than $baselineUnit.
113
+ */
114
+ /**
115
+ * A heuristic that applies CSS to tablet
116
+ * viewports.
117
+ *
118
+ * Usage:
119
+ * @include tablet-viewport() {
120
+ * :host {
121
+ * background-color: green;
122
+ * }
123
+ * }
124
+ */
125
+ /**
126
+ * A heuristic that applies CSS to mobile
127
+ * viewports (i.e. phones, not tablets).
128
+ *
129
+ * Usage:
130
+ * @include mobile-viewport() {
131
+ * :host {
132
+ * background-color: blue;
133
+ * }
134
+ * }
135
+ */
75
136
  /**
76
137
  * Convert a pixels given value into rem
77
138
  *
@@ -0,0 +1,61 @@
1
+ /**
2
+ * Convert a pixels given value into rem
3
+ *
4
+ * @param pixels - Value in pixels to be converted (i.e. px)
5
+ * @param context (optional) - Baseline value
6
+ */
7
+ /**
8
+ * Convert a font size to a dynamic font size.
9
+ * Fonts that participate in Dynamic Type should use
10
+ * dynamic font sizes.
11
+ * @param size - The initial font size including the unit (i.e. px or pt)
12
+ * @param unit (optional) - The unit to convert to. Use this if you want to
13
+ * convert to a unit other than $baselineUnit.
14
+ */
15
+ /**
16
+ * Convert a font size to a dynamic font size but impose
17
+ * a maximum font size.
18
+ * @param size - The initial font size including the unit (i.e. px or pt)
19
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
20
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
21
+ * convert to a unit other than $baselineUnit.
22
+ */
23
+ /**
24
+ * Convert a font size to a dynamic font size but impose
25
+ * a minimum font size.
26
+ * @param size - The initial font size including the unit (i.e. px or pt)
27
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
28
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
29
+ * convert to a unit other than $baselineUnit.
30
+ */
31
+ /**
32
+ * Convert a font size to a dynamic font size but impose
33
+ * maximum and minimum font sizes.
34
+ * @param size - The initial font size including the unit (i.e. px or pt)
35
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
36
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
37
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
38
+ * convert to a unit other than $baselineUnit.
39
+ */
40
+ /**
41
+ * A heuristic that applies CSS to tablet
42
+ * viewports.
43
+ *
44
+ * Usage:
45
+ * @include tablet-viewport() {
46
+ * :host {
47
+ * background-color: green;
48
+ * }
49
+ * }
50
+ */
51
+ /**
52
+ * A heuristic that applies CSS to mobile
53
+ * viewports (i.e. phones, not tablets).
54
+ *
55
+ * Usage:
56
+ * @include mobile-viewport() {
57
+ * :host {
58
+ * background-color: blue;
59
+ * }
60
+ * }
61
+ */