Add backgroud color to all inputs

Flow
1

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

2

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.

3

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

4

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:

[code]
@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);
}
}
[/code]For more parameters / mixins / variables take a look at the valo api →
Valo API

best regards

Johannes

5

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;
}
6

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;
    }
7

You don’t need to do that though.

.changed-field,
.changed-field [class*="input"]
,
.changed-field [class*="textfield"]
 {
  background: $v-changed-field-background;
}

If that’s not strong enough you can add
.v-widget
, i.e.
.v-widget.changed-field
 etc.

8

Thanks Joacim, it works almost good ;-). It doesn’t work for stepper and, the bigger problem, causes wrong behaviour for date field: not only the text field is colored, but also a calendar (see snapshot).
25001.png

9

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;
}
10

It seems to work properly :slight_smile:
Thank you.