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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Cascader.module.cjs","names":[],"sources":["../../../src/components/Cascader/Cascader.module.css"],"sourcesContent":[".columnsList {\n  --cascader-column-width: 200px;\n\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n}\n\n.column {\n  display: flex;\n  flex-direction: column;\n  width: var(--cascader-column-width);\n  min-width: var(--cascader-column-width);\n  border-inline-end: rem(1px) solid var(--popover-border-color, var(--mantine-color-default-border));\n\n  /* Keep the border width reserved so revealing the next column does not shift the layout */\n  &:where([data-last]) {\n    border-inline-end-color: transparent;\n  }\n}\n\n.columnScroll {\n  flex: 1;\n  padding: var(--combobox-padding);\n}\n\n.columnsOverflow {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-self: stretch;\n  padding-inline: calc(var(--combobox-padding) / 2);\n  color: var(--mantine-color-dimmed);\n  cursor: pointer;\n  border-inline-end: rem(1px) solid var(--popover-border-color, var(--mantine-color-default-border));\n\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-7);\n    }\n  }\n\n  & > svg {\n    width: 0.9em;\n    height: 0.9em;\n    transform: rotate(90deg);\n  }\n\n  /* Round the corners that sit against the rounded dropdown edge so the hover background\n     does not overflow the dropdown corners */\n  &:where([data-position='start']) {\n    border-start-start-radius: var(--popover-radius, var(--mantine-radius-default));\n    border-end-start-radius: var(--popover-radius, var(--mantine-radius-default));\n  }\n\n  /* The divider on the left is provided by the previous column, so this control has none */\n  &:where([data-position='end']) {\n    border-inline-end-color: transparent;\n    border-start-end-radius: var(--popover-radius, var(--mantine-radius-default));\n    border-end-end-radius: var(--popover-radius, var(--mantine-radius-default));\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  @mixin where-rtl {\n    & > svg {\n      transform: rotate(-90deg);\n    }\n\n    &:where([data-position='end']) > svg {\n      transform: rotate(90deg);\n    }\n  }\n}\n\n.columnOption {\n  display: flex;\n  align-items: center;\n  gap: var(--mantine-spacing-xs);\n  width: 100%;\n  padding: var(--combobox-option-padding);\n  font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));\n  border-radius: var(--combobox-option-radius, var(--mantine-radius-default));\n  color: var(--mantine-color-text);\n  cursor: pointer;\n\n  @mixin hover {\n    &:where(:not([data-disabled], [data-active])) {\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-7);\n      }\n    }\n  }\n\n  /* Selected options in the ancestor columns (the navigation trail) */\n  &:where([data-in-path]) {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-1);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-6);\n    }\n  }\n\n  /* Option in the column that is currently being navigated */\n  &:where([data-active]) {\n    background-color: var(--mantine-primary-color-filled);\n    color: var(--mantine-color-white);\n\n    @mixin hover {\n      background-color: var(--mantine-primary-color-filled-hover);\n    }\n  }\n\n  &:where([data-disabled]) {\n    color: var(--mantine-color-dimmed);\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n}\n\n.flatOption {\n  display: flex;\n  align-items: center;\n  gap: var(--mantine-spacing-xs);\n  width: 100%;\n}\n\n.columnOptionLabel {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.columnOptionIcon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 0.9em;\n  min-width: 0.9em;\n  height: 0.9em;\n  color: var(--mantine-color-dimmed);\n  transform: rotate(-90deg);\n\n  :where([data-active]) & {\n    color: inherit;\n  }\n\n  @mixin where-rtl {\n    transform: rotate(90deg);\n  }\n}\n\n.columnOptionCheck {\n  width: 0.8em;\n  min-width: 0.8em;\n  height: 0.8em;\n  opacity: 0.4;\n\n  :where([data-active]) &,\n  :where([data-combobox-selected]) & {\n    opacity: 1;\n  }\n}\n\n.columnEmpty {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--combobox-option-padding);\n  color: var(--mantine-color-dimmed);\n  font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));\n  white-space: nowrap;\n}\n"],"mappings":""}