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
|