Customize default CUBA filter component


I want to make all the elements inside the CUBA filter component (labels, buttons, whatever elements it contains) smaller. I tried with tiny or small predefined styles for the filter but with no effect.
Should I try it the “hard” way: like defining custom styles for every sub-component? It seems quite complicated and very time consuming…


I came with a solution:

      .v-gridlayout-conditions-grid, .v-horizontallayout-filter-control-with-top-border {

        $v-font-size: 11px;
        $v-unit-size: 22px;

        [class*="v-"] {
            font-size: $v-font-size;

        .v-slot, .v-button, .v-gridlayout-slot, .v-textfield,
        .v-datefield, .v-datefield-button,
        .v-filterselect, .v-filterselect-input, .v-filterselect-button,
        .v-button-wrap::after {
            height: $v-unit-size !important;