Sync with Kendo UI Professional

Author: Kendo Bot

src/kendo.pager.js

@@ -19,6 +19,7 @@ var __meta__ = { // jshint ignore:line
         LAST = ".k-i-arrow-end-right",
         PREV = ".k-i-arrow-60-left",
         NEXT = ".k-i-arrow-60-right",
+        SIZE = "k-pager-lg k-pager-md k-pager-sm",
         CHANGE = "change",
         NS = ".kendoPager",
         CLICK = "click",
@@ -74,6 +75,7 @@ var __meta__ = { // jshint ignore:line
     var Pager = Widget.extend( {
         init: function(element, options) {
             var that = this, page, totalPages;
+            var sizeClassName = null;
 
             Widget.fn.init.call(that, element, options);
 
@@ -189,6 +191,14 @@ var __meta__ = { // jshint ignore:line
                 that.refresh();
             }
 
+            that._resizeHandler = proxy(that.resize, that, true);
+            $(window).on("resize" + NS, that._resizeHandler);
+
+            sizeClassName = that._getWidthSizeClass(that.element.width());
+            if (sizeClassName) {
+                that.element.addClass(sizeClassName);
+            }
+
             kendo.notify(that);
         },
 
@@ -200,6 +210,7 @@ var __meta__ = { // jshint ignore:line
             that.element.off(NS);
             that.dataSource.unbind(CHANGE, that._refreshHandler);
             that._refreshHandler = null;
+            $(window).off("resize" + NS, this._resizeHandler);
 
             kendo.destroy(that.element);
             that.element = that.list = null;
@@ -250,6 +261,20 @@ var __meta__ = { // jshint ignore:line
             }
         },
 
+        _resize: function(size) {
+            if (size.width) {
+                var sizeClassName = this._getWidthSizeClass(size.width);
+                var el = this.element;
+
+                if (!sizeClassName) {
+                    el.removeClass(SIZE);
+                } else if (!el.hasClass(sizeClassName)) {
+                    el.removeClass(SIZE);
+                    el.addClass(sizeClassName);
+                }
+            }
+        },
+
         _createDataSource: function(options) {
             this.dataSource = kendo.data.DataSource.create(options.dataSource);
         },
@@ -454,6 +479,19 @@ var __meta__ = { // jshint ignore:line
                     return 0;
                 }
             }
+        },
+
+        _getWidthSizeClass: function(width) {
+            var sizes = SIZE.split(" ");
+
+            if (width <= 480) {
+                return sizes[2];
+            } else if (width <= 640) {
+                return sizes[1];
+            } else if (width <= 1024) {
+                return sizes[0];
+            }
+            return null;
         }
     });
 

styles/web/common/grid.less

@@ -449,13 +449,19 @@ form.k-filter-menu .k-textbox
     margin: .5em 0 .5em;
 }
 
-.k-filter-menu .k-button
+.k-filter-menu .k-action-buttons {
+    margin: 0;
+    padding: 0;
+    text-align: initial;
+}
+
+.k-filter-menu .k-action-buttons .k-button
 {
     width:48%;
     margin: .5em 4% 0 0;
 }
 
-.k-filter-menu .k-button+.k-button
+.k-filter-menu .k-action-buttons .k-button+.k-button
 {
     margin-right: 0;
 }

styles/web/common/inputs.less

@@ -43,9 +43,12 @@ span.k-dropdowntree,
     cursor: pointer;
 }
 
-.k-autocomplete > .k-i-close,
+.k-autocomplete > .k-i-close {
+    right: calc(@input-clear-icon-offset);
+}
+
 .k-multiselect-wrap > .k-i-close {
-    right: (@grid-size/4 + 2px);
+    right: calc(@input-clear-icon-offset + 1px);
 }
 
 .k-autocomplete > .k-i-close,
@@ -55,11 +58,12 @@ span.k-dropdowntree,
 }
 
 .k-dropdown-wrap > .k-i-close {
-    right: 2.4em;
+    right: calc(@combobox-clear-icon-offset);
 }
 
