@patternfly/elements/pf-tabs/pf-tab.css

PatternFly Elements

[hidden] {
  display: none !important;
}

:host {
  display: flex;
  flex: none;
  outline: none;
  scroll-snap-align: var(--pf-c-tabs__item--ScrollSnapAlign, end);
}

.active {
  /** Current tab text color */
  --pf-c-tabs__link--Color: var(--pf-c-tabs__item--m-current__link--Color,  var(--pf-global--Color--100, #151515));
  /** Current tab border color */
  --pf-c-tabs__link--after--BorderColor: var(--pf-c-tabs__item--m-current__link--after--BorderColor, var(--pf-global--active-color--100, #06c));
  /** Current tab border width */
  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__item--m-current__link--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px));
}

.box.active {
  --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs__item--m-current__link--BackgroundColor, var(--pf-global--BackgroundColor--100, #ffffff));
  --pf-c-tabs__link--before--BorderBottomColor: var(--pf-c-tabs__link--BackgroundColor, transparent);
}

.vertical [part="text"] {
  max-width: 100%;
  overflow-wrap: break-word;
}

slot[name="icon"] {
  display: block;
}

#button {
  margin: 0;
  font-family: inherit;
  font-size: 100%;
  border: 0;
  position: relative;
  display: flex;
  flex: 1;
  text-decoration: none;
  cursor: pointer;
  align-items: center;
  /** Tab icon and text spacing */
  gap: var(--pf-c-tabs__link--child--MarginRight, var(--pf-global--spacer--md, 1rem));
  line-height: var(--pf-global--LineHeight--md, 1.5);
  color: var(--pf-global--Color--100, #151515);
  /** Tab padding (top and bottom) */
  padding:
    var(--pf-c-tabs__link--PaddingTop, var(--pf-global--spacer--sm, 0.5rem))
    var(--pf-c-tabs__link--PaddingRight, var(--pf-global--spacer--md, 1rem))
    var(--pf-c-tabs__link--PaddingBottom, var(--pf-global--spacer--sm, 0.5rem))
    var(--pf-c-tabs__link--PaddingLeft, var(--pf-global--spacer--md, 1rem));
  /** Tab font size */
  font-size: var(--pf-c-tabs__link--FontSize, var(--pf-global--FontSize--md, 1rem));
  /** Tab text color */
  color: var(--pf-c-tabs__link--Color, var(--pf-global--Color--200, #6a6e73));
  /** Tab outline offset */
  outline-offset: var(--pf-c-tabs__link--OutlineOffset, calc(-1 * 0.375rem));
  --pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth, 0);
  /** Tab background color */
  background-color: var(--pf-c-tabs__link--BackgroundColor, transparent);
}

#button::before,
#button::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  border-style: solid;
  padding: 0;
  margin: 0;
  background-color: transparent;
  pointer-events: none;
}

#button::before {
  /** Tab top border width */
  border-block-start-width: var(--pf-c-tabs__link--before--BorderTopWidth, 0);
  /** Tab right border width */
  border-inline-end-width: var(--pf-c-tabs__link--before--BorderRightWidth, 0);
  /** Tab bottom border width */
  border-block-end-width: var(--pf-c-tabs__link--before--BorderBottomWidth, 0);
  /** Tab left border width */
  border-inline-start-width: var(--pf-c-tabs__link--before--BorderLeftWidth, 0);
  /** Tab top border color */
  border-block-start-color: var(--pf-c-tabs__link--before--BorderTopColor,  var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2)));
  /** Tab right border color */
  border-inline-end-color: var(--pf-c-tabs__link--before--BorderRightColor,  var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2)));
  /** Tab bottom border color */
  border-block-end-color: var(--pf-c-tabs__link--before--BorderBottomColor,  var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2)));
  /** Tab left border color */
  border-inline-start-color: var(--pf-c-tabs__link--before--BorderLeftColor,  var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2)));
}

