feat: Add Placeholder CSS Helper and adjust color - MEED-7502 - Meeds…

…-io/MIPs#147 (#834)
Meeds-io · Sep 26, 2024 · 9ab646a · 9ab646a
1 parent 8831bae
commit 9ab646a
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 13 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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;