forked from ampproject/amphtml
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathamp-app-banner.css
64 lines (57 loc) · 1.51 KB
/
amp-app-banner.css
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
amp-app-banner {
position: fixed !important;
bottom: 0 !important;
left: 0;
width: 100%;
max-height: 100px !important;
box-sizing: border-box;
background: #fff;
z-index: 13;
box-shadow: 0 0 5px 0 rgba(0,0,0, 0.2) !important;
}
i-amphtml-app-banner-top-padding {
position: absolute;
top: 0;
left: 0;
right: 0;
background: #fff;
height: 4px;
/** Must be above the dismiss button to cover bottom shadow */
z-index: 15;
}
.amp-app-banner-dismiss-button {
position: absolute;
width: 28px;
height: 28px;
top: -28px;
right: 0;
background-image: url('data:image/svg+xml;charset=utf-8,<svg width="13" height="13" viewBox="341 8 13 13" xmlns="http://www.w3.org/2000/svg"><path fill="#4F4F4F" d="M354 9.31L352.69 8l-5.19 5.19L342.31 8 341 9.31l5.19 5.19-5.19 5.19 1.31 1.31 5.19-5.19 5.19 5.19 1.31-1.31-5.19-5.19z" fill-rule="evenodd"/></svg>');
background-size: 13px 13px;
background-position: 9px center;
background-color: #fff;
background-repeat: no-repeat;
z-index: 14;
box-shadow: 0 -1px 1px 0 rgba(0,0,0, 0.2);
border: none;
border-radius: 12px 0 0 0;
}
/* Increase tapping area of the dismiss button */
.amp-app-banner-dismiss-button:before {
position: absolute;
content: '';
top: -20px;
right: 0;
left: -20px;
bottom: 0;
}
[dir=rtl] .amp-app-banner-dismiss-button {
right: auto;
left: 0;
border-top-left-radius: 0;
border-top-right-radius: 12px;
background-position: 6px center;
}
[dir=rtl] .amp-app-banner-dismiss-button:before {
right: -20px;
left: 0;
}