codecheck

1
@use 'sass:math';
2

3
// core
4
.p-speeddial {
5
    position: absolute;
6
    display: flex;
7
}
8

9
.p-speeddial-button {
10
    z-index: 1;
11
}
12

13
.p-speeddial-list {
14
    margin: 0;
15
    padding: 0;
16
    list-style: none;
17
    display: flex;
18
    align-items: center;
19
    justify-content: center;
20
    transition: top 0s linear 0.2s;
21
    pointer-events: none;
22
    z-index: 2;
23
}
24

25
.p-speeddial-item {
26
    transform: scale(0);
27
    opacity: 0;
28
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;
29
    will-change: transform;
30
}
31

32
.p-speeddial-action {
33
    display: flex;
34
    align-items: center;
35
    justify-content: center;
36
    border-radius: 50%;
37
    position: relative;
38
    overflow: hidden;
39
}
40

41
.p-speeddial-circle .p-speeddial-item,
42
.p-speeddial-semi-circle .p-speeddial-item,
43
.p-speeddial-quarter-circle .p-speeddial-item {
44
    position: absolute;
45
}
46

47
.p-speeddial-rotate {
48
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
49
    will-change: transform;
50
}
51

52
.p-speeddial-mask {
53
    position: absolute;
54
    left: 0;
55
    top: 0;
56
    width: 100%;
57
    height: 100%;
58
    opacity: 0;
59
    transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1);
60
}
61

62
.p-speeddial-mask-visible {
63
    pointer-events: none;
64
    opacity: 1;
65
    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
66
}
67

68
.p-speeddial-opened .p-speeddial-list {
69
    pointer-events: auto;
70
}
71

72
.p-speeddial-opened .p-speeddial-item {
73
    transform: scale(1);
74
    opacity: 1;
75
}
76

77
.p-speeddial-opened .p-speeddial-rotate {
78
    transform: rotate(45deg);
79
}
80

81
// theme
82
.p-speeddial-button {
83
    &.p-button.p-button-icon-only {
84
        width: $speedDialButtonWidth;
85
        height: $speedDialButtonHeight;
86

87
        .p-button-icon {
88
            font-size: $speedDialButtonIconFontSize;
89
        }
90

91
        .p-icon {
92
            width: $speedDialButtonIconFontSize;
93
            height: $speedDialButtonIconFontSize;
94
        }
95
    }
96
}
97

98
.p-speeddial-list {
99
    outline: 0 none;
100
}
101

102
.p-speeddial-item {
103
    &.p-focus > .p-speeddial-action {
104
        @include focused();
105
    }
106
}
107

108
.p-speeddial-action {
109
    width: $speedDialActionWidth;
110
    height: $speedDialActionHeight;
111
    background: $speedDialActionBg;
112
    color: $speedDialActionTextColor;
113
    outline-color: transparent;
114
    transition: $actionIconTransition;
115

116
    &:hover {
117
        background: $speedDialActionHoverBg;
118
        color: $speedDialActionTextHoverColor;
119
    }
120
}
121

122
.p-speeddial-direction-up {
123
    .p-speeddial-item {
124
        margin: math.div($inlineSpacing, 2) 0;
125

126
        &:first-child {
127
            margin-bottom: $inlineSpacing;
128
        }
129
    }
130
}
131

132
.p-speeddial-direction-down {
133
    .p-speeddial-item {
134
        margin: math.div($inlineSpacing, 2) 0;
135

136
        &:first-child {
137
            margin-top: $inlineSpacing;
138
        }
139
    }
140
}
141

142
.p-speeddial-direction-left {
143
    .p-speeddial-item {
144
        margin: 0 math.div($inlineSpacing, 2);
145

146
        &:first-child {
147
            margin-right: $inlineSpacing;
148
        }
149
    }
150
}
151

152
.p-speeddial-direction-right {
153
    .p-speeddial-item {
154
        margin: 0 math.div($inlineSpacing, 2);
155

156
        &:first-child {
157
            margin-left: $inlineSpacing;
158
        }
159
    }
160
}
161

162
.p-speeddial-circle,
163
.p-speeddial-semi-circle,
164
.p-speeddial-quarter-circle {
165
    .p-speeddial-item {
166
        margin: 0;
167

168
        &:first-child,
169
        &:last-child {
170
            margin: 0;
171
        }
172
    }
173
}
174

175
.p-speeddial-mask {
176
    background-color: $maskBg;
177
    border-radius: $borderRadius;
178
}