@fluent-windows/core/ItemGroup/ItemGroup.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 {
    overflow: 'visible',
    boxShadow: theme.shadows[3],
    zIndex: 9999
  };
};

var level = function level(props) {
  return {
    '& .FItem-root': {
      paddingLeft: props.level && 40 + props.level * 12
    }
  };
};

var _float = {
  '& .FItem-root': {
    paddingRight: 40
  }
};
var titleRoot = {
  position: 'relative',
  color: 'inherit'
};

var titleActive = function titleActive(theme) {
  return {
    color: theme.colors.primary["default"]
  };
};

var titleFloatAndHorizontal = {
  '& > .FItem-root': {
    paddingRight: 36
  }
};

var titlePrefix = function titlePrefix(theme) {
  return {
    width: 24,
    height: 24,
    position: 'absolute',
    right: 12,
    top: '50%',
    cursor: 'pointer',
    marginTop: -12,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    fontSize: 12,
    transition: theme.transitions["default"],
    // acrylic false
    zIndex: 1,
    // horizontal === false && expanded === true
    opacity: 0
  };
};

var titlePrefixAcrylic = {
  zIndex: 1
};
var titlePrefixNotFloatOpen = {
  transform: 'rotate(180deg)'
};
var titlePrefixNotFloatClose = {
  transform: 'rotate(0deg)'
};
var titlePrefixHorizontal = {
  opacity: 1
};
var titlePrefixExpanded = {
  opacity: 1
};

var styles = function styles(theme) {
  return {
    root: root(theme),
    level: level,
    "float": _float,
    titleRoot: titleRoot,
    titleActive: titleActive(theme),
    titleFloatAndHorizontal: titleFloatAndHorizontal,
    titlePrefix: titlePrefix(theme),
    titlePrefixAcrylic: titlePrefixAcrylic,
    titlePrefixNotFloatOpen: titlePrefixNotFloatOpen,
    titlePrefixNotFloatClose: titlePrefixNotFloatClose,
    titlePrefixHorizontal: titlePrefixHorizontal,
    titlePrefixExpanded: titlePrefixExpanded
  };
};

exports.styles = styles;