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

…mobile
telerik · Jul 21, 2022 · 34752f1 · 34752f1
1 parent 819c8b3
commit 34752f1
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 45 deletions.
diff --git a/packages/bootstrap/scss/button/_variables.scss b/packages/bootstrap/scss/button/_variables.scss
@@ -11,9 +11,9 @@ $kendo-button-border-radius: null !default;
 /// Horizontal padding of the button.
 /// @group button
 $kendo-button-padding-x: $btn-padding-x !default;
-$kendo-button-padding-x-sm: $btn-padding-x !default;
+$kendo-button-padding-x-sm: $btn-padding-x-sm !default;
 $kendo-button-padding-x-md: $btn-padding-x !default;
-$kendo-button-padding-x-lg: $btn-padding-x !default;
+$kendo-button-padding-x-lg: $btn-padding-x-lg !default;
 
 /// Vertical padding of the button.
 /// @group button
@@ -48,6 +48,27 @@ $kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-but
 /// @group button
 $kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;
 
+$kendo-button-sizes: (
+    sm: (
+        padding-x: $kendo-button-padding-x-sm,
+        padding-y: $kendo-button-padding-y-sm,
+        font-size: $kendo-button-font-size-sm,
+        line-height: $kendo-button-line-height-sm
+    ),
+    md: (
+        padding-x: $kendo-button-padding-x-md,
+        padding-y: $kendo-button-padding-y-md,
+        font-size: $kendo-button-font-size-md,
+        line-height: $kendo-button-line-height-md
+    ),
+    lg: (
+        padding-x: $kendo-button-padding-x-lg,
+        padding-y: $kendo-button-padding-y-lg,
+        font-size: $kendo-button-font-size-lg,
+        line-height: $kendo-button-line-height-lg
+    )
+) !default;
+
 /// Theme colors map for the button.
 /// @group button
 $kendo-button-theme-colors: map-merge(

diff --git a/packages/classic/scss/button/_variables.scss b/packages/classic/scss/button/_variables.scss
@@ -13,14 +13,14 @@ $kendo-button-border-radius: null !default;
 $kendo-button-padding-x: map-get( $spacing, 2 ) !default;
 $kendo-button-padding-x-sm: map-get( $spacing, 2 ) !default;
 $kendo-button-padding-x-md: map-get( $spacing, 2 ) !default;
-$kendo-button-padding-x-lg: map-get( $spacing, 2 ) !default;
+$kendo-button-padding-x-lg: map-get( $spacing, 3 ) !default;
 
 /// Vertical padding of the button.
 /// @group button
 $kendo-button-padding-y: map-get( $spacing, 1 ) !default;
 $kendo-button-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
 $kendo-button-padding-y-md: map-get( $spacing, 1 ) !default;
-$kendo-button-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+$kendo-button-padding-y-lg: map-get( $spacing, 2 );
 
 /// Font family of the button.
 /// @group button
@@ -31,14 +31,14 @@ $kendo-button-font-family: $font-family !default;
 $kendo-button-font-size: $font-size-md !default;
 $kendo-button-font-size-sm: $font-size-md !default;
 $kendo-button-font-size-md: $font-size-md !default;
-$kendo-button-font-size-lg: $font-size-md !default;
+$kendo-button-font-size-lg: $font-size-lg !default;
 
 /// Line heights used along with $font-size.
 /// @group button
 $kendo-button-line-height: $line-height-md !default;
 $kendo-button-line-height-sm: $line-height-md !default;
 $kendo-button-line-height-md: $line-height-md !default;
-$kendo-button-line-height-lg: $line-height-md !default;
+$kendo-button-line-height-lg: $line-height-lg !default;
 
 /// Calculated height of the button.
 /// @group button
@@ -48,6 +48,27 @@ $kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-but
 /// @group button
 $kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;
 
+$kendo-button-sizes: (
+    sm: (
+        padding-x: $kendo-button-padding-x-sm,
+        padding-y: $kendo-button-padding-y-sm,
+        font-size: $kendo-button-font-size-sm,
+        line-height: $kendo-button-line-height-sm
+    ),
+    md: (
+        padding-x: $kendo-button-padding-x-md,
+        padding-y: $kendo-button-padding-y-md,
+        font-size: $kendo-button-font-size-md,
+        line-height: $kendo-button-line-height-md
+    ),
+    lg: (
+        padding-x: $kendo-button-padding-x-lg,
+        padding-y: $kendo-button-padding-y-lg,
+        font-size: $kendo-button-font-size-lg,
+        line-height: $kendo-button-line-height-lg
+    )
+) !default;
+
 /// Theme colors map for the button.
 /// @group button
 $kendo-button-theme-colors: map-merge(

diff --git a/packages/default/scss/button/_layout.scss b/packages/default/scss/button/_layout.scss
@@ -68,45 +68,27 @@
 
     .k-button-text {}
 
-    // Sizes
-    .k-button-sm {
-        padding: $kendo-button-padding-y-sm $kendo-button-padding-x-sm;
-        font-size: $kendo-button-font-size-sm;
-        line-height: $kendo-button-line-height-sm;
-    }
-    .k-button-md {
-        padding: $kendo-button-padding-y-md $kendo-button-padding-x-md;
-        font-size: $kendo-button-font-size-md;
-        line-height: $kendo-button-line-height-md;
-    }
-    .k-button-lg {
-        padding: $kendo-button-padding-y-lg $kendo-button-padding-x-lg;
-        font-size: $kendo-button-font-size-lg;
-        line-height: $kendo-button-line-height-lg;
-    }
-
-    .k-icon-button.k-button-sm {
-        padding: $kendo-button-padding-y-sm;
 
-        > .k-button-icon {
-            min-width: calc( #{$kendo-button-font-size-sm} * #{$kendo-button-line-height-sm} );
-            min-height: calc( #{$kendo-button-font-size-sm} * #{$kendo-button-line-height-sm} );
+    // Sizes
+    @each $size, $size-props in $kendo-button-sizes {
+        $_padding-x: map-get( $size-props, padding-x );
+        $_padding-y: map-get( $size-props, padding-y );
+        $_font-size: map-get( $size-props, font-size );
+        $_line-height: map-get( $size-props, line-height );
+
+        .k-button-#{$size} {
+            padding: $_padding-y $_padding-x;
+            font-size: $_font-size;
+            line-height: $_line-height;
         }
-    }
-    .k-icon-button.k-button-md {
-        padding: $kendo-button-padding-y-md;
 
-        > .k-button-icon {
-            min-width: calc( #{$kendo-button-font-size-md} * #{$kendo-button-line-height-md} );
-            min-height: calc( #{$kendo-button-font-size-md} * #{$kendo-button-line-height-md} );
-        }
-    }
-    .k-icon-button.k-button-lg {
-        padding: $kendo-button-padding-y-lg;
+        .k-button-#{$size}.k-icon-button {
+            padding: $_padding-y;
 
-        > .k-button-icon {
-            min-width: calc( #{$kendo-button-font-size-lg} * #{$kendo-button-line-height-lg} );
-            min-height: calc( #{$kendo-button-font-size-lg} * #{$kendo-button-line-height-lg} );
+            > .k-button-icon {
+                min-width: calc( #{$_font-size} * #{$_line-height} );
+                min-height: calc( #{$_font-size} * #{$_line-height} );
+            }
         }
     }
 

diff --git a/packages/default/scss/button/_variables.scss b/packages/default/scss/button/_variables.scss
@@ -13,14 +13,14 @@ $kendo-button-border-radius: null !default;
 $kendo-button-padding-x: map-get( $spacing, 2 ) !default;
 $kendo-button-padding-x-sm: map-get( $spacing, 2 ) !default;
 $kendo-button-padding-x-md: map-get( $spacing, 2 ) !default;
-$kendo-button-padding-x-lg: map-get( $spacing, 2 ) !default;
+$kendo-button-padding-x-lg: map-get( $spacing, 3 ) !default;
 
 /// Vertical padding of the button.
 /// @group button
 $kendo-button-padding-y: map-get( $spacing, 1 ) !default;
 $kendo-button-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
 $kendo-button-padding-y-md: map-get( $spacing, 1 ) !default;
-$kendo-button-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+$kendo-button-padding-y-lg: map-get( $spacing, 2 );
 
 /// Font family of the button.
 /// @group button
@@ -31,14 +31,14 @@ $kendo-button-font-family: $font-family !default;
 $kendo-button-font-size: $font-size-md !default;
 $kendo-button-font-size-sm: $font-size-md !default;
 $kendo-button-font-size-md: $font-size-md !default;
-$kendo-button-font-size-lg: $font-size-md !default;
+$kendo-button-font-size-lg: $font-size-lg !default;
 
 /// Line heights used along with $font-size.
 /// @group button
 $kendo-button-line-height: $line-height-md !default;
 $kendo-button-line-height-sm: $line-height-md !default;
 $kendo-button-line-height-md: $line-height-md !default;
-$kendo-button-line-height-lg: $line-height-md !default;
+$kendo-button-line-height-lg: $line-height-lg !default;
 
 /// Calculated height of the button.
 /// @group button
@@ -48,6 +48,27 @@ $kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-but
 /// @group button
 $kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;
 
+$kendo-button-sizes: (
+    sm: (
+        padding-x: $kendo-button-padding-x-sm,
+        padding-y: $kendo-button-padding-y-sm,
+        font-size: $kendo-button-font-size-sm,
+        line-height: $kendo-button-line-height-sm
+    ),
+    md: (
+        padding-x: $kendo-button-padding-x-md,
+        padding-y: $kendo-button-padding-y-md,
+        font-size: $kendo-button-font-size-md,
+        line-height: $kendo-button-line-height-md
+    ),
+    lg: (
+        padding-x: $kendo-button-padding-x-lg,
+        padding-y: $kendo-button-padding-y-lg,
+        font-size: $kendo-button-font-size-lg,
+        line-height: $kendo-button-line-height-lg
+    )
+) !default;
+
 /// Theme colors map for the button.
 /// @group button
 $kendo-button-theme-colors: map-merge(

diff --git a/packages/material/scss/button/_variables.scss b/packages/material/scss/button/_variables.scss
@@ -48,6 +48,27 @@ $kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-but
 /// @group button
 $kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;
 
+$kendo-button-sizes: (
+    sm: (
+        padding-x: $kendo-button-padding-x-sm,
+        padding-y: $kendo-button-padding-y-sm,
+        font-size: $kendo-button-font-size-sm,
+        line-height: $kendo-button-line-height-sm
+    ),
+    md: (
+        padding-x: $kendo-button-padding-x-md,
+        padding-y: $kendo-button-padding-y-md,
+        font-size: $kendo-button-font-size-md,
+        line-height: $kendo-button-line-height-md
+    ),
+    lg: (
+        padding-x: $kendo-button-padding-x-lg,
+        padding-y: $kendo-button-padding-y-lg,
+        font-size: $kendo-button-font-size-lg,
+        line-height: $kendo-button-line-height-lg
+    )
+) !default;
+
 /// Theme colors map for the button.
 /// @group button
 $kendo-button-theme-colors: map-merge(