Import valo, css lost

Hello,

I have created a customelized theme by extending the theme valo, but when i added the new css, i have a problem:

In style.scss:

@import "../valo/valo";

.my-theme {
  @include valo;
 
    .v-listbuilder .v-button-caption {    
    width: 11px;    
    height: 11px;    
    background-repeat: no-repeat;    
    background-position: left bottom;   
    padding-top: 3px;    
    display: inline-block;
    }

    .v-grid-row.grayed {
        color: gray;
        text-decoration: line-through;
    }

}

Then i get this from fireDebug at the end of the css file:

.my-theme .v-listbuilder .v-button-caption {
    background-position: left bottom;
    background-repeat: no-repeat;
    display: inline-block;
    height: 11px;
    padding-top: 3px;
    width: 11px;
}
.my-theme .v-grid-row.grayed {
    text-decoration: line-through;
}

And the layout is not what i want.
Anyone knows this? Thanks.

Could please elaborate a bit, what's the actual problem here? Could you post an full project that demonstrates the issue?

Probably shouldn't be defining your theme in styles.scss, but in <your-theme>.scss. The former does contain the following suggestion:

This file prefixes all rules with the theme name to avoid causing conflicts with other themes.
The actual styles should be defined in <your-theme>.scss