summaryrefslogtreecommitdiffstats
path: root/apps/files/src/mixins/fileslist-row.scss
blob: 9ebd8f00b368dac8d3dbb8064afc6995ee3bf5bf (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
/**
 * @copyright Copyright (c) 2023 John Molakvoæ <skjnldsv@protonmail.com>
 *
 * @author John Molakvoæ <skjnldsv@protonmail.com>
 *
 * @license AGPL-3.0-or-later
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 *
 */
td, th {
	display: flex;
	align-items: center;
	flex: 0 0 var(--row-height);
	justify-content: center;
	width: var(--row-height);
	height: var(--row-height);
	padding: 0;
	border: none;
}

.files-list__row-checkbox {
	width: var(--row-height);
	&::v-deep .checkbox-radio-switch {
		display: flex;
		justify-content: center;

		--icon-size: var(--checkbox-size);

		label.checkbox-radio-switch__label {
			width: var(--clickable-area);
			height: var(--clickable-area);
			margin: 0;
			padding: calc((var(--clickable-area) - var(--checkbox-size)) / 2);
		}

		.checkbox-radio-switch__icon {
			margin: 0 !important;
		}
	}
}

.files-list__row-icon {
	flex: 0 0 var(--icon-preview-size);
	justify-content: left;
	// Show same padding as the checkbox right padding for visual balance
	margin-right: var(--checkbox-padding);
	color: var(--color-primary-element);

	& > span {
		justify-content: flex-start;
	}

	&::v-deep svg {
		width: var(--icon-preview-size);
		height: var(--icon-preview-size);
	}

	&-preview {
		width: var(--icon-preview-size);
		height: var(--icon-preview-size);
		// Center and contain the preview
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		border-radius: var(--border-radius);
		overflow: hidden;
	}
}

.files-list__row-name {
	flex: 1 1 100%;
	justify-content: left;
}