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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Burger.module.cjs","names":[],"sources":["../../../src/components/Burger/Burger.module.css"],"sourcesContent":[".root {\n  --burger-size-xs: 12px;\n  --burger-size-sm: 18px;\n  --burger-size-md: 24px;\n  --burger-size-lg: 34px;\n  --burger-size-xl: 42px;\n\n  --burger-size: var(--burger-size-md);\n  --burger-line-size: calc(var(--burger-size) / 12);\n\n  width: calc(var(--burger-size) + var(--mantine-spacing-xs));\n  height: calc(var(--burger-size) + var(--mantine-spacing-xs));\n  padding: calc(var(--mantine-spacing-xs) / 2);\n  cursor: pointer;\n\n  @mixin where-light {\n    --burger-color: var(--mantine-color-black);\n  }\n\n  @mixin where-dark {\n    --burger-color: var(--mantine-color-white);\n  }\n}\n\n.burger {\n  position: relative;\n  user-select: none;\n\n  &,\n  &::before,\n  &::after {\n    display: block;\n    width: var(--burger-size);\n    height: var(--burger-line-size);\n    background-color: var(--burger-color);\n    outline: 1px solid transparent;\n    transition-property: background-color, transform;\n    transition-duration: var(--burger-transition-duration, 300ms);\n    transition-timing-function: var(--burger-transition-timing-function, ease);\n  }\n\n  &::before,\n  &::after {\n    position: absolute;\n    content: '';\n    inset-inline-start: 0;\n  }\n\n  &::before {\n    top: calc(var(--burger-size) / -3);\n  }\n\n  &::after {\n    top: calc(var(--burger-size) / 3);\n  }\n\n  &[data-opened] {\n    background-color: transparent;\n\n    &::before {\n      transform: translateY(calc(var(--burger-size) / 3)) rotate(45deg);\n    }\n\n    &::after {\n      transform: translateY(calc(var(--burger-size) / -3)) rotate(-45deg);\n    }\n  }\n}\n"],"mappings":""}