CODEWITHSUNDEEP
vaadinvaadin-flow
clickguy
clickguy

Reputation: 91

Vaadin 24 - Ignoring Styling CSS

I've added some simple CSS to the "styles.css" file located in (my-project/frontend/themes/my-project/styles.css):

// add line around buttons
vaadin-button:not([disabled]):not([theme~="primary"]):not([theme~="tertiary"]) {
  border: 1px solid #d8d8d8;
}

// set all the items in a grid to align to the TOP (not center) of a cell
vaadin-grid::part(body-cell) {
    align-items: self-start;
    vertical-align: top;
}

Neither of the styles are having any effect - but the colors I've specified in html{} ARE getting applied:

html {
    --lumo-primary-color-10pct: hsla(202, 100%, 26%, 0.1);
    --lumo-primary-color-50pct: hsla(202, 100%, 26%, 0.5);
    --lumo-primary-color: hsl(202, 100%, 26%);

    --lumo-error-color-10pct: hsla(3, 77%, 55%, 0.1);
    --lumo-error-color-50pct: hsla(3, 77%, 55%, 0.5);
    --lumo-error-color: hsl(3, 77%, 55%);

    --lumo-success-color-10pct: hsla(145, 81%, 37%, 0.12);
    --lumo-success-color-50pct: hsla(145, 81%, 37%, 0.55);
    --lumo-success-color: hsl(145, 81%, 37%);

    --lumo-primary-text-color-10pct: hsla(202, 100%, 26%, 0.1);
    --lumo-primary-text-color-50pct: hsla(202, 100%, 26%, 0.5);
    --lumo-primary-text-color: hsl(202, 100%, 26%);

    --lumo-error-text-color-10pct: hsla(3, 77%, 55%, 0.1);
    --lumo-error-text-color-50pct: hsla(3, 77%, 55%, 0.5);
    --lumo-error-text-color: hsl(3, 77%, 55%);

    --lumo-success-text-color-10pct: hsla(145, 81%, 37%, 0.12);
    --lumo-success-text-color-50pct: hsla(145, 81%, 37%, 0.55);
    --lumo-success-text-color: hsl(145, 81%, 37%);
    
    --lumo-size-xl: 3rem;
    --lumo-size-l: 2.5rem;
    --lumo-size-m: 2rem;
    --lumo-size-s: 1.75rem;
    --lumo-size-xs: 1.5rem;
    --lumo-space-xl: 1.875rem;
    --lumo-space-l: 1.25rem;
    --lumo-space-m: 0.625rem;
    --lumo-space-s: 0.3125rem;
    --lumo-space-xs: 0.1875rem;

}

I've added the correct @Theme notation at the application:

@SpringBootApplication
@Theme(value = "my-project")
public class Application implements AppShellConfigurator {
   ...
}

What am I missing?

Upvotes: 0

Views: 231

Answers (1)

cfrick
cfrick

Reputation: 37073

// comments are not allowed in CSS - only /* */. Whatever is used to crunch the CSS, ignores the following rules due to that. Write the comment properly or not at all, and your rules will be working.

/* add line around buttons */
vaadin-button:not([disabled]):not([theme~="primary"]):not([theme~="tertiary"]) {
  border: 1px solid #d8d8d8;
}

A reasonable editor would already warn you about this.

Upvotes: 0

Related Questions