-.k-multiselect-wrap > .k-i-close {
-    top: (@grid-size/2);
+.k-multiselect-wrap > .k-i-close,
+.k-dropdowntree > .k-multiselect-wrap > .k-i-close  {
+    top: calc(@multiselect-clear-icon-top-offset);
 }
 
 .k-multiselect-wrap .k-readonly,
@@ -201,7 +205,7 @@ span.k-dropdowntree,
 .k-dropdown-wrap,
 .k-numeric-wrap,
 .k-picker-wrap {
-    padding-right: calc(@input-height + .35em);
+    padding-right: calc(@input-offset);
 }
 
 .k-numeric-wrap.k-expand-padding {
@@ -603,7 +607,7 @@ body .k-datetimepicker .k-select {
 .k-multiselect-clearable .k-multiselect-wrap,
 .k-dropdowntree-clearable .k-multiselect-wrap,
 .k-dropdowntree-clearable .k-dropdown-wrap .k-input {
-    padding-right: calc(@input-height + .35em);
+    padding-right: calc(@input-offset);
 }
 
 // Date/Time Pickers
@@ -923,12 +927,19 @@ span.k-numerictextbox {
     .k-dropdowntree-clearable .k-multiselect-wrap,
     .k-dropdowntree-clearable .k-dropdown-wrap .k-input {
         padding-right: 0;
-        padding-left: calc(@input-height + .35em);
+        padding-left: calc(@input-offset);
     }
 
     .k-dropdown-wrap > .k-i-close {
-        left: 2.4em;
-        right: auto;
+        left: calc(@combobox-clear-icon-offset);
+    }
+
+    .k-autocomplete > .k-i-close {
+        left: calc(@input-clear-icon-offset);
+    }
+
+    .k-multiselect-wrap > .k-i-close {
+        left: calc(@input-clear-icon-offset + 1px);
     }
 
     .k-numeric-wrap.k-state-invalid.k-expand-padding .k-i-warning{

styles/web/kendo.common-bootstrap.less

@@ -1,6 +1,14 @@
 @input-height: 1.93571428em;
 @input-padding-y: 0.17857143em;
 @input-indent: .8em;
+@input-offset: (@input-height + .35em);
+
+@combobox-padding-x: 1.9em;
+
+@input-clear-icon-offset: ~"( (@{input-offset} - @{grid-size})/2 )";
+@combobox-clear-icon-offset: ~"( @{input-offset} + ((@{combobox-padding-x} - @{grid-size})/2) )";
+@multiselect-clear-icon-top-offset: ~"( (@{input-height} - @{grid-size}) / 2 + @{input-padding-y} + 1px )";
+
 @editor-icon-size: 32px;
 @menu-link-padding: 1.2em 1.2em 1.1em;
 @button-padding-x: 14px;
@@ -160,14 +168,10 @@ input.k-textbox {
 
 .k-combobox-clearable {
     .k-input {
-        padding-right: 1.9em;
+        padding-right: @combobox-padding-x;
     }
 }
 
-.k-autocomplete > .k-i-close  {
-    margin-right: 8px;
-}
-
 .k-colorpicker {
     @picker-icon-height: 2.28571428em;
     .k-selected-color {
@@ -181,12 +185,7 @@ input.k-textbox {
 }
 
 .k-combobox > .k-dropdown-wrap > .k-i-close {
-    right: 2.55em;
-}
-
-.k-multiselect > .k-multiselect-wrap > .k-i-close,
-.k-dropdowntree > .k-multiselect-wrap > .k-i-close {
-    top: calc((@input-height - @grid-size) / 2 + @input-padding-y + 1px);
+    right: calc(@combobox-clear-icon-offset);
 }
 
 .k-numerictextbox .k-link {
@@ -209,14 +208,12 @@ input.k-textbox {
 
 .k-rtl .k-widget.k-autocomplete > .k-i-close,
 .k-rtl .k-widget.k-multiselect > .k-multiselect-wrap > .k-i-close {
-    left: 0;
     right: initial;
-    margin-left: 8px;
     margin-right: 0;
 }
 
 .k-rtl .k-widget.k-combobox > .k-dropdown-wrap > .k-i-close {
-    left: 2.55em;
+    left: calc(@combobox-clear-icon-offset);
     right: initial;
 }
 
@@ -320,7 +317,7 @@ input.k-textbox {
 
     .k-combobox-clearable {
         .k-input {
-            padding-left: 1.9em;
+            padding-left: @combobox-padding-x;
             padding-right: 0.167em;
         }
     }

styles/web/kendo.common-fiori.less

@@ -1,6 +1,14 @@
 @input-height: 1.65em;
 @input-padding-y: 0.532142857em;
 @input-indent: .8em;
+@input-offset: (@input-height + .35em);
+
+@combobox-padding-x: 2.71428571em;
+
+@input-clear-icon-offset: ~"((@{input-offset} - @{grid-size})/2)";
+@combobox-clear-icon-offset: ~"( @{combobox-padding-x} + ((@{combobox-padding-x} - @{grid-size})/2) )";
+@multiselect-clear-icon-top-offset: ~"( (@{input-height} - @{grid-size}) / 2 + @{input-padding-y} + 1px )";
+
 @editor-icon-size: 36px;
 @menu-link-padding: 1.071em;
 @button-padding-x: 14px;
@@ -360,7 +368,7 @@ input.k-textbox,
 }
 
 .k-combobox-clearable .k-input {
-    padding-right: 2.71428571em;
+    padding-right: @combobox-padding-x;
     width: calc(100% - 2.71428571em);
 }
 
@@ -414,17 +422,7 @@ input.k-textbox,
 }
 
 .k-combobox > .k-dropdown-wrap > .k-i-close {
-    right: 3.4em;
-}
-
-.k-multiselect > .k-multiselect-wrap > .k-i-close,
-.k-dropdowntree > .k-multiselect-wrap > .k-i-close {
-    top: calc((@input-height - @grid-size) / 2 + @input-padding-y + 1px);
-}
-
-.k-autocomplete > .k-i-close,
-.k-multiselect > .k-multiselect-wrap > .k-i-close {
-    margin-right: 10px;
+    right: calc(@combobox-clear-icon-offset);
 }
 
 .k-multiselect-wrap li {
@@ -893,14 +891,12 @@ span.k-tooltip
 
 .k-rtl .k-widget.k-autocomplete > .k-i-close,
 .k-rtl .k-widget.k-multiselect > .k-multiselect-wrap > .k-i-close {
-    left: 0;
     right: initial;
-    margin-left: 10px;
     margin-right: 0;
 }
 
 .k-rtl .k-widget.k-combobox > .k-dropdown-wrap > .k-i-close {
-    left: 3.4em;
+    left: calc(@combobox-clear-icon-offset);
     right: initial;
 }
 
@@ -1053,7 +1049,7 @@ div.k-spreadsheet-window {
 // RTL
 .k-rtl {
     span.k-combobox-clearable .k-input {
-        padding-left: 2.71428571em;
+        padding-left: @combobox-padding-x;
         padding-right: 0;
     }
 

styles/web/kendo.common-material.less

@@ -1,6 +1,14 @@
 @input-height: 2.07142857em;
 @input-padding-y: 0.17857143em;
 @input-indent: .8em;
+@input-offset: (@input-height + .35em);
+
+@combobox-padding-x: 2.5em;
+
+@input-clear-icon-offset: ~"( (@{input-offset} - @{grid-size})/2 )";
+@combobox-clear-icon-offset: ~"( @{input-offset} + ((@{combobox-padding-x} - @{grid-size})/2) )";
+@multiselect-clear-icon-top-offset: ~"( (@{input-height} - @{grid-size}) / 2 + @{input-padding-y} + 1px )";
+
 @editor-icon-size: 36px;
 @menu-link-padding: 1.071em;
 @button-padding-x: 14px;
@@ -210,7 +218,7 @@
     padding: .5em .5em 0;
 }
 
-.k-filter-menu .k-button {
+.k-filter-menu .k-action-buttons .k-button {
     margin: 0;
     width: 50%;
     border-radius: 0;
@@ -338,35 +346,21 @@
 }
 
 .k-combobox > .k-dropdown-wrap > .k-i-close {
-    right: 3.3em;
+    right: calc(@combobox-clear-icon-offset);
 }
 
 .k-combobox-clearable {
     .k-input {
-        padding-right: 2.5em;
+        padding-right: @combobox-padding-x;
     }
 }
 
-.k-multiselect > .k-multiselect-wrap > .k-i-close {
-    top: (@grid-size/2 - 1px);
-}
-
 .k-autocomplete .k-i-loading,
 .k-multiselect .k-i-loading
 {
     bottom: 10px;
 }
 
-.k-multiselect > .k-multiselect-wrap > .k-i-close,
-.k-dropdowntree > .k-multiselect-wrap > .k-i-close {
-    top: calc((@input-height - @grid-size) / 2 + @input-padding-y + 1px);
-}
-
-.k-autocomplete > .k-i-close,
-.k-multiselect > .k-multiselect-wrap > .k-i-close {
-    right: 10px;
-}
-
 .k-dropdown-wrap,
 .k-picker-wrap,
 .k-numeric-wrap {
@@ -1006,14 +1000,12 @@ form.k-filter-menu .k-textbox {
 
 .k-rtl .k-widget.k-autocomplete > .k-i-close,
 .k-rtl .k-widget.k-multiselect > .k-multiselect-wrap > .k-i-close {
-    left: 0;
     right: initial;
-    margin-left: 10px;
     margin-right: 0;
 }
 
 .k-rtl .k-widget.k-combobox > .k-dropdown-wrap > .k-i-close {
-    left: 3.3em;
+    left: calc(@combobox-clear-icon-offset);
     right: initial;
 }
 
@@ -1159,7 +1151,7 @@ div.k-spreadsheet-window {
     .k-combobox-clearable {
 
         .k-input {
-            padding-left: 2.5em;
+            padding-left: @combobox-padding-x;
         }
     }