# All files / src/tabs tabStyles.ts

98.33% Statements 59/60
85.71% Branches 6/7
100% Functions 1/1
98.33% Lines 59/60

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    611x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    136x
    136x
    136x
    136x
    136x
    136x
    136x
    136x
    136x
    136x
    136x
    136x
    136x
    136x
    136x
    136x
    136x
    136x
    136x
    136x
    43x

    136x
    136x
    136x
    136x
     import { cnb } from "cnbuilder";
    import { cssUtils } from "../cssUtils.js";
    import { bem } from "../utils/bem.js";
    import { tabIndicator } from "./tabIndicatorStyles.js";

    declare module "react" {
      interface CSSProperties {
        "--rmd-tab-color"?: string;
        "--rmd-tab-active-color"?: string;
        "--rmd-tab-inactive-color"?: string;
        "--rmd-tab-disabled-color"?: string;
      }
    }

    const styles = bem("rmd-tab");

    /**
     * @remarks \@since 6.0.0
     */
    export interface TabClassNameOptions {
      className?: string;
      active?: boolean;
      isLink?: boolean;
      activeIndicator?: boolean;
      verticalActiveIndicator?: boolean;
      stacked?: boolean;
      reversed?: boolean;
      disabled?: boolean;
    }

    /**
     * @remarks \@since 6.0.0
     */
    export function tab(options: TabClassNameOptions = {}): string {
      const {
        className,
        active,
        isLink,
        stacked,
        reversed,
        disabled,
        activeIndicator,
        verticalActiveIndicator,
      } = options;

      return cnb(
        styles({
          active,
          reversed: reversed && !stacked,
          stacked,
          "stacked-reversed": stacked && reversed,
          disabled,
        }),
        active &&
          activeIndicator &&
          tabIndicator({ vertical: verticalActiveIndicator }),
        cssUtils({ surface: true, textDecoration: isLink ? "none" : undefined }),
        className
      );
    }