Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bottom Border for Tabs outline is incorrect #5370

Closed
Snivio opened this issue Dec 5, 2023 · 1 comment
Closed

Bottom Border for Tabs outline is incorrect #5370

Snivio opened this issue Dec 5, 2023 · 1 comment
Labels
Fixed patch Completed issues that will be published with next patch (1.0.X)

Comments

@Snivio
Copy link

Snivio commented Dec 5, 2023

What package has an issue?

@mantine/core

Describe the bug

There is slight clip on the bottom border for the tabs in outline variant
here:
image

It should have a proper bottom without any clip
image

What version of @mantine/* packages do you have in package.json? (Note that all @mantine/* packages must have the same version in order to work correctly)

7.1.5

If possible, please include a link to a codesandbox with a minimal reproduction

No response

Do you know how to fix the issue

Yes

Do you want to send a pull request with a fix?

None

Possible fix

'&[data-variant=outline]': {
    '&[data-orientation=horizontal]': {
      '&[data-active]': {
        borderColor: `black black var(--mantine-color-body)black`,

        '&::after': {
          content: '""',
          position: 'absolute',
          left: '-2px',
          bottom: '-2px',
          width: '105%',
          height: '2px',
          backgroundImage: `linear-gradient(to right, black 2px, white 2px, white calc(100% - 2px), black calc(100% - 4px))`,
        },
      },
    },
    '&[data-orientation=vertical]': {
      '&[data-active]': {
        borderColor: `black var(--mantine-color-body) black black}`,

        '&::after': {
          content: '""',
          position: 'absolute',
          right: ' -2px',
          top: ' -2px',
          width: '2px',
          height: '109%',
          backgroundImage: `linear-gradient(to bottom, black 2px, white 2px, white calc(100% - 2px), black calc(100% - 2px))`,
        },
      },
    },
  },

had to add the :after for both vertical and horizontal when active to the tabs element

@rtivital rtivital added the Fixed patch Completed issues that will be published with next patch (1.0.X) label Dec 7, 2023
@rtivital
Copy link
Member

Fixed in 7.3.2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Fixed patch Completed issues that will be published with next patch (1.0.X)
Projects
None yet
Development

No branches or pull requests

2 participants