diff --git a/.changeset/btn-icon-square.md b/.changeset/btn-icon-square.md new file mode 100644 index 000000000..a591064ca --- /dev/null +++ b/.changeset/btn-icon-square.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Fixed `.btn-icon` to be square by aligning `min-width` calculation with base `.btn` formula. diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index 66f4cb461..ed7cd596b 100644 --- a/core/scss/_variables.scss +++ b/core/scss/_variables.scss @@ -601,7 +601,7 @@ $input-btn-focus-width: 0.25rem !default; $input-btn-padding-y-sm: 0.3125rem !default; $input-btn-padding-x-sm: 0.5rem !default; $input-btn-font-size-sm: $h5-font-size !default; -$input-btn-line-height-sm: divide(1rem, $input-btn-font-size-sm) !default; +$input-btn-line-height-sm: 1rem !default; $input-btn-icon-size-sm: 1rem !default; $input-btn-padding-y: 0.5625rem !default; @@ -617,9 +617,9 @@ $input-btn-font-size-lg: $h3-font-size !default; $input-btn-icon-size-lg: 1.5rem !default; $input-btn-padding-y-xl: 0.6875rem !default; -$input-btn-padding-x-xl: 2rem !default; +$input-btn-padding-x-xl: 1.75rem !default; $input-btn-font-size-xl: $h1-font-size !default; -$input-btn-line-height-xl: divide(2rem, $input-btn-font-size-lg) !default; +$input-btn-line-height-xl: 2rem !default; $input-btn-icon-size-xl: 2rem !default; diff --git a/core/scss/ui/_buttons.scss b/core/scss/ui/_buttons.scss index f9c5b6bcf..078433166 100644 --- a/core/scss/ui/_buttons.scss +++ b/core/scss/ui/_buttons.scss @@ -197,8 +197,7 @@ } //[BUG] btn-sm and btn-xl with an icon looks broken //issue #2470 fixed - min-width: calc(var(--#{$prefix}btn-icon-size) + (var(--#{$prefix}btn-padding-x) * 2)); - min-height: calc(var(--#{$prefix}btn-icon-size) + (var(--#{$prefix}btn-padding-y) * 2)); + min-width: calc(var(--#{$prefix}btn-line-height) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2)); } //