UNPKG

1.85 kBSCSSView Raw
1@import "../../themes/ionic.globals.ios";
2
3// iOS Content
4// --------------------------------------------------
5
6/// @prop - Background color of the outer content
7$content-ios-outer-background: #efeff4 !default;
8
9/// @prop - Background color of the content when making transition
10$content-ios-transition-background: #000 !default;
11
12
13.content-ios {
14 color: $text-ios-color;
15 background-color: $background-ios-color;
16}
17
18.content-ios.outer-content {
19 background: $content-ios-outer-background;
20}
21
22.content-ios hr {
23 height: $hairlines-width;
24
25 background-color: rgba(0, 0, 0, .12);
26}
27
28.ios .ion-page.show-page ~ .nav-decor {
29 @include position(0, null, null, 0);
30
31 // when ios pages transition, the leaving page grays out
32 // this is the black square behind all pages so they gray out
33 position: absolute;
34 z-index: 0;
35 display: block;
36
37 width: 100%;
38 height: 100%;
39
40 background: $content-ios-transition-background;
41
42 pointer-events: none;
43}
44
45
46// iOS Content Padding
47// --------------------------------------------------
48
49@include content-padding('ios', $content-ios-padding);
50
51
52// iOS Content Margin
53// --------------------------------------------------
54
55@include content-margin('ios', $content-ios-margin);
56
57
58// iOS Content Scroll
59// --------------------------------------------------
60
61.content-ios:not([no-bounce]) > .scroll-content::before,
62.content-ios:not([no-bounce]) > .scroll-content::after {
63 position: absolute;
64
65 width: 1px;
66 height: 1px;
67
68 content: "";
69}
70
71.content-ios:not([no-bounce]) > .scroll-content::before {
72 bottom: -1px;
73}
74
75.content-ios:not([no-bounce]) > .scroll-content::after {
76 top: -1px;
77}
78
79.platform-core .content-ios .scroll-content::after,
80.platform-core .content-ios .scroll-content::before {
81 position: initial;
82
83 top: initial;
84 bottom: initial;
85
86 width: initial;
87 height: initial;
88}