#button::after {
  /** Tab after element top position */
  top: var(--pf-c-tabs__link--after--Top, auto);
  /** Tab after element right position */
  right: var(--pf-c-tabs__link--after--Right, 0);
  /** Tab after element bottom position */
  bottom: var(--pf-c-tabs__link--after--Bottom, 0);
  /** Tab before element left position */
  left: var(--pf-c-tabs__link--before--Left, 0);
  /** Tab after element border color */
  border-color: var(--pf-c-tabs__link--after--BorderColor, var(--pf-global--BorderColor--light-100, #b8bbbe));
  /** Tab after element top border width */
  border-block-start-width:  var(--pf-c-tabs__link--after--BorderTopWidth, 0);
  /** Tab after element right border width */
  border-inline-end-width: var(--pf-c-tabs__link--after--BorderRightWidth, 0);
  /** Tab after element bottom border width */
  border-block-end-width: var(--pf-c-tabs__link--after--BorderBottomWidth);
  /** Tab after element left border width */
  border-inline-start-width: var(--pf-c-tabs__link--after--BorderLeftWidth);
}

:host(:hover) #button {
  --pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--hover__toggle-icon--Color);
  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--hover--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px));
}

:host(:is(:focus, :focus-visible)) #button {
  outline-width: 1px;
  outline-style: auto;
  outline-color: var(--pf-c-tabs__link--after--BorderColor, #06c);
  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--focus--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px));
}

:host(:active) #button {
  --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--active--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px));
}

.fill #button {
  flex-basis: 100%;
  justify-content: center;
}

:host(:disabled) #button {
  pointer-events: none;
}

:host([aria-disabled="true"]) #button {
  cursor: default;
}

.box #button {
  --pf-c-tabs__link--after--BorderTopWidth: var(--pf-c-tabs__link--after--BorderWidth, 0);
}

:is(.box, .vertical) #button {
  --pf-c-tabs__link--after--BorderBottomWidth: 0;
}

.vertical #button {
  --pf-c-tabs__link--after--Bottom: 0;
  --pf-c-tabs__link--after--BorderTopWidth: 0;
  --pf-c-tabs__link--after--BorderLeftWidth: var(--pf-c-tabs__link--after--BorderWidth, 0);
  max-width: 100%;
  text-align: left;
}

.box.vertical #button::after {
  top: calc(var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)) * -1);
}

:host(:first-of-type) .box.vertical #button::after,
.box.vertical.active #button::after {
  top: 0;
}

.box.vertical.active #button::before {
  --pf-c-tabs__link--before--BorderRightColor: var(--pf-c-tabs__item--m-current__link--BackgroundColor, var(--pf-global--BackgroundColor--100, #ffffff));
  --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));
  --pf-c-tabs__link--before--BorderBottomColor: var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2));
}

:host(:first-of-type) .box.active #button::before {
  /** Box style first tab top border width */
  border-block-start-width: var(--pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderTopWidth,  var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));
  /** Box style first tab left border width */
  border-inline-start-width: var(--pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth,  var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));
}

:host(:last-of-type) .box.active #button::before {
  /** Box style last tab right border width */
  border-inline-end-width: var(--pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth, var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));
}

:host([disabled]) #button,
:host([aria-disabled="true"]) #button {
  --pf-c-tabs__link--Color: var(--pf-c-tabs__link--disabled--Color,  var(--pf-global--disabled-color--100, #6a6e73));
  /** Disabled tab background color */
  --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs__link--disabled--BackgroundColor, var(--pf-global--palette--black-150, #f5f5f5));
  /** Disabled tab right border width */
  --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--disabled--before--BorderRightWidth, 0);
  /** Disabled tab bottom border width */
  --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--disabled--before--BorderBottomWidth, var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));
  /** Disabled tab left border width */
  --pf-c-tabs__link--before--BorderLeftWidth: var(--pf-c-tabs__link--disabled--before--BorderLeftWidth, 0);
  --pf-c-tabs__link--after--BorderWidth: 0;
}

[part="icon"] {
  display: flex !important;
}

[part="icon"][hidden] {
  display: none !important;
}

:host([disabled][border-bottom="false"]) #button,
:host([aria-disabled="true"][border-bottom="false"]) #button {
  --pf-c-tabs__link--before--BorderBottomWidth: 0;
}