fix(input): extract input variables into separate files

packages/bootstrap/scss/_variables.scss

@@ -665,89 +665,6 @@ $clear-button-text: #6c757d !default;
 $clear-button-hover-text: $button-text !default;
 $clear-button-focused-opacity: .1 !default;
 
-// Input
-
-$input-default-width: 12.4em !default;
-
-$input-border-width: $input-border-width !default;
-$input-border-height: ( $input-border-width * 2 ) !default;
-$input-border-radius: $input-border-radius !default;
-$input-border-radius-sm: $input-border-radius-sm !default;
-$input-border-radius-lg: $input-border-radius-lg !default;
-
-$input-padding-x: $input-padding-x !default;
-$input-padding-y: $input-padding-y !default;
-$input-font-family: $font-family !default;
-$input-font-size: $font-size !default;
-$input-line-height: $input-line-height !default;
-$input-line-height-em: $input-line-height * 1em;
-
-$input-padding-x-sm: $input-padding-x-sm !default;
-$input-padding-y-sm: $input-padding-y-sm !default;
-$input-font-size-sm: $input-font-size-sm !default;
-$input-line-height-sm: $input-line-height-sm !default;
-
-$input-padding-x-lg: $input-padding-x-lg !default;
-$input-padding-y-lg: $input-padding-y-lg !default;
-$input-font-size-lg: $input-font-size-lg !default;
-$input-line-height-lg: $input-line-height-lg !default;
-
-$input-calc-height: calc( #{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-border-height} ) !default;
-$input-calc-height-sm: calc( #{$input-line-height-sm * 1em} + #{$input-padding-y-sm * 2} + #{$input-border-height} ) !default;
-$input-calc-height-lg: calc( #{$input-line-height-lg * 1em} + #{$input-padding-y-lg * 2} + #{$input-border-height} ) !default;
-
-$input-inner-calc-height: calc( #{$input-line-height * 1em} + #{$input-padding-y * 2} ) !default;
-$input-inner-calc-height-sm: calc( #{$input-line-height-sm * 1em} + #{$input-padding-y-sm * 2} ) !default;
-$input-inner-calc-height-lg: calc( #{$input-line-height-lg * 1em} + #{$input-padding-y-lg * 2} ) !default;
-
-$input-icon-offset: 6.5px !default;
-$input-icon-width: calc( #{$icon-size} + #{$input-padding-x * 2} ) !default;
-$input-icon-padding-x: 6px !default;
-$input-icon-padding-y: $input-icon-padding-x !default;
-
-$input-bg: $input-bg !default;
-$input-text: $input-color !default;
-$input-border: $input-border-color !default;
-$input-shadow: none !default;
-
-$input-hovered-bg: null !default;
-$input-hovered-text: null !default;
-$input-hovered-border: null !default;
-$input-hovered-shadow: null !default;
-
-$input-focused-bg: $input-focus-bg !default;
-$input-focused-text: $input-focus-color !default;
-$input-focused-border: $input-focus-border-color !default;
-$input-focused-shadow: $input-focus-box-shadow !default;
-
-$input-placeholder-text: $input-placeholder-color !default;
-$input-placeholder-opacity: 1 !default;
-
-$input-selected-bg: null !default;
-$input-selected-text: null !default;
-
-
-// Picker
-$picker-select-border-width: 1px !default;
-
-$picker-select-padding-x: $input-padding-y !default;
-$picker-select-padding-y: $input-padding-y !default;
-
-$picker-select-padding-x-sm: $input-padding-y-sm !default;
-$picker-select-padding-y-sm: $input-padding-y-sm !default;
-
-$picker-select-padding-x-lg: $input-padding-y-sm !default;
-$picker-select-padding-y-lg: $input-padding-y-sm !default;
-
-$picker-select-calc-size: calc( #{$picker-select-padding-x * 2} + #{$icon-size} ) !default;
-$picker-select-calc-size-sm: calc( #{$picker-select-padding-x-sm * 2} + #{$icon-size} ) !default;
-$picker-select-calc-size-lg: calc( #{$picker-select-padding-x-sm * 2} + #{$icon-size} ) !default;
-
-$picker-icon-offset: calc( #{$picker-select-calc-size} + #{$picker-select-border-width}  + #{$input-icon-offset}) !default;
-
-
-$spinner-width: $button-inner-calc-size !default;
-$spinner-icon-offset: 1px !default;
 
 $drag-clue-opacity: null !default;
 $drag-clue-line-height: null !default;

packages/bootstrap/scss/forms/_index.scss

@@ -3,6 +3,7 @@
 
 
 // Dependencies // TODO: extract variables
+@import "../input/_variables.scss";
 @import "../toolbar/_index.scss";
 @import "../window/_variables.scss";
 

packages/bootstrap/scss/input/_index.scss

@@ -7,5 +7,6 @@
 
 
 // Component
+@import "_variables.scss";
 @import "_layout.scss";
 @import "_theme.scss";

packages/bootstrap/scss/input/_variables.scss

@@ -0,0 +1,84 @@
+// Input
+
+$input-default-width: 12.4em !default;
+
+$input-border-width: $input-border-width !default;
+$input-border-height: ( $input-border-width * 2 ) !default;
+$input-border-radius: $input-border-radius !default;
+$input-border-radius-sm: $input-border-radius-sm !default;
+$input-border-radius-lg: $input-border-radius-lg !default;
+
+$input-padding-x: $input-padding-x !default;
+$input-padding-y: $input-padding-y !default;
+$input-font-family: $font-family !default;
+$input-font-size: $font-size !default;
+$input-line-height: $input-line-height !default;
+$input-line-height-em: $input-line-height * 1em;
+
+$input-padding-x-sm: $input-padding-x-sm !default;
+$input-padding-y-sm: $input-padding-y-sm !default;
+$input-font-size-sm: $input-font-size-sm !default;
+$input-line-height-sm: $input-line-height-sm !default;
+
+$input-padding-x-lg: $input-padding-x-lg !default;
+$input-padding-y-lg: $input-padding-y-lg !default;
+$input-font-size-lg: $input-font-size-lg !default;
+$input-line-height-lg: $input-line-height-lg !default;
+
+$input-calc-height: calc( #{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-border-height} ) !default;
+$input-calc-height-sm: calc( #{$input-line-height-sm * 1em} + #{$input-padding-y-sm * 2} + #{$input-border-height} ) !default;
+$input-calc-height-lg: calc( #{$input-line-height-lg * 1em} + #{$input-padding-y-lg * 2} + #{$input-border-height} ) !default;
+
+$input-inner-calc-height: calc( #{$input-line-height * 1em} + #{$input-padding-y * 2} ) !default;
+$input-inner-calc-height-sm: calc( #{$input-line-height-sm * 1em} + #{$input-padding-y-sm * 2} ) !default;
+$input-inner-calc-height-lg: calc( #{$input-line-height-lg * 1em} + #{$input-padding-y-lg * 2} ) !default;
+
+$input-icon-offset: 6.5px !default;
+$input-icon-width: calc( #{$icon-size} + #{$input-padding-x * 2} ) !default;
+$input-icon-padding-x: 6px !default;
+$input-icon-padding-y: $input-icon-padding-x !default;
+
+$input-bg: $input-bg !default;
+$input-text: $input-color !default;
+$input-border: $input-border-color !default;
+$input-shadow: none !default;
+
+$input-hovered-bg: null !default;
+$input-hovered-text: null !default;
+$input-hovered-border: null !default;
+$input-hovered-shadow: null !default;
+
+$input-focused-bg: $input-focus-bg !default;
+$input-focused-text: $input-focus-color !default;
+$input-focused-border: $input-focus-border-color !default;
+$input-focused-shadow: $input-focus-box-shadow !default;
+
+$input-placeholder-text: $input-placeholder-color !default;
+$input-placeholder-opacity: 1 !default;
+
+$input-selected-bg: null !default;
+$input-selected-text: null !default;
+
+
+// Picker
+$picker-select-border-width: 1px !default;
+
+$picker-select-padding-x: $input-padding-y !default;
+$picker-select-padding-y: $input-padding-y !default;
+
+$picker-select-padding-x-sm: $input-padding-y-sm !default;
+$picker-select-padding-y-sm: $input-padding-y-sm !default;
+
+$picker-select-padding-x-lg: $input-padding-y-sm !default;
+$picker-select-padding-y-lg: $input-padding-y-sm !default;
+
+$picker-select-calc-size: calc( #{$picker-select-padding-x * 2} + #{$icon-size} ) !default;
+$picker-select-calc-size-sm: calc( #{$picker-select-padding-x-sm * 2} + #{$icon-size} ) !default;
+$picker-select-calc-size-lg: calc( #{$picker-select-padding-x-sm * 2} + #{$icon-size} ) !default;
+
+$picker-icon-offset: calc( #{$picker-select-calc-size} + #{$picker-select-border-width}  + #{$input-icon-offset}) !default;
+
+
+// Spinner
+$spinner-width: $button-inner-calc-size !default;
+$spinner-icon-offset: 1px !default;

packages/classic/scss/_variables.scss

@@ -648,90 +648,6 @@ $clear-button-hover-text: darken($body-text, 13%) !default;
 $clear-button-focused-opacity: .1 !default;
 
 
-// Input
-
-$input-default-width: 12.4em !default;
-
-$input-border-width: 1px !default;
-$input-border-height: ( $input-border-width * 2 ) !default;
-$input-border-radius: $border-radius !default;
-$input-border-radius-sm: $border-radius !default;
-$input-border-radius-lg: $border-radius !default;
-
-$input-padding-x: $padding-x !default;
-$input-padding-y: $padding-y !default;
-$input-font-family: $font-family !default;
-$input-font-size: $font-size !default;
-$input-line-height: $form-line-height !default;
-$input-line-height-em: $input-line-height * 1em;
-
-$input-padding-x-sm: ($input-padding-x / 2) !default;
-$input-padding-y-sm: ($input-padding-y / 2) !default;
-$input-font-size-sm: $input-font-size !default;
-$input-line-height-sm: $form-line-height-sm !default;
-
-$input-padding-x-lg: ($input-padding-x * 1.5) !default;
-$input-padding-y-lg: ($input-padding-y * 1.5) !default;
-$input-font-size-lg: $input-font-size !default;
-$input-line-height-lg: $form-line-height-lg !default;
-
-$input-calc-height: calc( #{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-border-width * 2} ) !default;
-$input-calc-height-sm: calc( #{$input-line-height-sm * 1em} + #{$input-padding-y-sm * 2} + #{$input-border-width * 2} ) !default;
-$input-calc-height-lg: calc( #{$input-line-height-lg * 1em} + #{$input-padding-y-lg * 2} + #{$input-border-width * 2} ) !default;
-
-$input-inner-calc-height: calc( #{$input-line-height * 1em} + #{$input-padding-y * 2} ) !default;
-$input-inner-calc-height-sm: calc( #{$input-line-height-sm * 1em} + #{$input-padding-y-sm * 2} ) !default;
-$input-inner-calc-height-lg: calc( #{$input-line-height-lg * 1em} + #{$input-padding-y-lg * 2} ) !default;
-
-$input-icon-offset: 6px !default;
-$input-icon-width: calc( #{$icon-size} + #{$input-padding-x * 2} ) !default;
-$input-icon-padding-x: 6px !default;
-$input-icon-padding-y: $input-icon-padding-x !default;
-
-$input-bg: $component-bg !default;
-$input-text: $component-text !default;
-$input-border: $button-border !default;
-$input-shadow: null !default;
-
-$input-hovered-text: $input-text !default;
-$input-hovered-bg: $input-bg !default;
-$input-hovered-border: $button-hovered-border !default;
-$input-hovered-shadow: null !default;
-
-$input-focused-text: $input-text !default;
-$input-focused-bg: $input-bg !default;
-$input-focused-border: $input-hovered-border !default;
-$input-focused-shadow: 0 2px 4px 0 rgba(0, 0, 0, .03), 0 4px 5px 0 rgba(0, 0, 0, .04) !default;
-
-$input-placeholder-text: rgba( $input-text, .5) !default;
-$input-placeholder-opacity: 1 !default;
-
-$input-selected-text: $primary-contrast !default;
-$input-selected-bg: $primary !default;
-
-
-// Picker
-$picker-select-border-width: 0 !default;
-
-$picker-select-padding-x: $input-padding-y !default;
-$picker-select-padding-y: $input-padding-y !default;
-
-$picker-select-padding-x-sm: $input-padding-y-sm !default;
-$picker-select-padding-y-sm: $input-padding-y-sm !default;
-
-$picker-select-padding-x-lg: $input-padding-y-sm !default;
-$picker-select-padding-y-lg: $input-padding-y-sm !default;
-
-$picker-select-calc-size: $input-inner-calc-height !default;
-$picker-select-calc-size-sm: $input-inner-calc-height-sm !default;
-$picker-select-calc-size-lg: $input-inner-calc-height-lg !default;
-
-$picker-icon-offset: calc( #{$picker-select-calc-size} + #{$picker-select-border-width}  + #{$input-icon-offset}) !default;
-
-
-$spinner-width: $button-inner-calc-size !default;
-$spinner-icon-offset: 2px !default;
-
 $drag-clue-opacity: null !default;
 $drag-clue-line-height: null !default;
 $drag-clue-border-radius: null !default;

packages/classic/scss/forms/_index.scss

@@ -1,4 +1,5 @@
 // Dependencies // TODO: extract variables
+@import "../input/_variables.scss";
 @import "../toolbar/_index.scss";
 @import "../window/_variables.scss";
 

packages/classic/scss/input/_index.scss

@@ -1,3 +1,4 @@
 // Component
+@import "_variables.scss";
 @import "~@progress/kendo-theme-default/scss/input/_layout.scss";
 @import "~@progress/kendo-theme-default/scss/input/_theme.scss";

packages/classic/scss/input/_variables.scss

@@ -0,0 +1,83 @@
+// Input
+
+$input-default-width: 12.4em !default;
+
+$input-border-width: 1px !default;
+$input-border-height: ( $input-border-width * 2 ) !default;
+$input-border-radius: $border-radius !default;
+$input-border-radius-sm: $border-radius !default;
+$input-border-radius-lg: $border-radius !default;
+
+$input-padding-x: $padding-x !default;
+$input-padding-y: $padding-y !default;
+$input-font-family: $font-family !default;
+$input-font-size: $font-size !default;
+$input-line-height: $form-line-height !default;
+$input-line-height-em: $input-line-height * 1em;
+
+$input-padding-x-sm: ($input-padding-x / 2) !default;
+$input-padding-y-sm: ($input-padding-y / 2) !default;
+$input-font-size-sm: $input-font-size !default;
+$input-line-height-sm: $form-line-height-sm !default;
+
+$input-padding-x-lg: ($input-padding-x * 1.5) !default;
+$input-padding-y-lg: ($input-padding-y * 1.5) !default;
+$input-font-size-lg: $input-font-size !default;
+$input-line-height-lg: $form-line-height-lg !default;
+
+$input-calc-height: calc( #{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-border-width * 2} ) !default;
+$input-calc-height-sm: calc( #{$input-line-height-sm * 1em} + #{$input-padding-y-sm * 2} + #{$input-border-width * 2} ) !default;
+$input-calc-height-lg: calc( #{$input-line-height-lg * 1em} + #{$input-padding-y-lg * 2} + #{$input-border-width * 2} ) !default;
+
+$input-inner-calc-height: calc( #{$input-line-height * 1em} + #{$input-padding-y * 2} ) !default;
+$input-inner-calc-height-sm: calc( #{$input-line-height-sm * 1em} + #{$input-padding-y-sm * 2} ) !default;
+$input-inner-calc-height-lg: calc( #{$input-line-height-lg * 1em} + #{$input-padding-y-lg * 2} ) !default;
+
+$input-icon-offset: 6px !default;
+$input-icon-width: calc( #{$icon-size} + #{$input-padding-x * 2} ) !default;
+$input-icon-padding-x: 6px !default;
+$input-icon-padding-y: $input-icon-padding-x !default;
+
+$input-bg: $component-bg !default;
+$input-text: $component-text !default;
+$input-border: $button-border !default;
+$input-shadow: null !default;
+
+$input-hovered-text: $input-text !default;
+$input-hovered-bg: $input-bg !default;
+$input-hovered-border: $button-hovered-border !default;
+$input-hovered-shadow: null !default;
+
+$input-focused-text: $input-text !default;
+$input-focused-bg: $input-bg !default;
+$input-focused-border: $input-hovered-border !default;
+$input-focused-shadow: 0 2px 4px 0 rgba(0, 0, 0, .03), 0 4px 5px 0 rgba(0, 0, 0, .04) !default;
+
+$input-placeholder-text: rgba( $input-text, .5) !default;
+$input-placeholder-opacity: 1 !default;
+
+$input-selected-text: $primary-contrast !default;
+$input-selected-bg: $primary !default;
+
+
+// Picker
+$picker-select-border-width: 0 !default;
+
+$picker-select-padding-x: $input-padding-y !default;
+$picker-select-padding-y: $input-padding-y !default;
+
+$picker-select-padding-x-sm: $input-padding-y-sm !default;
+$picker-select-padding-y-sm: $input-padding-y-sm !default;
+
+$picker-select-padding-x-lg: $input-padding-y-sm !default;
+$picker-select-padding-y-lg: $input-padding-y-sm !default;
+
+$picker-select-calc-size: $input-inner-calc-height !default;
+$picker-select-calc-size-sm: $input-inner-calc-height-sm !default;
+$picker-select-calc-size-lg: $input-inner-calc-height-lg !default;
+
+$picker-icon-offset: calc( #{$picker-select-calc-size} + #{$picker-select-border-width}  + #{$input-icon-offset}) !default;
+
+
+$spinner-width: $button-inner-calc-size !default;
+$spinner-icon-offset: 2px !default;