Import CSS file

General
1

Hi all,

We are using VAADIN to build the WEB version of our framework. But we face a problem when trying to import a CSS file into application theme. It seems like the imported CSS is not taken into consideration when building the theme using the SAAS compiler and all the CSS file content is ignored.

I tried to transform the CSS file into an SCSS one but I thinks that grayscale syntax is not supported by the compiler. The content of the CSS file is the following :

.k-actor.v-disabled a img {
filter: url(“data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg\'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/>#grayscale”); /* Firefox 10+, Firefox on Android /
filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: gray; / IE6-9 /
-webkit-filter: grayscale(100%); / Chrome 19+, Safari 6+, Safari 6+ iOS */
}

Is there any way to include this CSS file in the UI theme or to create the quivalent SCSS one that it can be compiled ?

Thanks for all your responses.

Best regards

2

How to do come to the conclusion, that your css is not considered . where did you place your css code ?

I would suggest converting your css into scss (google it) and create a new file i.e. mycss.scss. define a mixin inside.
After that you can import mycss.scss into your main styles.scss file and include inside your main style.

i.e.

file mycss.scss

@mixin MYSCSS{
    
    #myscssmaincomponent{
        /* your styles go here*/
    }
        
}

in styles .scss :

@import "mycss.scss";

.basic{
 @include MYSCSS; 
}
3

Hi,

Thanks for your reply.

I concluded that my CSS is not taken into consideration cause styles in the CSS are not applied when running the application (Images are not in gray when they are disabled).

I tried to transform the CSS file into an SCSS one but it seems like VAADIN SAAS compiler cannot parse the grayscale applied in the CSS.

Best regards

4

Well, normally you would see an error message in console if Vaadin Saas compiler can’t parse any css. do you see the following error ?

Error when parsing file
5

the following code has worked for my images in chrome :

img {    max-height: 120px !important;
    max-width: 120px !important;
     filter:#{url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale")};
     filter: #{"grayscale(#{100%})"};
    -moz-filter: #{"grayscale(#{100%})"};
    -ms-filter:#{"grayscale(#{100%})"};
    -o-filter: #{"grayscale(#{100%})"};
    filter: #{"grayscale(#{gray})"}; /* IE6-9 */
    -webkit-filter: #{"grayscale(1)"}; /* Chrome 19+, Safari 6+, Safari 6+ iOS */
   }
6

Yes I had the parsing error when trying to build the application theme using eclipse.

I will try the proposed code above and see if it compiles.

Thanks for all

7

It seems to be OK.

Thanks for your help :slight_smile:

Best regards

8

glad that i could help :slight_smile: