Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-29 21:31:28 +04:00
Code Issues Projects Releases Wiki Activity

Fix oversized valid/invalid icons on form controls (#2840)

Browse Source
This commit is contained in:
Paweł Kuna
2026-08-10 00:53:41 +02:00
committed by GitHub
parent a3d1b72002
commit 78b9728fb4
1 changed files with 42 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/scss/ui/forms/_validation.scss
+42
View File
@@ -4,6 +4,32 @@
border-color: var(--border-color) !important;
}
// Bootstrap sizes the valid/invalid icon off the input's own line-height and
// padding, which makes it noticeably bigger than every other icon in the
// design system. Match it to $input-btn-icon-size instead, the same token
// `.btn`/`.btn-sm`/`.btn-lg` use for their own icons (see ui/_buttons.scss).
%validation-icon-size {
--form-feedback-icon-size: #{$input-btn-icon-size};
--form-feedback-icon-inset: #{$input-padding-x};
padding-inline-end: calc(var(--form-feedback-icon-size) + var(--form-feedback-icon-inset) * 2) !important;
background-position: right var(--form-feedback-icon-inset) center !important;
background-size: var(--form-feedback-icon-size) var(--form-feedback-icon-size) !important;
}
%validation-icon-size-sm {
--form-feedback-icon-size: #{$input-btn-icon-size-sm};
--form-feedback-icon-inset: #{$input-padding-x-sm};
}
%validation-icon-size-lg {
--form-feedback-icon-size: #{$input-btn-icon-size-lg};
--form-feedback-icon-inset: #{$input-padding-x-lg};
}
%validation-icon-size-textarea {
background-position: top var(--form-feedback-icon-inset) right var(--form-feedback-icon-inset) !important;
}
@each $state, $data in $form-validation-states {
.form-control.is-#{$state}-lite {
@extend %validation-lite;
@@ -12,4 +38,20 @@
.form-select.is-#{$state}-lite {
@extend %validation-lite;
}
.form-control.is-#{$state} {
@extend %validation-icon-size;
}
.form-control-sm.is-#{$state} {
@extend %validation-icon-size-sm;
}
.form-control-lg.is-#{$state} {
@extend %validation-icon-size-lg;
}
textarea.form-control.is-#{$state} {
@extend %validation-icon-size-textarea;
}
}