Unify grid height with 40px

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

1 files changed, 460 insertions, 0 deletions

diff --git a/css/_details.scss.orig b/css/_details.scss.orig
new file mode 100644
index 00000000..9a659452
--- /dev/null
+++ b/css/_details.scss.orig
@@ -0,0 +1,460 @@
+.contact-details-wrapper {
+	position: relative;
+	background: $color-main-background;
+	min-height: 100%;
+}
+
+.wrapper-show {
+	z-index: 201;
+}
+
+@media only screen and (max-width: 768px) {
+	.wrapper-show:not(.mobile-show) {
+		display: none;
+	}
+}
+
+.contactdetails__header {
+	height: 100px;
+	padding-left: 44px;
+	display: flex;
+	font-weight: bold;
+	align-items: center;
+}
+
+.contactdetails__header #details-contact-infos {
+	width: 80%;
+	margin: 2px 6px 0;
+	flex-grow: 1;
+}
+
+.contactdetails__header h2 {
+	margin: 0;
+}
+
+.contactdetails__header #details-org-container {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.contactdetails__header input[type=text]:active {
+	background: transparent !important; /* remove :active effect */
+}
+
+.contactdetails__header .contactdetails__name,
+.contactdetails__header .contactdetails__org,
+.contactdetails__header .contactdetails__title {
+	font-size: inherit;
+	/* Override focus, active & hover! */
+	color: #fff !important; /* No vars used on purpose since we use custom BGs */
+	text-shadow: 0 0 2px rgba(0, 0, 0, .2); // better readability on bright background colors
+	background: transparent;
+	border: none;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+	max-width: 100%;
+	margin: 0;
+	padding: 4px 5px;
+}
+
+.contactdetails__header .contactdetails__org,
+.contactdetails__header .contactdetails__title {
+	max-width: 50%;
+	min-width: 150px;
+}
+
+.contactdetails__header .contactdetails__name {
+	width: 100%;
+}
+
+.contactdetails__header #details-actions {
+	display: flex;
+	flex-shrink: 0;
+}
+
+.contactdetails__header #contact-failed-save {
+	animation: pulse 1.5s infinite;
+	border-radius: 50%;
+}
+
+/* fix placeholder color */
+.contactdetails__header .contactdetails__name::-webkit-input-placeholder,
+.contactdetails__header .contactdetails__org::-webkit-input-placeholder,
+.contactdetails__header .contactdetails__title::-webkit-input-placeholder { /* WebKit, Blink, Edge */
+	color: #fff; /* No vars used on purpose since we use custom BGs */
+	opacity: .8;
+}
+
+.contactdetails__header .contactdetails__name::-moz-placeholder,
+.contactdetails__header .contactdetails__org::-moz-placeholder,
+.contactdetails__header .contactdetails__title::-moz-placeholder { /* Mozilla Firefox 19+ */
+	color: #fff; /* No vars used on purpose since we use custom BGs */
+	opacity: .8;
+}
+
+.contactdetails__header .contactdetails__name:-ms-input-placeholder,
+.contactdetails__header .contactdetails__org:-ms-input-placeholder,
+.contactdetails__header .contactdetails__title:-ms-input-placeholder { /* Internet Explorer 10-11 */
+	color: #fff; /* No vars used on purpose since we use custom BGs */
+	opacity: .8;
+}
+
+.contactdetails__header .contactdetails__name:placeholder-shown,
+.contactdetails__header .contactdetails__org:placeholder-shown,
+.contactdetails__header .contactdetails__title:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
+	color: #fff; /* No vars used on purpose since we use custom BGs */
+	opacity: .8;
+}
+
+.contactdetails__header #details-actions a,
+.contactdetails__header #details-actions button {
+	padding: 15px;
+	background-color: transparent;
+	border: none;
+	opacity: .5;
+	margin: 3px;
+}
+
+.contactdetails__header #details-actions a:hover,
+.contactdetails__header #details-actions button:hover,
+.contactdetails__header #details-actions a:focus,
+.contactdetails__header #details-actions button:focus {
+	opacity: .7;
+}
+
+avatar {
+	position: relative;
+	height: 75px;
+	width: 75px;
+	border-radius: 50%;
+	overflow: hidden;
+	flex-shrink: 0;
+}
+
+.contactdetails__logo {
+	height: 75px;
+	width: 75px;
+	object-fit: cover;
+	background-color: transparent;
+	margin: 0;
+	cursor: pointer;
+}
+
+.avatar-options {
+	top: 0;
+	background-color: rgba(0, 0, 0, 0.2);
+	display: none;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
+
+.avatar-options > [class^="icon-"] {
+	display: none;
+	opacity: 0.5;
+	cursor: pointer;
+	min-width: 20px;
+	min-height: 20px;
+}
+
+.avatar-options:hover > [class^="icon-"] {
+	opacity: 0.6;
+}
+
+.avatar-options > [class^="icon-"]:hover {
+	opacity: 0.8;
+}
+
+avatar.avatar--missing .avatar-options {
+	display: flex;
+	border-radius: 50%;
+}
+
+avatar:not(.maximized).avatar--missing .avatar-options .icon-upload-white {
+	display: block;
+	width: 100%;
+	height: 100%;
+}
+
+avatar.maximized {
+	position: fixed;
+	height: 100%;
+	width: 100%;
+	top: 0;
+	left: 0;
+	border-radius: 0;
+	padding: 20px;
+	background-color: rgba(0, 0, 0, 0.9);
+	display: flex;
+	justify-content: center;
+	z-index: 200;
+	padding-top: 65px; /* Nextcloud header */
+}
+
+avatar.maximized img {
+	width: auto;
+	height: auto;
+	border-radius: 0;
+	max-height: calc(100% - 40px);
+	max-width: 100%;
+	align-self: center;
+	margin-bottom: 40px;
+}
+
+avatar.maximized .avatar-options {
+	height: 40px;
+	position: absolute;
+	top: calc(100% - 40px);
+	left: 0;
+	display: flex;
+	opacity: 1;
+	padding: 0;
+	flex-wrap: wrap;
+	justify-content: space-around;
+}
+
+avatar.maximized .avatar-options > [class^="icon-"] {
+	min-width: 25%;
+	display: block;
+}
+
+.contactdetails__header + section {
+	padding: 20px 20px 100px;
+}
+
+/* GRID */
+$grid-height-unit: 40px;
+$grid-input-padding: 7px;
+$grid-input-margin: 3px;
+$grid-input-height-with-margin: calc(#{$grid-height-unit} - (#{$grid-input-margin} * 2));
+
+@media screen and (min-width: 1380px) {
+	section {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		grid-column-gap: 20px;
+	}
+}
+
+/* General details item styles */
+contactdetails {
+	select, button, input, textarea {
+		&:disabled {
+			background-color: transparent !important;
+			border-color: transparent !important;
+			opacity: 1 !important;
+			color: #545454 !important;
+		}
+	}
+
+	detailsitem > select:disabled {
+		background-image: none !important;
+		&:first-child {
+			opacity: 0.5 !important;
+			color: inherit !important;
+		}
+	}
+}
+
+propertygroup {
+	display: block;
+	padding-bottom: $grid-height-unit;
+	.propertyGroup__title {
+		display: flex;
+		align-items: center;
+		height: $grid-height-unit;
+		padding: calc(#{$grid-height-unit} / 4);
+		margin: 0;
+		margin-left: 68px;
+		opacity: .6;
+		i {
+			display: block;
+			vertical-align: middle;
+			background-size: 16px 16px;
+			margin-right: 8px;
+			opacity: .5;
+		}
+	}
+}
+
+
+detailsitem input[type="tel"],
+detailsitem input[type="email"],
+detailsitem input[type="text"],
+detailsitem input[type="url"],
+detailsitem textarea,
+.select-addressbook select,
+.add-field {
+	width: 245px;
+	flex-grow: 1;
+	margin: $grid-input-margin;
+	height: $grid-input-height-with-margin;
+	padding: $grid-input-padding;
+}
+
+.add-field {
+	margin-left: 106px;
+}
+
+detailsitem label,
+.select-addressbook label {
+	margin: $grid-input-margin;
+	margin-left: 0;
+	display: inline-block;
+	width: 100px;
+	height: $grid-input-height-with-margin;
+	padding: $grid-input-padding 0;
+	text-align: right;
+	opacity: .5;
+	white-space: nowrap;
+	overflow: hidden;
+	overflow-x: hidden;
+	text-overflow: ellipsis;
+	vertical-align: middle;
+}
+
+detailsitem {
+	display: flex;
+	flex-wrap: wrap;
+	position: relative;
+	width: 380px;
+	> div {
+		display: inline-flex;
+	}
+	select {
+		width: 100px;
+		height: $grid-input-height-with-margin;
+		padding: $grid-input-padding;
+		margin: $grid-input-margin;
+		margin-left: 0;
+		border: none;
+		text-align: right;
+		text-align-last: right;
+		opacity: .5;
+		color: $color-main-text;
+		outline: none;
+		&:hover,
+		&:focus,
+		&:active {
+			opacity: 1;
+		}
+	}
+
+<<<<<<< HEAD
+detailsitem .item-action {
+	position: absolute;
+	padding: 10px 5px;
+	opacity: .5;
+	right: 30px;
+}
+=======
+	& .icon-delete {
+		position: relative;
+		vertical-align: top;
+		padding: 16px 10px;
+		background-color: transparent;
+		border: none;
+		opacity: 0;
+	}
+>>>>>>> Unify grid height with 40px
+
+	& input:hover + .icon-delete,
+	& input:focus + .icon-delete,
+	& input:active + .icon-delete,
+	& select:hover + .icon-delete,
+	& select:focus + .icon-delete,
+	& select:active + .icon-delete,
+	&:hover .icon-delete {
+		opacity: .2;
+	}
+
+	& .icon-delete:hover,
+	& .icon-delete:focus,
+	& .icon-delete:active {
+		opacity: 1;
+	}
+
+	& .item-action {
+		position: absolute;
+		padding: 8px 5px;
+		opacity: .5;
+		right: 30px;
+		~ input {
+			padding-right: 30px;
+			text-overflow: ellipsis;
+		}
+		i {
+			display: block;
+			height: 20px;
+			width: 20px;
+		}
+	}
+
+	&.details-item-adr,
+	&.details-item-n {
+		padding-bottom: $grid-height-unit;
+		.icon-delete {
+			vertical-align: middle;
+			left: 251px;
+		}
+	}
+
+	&.details-item-note label {
+		vertical-align: top;
+	}
+
+	/* Failed props */
+	&.failed {
+		box-shadow: inset 2px 0 $color-error;
+	}
+	textarea {
+		height: calc(#{$grid-input-height-with-margin} + (#{$grid-height-unit} * 4));
+	}
+}
+
+avatar .icon-error {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+}
+
+avatar:not(.maximized) .icon-error + img {
+	opacity: 0.5;
+}
+
+/* Prevent delete for last adr/mail/tel item */
+.last-details > detailsitem.details-item-adr .icon-delete,
+.last-details > detailsitem.details-item-email .icon-delete,
+.last-details > detailsitem.details-item-tel .icon-delete {
+	display: none;
+}
+
+/* SELECT2 styling */
+detailsitem .select2-container {
+	width: 245px;
+}
+
+/* Fix for #81 */
+.select2-container-multi .select2-choices .select2-search-choice {
+	padding-right: 20px;
+}
+
+.select2-container.select2-container-multi .select2-choices span {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close {
+	display: block !important;
+	right: 4px;
+	left: auto;
+	top: 7px;
+}
+
+/* Fix disabled select2 state */
+detailsitem .select2-container[disabled] .select2-choices {
+	border-color: transparent;
+	min-height: 100%;
+	background-color: transparent !important;
+}