All files / components/toggle toggle.styled.js

0% Statements 0/19
0% Branches 0/16
0% Functions 0/9
0% Lines 0/13
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90                                                                                                                                                                                   
import styled from 'styled-components'
import PropTypes from 'prop-types'
 
const ToggleStyled = styled.div`
position: relative;
overflow: hidden;
padding: 1px;
width:${p => p.width};
 
>.widget-toggle-label {
    line-height: 1.8rem;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #3b495e;
    white-space: nowrap;
}
 
>.element-position{
    display: flex;
    &.left{
        justify-content: flex-start;
    }
 
    &.center{
        justify-content: center;
    }
 
    &.right{
        justify-content: flex-end;
    }
 
    >.widget-toggle-container{
        position: relative;
        display:block;
        width: 38px;
        height: 20px;
        border-radius: 15px;
        background-color: #f4f5f8;
        border: solid 1px #c5d0e1;
        cursor: ${p => p.disabled ? 'default' : 'pointer'};
        transition: all 300ms linear;
 
        &.on{
            border: solid 1px ${p => p.disabled ? '#c5d0e1' : '#afcef3'};
            background-color: ${p => p.disabled ? '#f4f5f8' : '#e7f0f7'};
            >.toggle-button{
                border: solid 1px ${p => p.disabled ? '#e5edf4' : '#afcef3'};
                transform: translateX(18px);
            }
        }
 
        >.toggle-labels{
            position: relative;
            height: 100%;
            display: flex;
            width: 100%;
 
            >span{
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
 
        >.toggle-button{
            position: absolute;
            width: 22px;
            height: 22px;
            border-radius: 11px;
            top:-2px;
            background-color: ${p => p.disabled ? '#e5edf4' : '#ffffff'};
            border: solid 1px ${p => p.disabled ? '#e5edf4' : '#c5d0e1'};
            transition: transform 300ms, border 300ms linear;
            transform: translateX(-1px);
        }
    }
}`
 
ToggleStyled.propTypes = {
  width: PropTypes.string
}
 
ToggleStyled.defaultProps = {
  width: '100%'
}
 
export default ToggleStyled