fk-react-ui-components/components/Slider/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 SliderWrapper = styled.div`
    position: relative;
    width: ${({styles}) => styles.width || '160px'};
    height: ${({styles}) => styles.height || '50px'};
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
`;

export const Scale = styled.div`
    position: relative;
    flex-basis: 100%;
    height: 2px;
    background-color: ${({styles}) => styles.backgroundColor || colors.modalHeaderBorderColor};
    border-radius: 1px;
`;

export const Line = styled.div`
    position: absolute;
    height: 100%;
    background-color: ${({styles}) => styles.backgroundColor || colors.brandBlue};
`;

export const Mark = styled.div`
    position: absolute;
    left: ${({posX}) => (posX - 1)}px;
    height: ${({styles}) => styles.height || '8px'};
    transform: translateY(-3px);
    width: 2px;
    background-color: ${({styles}) => styles.backgroundColor || colors.modalHeaderBorderColor};
`;

export const Tooltip = styled.div`
    position: absolute;
    left: ${({posX}) => (posX - 5)}px;
    transform: translateY(8px);
    font-size: ${({styles}) => styles.fontSize || '12px'};
    color: ${({styles}) => styles.color || colors.blackText};
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
`;

export const Handle = styled.div`
    position: absolute;
    left: ${({posX, styles}) => posX - (styles.radius || 5)}px;
    height: ${({styles, active}) => active ? 2*(styles.activeRadius || 6) : 2*(styles.radius || 5)}px;
    width: ${({styles, active}) => active ? 2*(styles.activeRadius || 6) : 2*(styles.radius || 5)}px;
    background-color: ${({styles}) => styles.backgroundColor || colors.brandBlue};
    border-radius: 50%;
    &:hover {
        height: ${({styles}) => 2*(styles.activeRadius || 6)}px;
        width: ${({styles}) => 2*(styles.activeRadius|| 6)}px;
    }
`;

export const InputWrapper = styled.div`
    display: flex;
    align-items: center;
    margin-top: 20px;
`;

export const Separator = styled.span`
    margin: 0 10px;
`;