Adjusting form element sizes for enhanced mobile devices compatibility (#1596)

.changeset/silver-drinks-yell.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Adjusting form element sizes for enhanced mobile devices compatibility

src/pages/form-elements.html

@@ -12,7 +12,7 @@ libs: nouislider, autosize, tabler-flags, tabler-payments, litepicker, tom-selec
 				<h4 class="card-title">Form elements</h4>
 			</div>
 			<div class="card-body">
-				<div class="row">
+				<div class="row g-5">
 					<div class="col-xl-4">
 						<div class="row">
 							<div class="col-md-6 col-xl-12">{% include forms/form-elements-1.html %}</div>

src/scss/_variables.scss

@@ -515,7 +515,7 @@ $badge-empty-size: 0.5rem !default;
 $input-btn-line-height: $line-height-base !default;
 $input-btn-font-size: $font-size-base !default;
 $input-btn-font-family: var(--#{$prefix}font-sans-serif) !default;
-$input-btn-padding-y: 0.5rem - 0.0625rem !default;
+$input-btn-padding-y: 0.625rem - 0.0625rem !default;
 
 $input-btn-font-size-sm: $h5-font-size !default;
 $input-btn-padding-x-sm: 0.25rem !default;
@@ -558,7 +558,7 @@ $card-border-color: var(--#{$prefix}border-color-translucent) !default;
 $card-border-radius: var(--#{$prefix}border-radius) !default;
 
 $card-spacer-x: 1.5rem !default;
-$card-spacer-y: 1rem !default;
+$card-spacer-y: 1.5rem !default;
 
 $card-cap-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 $card-cap-color: inherit !default;
@@ -834,17 +834,17 @@ $input-group-addon-color: var(--#{$prefix}muted) !default;
 $input-border-radius: var(--#{$prefix}border-radius) !default;
 
 // Forms
-$form-check-margin-bottom: 0.5rem !default;
-$form-check-padding-start: 1.5rem !default;
+$form-check-margin-bottom: .75rem !default;
+$form-check-padding-start: 2rem !default;
 
-$form-check-input-width: 1rem !default;
+$form-check-input-width: 1.25rem !default;
 $form-check-input-bg: var(--#{$prefix}bg-forms) !default;
 $form-check-input-border: var(--#{$prefix}border-width)
   var(--#{$prefix}border-style) $input-border-color-translucent !default;
 $form-check-input-border-radius: var(--#{$prefix}border-radius) !default;
 $form-check-input-box-shadow: $input-box-shadow !default;
 
-$form-check-input-checked-bg-size: 1rem !default;
+$form-check-input-checked-bg-size: 1.25rem !default;
 $form-check-input-checked-bg-color: var(--#{$prefix}primary) !default;
 $form-check-input-checked-color: var(--#{$prefix}bg-forms) !default;
 $form-check-input-checked-bg-repeat: repeat !default;
@@ -861,7 +861,7 @@ $form-select-indicator-color: $text-muted-light !default;
 $form-select-box-shadow: var(--#{$prefix}box-shadow-input) !default;
 
 $form-switch-width: 2rem !default;
-$form-switch-height: 1.125rem !default;
+$form-switch-height: 1.25rem !default;
 $form-switch-padding-start: $form-switch-width + 0.5rem !default;
 $form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$border-color}'/></svg>") !default;
 $form-switch-bg-size: auto !default;