feat: allow default theme reuse without background-clip

fixes #512
telerik · Oct 24, 2019 · 58abbf5 · 58abbf5
1 parent a5f1d39
commit 58abbf5
Show file tree

Hide file tree

Showing 30 changed files with 55 additions and 231 deletions.
diff --git a/packages/bootstrap/scss/_variables.scss b/packages/bootstrap/scss/_variables.scss
@@ -10,6 +10,8 @@ $enable-shadows: $enable-shadows !default;
 $enable-gradients: $enable-gradients !default;
 $enable-transitions: $enable-transitions !default;
 
+$use-background-clip: false !default;
+
 
 // Theme colors
 /// The color that focuses the user attention.

diff --git a/packages/default/scss/_mixins.scss b/packages/default/scss/_mixins.scss
@@ -6,6 +6,7 @@
 
 
 // Utils
+@import "mixins/_background-clip.scss";
 @import "mixins/_border-radius.scss";
 @import "mixins/_box-shadow.scss";
 @import "mixins/_decoration.scss";

diff --git a/packages/default/scss/_variables.scss b/packages/default/scss/_variables.scss
@@ -7,6 +7,8 @@ $enable-shadows: true !default;
 $enable-gradients: true !default;
 $enable-transitions: true !default;
 
+$use-background-clip: true !default;
+
 
 // Spacing
 $spacer: 1em !default;

diff --git a/packages/default/scss/autocomplete/_theme.scss b/packages/default/scss/autocomplete/_theme.scss
@@ -2,13 +2,7 @@
 
     .k-autocomplete {
         @include appearance( input );
-        background-clip: padding-box;
-
-        .k-ie11 &,
-        .k-edge12 &,
-        .k-edge13 & {
-            background-clip: border-box;
-        }
+        @include use-background-clip();
 
         // Hovered state
         &.k-state-hover {

diff --git a/packages/default/scss/button/_theme.scss b/packages/default/scss/button/_theme.scss
@@ -4,13 +4,7 @@
     // Default button
     .k-button {
         @include appearance( button );
-        background-clip: padding-box;
-
-        .k-ie11 &,
-        .k-edge12 &,
-        .k-edge13 & {
-            background-clip: border-box;
-        }
+        @include use-background-clip();
 
         // Hover state
         &:hover,
@@ -98,13 +92,6 @@
 
     // Button group
     .k-button-group {
-        background-clip: padding-box;
-
-        .k-ie11 &,
-        .k-edge12 &,
-        .k-edge13 & {
-            background-clip: border-box;
-        }
 
         // Focused state
         .k-button:focus,

diff --git a/packages/default/scss/calendar/_theme.scss b/packages/default/scss/calendar/_theme.scss
@@ -11,13 +11,7 @@ $calendar-today-color: $accent;
             $calendar-bg,
             $calendar-border
         );
-        background-clip: padding-box;
-
-        .k-ie11 &,
-        .k-edge12 &,
-        .k-edge13 & {
-            background-clip: border-box;
-        }
+        @include use-background-clip();
 
 
         // Header / footer

diff --git a/packages/default/scss/colorpicker/_theme.scss b/packages/default/scss/colorpicker/_theme.scss
@@ -11,13 +11,7 @@
                 $colorpicker-select-border,
                 $colorpicker-select-gradient
             );
-            background-clip: padding-box;
-
-            .k-ie11 &,
-            .k-edge12 &,
-            .k-edge13 & {
-                background-clip: border-box;
-            }
+            @include use-background-clip();
 
             &:focus {
 

diff --git a/packages/default/scss/combobox/_theme.scss b/packages/default/scss/combobox/_theme.scss
@@ -9,14 +9,8 @@
                 $combobox-bg,
                 $combobox-border
             );
-            background-clip: padding-box;
+            @include use-background-clip();
             cursor: initial;
-
-            .k-ie11 &,
-            .k-edge12 &,
-            .k-edge13 & {
-                background-clip: border-box;
-            }
         }
 
         .k-select {

diff --git a/packages/default/scss/datetime/_theme.scss b/packages/default/scss/datetime/_theme.scss
@@ -12,13 +12,7 @@
                 $datetime-bg,
                 $datetime-border
             );
-            background-clip: padding-box;
-
-            .k-ie11 &,
-            .k-edge12 &,
-            .k-edge13 & {
-                background-clip: border-box;
-            }
+            @include use-background-clip();
         }
 
         .k-select {
@@ -184,13 +178,7 @@
                 $datetime-bg,
                 $datetime-border
             );
