fix(input): tweak large size so it's compatible with guidelines for m…

…obile
telerik · Jul 21, 2022 · 7972c1b · 7972c1b
1 parent 474f4ae
commit 7972c1b
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 12 deletions.
diff --git a/packages/bootstrap/scss/input/_variables.scss b/packages/bootstrap/scss/input/_variables.scss
@@ -1,17 +1,34 @@
 // Input
+
+/// Default width of input components.
+/// @group input
 $kendo-input-default-width: 100% !default;
 
+/// Border width of input components.
+/// @group input
 $kendo-input-border-width: $input-border-width !default;
 $kendo-input-border-height: ( $kendo-input-border-width * 2 ) !default;
+/// Border radius of input components.
+/// @group input
 $kendo-input-border-radius: null !default;
 
+/// Horizontal padding of input components.
+/// @group input
 $kendo-input-padding-x: $input-padding-x !default;
+/// Vertical padding of input components.
+/// @group input
 $kendo-input-padding-y: $input-padding-y !default;
+/// Font family of input components.
+/// @group input
 $kendo-input-font-family: $font-family !default;
+/// Font size of input components.
+/// @group input
 $kendo-input-font-size: $font-size !default;
+/// Line height of input components.
+/// @group input
 $kendo-input-line-height: $input-line-height !default;
 
-$kendo-input-padding-x-sm: $input-padding-x !default;
+$kendo-input-padding-x-sm: $input-padding-x-sm !default;
 $kendo-input-padding-y-sm: $input-padding-y-sm !default;
 $kendo-input-font-size-sm: $font-size-md !default;
 $kendo-input-line-height-sm: $line-height-md !default;
@@ -21,7 +38,7 @@ $kendo-input-padding-y-md: $input-padding-y !default;
 $kendo-input-font-size-md: $font-size-md !default;
 $kendo-input-line-height-md: $line-height-md !default;
 
-$kendo-input-padding-x-lg: $input-padding-x !default;
+$kendo-input-padding-x-lg: $input-padding-x-lg !default;
 $kendo-input-padding-y-lg: $input-padding-y-lg !default;
 $kendo-input-font-size-lg: $font-size-md !default;
 $kendo-input-line-height-lg: $line-height-md !default;

diff --git a/packages/classic/scss/input/_variables.scss b/packages/classic/scss/input/_variables.scss
@@ -1,14 +1,31 @@
 // Input
+
+/// Default width of input components.
+/// @group input
 $kendo-input-default-width: 100% !default;
 
+/// Border width of input components.
+/// @group input
 $kendo-input-border-width: 1px !default;
 $kendo-input-border-height: ( $kendo-input-border-width * 2 ) !default;
+/// Border radius of input components.
+/// @group input
 $kendo-input-border-radius: null !default;
 
+/// Horizontal padding of input components.
+/// @group input
 $kendo-input-padding-x: map-get( $spacing, 2 ) !default;
+/// Vertical padding of input components.
+/// @group input
 $kendo-input-padding-y: map-get( $spacing, 1 ) !default;
+/// Font family of input components.
+/// @group input
 $kendo-input-font-family: $font-family !default;
+/// Font size of input components.
+/// @group input
 $kendo-input-font-size: $font-size-md !default;
+/// Line height of input components.
+/// @group input
 $kendo-input-line-height: $line-height-md !default;
 
 $kendo-input-padding-x-sm: map-get( $spacing, 2 ) !default;
@@ -21,10 +38,10 @@ $kendo-input-padding-y-md: map-get( $spacing, 1 ) !default;
 $kendo-input-font-size-md: $font-size-md !default;
 $kendo-input-line-height-md: $line-height-md !default;
 
