-
Notifications
You must be signed in to change notification settings - Fork 0
/
fancybox.styl
106 lines (102 loc) · 2.4 KB
/
fancybox.styl
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
div.gallery
margin: $gap-p 0
overflow: hidden
$sp = 1px
&+.gallery
margin-top: 0 - $gap-p
>.fancybox,>p>.fancybox
margin: $sp
a
// height: 100%
width: 100%
img
object-fit: cover
// height: 100%
width: 100%
.image-caption
opacity: 0
transform: translateY(100%)
transition: all 0.3s ease
pointer-events: none
position: absolute
width: 100%
bottom: 0
text-align: center
background: rgba(0, 0, 0, 0.3)
color: #fff
&:empty
display:none
&:hover
.image-caption
opacity: 1
transform: translateY(0)
&,>p
display: flex
justify-content: center
align-items: center
flex-wrap: nowrap
padding: 0 !important
align-items: stretch
&[col]
flex-wrap: wrap
justify-content: flex-start
&[col='2']>.fancybox
width: "calc(50% - 2 * %s)" % $sp
&[col='3']>.fancybox
width: "calc(33.33% - 2 * %s)" % $sp
&[col='4']>.fancybox
width: "calc(25% - 2 * %s)" % $sp
&[col='5']>.fancybox
width: "calc(20% - 2 * %s)" % $sp
&[col='6']>.fancybox
width: "calc(16.66% - 2 * %s)" % $sp
&[col='7']>.fancybox
width: "calc(14.2857% - 2 * %s)" % $sp
&[col='8']>.fancybox
width: "calc(12.5% - 2 * %s)" % $sp
>p
margin: 0
&.left,&.left>p
justify-content: flex-start
&.center,&.center>p
justify-content: center
&.right,&.right>p
justify-content: flex-end
&.stretch,&.stretch>p
align-items: stretch
.fancybox-container
.fancybox-stage
cursor: zoom-out
div.fancybox
margin-top: $gap-p
margin-bottom: $gap-p
display: flex
flex-direction: column
justify-content: center
align-items: center
flex-wrap: nowrap
position: relative
overflow: hidden
border-radius: 4px
@media screen and (max-width: $device-mobile)
border-radius: 4px
// position: relative
// width: 100%
a
// background-color: rgb(204, 204, 204)
// padding-bottom: $自适应比例
height: 0
line-height: 0
margin: 0 auto
align-items: stretch
// border-radius: 5px如果设置为4px的话,图片的圆角也许会出现白边,占位图的圆角大小最好大于图片圆角半径
border-radius: 5px
.gallery
overflow: hidden
.image-caption
font-size: $fontsize-code
padding-top: $gap-p * 0.5
padding-bottom: $gap-p
color: var(--color-meta)
&:empty
display: none