-            background-clip: padding-box;
-
-            .k-ie11 &,
-            .k-edge12 &,
-            .k-edge13 & {
-                background-clip: border-box;
-            }
+            @include use-background-clip();
         }
         .k-select {
             @include fill(

diff --git a/packages/default/scss/dropdownlist/_theme.scss b/packages/default/scss/dropdownlist/_theme.scss
@@ -9,13 +9,7 @@
                 $dropdownlist-border,
                 $dropdownlist-gradient
             );
-            background-clip: padding-box;
-
-            .k-ie11 &,
-            .k-edge12 &,
-            .k-edge13 & {
-                background-clip: border-box;
-            }
+            @include use-background-clip();
 
             .k-select {
                 padding: 0;

diff --git a/packages/default/scss/dropdowntree/_theme.scss b/packages/default/scss/dropdowntree/_theme.scss
@@ -4,13 +4,7 @@
 
         .k-dropdown-wrap {
             @include appearance( button );
-            background-clip: padding-box;
-
-            .k-ie11 &,
-            .k-edge12 &,
-            .k-edge13 & {
-                background-clip: border-box;
-            }
+            @include use-background-clip();
 
             .k-select {
                 padding: 0;

diff --git a/packages/default/scss/editor/_theme.scss b/packages/default/scss/editor/_theme.scss
@@ -3,18 +3,12 @@
 
     .k-editor {
         @include appearance( panel );
-        background-clip: padding-box;
+        @include use-background-clip();
 
         .k-editor-toolbar {}
         .k-editable-area {
             border-color: $header-border;
         }
-
-        .k-ie11 &,
-        .k-edge12 &,
-        .k-edge13 & {
-            background-clip: border-box;
-        }
     }
 
     // Inline Editor

diff --git a/packages/default/scss/gantt/_theme.scss b/packages/default/scss/gantt/_theme.scss
@@ -2,13 +2,7 @@
 
     // Theme
     .k-gantt {
-        background-clip: padding-box;
-
-        .k-ie11 &,
-        .k-edge12 &,
-        .k-edge13 & {
-            background-clip: border-box;
-        }
+        @include use-background-clip();
     }
 
 

diff --git a/packages/default/scss/grid/_theme.scss b/packages/default/scss/grid/_theme.scss
@@ -69,13 +69,7 @@
 
     .k-grid {
         @include fill( $grid-text, $grid-bg, $grid-border );
-        background-clip: padding-box;
-
-        .k-ie11 &,
-        .k-edge12 &,
-        .k-edge13 & {
-            background-clip: border-box;
-        }
+        @include use-background-clip();
 
         // Alt row
         tr.k-alt {

diff --git a/packages/default/scss/input/_theme.scss b/packages/default/scss/input/_theme.scss
@@ -4,13 +4,7 @@
     .k-textarea,
     .k-input.k-textbox {
         @include appearance( "input" );
-        background-clip: padding-box;
-
-        .k-ie11 &,
-        .k-edge12 &,
-        .k-edge13 & {
-            background-clip: border-box;
-        }
+        @include use-background-clip();
 
         // Hovered
         &:hover,

diff --git a/packages/default/scss/listbox/_theme.scss b/packages/default/scss/listbox/_theme.scss
@@ -7,13 +7,7 @@
             background-color: $widget-bg;
             border-color: $widget-border;
             color: $widget-text;
-            background-clip: padding-box;
-
-            .k-ie11 &,
-            .k-edge12 &,
-            .k-edge13 & {
-                background-clip: border-box;
-            }
+            @include use-background-clip();
         }
         .k-drop-hint {
             border-top-color: $accent;

diff --git a/packages/default/scss/menu/_theme.scss b/packages/default/scss/menu/_theme.scss
@@ -15,13 +15,7 @@ $menu-scrolling-icon-hover: $link-hover-text !default;
     .k-menu:not(.k-context-menu) {
         border-width: 0;
         background: $menu-bg;
-        background-clip: padding-box;
-
-        .k-ie11 &,
-        .k-edge12 &,
-        .k-edge13 & {
-            background-clip: border-box;
-        }
+        @include use-background-clip();
 
         > .k-item {
             color: $menu-text;

diff --git a/packages/default/scss/mixins/_background-clip.scss b/packages/default/scss/mixins/_background-clip.scss
@@ -0,0 +1,15 @@
+@mixin background-clip( $background-clip ) {
+    @if $background-clip {
+        background-clip: $background-clip;
+    }
+}
+
+@mixin use-background-clip() {
+    @if $use-background-clip {
+        background-clip: padding-box;
+
+        .k-ie11 {
+            background-clip: border-box;
+        }
+    }
+}
diff --git a/packages/default/scss/multiselect/_theme.scss b/packages/default/scss/multiselect/_theme.scss
@@ -3,27 +3,15 @@
     // Appearance
     .k-multiselect-wrap {
         @include appearance( input );
-        background-clip: padding-box;
-
-        .k-ie11 &,
-        .k-edge12 &,
-        .k-edge13 & {
-            background-clip: border-box;
-        }
+        @include use-background-clip();
 
         > .k-readonly {
             opacity: .6;
         }
 
 
         li {
-            background-clip: padding-box;
-
-            .k-ie11 &,
-            .k-edge12 &,
-            .k-edge13 & {
-                background-clip: border-box;
-            }
+            @include use-background-clip();
 
             .k-icon {
                 opacity: .6;

diff --git a/packages/default/scss/numerictextbox/_theme.scss b/packages/default/scss/numerictextbox/_theme.scss
@@ -6,13 +6,7 @@
         // Normal state
         .k-numeric-wrap {
             @include appearance( input );
-            background-clip: padding-box;
-
-            .k-ie11 &,
-            .k-edge12 &,
-            .k-edge13 & {
-                background-clip: border-box;
-            }
+            @include use-background-clip();
         }
         .k-select {
             @include appearance( button );

diff --git a/packages/default/scss/panelbar/_theme.scss b/packages/default/scss/panelbar/_theme.scss
@@ -6,24 +6,12 @@
             $panelbar-bg,
             $panelbar-border
         );
-        background-clip: padding-box;
-
-        .k-ie11 &,
-        .k-edge12 &,
-        .k-edge13 & {
-            background-clip: border-box;
-        }
+        @include use-background-clip();
 
 
         // Root
         > .k-item {
-            background-clip: padding-box;
-
-            .k-ie11 &,
-            .k-edge12 &,
-            .k-edge13 & {
-                background-clip: border-box;
-            }
+            @include use-background-clip();
 
             > .k-link {
                 @include fill(

diff --git a/packages/default/scss/pivotgrid/_theme.scss b/packages/default/scss/pivotgrid/_theme.scss
@@ -36,13 +36,7 @@
     .k-pivot-toolbar .k-button,
     .k-fieldselector .k-list li.k-item {
         @include appearance( button );
-        background-clip: padding-box;
-
-        .k-ie11 &,
-        .k-edge12 &,
-        .k-edge13 & {
-            background-clip: border-box;
-        }
+        @include use-background-clip();
 
         &:hover,
         &.k-state-hover {

diff --git a/packages/default/scss/popup/_theme.scss b/packages/default/scss/popup/_theme.scss
@@ -2,13 +2,7 @@
 
     .k-popup {
         @include appearance( popup );
-        background-clip: padding-box;
-
-        .k-ie11 &,
-        .k-edge12 &,
-        .k-edge13 & {
-            background-clip: border-box;
-        }
+        @include use-background-clip();
     }
 
     .k-popup > kendo-list > .k-first {