fk-react-ui-components/lib/Breadcrumbs/styles/index.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 godfrey.f on 20/11/17.
 */
import styled from 'styled-components';
import { colors } from '../../colorCodes';

export const BreadcrumbContainer = styled.div`
    background: ${colors.whiteText};
    color: ${colors.breadcrumbColor};
    font-size: 12px;
    font-family: Arial;
    box-sizing: border-box;
    display: inline-block;
    ul {
        height: 17px;
        margin: 0px;
        padding: 0px;
    }
    ul li {
        display: inline-block;
        span.section-link {
            display: inline-block;
            max-width: 120px;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: middle;
            padding: 2px 4px;
            color: ${colors.activeBreadCrumbColor};

            &:hover {
                max-width: 100%;
                overflow: visible;
            }
        }
        &:last-child {
            span.section-link {
                cursor: auto;
                text-decoration: none;
                color: ${colors.breadcrumbColor};
            }
            .separator {
                display: none;
            }
        }
        .separator {
            display: inline-block;
            width: 15px;
            text-align: center;
            vertical-align: middle;
        }
    }
`;

export default {
    BreadcrumbContainer
};
//# sourceMappingURL=index.js.map