@parkassist/pa-ui-library/dist/components/NestedGroup/style.js

INX Platform elements

import styled from "styled-components";
import Palette from "../../constants/Palette";
import Measures from "../../constants/Measures";
import Nestable from 'react-nestable';
import { Column, Row } from "../Layout/Flex";
import FontStyles from "../../constants/FontStyles";
export const Handler = styled.span(() => ({
  position: "absolute",
  top: 0,
  left: 0,
  width: "10px",
  height: "100%",
  background: "steelblue",
  cursor: "pointer"
}));
export const Element = styled.div(({
  selected,
  accentColor = Palette.SUCCESS_GREEN_LIGHT,
  hidden
}) => ({
  color: hidden ? Palette.VERY_LIGHT_GREY_NEW : Palette.BLACK,
  backgroundColor: Palette.WHITE,
  borderBottom: selected ? `5px solid ${accentColor}` : `none`,
  height: Measures.rowHeight,
  font: FontStyles.BODY1_FONT,
  borderRadius: 3,
  padding: "4px 8px",
  cursor: "pointer",
  display: "flex",
  alignItems: "center",
  transition: "all 0.2s",
  "&:hover": {
    transform: "scale(1.02)",
    boxShadow: "1px 1px 1px 0px rgba(0, 0, 0, 0.2)"
  }
}));
export const FakeElement = styled.div(() => ({
  color: Palette.BLACK,
  font: FontStyles.BODY1_FONT,
  borderRadius: 3,
  padding: "4px 8px",
  cursor: "pointer",
  display: "flex",
  alignItems: "center",
  transition: "all 0.2s",
  height: Measures.rowHeight,
  opacity: 0.6,
  border: `1px solid transparent`,
  "&:hover": {
    border: `1px solid ${Palette.BLACK}`,
    opacity: 1
  }
}));
export const Field = styled(Column)(() => ({
  justifyContent: "center"
}));
export const IconWrapper = styled(Field)(({
  hidden
}) => ({
  marginRight: 8,
  fontSize: 18,
  filter: hidden ? Palette.FILTER_DARK_GREY : Palette.FILTER_BLACK
}));
export const FieldButton = styled(Field)(({
  color
}) => ({
  fontSize: 18,
  color,
  cursor: "pointer",
  margin: "0px 4px",
  transition: "all 0.2s",
  "&:hover": {
    transform: "scale(1.3)"
  }
}));
export const ElementContent = styled(Row)(() => ({
  width: "100%",
  justifyContent: "space-between"
}));
export const StyledNestable = styled(Nestable)(({
  width
}) => ({
  width
}));