fk-react-ui-components/lib/ImageCarousel/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 abhishek.panda on 17/10/17.
 */
import React from 'react';
import styled from "styled-components";
import PropTypes from 'prop-types';
import { colors } from "../../colorCodes";

export const Section = styled.section`
    position: relative;
    padding: ${props => props.padding || '0 10px'};
    margin : ${props => props.margin || '50px auto'};
    width : ${props => props.width || '160px'};
`;

export const Img = styled.img`
    max-width: 90%;
    max-height: 90%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: block;
`;

export const Ul = styled.ul`
    position : relative;
    padding : 0;
    width : ${props => props.width || '0px'};
    left : ${props => props.left || '0px'};
    transition: left 1s;
`;

export const List = styled.li`
    float: left;
    list-style: none;
    width :  ${props => props.width || '110px'};
`;

export const Wrapper = styled.div`
    width :  ${props => props.dimension || '110px'};
    height : ${props => props.dimension || '110px'};
`;

function getNav(direction) {
    let dir = "";
    if (direction == 'prev') {
        dir = "left: 0;";
    } else if (direction == 'next') {
        dir = "right: 0;";
    }
    return dir;
}

export const Controls = styled.span`
    position: absolute;
    top: 50%;
    cursor: pointer;
    font-size: 30px;
    color: ${colors.navButtonText};
    transform: translateY(-50%);
    ${props => getNav(props.direction)}
`;
//# sourceMappingURL=index.js.map