baseui/mobile-header/styled-components.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledTitle = exports.StyledRoot = exports.StyledNavContainer = exports.StyledActionButtonsContainer = void 0;
var _styles = require("../styles");
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 StyledRoot = exports.StyledRoot = (0, _styles.styled)('div', ({
  $theme,
  $type
}) => ({
  width: '100%',
  display: 'grid',
  gridTemplateColumns: 'auto 1fr auto',
  gridTemplateRows: '48px',
  ...($type === _constants.TYPE.floating ? {
    backgroundColor: 'transparent',
    pointerEvents: 'none'
  } : {
    backgroundColor: $theme.colors.backgroundPrimary
  })
}));
StyledRoot.displayName = "StyledRoot";
StyledRoot.displayName = 'StyledRoot';
const StyledNavContainer = exports.StyledNavContainer = (0, _styles.styled)('div', ({
  $hasTextContent,
  $type,
  $theme
}) => {
  const floatingPadding = $theme.direction === 'rtl' ? {
    paddingRight: $theme.sizing.scale300
  } : {
    paddingLeft: $theme.sizing.scale300
  };
  return {
    pointerEvents: 'auto',
    minWidth: '48px',
    ...($hasTextContent && $type === _constants.TYPE.fixed ? {} : floatingPadding)
  };
});
StyledNavContainer.displayName = "StyledNavContainer";
StyledNavContainer.displayName = 'StyledNavContainer';
const StyledActionButtonsContainer = exports.StyledActionButtonsContainer = (0, _styles.styled)('div', ({}) => ({
  display: 'flex',
  justifyContent: 'flex-end',
  gridColumn: '3 / 4',
  pointerEvents: 'auto'
}));
StyledActionButtonsContainer.displayName = "StyledActionButtonsContainer";
StyledActionButtonsContainer.displayName = 'StyledActionButtonsContainer';
const StyledTitle = exports.StyledTitle = (0, _styles.styled)('div', ({
  $theme,
  $expanded = false
}) => ({
  alignSelf: 'center',
  justifyContent: 'flex-start',
  ...($expanded ? $theme.typography.HeadingLarge : $theme.typography.LabelLarge),
  ...($expanded ? {
    gridColumn: '1 / 4',
    gridRow: 2,
    paddingLeft: $theme.sizing.scale600,
    paddingBottom: $theme.sizing.scale100
  } : {}),
  // truncate long titles
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap',
  overflow: 'hidden'
}));
StyledTitle.displayName = "StyledTitle";
StyledTitle.displayName = 'StyledTitle';