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