@julo-ui/sliders
Version:
A React Slider component that implements input[type='range']
48 lines (42 loc) • 1.03 kB
JavaScript
// src/styles.ts
import { css } from "@emotion/react";
var rootSliderCx = css`
--slider-track-size: 0.5rem;
--slider-thumb-size: 1rem;
width: fit-content;
`;
var rootSliderVerticalTrackCx = css`
width: var(--slider-track-size);
`;
var rootSliderHorizontalTrackCx = css`
height: var(--slider-track-size);
`;
var rootSliderTrackCx = css`
overflow: hidden;
border-radius: var(--corner-3xl);
background-color: var(--colors-neutrals-40);
`;
var rootSliderThumbCx = css`
z-index: 1;
width: var(--slider-thumb-size);
height: var(--slider-thumb-size);
border-radius: var(--corner-3xl);
background-color: var(--colors-neutrals-10);
box-shadow: var(--shadows-md);
display: flex;
align-items: center;
justify-content: center;
`;
var rootSliderInnerTrackCx = css`
background-color: var(--colors-primary-30);
height: inherit;
width: inherit;
`;
export {
rootSliderCx,
rootSliderVerticalTrackCx,
rootSliderHorizontalTrackCx,
rootSliderTrackCx,
rootSliderThumbCx,
rootSliderInnerTrackCx
};