@fluentui/react-northstar/dist/es/themes/teams/components/Menu/menuItemWrapperStyles.js

A themable React component library.

import { pxToRem } from '../../../../utils';
import { menuItemClassName } from '../../../../components/Menu/MenuItem';
import { menuItemIndicatorClassName } from '../../../../components/Menu/MenuItemIndicator';
import { getColorScheme } from '../../colors';
import { submenuIndicatorDirection } from './submenuIndicatorDirection';
import { horizontalPillsRightMargin, verticalPillsBottomMargin, pointingBeak, getFocusedStyles } from './menuItemStyles';
export var menuItemWrapperStyles = {
  root: function root(_ref) {
    var _Object$assign;
    var props = _ref.props,
      v = _ref.variables;
    var active = props.active,
      disabled = props.disabled,
      iconOnly = props.iconOnly,
      isFromKeyboard = props.isFromKeyboard,
      pills = props.pills,
      pointing = props.pointing,
      secondary = props.secondary,
      underlined = props.underlined,
      vertical = props.vertical,
      primary = props.primary,
      on = props.on;
    var colors = getColorScheme(v.colorScheme, null, primary);
    return Object.assign({
      color: 'inherit',
      lineHeight: 1,
      position: 'relative',
      verticalAlign: 'middle',
      display: 'block'
    }, secondary && {
      background: 'salmon'
    }, vertical && {
      border: "solid " + v.verticalItemBorderWidth + " " + v.verticalItemBorderColor
    }, pills && Object.assign({}, vertical ? {
      margin: "0 0 " + verticalPillsBottomMargin + " 0"
    } : {
      margin: "0 " + horizontalPillsRightMargin + " 0 0"
    }, {
      borderRadius: pxToRem(5)
    }), underlined && {
      display: 'flex',
      alignItems: 'center',
      height: pxToRem(29),
      lineHeight: v.lineHeightBase,
      padding: "0 " + pxToRem(4),
      margin: "0 " + pxToRem(4) + " 0 0",
      ':nth-child(n+2)': {
        marginLeft: "" + pxToRem(4)
      },
      boxShadow: 'none'
    }, !vertical && !pills && !underlined && !iconOnly && {
      boxShadow: "-1px 0 0 0 " + (primary ? v.primaryBorderColor : v.borderColor || colors.border) + " inset"
    }, primary && !vertical && !underlined && {
      color: v.primaryWrapperColor
    }, active && !vertical && Object.assign({
      color: v.wrapperColorActive
    }, !underlined && {
      background: v.backgroundColorActive
    }, primary && !vertical && !underlined && {
      color: v.primaryWrapperColor
    }, !underlined && on !== 'hover' && Object.assign({
      background: v.backgroundColorActive || colors.backgroundActive
    }, iconOnly && {
      background: v.activeIconOnlyWrapperBackgroundColor
    }, !iconOnly && primary && {
      color: colors.foregroundActive
    }), underlined && {
      color: v.activeUnderlinedWrapperColor
    }, pointing && !vertical && Object.assign({}, pointingBeak({
      props: props,
      variables: v,
      colors: colors
    }))), isFromKeyboard && Object.assign({
      color: v.wrapperColorFocus
    }, !underlined && Object.assign({
      background: v.wrapperBackgroundColorFocus
    }, primary && {
      background: v.primaryWrapperBackgroundColorFocus,
      color: v.primaryWrapperColorFocus
    }), !iconOnly && !underlined && getFocusedStyles({
      props: props,
      variables: v,
      colors: colors
    }), iconOnly && {
      background: v.iconOnlyWrapperBackgroundColorFocus,
      color: v.iconOnlyColorActive
    }), active && {
      '[data-tabs="true"]': Object.assign({}, !underlined && Object.assign({
        background: v.backgroundColorActive || colors.backgroundActive
      }, iconOnly && {
        background: v.activeIconOnlyWrapperBackgroundColor
      }, !iconOnly && primary && {
        color: colors.foregroundActive
      }), pointing && vertical && {
        '::before': Object.assign({
          content: "''",
          position: 'absolute',
          width: pxToRem(3),
          height: "calc(100% + " + pxToRem(4) + ")",
          top: pxToRem(-2),
          backgroundColor: v.pointingIndicatorBackgroundColor
        }, isFromKeyboard && {
          display: 'none'
        }, pointing === 'end' ? {
          right: pxToRem(-2)
        } : {
          left: pxToRem(-2)
        })
      })
    }, {
      // hover styles
      ':hover': Object.assign({
        color: v.wrapperColorHover,
        background: v.backgroundColorHover || colors.backgroundHover
      }, active && {
        background: v.activeWrapperBackgroundColorHover
      }, vertical && {
        color: v.wrapperColorHover,
        background: v.backgroundColorHover || colors.backgroundHover,
        borderRadius: pxToRem(4)
      }, primary && {
        color: v.primaryWrapperColorHover
      }, underlined && {
        color: v.underlinedWrapperColorHover,
        background: v.underlinedWrapperBackgroundHover
      }, iconOnly && {
        background: v.iconOnlyBackgroundColorHover,
        color: v.iconOnlyColorHover
      }, (_Object$assign = {}, _Object$assign["&>." + menuItemClassName + ">." + menuItemIndicatorClassName] = Object.assign({
        color: v.indicatorColorHover
      }, primary && {
        color: v.primaryIndicatorColorHover
      }, submenuIndicatorDirection(vertical)), _Object$assign))
    }, iconOnly && {
      borderRadius: v.iconOnlyBorderRadius,
      display: 'flex'
    }, {
      ':first-child': Object.assign({}, !pills && !iconOnly && !(pointing && vertical) && !underlined && Object.assign({}, vertical && {
        '::before': {
          display: 'none'
        }
      }, !vertical && {
        borderBottomLeftRadius: pxToRem(3),
        borderTopLeftRadius: pxToRem(3)
      }))
    }, disabled && {
      color: v.colorDisabled || colors.foregroundDisabled,
      cursor: 'default',
      ':hover': {
        // empty - overwrite all existing hover styles
      }
    });
  }
};
//# sourceMappingURL=menuItemWrapperStyles.js.map