@procore/core-react/dist/Slider/Slider.styles.js

React library of Procore Design Guidelines

import styled, { css } from 'styled-components';
import { Typography } from '../Typography/Typography';
import { colors } from '../_styles/colors';
var TRACK_HEIGHT = 4;
var THUMB_HEIGHT = 14;
function applyStylesOnlyToFF(styles) {
  return css(["@supports (-moz-appearance:none){", "}"], styles);
}
var getThumbStyles = /*#__PURE__*/css(["box-shadow:0px 1px 4px rgba(40,40,40,0.2),0px 0px 3px rgba(0,0,0,0.14),0px 2px 3px rgba(0,0,0,0.12);height:", "px;width:", "px;border-radius:15px;background:", ";border:2px solid ", ";z-index:3;", ";"], THUMB_HEIGHT, THUMB_HEIGHT, colors.white, colors.blue50, function (props) {
  return props.$isDragging ? "cursor: grabbing" : "cursor: pointer";
});
var getTrackStyles = /*#__PURE__*/css(["width:100%;height:", "px;animate:0.2s;border-radius:1px;border:0px solid ", ";z-index:1;", ";"], TRACK_HEIGHT, colors.black, function (props) {
  return props.$isDragging ? "cursor: grabbing" : "cursor: pointer";
});
var getTrackBackground = function getTrackBackground(percent) {
  return "background: linear-gradient(to right, ".concat(colors.blue50, " 0%, ").concat(colors.blue50, " ").concat(percent, "%, ").concat(colors.gray70, " ").concat(percent, "%, ").concat(colors.gray70, " 100%);");
};
var getTrackBackgroundDisabled = function getTrackBackgroundDisabled(percent) {
  return "background: linear-gradient(to right, ".concat(colors.blue85, " 0%, ").concat(colors.blue85, " ").concat(percent, "%, ").concat(colors.gray90, " ").concat(percent, "%, ").concat(colors.gray90, " 100%);");
};
var getThumbDisabledStyles = /*#__PURE__*/css(["cursor:not-allowed;border:2px solid ", ";"], colors.blue85);
export var StyledContainer = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledContainer",
  componentId: "core-12_44_0__sc-12icguw-0"
})(["position:relative;", ";"], function (props) {
  return props.$showLabel && 'padding-bottom: 10px';
});
export var StyledSlider = /*#__PURE__*/styled.input.withConfig({
  displayName: "StyledSlider",
  componentId: "core-12_44_0__sc-12icguw-1"
})(["-webkit-appearance:none;margin:0;padding-top:5px;padding-bottom:5px;width:100%;border:1px solid transparent;background-color:transparent;font-size:12px;&:focus{outline:none;", ";padding-top:5px;padding-bottom:5px;border-radius:2px;}&::-webkit-slider-runnable-track{", " ", "}&:disabled::-webkit-slider-runnable-track{cursor:not-allowed;", "}&::-webkit-slider-thumb{", " -webkit-appearance:none;margin-top:-5px;}&:disabled::-webkit-slider-thumb{", "}&::-moz-range-track{", " ", "}&:disabled::-moz-range-track{cursor:not-allowed;", "}&::-moz-range-thumb{", " height:12px;width:12px;}&:disabled::-moz-range-thumb{", "}&::-ms-track{", " height:", "px;color:transparent;", "}&:disabled::-ms-track{cursor:not-allowed;", "}&::-ms-fill-lower{background:", ";border:0px solid ", ";border-radius:2px;box-shadow:1px 1px 1px ", ";}&::-ms-fill-upper{background:", ";border:0px solid ", ";border-radius:2px;box-shadow:1px 1px 1px ", ";}&::-ms-thumb{", "}&:disabled::-ms-thumb{", "}&:focus::-ms-fill-lower{background:", ";}&:focus::-ms-fill-upper{background:", ";}"], function (props) {
  return props.$isDragging ? "border: 1px solid transparent" : "border: 1px solid ".concat(colors.blue40);
}, getTrackStyles, function (props) {
  return getTrackBackground(props.$percent);
}, function (props) {
  return getTrackBackgroundDisabled(props.$percent);
}, getThumbStyles, getThumbDisabledStyles, getTrackStyles, function (props) {
  return getTrackBackground(props.$percent);
}, function (props) {
  return getTrackBackgroundDisabled(props.$percent);
}, getThumbStyles, getThumbDisabledStyles, getTrackStyles, THUMB_HEIGHT + 2, function (props) {
  return getTrackBackground(props.$percent);
}, function (props) {
  return getTrackBackgroundDisabled(props.$percent);
}, colors.blue50, colors.black, colors.black, colors.gray70, colors.black, colors.black, getThumbStyles, getThumbDisabledStyles, colors.blue50, colors.gray70);
export var StyledIncrementOverlay = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledIncrementOverlay",
  componentId: "core-12_44_0__sc-12icguw-2"
})(["position:relative;width:0;&::before{content:'';height:", "px;width:2px;background-color:white;display:block;}z-index:2;"], TRACK_HEIGHT);
export var StyledIncrementContainer = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledIncrementContainer",
  componentId: "core-12_44_0__sc-12icguw-3"
})(["position:absolute;display:flex;justify-content:space-between;top:6px;", " left:5px;right:5px;> :first-child{visibility:hidden;}> :last-child{visibility:hidden;}"], applyStylesOnlyToFF("\n    top: 12px;\n  "));
export var StyledLabel = /*#__PURE__*/styled(Typography).withConfig({
  displayName: "StyledLabel",
  componentId: "core-12_44_0__sc-12icguw-4"
})(["visibility:visible;position:absolute;left:50%;transform:translateX(-50%);margin-top:8px;"]);
//# sourceMappingURL=Slider.styles.js.map