dioxus_tw_components/components/molecules/modal/
style.rs

1use super::props::*;
2use crate::attributes::*;
3use dioxus::prelude::*;
4
5impl Class for ModalProps {}
6
7// Used to make a "useless" div which does not create a newline that wrap our trigger with our trigger_closure
8// Also used by ModalCancelProps
9impl Class for ModalTriggerProps {
10    fn base(&self) -> &'static str {
11        "px-4 py-2 text-sm font-medium select-none text-foreground bg-background border border-input rounded-global-radius shadow-sm shadow-global-shadow whitespace-nowrap cursor-pointer hover:bg-accent hover:text-accent-foreground"
12    }
13}
14
15impl Class for ModalCloseProps {
16    fn base(&self) -> &'static str {
17        "absolute top-4 right-4 rounded-global-radius border border-transparent cursor-pointer active:border-border transition-all"
18    }
19}
20
21impl Class for ModalContentProps {
22    fn base(&self) -> &'static str {
23        "p-4 flex flex-col top-[50%] left-[50%] z-50 min-w-96 bg-background border border-border rounded-global-radius fixed translate-x-[-50%] translate-y-[-50%] data-[state=inactive]:invisible"
24    }
25
26    fn animation(&self) -> Option<&'static str> {
27        Some(match *self.animation.read() {
28            Animation::None => "",
29            Animation::Light | Animation::Full => {
30                "data-[state=inactive]:translate-y-full data-[state=inactive]:opacity-0 transition-all duration-300"
31            }
32        })
33    }
34}
35
36impl Class for ModalBackgroundProps {
37    fn base(&self) -> &'static str {
38        "w-full h-full top-0 left-0 z-40 opacity-15 fixed data-[state=inactive]:invisible"
39    }
40
41    fn color(&self) -> Option<&'static str> {
42        Some(match *self.color.read() {
43            Color::Primary => "bg-primary",
44            Color::Secondary => "bg-secondary",
45            Color::Destructive => "bg-destructive",
46            Color::Success => "bg-success",
47            _ => "bg-foreground",
48        })
49    }
50
51    fn animation(&self) -> Option<&'static str> {
52        Some(match *self.animation.read() {
53            Animation::None => "",
54            Animation::Light | Animation::Full => {
55                "data-[state=inactive]:opacity-0 data-[state=inactive]:invisible transition-all duration-300"
56            }
57        })
58    }
59}
dioxus_tw_components/components/molecules/modal/style.rs

dioxus_tw_components/components/molecules/modal/
style.rs
