baseui/app-nav-bar/styled-components.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledUserProfileTileContainer = exports.StyledUserProfilePictureContainer = exports.StyledUserProfileInfoContainer = exports.StyledUserMenuProfileListItem = exports.StyledUserMenuButton = exports.StyledSubnavContainer = exports.StyledSpacing = exports.StyledSideMenuButton = exports.StyledSecondaryMenuContainer = exports.StyledRoot = exports.StyledPrimaryMenuContainer = exports.StyledMainMenuItem = exports.StyledDesktopMenuContainer = exports.StyledDesktopMenu = exports.StyledAppName = void 0;
var _styles = require("../styles");
var _responsiveHelpers = require("../helpers/responsive-helpers");
var _menu = require("../menu");
var _constants = require("./constants");
/*
Copyright (c) Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/

const StyledButton = (0, _styles.styled)('button', ({
  $theme,
  $isFocusVisible
}) => ({
  boxSizing: 'border-box',
  display: 'flex',
  flexDirection: 'row',
  flexWrap: 'nowrap',
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: 'transparent',
  color: $theme.colors.contentPrimary,
  borderLeftWidth: 0,
  borderTopWidth: 0,
  borderRightWidth: 0,
  borderBottomWidth: 0,
  paddingTop: '0',
  paddingBottom: '0',
  paddingLeft: '0',
  paddingRight: '0',
  marginLeft: 0,
  marginTop: 0,
  marginRight: 0,
  marginBottom: 0,
  outline: $isFocusVisible ? `3px solid ${$theme.colors.borderAccent}` : 'none',
  outlineOffset: '-3px',
  WebkitAppearance: 'none',
  cursor: 'pointer'
}));
StyledButton.displayName = "StyledButton";
StyledButton.displayName = 'StyledButton';
const StyledRoot = exports.StyledRoot = (0, _styles.styled)('div', props => {
  const {
    $theme
  } = props;
  return {
    ...$theme.typography.font300,
    ...(0, _responsiveHelpers.getMinimumPageMargins)($theme.grid.margins),
    ...(0, _responsiveHelpers.getMediaQueryPageMargins)($theme),
    boxSizing: 'border-box',
    backgroundColor: $theme.colors.backgroundPrimary,
    borderBottomWidth: '1px',
    borderBottomStyle: 'solid',
    borderBottomColor: `${$theme.colors.borderOpaque}`
  };
});
StyledRoot.displayName = "StyledRoot";
StyledRoot.displayName = 'StyledRoot';
const StyledSubnavContainer = exports.StyledSubnavContainer = (0, _styles.styled)('div', {});
StyledSubnavContainer.displayName = "StyledSubnavContainer";
StyledSubnavContainer.displayName = 'StyledSubnavContainer';
const StyledSpacing = exports.StyledSpacing = (0, _styles.styled)('div', props => {
  const {
    $theme
  } = props;
  return {
    boxSizing: 'border-box',
    height: '100%',
    display: 'flex',
    alignItems: 'center',
    paddingTop: $theme.sizing.scale400,
    paddingBottom: $theme.sizing.scale400,
    [$theme.mediaQuery.medium]: {
      paddingTop: $theme.sizing.scale700,
      paddingBottom: $theme.sizing.scale700
    }
  };
});
StyledSpacing.displayName = "StyledSpacing";
StyledSpacing.displayName = 'StyledSpacing';
const StyledAppName = exports.StyledAppName = (0, _styles.styled)('div', ({
  $theme
}) => ({
  ...$theme.typography.font550,
  color: $theme.colors.contentPrimary,
  textDecoration: 'none',
  [$theme.mediaQuery.medium]: {
    ...$theme.typography.font650
  }
}));
StyledAppName.displayName = "StyledAppName";
StyledAppName.displayName = 'StyledAppName';
const StyledSideMenuButton = exports.StyledSideMenuButton = (0, _styles.withStyle)(StyledButton, ({
  $theme
}) => ({
  ...($theme.direction === 'rtl' ? {
    marginLeft: $theme.sizing.scale600
  } : {
    marginRight: $theme.sizing.scale600
  }),
  paddingTop: $theme.sizing.scale100,
  paddingBottom: $theme.sizing.scale100,
  paddingLeft: $theme.sizing.scale100,
  paddingRight: $theme.sizing.scale100
}));
StyledSideMenuButton.displayName = "StyledSideMenuButton";
StyledSideMenuButton.displayName = 'StyledSideMenuButton';
const StyledPrimaryMenuContainer = exports.StyledPrimaryMenuContainer = (0, _styles.styled)('div', ({
  $theme
}) => {
  return {
    boxSizing: 'border-box',
    height: '100%',
    display: 'flex',
    flexDirection: 'row',
    flexGrow: 1,
    flexWrap: 'nowrap',
    justifyContent: 'flex-end',
    alignItems: 'stretch',
    paddingInlineEnd: $theme.sizing.scale1000
  };
});
StyledPrimaryMenuContainer.displayName = "StyledPrimaryMenuContainer";
StyledPrimaryMenuContainer.displayName = 'StyledPrimaryMenuContainer';
const StyledMainMenuItem = exports.StyledMainMenuItem = (0, _styles.styled)('div', props => {
  const {
    $active,
    $isFocusVisible,
    $kind,
    $theme: {
      colors,
      sizing,
      direction
    }
  } = props;
  return {
    boxSizing: 'border-box',
    display: 'flex',
    alignItems: 'center',
    color: $active ? colors.contentPrimary : colors.contentTertiary,
    marginLeft: sizing.scale700,
    marginRight: sizing.scale700,
    paddingTop: $kind === _constants.KIND.secondary ? sizing.scale750 : '0',
    paddingBottom: $kind === _constants.KIND.secondary ? sizing.scale750 : '0',
    outline: $isFocusVisible ? `3px solid ${colors.borderAccent}` : 'none',
    outlineOffset: '-3px',
    borderBottomWidth: '2px',
    borderBottomStyle: 'solid',
    borderBottomColor: $active && !$isFocusVisible ? colors.borderSelected : 'transparent',
    cursor: $active ? 'default' : 'pointer',
    whiteSpace: $kind === _constants.KIND.secondary ? 'nowrap' : 'initial',
    ':first-child': {
      ...(direction === 'rtl' ? {
        marginRight: '0'
      } : {
        marginLeft: '0'
      })
    },
    ':last-child': {
      ...(direction === 'rtl' ? {
        marginLeft: '0'
      } : {
        marginRight: '0'
      })
    },
    ':hover': {
      color: colors.contentPrimary
    }
  };
});
StyledMainMenuItem.displayName = "StyledMainMenuItem";
StyledMainMenuItem.displayName = 'StyledMainMenuItem';
const StyledSecondaryMenuContainer = exports.StyledSecondaryMenuContainer = (0, _styles.styled)('div', ({
  $theme
}) => {
  return {
    boxSizing: 'border-box',
    height: '100%',
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'nowrap',
    justifyContent: 'flex-start',
    margin: 'auto',
    maxWidth: `${$theme.grid.maxWidth}px`,
    alignItems: 'stretch',
    overflow: 'auto'
  };
});
StyledSecondaryMenuContainer.displayName = "StyledSecondaryMenuContainer";
StyledSecondaryMenuContainer.displayName = 'StyledSecondaryMenuContainer';
const StyledUserMenuButton = exports.StyledUserMenuButton = StyledButton;
StyledUserMenuButton.displayName = 'StyledUserMenuButton';
const StyledUserMenuProfileListItem = exports.StyledUserMenuProfileListItem = (0, _styles.withStyle)(_menu.StyledListItem, ({
  $theme
}) => ({
  paddingTop: '0',
  paddingBottom: '0',
  ...($theme.direction === 'rtl' ? {
    paddingLeft: '0'
  } : {
    paddingRight: '0'
  })
}));
StyledUserMenuProfileListItem.displayName = "StyledUserMenuProfileListItem";
StyledUserMenuProfileListItem.displayName = 'StyledUserMenuProfileListItem';
const StyledUserProfileTileContainer = exports.StyledUserProfileTileContainer = (0, _styles.styled)('div', ({
  $theme
}) => {
  return {
    boxSizing: 'border-box',
    height: '100%',
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'nowrap',
    justifyContent: 'flex-start',
    paddingTop: $theme.sizing.scale650,
    paddingBottom: $theme.sizing.scale650
  };
});
StyledUserProfileTileContainer.displayName = "StyledUserProfileTileContainer";
StyledUserProfileTileContainer.displayName = 'StyledUserProfileTileContainer';
const StyledUserProfilePictureContainer = exports.StyledUserProfilePictureContainer = (0, _styles.styled)('div', ({
  $theme
}) => {
  return {
    ...($theme.direction === 'rtl' ? {
      marginLeft: $theme.sizing.scale600
    } : {
      marginRight: $theme.sizing.scale600
    })
  };
});
StyledUserProfilePictureContainer.displayName = "StyledUserProfilePictureContainer";
StyledUserProfilePictureContainer.displayName = 'StyledUserProfilePictureContainer';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const StyledUserProfileInfoContainer = exports.StyledUserProfileInfoContainer = (0, _styles.styled)('div', ({
  $theme
}) => {
  return {
    boxSizing: 'border-box',
    alignSelf: 'center'
  };
});
StyledUserProfileInfoContainer.displayName = "StyledUserProfileInfoContainer";
StyledUserProfileInfoContainer.displayName = 'StyledUserProfileInfoContainer';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const StyledDesktopMenuContainer = exports.StyledDesktopMenuContainer = (0, _styles.styled)('div', ({
  $theme
}) => {
  return {};
});
StyledDesktopMenuContainer.displayName = "StyledDesktopMenuContainer";
StyledDesktopMenuContainer.displayName = 'StyledDesktopMenuContainer';
const StyledDesktopMenu = exports.StyledDesktopMenu = (0, _styles.styled)('div', ({
  $theme
}) => {
  return {
    alignItems: 'center',
    display: 'flex',
    justifyContent: 'space-between',
    margin: 'auto',
    maxWidth: `${$theme.grid.maxWidth}px`,
    paddingBlockStart: '18px',
    paddingBlockEnd: '18px'
  };
});
StyledDesktopMenu.displayName = "StyledDesktopMenu";
StyledDesktopMenu.displayName = 'StyledDesktopMenu';