fk-react-ui-components/lib/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;
`;
//# sourceMappingURL=styles.js.map