codecheck

1
@mixin icon-override($icon) {
2
	&:before {
3
		content: $icon;
4
	}
5
}
6

7
@mixin focused() {
8
	outline: $focusOutline;
9
    outline-offset: $focusOutlineOffset;
10
    box-shadow: $focusShadow;
11
}
12

13
@mixin focused-inset() {
14
	outline: $focusOutline;
15
    outline-offset: -1 * $focusOutlineOffset;
16
    box-shadow: inset $focusShadow;
17
}
18

19
@mixin focused-input() {
20
	outline: $focusOutline;
21
    outline-offset: $inputFocusOutlineOffset;
22
    box-shadow: $focusShadow;
23
	border-color: $inputFocusBorderColor;
24
}
25

26
@mixin focused-listitem() {
27
	outline: $focusOutline;
28
    outline-offset: $focusOutlineOffset;
29
    box-shadow: $inputListItemFocusShadow;
30
}
31

32
@mixin invalid-input() {
33
	border-color: $inputErrorBorderColor;
34
}
35

36
@mixin menuitem {
37
    margin: $inputListItemMargin;
38

39
    &:first-child {
40
        margin-top: 0;
41
    }
42

43
    &:last-child {
44
        margin-bottom: 0;
45
    }
46
    
47
    > .p-menuitem-content {
48
        color: $menuitemTextColor;
49
        transition: $listItemTransition;
50
        border-radius: $menuitemBorderRadius;
51

52
        .p-menuitem-link {
53
            color: $menuitemTextColor;
54
            padding: $menuitemPadding;
55
            user-select: none;
56

57
            .p-menuitem-text {
58
                color: $menuitemTextColor;
59
            }
60
        
61
            .p-menuitem-icon {
62
                color: $menuitemIconColor;
63
                margin-right: $inlineSpacing;
64
            }
65
            
66
            .p-submenu-icon {
67
                color: $menuitemIconColor;
68
            }
69
        }
70
    }
71

72
    &.p-highlight {
73
        > .p-menuitem-content {
74
            color: $menuitemTextActiveColor;
75
            background: $menuitemActiveBg;
76

77
            .p-menuitem-link {
78
                .p-menuitem-text {
79
                    color: $menuitemTextActiveColor;
80
                }
81

82
                .p-menuitem-icon, .p-submenu-icon {
83
                    color: $menuitemIconActiveColor;
84
                }
85
            }
86
        }
87

88
        &.p-focus {
89
            > .p-menuitem-content {
90
                background: $menuitemActiveFocusBg;
91
            }
92
        }
93
    }
94

95
    &:not(.p-highlight):not(.p-disabled) {
96
        &.p-focus {
97
            > .p-menuitem-content {
98
                color: $menuitemTextHoverColor;
99
                background: $menuitemHoverBg;
100
    
101
                .p-menuitem-link {
102
                    .p-menuitem-text {
103
                        color: $menuitemTextHoverColor;
104
                    }
105
                
106
                    .p-menuitem-icon, .p-submenu-icon {
107
                        color: $menuitemTextHoverColor;
108
                    }
109
                }
110

111
                &:hover {
112
                    color: $menuitemTextHoverColor;
113
                    background: $menuitemHoverBg;
114
        
115
                    .p-menuitem-link {
116
                        .p-menuitem-text {
117
                            color: $menuitemTextHoverColor;
118
                        }
119
        
120
                        .p-menuitem-icon, .p-submenu-icon {
121
                            color: $menuitemIconHoverColor;
122
                        }
123
                    }
124
                }
125
            }
126
        }
127

128
        > .p-menuitem-content {
129
            &:hover {
130
                color: $menuitemTextHoverColor;
131
                background: $menuitemHoverBg;
132
    
133
                .p-menuitem-link {
134
                    .p-menuitem-text {
135
                        color: $menuitemTextHoverColor;
136
                    }
137
    
138
                    .p-menuitem-icon, .p-submenu-icon {
139
                        color: $menuitemIconHoverColor;
140
                    }
141
                }
142
            }
143
        }
144
    }
145
}
146

