@hitachivantara/uikit-react-pentaho/dist/cjs/Canvas/ToolbarTabs/ToolbarTabs.styles.cjs

UI Kit Pentaho React components.

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const Tab = require("@mui/base/Tab");
const uikitReactCore = require("@hitachivantara/uikit-react-core");
const ToolbarTabEditor = require("./ToolbarTabEditor.cjs");
const MIN_TAB_WIDTH = 120;
const MAX_TAB_WIDTH = 220;
const DROPDOWN_MENU_WIDTH = 64;
const TAB_HEIGHT = 32;
const CLOSE_ICON_SIZE = 32;
const TAB_ICON_SIZE = 16;
const TAB_COLOR = uikitReactCore.theme.mix("primaryDimmed", 0.5, "dimmer");
const { staticClasses, useClasses } = uikitReactCore.createClasses(
  "HvCanvasToolbarTabs",
  {
    root: {
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center",
      width: "100%",
      backgroundColor: uikitReactCore.theme.colors.bgContainer,
      boxShadow: uikitReactCore.theme.colors.shadow,
      borderRadius: `0px 0px ${uikitReactCore.theme.radii.base} ${uikitReactCore.theme.radii.base}`,
      transition: "width 0.3s ease",
      height: TAB_HEIGHT
    },
    tabsContainer: {
      display: "flex"
    },
    tabsList: {
      height: TAB_HEIGHT,
      backgroundColor: uikitReactCore.theme.colors.bgContainer,
      borderEndStartRadius: uikitReactCore.theme.radii.base
    },
    tab: {
      boxSizing: "border-box",
      border: `1px solid transparent`,
      borderBottom: "none",
      borderRadius: "10px 10px 0 0",
      boxShadow: "none",
      backgroundColor: "inherit",
      "&:first-of-type": { borderEndStartRadius: uikitReactCore.theme.radii.base },
      [`&.${Tab.tabClasses.selected}`]: {
        color: uikitReactCore.theme.colors.primary,
        backgroundColor: TAB_COLOR,
        borderColor: uikitReactCore.theme.colors.border
      },
      [`&:hover:not(.${Tab.tabClasses.selected}), &:focus:not(.${Tab.tabClasses.selected})`]: {
        borderRadius: 0,
        backgroundColor: TAB_COLOR,
        borderColor: TAB_COLOR,
        "&:first-of-type": { borderEndStartRadius: uikitReactCore.theme.radii.base }
      },
      // Hide icon when editor is hovered and focused
      [`&:has($tabLabelEditor:hover) $tabIconContainer, &:has(.${ToolbarTabEditor.toolbarTabEditorClasses.edit}) $tabIconContainer`]: {
        display: "none"
      },
      // Hide close when editor is focused
      [`&:has(.${ToolbarTabEditor.toolbarTabEditorClasses.edit}) $closeIconContainer`]: {
        display: "none"
      }
    },
    tabLabel: {
      "&:not($tabLabelEditor)": {
        margin: uikitReactCore.theme.spacing(0, "xs")
      }
    },
    tabLabelEditor: {
      color: uikitReactCore.theme.colors.primary
    },
    tabContent: {
      position: "relative",
      height: TAB_HEIGHT,
      display: "flex",
      justifyContent: "flex-start",
      alignItems: "center",
      width: "100%",
      padding: uikitReactCore.theme.space.xs
    },
    tabIconContainer: {
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      width: TAB_ICON_SIZE
    },
    closeIconContainer: {
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      marginLeft: "auto",
      marginRight: uikitReactCore.theme.spacing(-1),
      width: CLOSE_ICON_SIZE,
      "&:hover": {
        backgroundColor: uikitReactCore.theme.colors.bgHover,
        borderRadius: uikitReactCore.theme.radii.full
      }
    },
    tabDivider: {
      position: "absolute",
      height: 18,
      width: 1,
      backgroundColor: uikitReactCore.theme.colors.bgPageSecondary,
      right: 0
    },
    actionsContainer: {
      display: "flex",
      justifyContent: "flex-end",
      alignItems: "center",
      gap: uikitReactCore.theme.space.sm
    },
    dropdownMenuContainer: {
      width: DROPDOWN_MENU_WIDTH,
      display: "flex",
      justifyContent: "center"
    },
    dropdownMenuListRoot: {
      maxHeight: 220
    }
  }
);
exports.DROPDOWN_MENU_WIDTH = DROPDOWN_MENU_WIDTH;
exports.MAX_TAB_WIDTH = MAX_TAB_WIDTH;
exports.MIN_TAB_WIDTH = MIN_TAB_WIDTH;
exports.staticClasses = staticClasses;
exports.useClasses = useClasses;