npm - @progress/kendo-theme-classic - Versions diffs - 6.4.0-dev.0 → 6.4.0-dev.1 - Mend

@progress/kendo-theme-classic 6.4.0-dev.0 → 6.4.0-dev.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/dist/all.css +176 -76
package/dist/all.scss +214 -93
package/dist/meta/sassdoc-data.json +988 -1096
package/dist/meta/sassdoc-raw-data.json +495 -545
package/dist/meta/variables.json +16 -16
package/lib/swatches/classic-green-dark.json +1 -1
package/lib/swatches/classic-green.json +1 -1
package/lib/swatches/classic-lavender-dark.json +1 -1
package/lib/swatches/classic-lavender.json +1 -1
package/lib/swatches/classic-main-dark.json +1 -1
package/lib/swatches/classic-main.json +1 -1
package/lib/swatches/classic-metro-dark.json +1 -1
package/lib/swatches/classic-metro.json +1 -1
package/lib/swatches/classic-moonlight.json +1 -1
package/lib/swatches/classic-opal-dark.json +1 -1
package/lib/swatches/classic-opal.json +1 -1
package/lib/swatches/classic-silver-dark.json +1 -1
package/lib/swatches/classic-silver.json +1 -1
package/lib/swatches/classic-uniform.json +1 -1
package/package.json +5 -5
package/scss/drawer/_variables.scss +2 -0
package/scss/fab/_variables.scss +5 -11
package/scss/input/_variables.scss +0 -3

package/dist/meta/sassdoc-raw-data.json CHANGED Viewed

