@parkassist/pa-ui-library/dist/components/CRUD/styles.js

INX Platform elements

import { Column, Row } from "../Layout/Flex";
import styled from "styled-components";
import FontStyles from "../../constants/FontStyles";
import Palette from "../../constants/Palette";
export const Wrapper = styled(Column)`
    width: ${p => p.width ? `${p.width}px` : "100%"};
    transition: all 0.2s;
    padding-right: 2px;
    overflow-y: auto;
    overflow-x: hidden;
`;
export const ItemWrapper = styled(Row)`
    background-color: ${p => p.selected ? p.accentColor : Palette.WHITE};
    justify-content: space-between;
    align-items: center;
    border-radius: 3px;
    width: 100%;
    height: 32px;
    margin-bottom: 5px;
    color: ${Palette.BLACK};
    user-select: none;
    font: ${FontStyles.BODY2_FONT};
    transition: all 0.2s;
    &:hover{
       //transform: scale(1.01); 
    }
   
`;
export const ItemAdderWrapper = styled(ItemWrapper)`
    background-color: transparent;
    color: ${Palette.DIM_GREY};
    transition: all 0.2s;
    justify-content: center;
    min-height: 32px;
    cursor: pointer;
    border: 1px solid transparent;
    &:hover{
        transform: none;
        color: ${Palette.BLACK};
        border: 1px solid grey;
    }
`;
export const ColorIndicator = styled(Column)`
    border-radius: 50%;
    width: 16px;
    justify-content: center;
    margin-right: 8px;
    margin-left: 8px;
    height: 16px;
    background-color: ${p => p.color};
`;
export const ButtonsWrapper = styled(Column)`
    justify-content: center;
`;
export const ButtonWrapper = styled(Column)`
    cursor: pointer;
    margin-right: 6px;
    transition: all 0.2s;

    &:hover{
        //transform: scale(1.01);
    }

`;