modal.rs

fn modal(content: Node<Msg>) -> Node<Msg> {
    div![
        div![
            div![
                s()
                    .position_absolute()
                    .width(pc(100))
                    .height(pc(100))
                    .bg_color(rgba(30,30.,30.,0.5))
            ]
        ],
            s().position_fixed().z_index("50").overflow_auto().display_flex()
            .top(px(0))
            .right(px(0))
            .bottom(px(0))
            .left(px(0))
            ,
        div![
            s().position_relative().px(px(40)).py(px(24))
            .bg_color(Color::Background)
            .w(pc(80)).max_w(px(700))
            .m_auto()
            .display_flex()
            .flex_direction_column()
            .radius(px(12))
            .box_shadow(r#"
            0px 2.2px 0.1px -6px   rgba(0, 0 ,0 ,0.350),
            0px 5.3px 6px -6px     rgba(0 ,0 ,0 ,0.228),
            0px 10px 14.2px -6px   rgba(0 ,0 ,0 ,0.202),
            0px 17.9px 24.8px -6px rgba(0 ,0 ,0 ,0.190),
            0px 33.4px 39.4px -6px rgba(0 ,0 ,0 ,0.177),
            0px 80.4px 69px -6px   rgba(0, 0 ,0 ,0.146)
            "#)
            ,
            div![
                s().flex_direction_column(),
                div![h2![s().font_weight_v900(), s().font_size(px(24)), "Code Example"]],
                div![s().p(px(4)), content()],
                Row![
                    Item![ align = RowAlign::Right,
                        button![
                            attrs! {At::Type => "button"},
                            
                                s().mx(px(4))
                                .bg_color(seed_colors::Indigo::No6)
                                .color(seed_colors::Base::White)
                                .font_weight_v900()
                                .py(px(4))
                                .px(px(8))
                                .bb_width(px(4))
                                .b_color(seed_colors::Indigo::No5)
                                .radius(px(6))  ,
                                s().hover().bg_color(seed_colors::Indigo::No5)
                            ,
                            modal_content.mouse_ev(Ev::Click, |mc,_| *mc = None),
                            "Close"
                        ],
            ]]]
    ]]
}