diff --git a/src/client/app/common/views/components/profile-editor.vue b/src/client/app/common/views/components/profile-editor.vue index 33c53c7dc8..5f462a2586 100644 --- a/src/client/app/common/views/components/profile-editor.vue +++ b/src/client/app/common/views/components/profile-editor.vue @@ -24,7 +24,7 @@ </ui-input> <ui-input v-model="birthday" type="date"> - <span>{{ $t('birthday') }}</span> + <span slot="title">{{ $t('birthday') }}</span> <span slot="prefix"><fa icon="birthday-cake"/></span> </ui-input> diff --git a/src/client/app/common/views/components/ui/input.vue b/src/client/app/common/views/components/ui/input.vue index d735cc1c2f..d9683e2b90 100644 --- a/src/client/app/common/views/components/ui/input.vue +++ b/src/client/app/common/views/components/ui/input.vue @@ -6,6 +6,7 @@ <div class="value" ref="passwordMetar"></div> </div> <span class="label" ref="label"><slot></slot></span> + <span class="title" ref="title"><slot name="title"></slot></span> <div class="prefix" ref="prefix"><slot name="prefix"></slot></div> <template v-if="type != 'file'"> <input ref="input" @@ -281,6 +282,20 @@ root(fill) transform-origin top left transform scale(1) + > .title + position absolute + z-index 1 + top fill ? -24px : -17px + left 0 !important + pointer-events none + font-size 16px + line-height 32px + color var(--inputLabel) + pointer-events none + //will-change transform + transform-origin top left + transform scale(.75) + > input display block width 100%