Modals



Variable name Default value Description
--z-modal 1 Z-index for the modal component.
--b-modal #fff Background color for the modal component.
--br-modal .6rem Border radius for the modal component.
--c-modal #000 Text color for the modal component.
--fs-modal-t 1.2rem Font size for the title in the modal component.
--fw-modal-t 600 Font weight for the title in the modal component.


CSS Class Description
modal Base class for the modal component. Sets display, height, inset, opacity, place-items, position, transition, visibility, width, and z-index.
modal.hidden Class for the hidden state of the modal. Adjusts opacity, transition, and visibility.
modal::before Before pseudo-element for the modal class. Sets background color, content, inset, and position.
modal > .modal-c Class for the modal content. Sets background, border-radius, box-shadow, color, max-height, max-width, overflow, padding, and position.
modal > .modal-c > .modal-b Class for the modal body. Sets max-width.
modal > .modal-c > .modal-f Class for the modal footer. Aligns items, sets background, display, flex-wrap, gap, justify-content, padding, position, and adds a gradient effect.
modal > .modal-c > .modal-h Class for the modal header. Sets background, padding, position, and adds a gradient effect.
modal > .modal-c > .modal-h > .modal-t Class for the modal title. Sets font size and font weight.