fk-react-ui-components/lib/FilterComponent/styles/FilterComponent.js

Step 1 : Create a file in [ Seeds / Plants / Trees ] <br> Step 2 : It should export an Object with component name and story Component [Refer other components] <br> Step 3 : Story Component should return a react component <br> Step 3 : Created file should

/** Created by manoraj.k on 17/08/17. */
import React from "react";
import styled from "styled-components";
import { colors } from "../../colorCodes";

export const FilterComponentContainer = styled.div`
    position: relative;
    background-color: ${colors.greyBackground};
    box-shadow: 0 0 2px 0 ${colors.lineBorder};
    transition: all 0.15s ease-out;
    max-height: 0;
    overflow: hidden;
    opacity: 0;

    &.open {
        transition: all 0.25s ease-in;
        max-height: 500px;
        opacity: 1;
        overflow: visible;
    }
`;
const Button = styled.button`
    padding: 8px 20px;
    cursor: pointer;
    outline: none;
`;
export const ResetButton = Button.extend`
    border: none;
    background: none;
    color: ${colors.greyText};
`;
export const ApplyButton = Button.extend`
    background-color: ${colors.greyBtnBackground};
    border: solid 1px ${colors.greyBorder};
    border-radius: 4px;
    color: white;
`;
export const Chip = styled.div`
    display : inline-block;
    background-color : ${colors.chipBackground};
    font-size : 12px;
    border-radius : 12px;
    margin : 2px;
    padding : 4px 10px;
    color: ${colors.whiteText};

    span {
        padding-right: 10px;
    }

    i {
        cursor: pointer;
    }
`;
export const Chips = styled.div`
`;
export const ChipsContainer = styled.div`
    display: flex;
    padding: 10px 10px 0;
    align-items: center;
`;
export const Label = styled.span`
    white-space: nowrap;
    padding-right: 10px;
    font-size: 14px;
`;
export const FiltersContainer = styled.div`
    display: flex;
    justify-content: space-between;
    padding: 10px;
`;
export const Filters = styled.div`
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
`;
export const Filter = styled.div`
    padding: 3px;
`;
export const FilterActions = styled.div`
    display: flex;
    align-items: flex-end;
`;
//# sourceMappingURL=FilterComponent.js.map