147
@mixin horizontal-rootmenuitem {
148
    > .p-menuitem-content {
149
        color: $horizontalMenuRootMenuitemTextColor;
150
        transition: $listItemTransition;
151
        border-radius: $horizontalMenuRootMenuitemBorderRadius;
152

153
        .p-menuitem-link {
154
            padding: $horizontalMenuRootMenuitemPadding;
155
            user-select: none;
156

157
            .p-menuitem-text {
158
                color: $horizontalMenuRootMenuitemTextColor;
159
            }
160
        
161
            .p-menuitem-icon {
162
                color: $horizontalMenuRootMenuitemIconColor;
163
                margin-right: $inlineSpacing;
164
            }
165
            
166
            .p-submenu-icon {
167
                color: $horizontalMenuRootMenuitemIconColor;
168
                margin-left: $inlineSpacing;
169
            }
170
        }
171
    }
172

173
    &:not(.p-highlight):not(.p-disabled) {
174
        > .p-menuitem-content {
175
            &:hover {
176
                color: $horizontalMenuRootMenuitemTextHoverColor;
177
                background: $horizontalMenuRootMenuitemHoverBg;
178
    
179
                .p-menuitem-link {
180
                    .p-menuitem-text {
181
                        color: $horizontalMenuRootMenuitemTextHoverColor;
182
                    }
183
    
184
                    .p-menuitem-icon, .p-submenu-icon {
185
                        color: $horizontalMenuRootMenuitemIconHoverColor;
186
                    }
187
                }
188
            }
189
        }
190
    }
191
}
192

193
@mixin placeholder {
194
	::-webkit-input-placeholder {
195
		@content
196
	}
197
	:-moz-placeholder {
198
		@content
199
	}
200
	::-moz-placeholder {
201
		@content
202
	}
203
	:-ms-input-placeholder {
204
		@content
205
	}
206
}
207

208
@mixin scaledPadding($val, $scale) {
209
    padding: nth($val, 1) * $scale nth($val, 2) * $scale;
210
}
211

212
@mixin scaledFontSize($val, $scale) {
213
    font-size: $val * $scale;
214
}
215

216
@mixin nested-submenu-indents($val, $index, $length) {
217
    .p-submenu-list {
218
        .p-menuitem {
219
            .p-menuitem-content {
220
                .p-menuitem-link {
221
                    padding-left: $val * ($index + 1);
222
                }
223
    
224
            }
225
            @if $index < $length {
226
                @include nested-submenu-indents($val, $index + 2, $length);
227
            }
228
        }
229
    }
230
}
231

232
@mixin action-icon($enabled: true) {
233
    width: $actionIconWidth;
234
    height: $actionIconHeight;
235
    color: $actionIconColor;
236
    border: $actionIconBorder;
237
    background: $actionIconBg;
238
    border-radius: $actionIconBorderRadius;
239
    transition: $actionIconTransition;
240
    outline-color: transparent;
241

242
    @if $enabled {
243
        &:enabled:hover {
244
            @include action-icon-hover();
245
        }
246
    } @else {
247
        &:hover {
248
            @include action-icon-hover();
249
        }
250
    }
251

252
    &:focus-visible {
253
        @include focused();
254
    }
255
}
256

257
@mixin action-icon-hover() {
258
    color: $actionIconHoverColor;
259
    border-color: $actionIconHoverBorderColor;
260
    background: $actionIconHoverBg;
261
}
262

263
@mixin button-states {
264
    // <button> and <a> tags support :enabled selector.
265

266
    &:enabled,
267
    &:not(button):not(a):not(.p-disabled) {
268
        @content;
269
    }
270
}
271

272
@function tint($color, $percentage) {
273
    @return mix(#fff, $color, $percentage);
274
}
275

276
@function shade($color, $percentage) {
277
    @return mix(#000, $color, $percentage);
278
}