rustyle_css/
responsive.rs

1//! Responsive design utilities
2
3/// Common breakpoint values
4pub mod breakpoints {
5    /// Mobile breakpoint (default)
6    pub const MOBILE: &str = "";
7    /// Tablet breakpoint
8    pub const TABLET: &str = "(min-width: 768px)";
9    /// Desktop breakpoint
10    pub const DESKTOP: &str = "(min-width: 1024px)";
11    /// Large desktop breakpoint
12    pub const LARGE: &str = "(min-width: 1280px)";
13    /// Extra large desktop breakpoint
14    pub const XLARGE: &str = "(min-width: 1536px)";
15}
16
17/// Media query helper
18pub struct MediaQuery {
19    condition: String,
20}
21
22impl MediaQuery {
23    /// Create a new media query
24    pub fn new(condition: &str) -> Self {
25        Self {
26            condition: condition.to_string(),
27        }
28    }
29
30    /// Get the media query condition
31    pub fn condition(&self) -> &str {
32        &self.condition
33    }
34
35    /// Create a min-width media query
36    pub fn min_width(width: &str) -> Self {
37        Self {
38            condition: format!("(min-width: {})", width),
39        }
40    }
41
42    /// Create a max-width media query
43    pub fn max_width(width: &str) -> Self {
44        Self {
45            condition: format!("(max-width: {})", width),
46        }
47    }
48
49    /// Create a min-height media query
50    pub fn min_height(height: &str) -> Self {
51        Self {
52            condition: format!("(min-height: {})", height),
53        }
54    }
55
56    /// Create a max-height media query
57    pub fn max_height(height: &str) -> Self {
58        Self {
59            condition: format!("(max-height: {})", height),
60        }
61    }
62
63    /// Combine multiple conditions with AND
64    pub fn and(self, other: Self) -> Self {
65        Self {
66            condition: format!("{} and {}", self.condition, other.condition),
67        }
68    }
69}
70
71/// Helper to create responsive CSS
72pub fn responsive_style(mobile: &str, tablet: Option<&str>, desktop: Option<&str>) -> String {
73    let mut styles = vec![mobile.to_string()];
74
75    if let Some(t) = tablet {
76        styles.push(format!("@media {} {{ {} }}", breakpoints::TABLET, t));
77    }
78
79    if let Some(d) = desktop {
80        styles.push(format!("@media {} {{ {} }}", breakpoints::DESKTOP, d));
81    }
82
83    styles.join("\n")
84}
rustyle_css/responsive.rs

rustyle_css/
responsive.rs
