Add backgroud color to all inputs

Hello,
  does it exist a way to give all inputs with given style given background color?
To be more concrete: I'd like all fields with style "changed-field":

field.addStyleName("changed-field");

have special background independently on the type of field.
Following css:

.changed-field {
        background: #ff84ff;
    }

works for text fields as well as checkboxes, but doesn't work for comboboxes nor for date fields.

Thanks in advance
Agata

Hey Agata,

You can tweak input fields (TextFields, ComboBoxes, DateFields) with $v-textfield-background-color.

$v-textfield-background-color: blue;

@import "../valo/valo.scss";

@mixin <your-theme> {
  @include valo;
}

This won't affect checkboxes though.

Thanks Joacim, but it affects all fields, not only the ones with special style.

Hi Agata,

you can include valo style-mixins to generate all styles according to your givin parameters. (e.g. $background-color)

Java:

TextField field = new TextField("no background");
        TextField fieldWithBackground = new TextField("has background");
        fieldWithBackground.addStyleName("green");

        DateField dateField = new DateField("no background");
        DateField dateFieldWithBackground = new DateField("has background");
        dateFieldWithBackground.addStyleName("green");

        ComboBox comboBox = new ComboBox("no background");
        ComboBox comboBoxWithBackground = new ComboBox("has background");
        comboBoxWithBackground.addStyleName("green");

mytheme.scss:

@import "../valo/valo.scss";

@mixin mytheme {
  @include valo;

  .v-textfield-green{
      @include valo-textfield-style($background-color: #006b02);
  }
  
  .v-filterselect-green{
      @include valo-combobox-style($background-color: #006b02);
  }

  .v-datefield-green{
      @include valo-datefield-style($background-color: #006b02);
  } 
}

For more parameters / mixins / variables take a look at the valo api -> Valo API

best regards

Johannes

Agata Vackova: Thanks Joacim, but it affects all fields, not only the ones with special style.

True. You can also do:

ComboBox cb = new ComboBox();
DateField df = new DateField();

cb.addStyleName("green");
df.addStyleName("green");

.v-filterselect.green [class*="input"] {
  background-color: green;
}
  
.v-datefield.green [class*="textfield"] {
  background-color: green;
}

Johannes, Joacim,
  this is what I have done. But I don't like the solution, because I need to write all types of fields:

.v-textfield-changed-field {
        background: $v-changed-field-background;
    }
    
.v-textarea-changed-field {
        background: $v-changed-field-background;
    }
    
.v-checkbox-changed-field {
        background: $v-changed-field-background;
    }
    
.v-stepper-changed-field [class*="input"] {
        background: $v-changed-field-background;
    }
    
.v-datefield-changed-field [class*="textfield"]    {
        background: $v-changed-field-background;
    }
    
.v-filterselect-changed-field [class*="input"]    {
        background: $v-changed-field-background;
    }

Not familiar with the Stepper component's DOM structure, so can't help you there.

If you don't want the popup themed you can use:

.changed-field:not(.v-datefield-popup),
.changed-field [class*="input"],
.changed-field [class*="textfield"] {
  background: lightblue;
}

It seems to work properly :-)
Thank you.