@blocknote/react/src/editor/mantineStyles.css

A "Notion-style" block-based extensible text editor built on top of Prosemirror and Tiptap.

/* Based on https://github.com/orgs/mantinedev/discussions/5685 */

/* We need all the Mantine styles except the global styles, so unfortunately our
 only option is to import all the component styles separately. Could consider
 importing only styles for components used in BlockNote in the future. */
/* Files list: https://mantine.dev/styles/css-files-list/ */
@import url("@mantine/core/styles/ScrollArea.css");
@import url("@mantine/core/styles/UnstyledButton.css");
@import url("@mantine/core/styles/VisuallyHidden.css");
@import url("@mantine/core/styles/Paper.css");
@import url("@mantine/core/styles/Popover.css");
@import url("@mantine/core/styles/CloseButton.css");
@import url("@mantine/core/styles/Group.css");
@import url("@mantine/core/styles/Loader.css");
@import url("@mantine/core/styles/Overlay.css");
@import url("@mantine/core/styles/ModalBase.css");
@import url("@mantine/core/styles/Input.css");
@import url("@mantine/core/styles/Flex.css");

@import url("@mantine/core/styles/Accordion.css");
@import url("@mantine/core/styles/ActionIcon.css");
@import url("@mantine/core/styles/Affix.css");
@import url("@mantine/core/styles/Alert.css");
@import url("@mantine/core/styles/Anchor.css");
@import url("@mantine/core/styles/AspectRatio.css");
@import url("@mantine/core/styles/AppShell.css");
@import url("@mantine/core/styles/Avatar.css");
@import url("@mantine/core/styles/Badge.css");
@import url("@mantine/core/styles/BackgroundImage.css");
@import url("@mantine/core/styles/Blockquote.css");
@import url("@mantine/core/styles/Breadcrumbs.css");
@import url("@mantine/core/styles/Button.css");
@import url("@mantine/core/styles/Burger.css");
@import url("@mantine/core/styles/Card.css");
@import url("@mantine/core/styles/Center.css");
@import url("@mantine/core/styles/Checkbox.css");
@import url("@mantine/core/styles/Chip.css");
@import url("@mantine/core/styles/Code.css");
@import url("@mantine/core/styles/ColorInput.css");
@import url("@mantine/core/styles/ColorPicker.css");
@import url("@mantine/core/styles/ColorSwatch.css");
@import url("@mantine/core/styles/Combobox.css");
@import url("@mantine/core/styles/Container.css");
@import url("@mantine/core/styles/Dialog.css");
@import url("@mantine/core/styles/Divider.css");
@import url("@mantine/core/styles/Drawer.css");
@import url("@mantine/core/styles/Fieldset.css");
@import url("@mantine/core/styles/Grid.css");
@import url("@mantine/core/styles/Image.css");
@import url("@mantine/core/styles/Indicator.css");
@import url("@mantine/core/styles/InlineInput.css");
@import url("@mantine/core/styles/Kbd.css");
@import url("@mantine/core/styles/List.css");
@import url("@mantine/core/styles/LoadingOverlay.css");
@import url("@mantine/core/styles/Mark.css");
@import url("@mantine/core/styles/Menu.css");
@import url("@mantine/core/styles/Modal.css");
@import url("@mantine/core/styles/NavLink.css");
@import url("@mantine/core/styles/Notification.css");
@import url("@mantine/core/styles/NumberInput.css");
@import url("@mantine/core/styles/Pagination.css");
@import url("@mantine/core/styles/Pill.css");
@import url("@mantine/core/styles/PasswordInput.css");
@import url("@mantine/core/styles/PillsInput.css");
@import url("@mantine/core/styles/PinInput.css");
@import url("@mantine/core/styles/Progress.css");
@import url("@mantine/core/styles/Radio.css");
@import url("@mantine/core/styles/Rating.css");
@import url("@mantine/core/styles/RingProgress.css");
@import url("@mantine/core/styles/SegmentedControl.css");
@import url("@mantine/core/styles/SimpleGrid.css");
@import url("@mantine/core/styles/Skeleton.css");
@import url("@mantine/core/styles/Slider.css");
@import url("@mantine/core/styles/Spoiler.css");
@import url("@mantine/core/styles/Stack.css");
@import url("@mantine/core/styles/Stepper.css");
@import url("@mantine/core/styles/Switch.css");
@import url("@mantine/core/styles/Table.css");
@import url("@mantine/core/styles/Tabs.css");
@import url("@mantine/core/styles/Text.css");
@import url("@mantine/core/styles/ThemeIcon.css");
@import url("@mantine/core/styles/Timeline.css");
@import url("@mantine/core/styles/Title.css");
@import url("@mantine/core/styles/Tooltip.css");
@import url("@mantine/core/styles/TypographyStylesProvider.css");

/* Mantine global styles, scoped to bn-container */
/* Based on @mantine/core/styles/global.css
 (src: https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/core/MantineProvider/global.css)
 but with styles set on `body` and `html` instead set on `bn-container`, as
 well as other minor changes. */
.bn-container *, .bn-container :after, .bn-container :before {
    box-sizing: border-box
}

.bn-container button,
.bn-container select {
    text-transform: none
}

@media screen and (max-device-width: 500px) {
    .bn-container {
        -webkit-text-size-adjust: 100%
    }
}

@media (prefers-reduced-motion: reduce) {
    .bn-container [data-respect-reduced-motion] [data-reduce-motion] {
        animation: none;
        transition: none
    }
}

.bn-container [data-mantine-color-scheme=dark] .mantine-dark-hidden, .bn-container [data-mantine-color-scheme=light] .mantine-light-hidden {
    display: none
}

.bn-container .mantine-focus-auto:focus-visible {
    outline: calc(.125rem * var(--mantine-scale)) solid var(--mantine-primary-color-filled);
    outline-offset: calc(.125rem * var(--mantine-scale))
}

.bn-container .mantine-focus-always:focus {
    outline: calc(.125rem * var(--mantine-scale)) solid var(--mantine-primary-color-filled);
    outline-offset: calc(.125rem * var(--mantine-scale))
}

.bn-container .mantine-focus-never:focus {
    outline: none
}

.bn-container .mantine-active:active {
    transform: translateY(calc(.0625rem * var(--mantine-scale)))
}

.bn-container[dir=rtl] .mantine-rotate-rtl {
    transform: rotate(180deg)
}