From c4d122d595a929fb65ad33b0ba42ab81abe80f2f Mon Sep 17 00:00:00 2001 From: onkar bhosale Date: Thu, 16 Jan 2025 21:25:00 +0530 Subject: [PATCH] I am working on fixing the issue related to button text alignment on Safari (desktop and mobile). The proposed solution includes adding flexbox properties to center the text within the button. I'll update the button style to ensure it's properly centered across all devices. --- assets/bootstrap-5.3.0/scss/_close.scss | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/assets/bootstrap-5.3.0/scss/_close.scss b/assets/bootstrap-5.3.0/scss/_close.scss index 4d6e73c1..9fae98e9 100755 --- a/assets/bootstrap-5.3.0/scss/_close.scss +++ b/assets/bootstrap-5.3.0/scss/_close.scss @@ -1,8 +1,3 @@ -// Transparent background and border properties included for button version. -// iOS requires the button element instead of an anchor tag. -// If you want the anchor version, it requires `href="#"`. -// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile - .btn-close { // scss-docs-start close-css-vars --#{$prefix}btn-close-color: #{$btn-close-color}; @@ -25,6 +20,13 @@ @include border-radius(); opacity: var(--#{$prefix}btn-close-opacity); + // Center text inside button + display: flex; + align-items: center; + justify-content: center; + text-align: center; + font-size: smaller; // Optional: Adjust size as needed + // Override 's hover style &:hover { color: var(--#{$prefix}btn-close-color);