Current File : //www/varak.net/nextcloud.varak.net/apps_old/apps/contacts/css/Properties/Properties.scss
/**
* @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
*
* @author John Molakvoæ <skjnldsv@protonmail.com>
* @author Richard Steinmetz <richard@steinmetz.cloud>
*
* @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/>.
*
*/
@import '../ContactDetailsLayout.scss';
$property-label-max-width: $contact-details-label-max-width;
$property-value-max-width: $contact-details-value-max-width;
$property-ext-padding-right: 8px;
$property-row-gap: $contact-details-row-gap;
.property {
width: 100%;
// property title row
&--title {
display: flex;
align-items: center;
gap: $property-row-gap;
}
// property row
&__row {
display: flex;
align-items: center;
gap: $property-row-gap;
// fix default margin from server stylesheet causing slight misalignment
input {
margin-right: 0;
}
}
// property label or multiselect within row
&__label {
// Global single column layout
display: flex;
flex: 0 1 auto;
justify-content: flex-end;
width: $contact-details-label-max-width;
min-width: 0; // Has to be zero unless we implement wrapping
// Text label styling
> :not(.multiselect):not(.material-design-icon) {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
opacity: .7;
}
}
// Property value within row, after label
&__value {
align-items: center;
// Global single column layout
display: flex;
flex: 0 1 auto;
width: $property-value-max-width;
min-width: 0; // Has to be zero unless we implement wrapping
textarea {
// Limit max height to make scrolling the form a bit easier
min-height: 2 * $grid-height-unit - 2*$grid-input-margin;
max-height: 5 * $grid-height-unit - 2*$grid-input-margin;
}
input,
textarea {
width: 100%;
// Remove default input styling for read-only inputs.
// We can't use plain divs because that would cause jumping on switching modes.
&[readonly] {
border: none;
overflow: auto;
outline: none;
resize: none;
padding: 0;
border-radius: 0;
}
}
}
&__label,
&__value {
// Fix default multiselect styling
> .multiselect {
width: 100%;
min-width: unset;
}
// Fix default date time picker styling
> .mx-datepicker {
width: 100%;
}
}
// Mobile tweaks
@media (max-width: 1024px) {
// Left align labels on mobile
&__label {
justify-content: flex-start;
}
}
// Show ext buttons on full row hover
&:hover {
.property__ext {
opacity: .7;
}
}
// External link (tel, mailto, http, ftp...)
&__ext {
opacity: 0;
&:hover,
&:focus {
opacity: .7;
}
}
// Delete property button + actions
&__actions {
z-index: 10;
width: 44px;
}
}
Mini Shell