@fluent-windows/core/Item/Item.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 {
    position: 'relative',
    cursor: 'pointer',
    textDecoration: 'none',
    minHeight: 40,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    padding: '12px 20px',
    transition: theme.transitions["default"],
    color: 'inherit',
    backgroundColor: 'transparent',
    '&:hover': {
      backgroundColor: theme.colors.standard.transparent1
    },
    '&:active': {
      color: theme.colors.black["default"],
      backgroundColor: theme.colors.standard.transparent2
    }
  };
};

var reveal = function reveal(theme) {
  return {
    backgroundColor: theme.colors.standard.light2,
    '&:hover': {
      backgroundColor: theme.colors.standard.light1
    },
    '&:active': {
      backgroundColor: theme.colors.standard.dark1
    }
  };
};

var activeBar = function activeBar(theme) {
  return {
    position: 'absolute',
    backgroundColor: theme.colors.primary["default"],
    transition: theme.transitions["default"],
    // horizontal false
    width: 6,
    height: 24,
    left: 0,
    top: '50%',
    marginTop: -12,
    // active false
    transform: 'scale3d(0, 0, 0)'
  };
};

var activeBarHorizontal = {
  // horizontal false
  width: '80%',
  height: 4,
  left: '10%',
  top: 'auto',
  bottom: 0
};
var activeBarActive = {
  transform: 'scale3d(1, 1, 1)'
};

var prefixRoot = function prefixRoot(theme) {
  return {
    height: '100%',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    transition: theme.transitions["default"]
  };
};

var text = function text(theme) {
  return {
    flex: 1,
    display: 'flex',
    alignItems: 'center',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    fontSize: 14,
    transition: theme.transitions["default"],
    // expanded false
    width: 0,
    opacity: 0,
    paddingLeft: 0
  };
};

var textExpanded = {
  width: 'auto',
  opacity: 1
};
var textNoChildren = {
  paddingLeft: '0 !important'
};
var textHasPrefix = {
  paddingLeft: 12
};

var styles = function styles(theme) {
  return {
    root: root(theme),
    reveal: reveal(theme),
    activeBar: activeBar(theme),
    activeBarHorizontal: activeBarHorizontal,
    activeBarActive: activeBarActive,
    prefixRoot: prefixRoot(theme),
    text: text(theme),
    textExpanded: textExpanded,
    textNoChildren: textNoChildren,
    textHasPrefix: textHasPrefix
  };
};

exports.styles = styles;