codecheck

1
// core
2
.p-component, .p-component * {
3
    box-sizing: border-box;
4
}
5

6
.p-hidden-space {
7
    visibility: hidden;
8
}
9

10
.p-reset {
11
    margin: 0;
12
    padding: 0;
13
    border: 0;
14
    outline: 0;
15
    text-decoration: none;
16
    font-size: 100%;
17
    list-style: none;
18
}
19

20
.p-disabled, .p-disabled * {
21
    cursor: default;
22
    pointer-events: none;
23
    user-select: none;
24
}
25

26
.p-component-overlay {
27
    position: fixed;
28
    top: 0;
29
    left: 0;
30
    width: 100%;
31
    height: 100%;
32
}
33

34
.p-unselectable-text {
35
    user-select: none;
36
}
37

38
.p-sr-only {
39
    border: 0;
40
    clip: rect(1px, 1px, 1px, 1px);
41
    clip-path: inset(50%);
42
    height: 1px;
43
    margin: -1px;
44
    overflow: hidden;
45
    padding: 0;
46
    position: absolute;
47
    width: 1px;
48
    word-wrap: normal;
49
}
50

51
.p-link {
52
	text-align: left;
53
	background-color: transparent;
54
	margin: 0;
55
	padding: 0;
56
	border: none;
57
    cursor: pointer;
58
    user-select: none;
59
}
60

61
.p-link:disabled {
62
	cursor: default;
63
}
64

65
/* Non vue overlay animations */
66
.p-connected-overlay {
67
    opacity: 0;
68
    transform: scaleY(0.8);
69
    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
70
}
71

72
.p-connected-overlay-visible {
73
    opacity: 1;
74
    transform: scaleY(1);
75
}
76

77
.p-connected-overlay-hidden {
78
    opacity: 0;
79
    transform: scaleY(1);
80
    transition: opacity .1s linear;
81
}
82

83
/* Vue based overlay animations */
84
.p-connected-overlay-enter-from {
85
    opacity: 0;
86
    transform: scaleY(0.8);
87
}
88

89
.p-connected-overlay-leave-to {
90
    opacity: 0;
91
}
92

93
.p-connected-overlay-enter-active {
94
    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
95
}
96

97
.p-connected-overlay-leave-active {
98
    transition: opacity .1s linear;
99
}
100

101
/* Toggleable Content */
102
.p-toggleable-content-enter-from,
103
.p-toggleable-content-leave-to {
104
    max-height: 0;
105
}
106

107
.p-toggleable-content-enter-to,
108
.p-toggleable-content-leave-from {
109
    max-height: 1000px;
110
}
111

112
.p-toggleable-content-leave-active {
113
    overflow: hidden;
114
    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
115
}
116

117
.p-toggleable-content-enter-active {
118
    overflow: hidden;
119
    transition: max-height 1s ease-in-out;
120
}
121

122
// theme
123
* {
124
	box-sizing: border-box;
125
}
126

127
.p-component {
128
    font-family: var(--font-family);
129
    font-feature-settings: var(--font-feature-settings, normal);
130
    font-size: $fontSize;
131
    font-weight: $fontWeight;
132
}
133

134
.p-component-overlay {
135
    background-color: $maskBg;
136
    transition-duration: $transitionDuration;
137
}
138

139
.p-disabled, .p-component:disabled {
140
    opacity: $disabledOpacity;
141
}
142

143
.p-error {
144
    color: $errorColor;
145
}
146

147
.p-text-secondary {
148
    color: $textSecondaryColor;
149
}
150

151
.pi {
152
    font-size: $primeIconFontSize;
153
}
154

155
.p-icon {
156
    width: $primeIconFontSize;
157
    height: $primeIconFontSize;
158
}
159

160
.p-link {
161
    font-family: var(--font-family);
162
    font-feature-settings: var(--font-feature-settings, normal);
163
    font-size: $fontSize;
164
    border-radius: $borderRadius;
165
    outline-color: transparent;
166

167
    &:focus-visible {
168
        @include focused();
169
    }
170
}
171

172
.p-component-overlay-enter {
173
    animation: p-component-overlay-enter-animation 150ms forwards;
174
}
175

176
.p-component-overlay-leave {
177
    animation: p-component-overlay-leave-animation 150ms forwards;
178
}
179

180
.p-component-overlay {
181
    @keyframes p-component-overlay-enter-animation {
182
        from {
183
            background-color: transparent;
184
        }
185
        to {
186
            background-color: var(--maskbg);
187
        }
188
    }
189
    
190
    @keyframes p-component-overlay-leave-animation {
191
        from {
192
            background-color: var(--maskbg);
193
        }
194
        to {
195
            background-color: transparent;
196
        }
197
    }
198
}
199