@mantine/core/cjs/components/Switch/Switch.module.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Switch.module.cjs","names":[],"sources":["../../../src/components/Switch/Switch.module.css"],"sourcesContent":[".root {\n  --switch-height-xs: 16px;\n  --switch-height-sm: 20px;\n  --switch-height-md: 24px;\n  --switch-height-lg: 30px;\n  --switch-height-xl: 36px;\n\n  --switch-width-xs: 32px;\n  --switch-width-sm: 38px;\n  --switch-width-md: 46px;\n  --switch-width-lg: 56px;\n  --switch-width-xl: 72px;\n\n  --switch-thumb-size-xs: 12px;\n  --switch-thumb-size-sm: 14px;\n  --switch-thumb-size-md: 18px;\n  --switch-thumb-size-lg: 22px;\n  --switch-thumb-size-xl: 28px;\n\n  --switch-label-font-size-xs: 5px;\n  --switch-label-font-size-sm: 6px;\n  --switch-label-font-size-md: 7px;\n  --switch-label-font-size-lg: 9px;\n  --switch-label-font-size-xl: 11px;\n\n  --switch-track-label-padding-xs: 2px;\n  --switch-track-label-padding-sm: 2.5px;\n  --switch-track-label-padding-md: 3px;\n  --switch-track-label-padding-lg: 3px;\n  --switch-track-label-padding-xl: 3.5px;\n\n  --switch-height: var(--switch-height-sm);\n  --switch-width: var(--switch-width-sm);\n  --switch-thumb-size: var(--switch-thumb-size-sm);\n  --switch-label-font-size: var(--switch-label-font-size-sm);\n  --switch-track-label-padding: var(--switch-track-label-padding-sm);\n  --switch-radius: 1000px;\n  --switch-color: var(--mantine-primary-color-filled);\n  --switch-disabled-color: var(--mantine-color-disabled);\n\n  position: relative;\n}\n\n.input {\n  /* Hide the input visually without removing it from the accessibility tree or obscuring it in the DOM */\n  height: 100%;\n  width: 100%;\n  opacity: 0;\n\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.track {\n  -webkit-tap-highlight-color: transparent;\n  cursor: var(--switch-cursor, var(--mantine-cursor-type));\n  overflow: hidden;\n  position: relative;\n  border-radius: var(--switch-radius);\n  background-color: var(--switch-bg);\n  height: var(--switch-height);\n  min-width: var(--switch-width);\n  margin: 0;\n  transition:\n    background-color 150ms ease,\n    border-color 150ms ease;\n  appearance: none;\n  display: flex;\n  align-items: center;\n  font-size: var(--switch-label-font-size);\n  font-weight: var(--mantine-font-weight-medium);\n  order: var(--switch-order, 1);\n  user-select: none;\n  z-index: 0;\n  line-height: 0;\n  color: var(--switch-text-color);\n\n  &:where([data-without-labels]) {\n    width: var(--switch-width);\n  }\n\n  .input:focus-visible + & {\n    outline: 2px solid var(--mantine-primary-color-filled);\n    outline-offset: 2px;\n  }\n\n  .input:checked + & {\n    --switch-bg: var(--switch-color);\n    --switch-text-color: var(--mantine-color-white);\n  }\n\n  .input:disabled + &,\n  .input[data-disabled] + & {\n    --switch-bg: var(--switch-disabled-color);\n    --switch-cursor: not-allowed;\n  }\n\n  @mixin light {\n    --switch-bg: var(--mantine-color-gray-3);\n    --switch-text-color: var(--mantine-color-gray-6);\n  }\n\n  @mixin dark {\n    --switch-bg: var(--mantine-color-dark-5);\n    --switch-text-color: var(--mantine-color-dark-1);\n  }\n\n  &[data-label-position='left'] {\n    --switch-order: 2;\n  }\n}\n\n.thumb {\n  position: absolute;\n  z-index: 1;\n  border-radius: var(--switch-radius);\n  display: flex;\n  background-color: var(--switch-thumb-bg, var(--mantine-color-white));\n  height: var(--switch-thumb-size);\n  width: var(--switch-thumb-size);\n  inset-inline-start: var(--switch-thumb-start, var(--switch-track-label-padding));\n  transition: inset-inline-start 150ms ease;\n\n  &:where([data-with-thumb-indicator])::before {\n    content: '';\n    width: 40%;\n    height: 40%;\n    background-color: var(--switch-bg);\n    position: absolute;\n    border-radius: var(--switch-radius);\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  & > * {\n    margin: auto;\n  }\n\n  .input:checked + * > & {\n    --switch-thumb-start: calc(100% - var(--switch-thumb-size) - var(--switch-track-label-padding));\n  }\n\n  .input:disabled + * > &,\n  .input[data-disabled] + * > & {\n    --switch-thumb-bg: var(--switch-thumb-bg-disabled);\n  }\n\n  @mixin light {\n    --switch-thumb-bg-disabled: var(--mantine-color-gray-0);\n  }\n\n  @mixin dark {\n    --switch-thumb-bg-disabled: var(--mantine-color-dark-3);\n  }\n}\n\n.trackLabel {\n  height: 100%;\n  display: grid;\n  place-content: center;\n  min-width: calc(var(--switch-width) - var(--switch-thumb-size));\n  padding-inline: var(--switch-track-label-padding);\n  margin-inline-start: calc(var(--switch-thumb-size) + var(--switch-track-label-padding));\n  transition: margin 150ms ease;\n\n  .input:checked + * > & {\n    margin-inline-end: calc(var(--switch-thumb-size) + var(--switch-track-label-padding));\n    margin-inline-start: 0;\n  }\n}\n"],"mappings":""}