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 sm and lg height consistency for form controls and buttons (#2648)

Browse Source 
Co-authored-by: codecalm <codecalm@gmail.com>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
This commit is contained in:
Bartosz-Do
2026-07-30 19:50:19 +02:00
committed by GitHub
co-authored by codecalm StarDev
parent b43fae2fe3
commit f0b909d300
5 changed files with 195 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/scss/_variables.scss
+135 -106
View File
@@ -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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'><path d='M5 7l3 -3l3 3'/><path d='M5 10l3 3l3 -3'/></svg>") !default;
$table-sort-asc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 7l3 3l3 -3'/></svg>") !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,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $green + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'></polyline></svg>"),
'#',
'%23'
) !default;
$form-feedback-icon-invalid: str-replace(
url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $red + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>"),
'#',
'%23'
) !default;
$form-feedback-icon-valid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $green + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'></polyline></svg>"),
'#',
'%23'
) !default;
$form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $red + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>"),
'#',
'%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'
);
);
core/scss/bootstrap/forms/_form-control.scss
+8 -1
View File
@@ -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;
}
core/scss/bootstrap/forms/_input-group.scss
+31 -25
View File
@@ -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);
}
}
}
core/scss/ui/_buttons.scss
+16 -8
View File
@@ -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 @@
}
}
}
}
}