fk-react-ui-components/lib/SelectFilter/styles/SelectFilter.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 styled from 'styled-components';
import { colors } from '../../colorCodes';

export const SelectFilterContainer = styled.div`
    font-family: Arial;
    width: ${props => props.width || '210px'};
    .selected-text,
    .Select-placeholder {
        font-size: 12px;
        color: ${colors.greyText};
    }
    .Select-arrow-zone {
        font-size: 12px;
    }
    .select-option {
        font-size: 13px;
        background: ${colors.whiteText};
        &:hover {
            background: ${colors.greyBackground};
        }
        &.is-focused {
            background: ${colors.greyBackground};
        }
        &.is-selected {
            background: ${colors.greyBorder};
        }
    }

    .Select {
        width: ${props => props.width || '210px'};
    }
    .Select-input {
        height: ${props => props.height || '29px'};
    }
    .Select-control {
        width: ${props => props.width || '210px'};
        font-size: 13px;
        height: ${props => props.height || '29px'};
        border-color: ${colors.greyBorder};
    }

    .Select-placeholder,
    .Select--single > .Select-control .Select-value {
        line-height: ${props => props.height || '29px'};
    }
    .is-focused:not(.is-open) > .Select-control {
        border-color: ${colors.brandBlue};
        box-shadow: none;
    }
    .active-icon-color {
        color: ${colors.brandBlue};
    }
    .inprogress-icon-color {
        color: ${colors.inprogressIcon};
    }
    .is-open > .Select-control {
        border-color: ${colors.greyBorder};
    }
    .Select-menu-outer {
        border: none;
        border-radius: 4px;
        background-color: ${colors.whiteText};
        box-shadow: rgba(208, 208, 208, 0.5) 1px 0px 6px 0px;
    }
`;

export default SelectFilterContainer;
//# sourceMappingURL=SelectFilter.js.map