diff --git a/.changeset/fix-input-button-size-consistency.md b/.changeset/fix-input-button-size-consistency.md
new file mode 100644
index 000000000..027728cc8
--- /dev/null
+++ b/.changeset/fix-input-button-size-consistency.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fixed `sm` and `lg` size consistency for form controls, buttons, and input groups by aligning `line-height` and computed height variables to resolve [#2456](https://github.com/tabler/tabler/issues/2456).
\ No newline at end of file
diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss
index 6ff88c3da..3fa7ed254 100644
--- a/core/scss/_variables.scss
+++ b/core/scss/_variables.scss
@@ -68,7 +68,7 @@ $grays: (
'700': $gray-700,
'800': $gray-800,
'900': $gray-900,
-) !default;
+ ) !default;
$blue: #066fd1 !default;
$azure: #4299e1 !default;
@@ -100,7 +100,7 @@ $colors: (
'white': $white,
'gray': $gray-600,
'gray-dark': $gray-800,
-) !default;
+ ) !default;
// $min-contrast-ratio, $color-contrast-dark and $color-contrast-light moved to `_settings.scss`
@@ -214,7 +214,7 @@ $blues: (
'blue-700': $blue-700,
'blue-800': $blue-800,
'blue-900': $blue-900,
-) !default;
+ ) !default;
$indigos: (
'indigo-100': $indigo-100,
@@ -226,7 +226,7 @@ $indigos: (
'indigo-700': $indigo-700,
'indigo-800': $indigo-800,
'indigo-900': $indigo-900,
-) !default;
+ ) !default;
$purples: (
'purple-100': $purple-100,
@@ -238,7 +238,7 @@ $purples: (
'purple-700': $purple-700,
'purple-800': $purple-800,
'purple-900': $purple-900,
-) !default;
+ ) !default;
$pinks: (
'pink-100': $pink-100,
@@ -250,7 +250,7 @@ $pinks: (
'pink-700': $pink-700,
'pink-800': $pink-800,
'pink-900': $pink-900,
-) !default;
+ ) !default;
$reds: (
'red-100': $red-100,
@@ -262,7 +262,7 @@ $reds: (
'red-700': $red-700,
'red-800': $red-800,
'red-900': $red-900,
-) !default;
+ ) !default;
$oranges: (
'orange-100': $orange-100,
@@ -274,7 +274,7 @@ $oranges: (
'orange-700': $orange-700,
'orange-800': $orange-800,
'orange-900': $orange-900,
-) !default;
+ ) !default;
$yellows: (
'yellow-100': $yellow-100,
@@ -286,7 +286,7 @@ $yellows: (
'yellow-700': $yellow-700,
'yellow-800': $yellow-800,
'yellow-900': $yellow-900,
-) !default;
+ ) !default;
$greens: (
'green-100': $green-100,
@@ -298,7 +298,7 @@ $greens: (
'green-700': $green-700,
'green-800': $green-800,
'green-900': $green-900,
-) !default;
+ ) !default;
$teals: (
'teal-100': $teal-100,
@@ -310,7 +310,7 @@ $teals: (
'teal-700': $teal-700,
'teal-800': $teal-800,
'teal-900': $teal-900,
-) !default;
+ ) !default;
$cyans: (
'cyan-100': $cyan-100,
@@ -322,7 +322,7 @@ $cyans: (
'cyan-700': $cyan-700,
'cyan-800': $cyan-800,
'cyan-900': $cyan-900,
-) !default;
+ ) !default;
// Spacers
$spacer-0: 0 !default;
@@ -350,7 +350,7 @@ $spacers: (
4: $spacer-4,
5: $spacer-5,
6: $spacer-6,
-) !default;
+ ) !default;
$spacers-extra: (
7: $spacer-7,
@@ -359,7 +359,7 @@ $spacers-extra: (
10: $spacer-10,
11: $spacer-11,
12: $spacer-12,
-) !default;
+ ) !default;
$negative-spacers: null !default;
@@ -381,12 +381,35 @@ $body-emphasis-color: $black !default;
$font-google: null !default;
$font-google-monospaced: null !default;
$font-local: null !default;
-$font-icons: () !default;
+$font-icons: (
+ ) !default;
-$font-family-sans-serif: ('Geist', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif) !default;
-$font-family-monospace: ('Geist Mono', Monaco, Consolas, Liberation Mono, Courier New, monospace) !default;
-$font-family-serif: 'Georgia', 'Times New Roman', times, serif !default;
-$font-family-comic: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Comic Neue', sans-serif, cursive !default;
+$font-family-sans-serif: (
+ 'Geist',
+ -apple-system,
+ BlinkMacSystemFont,
+ San Francisco,
+ Segoe UI,
+ Roboto,
+ Helvetica Neue,
+ sans-serif) !default;
+$font-family-monospace: (
+ 'Geist Mono',
+ Monaco,
+ Consolas,
+ Liberation Mono,
+ Courier New,
+ monospace) !default;
+$font-family-serif: 'Georgia',
+ 'Times New Roman',
+ times,
+ serif !default;
+$font-family-comic: 'Comic Sans MS',
+ 'Comic Sans',
+ 'Chalkboard SE',
+ 'Comic Neue',
+ sans-serif,
+ cursive !default;
$font-family-base: var(--#{$prefix}font-sans-serif) !default;
$font-family-code: var(--#{$prefix}font-monospace) !default;
@@ -447,7 +470,7 @@ $font-weights: (
'semibold': $font-weight-semibold,
'bold': $font-weight-bold,
'headings': $headings-font-weight,
-) !default;
+ ) !default;
$line-height-base: divide(1.25rem, $font-size-base) !default;
$line-height-sm: divide(1rem, $font-size-base) !default;
@@ -485,7 +508,7 @@ $font-sizes: (
4: $h4-font-size,
5: $h5-font-size,
6: $h6-font-size,
-) !default;
+ ) !default;
$line-heights: (
h1: $h1-line-height,
@@ -499,7 +522,7 @@ $line-heights: (
sm: $line-height-sm,
lg: $line-height-lg,
xl: $line-height-xl,
-) !default;
+ ) !default;
$display-font-sizes: (
1: 5rem,
@@ -508,7 +531,7 @@ $display-font-sizes: (
4: 3.5rem,
5: 3rem,
6: 2rem,
-) !default;
+ ) !default;
$display-font-family: null !default;
$display-font-style: null !default;
@@ -553,7 +576,7 @@ $zindex-levels: (
1: 1,
2: 2,
3: 3,
-) !default;
+ ) !default;
$text-secondary-opacity: 0.7 !default;
$text-secondary-light-opacity: 0.4 !default;
@@ -640,7 +663,7 @@ $theme-colors: (
'light': $light,
'dark': $dark,
'muted': $muted,
-) !default;
+ ) !default;
$extra-colors: (
'blue': $blue,
@@ -655,7 +678,7 @@ $extra-colors: (
'green': $green,
'teal': $teal,
'cyan': $cyan,
-) !default;
+ ) !default;
$social-colors: (
'x': #000000,
@@ -674,7 +697,7 @@ $social-colors: (
'flickr': #0063dc,
'bitbucket': #0052cc,
'tabler': #066fd1,
-) !default;
+ ) !default;
$gray-colors: (
gray-50: $gray-50,
@@ -688,9 +711,10 @@ $gray-colors: (
gray-800: $gray-800,
gray-900: $gray-900,
gray-950: $gray-950,
-) !default;
+ ) !default;
-$theme-colors: map.merge($theme-colors, map.merge($extra-colors, ()));
+$theme-colors: map.merge($theme-colors, map.merge($extra-colors, ())
+);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, '$value') !default;
$grays: (
@@ -703,7 +727,7 @@ $grays: (
'700': $gray-700,
'800': $gray-800,
'900': $gray-900,
-) !default;
+ ) !default;
$colors: (
'blue': $blue,
@@ -720,7 +744,7 @@ $colors: (
'white': $white,
'gray': $gray-600,
'gray-dark': $gray-800,
-) !default;
+ ) !default;
// Theme color emphasis
$primary-text-emphasis: shade-color($primary, 60%) !default;
@@ -759,7 +783,7 @@ $backdrop-bg: light-dark(var(--#{$prefix}gray-800), var(--#{$prefix}black)) !def
$backdrops: (
dark: color-mix(in srgb, var(--#{$prefix}color-dark), transparent var(--#{$prefix}backdrop-opacity)),
light: color-mix(in srgb, var(--#{$prefix}color-light), transparent var(--#{$prefix}backdrop-opacity)),
-) !default;
+ ) !default;
// Gradient
$gradient: linear-gradient(180deg, rgba($white, 0.15), rgba($white, 0)) !default;
@@ -773,7 +797,7 @@ $border-widths: (
3: 3px,
4: 4px,
5: 5px,
-) !default;
+ ) !default;
$border-style: solid !default;
$border-radius-xs: 2px !default;
@@ -793,7 +817,7 @@ $border-radiuses: (
lg: $border-radius-lg,
pill: $border-radius-pill,
null: var(--#{$prefix}border-radius-md),
-) !default;
+ ) !default;
$border-values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent,
@@ -831,57 +855,50 @@ $avatar-icon-size: 1.5rem !default;
$avatar-brand-size: 1.25rem !default;
$avatar-bg: var(--#{$prefix}bg-surface-secondary) !default;
$avatar-sizes: (
- 'xxs': (
- size: 1rem,
+ 'xxs': (size: 1rem,
font-size: 0.5rem,
icon-size: 0.5rem,
status-size: 0.25rem,
brand-size: 0.5rem,
),
- 'xs': (
- size: 1.25rem,
+ 'xs': (size: 1.25rem,
font-size: $h6-font-size,
icon-size: 0.75rem,
status-size: 0.375rem,
brand-size: 0.75rem,
border-radius: $border-radius-xs,
),
- 'sm': (
- size: 2rem,
+ 'sm': (size: 2rem,
font-size: $h5-font-size,
icon-size: 1.5rem,
status-size: 0.5rem,
brand-size: 1rem,
),
- 'md': (
- size: 2.5rem,
+ 'md': (size: 2.5rem,
font-size: $h4-font-size,
icon-size: 1.5rem,
status-size: 0.75rem,
brand-size: 1.25rem,
),
- 'lg': (
- size: 3rem,
+ 'lg': (size: 3rem,
font-size: $h2-font-size,
icon-size: 2rem,
status-size: 0.75rem,
brand-size: 1.25rem,
),
- 'xl': (
- size: 5rem,
+ 'xl': (size: 5rem,
font-size: 2rem,
icon-size: 3rem,
status-size: 1rem,
brand-size: 1.25rem,
),
- '2xl': (
- size: 7rem,
+ '2xl': (size: 7rem,
font-size: 3rem,
icon-size: 5rem,
status-size: 1rem,
brand-size: 2rem,
),
-) !default;
+ ) !default;
$avatar-border-radius: var(--#{$prefix}border-radius-pill) !default;
$avatar-font-size: $h4-font-size !default;
$avatar-box-shadow: var(--#{$prefix}shadow-border) !default;
@@ -918,7 +935,7 @@ $position-values: (
0: 0,
50: 50%,
100: 100%,
-) !default;
+ ) !default;
// Grid breakpoints
// $grid-breakpoints moved to `_settings.scss`
@@ -930,7 +947,7 @@ $container-max-widths: (
lg: 960px,
xl: 1140px,
xxl: 1320px,
-) !default;
+ ) !default;
// Grid columns
$grid-columns: 12 !default;
@@ -943,27 +960,24 @@ $container-variations: (
slim: 16rem,
tight: 32rem,
narrow: 61.875rem,
-) !default;
+ ) !default;
// Sizes
$size-spacers: (
auto: auto,
px: 1px,
full: 100%,
-) !default;
+ ) !default;
-$size-values: map.merge(
- $spacers,
- (
- 25: 25%,
- 33: 33.33333%,
- 50: 50%,
- 66: 66.66666%,
- 75: 75%,
- 100: 100%,
- auto: auto,
- )
-) !default;
+$size-values: map.merge($spacers,
+ (25: 25%,
+ 33: 33.33333%,
+ 50: 50%,
+ 66: 66.66666%,
+ 75: 75%,
+ 100: 100%,
+ auto: auto,
+ )) !default;
// Aspect ratios
$aspect-ratios: (
@@ -980,7 +994,7 @@ $aspect-ratios: (
'9x16': calc(16 / 9 * 100%),
'21x9': calc(9 / 21 * 100%),
'9x21': calc(21 / 9 * 100%),
-) !default;
+ ) !default;
// Shadows
$box-shadow-xs: 0 1px 2px 0 rgba(18, 18, 23, 0.05) !default;
@@ -997,8 +1011,7 @@ $box-shadow-xl:
0px 10px 10px -5px rgba(18, 18, 23, 0.04),
0px 20px 25px -5px rgba(18, 18, 23, 0.1) !default;
$box-shadow-2xl: 0px 25px 50px -12px rgba(18, 18, 23, 0.25) !default;
-$box-shadow-overlay:
- 0px 2px 4px 0px rgba(18, 18, 23, 0.04),
+$box-shadow-overlay: 0px 2px 4px 0px rgba(18, 18, 23, 0.04),
0px 5px 8px 0px rgba(18, 18, 23, 0.04),
0px 10px 18px 0px rgba(18, 18, 23, 0.03),
0px 24px 48px 0px rgba(18, 18, 23, 0.03),
@@ -1027,7 +1040,7 @@ $box-shadows: (
card: $box-shadow-card,
card-hover: $box-shadow-card-hover,
dropdown: $box-shadow-dropdown,
-) !default;
+ ) !default;
$box-shadow-inset: inset 0 1px 2px rgba($black, 0.075) !default;
@@ -1086,7 +1099,7 @@ $breadcrumb-variants: (
dots: '·',
arrows: '›',
bullets: '\02022',
-) !default;
+ ) !default;
// Badges
$badge-font-size: $font-size-reative-sm !default;
@@ -1152,8 +1165,7 @@ $btn-border-radius: var(--#{$prefix}border-radius) !default;
$btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
$btn-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
-$btn-transition:
- color 0.15s ease-in-out,
+$btn-transition: color 0.15s ease-in-out,
background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out !default;
@@ -1210,12 +1222,13 @@ $input-focus-border-color: tint-color($component-active-bg, 50%) !default;
$input-focus-color: var(--#{$prefix}body-color) !default;
$input-focus-width: $input-btn-focus-width !default;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
-$input-transition:
- border-color 0.15s ease-in-out,
+$input-transition: border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out !default;
$input-border-width: $input-btn-border-width !default;
$input-line-height: $input-btn-line-height !default;
+$input-line-height-lg: $input-btn-line-height-lg !default;
+$input-line-height-sm: $input-btn-line-height-sm !default;
$input-height-border: calc(#{$input-border-width} * 2) !default;
$input-padding-y-sm: $input-btn-padding-y-sm !default;
@@ -1231,8 +1244,8 @@ $input-height-inner-half: add($input-line-height, $input-padding-y) !default;
$input-height-inner-quarter: add($input-line-height, calc($input-padding-y * 0.5)) !default;
$input-height: add($input-line-height, add(calc($input-padding-y * 2), $input-height-border, false)) !default;
-$input-height-sm: add($input-line-height, add(calc($input-padding-y-sm * 2), $input-height-border, false)) !default;
-$input-height-lg: add($input-line-height, add(calc($input-padding-y-lg * 2), $input-height-border, false)) !default;
+$input-height-sm: add($input-line-height-sm, add(calc($input-padding-y-sm * 2), $input-height-border, false)) !default;
+$input-height-lg: add($input-line-height-lg, add(calc($input-padding-y-lg * 2), $input-height-border, false)) !default;
// Cards
$card-spacer-y: 1.25rem !default;
@@ -1288,8 +1301,7 @@ $accordion-button-padding-y: $accordion-padding-y !default;
$accordion-button-padding-x: $accordion-padding-x !default;
$accordion-button-color: var(--#{$prefix}body-color) !default;
$accordion-button-bg: transparent !default;
-$accordion-transition:
- $btn-transition,
+$accordion-transition: $btn-transition,
border-radius 0.15s ease !default;
$accordion-button-active-bg: transparent !default;
$accordion-button-active-color: inherit !default;
@@ -1483,8 +1495,7 @@ $nav-link-font-size: null !default;
$nav-link-font-weight: null !default;
$nav-link-color: var(--#{$prefix}gray-500) !default;
$nav-link-hover-color: var(--#{$prefix}link-hover-color) !default;
-$nav-link-transition:
- color 0.15s ease-in-out,
+$nav-link-transition: color 0.15s ease-in-out,
background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out !default;
$nav-link-disabled-color: var(--#{$prefix}disabled-color) !default;
@@ -1646,8 +1657,7 @@ $pagination-disabled-color: var(--#{$prefix}disabled-color) !default;
$pagination-disabled-bg: transparent !default;
$pagination-disabled-border-color: var(--#{$prefix}pagination-border-color) !default;
-$pagination-transition:
- color 0.15s ease-in-out,
+$pagination-transition: color 0.15s ease-in-out,
background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out !default;
@@ -1728,7 +1738,7 @@ $table-variants: (
'danger': shift-color($danger, $table-bg-scale),
'light': $light,
'dark': $dark,
-) !default;
+ ) !default;
$table-sort-bg-image: url("data:image/svg+xml,") !default;
$table-sort-asc-bg-image: url("data:image/svg+xml,") !default;
@@ -1910,14 +1920,12 @@ $form-range-thumb-bg: var(--#{$prefix}primary) !default;
$form-range-thumb-border: 2px var(--#{$prefix}border-style) $white !default;
$form-range-thumb-border-radius: 1rem !default;
$form-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba($black, 0.1) !default;
-$form-range-thumb-focus-box-shadow:
- 0 0 0 1px $body-bg,
+$form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg,
$input-focus-box-shadow !default;
$form-range-thumb-focus-box-shadow-width: 0.125rem !default;
$form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
$form-range-thumb-disabled-bg: var(--#{$prefix}secondary-color) !default;
-$form-range-thumb-transition:
- background-color 0.15s ease-in-out,
+$form-range-thumb-transition: background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out !default;
@@ -1932,8 +1940,7 @@ $form-floating-label-height: 1.5em !default;
$form-floating-label-opacity: 0.65 !default;
$form-floating-label-transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !default;
$form-floating-label-disabled-color: $gray-600 !default;
-$form-floating-transition:
- opacity 0.1s ease-in-out,
+$form-floating-transition: opacity 0.1s ease-in-out,
transform 0.1s ease-in-out !default;
// Form text
@@ -1960,35 +1967,31 @@ $form-feedback-invalid-color: $danger !default;
$form-feedback-icon-valid-color: $form-feedback-valid-color !default;
$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
-$form-feedback-icon-valid: str-replace(
- url("data:image/svg+xml,"),
- '#',
- '%23'
-) !default;
-$form-feedback-icon-invalid: str-replace(
- url("data:image/svg+xml,"),
- '#',
- '%23'
-) !default;
+$form-feedback-icon-valid: str-replace(url("data:image/svg+xml,"),
+ '#',
+ '%23'
+ ) !default;
+$form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,"),
+ '#',
+ '%23'
+ ) !default;
// Form validation states
$form-validation-states: (
- 'valid': (
- 'color': var(--#{$prefix}form-valid-color),
+ 'valid': ('color': var(--#{$prefix}form-valid-color),
'icon': $form-feedback-icon-valid,
'tooltip-color': #fff,
'tooltip-bg-color': var(--#{$prefix}success),
'focus-box-shadow': 0 0 $input-btn-focus-blur $input-focus-width color-mix(in srgb, var(--#{$prefix}success) #{math.percentage($input-btn-focus-color-opacity)}, transparent),
'border-color': var(--#{$prefix}form-valid-border-color),
),
- 'invalid': (
- 'color': var(--#{$prefix}form-invalid-color),
+ 'invalid': ('color': var(--#{$prefix}form-invalid-color),
'icon': $form-feedback-icon-invalid,
'tooltip-color': #fff,
'tooltip-bg-color': var(--#{$prefix}danger),
'focus-box-shadow': 0 0 $input-btn-focus-blur $input-focus-width color-mix(in srgb, var(--#{$prefix}danger) #{math.percentage($input-btn-focus-color-opacity)}, transparent),
'border-color': var(--#{$prefix}form-invalid-border-color),
),
-) !default;
+ ) !default;
// Form feedback tooltip
$form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
@@ -2050,7 +2053,33 @@ $figure-caption-font-size: $small-font-size !default;
$figure-caption-color: var(--#{$prefix}secondary-color) !default;
// Tabler Plugins
-$social-apps: ('apple', 'discord', 'dribbble', 'facebook', 'figma', 'github', 'google', 'instagram', 'linkedin', 'medium', 'meta', 'metamask', 'pinterest', 'reddit', 'signal', 'skype', 'snapchat', 'spotify', 'telegram', 'tiktok', 'tumblr', 'twitch', 'vk', 'x', 'youtube');
+$social-apps: (
+ 'apple',
+ 'discord',
+ 'dribbble',
+ 'facebook',
+ 'figma',
+ 'github',
+ 'google',
+ 'instagram',
+ 'linkedin',
+ 'medium',
+ 'meta',
+ 'metamask',
+ 'pinterest',
+ 'reddit',
+ 'signal',
+ 'skype',
+ 'snapchat',
+ 'spotify',
+ 'telegram',
+ 'tiktok',
+ 'tumblr',
+ 'twitch',
+ 'vk',
+ 'x',
+ 'youtube'
+);
// Payments
$payment-sizes: $avatar-sizes !default;
@@ -2426,4 +2455,4 @@ $flag-countries: (
'za',
'zm',
'zw'
-);
+);
\ No newline at end of file
diff --git a/core/scss/bootstrap/forms/_form-control.scss b/core/scss/bootstrap/forms/_form-control.scss
index 9001ffe4a..c1df1b8cf 100644
--- a/core/scss/bootstrap/forms/_form-control.scss
+++ b/core/scss/bootstrap/forms/_form-control.scss
@@ -40,9 +40,12 @@
background-color: $input-focus-bg;
border-color: $input-focus-border-color;
outline: 0;
+
@if $enable-shadows {
@include box-shadow($input-box-shadow, $input-focus-box-shadow);
- } @else {
+ }
+
+ @else {
// Avoid using mixin so we can pass custom focus shadow properly
box-shadow: $input-focus-box-shadow;
}
@@ -151,6 +154,7 @@
// Repeated in `_input_group.scss` to avoid Sass extend issues.
.form-control-sm {
+ line-height: $input-line-height-sm;
min-height: $input-height-sm;
padding: $input-padding-y-sm $input-padding-x-sm;
@include font-size($input-font-size-sm);
@@ -164,6 +168,7 @@
}
.form-control-lg {
+ line-height: $input-line-height-lg;
min-height: $input-height-lg;
padding: $input-padding-y-lg $input-padding-x-lg;
@include font-size($input-font-size-lg);
@@ -192,6 +197,7 @@ textarea {
min-height: $input-height-lg;
}
}
+
// stylelint-enable selector-no-qualifying-type
.form-control-color {
@@ -216,6 +222,7 @@ textarea {
&.form-control-sm {
height: $input-height-sm;
}
+
&.form-control-lg {
height: $input-height-lg;
}
diff --git a/core/scss/bootstrap/forms/_input-group.scss b/core/scss/bootstrap/forms/_input-group.scss
index bcb8e70fa..a12fe1a08 100644
--- a/core/scss/bootstrap/forms/_input-group.scss
+++ b/core/scss/bootstrap/forms/_input-group.scss
@@ -14,9 +14,9 @@
align-items: stretch;
width: 100%;
- > .form-control,
- > .form-select,
- > .form-floating {
+ >.form-control,
+ >.form-select,
+ >.form-floating {
position: relative; // For focus state's z-index
flex: 1 1 auto;
width: 1%;
@@ -24,9 +24,9 @@
}
// Bring the "active" form control to the top of surrounding elements
- > .form-control:focus,
- > .form-select:focus,
- > .form-floating:focus-within {
+ >.form-control:focus,
+ >.form-select:focus,
+ >.form-floating:focus-within {
z-index: 5;
}
@@ -68,26 +68,30 @@
// Remix the default form control sizing classes into new ones for easier
// manipulation.
-.input-group-lg > .form-control,
-.input-group-lg > .form-select,
-.input-group-lg > .input-group-text,
-.input-group-lg > .btn {
+.input-group-lg>.form-control,
+.input-group-lg>.form-select,
+.input-group-lg>.input-group-text,
+.input-group-lg>.btn {
+ line-height: $input-line-height-lg;
+ min-height: $input-height-lg;
padding: $input-padding-y-lg $input-padding-x-lg;
@include font-size($input-font-size-lg);
@include border-radius($input-border-radius-lg);
}
-.input-group-sm > .form-control,
-.input-group-sm > .form-select,
-.input-group-sm > .input-group-text,
-.input-group-sm > .btn {
+.input-group-sm>.form-control,
+.input-group-sm>.form-select,
+.input-group-sm>.input-group-text,
+.input-group-sm>.btn {
+ line-height: $input-line-height-sm;
+ min-height: $input-height-sm;
padding: $input-padding-y-sm $input-padding-x-sm;
@include font-size($input-font-size-sm);
@include border-radius($input-border-radius-sm);
}
-.input-group-lg > .form-select,
-.input-group-sm > .form-select {
+.input-group-lg>.form-select,
+.input-group-sm>.form-select {
padding-right: $form-select-padding-x + $form-select-indicator-padding;
}
@@ -100,19 +104,21 @@
// stylelint-disable-next-line no-duplicate-selectors
.input-group {
&:not(.has-validation) {
+
> :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
- > .dropdown-toggle:nth-last-child(n + 3),
- > .form-floating:not(:last-child) > .form-control,
- > .form-floating:not(:last-child) > .form-select {
+ >.dropdown-toggle:nth-last-child(n + 3),
+ >.form-floating:not(:last-child)>.form-control,
+ >.form-floating:not(:last-child)>.form-select {
@include border-end-radius(0);
}
}
&.has-validation {
+
> :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
- > .dropdown-toggle:nth-last-child(n + 4),
- > .form-floating:nth-last-child(n + 3) > .form-control,
- > .form-floating:nth-last-child(n + 3) > .form-select {
+ >.dropdown-toggle:nth-last-child(n + 4),
+ >.form-floating:nth-last-child(n + 3)>.form-control,
+ >.form-floating:nth-last-child(n + 3)>.form-select {
@include border-end-radius(0);
}
}
@@ -127,8 +133,8 @@
@include border-start-radius(0);
}
- > .form-floating:not(:first-child) > .form-control,
- > .form-floating:not(:first-child) > .form-select {
+ >.form-floating:not(:first-child)>.form-control,
+ >.form-floating:not(:first-child)>.form-select {
@include border-start-radius(0);
}
-}
+}
\ No newline at end of file
diff --git a/core/scss/ui/_buttons.scss b/core/scss/ui/_buttons.scss
index 4e5f06456..217623d65 100644
--- a/core/scss/ui/_buttons.scss
+++ b/core/scss/ui/_buttons.scss
@@ -54,7 +54,7 @@
top: auto;
}
- .btn-check + &:hover {
+ .btn-check+&:hover {
color: var(--#{$prefix}btn-hover-color);
background-color: var(--#{$prefix}btn-hover-bg);
border-color: var(--#{$prefix}btn-hover-border-color);
@@ -91,11 +91,13 @@
@each $color, $value in map.merge($theme-colors, $social-colors) {
.btn-#{$color} {
- @if $color == 'dark' {
+ @if $color =='dark' {
--#{$prefix}btn-border-color: var(--#{$prefix}dark-mode-border-color);
--#{$prefix}btn-hover-border-color: var(--#{$prefix}dark-mode-border-active-color);
--#{$prefix}btn-active-border-color: var(--#{$prefix}dark-mode-border-active-color);
- } @else {
+ }
+
+ @else {
--#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-hover-border-color: transparent;
--#{$prefix}btn-active-border-color: transparent;
@@ -151,19 +153,19 @@
// Button sizes
//
.btn-sm,
-.btn-group-sm > .btn {
+.btn-group-sm>.btn {
--#{$prefix}btn-line-height: #{$input-btn-line-height-sm};
--#{$prefix}btn-icon-size: #{$input-btn-icon-size-sm};
}
.btn-lg,
-.btn-group-lg > .btn {
+.btn-group-lg>.btn {
--#{$prefix}btn-line-height: #{$input-btn-line-height-lg};
--#{$prefix}btn-icon-size: #{$input-btn-icon-size-lg};
}
.btn-xl,
-.btn-group-xl > .btn {
+.btn-group-xl>.btn {
--#{$prefix}btn-line-height: #{$input-btn-line-height-xl};
--#{$prefix}btn-icon-size: #{$input-btn-icon-size-xl};
--#{$prefix}btn-padding-y: #{$input-btn-padding-y-xl};
@@ -199,6 +201,7 @@
.icon {
margin: calc(-1 * var(--#{$prefix}btn-padding-x));
}
+
//[BUG] btn-sm and btn-xl with an icon looks broken
//issue #2470 fixed
min-width: calc(var(--#{$prefix}btn-line-height) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
@@ -239,7 +242,7 @@
text-shadow: none !important;
pointer-events: none;
- > * {
+ >* {
opacity: 0;
}
@@ -316,6 +319,7 @@
}
&.btn-animate-icon-rotate {
+
&:hover,
&:focus-visible {
.icon {
@@ -325,6 +329,7 @@
}
&.btn-animate-icon-move-start {
+
&:hover,
&:focus-visible {
.icon {
@@ -334,6 +339,7 @@
}
&.btn-animate-icon-pulse {
+
&:hover,
&:focus-visible {
.icon {
@@ -344,6 +350,7 @@
}
&.btn-animate-icon-shake {
+
&:hover,
&:focus-visible {
.icon {
@@ -354,6 +361,7 @@
}
&.btn-animate-icon-tada {
+
&:hover,
&:focus-visible {
.icon {
@@ -362,4 +370,4 @@
}
}
}
-}
+}
\ No newline at end of file