@braineet/ui
Version:
Braineet design system
38 lines • 1.59 kB
JavaScript
import { getTrackBackground } from 'react-range';
import styled from 'styled-components';
import Box from '../box';
export var Container = styled(Box).withConfig({
displayName: "styles__Container",
componentId: "sc-gnsyx0-0"
})(["opacity:", ";border-radius:16px;padding:6px 6px;background:", ";display:flex;width:100%;"], function (p) {
return p.disabled ? 0.6 : 1;
}, function (p) {
return p.theme.utils.lighten('black', 0.1);
});
export var Inner = styled(Box).withConfig({
displayName: "styles__Inner",
componentId: "sc-gnsyx0-1"
})(["position:relative;height:20px;width:100%;border-radius:10px;background:", ";align-self:center;"], function (p) {
return getTrackBackground({
values: p.sliderValues,
colors: [p.theme.colors.brand90, 'transparent'],
min: p.minVal,
max: p.maxVal
});
});
export var Mark = styled('div').withConfig({
displayName: "styles__Mark",
componentId: "sc-gnsyx0-2"
})(["height:20px;width:5px;display:inline-flex;align-items:center;justify-content:center;"]);
export var Thumb = styled('div').withConfig({
displayName: "styles__Thumb",
componentId: "sc-gnsyx0-3"
})(["height:24px;width:24px;border-radius:16px;background-color:", ";border:2px solid ", ";display:flex;justify-content:center;align-items:center;box-shadow:0px 8px 16px -8px ", ";&:focus{box-shadow:0px 0px 0px 2px ", ";}"], function (p) {
return p.theme.colors.background.white;
}, function (p) {
return p.theme.utils.lighten('black', 0.1);
}, function (p) {
return p.theme.utils.lighten('black', 0.1);
}, function (p) {
return p.theme.colors.brand90;
});