1/**
2 * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
3 *
4 * @author John Molakvoæ <skjnldsv@protonmail.com>
5 *
6 * @license GNU AGPL version 3 or any later version
7 *
8 * This program is free software: you can redistribute it and/or modify
9 * it under the terms of the GNU Affero General Public License as
10 * published by the Free Software Foundation, either version 3 of the
11 * License, or (at your option) any later version.
12 *
13 * This program is distributed in the hope that it will be useful,
14 * but WITHOUT ANY WARRANTY; without even the implied warranty of
15 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
16 * GNU Affero General Public License for more details.
17 *
18 * You should have received a copy of the GNU Affero General Public License
19 * along with this program. If not, see <http://www.gnu.org/licenses/>.
20 *
21 */
22$property-label-min-width: 60px;
23$property-label-max-width: 2 * $property-label-min-width;
24$property-value-max-width: 250px;
25$property-ext-padding-right: 8px;
26
27.property {
28	position: relative;
29	width: 100%;
30	// we need this to keep the alignment of the ext and delete/action button
31	// The flex grow will never go over those values. Therefore we can set
32	// the max width and keep the right alignment
33	max-width: $property-label-max-width + $property-value-max-width + 44px;
34
35	justify-self: center;
36
37	&--last {
38		margin-bottom: $grid-height-unit;
39	}
40	// no delete/action icon on addressbook selector
41	&--addressbooks &__actions {
42		display: none !important;
43	}
44
45	&--without-actions {
46		padding-right: 44px; // actions menu / button
47	}
48
49	// property row
50	&__row {
51		position: relative;
52		display: flex;
53		align-items: center;
54	}
55
56	// property label or multiselect within row
57	&__label,
58	&__label.multiselect {
59		flex: 1 0; // min width is 60px, let's grow until 120px
60		width: $property-label-min-width;
61		min-width: $property-label-min-width !important; // override multiselect
62		max-width: $property-label-max-width;
63		height: $grid-input-height-with-margin;
64		margin: $grid-input-margin 5px $grid-input-margin 0 !important; // override multiselect
65		user-select: none;
66		text-align: right;
67		background-size: 16px;
68		line-height: $grid-input-height-with-margin + 1px;
69
70		&,
71		.multiselect__input {
72			&::placeholder {
73				text-align: right;
74			}
75			+ .multiselect__single {
76				overflow: hidden;
77				white-space: nowrap;
78				text-overflow: ellipsis;
79			}
80		}
81
82		&:not(.multiselect) {
83			overflow: hidden;
84			overflow-x: hidden;
85			white-space: nowrap;
86			text-overflow: ellipsis;
87			opacity: .7;
88		}
89
90		// mouse feedback
91		.multiselect__tags {
92			opacity: .7;
93		}
94		&:hover,
95		&:focus,
96		&:active {
97			.multiselect__tags {
98				opacity: 1;
99				border-color: var(--color-border-dark);
100			}
101		}
102
103		// read-only mode
104		&.multiselect--disabled {
105			&, .multiselect__single {
106				&, &:hover, &:focus &:active {
107					border-color: transparent !important;
108					background-color: var(--color-main-background) !important;
109				}
110			}
111		}
112	}
113
114	&__label.multiselect {
115		.multiselect__tags {
116			border: none !important; // override multiselect
117			.multiselect__single {
118				padding-right: 24px;
119				background-repeat: no-repeat;
120				background-position: center right 4px;
121			}
122		}
123		.multiselect__content-wrapper {
124			right: 0; // align right
125			width: auto !important; // grow bigger if content is bigger than the original 100%
126			min-width: $property-label-max-width; // improve readability on narrow screens
127		}
128		@media only screen and (max-width: 768px) {
129			// align left of screen on narrow views
130			.multiselect__content-wrapper {
131				right: auto;
132				left: 0;
133			}
134		}
135	}
136
137	// Hide delete buttons initially
138	.action-item.icon-delete {
139		opacity: 0;
140	}
141
142	// Property value within row, after label
143	&__value {
144		flex: 1 1;
145
146		textarea& {
147			align-self: flex-start;
148			min-height: 2 * $grid-height-unit - 2*$grid-input-margin;
149			max-height: 5 * $grid-height-unit - 2*$grid-input-margin;
150		}
151
152		// read-only mode
153		&:read-only {
154			border-color: var(--color-border-dark);
155		}
156		input&--with-ext {
157			// ext icon width + 8px padding
158			padding-right: 24px;
159		}
160
161		// Show ext and delete icon permanently on focus
162		&:hover,
163		&:focus,
164		&:active {
165			~ .property__ext,
166			~ .action-item.icon-delete {
167				opacity: .5;
168			}
169		}
170	}
171
172	// Show ext and delete buttons on full row hover
173	&:hover {
174		.property__ext,
175		.action-item {
176			opacity: .5;
177		}
178	}
179
180	// External link (tel, mailto, http, ftp...)
181	&__ext {
182		position: absolute;
183		// 8px padding + actions
184		right: 44px + $property-ext-padding-right;
185		opacity: 0;
186		&:hover,
187		&:focus,
188		&:active {
189			opacity: .7;
190		}
191	}
192
193	.no-move {
194		right: $property-ext-padding-right;
195	}
196
197	// Delete property button + actions
198	&__actions {
199		z-index: 10;
200		margin-left: auto !important;
201		// floating actions next to the title
202		&--floating {
203			position: absolute !important;
204			right: 0;
205			bottom: 0;
206		}
207	}
208	.property__value {
209		margin-right: 0;
210	}
211}
212