@fluent-windows/core/Navigation/Navigation.styled.js

React components that inspired by Microsoft's Fluent Design System.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.styles = void 0;

var root = function root(theme) {
  return function (_ref) {
    var horizontal = _ref.horizontal;
    return {
      display: 'flex',
      justifyContent: 'space-between',
      transition: theme.transitions.navigation,
      overflow: 'hidden',
      // horizontal false
      flexDirection: 'column',
      // expanded false
      maxWidth: horizontal ? '' : 44
    };
  };
};

var horizontal = {
  maxHeight: 40,
  flexDirection: 'row !important'
};

var expanded = function expanded(_ref2) {
  var horizontal = _ref2.horizontal;
  return {
    maxWidth: horizontal ? '' : 260
  };
};

var header = {
  display: 'flex',
  // horizontal false
  flexDirection: 'column'
};
var headerHorizontal = {
  flexDirection: 'row'
};
var footer = {
  display: 'flex',
  // horizontal false
  flexDirection: 'column'
};
var footerHorizontal = {
  flexDirection: 'row'
};
var content = {
  display: 'flex',
  flex: 1,
  // horizontal false
  flexDirection: 'column',
  overflowX: 'hidden',
  overflowY: 'auto'
};
var contentHorizontal = {
  flexDirection: 'row',
  overflow: 'hidden'
};

var styles = function styles(theme) {
  return {
    root: root(theme),
    horizontal: horizontal,
    expanded: expanded,
    header: header,
    headerHorizontal: headerHorizontal,
    footer: footer,
    footerHorizontal: footerHorizontal,
    content: content,
    contentHorizontal: contentHorizontal
  };
};

exports.styles = styles;