QS Pack

Modals



Variable nameDefault valueDescription
--z-modal1Z-index for the modal component.
--b-modal#fffBackground color for the modal component.
--br-modal.6remBorder radius for the modal component.
--c-modal#000Text color for the modal component.
--fs-modal-t1.2remFont size for the title in the modal component.
--fw-modal-t600Font weight for the title in the modal component.


CSS ClassDescription
modalBase class for the modal component. Sets display, height, inset, opacity, place-items, position, transition, visibility, width, and z-index.
modal.hiddenClass for the hidden state of the modal. Adjusts opacity, transition, and visibility.
modal::beforeBefore pseudo-element for the modal class. Sets background color, content, inset, and position.
modal > .modal-cClass for the modal content. Sets background, border-radius, box-shadow, color, max-height, max-width, overflow, padding, and position.
modal > .modal-c > .modal-bClass for the modal body. Sets max-width.
modal > .modal-c > .modal-fClass 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-hClass for the modal header. Sets background, padding, position, and adds a gradient effect.
modal > .modal-c > .modal-h > .modal-tClass for the modal title. Sets font size and font weight.