Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-06-17 04:40:04 +04:00
Code Issues Projects Releases Wiki Activity

fix: stndardized heights for form-controls, input-group and buttons by adding variables like $input-line-height-sm.

Browse Source
This commit is contained in:
Bartek
2026-04-30 22:26:35 +02:00
parent d8bbb1e5a7
commit a6f0e74594
4 changed files with 214 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/scss/_variables.scss
+150 -112
View File
@@ -33,7 +33,12 @@ $enable-deprecation-messages: true !default;
$enable-important-utilities: true !default;
// Escaped Characters
$escaped-characters: (('<', '%3c'), ('>', '%3e'), ('#', '%23'), ('(', '%28'), (')', '%29')) !default;
$escaped-characters: (
('<', '%3c'),
('>', '%3e'),
('#', '%23'),
('(', '%28'),
(')', '%29')) !default;
// Dark Mode
$color-mode-type: data !default;
@@ -67,7 +72,7 @@ $grays: (
'700': $gray-700,
'800': $gray-800,
'900': $gray-900,
) !default;
) !default;
$blue: #066fd1 !default;
$azure: #4299e1 !default;
@@ -99,7 +104,7 @@ $colors: (
'white': $white,
'gray': $gray-600,
'gray-dark': $gray-800,
) !default;
) !default;
$min-contrast-ratio: 2 !default;
$color-contrast-dark: $black !default;
@@ -215,7 +220,7 @@ $blues: (
'blue-700': $blue-700,
'blue-800': $blue-800,
'blue-900': $blue-900,
) !default;
) !default;
$indigos: (
'indigo-100': $indigo-100,
@@ -227,7 +232,7 @@ $indigos: (
'indigo-700': $indigo-700,
'indigo-800': $indigo-800,
'indigo-900': $indigo-900,
) !default;
) !default;
$purples: (
'purple-100': $purple-100,
@@ -239,7 +244,7 @@ $purples: (
'purple-700': $purple-700,
'purple-800': $purple-800,
'purple-900': $purple-900,
) !default;
) !default;
$pinks: (
'pink-100': $pink-100,
@@ -251,7 +256,7 @@ $pinks: (
'pink-700': $pink-700,
'pink-800': $pink-800,
'pink-900': $pink-900,
) !default;
) !default;
$reds: (
'red-100': $red-100,
@@ -263,7 +268,7 @@ $reds: (
'red-700': $red-700,
'red-800': $red-800,
'red-900': $red-900,
) !default;
) !default;
$oranges: (
'orange-100': $orange-100,
@@ -275,7 +280,7 @@ $oranges: (
'orange-700': $orange-700,
'orange-800': $orange-800,
'orange-900': $orange-900,
) !default;
) !default;
$yellows: (
'yellow-100': $yellow-100,
@@ -287,7 +292,7 @@ $yellows: (
'yellow-700': $yellow-700,
'yellow-800': $yellow-800,
'yellow-900': $yellow-900,
) !default;
) !default;
$greens: (
'green-100': $green-100,
@@ -299,7 +304,7 @@ $greens: (
'green-700': $green-700,
'green-800': $green-800,
'green-900': $green-900,
) !default;
) !default;
$teals: (
'teal-100': $teal-100,
@@ -311,7 +316,7 @@ $teals: (
'teal-700': $teal-700,
'teal-800': $teal-800,
'teal-900': $teal-900,
) !default;
) !default;
$cyans: (
'cyan-100': $cyan-100,
@@ -323,7 +328,7 @@ $cyans: (
'cyan-700': $cyan-700,
'cyan-800': $cyan-800,
'cyan-900': $cyan-900,
) !default;
) !default;
// Spacers
$spacer-0: 0 !default;
@@ -351,7 +356,7 @@ $spacers: (
4: $spacer-4,
5: $spacer-5,
6: $spacer-6,
) !default;
) !default;
$spacers-extra: (
7: $spacer-7,
@@ -360,7 +365,7 @@ $spacers-extra: (
10: $spacer-10,
11: $spacer-11,
12: $spacer-12,
) !default;
) !default;
$negative-spacers: null !default;
@@ -382,12 +387,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;
@@ -448,7 +476,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;
@@ -486,7 +514,7 @@ $font-sizes: (
4: $h4-font-size,
5: $h5-font-size,
6: $h6-font-size,
) !default;
) !default;
$line-heights: (
h1: $h1-line-height,
@@ -500,7 +528,7 @@ $line-heights: (
sm: $line-height-sm,
lg: $line-height-lg,
xl: $line-height-xl,
) !default;
) !default;
$display-font-sizes: (
1: 5rem,
@@ -509,7 +537,7 @@ $display-font-sizes: (
4: 3.5rem,
5: 3rem,
6: 2rem,
) !default;
) !default;
$display-font-family: null !default;
$display-font-style: null !default;
@@ -554,7 +582,7 @@ $zindex-levels: (
1: 1,
2: 2,
3: 3,
) !default;
) !default;
$text-secondary-opacity: 0.7 !default;
$text-secondary-light-opacity: 0.4 !default;
@@ -638,7 +666,7 @@ $theme-colors: (
'light': $light,
'dark': $dark,
'muted': $muted,
) !default;
) !default;
$extra-colors: (
'blue': $blue,
@@ -653,7 +681,7 @@ $extra-colors: (
'green': $green,
'teal': $teal,
'cyan': $cyan,
) !default;
) !default;
$social-colors: (
'x': #000000,
@@ -672,7 +700,7 @@ $social-colors: (
'flickr': #0063dc,
'bitbucket': #0052cc,
'tabler': #066fd1,
) !default;
) !default;
$gray-colors: (
gray-50: $gray-50,
@@ -686,9 +714,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: (
@@ -701,7 +730,7 @@ $grays: (
'700': $gray-700,
'800': $gray-800,
'900': $gray-900,
) !default;
) !default;
$colors: (
'blue': $blue,
@@ -718,7 +747,7 @@ $colors: (
'white': $white,
'gray': $gray-600,
'gray-dark': $gray-800,
) !default;
) !default;
// Theme color emphasis
$primary-text-emphasis: shade-color($primary, 60%) !default;
@@ -757,7 +786,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;
@@ -771,7 +800,7 @@ $border-widths: (
3: 3px,
4: 4px,
5: 5px,
) !default;
) !default;
$border-style: solid !default;
$border-radius-xs: 2px !default;
@@ -791,7 +820,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,
@@ -829,57 +858,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;
@@ -916,7 +938,7 @@ $position-values: (
0: 0,
50: 50%,
100: 100%,
) !default;
) !default;
// Grid breakpoints
$grid-breakpoints: (
@@ -926,7 +948,7 @@ $grid-breakpoints: (
lg: 992px,
xl: 1200px,
xxl: 1400px,
) !default;
) !default;
// Grid containers
$container-max-widths: (
@@ -935,7 +957,7 @@ $container-max-widths: (
lg: 960px,
xl: 1140px,
xxl: 1320px,
) !default;
) !default;
// Grid columns
$grid-columns: 12 !default;
@@ -948,27 +970,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: (
@@ -985,17 +1004,20 @@ $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;
$box-shadow-sm: 0 1px 3px 0 rgba(18, 18, 23, 0.1), 0 1px 2px 0 rgba(18, 18, 23, 0.06) !default;
$box-shadow-md: 0px 2px 4px -1px rgba(18, 18, 23, 0.06), 0px 4px 6px -1px rgba(18, 18, 23, 0.08) !default;
$box-shadow-lg: 0px 4px 6px -2px rgba(18, 18, 23, 0.05), 0px 10px 15px -3px rgba(18, 18, 23, 0.08) !default;
$box-shadow-xl: 0px 10px 10px -5px rgba(18, 18, 23, 0.04), 0px 20px 25px -5px rgba(18, 18, 23, 0.10) !default;
$box-shadow-sm: 0 1px 3px 0 rgba(18, 18, 23, 0.1),
0 1px 2px 0 rgba(18, 18, 23, 0.06) !default;
$box-shadow-md: 0px 2px 4px -1px rgba(18, 18, 23, 0.06),
0px 4px 6px -1px rgba(18, 18, 23, 0.08) !default;
$box-shadow-lg: 0px 4px 6px -2px rgba(18, 18, 23, 0.05),
0px 10px 15px -3px rgba(18, 18, 23, 0.08) !default;
$box-shadow-xl: 0px 10px 10px -5px rgba(18, 18, 23, 0.04),
0px 20px 25px -5px rgba(18, 18, 23, 0.10) !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),
@@ -1024,7 +1046,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;
@@ -1083,7 +1105,7 @@ $breadcrumb-variants: (
dots: '·',
arrows: '›',
bullets: '\02022',
) !default;
) !default;
// Badges
$badge-font-size: $font-size-reative-sm !default;
@@ -1149,8 +1171,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;
@@ -1207,12 +1228,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;
@@ -1228,8 +1250,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;
@@ -1285,8 +1307,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;
@@ -1480,8 +1501,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;
@@ -1643,8 +1663,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;
@@ -1725,7 +1744,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;
@@ -1907,14 +1926,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;
@@ -1929,8 +1946,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
@@ -1957,35 +1973,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;
@@ -2047,7 +2059,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;
@@ -2423,4 +2461,4 @@ $flag-countries: (
'za',
'zm',
'zw'
);
);
core/scss/bootstrap/forms/_form-control.scss
+16 -5
View File
@@ -38,9 +38,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;
}
@@ -58,7 +61,7 @@
// https://github.com/twbs/bootstrap/issues/23307
// TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
// Multiply line-height by 1em if it has no unit
height: if(sass(math.unit($input-line-height) == ""): $input-line-height * 1em; else: $input-line-height);
height: if(sass(math.unit($input-line-height)==""): $input-line-height * 1em; else: $input-line-height);
// Android Chrome type="date" is taller than the other inputs
// because of "margin: 1px 24px 1px 4px" inside the shadow DOM
@@ -149,6 +152,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);
@@ -162,6 +166,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);
@@ -190,6 +195,7 @@ textarea {
min-height: $input-height-lg;
}
}
// stylelint-enable selector-no-qualifying-type
.form-control-color {
@@ -211,6 +217,11 @@ textarea {
@include border-radius($input-border-radius);
}
&.form-control-sm { height: $input-height-sm; }
&.form-control-lg { height: $input-height-lg; }
}
&.form-control-sm {
height: $input-height-sm;
}
&.form-control-lg {
height: $input-height-lg;
}
}
core/scss/bootstrap/forms/_input-group.scss
+32 -25
View File
@@ -12,9 +12,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%;
@@ -22,9 +22,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;
}
@@ -101,24 +105,27 @@
// 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);
}
}
$validation-messages: "";
@each $state in map.keys($form-validation-states) {
$validation-messages: $validation-messages + ":not(." + string.unquote($state) + "-tooltip)" + ":not(." + string.unquote($state) + "-feedback)";
}
@@ -128,8 +135,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
@@ -52,7 +52,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);
@@ -89,11 +89,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;
@@ -149,19 +151,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};
@@ -197,6 +199,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));
@@ -237,7 +240,7 @@
text-shadow: none !important;
pointer-events: none;
> * {
>* {
opacity: 0;
}
@@ -314,6 +317,7 @@
}
&.btn-animate-icon-rotate {
&:hover,
&:focus-visible {
.icon {
@@ -323,6 +327,7 @@
}
&.btn-animate-icon-move-start {
&:hover,
&:focus-visible {
.icon {
@@ -332,6 +337,7 @@
}
&.btn-animate-icon-pulse {
&:hover,
&:focus-visible {
.icon {
@@ -342,6 +348,7 @@
}
&.btn-animate-icon-shake {
&:hover,
&:focus-visible {
.icon {
@@ -352,6 +359,7 @@
}
&.btn-animate-icon-tada {
&:hover,
&:focus-visible {
.icon {
@@ -360,4 +368,4 @@
}
}
}
}
}