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

Tabs with border #7252

Closed
tomitank opened this issue Oct 4, 2023 · 1 comment
Closed

Tabs with border #7252

tomitank opened this issue Oct 4, 2023 · 1 comment

Comments

@tomitank
Copy link

tomitank commented Oct 4, 2023

Hi!

A customized the tabs with border, please consider to built this into next release.
here is the results:
Screenshot 2023-10-04 at 12-12-12 WerkzeugManagement

Here is my code:

<EuiTabbedContent
        tabs={tabs}
        autoFocus="selected"
        className={"euiTableList"+(appContext.colorMode === 'dark' ? ' darkMode': '')}
        initialSelectedTab={tabs[0]}
        onTabClick={handleChange}
    />

And the css:

/* euiTableList */

.euiTableList {
  background: inherit;
}

.euiTableList [role="tablist"] {
  z-index: 2;
  box-shadow: none;
  position: relative;
  background: inherit;
}
.euiTableList [role="tablist"]::after {
  content: '';
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 1px;
  display: block;
  position: absolute;
  background: #c8c8c8;
}

.euiTableList [role="tablist"] button.euiTab-isSelected {
  z-index: 3;
  box-shadow: none;
  background: inherit;
  border: 1px solid #c8c8c8;
  border-radius: .28571429rem .28571429rem 0 0;
  position: relative;
}
.euiTableList [role="tablist"] button.euiTab-isSelected::after {
  content: '';
  width: 100%;
  height: 1px;
  display: block;
  position: absolute;
  background: inherit;
  bottom: -1px;
  left: 0;
}

.euiTableList [role="tabpanel"] {
  border: 1px solid #c8c8c8;
  border-radius: 0 0 .28571429rem .28571429rem;
  border-top: none;
  padding: 1em;
  z-index: 1;
}

/* euiTableList darkMode */

.euiTableList.darkMode [role="tablist"]::after {
  background: #343741;
}
.euiTableList.darkMode [role="tablist"] button.euiTab-isSelected {
  border-color: #343741;
}
.euiTableList.darkMode [role="tabpanel"] {
  border-color: #343741;
}
@ryankeairns
Copy link
Contributor

Hi @tomitank , thanks for the suggestion.

We are in the early stages of creating a new EUI theme that will likely bring a wide range of design changes. For that reason, we are not looking to make such visual design additions or changes to the current theme.

@cee-chen cee-chen closed this as not planned Won't fix, can't repro, duplicate, stale Oct 4, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants