blob: 5063a5e1d8a4deb5b21ebd9bff15343d98c1079b [file] [log] [blame]
idillonb0ec86a2022-12-06 17:54:55 -05001/*
2 * Copyright (C) 2022 Savoir-faire Linux Inc.
3 *
4 * This program is free software; you can redistribute it and/or modify
5 * it under the terms of the GNU Affero General Public License as
6 * published by the Free Software Foundation; either version 3 of the
7 * License, or (at your option) any later version.
8 *
9 * This program is distributed in the hope that it will be useful,
10 * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 * GNU Affero General Public License for more details.
13 *
14 * You should have received a copy of the GNU Affero General Public
15 * License along with this program. If not, see
16 * <https://www.gnu.org/licenses/>.
17 */
18import { styled } from '@mui/material';
19
20const OverlayBase = styled('div')({
21 position: 'absolute',
22 width: '100%',
23 height: '100%',
24 zIndex: 100,
25});
26
27export const FileDragOverlay = styled(OverlayBase)({
28 backgroundColor: 'black',
29 opacity: '30%',
30});
31
32type CircleMaskOverlayProps = {
33 // Size in pixels or percentage. The percentage is relative to the length of the diagonal of the box
34 size: string;
35};
36
37export const CircleMaskOverlay = styled(OverlayBase)<CircleMaskOverlayProps>(({ size }) => ({
38 backgroundImage: `radial-gradient(circle at center, rgba(0, 0, 0, 0) ${size}, rgba(0, 0, 0, 0.5) ${size})`,
39}));