fk-react-ui-components/lib/Stepper/styles.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

import styled from 'styled-components';
import { colors } from '../colorCodes';

export const StepperContainer = styled.div`
    display: flex;
    flex-direction: ${({ orientation }) => orientation === 'vertical' ? 'row' : 'column'};
    ${({ styles }) => styles.height ? 'height: ' + styles.height + ';' : ''}
    ${({ styles }) => styles.width ? 'width: ' + styles.width + ';' : ''}
    flex-grow: ${({ styles }) => styles.flexGrow || 1};
    flex-shrink: ${({ styles }) => styles.flexShrink || 1};
`;

export const StepsWrapper = styled.div`
    display: flex;
    flex-direction: ${({ orientation }) => orientation === 'vertical' ? 'column' : 'row'};
    ${({ styles }) => styles.height ? 'height: ' + styles.height + ';' : ''}
    ${({ styles }) => styles.width ? 'width: ' + styles.width + ';' : ''}
    flex-grow: ${({ styles }) => styles.flexGrow || 0};
    flex-shrink: ${({ styles }) => styles.flexShrink || 0};
    background-color: ${({ styles }) => styles.backgroundColor || colors.echoBlueBackground};
`;

export const StepItem = styled.div`
    display: flex;
    flex-direction: ${({ styles }) => styles.flexDirection || 'row'}; 
    align-items: ${({ styles }) => styles.alignItems || 'center'};
    justify-content: ${({ styles }) => styles.justifyContent || 'flex-start'};
    box-sizing: border-box;
    padding: ${({ styles }) => styles.padding || '10px 20px 10px 80px'};
    font-size: ${({ styles }) => styles.fontSize || '14px'};
    font-weight: ${({ styles }) => styles.fontWeight || '500'};
    color: ${({ styles }) => styles.color || colors.bluishGreyText};
    width: ${({ styles }) => styles.width || '260px'};
    height: ${({ styles }) => styles.width || '40px'};
    background-color: ${({ styles }) => styles.backgroundColor || colors.echoBlueBackground};
    cursor: ${({ styles }) => styles.cursor || 'pointer'};    
    ${({ styles }) => styles.height ? 'height: ' + styles.height + ';' : ''}
    &:hover {
        ${({ styles }) => styles.hover && styles.hover.color ? 'color: ' + styles.hover.color + ';' : ''}
        ${({ styles }) => styles.hover && styles.hover.backgroundColor ? 'background-color: ' + styles.hover.backgroundColor + ';' : ''}
        ${({ styles }) => styles.hover && styles.hover.padding ? 'padding: ' + styles.hover.padding + ';' : ''}
        ${({ styles }) => styles.hover && styles.hover.fontSize ? 'font-size: ' + styles.hover.fontSize + ';' : ''}
        ${({ styles }) => styles.hover && styles.hover.fontWeight ? 'font-weight: ' + styles.hover.fontWeight + ';' : ''}
    }
    ${({ active }) => active ? 'font-weight: 900;' : ''}
    ${({ active, styles }) => active && styles.active && styles.active.color ? 'color: ' + styles.active.color + ';' : ''}
    ${({ active, styles }) => active && styles.active && styles.active.backgroungColor ? 'background-color: ' + styles.active.backgroundColor + ';' : ''}
    ${({ active, styles }) => active && styles.active && styles.active.padding ? 'padding: ' + styles.active.padding + ';' : ''}
    ${({ active, styles }) => active && styles.active && styles.active.fontSize ? 'font-size: ' + styles.active.fontSize + ';' : ''}
    ${({ active, styles }) => active && styles.active && styles.active.fontWeight ? 'font-weight: ' + styles.active.fontWeight + ';' : ''}

    ${({ done, styles }) => done && styles.done && styles.done.color ? 'color: ' + styles.done.color + ';' : ''}
    ${({ done, styles }) => done && styles.done && styles.done.backgroungColor ? 'background-color: ' + styles.done.backgroundColor + ';' : ''}
    ${({ done, styles }) => done && styles.done && styles.done.padding ? 'padding: ' + styles.done.padding + ';' : ''}
    ${({ done, styles }) => done && styles.done && styles.done.fontSize ? 'font-size: ' + styles.done.fontSize + ';' : ''}
    ${({ done, styles }) => done && styles.done && styles.done.fontWeight ? 'font-weight: ' + styles.done.fontWeight + ';' : ''}
`;

const IconBase = styled.div`
    width: 20px;
    height: 20px;
    display: inline-block;
    color: #ffffff;
    border-radius: 50%;
    margin-right: 10px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    & > i {
        transform: translateY(1px);
    }
`;

export const ContentWrapper = styled.div`
    flex-grow: 1;
`;

export const DoneIconContainer = IconBase.extend`
    background-color: #62c57e;
`;

export const ActiveIconContainer = IconBase.extend`
    background-color: #96a8bf;
`;

export const InactiveIconContainer = IconBase.extend`
    background-color: #e1e5eb;
    border: 1px solid #dddddd;
`;
//# sourceMappingURL=styles.js.map