/
header.ios.scss
84 lines (67 loc) · 2.01 KB
/
header.ios.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
@import "./header";
@import "./header.ios.vars";
// iOS Header
// --------------------------------------------------
.header-ios ion-toolbar:last-of-type {
--border-width: 0 0 #{$hairlines-width};
}
@supports (backdrop-filter: blur(0)) {
.header-background {
@include position(0, 0, 0, 0);
position: absolute;
backdrop-filter: $header-ios-translucent-filter;
}
.header-translucent-ios ion-toolbar {
--opacity: .8;
}
/**
* Disable the saturation otherwise it distorts the content
* background color when large header is not collapsed
*/
.header-collapse-condense-inactive .header-background {
backdrop-filter: blur($header-ios-blur);
}
}
.header-ios.ion-no-border ion-toolbar:last-of-type {
--border-width: 0;
}
// iOS Header - Collapse
// --------------------------------------------------
.header-collapse-condense {
z-index: 9;
}
.header-collapse-condense ion-toolbar {
position: sticky;
top: 0;
}
.header-collapse-condense ion-toolbar:first-of-type {
padding-top: 7px;
z-index: 1;
}
.header-collapse-condense ion-toolbar {
z-index: 0;
}
.header-collapse-condense ion-toolbar ion-searchbar {
height: 48px;
padding-top: 0px;
padding-bottom: 13px;
}
.header-collapse-main ion-toolbar.in-toolbar ion-title,
.header-collapse-main ion-toolbar.in-toolbar ion-buttons {
transition: all 0.2s ease-in-out;
}
.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,
.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
opacity: 0;
pointer-events: none;
}
/**
* There is a bug in Safari where changing
* the opacity of an element in a scrollable container
* while rubber-banding causes the scroll position
* to jump to the top
*/
.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,
.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
visibility: hidden;
}