@mantine/core/esm/components/Accordion/Accordion.module.mjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Accordion.module.mjs","names":[],"sources":["../../../src/components/Accordion/Accordion.module.css"],"sourcesContent":[".root {\n  --accordion-radius: var(--mantine-radius-default);\n}\n\n.panel {\n  overflow-wrap: break-word;\n}\n\n.content {\n  padding: var(--mantine-spacing-md);\n  padding-top: calc(var(--mantine-spacing-xs) / 2);\n}\n\n.itemTitle {\n  margin: 0;\n  padding: 0;\n  width: 100%;\n}\n\n.control {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  flex-direction: row-reverse;\n  padding-inline: var(--mantine-spacing-md);\n  opacity: 1;\n  cursor: pointer;\n  background-color: transparent;\n  color: var(--mantine-color-bright);\n\n  &:where([data-chevron-position='left']) {\n    flex-direction: row;\n    padding-inline-start: 0;\n  }\n\n  &:where(:disabled, [data-disabled]) {\n    opacity: 0.4;\n    cursor: not-allowed;\n  }\n}\n\n.control--default,\n.control--contained {\n  &:where(:not(:disabled, [data-disabled])) {\n    @mixin hover {\n      @mixin where-light {\n        background-color: var(--mantine-color-gray-0);\n      }\n\n      @mixin where-dark {\n        background-color: var(--mantine-color-dark-6);\n      }\n    }\n  }\n}\n\n.label {\n  color: inherit;\n  font-weight: var(--mantine-font-weight-regular);\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding-top: var(--mantine-spacing-sm);\n  padding-bottom: var(--mantine-spacing-sm);\n}\n\n.chevron {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  transition: transform var(--accordion-transition-duration, 200ms) ease;\n  width: var(--accordion-chevron-size, rem(15px));\n  min-width: var(--accordion-chevron-size, rem(15px));\n  transform: rotate(0deg);\n\n  &:where([data-rotate]) {\n    transform: rotate(180deg);\n  }\n\n  &:where([data-position='left']) {\n    margin-inline-end: var(--mantine-spacing-md);\n    margin-inline-start: var(--mantine-spacing-md);\n  }\n}\n\n.icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-inline-end: var(--mantine-spacing-sm);\n\n  &:where([data-chevron-position='left']) {\n    margin-inline-end: 0;\n    margin-inline-start: var(--mantine-spacing-lg);\n  }\n}\n\n.item {\n  overflow: hidden;\n\n  @mixin where-light {\n    --item-border-color: var(--mantine-color-gray-3);\n    --item-filled-color: var(--mantine-color-gray-0);\n  }\n\n  @mixin where-dark {\n    --item-border-color: var(--mantine-color-dark-4);\n    --item-filled-color: var(--mantine-color-dark-6);\n  }\n}\n\n.item--default {\n  border-bottom: 1px solid var(--item-border-color);\n}\n\n.item--contained {\n  border: 1px solid var(--item-border-color);\n  transition: background-color 150ms ease;\n\n  &:where([data-active]) {\n    background-color: var(--item-filled-color);\n  }\n\n  &:first-of-type {\n    border-start-start-radius: var(--accordion-radius);\n    border-start-end-radius: var(--accordion-radius);\n\n    & > [data-accordion-control] {\n      border-start-start-radius: var(--accordion-radius);\n      border-start-end-radius: var(--accordion-radius);\n    }\n  }\n\n  &:last-of-type {\n    border-end-start-radius: var(--accordion-radius);\n    border-end-end-radius: var(--accordion-radius);\n\n    & > [data-accordion-control] {\n      border-end-start-radius: var(--accordion-radius);\n      border-end-end-radius: var(--accordion-radius);\n    }\n  }\n\n  & + & {\n    border-top: 0;\n  }\n}\n\n.item--filled {\n  border-radius: var(--accordion-radius);\n\n  &:where([data-active]) {\n    background-color: var(--item-filled-color);\n  }\n}\n\n.item--separated {\n  background-color: var(--item-filled-color);\n  border-radius: var(--accordion-radius);\n  border: 1px solid transparent;\n  transition: background-color 150ms ease;\n\n  &[data-active] {\n    border-color: var(--item-border-color);\n\n    @mixin where-light {\n      background-color: var(--mantine-color-white);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-7);\n    }\n  }\n\n  & + & {\n    margin-top: var(--mantine-spacing-md);\n  }\n}\n"],"mappings":""}