From 277dc6f4e515d1c1b06bd8ed7b5b610c5ae0a588 Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Fri, 18 Aug 2023 15:28:30 +0200 Subject: [PATCH] fixup! Make stylelint happy Signed-off-by: Ferdinand Thiessen --- src/components/NcInputField/NcInputField.vue | 40 +++++++++----------- 1 file changed, 18 insertions(+), 22 deletions(-) diff --git a/src/components/NcInputField/NcInputField.vue b/src/components/NcInputField/NcInputField.vue index 7bd1ae87eb..56b5d271a9 100644 --- a/src/components/NcInputField/NcInputField.vue +++ b/src/components/NcInputField/NcInputField.vue @@ -394,6 +394,12 @@ export default { &:focus-visible { box-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px } + + // Align label text color with border color (on hover / focus) + &:focus + .input-field__label, + &:hover:not(:placeholder-shown) + .input-field__label { + color: var(--color-success-text); + } } &--error { @@ -401,6 +407,12 @@ export default { &:focus-visible { box-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px } + + // Align label text color with border color (on hover / focus) + &:focus + .input-field__label, + &:hover:not(:placeholder-shown) + .input-field__label { + color: var(--color-error-text); + } } &--leading-icon { @@ -410,6 +422,12 @@ export default { &--trailing-icon { padding-inline-end: 32px; } + + // Align label text color with border color (on hover / focus) + &:focus + .input-field__label, + &:hover:not(&--success, &--error):not(:placeholder-shown) + .input-field__label { + color: var(--color-primary-element); + } } &__label { @@ -457,28 +475,6 @@ export default { } } - // Align label text color with border color (on hover / focus) - &__input { - &:focus + .input-field__label, - &:hover:not(&--success, &--error):not(:placeholder-shown) + .input-field__label { - color: var(--color-primary-element); - } - - &--success { - &:focus + .input-field__label, - &:hover:not(:placeholder-shown) + .input-field__label { - color: var(--color-success-text); - } - } - - &--error { - &:focus + .input-field__label, - &:hover:not(:placeholder-shown) + .input-field__label { - color: var(--color-error-text); - } - } - } - &__icon { position: absolute; height: 32px;