Skip to main content

MOBILE_BUTTON_STYLES

Constant MOBILE_BUTTON_STYLES 

Source
pub const MOBILE_BUTTON_STYLES: &str = r#"
@media (max-width: 768px) {
    /* Ensure all buttons meet touch target requirements */
    button,
    .btn,
    [role="button"] {
        min-height: var(--touch-min, 44px);
        min-width: var(--touch-min, 44px);
        padding: 10px 16px;
        font-size: 14px;
    }

    /* Toggle button groups */
    .toggle-group {
        gap: 6px;
        padding: 4px;
        border-radius: 8px;
    }

    .toggle-btn {
        padding: 10px 16px;
        font-size: 14px;
        border-radius: 6px;
        min-height: var(--touch-min, 44px);
        min-width: var(--touch-min, 44px);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Small icon buttons */
    .icon-btn {
        width: var(--touch-min, 44px);
        height: var(--touch-min, 44px);
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .icon-btn svg,
    .icon-btn .icon {
        width: 20px;
        height: 20px;
    }
}
"#;
Expand description

Mobile-optimized button styles with proper touch targets