@netdata/netdata-ui/dist/es6/components/toggle/styled.js

netdata UI kit

var _excluded = ["right"];
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
import styled from "styled-components";
import { getColor, getSizeUnit } from "../../theme/utils";
import { controlFocused } from "../../mixins";
import margin from "../../mixins/margin";
import alignSelf from "../../mixins/alignSelf";
export var ToggleContainer = styled.div.withConfig({
  displayName: "styled__ToggleContainer",
  componentId: "sc-dtjehx-0"
})(["display:block;box-sizing:border-box;width:40px;height:20px;"]);
export var HiddenToggleInput = styled.input.attrs({
  type: "checkbox"
}).withConfig({
  displayName: "styled__HiddenToggleInput",
  componentId: "sc-dtjehx-1"
})(["display:none;"]);
export var StyledToggle = styled.div.withConfig({
  displayName: "styled__StyledToggle",
  componentId: "sc-dtjehx-2"
})(["box-sizing:border-box;width:40px;height:20px;background:", ";border:1px solid ", ";border-radius:100px;transition:", ";display:block;position:relative;-webkit-tap-highlight-color:transparent;flex-shrink:0;align-self:flex-start;cursor:pointer;pointer-events:", ";&:after{display:block;position:absolute;content:\"\";width:16px;height:16px;border-radius:50%;left:5%;top:50%;transform:translateY(-50%);transition:", ";opacity:", ";background-color:", ";}", " ", ":focus + &{", "}"], function (props) {
  return props.disabled ? getColor("mainBackgroundDisabled") : getColor("mainBackground");
}, getColor("border"), function (_ref) {
  var withTransition = _ref.withTransition;
  return withTransition ? "all 150ms" : "unset";
}, function (_ref2) {
  var disabled = _ref2.disabled;
  return disabled ? "none" : "auto";
}, function (_ref3) {
  var withTransition = _ref3.withTransition;
  return withTransition ? "left 0.2s ease" : "unset";
}, function (_ref4) {
  var disabled = _ref4.disabled;
  return disabled ? "0.4" : "1";
}, function (_ref5) {
  var colored = _ref5.colored,
    checked = _ref5.checked,
    checkedColor = _ref5.checkedColor,
    uncheckedColor = _ref5.uncheckedColor,
    defaultColor = _ref5.defaultColor;
  if (!colored) return getColor(defaultColor || "controlFocused");
  return checked ? getColor(checkedColor || "primary") : getColor(uncheckedColor || "error");
}, function (_ref6) {
  var checked = _ref6.checked;
  return checked && "\n    &:after {\n      left: 55%;\n    }\n  ";
}, HiddenToggleInput, controlFocused);
export var StyledLabel = styled.label.withConfig({
  displayName: "styled__StyledLabel",
  componentId: "sc-dtjehx-3"
})(["", " ", " position:relative;cursor:pointer;display:flex;flex-flow:row nowrap;align-items:center;"], margin, alignSelf);
export var LabelText = styled.span.withConfig({
  displayName: "styled__LabelText",
  componentId: "sc-dtjehx-4"
})(["", ""], function (_ref7) {
  var right = _ref7.right,
    props = _objectWithoutPropertiesLoose(_ref7, _excluded);
  return right ? "margin-left: " + getSizeUnit(props) + "px;" : "margin-right: " + getSizeUnit(props) + "px;";
});