@rdlabo/ionic-theme-ios26 0.0.1 → 0.0.3

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 (120) hide show
  1. package/.cursor/rules/css-compilation.mdc +34 -0
  2. package/.cursor/rules/demo-application.mdc +39 -0
  3. package/.cursor/rules/development-workflow.mdc +41 -0
  4. package/.cursor/rules/project-role.mdc +21 -0
  5. package/.github/FUNDING.yml +15 -0
  6. package/.husky/pre-commit +1 -0
  7. package/.lintstagedrc.yml +6 -0
  8. package/.prettierignore +3 -0
  9. package/FEEDBACK.md +25 -0
  10. package/README.md +60 -83
  11. package/USING_ION_ITEM_GROUP.md +58 -0
  12. package/build-sass.js +25 -0
  13. package/demo/ .cursor/rules/angular-20.mdc +136 -0
  14. package/demo/.browserslistrc +15 -0
  15. package/demo/.editorconfig +16 -0
  16. package/demo/.vscode/extensions.json +5 -0
  17. package/demo/.vscode/settings.json +3 -0
  18. package/demo/angular.json +141 -0
  19. package/demo/capacitor.config.ts +9 -0
  20. package/demo/eslint.config.js +47 -0
  21. package/demo/ionic.config.json +7 -0
  22. package/demo/karma.conf.js +44 -0
  23. package/demo/package-lock.json +20001 -0
  24. package/demo/package.json +60 -0
  25. package/demo/src/app/album/album-page.component.html +24 -0
  26. package/demo/src/app/album/album-page.component.scss +31 -0
  27. package/demo/src/app/album/album-page.component.spec.ts +21 -0
  28. package/demo/src/app/album/album-page.component.ts +24 -0
  29. package/demo/src/app/app.component.html +3 -0
  30. package/demo/src/app/app.component.ts +16 -0
  31. package/demo/src/app/app.config.ts +17 -0
  32. package/demo/src/app/app.routes.ts +8 -0
  33. package/demo/src/app/health/health-page.component.html +17 -0
  34. package/demo/src/app/health/health-page.component.scss +0 -0
  35. package/demo/src/app/health/health-page.component.spec.ts +21 -0
  36. package/demo/src/app/health/health-page.component.ts +14 -0
  37. package/demo/src/app/index/index-page.component.html +41 -0
  38. package/demo/src/app/index/index-page.component.scss +0 -0
  39. package/demo/src/app/index/index-page.component.spec.ts +21 -0
  40. package/demo/src/app/index/index-page.component.ts +102 -0
  41. package/demo/src/app/index/index.routes.ts +25 -0
  42. package/demo/src/app/index/pages/action-sheet/action-sheet.page.html +33 -0
  43. package/demo/src/app/index/pages/action-sheet/action-sheet.page.scss +0 -0
  44. package/demo/src/app/index/pages/action-sheet/action-sheet.page.spec.ts +17 -0
  45. package/demo/src/app/index/pages/action-sheet/action-sheet.page.ts +75 -0
  46. package/demo/src/app/index/pages/action-sheet/action-sheet.util.ts +28 -0
  47. package/demo/src/app/index/pages/alert/alert.page.html +33 -0
  48. package/demo/src/app/index/pages/alert/alert.page.scss +0 -0
  49. package/demo/src/app/index/pages/alert/alert.page.spec.ts +17 -0
  50. package/demo/src/app/index/pages/alert/alert.page.ts +75 -0
  51. package/demo/src/app/index/pages/alert/alert.util.ts +21 -0
  52. package/demo/src/app/index/pages/button/button.page.html +90 -0
  53. package/demo/src/app/index/pages/button/button.page.scss +0 -0
  54. package/demo/src/app/index/pages/button/button.page.spec.ts +17 -0
  55. package/demo/src/app/index/pages/button/button.page.ts +53 -0
  56. package/demo/src/app/index/pages/checkbox/checkbox.page.html +66 -0
  57. package/demo/src/app/index/pages/checkbox/checkbox.page.scss +0 -0
  58. package/demo/src/app/index/pages/checkbox/checkbox.page.spec.ts +17 -0
  59. package/demo/src/app/index/pages/checkbox/checkbox.page.ts +47 -0
  60. package/demo/src/app/settings/settings-page.component.html +120 -0
  61. package/demo/src/app/settings/settings-page.component.scss +33 -0
  62. package/demo/src/app/settings/settings-page.component.spec.ts +21 -0
  63. package/demo/src/app/settings/settings-page.component.ts +55 -0
  64. package/demo/src/app/tabs/tabs.page.html +23 -0
  65. package/demo/src/app/tabs/tabs.page.scss +9 -0
  66. package/demo/src/app/tabs/tabs.page.spec.ts +26 -0
  67. package/demo/src/app/tabs/tabs.page.ts +28 -0
  68. package/demo/src/app/tabs/tabs.routes.ts +41 -0
  69. package/demo/src/assets/.gitkeep +0 -0
  70. package/demo/src/favicon.ico +0 -0
  71. package/demo/src/global.scss +47 -0
  72. package/demo/src/index.html +24 -0
  73. package/demo/src/main.ts +5 -0
  74. package/demo/src/theme/theme-ios26.scss +25 -0
  75. package/demo/src/theme/variables.scss +2 -0
  76. package/demo/tsconfig.app.json +14 -0
  77. package/demo/tsconfig.json +30 -0
  78. package/demo/tsconfig.spec.json +17 -0
  79. package/package.json +38 -11
  80. package/prettier.config.js +18 -0
  81. package/screenshots/ios26.png +0 -0
  82. package/screenshots/why-ion-list-inset.png +0 -0
  83. package/src/components/ion-action-sheet.scss +42 -0
  84. package/src/components/ion-alert.scss +31 -0
  85. package/src/components/ion-button.scss +111 -0
  86. package/src/components/ion-card.scss +3 -0
  87. package/src/components/ion-fab.scss +16 -0
  88. package/src/components/ion-list.scss +33 -0
  89. package/src/components/ion-modal.scss +6 -0
  90. package/src/components/ion-popover.scss +21 -0
  91. package/src/components/ion-searchbar.scss +37 -0
  92. package/src/components/ion-segment.scss +10 -0
  93. package/src/components/ion-tabs.scss +47 -0
  94. package/src/components/ion-toast.scss +3 -0
  95. package/src/components/ion-toggle.scss +47 -0
  96. package/src/components-dark/ion-button.scss +28 -0
  97. package/src/components-dark/theme-dark.scss +14 -0
  98. package/src/ionic-theme-dark-class.scss +6 -0
  99. package/src/ionic-theme-dark-system.scss +8 -0
  100. package/src/ionic-theme-ios26.scss +32 -0
  101. package/src/md-ion-list-inset.scss +19 -0
  102. package/src/utils/api.scss +20 -0
  103. package/src/utils/default-variables.scss +10 -0
  104. package/src/utils/theme-list-inset.scss +92 -0
  105. package/src/utils/translucent.scss +70 -0
  106. package/tsconfig.json +5 -0
  107. package/css/ionic-theme-ios26.css +0 -422
  108. package/css/ionic-theme-ios26.css.map +0 -1
  109. package/fesm2022/rdlabo-ionic-theme-ios26.mjs +0 -4
  110. package/fesm2022/rdlabo-ionic-theme-ios26.mjs.map +0 -1
  111. package/index.d.ts +0 -3
  112. package/src/assets/ion-button.scss +0 -77
  113. package/src/assets/ion-popover.scss +0 -23
  114. package/src/assets/ion-searchbar.scss +0 -42
  115. package/src/assets/ion-segment.scss +0 -12
  116. package/src/assets/ion-tabs.scss +0 -60
  117. package/src/assets/ios-design-dark.scss +0 -28
  118. package/src/assets/ios-design.scss +0 -131
  119. package/src/assets/ios-talk-room.scss +0 -50
  120. package/src/assets/ios-variables.scss +0 -38