@@ -4887,15 +4887,15 @@
         }
     },
     {
-        "description": "FAB icon width.\n",
+        "description": "Horizontal padding of the FAB icon.\n",
         "commentRange": {
             "start": 34,
             "end": 35
         },
         "context": {
             "type": "variable",
-            "name": "kendo-fab-icon-width",
-            "value": "20px",
+            "name": "kendo-fab-icon-padding-x",
+            "value": "k-map-get( $kendo-spacing, 0.5 )",
             "scope": "default",
             "line": {
                 "start": 36,
@@ -4912,15 +4912,15 @@
         }
     },
     {
-        "description": "FAB icon height.\n",
+        "description": "Vertical padding of the FAB icon.\n",
         "commentRange": {
             "start": 37,
             "end": 38
         },
         "context": {
             "type": "variable",
-            "name": "kendo-fab-icon-height",
-            "value": "$kendo-fab-icon-width",
+            "name": "kendo-fab-icon-padding-y",
+            "value": "$kendo-fab-icon-padding-x",
             "scope": "default",
             "line": {
                 "start": 39,
@@ -5170,7 +5170,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-fab-item-icon-padding-x",
-            "value": "k-map-get( $kendo-spacing, 2 )",
+            "value": "k-map-get( $kendo-spacing, 2 ) + $kendo-fab-icon-padding-x",
             "scope": "default",
             "line": {
                 "start": 72,
@@ -5261,61 +5261,11 @@
             "name": "_variables.scss"
         }
     },
-    {
-        "description": "Width of the FAB item icon.\n",
-        "commentRange": {
-            "start": 82,
-            "end": 83
-        },
-        "context": {
-            "type": "variable",
-            "name": "kendo-fab-item-icon-width",
-            "value": "20px",
-            "scope": "default",
-            "line": {
-                "start": 84,
-                "end": 84
-            }
-        },
-        "group": [
-            "floating-action-button"
-        ],
-        "access": "public",
-        "file": {
-            "path": "fab/_variables.scss",
-            "name": "_variables.scss"
-        }
-    },
-    {
-        "description": "Height of the FAB item icon.\n",
-        "commentRange": {
-            "start": 85,
-            "end": 86
-        },
-        "context": {
-            "type": "variable",
-            "name": "kendo-fab-item-icon-height",
-            "value": "$kendo-fab-item-icon-width",
-            "scope": "default",
-            "line": {
-                "start": 87,
-                "end": 87
-            }
-        },
-        "group": [
-            "floating-action-button"
-        ],
-        "access": "public",
-        "file": {
-            "path": "fab/_variables.scss",
-            "name": "_variables.scss"
-        }
-    },
     {
         "description": "Theme colors map for the FAB.\n",
         "commentRange": {
-            "start": 89,
-            "end": 90
+            "start": 83,
+            "end": 84
         },
         "context": {
             "type": "variable",
@@ -5323,8 +5273,8 @@
             "value": "$kendo-theme-colors",
             "scope": "default",
             "line": {
-                "start": 91,
-                "end": 91
+                "start": 85,
+                "end": 85
             }
         },
         "group": [
@@ -5339,8 +5289,8 @@
     {
         "description": "Size map for the FAB.\n",
         "commentRange": {
-            "start": 93,
-            "end": 94
+            "start": 87,
+            "end": 88
         },
         "context": {
             "type": "variable",
@@ -5348,8 +5298,8 @@
             "value": "(\n    sm: (\n        padding-x: $kendo-fab-sm-padding-x,\n        padding-y: $kendo-fab-sm-padding-y\n    ),\n    md: (\n        padding-x: $kendo-fab-md-padding-x,\n        padding-y: $kendo-fab-md-padding-y\n    ),\n    lg: (\n        padding-x: $kendo-fab-lg-padding-x,\n        padding-y: $kendo-fab-lg-padding-y\n    )\n)",
             "scope": "default",
             "line": {
-                "start": 95,
-                "end": 108
+                "start": 89,
+                "end": 102
             }
         },
         "group": [
@@ -5364,8 +5314,8 @@
     {
         "description": "The base shadow of the FAB.\n",
         "commentRange": {
-            "start": 110,
-            "end": 111
+            "start": 104,
+            "end": 105
         },
         "context": {
             "type": "variable",
@@ -5373,8 +5323,8 @@
             "value": "0 6px 10px rgba( black, .14 ), 0 1px 18px rgba( black, .12 ), 0 3px 5px rgba( black, .2 )",
             "scope": "default",
             "line": {
-                "start": 112,
-                "end": 112
+                "start": 106,
+                "end": 106
             }
         },
         "group": [
@@ -5389,8 +5339,8 @@
     {
         "description": "The disabled shadow of the FAB.\n",
         "commentRange": {
-            "start": 113,
-            "end": 114
+            "start": 107,
+            "end": 108
         },
         "context": {
             "type": "variable",
@@ -5398,8 +5348,8 @@
             "value": "0 6px 10px k-try-tint( rgba( black, .14 ), .5 ), 0 1px 18px k-try-tint( rgba( black, .12 ), .5 ), 0 3px 5px k-try-tint( rgba( black, .2 ), .5 )",
             "scope": "default",
             "line": {
-                "start": 115,
-                "end": 115
+                "start": 109,
+                "end": 109
             }
         },
         "group": [
@@ -5414,8 +5364,8 @@
     {
         "description": "The active shadow of the FAB.\n",
         "commentRange": {
-            "start": 116,
-            "end": 117
+            "start": 110,
+            "end": 111
         },
         "context": {
             "type": "variable",
@@ -5423,8 +5373,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 118,
-                "end": 118
+                "start": 112,
+                "end": 112
             }
         },
         "group": [
@@ -5439,8 +5389,8 @@
     {
         "description": "The outline style of the FAB.\n",
         "commentRange": {
-            "start": 119,
-            "end": 120
+            "start": 113,
+            "end": 114
         },
         "context": {
             "type": "variable",
@@ -5448,8 +5398,8 @@
             "value": "solid",
             "scope": "default",
             "line": {
-                "start": 121,
-                "end": 121
+                "start": 115,
+                "end": 115
             }
         },
         "group": [
@@ -5464,8 +5414,8 @@
     {
         "description": "The outline width of the FAB.\n",
         "commentRange": {
-            "start": 122,
-            "end": 123
+            "start": 116,
+            "end": 117
         },
         "context": {
             "type": "variable",
@@ -5473,8 +5423,8 @@
             "value": "k-map-get( $kendo-spacing, 0.5 )",
             "scope": "default",
             "line": {
-                "start": 124,
-                "end": 124
+                "start": 118,
+                "end": 118
             }
         },
         "group": [
@@ -5489,8 +5439,8 @@
     {
         "description": "The base text color of the FAB item.\n",
         "commentRange": {
-            "start": 127,
-            "end": 128
+            "start": 121,
+            "end": 122
         },
         "context": {
             "type": "variable",
@@ -5498,8 +5448,8 @@
             "value": "$kendo-component-text",
             "scope": "default",
             "line": {
-                "start": 129,
-                "end": 129
+                "start": 123,
+                "end": 123
             }
         },
         "group": [
@@ -5514,8 +5464,8 @@
     {
         "description": "The base background color of the FAB item.\n",
         "commentRange": {
-            "start": 130,
-            "end": 131
+            "start": 124,
+            "end": 125
         },
         "context": {
             "type": "variable",
@@ -5523,8 +5473,8 @@
             "value": "$kendo-component-bg",
             "scope": "default",
             "line": {
-                "start": 132,
-                "end": 132
+                "start": 126,
+                "end": 126
             }
         },
         "group": [
@@ -5539,8 +5489,8 @@
     {
         "description": "The base border color of the FAB item.\n",
         "commentRange": {
-            "start": 133,
-            "end": 134
+            "start": 127,
+            "end": 128
         },
         "context": {
             "type": "variable",
@@ -5548,8 +5498,8 @@
             "value": "$kendo-component-border",
             "scope": "default",
             "line": {
-                "start": 135,
-                "end": 135
+                "start": 129,
+                "end": 129
             }
         },
         "group": [
@@ -5564,8 +5514,8 @@
     {
         "description": "The base text color of the FAB item icon.\n",
         "commentRange": {
-            "start": 137,
-            "end": 138
+            "start": 131,
+            "end": 132
         },
         "context": {
             "type": "variable",
@@ -5573,8 +5523,8 @@
             "value": "$kendo-button-text",
             "scope": "default",
             "line": {
-                "start": 139,
-                "end": 139
+                "start": 133,
+                "end": 133
             }
         },
         "group": [
@@ -5589,8 +5539,8 @@
     {
         "description": "The base background color of the FAB item icon.\n",
         "commentRange": {
-            "start": 140,
-            "end": 141
+            "start": 134,
+            "end": 135
         },
         "context": {
             "type": "variable",
@@ -5598,8 +5548,8 @@
             "value": "$kendo-button-bg",
             "scope": "default",
             "line": {
-                "start": 142,
-                "end": 142
+                "start": 136,
+                "end": 136
             }
         },
         "group": [
@@ -5614,8 +5564,8 @@
     {
         "description": "The base border color of the FAB item icon.\n",
         "commentRange": {
-            "start": 143,
-            "end": 144
+            "start": 137,
+            "end": 138
         },
         "context": {
             "type": "variable",
@@ -5623,8 +5573,8 @@
             "value": "$kendo-button-border",
             "scope": "default",
             "line": {
-                "start": 145,
-                "end": 145
+                "start": 139,
+                "end": 139
             }
         },
         "group": [
@@ -5639,8 +5589,8 @@
     {
         "description": "The base shadow of the FAB item.\n",
         "commentRange": {
-            "start": 147,
-            "end": 148
+            "start": 141,
+            "end": 142
         },
         "context": {
             "type": "variable",
@@ -5648,8 +5598,8 @@
             "value": "$kendo-fab-shadow",
             "scope": "default",
             "line": {
-                "start": 149,
-                "end": 149
+                "start": 143,
+                "end": 143
             }
         },
         "group": [
@@ -5664,8 +5614,8 @@
     {
         "description": "The disabled shadow of the FAB item.\n",
         "commentRange": {
-            "start": 150,
-            "end": 151
+            "start": 144,
+            "end": 145
         },
         "context": {
             "type": "variable",
@@ -5673,8 +5623,8 @@
             "value": "$kendo-fab-disabled-shadow",
             "scope": "default",
             "line": {
-                "start": 152,
-                "end": 152
+                "start": 146,
+                "end": 146
             }
         },
         "group": [
@@ -5689,8 +5639,8 @@
     {
         "description": "The active shadow of the FAB item.\n",
         "commentRange": {
-            "start": 153,
-            "end": 154
+            "start": 147,
+            "end": 148
         },
         "context": {
             "type": "variable",
@@ -5698,8 +5648,8 @@
             "value": "$kendo-fab-active-shadow",
             "scope": "default",
             "line": {
-                "start": 155,
-                "end": 155
+                "start": 149,
+                "end": 149
             }
         },
         "group": [
@@ -5714,8 +5664,8 @@
     {
         "description": "The outline style of the FAB item.\n",
         "commentRange": {
-            "start": 156,
-            "end": 157
+            "start": 150,
+            "end": 151
         },
         "context": {
             "type": "variable",
@@ -5723,8 +5673,8 @@
             "value": "solid",
             "scope": "default",
             "line": {
-                "start": 158,
-                "end": 158
+                "start": 152,
+                "end": 152
             }
         },
         "group": [
@@ -5739,8 +5689,8 @@
     {
         "description": "The outline width of the FAB item.\n",
         "commentRange": {
-            "start": 159,
-            "end": 160
+            "start": 153,
+            "end": 154
         },
         "context": {
             "type": "variable",
@@ -5748,8 +5698,8 @@
             "value": "k-map-get( $kendo-spacing, 0.5 )",
             "scope": "default",
             "line": {
-                "start": 161,
-                "end": 161
+                "start": 155,
+                "end": 155
             }
         },
         "group": [
@@ -5764,8 +5714,8 @@
     {
         "description": "The outline color of the FAB item.\n",
         "commentRange": {
-            "start": 162,
-            "end": 163
+            "start": 156,
+            "end": 157
         },
         "context": {
             "type": "variable",
@@ -5773,8 +5723,8 @@
             "value": "rgba(0, 0, 0, .08)",
             "scope": "default",
             "line": {
-                "start": 164,
-                "end": 164
+                "start": 158,
+                "end": 158
             }
         },
         "group": [
@@ -7370,11 +7320,11 @@
         "context": {
             "type": "variable",
             "name": "kendo-input-sizes",
-            "value": "(\n    sm: (\n        padding-x: $kendo-input-sm-padding-x,\n        padding-y: $kendo-input-sm-padding-y,\n        font-size: $kendo-input-sm-font-size,\n        line-height: $kendo-input-sm-line-height,\n        icon-size: calc( #{$kendo-icon-size} + #{$kendo-input-sm-padding-y * 2} ),\n        button-padding-x: $kendo-input-sm-padding-y,\n        button-padding-y: $kendo-input-sm-padding-y\n    ),\n    md: (\n        padding-x: $kendo-input-md-padding-x,\n        padding-y: $kendo-input-md-padding-y,\n        font-size: $kendo-input-md-font-size,\n        line-height: $kendo-input-md-line-height,\n        icon-size: calc( #{$kendo-icon-size} + #{$kendo-input-md-padding-y * 2} ),\n        button-padding-x: $kendo-input-md-padding-y,\n        button-padding-y: $kendo-input-md-padding-y\n    ),\n    lg: (\n        padding-x: $kendo-input-lg-padding-x,\n        padding-y: $kendo-input-lg-padding-y,\n        font-size: $kendo-input-lg-font-size,\n        line-height: $kendo-input-lg-line-height,\n        icon-size: calc( #{$kendo-icon-size} + #{$kendo-input-lg-padding-y * 2} ),\n        button-padding-x: $kendo-input-lg-padding-y,\n        button-padding-y: $kendo-input-lg-padding-y\n    )\n)",
+            "value": "(\n    sm: (\n        padding-x: $kendo-input-sm-padding-x,\n        padding-y: $kendo-input-sm-padding-y,\n        font-size: $kendo-input-sm-font-size,\n        line-height: $kendo-input-sm-line-height,\n        button-padding-x: $kendo-input-sm-padding-y,\n        button-padding-y: $kendo-input-sm-padding-y\n    ),\n    md: (\n        padding-x: $kendo-input-md-padding-x,\n        padding-y: $kendo-input-md-padding-y,\n        font-size: $kendo-input-md-font-size,\n        line-height: $kendo-input-md-line-height,\n        button-padding-x: $kendo-input-md-padding-y,\n        button-padding-y: $kendo-input-md-padding-y\n    ),\n    lg: (\n        padding-x: $kendo-input-lg-padding-x,\n        padding-y: $kendo-input-lg-padding-y,\n        font-size: $kendo-input-lg-font-size,\n        line-height: $kendo-input-lg-line-height,\n        button-padding-x: $kendo-input-lg-padding-y,\n        button-padding-y: $kendo-input-lg-padding-y\n    )\n)",
             "scope": "default",
             "line": {
                 "start": 74,
-                "end": 102
+                "end": 99
             }
         },
         "group": [
@@ -7389,8 +7339,8 @@
     {
         "description": "The background color of the Input components.\n",
         "commentRange": {
-            "start": 104,
-            "end": 105
+            "start": 101,
+            "end": 102
         },
         "context": {
             "type": "variable",
@@ -7398,8 +7348,8 @@
             "value": "$kendo-component-bg",
             "scope": "default",
             "line": {
-                "start": 106,
-                "end": 106
+                "start": 103,
+                "end": 103
             }
         },
         "group": [
@@ -7414,8 +7364,8 @@
     {
         "description": "The text color of the Input components.\n",
         "commentRange": {
-            "start": 107,
-            "end": 108
+            "start": 104,
+            "end": 105
         },
         "context": {
             "type": "variable",
@@ -7423,8 +7373,8 @@
             "value": "$kendo-component-text",
             "scope": "default",
             "line": {
-                "start": 109,
-                "end": 109
+                "start": 106,
+                "end": 106
             }
         },
         "group": [
@@ -7439,8 +7389,8 @@
     {
         "description": "The border color of the Input components.\n",
         "commentRange": {
-            "start": 110,
-            "end": 111
+            "start": 107,
+            "end": 108
         },
         "context": {
             "type": "variable",
@@ -7448,8 +7398,8 @@
             "value": "$kendo-button-border",
             "scope": "default",
             "line": {
-                "start": 112,
-                "end": 112
+                "start": 109,
+                "end": 109
             }
         },
         "group": [
@@ -7464,8 +7414,8 @@
     {
         "description": "The shadow of the Input components.\n",
         "commentRange": {
-            "start": 113,
-            "end": 114
+            "start": 110,
+            "end": 111
         },
         "context": {
             "type": "variable",
@@ -7473,8 +7423,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 115,
-                "end": 115
+                "start": 112,
+                "end": 112
             }
         },
         "group": [
@@ -7489,8 +7439,8 @@
     {
         "description": "The background color of the hovered Input components.\n",
         "commentRange": {
-            "start": 117,
-            "end": 118
+            "start": 114,
+            "end": 115
         },
         "context": {
             "type": "variable",
@@ -7498,8 +7448,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 119,
-                "end": 119
+                "start": 116,
+                "end": 116
             }
         },
         "group": [
@@ -7514,8 +7464,8 @@
     {
         "description": "The text color of the hovered Input components.\n",
         "commentRange": {
-            "start": 120,
-            "end": 121
+            "start": 117,
+            "end": 118
         },
         "context": {
             "type": "variable",
@@ -7523,8 +7473,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 122,
-                "end": 122
+                "start": 119,
+                "end": 119
             }
         },
         "group": [
@@ -7539,8 +7489,8 @@
     {
         "description": "The border color of the hovered Input components.\n",
         "commentRange": {
-            "start": 123,
-            "end": 124
+            "start": 120,
+            "end": 121
         },
         "context": {
             "type": "variable",
@@ -7548,8 +7498,8 @@
             "value": "$kendo-button-hover-border",
             "scope": "default",
             "line": {
-                "start": 125,
-                "end": 125
+                "start": 122,
+                "end": 122
             }
         },
         "group": [
@@ -7564,8 +7514,8 @@
     {
         "description": "The shadow of the hovered Input components.\n",
         "commentRange": {
-            "start": 126,
-            "end": 127
+            "start": 123,
+            "end": 124
         },
         "context": {
             "type": "variable",
@@ -7573,8 +7523,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 128,
-                "end": 128
+                "start": 125,
+                "end": 125
             }
         },
         "group": [
@@ -7589,8 +7539,8 @@
     {
         "description": "The background color of the focused Input components.\n",
         "commentRange": {
-            "start": 130,
-            "end": 131
+            "start": 127,
+            "end": 128
         },
         "context": {
             "type": "variable",
@@ -7598,8 +7548,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 132,
-                "end": 132
+                "start": 129,
+                "end": 129
             }
         },
         "group": [
@@ -7614,8 +7564,8 @@
     {
         "description": "The text color of the focused Input components.\n",
         "commentRange": {
-            "start": 133,
-            "end": 134
+            "start": 130,
+            "end": 131
         },
         "context": {
             "type": "variable",
@@ -7623,8 +7573,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 135,
-                "end": 135
+                "start": 132,
+                "end": 132
             }
         },
         "group": [
@@ -7639,8 +7589,8 @@
     {
         "description": "The border color of the focused Input components.\n",
         "commentRange": {
-            "start": 136,
-            "end": 137
+            "start": 133,
+            "end": 134
         },
         "context": {
             "type": "variable",
@@ -7648,8 +7598,8 @@
             "value": "rgba( black, .1 )",
             "scope": "default",
             "line": {
-                "start": 138,
-                "end": 138
+                "start": 135,
+                "end": 135
             }
         },
         "group": [
@@ -7664,8 +7614,8 @@
     {
         "description": "The shadow of the focused Input components.\n",
         "commentRange": {
-            "start": 139,
-            "end": 140
+            "start": 136,
+            "end": 137
         },
         "context": {
             "type": "variable",
@@ -7673,8 +7623,8 @@
             "value": "0 2px 4px 0 rgba( black, .03 ), 0 4px 5px 0 rgba( black, .04 )",
             "scope": "default",
             "line": {
-                "start": 141,
-                "end": 141
+                "start": 138,
+                "end": 138
             }
         },
         "group": [
@@ -7689,8 +7639,8 @@
     {
         "description": "The background color of the selected Input components.\n",
         "commentRange": {
-            "start": 143,
-            "end": 144
+            "start": 140,
+            "end": 141
         },
         "context": {
             "type": "variable",
@@ -7698,8 +7648,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 145,
-                "end": 145
+                "start": 142,
+                "end": 142
             }
         },
         "group": [
@@ -7714,8 +7664,8 @@
     {
         "description": "The text color of the selected Input components.\n",
         "commentRange": {
-            "start": 146,
-            "end": 147
+            "start": 143,
+            "end": 144
         },
         "context": {
             "type": "variable",
@@ -7723,8 +7673,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 148,
-                "end": 148
+                "start": 145,
+                "end": 145
             }
         },
         "group": [
@@ -7739,8 +7689,8 @@
     {
         "description": "The background color of the disabled Input components.\n",
         "commentRange": {
-            "start": 150,
-            "end": 151
+            "start": 147,
+            "end": 148
         },
         "context": {
             "type": "variable",
@@ -7748,8 +7698,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 152,
-                "end": 152
+                "start": 149,
+                "end": 149
             }
         },
         "group": [
@@ -7764,8 +7714,8 @@
     {
         "description": "The text color of the disabled Input components.\n",
         "commentRange": {
-            "start": 153,
-            "end": 154
+            "start": 150,
+            "end": 151
         },
         "context": {
             "type": "variable",
@@ -7773,8 +7723,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 155,
-                "end": 155
+                "start": 152,
+                "end": 152
             }
         },
         "group": [
@@ -7789,8 +7739,8 @@
     {
         "description": "The border color of the disabled Input components.\n",
         "commentRange": {
-            "start": 156,
-            "end": 157
+            "start": 153,
+            "end": 154
         },
         "context": {
             "type": "variable",
@@ -7798,8 +7748,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 158,
-                "end": 158
+                "start": 155,
+                "end": 155
             }
         },
         "group": [
@@ -7814,8 +7764,8 @@
     {
         "description": "The gradient of the disabled Input components.\n",
         "commentRange": {
-            "start": 159,
-            "end": 160
+            "start": 156,
+            "end": 157
         },
         "context": {
             "type": "variable",
@@ -7823,8 +7773,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 161,
-                "end": 161
+                "start": 158,
+                "end": 158
             }
         },
         "group": [
@@ -7839,8 +7789,8 @@
     {
         "description": "The shadow of the disabled Input components.\n",
         "commentRange": {
-            "start": 162,
-            "end": 163
+            "start": 159,
+            "end": 160
         },
         "context": {
             "type": "variable",
@@ -7848,8 +7798,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 164,
-                "end": 164
+                "start": 161,
+                "end": 161
             }
         },
         "group": [
@@ -7864,8 +7814,8 @@
     {
         "description": "The background color of the outline Input components.\n",
         "commentRange": {
-            "start": 166,
-            "end": 167
+            "start": 163,
+            "end": 164
         },
         "context": {
             "type": "variable",
@@ -7873,8 +7823,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 168,
-                "end": 168
+                "start": 165,
+                "end": 165
             }
         },
         "group": [
@@ -7889,8 +7839,8 @@
     {
         "description": "The text color of the outline Input components.\n",
         "commentRange": {
-            "start": 169,
-            "end": 170
+            "start": 166,
+            "end": 167
         },
         "context": {
             "type": "variable",
@@ -7898,8 +7848,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 171,
-                "end": 171
+                "start": 168,
+                "end": 168
             }
         },
         "group": [
@@ -7914,8 +7864,8 @@
     {
         "description": "The border color of the outline Input components.\n",
         "commentRange": {
-            "start": 172,
-            "end": 173
+            "start": 169,
+            "end": 170
         },
         "context": {
             "type": "variable",
@@ -7923,8 +7873,8 @@
             "value": "rgba( $kendo-button-text, .5)",
             "scope": "default",
             "line": {
-                "start": 174,
-                "end": 174
+                "start": 171,
+                "end": 171
             }
         },
         "group": [
@@ -7939,8 +7889,8 @@
     {
         "description": "The background color of the outline hovered Input components.\n",
         "commentRange": {
-            "start": 176,
-            "end": 177
+            "start": 173,
+            "end": 174
         },
         "context": {
             "type": "variable",
@@ -7948,8 +7898,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 178,
-                "end": 178
+                "start": 175,
+                "end": 175
             }
         },
         "group": [
@@ -7964,8 +7914,8 @@
     {
         "description": "The text color of the outline hovered Input components.\n",
         "commentRange": {
-            "start": 179,
-            "end": 180
+            "start": 176,
+            "end": 177
         },
         "context": {
             "type": "variable",
@@ -7973,8 +7923,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 181,
-                "end": 181
+                "start": 178,
+                "end": 178
             }
         },
         "group": [
@@ -7989,8 +7939,8 @@
     {
         "description": "The border color of the outline hovered Input components.\n",
         "commentRange": {
-            "start": 182,
-            "end": 183
+            "start": 179,
+            "end": 180
         },
         "context": {
             "type": "variable",
@@ -7998,8 +7948,8 @@
             "value": "rgba( $kendo-button-text, .8)",
             "scope": "default",
             "line": {
-                "start": 184,
-                "end": 184
+                "start": 181,
+                "end": 181
             }
         },
         "group": [
@@ -8014,8 +7964,8 @@
     {
         "description": "The background color of the outline focused Input components.\n",
         "commentRange": {
-            "start": 186,
-            "end": 187
+            "start": 183,
+            "end": 184
         },
         "context": {
             "type": "variable",
@@ -8023,8 +7973,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 188,
-                "end": 188
+                "start": 185,
+                "end": 185
             }
         },
         "group": [
@@ -8039,8 +7989,8 @@
     {
         "description": "The text color of the outline focused Input components.\n",
         "commentRange": {
-            "start": 189,
-            "end": 190
+            "start": 186,
+            "end": 187
         },
         "context": {
             "type": "variable",
@@ -8048,8 +7998,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 191,
-                "end": 191
+                "start": 188,
+                "end": 188
             }
         },
         "group": [
@@ -8064,8 +8014,8 @@
     {
         "description": "The border color of the outline focused Input components.\n",
         "commentRange": {
-            "start": 192,
-            "end": 193
+            "start": 189,
+            "end": 190
         },
         "context": {
             "type": "variable",
@@ -8073,8 +8023,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 194,
-                "end": 194
+                "start": 191,
+                "end": 191
             }
         },
         "group": [
@@ -8089,8 +8039,8 @@
     {
         "description": "The shadow of the outline focused Input components.\n",
         "commentRange": {
-            "start": 195,
-            "end": 196
+            "start": 192,
+            "end": 193
         },
         "context": {
             "type": "variable",
@@ -8098,8 +8048,8 @@
             "value": "$kendo-input-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 197,
-                "end": 197
+                "start": 194,
+                "end": 194
             }
         },
         "group": [
@@ -8114,8 +8064,8 @@
     {
         "description": "The background color of the flat Input components.\n",
         "commentRange": {
-            "start": 199,
-            "end": 200
+            "start": 196,
+            "end": 197
         },
         "context": {
             "type": "variable",
@@ -8123,8 +8073,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 201,
-                "end": 201
+                "start": 198,
+                "end": 198
             }
         },
         "group": [
@@ -8139,8 +8089,8 @@
     {
         "description": "The text color of the flat Input components.\n",
         "commentRange": {
-            "start": 202,
-            "end": 203
+            "start": 199,
+            "end": 200
         },
         "context": {
             "type": "variable",
@@ -8148,8 +8098,8 @@
             "value": "$kendo-input-text",
             "scope": "default",
             "line": {
-                "start": 204,
-                "end": 204
+                "start": 201,
+                "end": 201
             }
         },
         "group": [
@@ -8164,8 +8114,8 @@
     {
         "description": "The border color of the flat Input components.\n",
         "commentRange": {
-            "start": 205,
-            "end": 206
+            "start": 202,
+            "end": 203
         },
         "context": {
             "type": "variable",
@@ -8173,8 +8123,8 @@
             "value": "$kendo-input-border",
             "scope": "default",
             "line": {
-                "start": 207,
-                "end": 207
+                "start": 204,
+                "end": 204
             }
         },
         "group": [
@@ -8189,8 +8139,8 @@
     {
         "description": "The background color of the flat hovered Input components.\n",
         "commentRange": {
-            "start": 209,
-            "end": 210
+            "start": 206,
+            "end": 207
         },
         "context": {
             "type": "variable",
@@ -8198,8 +8148,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 211,
-                "end": 211
+                "start": 208,
+                "end": 208
             }
         },
         "group": [
@@ -8214,8 +8164,8 @@
     {
         "description": "The text color of the flat hovered Input components.\n",
         "commentRange": {
-            "start": 212,
-            "end": 213
+            "start": 209,
+            "end": 210
         },
         "context": {
             "type": "variable",
@@ -8223,8 +8173,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 214,
-                "end": 214
+                "start": 211,
+                "end": 211
             }
         },
         "group": [
@@ -8239,8 +8189,8 @@
     {
         "description": "The border color of the flat hovered Input components.\n",
         "commentRange": {
-            "start": 215,
-            "end": 216
+            "start": 212,
+            "end": 213
         },
         "context": {
             "type": "variable",
@@ -8248,8 +8198,8 @@
             "value": "$kendo-input-hover-border",
             "scope": "default",
             "line": {
-                "start": 217,
-                "end": 217
+                "start": 214,
+                "end": 214
             }
         },
         "group": [
@@ -8264,8 +8214,8 @@
     {
         "description": "The background color of the flat focused Input components.\n",
         "commentRange": {
-            "start": 219,
-            "end": 220
+            "start": 216,
+            "end": 217
         },
         "context": {
             "type": "variable",
@@ -8273,8 +8223,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 221,
-                "end": 221
+                "start": 218,
+                "end": 218
             }
         },
         "group": [
@@ -8289,8 +8239,8 @@
     {
         "description": "The text color of the flat focused Input components.\n",
         "commentRange": {
-            "start": 222,
-            "end": 223
+            "start": 219,
+            "end": 220
         },
         "context": {
             "type": "variable",
@@ -8298,8 +8248,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 224,
-                "end": 224
+                "start": 221,
+                "end": 221
             }
         },
         "group": [
@@ -8314,8 +8264,8 @@
     {
         "description": "The border color of the flat focused Input components.\n",
         "commentRange": {
-            "start": 225,
-            "end": 226
+            "start": 222,
+            "end": 223
         },
         "context": {
             "type": "variable",
@@ -8323,8 +8273,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 227,
-                "end": 227
+                "start": 224,
+                "end": 224
             }
         },
         "group": [
@@ -8339,8 +8289,8 @@
     {
         "description": "The shadow of the flat focused Input components.\n",
         "commentRange": {
-            "start": 228,
-            "end": 229
+            "start": 225,
+            "end": 226
         },
         "context": {
             "type": "variable",
@@ -8348,8 +8298,8 @@
             "value": "$kendo-input-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 230,
-                "end": 230
+                "start": 227,
+                "end": 227
             }
         },
         "group": [
@@ -8364,8 +8314,8 @@
     {
         "description": "The text color of the Input placeholder.\n",
         "commentRange": {
-            "start": 232,
-            "end": 233
+            "start": 229,
+            "end": 230
         },
         "context": {
             "type": "variable",
@@ -8373,8 +8323,8 @@
             "value": "$kendo-subtle-text",
             "scope": "default",
             "line": {
-                "start": 234,
-                "end": 234
+                "start": 231,
+                "end": 231
             }
         },
         "group": [
@@ -8389,8 +8339,8 @@
     {
         "description": "The opacity of the Input placeholder.\n",
         "commentRange": {
-            "start": 235,
-            "end": 236
+            "start": 232,
+            "end": 233
         },
         "context": {
             "type": "variable",
@@ -8398,8 +8348,8 @@
             "value": "1",
             "scope": "default",
             "line": {
-                "start": 237,
-                "end": 237
+                "start": 234,
+                "end": 234
             }
         },
         "group": [
@@ -8414,8 +8364,8 @@
     {
         "description": "The color of the Input clear value icon.\n",
         "commentRange": {
-            "start": 240,
-            "end": 241
+            "start": 237,
+            "end": 238
         },
         "context": {
             "type": "variable",
@@ -8423,8 +8373,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 242,
-                "end": 242
+                "start": 239,
+                "end": 239
             }
         },
         "group": [
@@ -8439,8 +8389,8 @@
     {
         "description": "The opacity of the Input clear value icon.\n",
         "commentRange": {
-            "start": 243,
-            "end": 244
+            "start": 240,
+            "end": 241
         },
         "context": {
             "type": "variable",
@@ -8448,8 +8398,8 @@
             "value": ".5",
             "scope": "default",
             "line": {
-                "start": 245,
-                "end": 245
+                "start": 242,
+                "end": 242
             }
         },
         "group": [
@@ -8464,8 +8414,8 @@
     {
         "description": "The color of the hovered Input clear value icon.\n",
         "commentRange": {
-            "start": 246,
-            "end": 247
+            "start": 243,
+            "end": 244
         },
         "context": {
             "type": "variable",
@@ -8473,8 +8423,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 248,
-                "end": 248
+                "start": 245,
+                "end": 245
             }
         },
         "group": [
@@ -8489,8 +8439,8 @@
     {
         "description": "The opacity of the hovered Input clear value icon.\n",
         "commentRange": {
-            "start": 249,
-            "end": 250
+            "start": 246,
+            "end": 247
         },
         "context": {
             "type": "variable",
@@ -8498,8 +8448,8 @@
             "value": "1",
             "scope": "default",
             "line": {
-                "start": 251,
-                "end": 251
+                "start": 248,
+                "end": 248
             }
         },
         "group": [
@@ -8514,8 +8464,8 @@
     {
         "description": "The vertical margin of the clear value icon.\n",
         "commentRange": {
-            "start": 253,
-            "end": 254
+            "start": 250,
+            "end": 251
         },
         "context": {
             "type": "variable",
@@ -8523,8 +8473,8 @@
             "value": "k-map-get( $kendo-spacing, 0.5 )",
             "scope": "default",
             "line": {
-                "start": 255,
-                "end": 255
+                "start": 252,
+                "end": 252
             }
         },
         "group": [
@@ -8539,8 +8489,8 @@
     {
         "description": "The horizontal margin of the clear value icon.\n",
         "commentRange": {
-            "start": 256,
-            "end": 257
+            "start": 253,
+            "end": 254
         },
         "context": {
             "type": "variable",
@@ -8548,8 +8498,8 @@
             "value": "$kendo-input-values-margin-y",
             "scope": "default",
             "line": {
-                "start": 258,
-                "end": 258
+                "start": 255,
+                "end": 255
             }
         },
         "group": [
@@ -8564,8 +8514,8 @@
     {
         "description": "The width of the Input button.\n",
         "commentRange": {
-            "start": 261,
-            "end": 262
+            "start": 258,
+            "end": 259
         },
         "context": {
             "type": "variable",
@@ -8573,8 +8523,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 263,
-                "end": 263
+                "start": 260,
+                "end": 260
             }
         },
         "group": [
@@ -8589,8 +8539,8 @@
     {
         "description": "The border width of the Input button.\n",
         "commentRange": {
-            "start": 264,
-            "end": 265
+            "start": 261,
+            "end": 262
         },
         "context": {
             "type": "variable",
@@ -8598,8 +8548,8 @@
             "value": "1px",
             "scope": "default",
             "line": {
-                "start": 266,
-                "end": 266
+                "start": 263,
+                "end": 263
             }
         },
         "group": [
@@ -8614,8 +8564,8 @@
     {
         "description": "The width of the Input spinner button.\n",
         "commentRange": {
-            "start": 267,
-            "end": 268
+            "start": 264,
+            "end": 265
         },
         "context": {
             "type": "variable",
@@ -8623,8 +8573,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 269,
-                "end": 269
+                "start": 266,
+                "end": 266
             }
         },
         "group": [
@@ -8639,8 +8589,8 @@
     {
         "description": "The icon offset of the Input spinner button.\n",
         "commentRange": {
-            "start": 270,
-            "end": 271
+            "start": 267,
+            "end": 268
         },
         "context": {
             "type": "variable",
@@ -8648,8 +8598,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 272,
-                "end": 272
+                "start": 269,
+                "end": 269
             }
         },
         "group": [
@@ -8664,8 +8614,8 @@
     {
         "description": "The color of the Input separator.\n",
         "commentRange": {
-            "start": 275,
-            "end": 276
+            "start": 272,
+            "end": 273
         },
         "context": {
             "type": "variable",
@@ -8673,8 +8623,8 @@
             "value": "$kendo-input-text",
             "scope": "default",
             "line": {
-                "start": 277,
-                "end": 277
+                "start": 274,
+                "end": 274
             }
         },
         "group": [
@@ -8689,8 +8639,8 @@
     {
         "description": "The opacity of the Input separator.\n",
         "commentRange": {
-            "start": 278,
-            "end": 279
+            "start": 275,
+            "end": 276
         },
         "context": {
             "type": "variable",
@@ -8698,8 +8648,8 @@
             "value": ".5",
             "scope": "default",
             "line": {
-                "start": 280,
-                "end": 280
+                "start": 277,
+                "end": 277
             }
         },
         "group": [
@@ -8714,8 +8664,8 @@
     {
         "description": "The border color of the invalid Input components.\n",
         "commentRange": {
-            "start": 283,
-            "end": 284
+            "start": 280,
+            "end": 281
         },
         "context": {
             "type": "variable",
@@ -8723,8 +8673,8 @@
             "value": "$kendo-invalid-border",
             "scope": "default",
             "line": {
-                "start": 285,
-                "end": 285
+                "start": 282,
+                "end": 282
             }
         },
         "group": [
@@ -8739,8 +8689,8 @@
     {
         "description": "The shadow of the invalid Input components.\n",
         "commentRange": {
-            "start": 286,
-            "end": 287
+            "start": 283,
+            "end": 284
         },
         "context": {
             "type": "variable",
@@ -8748,8 +8698,8 @@
             "value": "$kendo-invalid-shadow",
             "scope": "default",
             "line": {
-                "start": 288,
-                "end": 288
+                "start": 285,
+                "end": 285
             }
         },
         "group": [
@@ -12014,14 +11964,39 @@
     {
         "description": "The background color of the Picker components.\n",
         "commentRange": {
-            "start": 290,
-            "end": 291
+            "start": 287,
+            "end": 288
         },
         "context": {
             "type": "variable",
             "name": "kendo-picker-bg",
             "value": "$kendo-button-bg",
             "scope": "default",
+            "line": {
+                "start": 289,
+                "end": 289
+            }
+        },
+        "group": [
+            "picker"
+        ],
+        "access": "public",
+        "file": {
+            "path": "input/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The text color of the Picker components.\n",
+        "commentRange": {
+            "start": 290,
+            "end": 291
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-picker-text",
+            "value": "$kendo-button-text",
+            "scope": "default",
             "line": {
                 "start": 292,
                 "end": 292
@@ -12037,15 +12012,15 @@
         }
     },
     {
-        "description": "The text color of the Picker components.\n",
+        "description": "The border color of the Picker components.\n",
         "commentRange": {
             "start": 293,
             "end": 294
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-text",
-            "value": "$kendo-button-text",
+            "name": "kendo-picker-border",
+            "value": "$kendo-button-border",
             "scope": "default",
             "line": {
                 "start": 295,
@@ -12062,15 +12037,15 @@
         }
     },
     {
-        "description": "The border color of the Picker components.\n",
+        "description": "The gradient of the Picker components.\n",
         "commentRange": {
             "start": 296,
             "end": 297
         },
         "context": {
-            "type": "variable",
-            "name": "kendo-picker-border",
-            "value": "$kendo-button-border",
+            "type": "variable",
+            "name": "kendo-picker-gradient",
+            "value": "$kendo-button-gradient",
             "scope": "default",
             "line": {
                 "start": 298,
@@ -12087,15 +12062,15 @@
         }
     },
     {
-        "description": "The gradient of the Picker components.\n",
+        "description": "The shadow of the Picker components.\n",
         "commentRange": {
             "start": 299,
             "end": 300
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-gradient",
-            "value": "$kendo-button-gradient",
+            "name": "kendo-picker-shadow",
+            "value": "$kendo-button-shadow",
             "scope": "default",
             "line": {
                 "start": 301,
@@ -12112,19 +12087,19 @@
         }
     },
     {
-        "description": "The shadow of the Picker components.\n",
+        "description": "The background color of the hovered Picker components.\n",
         "commentRange": {
-            "start": 302,
-            "end": 303
+            "start": 303,
+            "end": 304
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-shadow",
-            "value": "$kendo-button-shadow",
+            "name": "kendo-picker-hover-bg",
+            "value": "$kendo-button-hover-bg",
             "scope": "default",
             "line": {
-                "start": 304,
-                "end": 304
+                "start": 305,
+                "end": 305
             }
         },
         "group": [
@@ -12137,15 +12112,15 @@
         }
     },
     {
-        "description": "The background color of the hovered Picker components.\n",
+        "description": "The text color of the hovered Picker components.\n",
         "commentRange": {
             "start": 306,
             "end": 307
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-hover-bg",
-            "value": "$kendo-button-hover-bg",
+            "name": "kendo-picker-hover-text",
+            "value": "$kendo-button-hover-text",
             "scope": "default",
             "line": {
                 "start": 308,
@@ -12162,15 +12137,15 @@
         }
     },
     {
-        "description": "The text color of the hovered Picker components.\n",
+        "description": "The border color of the hovered Picker components.\n",
         "commentRange": {
             "start": 309,
             "end": 310
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-hover-text",
-            "value": "$kendo-button-hover-text",
+            "name": "kendo-picker-hover-border",
+            "value": "$kendo-button-hover-border",
             "scope": "default",
             "line": {
                 "start": 311,
@@ -12187,15 +12162,15 @@
         }
     },
     {
-        "description": "The border color of the hovered Picker components.\n",
+        "description": "The gradient of the hovered Picker components.\n",
         "commentRange": {
             "start": 312,
             "end": 313
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-hover-border",
-            "value": "$kendo-button-hover-border",
+            "name": "kendo-picker-hover-gradient",
+            "value": "$kendo-button-hover-gradient",
             "scope": "default",
             "line": {
                 "start": 314,
@@ -12212,15 +12187,15 @@
         }
     },
     {
-        "description": "The gradient of the hovered Picker components.\n",
+        "description": "The shadow of the hovered Picker components.\n",
         "commentRange": {
             "start": 315,
             "end": 316
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-hover-gradient",
-            "value": "$kendo-button-hover-gradient",
+            "name": "kendo-picker-hover-shadow",
+            "value": "$kendo-button-hover-shadow",
             "scope": "default",
             "line": {
                 "start": 317,
@@ -12237,19 +12212,19 @@
         }
     },
     {
-        "description": "The shadow of the hovered Picker components.\n",
+        "description": "The background color of the focused Picker components.\n",
         "commentRange": {
-            "start": 318,
-            "end": 319
+            "start": 319,
+            "end": 320
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-hover-shadow",
-            "value": "$kendo-button-hover-shadow",
+            "name": "kendo-picker-focus-bg",
+            "value": "$kendo-button-focus-bg",
             "scope": "default",
             "line": {
-                "start": 320,
-                "end": 320
+                "start": 321,
+                "end": 321
             }
         },
         "group": [
@@ -12262,15 +12237,15 @@
         }
     },
     {
-        "description": "The background color of the focused Picker components.\n",
+        "description": "The text color of the focused Picker components.\n",
         "commentRange": {
             "start": 322,
             "end": 323
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-focus-bg",
-            "value": "$kendo-button-focus-bg",
+            "name": "kendo-picker-focus-text",
+            "value": "$kendo-button-focus-text",
             "scope": "default",
             "line": {
                 "start": 324,
@@ -12287,15 +12262,15 @@
         }
     },
     {
-        "description": "The text color of the focused Picker components.\n",
+        "description": "The border color of the focused Picker components.\n",
         "commentRange": {
             "start": 325,
             "end": 326
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-focus-text",
-            "value": "$kendo-button-focus-text",
+            "name": "kendo-picker-focus-border",
+            "value": "$kendo-button-focus-border",
             "scope": "default",
             "line": {
                 "start": 327,
@@ -12312,15 +12287,15 @@
         }
     },
     {
-        "description": "The border color of the focused Picker components.\n",
+        "description": "The gradient of the focused Picker components.\n",
         "commentRange": {
             "start": 328,
             "end": 329
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-focus-border",
-            "value": "$kendo-button-focus-border",
+            "name": "kendo-picker-focus-gradient",
+            "value": "$kendo-button-focus-gradient",
             "scope": "default",
             "line": {
                 "start": 330,
@@ -12337,15 +12312,15 @@
         }
     },
     {
-        "description": "The gradient of the focused Picker components.\n",
+        "description": "The shadow of the focused Picker components.\n",
         "commentRange": {
             "start": 331,
             "end": 332
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-focus-gradient",
-            "value": "$kendo-button-focus-gradient",
+            "name": "kendo-picker-focus-shadow",
+            "value": "$kendo-button-focus-shadow",
             "scope": "default",
             "line": {
                 "start": 333,
@@ -12362,19 +12337,19 @@
         }
     },
     {
-        "description": "The shadow of the focused Picker components.\n",
+        "description": "The background color of the disabled Picker components.\n",
         "commentRange": {
-            "start": 334,
-            "end": 335
+            "start": 335,
+            "end": 336
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-focus-shadow",
-            "value": "$kendo-button-focus-shadow",
+            "name": "kendo-picker-disabled-bg",
+            "value": "null",
             "scope": "default",
             "line": {
-                "start": 336,
-                "end": 336
+                "start": 337,
+                "end": 337
             }
         },
         "group": [
@@ -12387,14 +12362,14 @@
         }
     },
     {
-        "description": "The background color of the disabled Picker components.\n",
+        "description": "The text color of the disabled Picker components.\n",
         "commentRange": {
             "start": 338,
             "end": 339
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-disabled-bg",
+            "name": "kendo-picker-disabled-text",
             "value": "null",
             "scope": "default",
             "line": {
@@ -12412,14 +12387,14 @@
         }
     },
     {
-        "description": "The text color of the disabled Picker components.\n",
+        "description": "The border color of the disabled Picker components.\n",
         "commentRange": {
             "start": 341,
             "end": 342
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-disabled-text",
+            "name": "kendo-picker-disabled-border",
             "value": "null",
             "scope": "default",
             "line": {
@@ -12437,14 +12412,14 @@
         }
     },
     {
-        "description": "The border color of the disabled Picker components.\n",
+        "description": "The gradient of the disabled Picker components.\n",
         "commentRange": {
             "start": 344,
             "end": 345
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-disabled-border",
+            "name": "kendo-picker-disabled-gradient",
             "value": "null",
             "scope": "default",
             "line": {
@@ -12462,14 +12437,14 @@
         }
     },
     {
-        "description": "The gradient of the disabled Picker components.\n",
+        "description": "The shadow of the disabled Picker components.\n",
         "commentRange": {
             "start": 347,
             "end": 348
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-disabled-gradient",
+            "name": "kendo-picker-disabled-shadow",
             "value": "null",
             "scope": "default",
             "line": {
@@ -12487,19 +12462,19 @@
         }
     },
     {
-        "description": "The shadow of the disabled Picker components.\n",
+        "description": "The background color of the outline Picker components.\n",
         "commentRange": {
-            "start": 350,
-            "end": 351
+            "start": 351,
+            "end": 352
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-disabled-shadow",
+            "name": "kendo-picker-outline-bg",
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 352,
-                "end": 352
+                "start": 353,
+                "end": 353
             }
         },
         "group": [
@@ -12512,15 +12487,15 @@
         }
     },
     {
-        "description": "The background color of the outline Picker components.\n",
+        "description": "The text color of the outline Picker components.\n",
         "commentRange": {
             "start": 354,
             "end": 355
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-outline-bg",
-            "value": "null",
+            "name": "kendo-picker-outline-text",
+            "value": "$kendo-button-text",
             "scope": "default",
             "line": {
                 "start": 356,
@@ -12537,15 +12512,15 @@
         }
     },
     {
-        "description": "The text color of the outline Picker components.\n",
+        "description": "The border color of the outline Picker components.\n",
         "commentRange": {
             "start": 357,
             "end": 358
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-outline-text",
-            "value": "$kendo-button-text",
+            "name": "kendo-picker-outline-border",
+            "value": "rgba( $kendo-picker-outline-text, .5)",
             "scope": "default",
             "line": {
                 "start": 359,
@@ -12562,19 +12537,19 @@
         }
     },
     {
-        "description": "The border color of the outline Picker components.\n",
+        "description": "The background color of the outline hovered Picker components.\n",
         "commentRange": {
-            "start": 360,
-            "end": 361
+            "start": 361,
+            "end": 362
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-outline-border",
-            "value": "rgba( $kendo-picker-outline-text, .5)",
+            "name": "kendo-picker-outline-hover-bg",
+            "value": "$kendo-picker-outline-text",
             "scope": "default",
             "line": {
-                "start": 362,
-                "end": 362
+                "start": 363,
+                "end": 363
             }
         },
         "group": [
@@ -12587,15 +12562,15 @@
         }
     },
     {
-        "description": "The background color of the outline hovered Picker components.\n",
+        "description": "The text color of the outline hovered Picker components.\n",
         "commentRange": {
             "start": 364,
             "end": 365
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-outline-hover-bg",
-            "value": "$kendo-picker-outline-text",
+            "name": "kendo-picker-outline-hover-text",
+            "value": "k-contrast-color( $kendo-picker-outline-hover-bg )",
             "scope": "default",
             "line": {
                 "start": 366,
@@ -12612,15 +12587,15 @@
         }
     },
     {
-        "description": "The text color of the outline hovered Picker components.\n",
+        "description": "The border color of the outline hovered Picker components.\n",
         "commentRange": {
             "start": 367,
             "end": 368
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-outline-hover-text",
-            "value": "k-contrast-color( $kendo-picker-outline-hover-bg )",
+            "name": "kendo-picker-outline-hover-border",
+            "value": "$kendo-picker-outline-hover-bg",
             "scope": "default",
             "line": {
                 "start": 369,
@@ -12637,19 +12612,19 @@
         }
     },
     {
-        "description": "The border color of the outline hovered Picker components.\n",
+        "description": "The background color of the outline focused Picker components.\n",
         "commentRange": {
-            "start": 370,
-            "end": 371
+            "start": 371,
+            "end": 372
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-outline-hover-border",
-            "value": "$kendo-picker-outline-hover-bg",
+            "name": "kendo-picker-outline-focus-bg",
+            "value": "null",
             "scope": "default",
             "line": {
-                "start": 372,
-                "end": 372
+                "start": 373,
+                "end": 373
             }
         },
         "group": [
@@ -12662,14 +12637,14 @@
         }
     },
     {
-        "description": "The background color of the outline focused Picker components.\n",
+        "description": "The text color of the outline focused Picker components.\n",
         "commentRange": {
             "start": 374,
             "end": 375
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-outline-focus-bg",
+            "name": "kendo-picker-outline-focus-text",
             "value": "null",
             "scope": "default",
             "line": {
@@ -12687,14 +12662,14 @@
         }
     },
     {
-        "description": "The text color of the outline focused Picker components.\n",
+        "description": "The border color of the outline focused Picker components.\n",
         "commentRange": {
             "start": 377,
             "end": 378
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-outline-focus-text",
+            "name": "kendo-picker-outline-focus-border",
             "value": "null",
             "scope": "default",
             "line": {
@@ -12712,15 +12687,15 @@
         }
     },
     {
-        "description": "The border color of the outline focused Picker components.\n",
+        "description": "The shadow of the outline focused Picker components.\n",
         "commentRange": {
             "start": 380,
             "end": 381
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-outline-focus-border",
-            "value": "null",
+            "name": "kendo-picker-outline-focus-shadow",
+            "value": "$kendo-picker-focus-shadow",
             "scope": "default",
             "line": {
                 "start": 382,
@@ -12737,19 +12712,19 @@
         }
     },
     {
-        "description": "The shadow of the outline focused Picker components.\n",
+        "description": "The background color of the outline hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 383,
-            "end": 384
+            "start": 384,
+            "end": 385
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-outline-focus-shadow",
-            "value": "$kendo-picker-focus-shadow",
+            "name": "kendo-picker-outline-hover-focus-bg",
+            "value": "null",
             "scope": "default",
             "line": {
-                "start": 385,
-                "end": 385
+                "start": 386,
+                "end": 386
             }
         },
         "group": [
@@ -12762,14 +12737,14 @@
         }
     },
     {
-        "description": "The background color of the outline hovered and focused Picker components.\n",
+        "description": "The text color of the outline hovered and focused Picker components.\n",
         "commentRange": {
             "start": 387,
             "end": 388
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-outline-hover-focus-bg",
+            "name": "kendo-picker-outline-hover-focus-text",
             "value": "null",
             "scope": "default",
             "line": {
@@ -12787,14 +12762,14 @@
         }
     },
     {
-        "description": "The text color of the outline hovered and focused Picker components.\n",
+        "description": "The border color of the outline hovered and focused Picker components.\n",
         "commentRange": {
             "start": 390,
             "end": 391
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-outline-hover-focus-text",
+            "name": "kendo-picker-outline-hover-focus-border",
             "value": "null",
             "scope": "default",
             "line": {
@@ -12812,19 +12787,19 @@
         }
     },
     {
-        "description": "The border color of the outline hovered and focused Picker components.\n",
+        "description": "The background color of the flat Picker components.\n",
         "commentRange": {
-            "start": 393,
-            "end": 394
+            "start": 394,
+            "end": 395
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-outline-hover-focus-border",
+            "name": "kendo-picker-flat-bg",
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 395,
-                "end": 395
+                "start": 396,
+                "end": 396
             }
         },
         "group": [
@@ -12837,15 +12812,15 @@
         }
     },
     {
-        "description": "The background color of the flat Picker components.\n",
+        "description": "The text color of the flat Picker components.\n",
         "commentRange": {
             "start": 397,
             "end": 398
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-flat-bg",
-            "value": "null",
+            "name": "kendo-picker-flat-text",
+            "value": "$kendo-button-text",
             "scope": "default",
             "line": {
                 "start": 399,
@@ -12862,15 +12837,15 @@
         }
     },
     {
-        "description": "The text color of the flat Picker components.\n",
+        "description": "The border color of the flat Picker components.\n",
         "commentRange": {
             "start": 400,
             "end": 401
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-flat-text",
-            "value": "$kendo-button-text",
+            "name": "kendo-picker-flat-border",
+            "value": "$kendo-button-border",
             "scope": "default",
             "line": {
                 "start": 402,
@@ -12887,19 +12862,19 @@
         }
     },
     {
-        "description": "The border color of the flat Picker components.\n",
+        "description": "The background color of the flat hovered Picker components.\n",
         "commentRange": {
-            "start": 403,
-            "end": 404
+            "start": 404,
+            "end": 405
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-flat-border",
-            "value": "$kendo-button-border",
+            "name": "kendo-picker-flat-hover-bg",
+            "value": "rgba( $kendo-button-text, .04 )",
             "scope": "default",
             "line": {
-                "start": 405,
-                "end": 405
+                "start": 406,
+                "end": 406
             }
         },
         "group": [
@@ -12912,15 +12887,15 @@
         }
     },
     {
-        "description": "The background color of the flat hovered Picker components.\n",
+        "description": "The text color of the flat hovered Picker components.\n",
         "commentRange": {
             "start": 407,
             "end": 408
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-flat-hover-bg",
-            "value": "rgba( $kendo-button-text, .04 )",
+            "name": "kendo-picker-flat-hover-text",
+            "value": "null",
             "scope": "default",
             "line": {
                 "start": 409,
@@ -12937,15 +12912,15 @@
         }
     },
     {
-        "description": "The text color of the flat hovered Picker components.\n",
+        "description": "The border color of the flat hovered Picker components.\n",
         "commentRange": {
             "start": 410,
             "end": 411
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-flat-hover-text",
-            "value": "null",
+            "name": "kendo-picker-flat-hover-border",
+            "value": "rgba( $kendo-button-border, .16 )",
             "scope": "default",
             "line": {
                 "start": 412,
@@ -12962,19 +12937,19 @@
         }
     },
     {
-        "description": "The border color of the flat hovered Picker components.\n",
+        "description": "The background color of the flat focused Picker components.\n",
         "commentRange": {
-            "start": 413,
-            "end": 414
+            "start": 414,
+            "end": 415
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-flat-hover-border",
-            "value": "rgba( $kendo-button-border, .16 )",
+            "name": "kendo-picker-flat-focus-bg",
+            "value": "null",
             "scope": "default",
             "line": {
-                "start": 415,
-                "end": 415
+                "start": 416,
+                "end": 416
             }
         },
         "group": [
@@ -12987,14 +12962,14 @@
         }
     },
     {
-        "description": "The background color of the flat focused Picker components.\n",
+        "description": "The text color of the flat focused Picker components.\n",
         "commentRange": {
             "start": 417,
             "end": 418
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-flat-focus-bg",
+            "name": "kendo-picker-flat-focus-text",
             "value": "null",
             "scope": "default",
             "line": {
@@ -13012,14 +12987,14 @@
         }
     },
     {
-        "description": "The text color of the flat focused Picker components.\n",
+        "description": "The border color of the flat focused Picker components.\n",
         "commentRange": {
             "start": 420,
             "end": 421
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-flat-focus-text",
+            "name": "kendo-picker-flat-focus-border",
             "value": "null",
             "scope": "default",
             "line": {
@@ -13037,15 +13012,15 @@
         }
     },
     {
-        "description": "The border color of the flat focused Picker components.\n",
+        "description": "The shadow of the flat focused Picker components.\n",
         "commentRange": {
             "start": 423,
             "end": 424
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-flat-focus-border",
-            "value": "null",
+            "name": "kendo-picker-flat-focus-shadow",
+            "value": "$kendo-picker-focus-shadow",
             "scope": "default",
             "line": {
                 "start": 425,
@@ -13062,19 +13037,19 @@
         }
     },
     {
-        "description": "The shadow of the flat focused Picker components.\n",
+        "description": "The background color of the flat hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 426,
-            "end": 427
+            "start": 427,
+            "end": 428
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-flat-focus-shadow",
-            "value": "$kendo-picker-focus-shadow",
+            "name": "kendo-picker-flat-hover-focus-bg",
+            "value": "null",
             "scope": "default",
             "line": {
-                "start": 428,
-                "end": 428
+                "start": 429,
+                "end": 429
             }
         },
         "group": [
@@ -13087,14 +13062,14 @@
         }
     },
     {
-        "description": "The background color of the flat hovered and focused Picker components.\n",
+        "description": "The text color of the flat hovered and focused Picker components.\n",
         "commentRange": {
             "start": 430,
             "end": 431
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-flat-hover-focus-bg",
+            "name": "kendo-picker-flat-hover-focus-text",
             "value": "null",
             "scope": "default",
             "line": {
@@ -13112,14 +13087,14 @@
         }
     },
     {
-        "description": "The text color of the flat hovered and focused Picker components.\n",
+        "description": "The border color of the flat hovered and focused Picker components.\n",
         "commentRange": {
             "start": 433,
             "end": 434
         },
         "context": {
             "type": "variable",
-            "name": "kendo-picker-flat-hover-focus-text",
+            "name": "kendo-picker-flat-hover-focus-border",
             "value": "null",
             "scope": "default",
             "line": {
@@ -13136,31 +13111,6 @@
             "name": "_variables.scss"
         }
     },
-    {
-        "description": "The border color of the flat hovered and focused Picker components.\n",
-        "commentRange": {
-            "start": 436,
-            "end": 437
-        },
-        "context": {
-            "type": "variable",
-            "name": "kendo-picker-flat-hover-focus-border",
-            "value": "null",
-            "scope": "default",
-            "line": {
-                "start": 438,
-                "end": 438
-            }
-        },
-        "group": [
-            "picker"
-        ],
-        "access": "public",
-        "file": {
-            "path": "input/_variables.scss",
-            "name": "_variables.scss"
-        }
-    },
     {
         "description": "Horizontal padding of the popup.\n",
         "commentRange": {