codecheck

1
// core
2
.p-image-mask {
3
    display: flex;
4
    align-items: center;
5
    justify-content: center;
6
}
7

8
.p-image-preview-container {
9
    position: relative;
10
    display: inline-block;
11
    line-height: 0;
12
}
13

14
.p-image-preview-indicator {
15
    position: absolute;
16
    left: 0;
17
    top: 0;
18
    width: 100%;
19
    height: 100%;
20
    display: flex;
21
    align-items: center;
22
    justify-content: center;
23
    opacity: 0;
24
    transition: opacity 0.3s;
25
    border: none;
26
    padding: 0;
27
}
28

29
.p-image-preview-container:hover > .p-image-preview-indicator {
30
    opacity: 1;
31
    cursor: pointer;
32
}
33

34
.p-image-preview-container > img {
35
    cursor: pointer;
36
}
37

38
.p-image-toolbar {
39
    position: absolute;
40
    top: 0;
41
    right: 0;
42
    display: flex;
43
    z-index: 1;
44
}
45

46
.p-image-action.p-link {
47
    display: flex;
48
    justify-content: center;
49
    align-items: center;
50
}
51

52
.p-image-action.p-disabled {
53
    pointer-events: auto;
54
}
55

56
.p-image-preview {
57
    transition: transform 0.15s;
58
    max-width: 100vw;
59
    max-height: 100vh;
60
}
61

62
.p-image-preview-enter-active {
63
    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
64
}
65
.p-image-preview-leave-active {
66
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
67
}
68
.p-image-preview-enter-from,
69
.p-image-preview-leave-to {
70
    opacity: 0;
71
    transform: scale(0.7);
72
}
73

74
// theme
75
.p-image-mask {
76
    --maskbg: #{$imageMaskBg};
77
}
78

79
.p-image-preview-indicator {
80
    background-color: transparent;
81
    color: $imagePreviewIndicatorColor;
82
    transition: $actionIconTransition;
83

84
    .p-icon {
85
        width: $imagePreviewActionIconFontSize;
86
        height: $imagePreviewActionIconFontSize;
87
    }
88
}
89

90
.p-image-preview-container {
91
    &:hover {
92
        > .p-image-preview-indicator {
93
            background-color: $imagePreviewIndicatorBg;
94
        }
95
    }
96
}
97

98
.p-image-toolbar {
99
    padding: $imagePreviewToolbarPadding;
100
}
101

102
.p-image-action.p-link {
103
    color: $imagePreviewActionIconColor;
104
    background-color: $imagePreviewActionIconBg;
105
    width: $imagePreviewActionIconWidth;
106
    height: $imagePreviewActionIconHeight;
107
    border-radius: $imagePreviewActionIconBorderRadius;
108
    transition: $actionIconTransition;
109
    margin-right: $inlineSpacing;
110

111
    &:last-child {
112
        margin-right: 0;
113
    }
114

115
    &:hover {
116
        color: $imagePreviewActionIconHoverColor;
117
        background-color: $imagePreviewActionIconHoverBg;
118
    }
119

120
    i {
121
        font-size: $imagePreviewActionIconFontSize;
122
    }
123

124
    .p-icon {
125
        width: $imagePreviewActionIconFontSize;
126
        height: $imagePreviewActionIconFontSize;
127
    }
128
}