@braineet/ui/dist/cjs/components/slider/styles.js

Braineet design system

"use strict";

exports.__esModule = true;
exports.Thumb = exports.Mark = exports.Inner = exports.Container = void 0;
var _reactRange = require("react-range");
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _box = _interopRequireDefault(require("../box"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var Container = exports.Container = (0, _styledComponents.default)(_box.default).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);
});
var Inner = exports.Inner = (0, _styledComponents.default)(_box.default).withConfig({
  displayName: "styles__Inner",
  componentId: "sc-gnsyx0-1"
})(["position:relative;height:20px;width:100%;border-radius:10px;background:", ";align-self:center;"], function (p) {
  return (0, _reactRange.getTrackBackground)({
    values: p.sliderValues,
    colors: [p.theme.colors.brand90, 'transparent'],
    min: p.minVal,
    max: p.maxVal
  });
});
var Mark = exports.Mark = (0, _styledComponents.default)('div').withConfig({
  displayName: "styles__Mark",
  componentId: "sc-gnsyx0-2"
})(["height:20px;width:5px;display:inline-flex;align-items:center;justify-content:center;"]);
var Thumb = exports.Thumb = (0, _styledComponents.default)('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;
});