diff options
| -rw-r--r-- | css/Properties/Properties.scss | 13 | ||||
| -rw-r--r-- | css/Properties/PropertyTitle.scss | 6 | ||||
| -rw-r--r-- | src/components/Properties/PropertyTitle.vue | 8 |
3 files changed, 17 insertions, 10 deletions
diff --git a/css/Properties/Properties.scss b/css/Properties/Properties.scss index b659a5d2..262761dd 100644 --- a/css/Properties/Properties.scss +++ b/css/Properties/Properties.scss @@ -41,14 +41,14 @@ $property-value-max-width: 250px; &--addressbooks &__actions { display: none !important; } - + // property row &__row { display: flex; align-items: center; position: relative; } - + // property label or multiselect within row &__label, &__label.multiselect { @@ -56,7 +56,7 @@ $property-value-max-width: 250px; padding: $grid-input-padding 0; flex: 1 0; // min width is 60px, let's grow until 120px height: $grid-input-height-with-margin; - width: $property-label-min-width; + width: $property-label-min-width; min-width: $property-label-min-width !important; // override multiselect max-width: $property-label-max-width; @@ -174,7 +174,7 @@ $property-value-max-width: 250px; opacity: .7; } } - + // Delete property button + actions &__actions { position: absolute !important; @@ -185,7 +185,7 @@ $property-value-max-width: 250px; border: 0; background-color: transparent; z-index: 10; - // opacity applies on the single action OR + // opacity applies on the single action OR &:not(.action-item--multiple), &.action-item--multiple .icon-more { opacity: 0.5; @@ -199,4 +199,7 @@ $property-value-max-width: 250px; } } } + .property__value { + margin-right: 0; + } } diff --git a/css/Properties/PropertyTitle.scss b/css/Properties/PropertyTitle.scss index 63c30c66..aaa92304 100644 --- a/css/Properties/PropertyTitle.scss +++ b/css/Properties/PropertyTitle.scss @@ -27,10 +27,14 @@ opacity: 0.6; user-select: none; + .property__title--right { + display: flex; + justify-content: space-between; + } .property__title--icon { background-position: center right; } .property__title--icon-details { margin-left: 7px; } -}
\ No newline at end of file +} diff --git a/src/components/Properties/PropertyTitle.vue b/src/components/Properties/PropertyTitle.vue index 44a73a22..56d64b8f 100644 --- a/src/components/Properties/PropertyTitle.vue +++ b/src/components/Properties/PropertyTitle.vue @@ -23,11 +23,11 @@ <template> <h3 class="property__title property__row"> <div :class="icon" class="property__label property__title--icon" /> - <span class="property__value"> - {{ readableName }} + <span class="property__value property__title--right"> + <div>{{ readableName }}</div> + <!-- display tooltip with hint if available --> + <div v-if="info" v-tooltip.auto="info" class="property__title--icon-details icon-details" /> </span> - <!-- display tooltip with hint if available --> - <div v-if="info" v-tooltip.auto="info" class="property__title--icon-details icon-details" /> </h3> </template> |