@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
49 lines • 1.82 kB
JavaScript
import styled, { css } from 'styled-components';
import { getStyles } from '../../utils/getStyles/getStyles';
import { SliderStateType } from './types/state';
export const StyledRoot = styled.div `
${props => getStyles(props.styles.states?.[SliderStateType.DEFAULT]?.container)}
&[data-hover='true'] {
${props => getStyles(props.styles.states?.[SliderStateType.HOVER]?.container)}
}
&[data-pressed='true'] {
${props => getStyles(props.styles.states?.[SliderStateType.PRESSED]?.container)}
}
&[data-disabled='true'] {
${props => getStyles(props.styles.states?.[SliderStateType.DISABLED]?.container)}
}
`;
export const StyledLabelContainer = styled.div `
${props => getStyles(props.styles.labelContainer)}
`;
export const StyledButtonsTracksContainer = styled.div `
${props => getStyles(props.styles.buttonsTracksContainer)}
`;
export const StyledWrap = styled.div `
${props => getStyles(props.styles.tracksThumbsContainer)}
`;
export const StyledContainer = styled.div `
${props => getStyles(props.styles.tracksThumbsInnerContainer)}
`;
const getTrackStyles = (styles, isActive) => {
const track = isActive ? 'activeTrack' : 'inactiveTrack';
return css `
${getStyles(styles.states?.[SliderStateType.DEFAULT]?.[track])}
&[data-hover='true'] {
${getStyles(styles.states?.[SliderStateType.HOVER]?.[track])}
}
&[data-pressed='true'] {
${getStyles(styles.states?.[SliderStateType.PRESSED]?.[track])}
}
&[data-disabled='true'] {
${getStyles(styles.states?.[SliderStateType.DISABLED]?.[track])}
}
`;
};
export const StyledTrack = styled.div `
${({ styles }) => getTrackStyles(styles, false)}
`;
export const StyledActiveTrack = styled.div `
${({ styles }) => getTrackStyles(styles, true)}
`;
//# sourceMappingURL=slider.styled.js.map