Flyin

Custom Styling with CSS Variables

Flyin uses CSS variables for easy theming and customization without touching the core SCSS files.

Core Variables

• --flyin-z-index: Default 1000000
• --flyin-overlay-opacity: Default 0.7
• --flyin-overlay-speed: Default 0.07s
• --flyin-dialog-speed: Default 0.7s

Wrapper Styling

• --flyin-wrapper-bg: Default #ffffff
• --flyin-wrapper-border-radius: Default 4px
• --flyin-wrapper-border: Default none
• --flyin-wrapper-shadow: Default 1px 1px 4px rgba(32, 32, 32, 0.3)

Header Styling

• --flyin-header-bg: Default transparent
• --flyin-header-border-bottom: Default 1px solid #dddddd
• --flyin-header-padding: Default 10px

Title Styling

• --flyin-title-color: Default #444444
• --flyin-title-size: Default 18px
• --flyin-title-weight: Default normal
• --flyin-title-line-height: Default 24px

Close Button Styling

• --flyin-close-btn-color: Default #888888
• --flyin-close-btn-bg: Default transparent
• --flyin-close-btn-width / --flyin-close-btn-height: Default 24px
• --flyin-close-btn-top / --flyin-close-btn-right: Default 10px

Content Styling

• --flyin-content-color: Default inherit
• --flyin-content-padding: Default 10px

Footer Styling

• --flyin-footer-bg: Default transparent
• --flyin-footer-border-top: Default 1px solid #dddddd
• --flyin-footer-padding: Default 10px
• --flyin-footer-text-align: Default center