diff --git a/platform-ui-skin/src/main/webapp/skin/less/core/helpers.less b/platform-ui-skin/src/main/webapp/skin/less/core/helpers.less index d867e8487..f3a7a6af8 100644 --- a/platform-ui-skin/src/main/webapp/skin/less/core/helpers.less +++ b/platform-ui-skin/src/main/webapp/skin/less/core/helpers.less @@ -871,6 +871,15 @@ max-height: 36px; max-width: 36px; } +.input-placeholder { + &[placeholder]:empty::before { + color: @placeholderText; + content: attr(placeholder); + } + &[placeholder]:empty:focus::before { + content: ""; + } +} .table-layout-auto { &, table { table-layout: auto !important; diff --git a/platform-ui-skin/src/main/webapp/skin/less/variables.less b/platform-ui-skin/src/main/webapp/skin/less/variables.less index 4b870ff7d..bec0b7537 100644 --- a/platform-ui-skin/src/main/webapp/skin/less/variables.less +++ b/platform-ui-skin/src/main/webapp/skin/less/variables.less @@ -188,6 +188,8 @@ @textDisabledColorDefault: #c6c6c6; @textDisabledColor: ~"var(--appTextDisabledColor, var(--allPagesBaseTextDisabledColor, @{textDisabledColorDefault}))"; +@placeholderText: rgba(0, 0, 0, 0.38); + // Links // ------------------------- @linkColor: @primaryColor; // Special title, text, hover, press, hyper-link or selected link @@ -245,9 +247,6 @@ @inputBorderRadius: @baseBorderRadius; @inputDisabledBackground: @primaryBackgroundHover; @formActionsBackground: @primaryBackground; -// Input placeholder text color -// ------------------------- -@placeholderText: @textLightColor; @inputFocusColor: @inputColor; @inputFocusBorder: var(--allPagesInputFocusBorder, lighten(@secondaryColorDefault, 30%)); diff --git a/platform-ui-skin/src/main/webapp/skin/less/vuetify/lib/README.txt b/platform-ui-skin/src/main/webapp/skin/less/vuetify/lib/README.txt index d218e7a0d..0dbdd8f1b 100644 --- a/platform-ui-skin/src/main/webapp/skin/less/vuetify/lib/README.txt +++ b/platform-ui-skin/src/main/webapp/skin/less/vuetify/lib/README.txt @@ -28,3 +28,4 @@ Modifications applied on imported libraries: - Change color to use @menuTextColor on .v-tab - Delete .v-card--link focus background to not have grey background once clicked - Fix .v-list-item__title & .v-list-item__subtitle line-height in dense configuration + - Change rgba(0, 0, 0, 0.38) by @placeholderText variable in :placeholder style diff --git a/platform-ui-skin/src/main/webapp/skin/less/vuetify/lib/vuetify.less b/platform-ui-skin/src/main/webapp/skin/less/vuetify/lib/vuetify.less index ca255e0c1..008b3d36c 100644 --- a/platform-ui-skin/src/main/webapp/skin/less/vuetify/lib/vuetify.less +++ b/platform-ui-skin/src/main/webapp/skin/less/vuetify/lib/vuetify.less @@ -18808,19 +18808,19 @@ html.overflow-y-hidden { color: @textColor; } .theme--dark.v-text-field--solo-inverted.v-input--is-focused > .v-input__control > .v-input__slot input::-webkit-input-placeholder { - color: rgba(0, 0, 0, 0.38); + color: @placeholderText; } .theme--dark.v-text-field--solo-inverted.v-input--is-focused > .v-input__control > .v-input__slot input::-moz-placeholder { - color: rgba(0, 0, 0, 0.38); + color: @placeholderText; } .theme--dark.v-text-field--solo-inverted.v-input--is-focused > .v-input__control > .v-input__slot input:-ms-input-placeholder { - color: rgba(0, 0, 0, 0.38); + color: @placeholderText; } .theme--dark.v-text-field--solo-inverted.v-input--is-focused > .v-input__control > .v-input__slot input::-ms-input-placeholder { - color: rgba(0, 0, 0, 0.38); + color: @placeholderText; } .theme--dark.v-text-field--solo-inverted.v-input--is-focused > .v-input__control > .v-input__slot input::placeholder { - color: rgba(0, 0, 0, 0.38); + color: @placeholderText; } .theme--dark.v-text-field--solo-inverted.v-input--is-focused > .v-input__control > .v-input__slot .v-label { color: @textSubtitleColor; @@ -20387,23 +20387,23 @@ html.overflow-y-hidden { } .theme--light.v-input input::-webkit-input-placeholder, .theme--light.v-input textarea::-webkit-input-placeholder { - color: rgba(0, 0, 0, 0.38); + color: @placeholderText; } .theme--light.v-input input::-moz-placeholder, .theme--light.v-input textarea::-moz-placeholder { - color: rgba(0, 0, 0, 0.38); + color: @placeholderText; } .theme--light.v-input input:-ms-input-placeholder, .theme--light.v-input textarea:-ms-input-placeholder { - color: rgba(0, 0, 0, 0.38); + color: @placeholderText; } .theme--light.v-input input::-ms-input-placeholder, .theme--light.v-input textarea::-ms-input-placeholder { - color: rgba(0, 0, 0, 0.38); + color: @placeholderText; } .theme--light.v-input input::placeholder, .theme--light.v-input textarea::placeholder { - color: rgba(0, 0, 0, 0.38); + color: @placeholderText; } .theme--light.v-input--is-disabled { color: @textDisabledColor;