@eui/mobile-styles 18.1.2-snapshot-1756383732547 → 18.1.3-snapshot-1758105073490

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.
package/package.json CHANGED
@@ -6,6 +6,6 @@
6
6
  "LICENSE"
7
7
  ],
8
8
  "license": "EUPL-1.1",
9
- "version": "18.1.2-snapshot-1756383732547",
9
+ "version": "18.1.3-snapshot-1758105073490",
10
10
  "tag": "snapshot"
11
11
  }
@@ -1,377 +0,0 @@
1
- html.ios {
2
- --ion-default-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
3
- }
4
-
5
- html.md {
6
- --ion-default-font: "Roboto", "Helvetica Neue", sans-serif;
7
- }
8
-
9
- html {
10
- --ion-font-family: var(--ion-default-font);
11
- }
12
-
13
- body {
14
- background: var(--ion-background-color);
15
- }
16
-
17
- body.backdrop-no-scroll {
18
- overflow: hidden;
19
- }
20
-
21
- /**
22
- * Card style modal needs additional padding on the
23
- * top of the header. We accomplish this by targeting
24
- * the first toolbar in the header.
25
- * Footer also needs this. We do not adjust the bottom
26
- * padding though because of the safe area.
27
- */
28
- html.ios ion-modal.modal-card ion-header ion-toolbar:first-of-type,
29
- html.ios ion-modal.modal-sheet ion-header ion-toolbar:first-of-type,
30
- html.ios ion-modal ion-footer ion-toolbar:first-of-type {
31
- padding-top: 6px;
32
- }
33
-
34
- /**
35
- * Card style modal needs additional padding on the
36
- * bottom of the header. We accomplish this by targeting
37
- * the last toolbar in the header.
38
- */
39
- html.ios ion-modal.modal-card ion-header ion-toolbar:last-of-type,
40
- html.ios ion-modal.modal-sheet ion-header ion-toolbar:last-of-type {
41
- padding-bottom: 6px;
42
- }
43
-
44
- /**
45
- * Add padding on the left and right
46
- * of toolbars while accounting for
47
- * safe area values when in landscape.
48
- */
49
- html.ios ion-modal ion-toolbar {
50
- padding-right: calc(var(--ion-safe-area-right) + 8px);
51
- padding-left: calc(var(--ion-safe-area-left) + 8px);
52
- }
53
-
54
- /**
55
- * Card style modal on iPadOS
56
- * should only have backdrop on first instance.
57
- */
58
- @media screen and (min-width: 768px) {
59
- html.ios ion-modal.modal-card:first-of-type {
60
- --backdrop-opacity: 0.18;
61
- }
62
- }
63
- /**
64
- * Subsequent modals should not have a backdrop/box shadow
65
- * as it will cause the screen to appear to get progressively
66
- * darker. With Ionic 6, declarative modals made it
67
- * possible to have multiple non-presented modals in the DOM,
68
- * so we could no longer rely on ion-modal:first-of-type.
69
- * Here we disable the opacity/box-shadow for every modal
70
- * that comes after the first presented modal.
71
- *
72
- * Note: ion-modal:not(.overlay-hidden):first-of-type
73
- * does not match the first modal to not have
74
- * the .overlay-hidden class, it will match the
75
- * first modal in general only if it does not
76
- * have the .overlay-hidden class.
77
- * The :nth-child() pseudo-class has support
78
- * for selectors which would help us here. At the
79
- * time of writing it does not have great cross browser
80
- * support.
81
- *
82
- * Note 2: This should only apply to non-card and
83
- * non-sheet modals. Card and sheet modals have their
84
- * own criteria for displaying backdrops/box shadows.
85
- *
86
- * Do not use :not(.overlay-hidden) in place of
87
- * .show-modal because that triggers a memory
88
- * leak in Blink: https://bugs.chromium.org/p/chromium/issues/detail?id=1418768
89
- */
90
- ion-modal.modal-default.show-modal ~ ion-modal.modal-default {
91
- --backdrop-opacity: 0;
92
- --box-shadow: none;
93
- }
94
-
95
- /**
96
- * This works around a bug in WebKit where the
97
- * content will overflow outside of the bottom border
98
- * radius when re-painting. As long as a single
99
- * border radius value is set on .ion-page, this
100
- * issue does not happen. We set the top left radius
101
- * here because the top left corner will always have a
102
- * radius no matter the platform.
103
- * This behavior only applies to card modals.
104
- */
105
- html.ios ion-modal.modal-card .ion-page {
106
- border-top-left-radius: var(--border-radius);
107
- }
108
-
109
- .ion-color-primary {
110
- --ion-color-base: var(--ion-color-primary, #3880ff) !important;
111
- --ion-color-base-rgb: var(--ion-color-primary-rgb, 56, 128, 255) !important;
112
- --ion-color-contrast: var(--ion-color-primary-contrast, #fff) !important;
113
- --ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb, 255, 255, 255) !important;
114
- --ion-color-shade: var(--ion-color-primary-shade, #3171e0) !important;
115
- --ion-color-tint: var(--ion-color-primary-tint, #4c8dff) !important;
116
- }
117
-
118
- .ion-color-secondary {
119
- --ion-color-base: var(--ion-color-secondary, #3dc2ff) !important;
120
- --ion-color-base-rgb: var(--ion-color-secondary-rgb, 61, 194, 255) !important;
121
- --ion-color-contrast: var(--ion-color-secondary-contrast, #fff) !important;
122
- --ion-color-contrast-rgb: var(--ion-color-secondary-contrast-rgb, 255, 255, 255) !important;
123
- --ion-color-shade: var(--ion-color-secondary-shade, #36abe0) !important;
124
- --ion-color-tint: var(--ion-color-secondary-tint, #50c8ff) !important;
125
- }
126
-
127
- .ion-color-tertiary {
128
- --ion-color-base: var(--ion-color-tertiary, #5260ff) !important;
129
- --ion-color-base-rgb: var(--ion-color-tertiary-rgb, 82, 96, 255) !important;
130
- --ion-color-contrast: var(--ion-color-tertiary-contrast, #fff) !important;
131
- --ion-color-contrast-rgb: var(--ion-color-tertiary-contrast-rgb, 255, 255, 255) !important;
132
- --ion-color-shade: var(--ion-color-tertiary-shade, #4854e0) !important;
133
- --ion-color-tint: var(--ion-color-tertiary-tint, #6370ff) !important;
134
- }
135
-
136
- .ion-color-success {
137
- --ion-color-base: var(--ion-color-success, #2dd36f) !important;
138
- --ion-color-base-rgb: var(--ion-color-success-rgb, 45, 211, 111) !important;
139
- --ion-color-contrast: var(--ion-color-success-contrast, #fff) !important;
140
- --ion-color-contrast-rgb: var(--ion-color-success-contrast-rgb, 255, 255, 255) !important;
141
- --ion-color-shade: var(--ion-color-success-shade, #28ba62) !important;
142
- --ion-color-tint: var(--ion-color-success-tint, #42d77d) !important;
143
- }
144
-
145
- .ion-color-warning {
146
- --ion-color-base: var(--ion-color-warning, #ffc409) !important;
147
- --ion-color-base-rgb: var(--ion-color-warning-rgb, 255, 196, 9) !important;
148
- --ion-color-contrast: var(--ion-color-warning-contrast, #000) !important;
149
- --ion-color-contrast-rgb: var(--ion-color-warning-contrast-rgb, 0, 0, 0) !important;
150
- --ion-color-shade: var(--ion-color-warning-shade, #e0ac08) !important;
151
- --ion-color-tint: var(--ion-color-warning-tint, #ffca22) !important;
152
- }
153
-
154
- .ion-color-danger {
155
- --ion-color-base: var(--ion-color-danger, #eb445a) !important;
156
- --ion-color-base-rgb: var(--ion-color-danger-rgb, 235, 68, 90) !important;
157
- --ion-color-contrast: var(--ion-color-danger-contrast, #fff) !important;
158
- --ion-color-contrast-rgb: var(--ion-color-danger-contrast-rgb, 255, 255, 255) !important;
159
- --ion-color-shade: var(--ion-color-danger-shade, #cf3c4f) !important;
160
- --ion-color-tint: var(--ion-color-danger-tint, #ed576b) !important;
161
- }
162
-
163
- .ion-color-light {
164
- --ion-color-base: var(--ion-color-light, #f4f5f8) !important;
165
- --ion-color-base-rgb: var(--ion-color-light-rgb, 244, 245, 248) !important;
166
- --ion-color-contrast: var(--ion-color-light-contrast, #000) !important;
167
- --ion-color-contrast-rgb: var(--ion-color-light-contrast-rgb, 0, 0, 0) !important;
168
- --ion-color-shade: var(--ion-color-light-shade, #d7d8da) !important;
169
- --ion-color-tint: var(--ion-color-light-tint, #f5f6f9) !important;
170
- }
171
-
172
- .ion-color-medium {
173
- --ion-color-base: var(--ion-color-medium, #92949c) !important;
174
- --ion-color-base-rgb: var(--ion-color-medium-rgb, 146, 148, 156) !important;
175
- --ion-color-contrast: var(--ion-color-medium-contrast, #fff) !important;
176
- --ion-color-contrast-rgb: var(--ion-color-medium-contrast-rgb, 255, 255, 255) !important;
177
- --ion-color-shade: var(--ion-color-medium-shade, #808289) !important;
178
- --ion-color-tint: var(--ion-color-medium-tint, #9d9fa6) !important;
179
- }
180
-
181
- .ion-color-dark {
182
- --ion-color-base: var(--ion-color-dark, #222428) !important;
183
- --ion-color-base-rgb: var(--ion-color-dark-rgb, 34, 36, 40) !important;
184
- --ion-color-contrast: var(--ion-color-dark-contrast, #fff) !important;
185
- --ion-color-contrast-rgb: var(--ion-color-dark-contrast-rgb, 255, 255, 255) !important;
186
- --ion-color-shade: var(--ion-color-dark-shade, #1e2023) !important;
187
- --ion-color-tint: var(--ion-color-dark-tint, #383a3e) !important;
188
- }
189
-
190
- .ion-page {
191
- left: 0;
192
- right: 0;
193
- top: 0;
194
- bottom: 0;
195
- display: flex;
196
- position: absolute;
197
- flex-direction: column;
198
- justify-content: space-between;
199
- contain: layout size style;
200
- overflow: hidden;
201
- z-index: 0;
202
- }
203
-
204
- /**
205
- * When making custom dialogs, using
206
- * ion-content is not required. As a result,
207
- * some developers may wish to have dialogs
208
- * that are automatically sized by the browser.
209
- * These changes allow certain dimension values
210
- * such as fit-content to work correctly.
211
- */
212
- ion-modal > .ion-page {
213
- position: relative;
214
- contain: layout style;
215
- height: 100%;
216
- }
217
-
218
- .split-pane-visible > .ion-page.split-pane-main {
219
- position: relative;
220
- }
221
-
222
- ion-route,
223
- ion-route-redirect,
224
- ion-router,
225
- ion-select-option,
226
- ion-nav-controller,
227
- ion-menu-controller,
228
- ion-action-sheet-controller,
229
- ion-alert-controller,
230
- ion-loading-controller,
231
- ion-modal-controller,
232
- ion-picker-controller,
233
- ion-popover-controller,
234
- ion-toast-controller,
235
- .ion-page-hidden,
236
- [hidden] {
237
- /* stylelint-disable-next-line declaration-no-important */
238
- display: none !important;
239
- }
240
-
241
- .ion-page-invisible {
242
- opacity: 0;
243
- }
244
-
245
- .can-go-back > ion-header ion-back-button {
246
- display: block;
247
- }
248
-
249
- html.plt-ios.plt-hybrid, html.plt-ios.plt-pwa {
250
- --ion-statusbar-padding: 20px;
251
- }
252
-
253
- @supports (padding-top: 20px) {
254
- html {
255
- --ion-safe-area-top: var(--ion-statusbar-padding);
256
- }
257
- }
258
- @supports (padding-top: constant(safe-area-inset-top)) {
259
- html {
260
- --ion-safe-area-top: constant(safe-area-inset-top);
261
- --ion-safe-area-bottom: constant(safe-area-inset-bottom);
262
- --ion-safe-area-left: constant(safe-area-inset-left);
263
- --ion-safe-area-right: constant(safe-area-inset-right);
264
- }
265
- }
266
- @supports (padding-top: env(safe-area-inset-top)) {
267
- html {
268
- --ion-safe-area-top: env(safe-area-inset-top);
269
- --ion-safe-area-bottom: env(safe-area-inset-bottom);
270
- --ion-safe-area-left: env(safe-area-inset-left);
271
- --ion-safe-area-right: env(safe-area-inset-right);
272
- }
273
- }
274
- ion-card.ion-color .ion-inherit-color,
275
- ion-card-header.ion-color .ion-inherit-color {
276
- color: inherit;
277
- }
278
-
279
- .menu-content {
280
- transform: translate3d(0, 0, 0);
281
- }
282
-
283
- .menu-content-open {
284
- cursor: pointer;
285
- touch-action: manipulation;
286
- pointer-events: none;
287
- }
288
-
289
- .ios .menu-content-reveal {
290
- box-shadow: -8px 0 42px rgba(0, 0, 0, 0.08);
291
- }
292
-
293
- [dir=rtl].ios .menu-content-reveal {
294
- box-shadow: 8px 0 42px rgba(0, 0, 0, 0.08);
295
- }
296
-
297
- .md .menu-content-reveal {
298
- box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18);
299
- }
300
-
301
- .md .menu-content-push {
302
- box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18);
303
- }
304
-
305
- ion-accordion-group.accordion-group-expand-inset > ion-accordion:first-of-type {
306
- border-top-left-radius: 8px;
307
- border-top-right-radius: 8px;
308
- }
309
-
310
- ion-accordion-group.accordion-group-expand-inset > ion-accordion:last-of-type {
311
- border-bottom-left-radius: 8px;
312
- border-bottom-right-radius: 8px;
313
- }
314
-
315
- ion-accordion-group > ion-accordion:last-of-type ion-item[slot=header] {
316
- --border-width: 0px;
317
- }
318
-
319
- ion-accordion.accordion-animated > [slot=header] .ion-accordion-toggle-icon {
320
- transition: 300ms transform cubic-bezier(0.25, 0.8, 0.5, 1);
321
- }
322
-
323
- @media (prefers-reduced-motion: reduce) {
324
- ion-accordion .ion-accordion-toggle-icon {
325
- /* stylelint-disable declaration-no-important */
326
- transition: none !important;
327
- }
328
- }
329
- /**
330
- * The > [slot="header"] selector ensures that we do
331
- * not modify toggle icons for any nested accordions. The state
332
- * of one accordion should not affect any accordions inside
333
- * of a nested accordion group.
334
- */
335
- ion-accordion.accordion-expanding > [slot=header] .ion-accordion-toggle-icon,
336
- ion-accordion.accordion-expanded > [slot=header] .ion-accordion-toggle-icon {
337
- transform: rotate(180deg);
338
- }
339
-
340
- ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-previous ion-item[slot=header] {
341
- --border-width: 0px;
342
- --inner-border-width: 0px;
343
- }
344
-
345
- ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanding:first-of-type,
346
- ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanded:first-of-type {
347
- margin-top: 0;
348
- }
349
-
350
- ion-input input::-webkit-date-and-time-value {
351
- text-align: start;
352
- }
353
-
354
- /**
355
- * The .ion-datetime-button-overlay class contains
356
- * styles that allow any modal/popover to be
357
- * sized according to the dimensions of the datetime
358
- * when used with ion-datetime-button.
359
- */
360
- .ion-datetime-button-overlay {
361
- --width: fit-content;
362
- --height: fit-content;
363
- }
364
-
365
- /**
366
- * The grid variant can scale down when inline.
367
- * When used in a `fit-content` overlay, this causes
368
- * the overlay to shrink when the month/year picker is open.
369
- * Explicitly setting the dimensions lets us have a consistently
370
- * sized grid interface.
371
- */
372
- .ion-datetime-button-overlay ion-datetime.datetime-grid {
373
- width: 320px;
374
- min-height: 320px;
375
- }
376
-
377
- /*# sourceMappingURL=core.css.map */
@@ -1,54 +0,0 @@
1
- .ion-hide {
2
- display: none !important;
3
- }
4
-
5
- .ion-hide-up {
6
- display: none !important;
7
- }
8
-
9
- .ion-hide-down {
10
- display: none !important;
11
- }
12
-
13
- @media (min-width: 576px) {
14
- .ion-hide-sm-up {
15
- display: none !important;
16
- }
17
- }
18
- @media (max-width: 575.98px) {
19
- .ion-hide-sm-down {
20
- display: none !important;
21
- }
22
- }
23
- @media (min-width: 768px) {
24
- .ion-hide-md-up {
25
- display: none !important;
26
- }
27
- }
28
- @media (max-width: 767.98px) {
29
- .ion-hide-md-down {
30
- display: none !important;
31
- }
32
- }
33
- @media (min-width: 992px) {
34
- .ion-hide-lg-up {
35
- display: none !important;
36
- }
37
- }
38
- @media (max-width: 991.98px) {
39
- .ion-hide-lg-down {
40
- display: none !important;
41
- }
42
- }
43
- @media (min-width: 1200px) {
44
- .ion-hide-xl-up {
45
- display: none !important;
46
- }
47
- }
48
- @media (max-width: 1199.98px) {
49
- .ion-hide-xl-down {
50
- display: none !important;
51
- }
52
- }
53
-
54
- /*# sourceMappingURL=display.css.map */
@@ -1,81 +0,0 @@
1
- .ion-align-self-start {
2
- align-self: flex-start !important;
3
- }
4
-
5
- .ion-align-self-end {
6
- align-self: flex-end !important;
7
- }
8
-
9
- .ion-align-self-center {
10
- align-self: center !important;
11
- }
12
-
13
- .ion-align-self-stretch {
14
- align-self: stretch !important;
15
- }
16
-
17
- .ion-align-self-baseline {
18
- align-self: baseline !important;
19
- }
20
-
21
- .ion-align-self-auto {
22
- align-self: auto !important;
23
- }
24
-
25
- .ion-wrap {
26
- flex-wrap: wrap !important;
27
- }
28
-
29
- .ion-nowrap {
30
- flex-wrap: nowrap !important;
31
- }
32
-
33
- .ion-wrap-reverse {
34
- flex-wrap: wrap-reverse !important;
35
- }
36
-
37
- .ion-justify-content-start {
38
- justify-content: flex-start !important;
39
- }
40
-
41
- .ion-justify-content-center {
42
- justify-content: center !important;
43
- }
44
-
45
- .ion-justify-content-end {
46
- justify-content: flex-end !important;
47
- }
48
-
49
- .ion-justify-content-around {
50
- justify-content: space-around !important;
51
- }
52
-
53
- .ion-justify-content-between {
54
- justify-content: space-between !important;
55
- }
56
-
57
- .ion-justify-content-evenly {
58
- justify-content: space-evenly !important;
59
- }
60
-
61
- .ion-align-items-start {
62
- align-items: flex-start !important;
63
- }
64
-
65
- .ion-align-items-center {
66
- align-items: center !important;
67
- }
68
-
69
- .ion-align-items-end {
70
- align-items: flex-end !important;
71
- }
72
-
73
- .ion-align-items-stretch {
74
- align-items: stretch !important;
75
- }
76
-
77
- .ion-align-items-baseline {
78
- align-items: baseline !important;
79
- }
80
-
81
- /*# sourceMappingURL=flex-utils.css.map */
@@ -1,116 +0,0 @@
1
- .ion-float-left {
2
- float: left !important;
3
- }
4
-
5
- .ion-float-right {
6
- float: right !important;
7
- }
8
-
9
- .ion-float-start {
10
- float: left !important;
11
- }
12
- [dir=rtl] .ion-float-start, :host-context([dir=rtl]) .ion-float-start {
13
- float: right !important;
14
- }
15
-
16
- .ion-float-end {
17
- float: right !important;
18
- }
19
- [dir=rtl] .ion-float-end, :host-context([dir=rtl]) .ion-float-end {
20
- float: left !important;
21
- }
22
-
23
- @media (min-width: 576px) {
24
- .ion-float-sm-left {
25
- float: left !important;
26
- }
27
-
28
- .ion-float-sm-right {
29
- float: right !important;
30
- }
31
-
32
- .ion-float-sm-start {
33
- float: left !important;
34
- }
35
- [dir=rtl] .ion-float-sm-start, :host-context([dir=rtl]) .ion-float-sm-start {
36
- float: right !important;
37
- }
38
-
39
- .ion-float-sm-end {
40
- float: right !important;
41
- }
42
- [dir=rtl] .ion-float-sm-end, :host-context([dir=rtl]) .ion-float-sm-end {
43
- float: left !important;
44
- }
45
- }
46
- @media (min-width: 768px) {
47
- .ion-float-md-left {
48
- float: left !important;
49
- }
50
-
51
- .ion-float-md-right {
52
- float: right !important;
53
- }
54
-
55
- .ion-float-md-start {
56
- float: left !important;
57
- }
58
- [dir=rtl] .ion-float-md-start, :host-context([dir=rtl]) .ion-float-md-start {
59
- float: right !important;
60
- }
61
-
62
- .ion-float-md-end {
63
- float: right !important;
64
- }
65
- [dir=rtl] .ion-float-md-end, :host-context([dir=rtl]) .ion-float-md-end {
66
- float: left !important;
67
- }
68
- }
69
- @media (min-width: 992px) {
70
- .ion-float-lg-left {
71
- float: left !important;
72
- }
73
-
74
- .ion-float-lg-right {
75
- float: right !important;
76
- }
77
-
78
- .ion-float-lg-start {
79
- float: left !important;
80
- }
81
- [dir=rtl] .ion-float-lg-start, :host-context([dir=rtl]) .ion-float-lg-start {
82
- float: right !important;
83
- }
84
-
85
- .ion-float-lg-end {
86
- float: right !important;
87
- }
88
- [dir=rtl] .ion-float-lg-end, :host-context([dir=rtl]) .ion-float-lg-end {
89
- float: left !important;
90
- }
91
- }
92
- @media (min-width: 1200px) {
93
- .ion-float-xl-left {
94
- float: left !important;
95
- }
96
-
97
- .ion-float-xl-right {
98
- float: right !important;
99
- }
100
-
101
- .ion-float-xl-start {
102
- float: left !important;
103
- }
104
- [dir=rtl] .ion-float-xl-start, :host-context([dir=rtl]) .ion-float-xl-start {
105
- float: right !important;
106
- }
107
-
108
- .ion-float-xl-end {
109
- float: right !important;
110
- }
111
- [dir=rtl] .ion-float-xl-end, :host-context([dir=rtl]) .ion-float-xl-end {
112
- float: left !important;
113
- }
114
- }
115
-
116
- /*# sourceMappingURL=float-elements.css.map */