diff options
| author | Richard Steinmetz <richard@steinmetz.cloud> | 2023-04-25 14:13:34 +0200 |
|---|---|---|
| committer | Richard Steinmetz <richard@steinmetz.cloud> | 2023-04-25 14:14:36 +0200 |
| commit | f348b2e19c949a916e7b8974ea32e5d5c4add435 (patch) | |
| tree | 3269c40c8fdf11dd529daa6bdf92e7af7917afd7 /css | |
| parent | 5e1da1fc04f59bf504e6e43ffbfbd8dbbf6ef178 (diff) | |
feat(contacts): adjust header to single column layout
Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>
Diffstat (limited to 'css')
| -rw-r--r-- | css/ContactDetailsLayout.scss | 31 | ||||
| -rw-r--r-- | css/Properties/Properties.scss | 16 |
2 files changed, 40 insertions, 7 deletions
diff --git a/css/ContactDetailsLayout.scss b/css/ContactDetailsLayout.scss new file mode 100644 index 00000000..a4c0236b --- /dev/null +++ b/css/ContactDetailsLayout.scss @@ -0,0 +1,31 @@ +/** + * @copyright Copyright (c) 2023 Richard Steinmetz <richard@steinmetz.cloud> + * + * @author Richard Steinmetz <richard@steinmetz.cloud> + * + * @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 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 General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see <http://www.gnu.org/licenses/>. + * + */ + +$contact-details-label-min-width: 100px; +$contact-details-label-max-width: 200px; +$contact-details-label-width: calc(($contact-details-label-min-width + $contact-details-label-max-width) / 2); + +$contact-details-value-min-width: 200px; +$contact-details-value-max-width: 300px; +$contact-details-value-width: calc(($contact-details-value-min-width + $contact-details-value-max-width) / 2); + +$contact-details-row-gap: 15px; diff --git a/css/Properties/Properties.scss b/css/Properties/Properties.scss index 8290e988..58cea711 100644 --- a/css/Properties/Properties.scss +++ b/css/Properties/Properties.scss @@ -21,16 +21,18 @@ * */ -$property-label-min-width: 100px; -$property-label-max-width: 200px; -$property-label-width: calc(($property-label-min-width + $property-label-max-width) / 2); +@import '../ContactDetailsLayout.scss'; -$property-value-min-width: 200px; -$property-value-max-width: 300px; -$property-value-width: calc(($property-value-min-width + $property-value-max-width) / 2); +$property-label-min-width: $contact-details-label-min-width; +$property-label-max-width: $contact-details-label-max-width; +$property-label-width: $contact-details-label-width; + +$property-value-min-width: $contact-details-value-min-width; +$property-value-max-width: $contact-details-value-max-width; +$property-value-width: $contact-details-value-width; $property-ext-padding-right: 8px; -$property-row-gap: 15px; +$property-row-gap: $contact-details-row-gap; .property { width: 100%; |