pragmate-ui/tabs/tabs.css

An advanced, on-demand React UI library optimized for BeyondJS. Pragmate UI provides modular, responsive, and accessible components with a focus on efficient bundle sizes and a streamlined development process.

.pui-tabs-container {
  display: flex;
  flex-direction: column;
  position: relative;
}
.pui-tabs-container .pui-tab-menu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.tab-content-wrapper {
  width: 100%;
}
.tab.underlined {
  padding: 1rem;
  cursor: pointer;
  background: var(--surface);
  transition: all 0.2s ease;
  text-transform: capitalize;
  position: relative;
}
.tab.underlined.is-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.tab.underlined::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 5px;
  background-color: var(--primary);
}
.tab.underlined.active {
  background-color: var(--background);
}
.tab.underlined.active::before {
  width: 100%;
}
.tab.underlined:not(.active):not(.is-disabled):hover::before {
  width: 100%;
  background-color: var(--color-gray-20);
}


/*# sourceMappingURL=tabs.css.map*/