codecheck

1
// core
2
.p-sidebar-mask {
3
    display: none;
4
    pointer-events: none;
5
    background-color: transparent;
6
    transition-property: background-color;
7
}
8

9
.p-sidebar-mask.p-component-overlay {
10
    pointer-events: auto;
11
}
12

13
.p-sidebar-visible {
14
    display: flex;
15
}
16

17
.p-sidebar {
18
    display: flex;
19
    flex-direction: column;
20
    pointer-events: auto;
21
    transform: translate3d(0px, 0px, 0px);
22
    position: relative;
23
    transition: transform 0.3s;
24
}
25

26
.p-sidebar-content {
27
    overflow-y: auto;
28
    flex-grow: 1;
29
}
30

31
.p-sidebar-header {
32
    display: flex;
33
    align-items: center;
34
    justify-content: space-between;
35
    flex-shrink: 0;
36
}
37

38
.p-sidebar-icon {
39
    display: flex;
40
    align-items: center;
41
    justify-content: center;
42
    overflow: hidden;
43
    position: relative;
44
}
45

46
.p-sidebar-full .p-sidebar {
47
    transition: none;
48
    transform: none;
49
    width: 100vw !important;
50
    height: 100vh !important;
51
    max-height: 100%;
52
    top: 0px !important;
53
    left: 0px !important;
54
}
55

56
/* Animation */
57
/* Center */
58
.p-sidebar-left .p-sidebar-enter-from,
59
.p-sidebar-left .p-sidebar-leave-to {
60
    transform: translateX(-100%);
61
}
62
.p-sidebar-right .p-sidebar-enter-from,
63
.p-sidebar-right .p-sidebar-leave-to {
64
    transform: translateX(100%);
65
}
66
.p-sidebar-top .p-sidebar-enter-from,
67
.p-sidebar-top .p-sidebar-leave-to {
68
    transform: translateY(-100%);
69
}
70
.p-sidebar-bottom .p-sidebar-enter-from,
71
.p-sidebar-bottom .p-sidebar-leave-to {
72
    transform: translateY(100%);
73
}
74
.p-sidebar-full .p-sidebar-enter-from,
75
.p-sidebar-full .p-sidebar-leave-to {
76
    opacity: 0;
77
}
78
.p-sidebar-full .p-sidebar-enter-active,
79
.p-sidebar-full .p-sidebar-leave-active {
80
    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
81
}
82

83
/* Size */
84
.p-sidebar-left .p-sidebar {
85
    width: 20rem;
86
    height: 100%;
87
}
88

89
.p-sidebar-right .p-sidebar {
90
    width: 20rem;
91
    height: 100%;
92
}
93

94
.p-sidebar-top .p-sidebar {
95
    height: 10rem;
96
    width: 100%;
97
}
98

99
.p-sidebar-bottom .p-sidebar {
100
    height: 10rem;
101
    width: 100%;
102
}
103

104
.p-sidebar-left .p-sidebar-sm,
105
.p-sidebar-right .p-sidebar-sm {
106
    width: 20rem;
107
}
108

109
.p-sidebar-left .p-sidebar-md,
110
.p-sidebar-right .p-sidebar-md {
111
    width: 40rem;
112
}
113

114
.p-sidebar-left .p-sidebar-lg,
115
.p-sidebar-right .p-sidebar-lg {
116
    width: 60rem;
117
}
118

119
.p-sidebar-top .p-sidebar-sm,
120
.p-sidebar-bottom .p-sidebar-sm {
121
    height: 10rem;
122
}
123

124
.p-sidebar-top .p-sidebar-md,
125
.p-sidebar-bottom .p-sidebar-md {
126
    height: 20rem;
127
}
128

129
.p-sidebar-top .p-sidebar-lg,
130
.p-sidebar-bottom .p-sidebar-lg {
131
    height: 30rem;
132
}
133

134
.p-sidebar-left .p-sidebar-content,
135
.p-sidebar-right .p-sidebar-content,
136
.p-sidebar-top .p-sidebar-content,
137
.p-sidebar-bottom .p-sidebar-content {
138
    width: 100%;
139
    height: 100%;
140
}
141

142
@media screen and (max-width: 64em) {
143
    .p-sidebar-left .p-sidebar-lg,
144
    .p-sidebar-left .p-sidebar-md,
145
    .p-sidebar-right .p-sidebar-lg,
146
    .p-sidebar-right .p-sidebar-md {
147
        width: 20rem;
148
    }
149
}
150

151
// theme
152
.p-sidebar {
153
    background: $overlayContentBg;
154
    color: $panelContentTextColor;
155
    border: $overlayContentBorder;
156
    box-shadow: $overlayContainerShadow;
157

158
    .p-sidebar-header {
159
        padding: $panelHeaderPadding;
160

161
        .p-sidebar-header-content {
162
            font-weight: $dialogHeaderFontWeight;
163
            font-size: $dialogHeaderFontSize;
164
        }
165

166
        .p-sidebar-close,
167
        .p-sidebar-icon {
168
            @include action-icon();
169
        }
170

171
        & + .p-sidebar-content {
172
            padding-top: 0;
173
        }
174
    }
175

176
    .p-sidebar-content {
177
        padding: $panelContentPadding;
178
    }
179
}