codecheck

1
// core
2
.p-dock {
3
    position: absolute;
4
    z-index: 1;
5
    display: flex;
6
    justify-content: center;
7
    align-items: center;
8
    pointer-events: none;
9
}
10

11
.p-dock-list-container {
12
    display: flex;
13
    pointer-events: auto;
14
}
15

16
.p-dock-list {
17
    margin: 0;
18
    padding: 0;
19
    list-style: none;
20
    display: flex;
21
    align-items: center;
22
    justify-content: center;
23
}
24

25
.p-dock-item {
26
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
27
    will-change: transform;
28
}
29

30
.p-dock-link {
31
    display: flex;
32
    flex-direction: column;
33
    align-items: center;
34
    justify-content: center;
35
    position: relative;
36
    overflow: hidden;
37
    cursor: default;
38
}
39

40
.p-dock-item-second-prev,
41
.p-dock-item-second-next {
42
    transform: scale(1.2);
43
}
44

45
.p-dock-item-prev,
46
.p-dock-item-next {
47
    transform: scale(1.4);
48
}
49

50
.p-dock-item-current {
51
    transform: scale(1.6);
52
    z-index: 1;
53
}
54

55
/* Position */
56
/* top */
57
.p-dock-top {
58
    left: 0;
59
    top: 0;
60
    width: 100%;
61
}
62

63
.p-dock-top .p-dock-item {
64
    transform-origin: center top;
65
}
66

67
/* bottom */
68
.p-dock-bottom {
69
    left: 0;
70
    bottom: 0;
71
    width: 100%;
72
}
73

74
.p-dock-bottom .p-dock-item {
75
    transform-origin: center bottom;
76
}
77

78
/* right */
79
.p-dock-right {
80
    right: 0;
81
    top: 0;
82
    height: 100%;
83
}
84

85
.p-dock-right .p-dock-item {
86
    transform-origin: center right;
87
}
88

89
.p-dock-right .p-dock-list {
90
    flex-direction: column;
91
}
92

93
/* left */
94
.p-dock-left {
95
    left: 0;
96
    top: 0;
97
    height: 100%;
98
}
99

100
.p-dock-left .p-dock-item {
101
    transform-origin: center left;
102
}
103

104
.p-dock-left .p-dock-list {
105
    flex-direction: column;
106
}
107

108
// theme
109
.p-dock {
110
    .p-dock-list-container {
111
        background: $dockBg;
112
        border: $dockBorder;
113
        padding: $dockPadding;
114
        border-radius: $dockBorderRadius;
115

116
        .p-dock-list {
117
            outline: 0 none;
118
        }
119
    }
120
    
121
    .p-dock-item {
122
        padding: $dockItemPadding;
123
        border-radius: $dockItemBorderRadius;
124

125
        &.p-focus {
126
            @include focused-listitem();
127
        }
128
    }
129

130
    .p-dock-link {
131
        width: $dockActionWidth;
132
        height: $dockActionHeight;
133
    }
134
    
135
    &.p-dock-top,
136
    &.p-dock-bottom {
137
        .p-dock-item-second-prev,
138
        .p-dock-item-second-next {
139
            margin: 0 $dockSecondItemsMargin;
140
        }
141

142
        .p-dock-item-prev,
143
        .p-dock-item-next {
144
            margin: 0 $dockFirstItemsMargin;
145
        }
146

147
        .p-dock-item-current {
148
            margin: 0 $dockCurrentItemMargin;
149
        }
150
    }
151

152
    &.p-dock-left,
153
    &.p-dock-right {
154
        .p-dock-item-second-prev,
155
        .p-dock-item-second-next {
156
            margin: $dockSecondItemsMargin 0;
157
        }
158
        
159
        .p-dock-item-prev,
160
        .p-dock-item-next {
161
            margin: $dockFirstItemsMargin 0;
162
        }
163

164
        .p-dock-item-current {
165
            margin: $dockCurrentItemMargin 0;
166
        }
167
    }
168

169
    &.p-dock-mobile {
170
        &.p-dock-top,
171
        &.p-dock-bottom {
172
            .p-dock-list-container {
173
                overflow-x: auto;
174
                width: 100%;
175

176
                .p-dock-list {
177
                    margin: 0 auto;
178
                }
179
            }
180
        }
181

182
        &.p-dock-left,
183
        &.p-dock-right {
184
            .p-dock-list-container {
185
                overflow-y: auto;
186
                height: 100%;
187

188
                .p-dock-list {
189
                    margin: auto 0;
190
                }
191
            }
192
        }
193

194
        .p-dock-list {
195
            .p-dock-item {
196
                transform: none;
197
                margin: 0;
198
            }
199
        }
200
    }
201
}
202