@fluent-windows/core/es/ItemGroup/ItemGroup.styled.js

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

const root = theme => ({
  overflow: 'visible',
  boxShadow: theme.shadows[3],
  zIndex: 9999
});

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

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

const titleActive = theme => ({
  color: theme.colors.primary.default
});

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

const titlePrefix = theme => ({
  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
});

const titlePrefixAcrylic = {
  zIndex: 1
};
const titlePrefixNotFloatOpen = {
  transform: 'rotate(180deg)'
};
const titlePrefixNotFloatClose = {
  transform: 'rotate(0deg)'
};
const titlePrefixHorizontal = {
  opacity: 1
};
const titlePrefixExpanded = {
  opacity: 1
};
export const styles = theme => ({
  root: root(theme),
  level,
  float,
  titleRoot,
  titleActive: titleActive(theme),
  titleFloatAndHorizontal,
  titlePrefix: titlePrefix(theme),
  titlePrefixAcrylic,
  titlePrefixNotFloatOpen,
  titlePrefixNotFloatClose,
  titlePrefixHorizontal,
  titlePrefixExpanded
});