@fluent-windows/core/Toggle/Toggle.styled.js

React components that inspired by Microsoft's Fluent Design System.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.styles = void 0;

var root = function root(theme) {
  return {
    width: 40,
    height: 20,
    borderRadius: 20,
    position: 'relative',
    border: '2px solid',
    transition: theme.transitions.toggle,
    // checked
    backgroundColor: 'transparent',
    borderColor: theme.colors.black["default"],
    '&:active': {
      backgroundColor: theme.colors.standard.dark1,
      borderColor: theme.colors.standard.dark1
    },
    // input element
    '& > input': {
      width: '100%',
      height: '100%',
      opacity: 0,
      position: 'absolute',
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
      cursor: 'pointer'
    }
  };
};

var checked = function checked(theme) {
  return {
    color: theme.colors.white["default"],
    backgroundColor: theme.colors.primary["default"],
    borderColor: theme.colors.primary["default"],
    '&:active': {
      backgroundColor: theme.colors.primary.dark1,
      borderColor: theme.colors.primary.dark1
    }
  };
};

var disabled = function disabled(theme) {
  return {
    borderColor: theme.colors.standard["default"],
    pointerEvents: 'none',
    // input element
    '& > input': {
      cursor: 'not-allowed'
    }
  };
};

var checkedAndDisabled = function checkedAndDisabled(theme) {
  return {
    backgroundColor: theme.colors.standard["default"]
  };
};

var circleSize = 12;

var circle = function circle(theme) {
  return {
    width: circleSize,
    height: circleSize,
    marginTop: -(circleSize / 2),
    borderRadius: '50%',
    transition: theme.transitions.toggle,
    position: 'absolute',
    top: '50%',
    // checked false
    left: 3,
    backgroundColor: theme.colors.black["default"]
  };
};

var circleChecked = function circleChecked(theme) {
  return {
    transform: 'translate3d(-100%, 0, 0)',
    left: '100%',
    marginLeft: -3,
    backgroundColor: theme.colors.white["default"]
  };
};

var circleDisabled = function circleDisabled(theme) {
  return {
    backgroundColor: theme.colors.standard.dark1
  };
};

var circleCheckedAndDisabled = function circleCheckedAndDisabled(theme) {
  return {
    backgroundColor: theme.colors.white["default"]
  };
};

var styles = function styles(theme) {
  return {
    root: root(theme),
    checked: checked(theme),
    disabled: disabled(theme),
    checkedAndDisabled: checkedAndDisabled(theme),
    circle: circle(theme),
    circleChecked: circleChecked(theme),
    circleDisabled: circleDisabled(theme),
    circleCheckedAndDisabled: circleCheckedAndDisabled(theme)
  };
};

exports.styles = styles;