baseui/bottom-navigation/styled-components.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledTitle = exports.StyledSelectorList = exports.StyledSelector = exports.StyledRoot = exports.StyledPanel = exports.StyledOverflowPanelList = exports.StyledOverflowPanel = void 0;
var _styles = require("../styles");
/*
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 SELECTOR_LIST_HEIGHT = '64px';
const StyledRoot = exports.StyledRoot = (0, _styles.styled)('div', {
  height: '100%',
  width: '100%',
  display: 'flex',
  flexDirection: 'column'
});
StyledRoot.displayName = "StyledRoot";
StyledRoot.displayName = 'StyledRoot';
const StyledSelectorList = exports.StyledSelectorList = (0, _styles.styled)('div', ({
  $theme
}) => {
  return {
    container: 'nav-item-list / inline-size',
    boxSizing: 'border-box',
    display: 'grid',
    gridAutoFlow: 'column',
    gridAutoColumns: '1fr',
    gap: $theme.sizing.scale300,
    width: '100%',
    height: SELECTOR_LIST_HEIGHT,
    paddingTop: $theme.sizing.scale500,
    paddingBottom: $theme.sizing.scale500,
    paddingLeft: $theme.sizing.scale300,
    paddingRight: $theme.sizing.scale300,
    borderTop: `${$theme.sizing.scale0} solid ${$theme.colors.borderOpaque}`,
    backgroundColor: $theme.colors.backgroundPrimary
  };
});
StyledSelectorList.displayName = "StyledSelectorList";
StyledSelectorList.displayName = 'StyledSelectorList';
const StyledOverflowPanel = exports.StyledOverflowPanel = (0, _styles.styled)('div', {
  height: `calc(100% - ${SELECTOR_LIST_HEIGHT})`,
  overflow: 'auto'
});
StyledOverflowPanel.displayName = "StyledOverflowPanel";
StyledOverflowPanel.displayName = 'StyledOverflowPanel';
const StyledOverflowPanelList = exports.StyledOverflowPanelList = (0, _styles.styled)('ul', {
  paddingLeft: 0,
  paddingRight: 0
});
StyledOverflowPanelList.displayName = "StyledOverflowPanelList";
StyledOverflowPanelList.displayName = 'StyledOverflowPanelList';
const StyledTitle = exports.StyledTitle = (0, _styles.styled)('div', ({
  $theme,
  $isActive
}) => ({
  ...$theme.typography.LabelXSmall,
  color: $isActive ? $theme.colors.bottomNavigationSelectedText : $theme.colors.bottomNavigationText
}));
StyledTitle.displayName = "StyledTitle";
StyledTitle.displayName = 'StyledTitle';
const StyledSelector = exports.StyledSelector = (0, _styles.styled)('button', ({
  $theme
}) => ({
  '@container nav-item-list (inline-size > 600px)': {
    flexDirection: 'row',
    gap: $theme.sizing.scale500
  },
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  flexDirection: 'column',
  gap: $theme.sizing.scale100,
  // button style reset
  borderRadius: 0,
  textAlign: 'inherit',
  background: 'none',
  boxShadow: 'none',
  padding: 0,
  cursor: 'pointer',
  border: 'none',
  color: 'inherit',
  font: 'inherit'
}));
StyledSelector.displayName = "StyledSelector";
StyledSelector.displayName = 'StyledSelector';
const StyledPanel = exports.StyledPanel = (0, _styles.styled)('div', {
  height: `calc(100% - ${SELECTOR_LIST_HEIGHT})`,
  overflow: 'auto'
});
StyledPanel.displayName = "StyledPanel";
StyledPanel.displayName = 'StyledPanel';