nextcloud-contacts/css/Properties/Properties.scss

/**
 * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
 *
 * @author John Molakvoæ <skjnldsv@protonmail.com>
 *
 * @license GNU AGPL version 3 or any later version
 *
 * 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/>.
 *
 */
$property-label-min-width: 60px;
$property-label-max-width: 2 * $property-label-min-width;
$property-value-max-width: 250px;
$property-ext-padding-right: 8px;

.property {
	position: relative;
	width: 100%;
	// we need this to keep the alignment of the ext and delete/action button
	// The flex grow will never go over those values. Therefore we can set
	// the max width and keep the right alignment
	max-width: $property-label-max-width + $property-value-max-width + 44px;

	justify-self: center;

	&--last {
		margin-bottom: $grid-height-unit;
	}
	// no delete/action icon on addressbook selector
	&--addressbooks &__actions {
		display: none !important;
	}

	&--without-actions {
		padding-right: 44px; // actions menu / button
	}

	// property row
	&__row {
		position: relative;
		display: flex;
		align-items: center;
	}

	// property label or multiselect within row
	&__label,
	&__label.multiselect {
		flex: 1 0; // min width is 60px, let's grow until 120px
		width: $property-label-min-width;
		min-width: $property-label-min-width !important; // override multiselect
		max-width: $property-label-max-width;
		height: $grid-input-height-with-margin;
		margin: $grid-input-margin 5px $grid-input-margin 0 !important; // override multiselect
		user-select: none;
		text-align: right;
		background-size: 16px;
		line-height: $grid-input-height-with-margin + 1px;

		&,
		.multiselect__input {
			&::placeholder {
				text-align: right;
			}
			+ .multiselect__single {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}

		&:not(.multiselect) {
			overflow: hidden;
			overflow-x: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			opacity: .7;
		}

		// mouse feedback
		.multiselect__tags {
			opacity: .7;
		}
		&:hover,
		&:focus,
		&:active {
			.multiselect__tags {
				opacity: 1;
				border-color: var(--color-border-dark);
			}
		}

		// read-only mode
		&.multiselect--disabled {
			&, .multiselect__single {
				&, &:hover, &:focus &:active {
					border-color: transparent !important;
					background-color: var(--color-main-background) !important;
				}
			}
		}
	}

	&__label.multiselect {
		.multiselect__tags {
			border: none !important; // override multiselect
			.multiselect__single {
				padding-right: 24px;
				background-repeat: no-repeat;
				background-position: center right 4px;
			}
		}
		.multiselect__content-wrapper {
			right: 0; // align right
			width: auto !important; // grow bigger if content is bigger than the original 100%
			min-width: $property-label-max-width; // improve readability on narrow screens
		}
		@media only screen and (max-width: 768px) {
			// align left of screen on narrow views
			.multiselect__content-wrapper {
				right: auto;
				left: 0;
			}
		}
	}

	// Hide delete buttons initially
	.action-item.icon-delete {
		opacity: 0;
	}

	// Property value within row, after label
	&__value {
		flex: 1 1;

		textarea {
			align-self: flex-start;
			min-height: 2 * $grid-height-unit - 2*$grid-input-margin;
			max-height: 5 * $grid-height-unit - 2*$grid-input-margin;
		}

		// read-only mode
		&:read-only {
			border-color: var(--color-border-dark);
		}
		&--with-ext {
			// ext icon width + 8px padding
			padding-right: 24px;
		}

		// Show ext and delete icon permanently on focus
		&:hover,
		&:focus,
		&:active {
			~ .property__ext,
			~ .action-item.icon-delete {
				opacity: .5;
			}
		}
	}

	// Show ext and delete buttons on full row hover
	&:hover {
		.property__ext,
		.action-item {
			opacity: .5;
		}
	}

	// External link (tel, mailto, http, ftp...)
	&__ext {
		position: absolute;
		// 8px padding + actions
		right: 44px + $property-ext-padding-right;
		opacity: 0;
		&:hover,
		&:focus,
		&:active {
			opacity: .7;
		}
	}

	.no-move {
		right: $property-ext-padding-right;
	}

	// Delete property button + actions
	&__actions {
		z-index: 10;
		margin-left: auto !important;
		// floating actions next to the title
		&--floating {
			position: absolute !important;
			right: 0;
			bottom: 0;
		}
	}
	.property__value {
		margin-right: 0;
	}
}