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

React library of Procore Design Guidelines

import styled, { css } from 'styled-components';
import { getTypographyIntent } from '../Typography/Typography.styles';
import { colors } from '../_styles/colors';
import { getFocus } from '../_styles/mixins';
import { spacing } from '../_styles/spacing';
var trackHeight = 20;
var trackWidth = 36;
var toggleSize = 16;
export var StyledTrack = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledTrack",
  componentId: "core-12_44_0__sc-mwn4kg-0"
})(["background-color:", ";border-radius:", "px;height:", "px;width:", "px;position:relative;transition:0.2s;"], colors.gray70, trackHeight, trackHeight, trackWidth);
export var StyledToggle = /*#__PURE__*/styled.span.withConfig({
  displayName: "StyledToggle",
  componentId: "core-12_44_0__sc-mwn4kg-1"
})(["background-color:", ";border-radius:50%;bottom:2px;height:", "px;left:2px;position:absolute;transition:all 0.2s;width:", "px;"], colors.white, toggleSize, toggleSize);
export var StyledSwitchLabel = /*#__PURE__*/styled.span.withConfig({
  displayName: "StyledSwitchLabel",
  componentId: "core-12_44_0__sc-mwn4kg-2"
})(["", " padding-left:", "px;user-select:none;"], getTypographyIntent('body'), spacing.md);
export var StyledSwitchContainer = /*#__PURE__*/styled.label.withConfig({
  displayName: "StyledSwitchContainer",
  componentId: "core-12_44_0__sc-mwn4kg-3"
})(["cursor:pointer;display:grid;grid-template-columns:", "px 1fr;position:relative;& + &{margin-top:", "px;}", " ", " ", ""], trackWidth, spacing.md, function (_ref) {
  var $checked = _ref.$checked;
  return $checked && css(["", "{background-color:", ";", "{transform:translateX(", "px);}}"], StyledTrack, colors.blue50, StyledToggle, spacing.lg);
}, function (_ref2) {
  var $focused = _ref2.$focused;
  return $focused && css(["", " border-radius:12px;"], getFocus());
}, function (_ref3) {
  var _ref3$$disabled = _ref3.$disabled,
    $disabled = _ref3$$disabled === void 0 ? false : _ref3$$disabled,
    $checked = _ref3.$checked;
  return $disabled && css(["cursor:default;", "{background-color:", ";}"], StyledTrack, $checked ? colors.blue85 : colors.gray85);
});
//# sourceMappingURL=Switch.styles.js.map