@@ -1,422 +0,0 @@
1
- @charset "UTF-8";
2
- :root {
3
- --system-dark-rgb: 0, 0, 0;
4
- --system-light-rgb: 255, 255, 255;
5
- --system-tab-active-rgb: 16, 16, 16;
6
- --system-shadow-rgb: 224, 224, 224;
7
- --system-background-rgb: 255, 255, 255;
8
- --system-edge-rgb: 255, 255, 255;
9
- }
10
-
11
- .ion-palette-dark {
12
- --system-dark-rgb: 255, 255, 255;
13
- --system-light-rgb: 58, 58, 58;
14
- --system-tab-active-rgb: 255, 255, 255;
15
- --system-shadow-rgb: translarent;
16
- --system-background-rgb: 0, 0, 0;
17
- --system-edge-rgb: 80, 80, 80;
18
- }
19
-
20
- .ios ion-popover {
21
- --backdrop-opacity: 0.04;
22
- }
23
- .ios ion-popover:not(.popover-exclude-content)::part(content) {
24
- background: rgba(var(--system-light-rgb), 0.6);
25
- backdrop-filter: saturate(240%) blur(6px);
26
- box-shadow: inset 0 0 8px 0 rgba(var(--system-shadow-rgb), 0.2), 0 0 12px 0 rgba(var(--system-shadow-rgb), 0.8);
27
- border-top: 0.5px solid rgba(var(--system-edge-rgb), 1);
28
- border-right: 0.5px solid rgba(var(--system-edge-rgb), 0.8);
29
- border-bottom: 0.5px solid rgba(var(--system-edge-rgb), 1);
30
- border-left: 0.5px solid rgba(var(--system-edge-rgb), 0.6);
31
- transition: box-shadow 0.1s ease;
32
- border-radius: 24px;
33
- padding: 0;
34
- }
35
- .ios ion-popover ion-list {
36
- background: transparent;
37
- }
38
- .ios ion-popover ion-list ion-item {
39
- --background: transparent;
40
- }
41
-
42
- .ios .toolbar-searchbar::part(container) {
43
- padding-top: 3px;
44
- padding-bottom: 3px;
45
- }
46
- .ios ion-modal ion-searchbar:not(.area-searchbar) .searchbar-input-container {
47
- margin: 0 6px;
48
- }
49
- .ios ion-searchbar:not(.area-searchbar) {
50
- min-height: 60px;
51
- padding: 0;
52
- }
53
- .ios ion-searchbar:not(.area-searchbar) ion-icon.searchbar-search-icon {
54
- inset-inline-start: 12px;
55
- }
56
- .ios ion-searchbar:not(.area-searchbar) .searchbar-input-container {
57
- margin: 0 8px 0 16px;
58
- align-self: center;
59
- justify-self: center;
60
- }
61
- .ios ion-searchbar:not(.area-searchbar) .searchbar-input-container input.searchbar-input {
62
- min-height: 44px;
63
- background: rgba(var(--system-light-rgb), 0.4);
64
- backdrop-filter: saturate(240%) blur(6px);
65
- box-shadow: inset 0 0 8px 0 rgba(var(--system-shadow-rgb), 0.2), 0 0 12px 0 rgba(var(--system-shadow-rgb), 0.8);
66
- border-top: 0.5px solid rgba(var(--system-edge-rgb), 1);
67
- border-right: 0.5px solid rgba(var(--system-edge-rgb), 0.8);
68
- border-bottom: 0.5px solid rgba(var(--system-edge-rgb), 1);
69
- border-left: 0.5px solid rgba(var(--system-edge-rgb), 0.6);
70
- transition: box-shadow 0.1s ease;
71
- backdrop-filter: none;
72
- border-radius: 20px;
73
- padding-inline-start: 2.4rem !important;
74
- }
75
- .ios ion-searchbar:not(.area-searchbar) .searchbar-input-container .searchbar-clear-button {
76
- padding-inline-end: 2rem !important;
77
- }
78
-
79
- .ios app-talk-room .talk-system-message {
80
- transform: translateY(-80px);
81
- }
82
- .ios app-talk-room ion-footer#talk-footer ion-toolbar {
83
- --border-width: 0;
84
- --background: transparent;
85
- }
86
- .ios app-talk-room ion-footer#talk-footer ion-toolbar.toolbar-blockquote {
87
- position: absolute;
88
- top: -56px;
89
- }
90
- .ios app-talk-room ion-footer#talk-footer ion-toolbar.toolbar-blockquote ion-item {
91
- padding: 8px 12px;
92
- --inner-padding-end: 4px;
93
- }
94
- .ios app-talk-room ion-footer#talk-footer ion-toolbar.toolbar-blockquote ion-item ion-avatar {
95
- transform: translateX(-10px);
96
- margin-right: 4px;
97
- display: flex;
98
- align-items: center;
99
- justify-content: center;
100
- }
101
- .ios app-talk-room ion-footer#talk-footer ion-toolbar.toolbar-blockquote ion-item ion-avatar ion-icon {
102
- font-size: 1.6rem;
103
- color: var(--ion-color-medium-tint);
104
- }
105
- .ios app-talk-room ion-footer#talk-footer ion-toolbar.toolbar-blockquote ion-item::part(native) {
106
- background: rgba(var(--system-light-rgb), 0.4);
107
- backdrop-filter: saturate(240%) blur(6px);
108
- box-shadow: inset 0 0 8px 0 rgba(var(--system-shadow-rgb), 0.2), 0 0 12px 0 rgba(var(--system-shadow-rgb), 0.8);
109
- border-top: 0.5px solid rgba(var(--system-edge-rgb), 1);
110
- border-right: 0.5px solid rgba(var(--system-edge-rgb), 0.8);
111
- border-bottom: 0.5px solid rgba(var(--system-edge-rgb), 1);
112
- border-left: 0.5px solid rgba(var(--system-edge-rgb), 0.6);
113
- transition: box-shadow 0.1s ease;
114
- border-radius: 20px;
115
- }
116
- .ios app-talk-room ion-footer#talk-footer ion-toolbar.send-message ion-textarea.input-field {
117
- transition: width 0.5s ease;
118
- --padding-start: 16px;
119
- --padding-end: 16px;
120
- }
121
- .ios app-talk-room ion-footer#talk-footer ion-toolbar.send-message ion-textarea.input-field label.textarea-wrapper {
122
- background: rgba(var(--system-light-rgb), 0.4);
123
- backdrop-filter: saturate(240%) blur(6px);
124
- box-shadow: inset 0 0 8px 0 rgba(var(--system-shadow-rgb), 0.2), 0 0 12px 0 rgba(var(--system-shadow-rgb), 0.8);
125
- border-top: 0.5px solid rgba(var(--system-edge-rgb), 1);
126
- border-right: 0.5px solid rgba(var(--system-edge-rgb), 0.8);
127
- border-bottom: 0.5px solid rgba(var(--system-edge-rgb), 1);
128
- border-left: 0.5px solid rgba(var(--system-edge-rgb), 0.6);
129
- transition: box-shadow 0.1s ease;
130
- margin: 8px 8px;
131
- border-radius: 32px;
132
- }
133
-
134
- .ios ion-fab.inner-tab-bar {
135
- right: calc(16px + var(--ion-safe-area-right, 0px));
136
- bottom: var(--max-safe-area);
137
- }
138
- .ios ion-fab.inner-tab-bar ion-fab-button {
139
- --background-activated: rgba(var(--system-light-rgb), 0.3);
140
- }
141
- .ios ion-fab.inner-tab-bar ion-fab-button::part(native) {
142
- background: rgba(var(--system-light-rgb), 0.4);
143
- backdrop-filter: saturate(240%) blur(6px);
144
- box-shadow: inset 0 0 8px 0 rgba(var(--system-shadow-rgb), 0.2), 0 0 12px 0 rgba(var(--system-shadow-rgb), 0.8);
145
- border-top: 0.5px solid rgba(var(--system-edge-rgb), 1);
146
- border-right: 0.5px solid rgba(var(--system-edge-rgb), 0.8);
147
- border-bottom: 0.5px solid rgba(var(--system-edge-rgb), 1);
148
- border-left: 0.5px solid rgba(var(--system-edge-rgb), 0.6);
149
- transition: box-shadow 0.1s ease;
150
- color: rgb(var(--system-dark-rgb));
151
- }
152
- .ios ion-tab-bar {
153
- background: rgba(var(--system-light-rgb), 0.4);
154
- backdrop-filter: saturate(240%) blur(6px);
155
- box-shadow: inset 0 0 8px 0 rgba(var(--system-shadow-rgb), 0.2), 0 0 12px 0 rgba(var(--system-shadow-rgb), 0.8);
156
- border-top: 0.5px solid rgba(var(--system-edge-rgb), 1);
157
- border-right: 0.5px solid rgba(var(--system-edge-rgb), 0.8);
158
- border-bottom: 0.5px solid rgba(var(--system-edge-rgb), 1);
159
- border-left: 0.5px solid rgba(var(--system-edge-rgb), 0.6);
160
- transition: box-shadow 0.1s ease;
161
- z-index: 2;
162
- border-radius: 40px;
163
- width: calc(100% - 56px - 16px - 16px - 4px - 16px);
164
- max-width: 400px;
165
- padding: 2px 2px;
166
- bottom: var(--max-safe-area);
167
- left: calc(16px + var(--ion-safe-area-left, 0px));
168
- position: absolute;
169
- margin: auto;
170
- transition: transform 100ms ease-out;
171
- will-change: transform;
172
- }
173
- .ios ion-tab-bar:active {
174
- transform: scale(1.02);
175
- }
176
- .ios ion-tab-bar ion-tab-button {
177
- background: rgba(var(--system-light-rgb), 0);
178
- height: auto;
179
- }
180
- .ios ion-tab-bar ion-tab-button > ion-icon {
181
- font-size: 30px;
182
- }
183
- .ios ion-tab-bar ion-tab-button::part(native) {
184
- overflow: visible;
185
- }
186
- .ios ion-tab-bar ion-tab-button.tab-selected::part(native) {
187
- backdrop-filter: blur(7px);
188
- background: rgba(var(--system-tab-active-rgb), 0.1);
189
- transition: background 0.2s ease;
190
- border-radius: 32px;
191
- }
192
- .ios ion-tab-bar ion-tab-button.tab-selected.ion-activated::part(native) {
193
- background: rgba(var(--system-shadow-rgb), 0.02);
194
- }
195
-
196
- .ios {
197
- /**
198
- * パフォーマンス対策。必ず背景が単色である限りは不要
199
- */
200
- }
201
- .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting)::part(native),
202
- .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button::part(native) {
203
- backdrop-filter: none !important;
204
- }
205
- .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting),
206
- .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button,
207
- .ios ion-buttons.liquid-glass-buttons ion-button {
208
- max-height: inherit;
209
- margin: 8px;
210
- font-size: 1.05rem !important;
211
- transition: transform 100ms ease-out;
212
- will-change: transform;
213
- }
214
- .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting)::part(native),
215
- .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button::part(native),
216
- .ios ion-buttons.liquid-glass-buttons ion-button::part(native) {
217
- background: rgba(var(--system-light-rgb), 0.7);
218
- backdrop-filter: saturate(240%) blur(6px);
219
- box-shadow: inset 0 0 8px 0 rgba(var(--system-shadow-rgb), 0.2), 0 0 12px 0 rgba(var(--system-shadow-rgb), 0.8);
220
- border-top: 0.5px solid rgba(var(--system-edge-rgb), 1);
221
- border-right: 0.5px solid rgba(var(--system-edge-rgb), 0.8);
222
- border-bottom: 0.5px solid rgba(var(--system-edge-rgb), 1);
223
- border-left: 0.5px solid rgba(var(--system-edge-rgb), 0.6);
224
- transition: box-shadow 0.1s ease;
225
- border-radius: 25px;
226
- }
227
- .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting).ion-activated,
228
- .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button.ion-activated,
229
- .ios ion-buttons.liquid-glass-buttons ion-button.ion-activated {
230
- transform: scale(1.2);
231
- box-shadow: none;
232
- }
233
- .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting)[color=primary][fill=outline],
234
- .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button[color=primary][fill=outline],
235
- .ios ion-buttons.liquid-glass-buttons ion-button[color=primary][fill=outline] {
236
- color: rgba(var(--ion-color-primary-rgb), 1);
237
- transition: transform 100ms ease-out, color 50ms ease;
238
- }
239
- .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting)[color=primary][fill=outline].ion-activated::part(native),
240
- .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button[color=primary][fill=outline].ion-activated::part(native),
241
- .ios ion-buttons.liquid-glass-buttons ion-button[color=primary][fill=outline].ion-activated::part(native) {
242
- color: rgba(var(--ion-color-primary-rgb), 0.2);
243
- }
244
- .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting)[color=primary][fill=outline].ion-activated::part(native)::after,
245
- .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button[color=primary][fill=outline].ion-activated::part(native)::after,
246
- .ios ion-buttons.liquid-glass-buttons ion-button[color=primary][fill=outline].ion-activated::part(native)::after {
247
- transform: scale(1.2);
248
- background: rgba(var(--system-light-rgb), 0.4);
249
- backdrop-filter: saturate(240%) blur(6px);
250
- box-shadow: inset 0 0 8px 0 rgba(var(--system-shadow-rgb), 0.2), 0 0 12px 0 rgba(var(--system-shadow-rgb), 0.8);
251
- border-top: 0.5px solid rgba(var(--system-edge-rgb), 1);
252
- border-right: 0.5px solid rgba(var(--system-edge-rgb), 0.8);
253
- border-bottom: 0.5px solid rgba(var(--system-edge-rgb), 1);
254
- border-left: 0.5px solid rgba(var(--system-edge-rgb), 0.6);
255
- transition: box-shadow 0.1s ease;
256
- box-shadow: none;
257
- }
258
- .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting).button-has-icon-only::part(native), .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting).back-button-has-icon-only::part(native),
259
- .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button.button-has-icon-only::part(native),
260
- .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button.back-button-has-icon-only::part(native),
261
- .ios ion-buttons.liquid-glass-buttons ion-button.button-has-icon-only::part(native),
262
- .ios ion-buttons.liquid-glass-buttons ion-button.back-button-has-icon-only::part(native) {
263
- border-radius: 50%;
264
- width: 44px;
265
- height: 44px;
266
- padding: 2px;
267
- }
268
- .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting).button-has-icon-only ion-icon, .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting).back-button-has-icon-only ion-icon,
269
- .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button.button-has-icon-only ion-icon,
270
- .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button.back-button-has-icon-only ion-icon,
271
- .ios ion-buttons.liquid-glass-buttons ion-button.button-has-icon-only ion-icon,
272
- .ios ion-buttons.liquid-glass-buttons ion-button.back-button-has-icon-only ion-icon {
273
- font-size: 1.4rem !important;
274
- }
275
- .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting).button-has-icon-only ion-icon[name=close-outline], .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting).back-button-has-icon-only ion-icon[name=close-outline],
276
- .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button.button-has-icon-only ion-icon[name=close-outline],
277
- .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button.back-button-has-icon-only ion-icon[name=close-outline],
278
- .ios ion-buttons.liquid-glass-buttons ion-button.button-has-icon-only ion-icon[name=close-outline],
279
- .ios ion-buttons.liquid-glass-buttons ion-button.back-button-has-icon-only ion-icon[name=close-outline] {
280
- font-size: 2rem !important;
281
- }
282
- .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting):not(.button-has-icon-only):not(.back-button-has-icon-only)::part(native),
283
- .ios .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button:not(.button-has-icon-only):not(.back-button-has-icon-only)::part(native),
284
- .ios ion-buttons.liquid-glass-buttons ion-button:not(.button-has-icon-only):not(.back-button-has-icon-only)::part(native) {
285
- padding: 0 16px;
286
- min-height: 44px;
287
- }
288
-
289
- .ios ion-toolbar:not(.minimum-segment-toolbar) ion-segment {
290
- width: calc(100% - 16px);
291
- border-radius: 16px;
292
- }
293
- .ios ion-toolbar:not(.minimum-segment-toolbar) ion-segment ion-segment-button::part(indicator-background) {
294
- border-radius: 16px;
295
- }
296
-
297
- .ion-palette-dark.ios .ion-page ion-header > ion-toolbar > ion-buttons *:not(.link-setting),
298
- .ion-palette-dark.ios .ion-page ion-footer > ion-toolbar > ion-buttons *:not(.link-setting) {
299
- opacity: 1;
300
- }
301
- .ion-palette-dark.ios .ion-page ion-header > ion-toolbar > ion-buttons *:not(.link-setting)::part(native),
302
- .ion-palette-dark.ios .ion-page ion-footer > ion-toolbar > ion-buttons *:not(.link-setting)::part(native) {
303
- opacity: 1;
304
- }
305
- .ion-palette-dark.ios .ion-page ion-header > ion-toolbar > ion-buttons *.ion-activated::part(native),
306
- .ion-palette-dark.ios .ion-page ion-footer > ion-toolbar > ion-buttons *.ion-activated::part(native) {
307
- background: rgba(var(--system-tab-active-rgb), 0.25);
308
- backdrop-filter: saturate(180%) blur(7px);
309
- box-shadow: inset 0 0 8px 0 rgba(var(--system-tab-active-rgb), 0.2);
310
- border: 0.5px solid rgba(var(--system-tab-active-rgb), 0.7);
311
- transition: box-shadow 0.1s ease;
312
- }
313
- .ion-palette-dark.ios .ion-page ion-header > ion-toolbar > ion-buttons *.ion-activated ion-icon,
314
- .ion-palette-dark.ios .ion-page ion-footer > ion-toolbar > ion-buttons *.ion-activated ion-icon {
315
- color: rgb(255, 255, 255) !important;
316
- }
317
- .ion-palette-dark.ios .ion-page ion-header > ion-toolbar > ion-buttons *[color=primary][fill=outline]::part(native),
318
- .ion-palette-dark.ios .ion-page ion-footer > ion-toolbar > ion-buttons *[color=primary][fill=outline]::part(native) {
319
- color: var(--ion-color-primary-contrast) !important;
320
- }
321
-
322
- .ios ion-toast {
323
- --border-radius: 24px;
324
- }
325
- .ios ion-card {
326
- border-radius: 24px;
327
- }
328
- .ios ion-action-sheet {
329
- --button-color: var(--ion-color-medium);
330
- }
331
- .ios .thread-fab ion-fab-button {
332
- --background-activated: rgba(var(--system-light-rgb), 0.3);
333
- }
334
- .ios .thread-fab ion-fab-button::part(native) {
335
- background: rgba(var(--system-light-rgb), 0.4);
336
- backdrop-filter: saturate(240%) blur(6px);
337
- box-shadow: inset 0 0 8px 0 rgba(var(--system-shadow-rgb), 0.2), 0 0 12px 0 rgba(var(--system-shadow-rgb), 0.8);
338
- border-top: 0.5px solid rgba(var(--system-edge-rgb), 1);
339
- border-right: 0.5px solid rgba(var(--system-edge-rgb), 0.8);
340
- border-bottom: 0.5px solid rgba(var(--system-edge-rgb), 1);
341
- border-left: 0.5px solid rgba(var(--system-edge-rgb), 0.6);
342
- transition: box-shadow 0.1s ease;
343
- color: rgb(var(--system-dark-rgb));
344
- }
345
- .ios .thread-fab ion-fab-button ion-icon {
346
- color: var(--ion-color-medium-shade);
347
- }
348
- .ios ion-item.suggest-seeking {
349
- --padding-start: 16px !important;
350
- }
351
- .ios .can-go-back ion-header ion-toolbar:not(.md):first-child,
352
- .ios .enable-back-button ion-header ion-toolbar:not(.md):first-child {
353
- --border-width: 0;
354
- }
355
- .ios ion-header.header-translucent .header-background,
356
- .ios ion-header.header-translucent .footer-background,
357
- .ios ion-footer.footer-translucent .header-background,
358
- .ios ion-footer.footer-translucent .footer-background {
359
- backdrop-filter: none;
360
- }
361
- .ios ion-header.header-translucent ion-toolbar,
362
- .ios ion-footer.footer-translucent ion-toolbar {
363
- --border-width: 0;
364
- --background: transparent;
365
- }
366
- .ios ion-header ion-toolbar:first-child {
367
- padding-right: calc(var(--ion-safe-area-right) + 4px);
368
- padding-left: calc(var(--ion-safe-area-left) + 4px);
369
- }
370
- .ios ion-content:not(:has(cdk-virtual-scroll-viewport)) {
371
- --padding-bottom: calc(56px + var(--max-safe-area));
372
- }
373
- .ios .ion-page :not(:has(ion-footer)) cdk-virtual-scroll-viewport {
374
- margin-bottom: calc((56px + var(--max-safe-area)) * -1);
375
- padding-bottom: calc(56px + var(--max-safe-area));
376
- }
377
- .ios .ion-page ion-content > ion-header > ion-toolbar:first-child {
378
- --min-height: 66px;
379
- }
380
- .ios .ion-page.enable-back-button ion-content > ion-header > ion-toolbar:first-child, .ios .ion-page.ion-page.can-go-back ion-content > ion-header > ion-toolbar:first-child {
381
- --min-height: auto;
382
- }
383
- .ios .ion-page ion-header > ion-toolbar.ion-color-primary > ion-buttons *::part(native) {
384
- box-shadow: none !important;
385
- border-radius: 25px;
386
- background: var(--ion-color-primary) !important;
387
- border-color: var(--ion-color-primary-contrast) !important;
388
- border-width: 1px !important;
389
- }
390
- .ios .ion-page ion-header > ion-toolbar.ion-color-primary > ion-buttons *.ion-activated {
391
- opacity: 0.4;
392
- }
393
- .ios .ion-page ion-header > ion-toolbar.ion-color-primary > ion-buttons *.ion-activated ion-icon {
394
- border-color: var(--ion-color-primary-contrast) !important;
395
- }
396
- .ios .ion-page ion-header > ion-toolbar.ion-color-primary > ion-buttons *.ion-activated::part(native)::after {
397
- background: transparent !important;
398
- }
399
- .ios app-photo-image.ion-page ion-header > ion-toolbar > ion-buttons *::part(native),
400
- .ios app-editor-image.ion-page ion-header > ion-toolbar > ion-buttons *::part(native) {
401
- box-shadow: none !important;
402
- border-radius: 25px;
403
- background: transparent !important;
404
- border-width: 1px !important;
405
- }
406
- .ios .ion-page ion-content:not(.background-transparent)::after,
407
- .ios ion-footer.footer-translucent::after {
408
- content: "";
409
- position: absolute;
410
- bottom: 0;
411
- width: 100%;
412
- height: calc(56px + var(--max-safe-area));
413
- box-shadow: inset 0 0 0 0 rgba(var(--system-background-rgb), 0), inset 0 calc(-56px - var(--max-safe-area)) 40px -40px rgba(var(--system-background-rgb), 0.8);
414
- pointer-events: none;
415
- z-index: 1;
416
- }
417
- .ios app-editor-image.ion-page ion-content::after,
418
- .ios app-photo-image.ion-page ion-content::after {
419
- box-shadow: none !important;
420
- }
421
-
422
- /*# sourceMappingURL=ionic-theme-ios26.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sourceRoot":"","sources":["../src/assets/ios-variables.scss","../src/assets/ion-popover.scss","../src/assets/ion-searchbar.scss","../src/assets/ios-talk-room.scss","../src/assets/ion-tabs.scss","../src/assets/ion-button.scss","../src/assets/ion-segment.scss","../src/assets/ios-design-dark.scss","../src/assets/ios-design.scss"],"names":[],"mappings":";AAAA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACZA;EACE;;AAKE;EDUJ;EACA;EACA,YACE;EAEF;EACA;EACA;EACA;EACA;ECjBM;EACA;;AAGJ;EACE;;AACA;EACE;;;ACfN;EACE;EACA;;AAKE;EACE;;AAKN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AACA;EACE;EFVN;EACA;EACA,YACE;EAEF;EACA;EACA;EACA;EACA;EEIM;EACA;EACA;;AAEF;EACE;;;ACjCJ;EACE;;AAGA;EACE;EACA;;AAEF;EACE;EACA;;AACA;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAGJ;EHVR;EACA;EACA,YACE;EAEF;EACA;EACA;EACA;EACA;EGGU;;AAKJ;EACE;EACA;EACA;;AACA;EHrBR;EACA;EACA,YACE;EAEF;EACA;EACA;EACA;EACA;EGcU;EACA;;;ACxCV;EACE;EACA;;AACA;EAKE;;AAJA;EJYJ;EACA;EACA,YACE;EAEF;EACA;EACA;EACA;EACA;EInBM;;AAMN;EJIA;EACA;EACA,YACE;EAEF;EACA;EACA;EACA;EACA;EIXE;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;AACA;EACE;;AAGF;EAIE;EACA;;AAJA;EACE;;AAIF;EACE;;AAIA;EACE;EACA;EACA;EACA;;AAGF;EACE;;;ACpDV;AACE;AAAA;AAAA;;AAKE;AAAA;EACE;;AAIJ;AAAA;AAAA;EAGE;EAKA;EAEA;EAEA;EACA;;AATA;AAAA;AAAA;ELEF;EACA;EACA,YACE;EAEF;EACA;EACA;EACA;EACA;EKTI;;AAQF;AAAA;AAAA;EACE;EACA;;AAMF;AAAA;AAAA;EACE;EACA,YACE;;AAIF;AAAA;AAAA;EACE;;AACA;AAAA;AAAA;EACE;EL1BR;EACA;EACA,YACE;EAEF;EACA;EACA;EACA;EACA;EKmBQ;;AAOJ;AAAA;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;EACE;;AACA;AAAA;AAAA;AAAA;AAAA;EACE;;AAMJ;AAAA;AAAA;EACE;EACA;;;ACtEJ;EACE;EACA;;AAEA;EACE;;;ACFJ;AAAA;EACE;;AACA;AAAA;EACE;;AAKF;AAAA;EPmBJ;EACA;EACA;EACA;EACA;;AOpBI;AAAA;EACE;;AAKF;AAAA;EACE;;;ACZN;EACE;;AAGF;EACE;;AAGF;EACE;;AAIA;EAQE;;AAPA;ERNJ;EACA;EACA,YACE;EAEF;EACA;EACA;EACA;EACA;EQDM;;AAEF;EACE;;AAON;EACE;;AAGF;AAAA;EAEE;;AAIA;AAAA;AAAA;AAAA;EAEE;;AAEF;AAAA;EACE;EACA;;AAGJ;EACE;EACA;;AAEF;EACE;;AAIA;EACE;EACA;;AAEF;EACE;;AAKA;EACE;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AACA;EACE;;AAGA;EACE;;AAQJ;AAAA;EACE;EACA;EACA;EACA;;AAKN;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA,YACE;EAEF;EACA;;AAEF;AAAA;EAEE","file":"ionic-theme-ios26.css"}
@@ -1,4 +0,0 @@
1
- /**
2
- * Generated bundle index. Do not edit.
3
- */
4
- //# sourceMappingURL=rdlabo-ionic-theme-ios26.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"rdlabo-ionic-theme-ios26.mjs","sources":["../../../projects/ionic-theme-ios26/src/rdlabo-ionic-theme-ios26.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"AAAA;;AAEG"}
package/index.d.ts DELETED
@@ -1,3 +0,0 @@
1
- type dummy = {};
2
-
3
- export type { dummy };
@@ -1,77 +0,0 @@
1
- @use 'ios-variables';
2
-
3
- .ios {
4
- /**
5
- * パフォーマンス対策。必ず背景が単色である限りは不要
6
- */
7
- .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting),
8
- .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button {
9
- &::part(native) {
10
- backdrop-filter: none !important;
11
- }
12
- }
13
-
14
- .ion-page ion-header > ion-toolbar > ion-buttons ion-button:not(.link-setting),
15
- .ion-page ion-header > ion-toolbar > ion-buttons ion-back-button,
16
- ion-buttons.liquid-glass-buttons ion-button {
17
- max-height: inherit;
18
- &::part(native) {
19
- @include ios-variables.glass-background(0.7);
20
- border-radius: 25px;
21
- }
22
- margin: 8px;
23
-
24
- font-size: 1.05rem !important;
25
-
26
- transition: transform 100ms ease-out;
27
- will-change: transform;
28
- &.ion-activated {
29
- transform: scale(1.2);
30
- box-shadow: none;
31
- ion-icon {
32
- // 色を指定しなくても半透明に
33
- //color: var(--ion-color-medium-tint);
34
- }
35
- }
36
- &[color='primary'][fill='outline'] {
37
- color: rgba(var(--ion-color-primary-rgb), 1);
38
- transition:
39
- transform 100ms ease-out,
40
- color 50ms ease;
41
- }
42
- &[color='primary'][fill='outline'].ion-activated {
43
- &::part(native) {
44
- color: rgba(var(--ion-color-primary-rgb), 0.2);
45
- &::after {
46
- transform: scale(1.2);
47
- @include ios-variables.glass-background;
48
- box-shadow: none;
49
- }
50
- }
51
- }
52
-
53
- &.button-has-icon-only,
54
- &.back-button-has-icon-only {
55
- &::part(native) {
56
- border-radius: 50%;
57
- width: 44px;
58
- height: 44px;
59
- padding: 2px;
60
- }
61
-
62
- ion-icon {
63
- font-size: 1.4rem !important;
64
- &[name='close-outline'] {
65
- font-size: 2rem !important;
66
- }
67
- }
68
- }
69
-
70
- &:not(.button-has-icon-only):not(.back-button-has-icon-only) {
71
- &::part(native) {
72
- padding: 0 16px;
73
- min-height: 44px;
74
- }
75
- }
76
- }
77
- }
@@ -1,23 +0,0 @@
1
- @use 'ios-variables';
2
-
3
- .ios {
4
- ion-popover {
5
- --backdrop-opacity: 0.04;
6
- &::part(arrow) {
7
- //display: none;
8
- }
9
- &:not(.popover-exclude-content) {
10
- &::part(content) {
11
- @include ios-variables.glass-background(0.6);
12
- border-radius: 24px;
13
- padding: 0;
14
- }
15
- }
16
- ion-list {
17
- background: transparent;
18
- ion-item {
19
- --background: transparent;
20
- }
21
- }
22
- }
23
- }
@@ -1,42 +0,0 @@
1
- @use 'ios-variables';
2
-
3
- .ios {
4
- .toolbar-searchbar::part(container) {
5
- padding-top: 3px;
6
- padding-bottom: 3px;
7
- }
8
-
9
- ion-modal {
10
- ion-searchbar:not(.area-searchbar) {
11
- .searchbar-input-container {
12
- margin: 0 6px;
13
- }
14
- }
15
- }
16
-
17
- ion-searchbar:not(.area-searchbar) {
18
- min-height: 60px;
19
- padding: 0;
20
-
21
- ion-icon.searchbar-search-icon {
22
- inset-inline-start: 12px;
23
- }
24
-
25
- .searchbar-input-container {
26
- margin: 0 8px 0 16px;
27
- align-self: center;
28
- justify-self: center;
29
- input.searchbar-input {
30
- min-height: 44px;
31
- @include ios-variables.glass-background;
32
- // Modal表示でのアイコン非表示の不具合の対応
33
- backdrop-filter: none;
34
- border-radius: 20px;
35
- padding-inline-start: 2.4rem !important;
36
- }
37
- .searchbar-clear-button {
38
- padding-inline-end: 2rem !important;
39
- }
40
- }
41
- }
42
- }
@@ -1,12 +0,0 @@
1
- .ios {
2
- ion-toolbar:not(.minimum-segment-toolbar) {
3
- ion-segment {
4
- width: calc(100% - 16px);
5
- border-radius: 16px;
6
-
7
- ion-segment-button::part(indicator-background) {
8
- border-radius: 16px;
9
- }
10
- }
11
- }
12
- }
@@ -1,60 +0,0 @@
1
- @use 'ios-variables';
2
-
3
- .ios {
4
- ion-fab.inner-tab-bar {
5
- right: calc(16px + var(--ion-safe-area-right, 0px));
6
- bottom: var(--max-safe-area);
7
- ion-fab-button {
8
- &::part(native) {
9
- @include ios-variables.glass-background;
10
- color: rgb(var(--system-dark-rgb));
11
- }
12
- --background-activated: rgba(var(--system-light-rgb), 0.3);
13
- }
14
- }
15
-
16
- ion-tab-bar {
17
- @include ios-variables.glass-background;
18
- z-index: 2;
19
-
20
- border-radius: 40px;
21
-
22
- width: calc(100% - 56px - 16px - 16px - 4px - 16px);
23
- max-width: 400px;
24
- padding: 2px 2px;
25
- bottom: var(--max-safe-area);
26
- left: calc(16px + var(--ion-safe-area-left, 0px));
27
- position: absolute;
28
- margin: auto;
29
-
30
- transition: transform 100ms ease-out;
31
- will-change: transform;
32
- &:active {
33
- transform: scale(1.02);
34
- }
35
-
36
- ion-tab-button {
37
- & > ion-icon {
38
- font-size: 30px;
39
- }
40
- background: rgba(var(--system-light-rgb), 0);
41
- height: auto;
42
- &::part(native) {
43
- overflow: visible;
44
- }
45
-
46
- &.tab-selected {
47
- &::part(native) {
48
- backdrop-filter: blur(7px);
49
- background: rgba(var(--system-tab-active-rgb), 0.1);
50
- transition: background 0.2s ease;
51
- border-radius: 32px;
52
- }
53
-
54
- &.ion-activated::part(native) {
55
- background: rgba(var(--system-shadow-rgb), 0.02);
56
- }
57
- }
58
- }
59
- }
60
- }
@@ -1,28 +0,0 @@
1
- @use 'ios-variables';
2
-
3
- .ion-palette-dark.ios {
4
- .ion-page ion-header > ion-toolbar > ion-buttons *,
5
- .ion-page ion-footer > ion-toolbar > ion-buttons * {
6
- &:not(.link-setting) {
7
- opacity: 1;
8
- &::part(native) {
9
- opacity: 1;
10
- }
11
- }
12
-
13
- &.ion-activated {
14
- &::part(native) {
15
- @include ios-variables.glass-background-dark-active;
16
- }
17
- ion-icon {
18
- color: rgb(255, 255, 255) !important;
19
- }
20
- }
21
-
22
- &[color='primary'][fill='outline'] {
23
- &::part(native) {
24
- color: var(--ion-color-primary-contrast) !important;
25
- }
26
- }
27
- }
28
- }