Search code examples
cssangularpolymervaadinmixins

Attempting to style vaadin-date-picker input text

I want to change the color of the input text to red when the date picker is within a element class 'has-Error'.

Below is an example of what I attempted on my index.html page, but had no effect:

<style is="custom-style">
        :root {
            --primary-color: #1ab394;
            --light-primary-color: var(--paper-teal-100);
        }
        html {
            .has-error {
                 --paper-input-container-label: { color: red }

            }
            --paper-input-container-label: { font-size: 12px }
            --paper-input-container-label-focus: { font-size:12px; font-weight:500 }
            --paper-input-container-input: { font-size:12px }
            --vaadin-date-picker-overlay: { max-height:400px }
         }   
    </style>

It looks like the date-picker is using a paper-input, but I can't figure out how to apply a style conditionally.

(Click link for example picture) - When looking at the picture example, I would like to have 'Choose Date' in red.

edit: I have added the html:

[ngClass]="{'has-error':hasErrors('value')}" class="form-group md-form-group">
<vaadin-date-picker [disableCond]="" [formControl]="" label=""></vaadin-date-picker>
Solution

  • For styling only input field I would suggest you using vaadin-date-picker-light instead. It is far easier for styling just the input. you can use practically any html inside it for input field.

    Mixins are not supported in current version. So, setting values on them will not work

    For detail Please see this page https://www.webcomponents.org/element/vaadin/vaadin-date-picker/v2.0.0-alpha2/elements/vaadin-date-picker#property-max

    AND this theming example if you want to use custom theme for overlay and other things https://cdn.vaadin.com/vaadin-date-picker/2.0.2/demo/theming.html