@mantine/spotlight/cjs/Spotlight.module.cjs.map

Command center components for react and Mantine

{"version":3,"file":"Spotlight.module.cjs","names":[],"sources":["../src/Spotlight.module.css"],"sourcesContent":[".root {\n  &[data-scrollable] {\n    --spotlight-content-height: 100%;\n  }\n}\n\n.content {\n  overflow: hidden;\n  height: var(--spotlight-content-height, auto);\n  max-height: var(--spotlight-max-height);\n}\n\n.body {\n  display: flex;\n  flex-direction: column;\n  height: var(--spotlight-content-height, auto);\n}\n\n.search {\n  border: 0;\n  background-color: transparent;\n}\n\n.actionsList {\n  /* Used in child ScrollArea */\n  --spotlight-actions-list-padding: 4px;\n\n  border-top: 1px solid;\n  flex: 1;\n  padding: var(--spotlight-actions-list-padding);\n  max-height: calc(100vh - 15rem);\n  margin-inline-end: calc(var(--spotlight-actions-list-padding) * -1);\n  width: 100%;\n\n  @mixin where-light {\n    border-color: var(--mantine-color-gray-2);\n  }\n\n  @mixin where-dark {\n    border-color: var(--mantine-color-dark-4);\n  }\n}\n\n.action {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding: 7px var(--mantine-spacing-md);\n  border-radius: var(--mantine-radius-default);\n  background-color: transparent;\n  color: inherit;\n  text-align: left;\n\n  @mixin where-rtl {\n    text-align: right;\n  }\n\n  &:where(:not([data-selected])) {\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  &:where([data-selected]) {\n    background-color: var(--mantine-primary-color-filled);\n    color: var(--mantine-primary-color-contrast, var(--mantine-color-white));\n    --action-description-color: var(--mantine-primary-color-contrast, var(--mantine-color-white));\n    --action-description-opacity: 0.7;\n  }\n}\n\n.actionBody {\n  flex: 1;\n}\n\n.actionSection {\n  opacity: 1;\n  color: inherit;\n\n  &:where([data-dimmed]) {\n    opacity: var(--action-description-opacity, 1);\n    color: var(--action-description-color, var(--mantine-color-dimmed));\n  }\n\n  &:where([data-position='left']) {\n    margin-inline-end: var(--mantine-spacing-md);\n  }\n\n  &:where([data-position='right']) {\n    margin-inline-start: var(--mantine-spacing-md);\n  }\n\n  & > svg {\n    display: block;\n  }\n}\n\n.actionLabel {\n  display: block;\n}\n\n.actionDescription {\n  display: block;\n  font-size: var(--mantine-font-size-xs);\n  opacity: var(--action-description-opacity, 1);\n  color: var(--action-description-color, var(--mantine-color-dimmed));\n}\n\n.empty {\n  color: var(--mantine-color-dimmed);\n  padding: var(--mantine-spacing-md);\n  text-align: center;\n}\n\n.footer {\n  padding: var(--mantine-spacing-xs) calc(var(--mantine-spacing-md) + rem(4px));\n  border-top: 1px solid;\n\n  @mixin where-light {\n    border-color: var(--mantine-color-gray-2);\n  }\n\n  @mixin where-dark {\n    border-color: var(--mantine-color-dark-4);\n  }\n}\n\n.actionsGroup {\n  display: flex;\n  flex-direction: column;\n  margin-top: var(--mantine-spacing-md);\n\n  &::before {\n    content: var(--spotlight-label);\n    text-transform: uppercase;\n    font-size: var(--mantine-font-size-xs);\n    font-weight: var(--mantine-font-weight-bold);\n    color: var(--mantine-color-dimmed);\n    padding-inline-start: var(--mantine-spacing-md);\n  }\n\n  &:empty {\n    display: none;\n  }\n}\n"],"mappings":""}