-$kendo-input-padding-x-lg: map-get( $spacing, 2 ) !default;
-$kendo-input-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
-$kendo-input-font-size-lg: $font-size-md !default;
-$kendo-input-line-height-lg: $line-height-md !default;
+$kendo-input-padding-x-lg: map-get( $spacing, 3 ) !default;
+$kendo-input-padding-y-lg: map-get( $spacing, 2 ) !default;
+$kendo-input-font-size-lg: $font-size-lg !default;
+$kendo-input-line-height-lg: $line-height-lg !default;
 
 $kendo-input-sizes: (
     sm: (

diff --git a/packages/default/scss/input/_variables.scss b/packages/default/scss/input/_variables.scss
@@ -1,14 +1,31 @@
 // Input
+
+/// Default width of input components.
+/// @group input
 $kendo-input-default-width: 100% !default;
 
+/// Border width of input components.
+/// @group input
 $kendo-input-border-width: 1px !default;
 $kendo-input-border-height: ( $kendo-input-border-width * 2 ) !default;
+/// Border radius of input components.
+/// @group input
 $kendo-input-border-radius: null !default;
 
+/// Horizontal padding of input components.
+/// @group input
 $kendo-input-padding-x: map-get( $spacing, 2 ) !default;
+/// Vertical padding of input components.
+/// @group input
 $kendo-input-padding-y: map-get( $spacing, 1 ) !default;
+/// Font family of input components.
+/// @group input
 $kendo-input-font-family: $font-family !default;
+/// Font size of input components.
+/// @group input
 $kendo-input-font-size: $font-size-md !default;
+/// Line height of input components.
+/// @group input
 $kendo-input-line-height: $line-height-md !default;
 
 $kendo-input-padding-x-sm: map-get( $spacing, 2 ) !default;
@@ -21,10 +38,10 @@ $kendo-input-padding-y-md: map-get( $spacing, 1 ) !default;
 $kendo-input-font-size-md: $font-size-md !default;
 $kendo-input-line-height-md: $line-height-md !default;
 
-$kendo-input-padding-x-lg: map-get( $spacing, 2 ) !default;
-$kendo-input-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
-$kendo-input-font-size-lg: $font-size-md !default;
-$kendo-input-line-height-lg: $line-height-md !default;
+$kendo-input-padding-x-lg: map-get( $spacing, 3 ) !default;
+$kendo-input-padding-y-lg: map-get( $spacing, 2 ) !default;
+$kendo-input-font-size-lg: $font-size-lg !default;
+$kendo-input-line-height-lg: $line-height-lg !default;
 
 $kendo-input-sizes: (
     sm: (

diff --git a/packages/material/scss/input/_variables.scss b/packages/material/scss/input/_variables.scss
@@ -1,14 +1,31 @@
 // Input
+
+/// Default width of input components.
+/// @group input
 $kendo-input-default-width: 100% !default;
 
+/// Border width of input components.
+/// @group input
 $kendo-input-border-width: 1px !default;
 $kendo-input-border-height: 1px !default;
+/// Border radius of input components.
+/// @group input
 $kendo-input-border-radius: null !default;
 
+/// Horizontal padding of input components.
+/// @group input
 $kendo-input-padding-x: map-get( $spacing, 4 ) !default;
+/// Vertical padding of input components.
+/// @group input
 $kendo-input-padding-y: map-get( $spacing, 2 ) !default;
+///Font family of input components.
+/// @group input
 $kendo-input-font-family: $font-family !default;
+/// Font size of input components.
+/// @group input
 $kendo-input-font-size: $font-size-lg !default;
+/// Line height of input components.
+/// @group input
 $kendo-input-line-height: 1.25 !default;
 
 $kendo-input-padding-x-sm: map-get( $spacing, 4 ) !default;
@@ -22,9 +39,9 @@ $kendo-input-font-size-md: $font-size-lg !default;
 $kendo-input-line-height-md: 1.25 !default;
 
 $kendo-input-padding-x-lg: map-get( $spacing, 4 ) !default;
-$kendo-input-padding-y-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
+$kendo-input-padding-y-lg: map-get( $spacing, 2 ) !default;
 $kendo-input-font-size-lg: $font-size-lg !default;
-$kendo-input-line-height-lg: 1.25 !default;
+$kendo-input-line-height-lg: 1.5 !default;
 
 $kendo-input-sizes: (
     sm: (