Ything-RepoMirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-01-25 04:16:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Paweł Kuna
2023-05-24 20:42:32 +02:00
committed by GitHub
parent 9801824732
commit 5a036434d1
3 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/silver-drinks-yell.md Normal file
View File

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

2
src/pages/form-elements.html
View File

@@ -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>

14
src/scss/_variables.scss
View File

@@ -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;