UNPKG

6.99 kBCSSView Raw
1html.ios {
2 --ion-default-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
3}
4
5html.md {
6 --ion-default-font: "Roboto", "Helvetica Neue", sans-serif;
7}
8
9html {
10 --ion-font-family: var(--ion-default-font);
11}
12
13body {
14 background: var(--ion-background-color);
15}
16
17body.backdrop-no-scroll {
18 overflow: hidden;
19}
20
21html.ios ion-modal.modal-card .ion-page > ion-header > ion-toolbar:first-of-type {
22 padding-top: 0px;
23}
24
25html.ios ion-modal .ion-page {
26 border-radius: inherit;
27}
28
29.ion-color-primary {
30 --ion-color-base: var(--ion-color-primary, #3880ff) !important;
31 --ion-color-base-rgb: var(--ion-color-primary-rgb, 56, 128, 255) !important;
32 --ion-color-contrast: var(--ion-color-primary-contrast, #fff) !important;
33 --ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb, 255, 255, 255) !important;
34 --ion-color-shade: var(--ion-color-primary-shade, #3171e0) !important;
35 --ion-color-tint: var(--ion-color-primary-tint, #4c8dff) !important;
36}
37
38.ion-color-secondary {
39 --ion-color-base: var(--ion-color-secondary, #3dc2ff) !important;
40 --ion-color-base-rgb: var(--ion-color-secondary-rgb, 61, 194, 255) !important;
41 --ion-color-contrast: var(--ion-color-secondary-contrast, #fff) !important;
42 --ion-color-contrast-rgb: var(--ion-color-secondary-contrast-rgb, 255, 255, 255) !important;
43 --ion-color-shade: var(--ion-color-secondary-shade, #36abe0) !important;
44 --ion-color-tint: var(--ion-color-secondary-tint, #50c8ff) !important;
45}
46
47.ion-color-tertiary {
48 --ion-color-base: var(--ion-color-tertiary, #5260ff) !important;
49 --ion-color-base-rgb: var(--ion-color-tertiary-rgb, 82, 96, 255) !important;
50 --ion-color-contrast: var(--ion-color-tertiary-contrast, #fff) !important;
51 --ion-color-contrast-rgb: var(--ion-color-tertiary-contrast-rgb, 255, 255, 255) !important;
52 --ion-color-shade: var(--ion-color-tertiary-shade, #4854e0) !important;
53 --ion-color-tint: var(--ion-color-tertiary-tint, #6370ff) !important;
54}
55
56.ion-color-success {
57 --ion-color-base: var(--ion-color-success, #2dd36f) !important;
58 --ion-color-base-rgb: var(--ion-color-success-rgb, 45, 211, 111) !important;
59 --ion-color-contrast: var(--ion-color-success-contrast, #fff) !important;
60 --ion-color-contrast-rgb: var(--ion-color-success-contrast-rgb, 255, 255, 255) !important;
61 --ion-color-shade: var(--ion-color-success-shade, #28ba62) !important;
62 --ion-color-tint: var(--ion-color-success-tint, #42d77d) !important;
63}
64
65.ion-color-warning {
66 --ion-color-base: var(--ion-color-warning, #ffc409) !important;
67 --ion-color-base-rgb: var(--ion-color-warning-rgb, 255, 196, 9) !important;
68 --ion-color-contrast: var(--ion-color-warning-contrast, #000) !important;
69 --ion-color-contrast-rgb: var(--ion-color-warning-contrast-rgb, 0, 0, 0) !important;
70 --ion-color-shade: var(--ion-color-warning-shade, #e0ac08) !important;
71 --ion-color-tint: var(--ion-color-warning-tint, #ffca22) !important;
72}
73
74.ion-color-danger {
75 --ion-color-base: var(--ion-color-danger, #eb445a) !important;
76 --ion-color-base-rgb: var(--ion-color-danger-rgb, 235, 68, 90) !important;
77 --ion-color-contrast: var(--ion-color-danger-contrast, #fff) !important;
78 --ion-color-contrast-rgb: var(--ion-color-danger-contrast-rgb, 255, 255, 255) !important;
79 --ion-color-shade: var(--ion-color-danger-shade, #cf3c4f) !important;
80 --ion-color-tint: var(--ion-color-danger-tint, #ed576b) !important;
81}
82
83.ion-color-light {
84 --ion-color-base: var(--ion-color-light, #f4f5f8) !important;
85 --ion-color-base-rgb: var(--ion-color-light-rgb, 244, 245, 248) !important;
86 --ion-color-contrast: var(--ion-color-light-contrast, #000) !important;
87 --ion-color-contrast-rgb: var(--ion-color-light-contrast-rgb, 0, 0, 0) !important;
88 --ion-color-shade: var(--ion-color-light-shade, #d7d8da) !important;
89 --ion-color-tint: var(--ion-color-light-tint, #f5f6f9) !important;
90}
91
92.ion-color-medium {
93 --ion-color-base: var(--ion-color-medium, #92949c) !important;
94 --ion-color-base-rgb: var(--ion-color-medium-rgb, 146, 148, 156) !important;
95 --ion-color-contrast: var(--ion-color-medium-contrast, #fff) !important;
96 --ion-color-contrast-rgb: var(--ion-color-medium-contrast-rgb, 255, 255, 255) !important;
97 --ion-color-shade: var(--ion-color-medium-shade, #808289) !important;
98 --ion-color-tint: var(--ion-color-medium-tint, #9d9fa6) !important;
99}
100
101.ion-color-dark {
102 --ion-color-base: var(--ion-color-dark, #222428) !important;
103 --ion-color-base-rgb: var(--ion-color-dark-rgb, 34, 36, 40) !important;
104 --ion-color-contrast: var(--ion-color-dark-contrast, #fff) !important;
105 --ion-color-contrast-rgb: var(--ion-color-dark-contrast-rgb, 255, 255, 255) !important;
106 --ion-color-shade: var(--ion-color-dark-shade, #1e2023) !important;
107 --ion-color-tint: var(--ion-color-dark-tint, #383a3e) !important;
108}
109
110.ion-page {
111 left: 0;
112 right: 0;
113 top: 0;
114 bottom: 0;
115 display: flex;
116 position: absolute;
117 flex-direction: column;
118 justify-content: space-between;
119 contain: layout size style;
120 overflow: hidden;
121 z-index: 0;
122}
123
124.split-pane-visible > .ion-page.split-pane-main {
125 position: relative;
126}
127
128ion-route,
129ion-route-redirect,
130ion-router,
131ion-select-option,
132ion-nav-controller,
133ion-menu-controller,
134ion-action-sheet-controller,
135ion-alert-controller,
136ion-loading-controller,
137ion-modal-controller,
138ion-picker-controller,
139ion-popover-controller,
140ion-toast-controller,
141.ion-page-hidden,
142[hidden] {
143 /* stylelint-disable-next-line declaration-no-important */
144 display: none !important;
145}
146
147.ion-page-invisible {
148 opacity: 0;
149}
150
151.can-go-back > ion-header ion-back-button {
152 display: block;
153}
154
155html.plt-ios.plt-hybrid, html.plt-ios.plt-pwa {
156 --ion-statusbar-padding: 20px;
157}
158
159@supports (padding-top: 20px) {
160 html {
161 --ion-safe-area-top: var(--ion-statusbar-padding);
162 }
163}
164@supports (padding-top: constant(safe-area-inset-top)) {
165 html {
166 --ion-safe-area-top: constant(safe-area-inset-top);
167 --ion-safe-area-bottom: constant(safe-area-inset-bottom);
168 --ion-safe-area-left: constant(safe-area-inset-left);
169 --ion-safe-area-right: constant(safe-area-inset-right);
170 }
171}
172@supports (padding-top: env(safe-area-inset-top)) {
173 html {
174 --ion-safe-area-top: env(safe-area-inset-top);
175 --ion-safe-area-bottom: env(safe-area-inset-bottom);
176 --ion-safe-area-left: env(safe-area-inset-left);
177 --ion-safe-area-right: env(safe-area-inset-right);
178 }
179}
180ion-card.ion-color .ion-inherit-color,
181ion-card-header.ion-color .ion-inherit-color {
182 color: inherit;
183}
184
185.menu-content {
186 transform: translate3d(0, 0, 0);
187}
188
189.menu-content-open {
190 cursor: pointer;
191 touch-action: manipulation;
192 pointer-events: none;
193}
194
195.ios .menu-content-reveal {
196 box-shadow: -8px 0 42px rgba(0, 0, 0, 0.08);
197}
198
199[dir=rtl].ios .menu-content-reveal {
200 box-shadow: 8px 0 42px rgba(0, 0, 0, 0.08);
201}
202
203.md .menu-content-reveal {
204 box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18);
205}
206
207.md .menu-content-push {
208 box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18);
209}
210
211/*# sourceMappingURL=core.css.map */