Allow Default theme reuse without background-clip

[gyoshev]

I'm submitting a...

• Suggestion for improvement

Current behavior

The default theme uses background-clip: padding-box in a lot of places, which is subsequently reverted to border-box, due to telerik/kendo-theme-default#196. This makes it difficult to reuse the theme styles in derived themes, since these styles are not always necessary, but cannot be suppressed. Furthermore, these styles are sometimes the only difference between the default and a derived theme.

Expected behavior

Improved reuse of the theme CSS. The issue is marked as "Epic" not only because the code change involves the whole Default theme, but also because this can be leveraged to reuse the _theme.scss files in Bootstrap/Material as well.

Possible resoltion

Instead of outputting the property values directly, add a mixin that outputs them based on a variable. This will allow the background-clip styles to be suppressed in derived themes. For a rough example:

@mixin background-clip() {
  @if $use-background-clip {
    background-clip: padding-box;

    .k-edge { // etc
      background-clip: border-box;
    }
  }
}

// later
.k-button {
  @include background-clip();
}