rustyworks/sabry
Watch
1
0
Fork
You've already forked sabry
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

introduce lepty-scoping, which is more effective and more nice - especially with leptos

Browse source
This commit is contained in:
Yiffy Dev 2024-10-31 08:55:00 +05:00 • committed by spushk
commit 73fd80f24f
Signed by: spushk
GPG key ID: 7797B761E105E8AA
2 changed files with 162 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

26
examples/leptos-axum/src/routes/home.rs
View file

@ -1,18 +1,7 @@
use leptos::prelude::*;
use sabry::styly;
styly!(s "src/routes/home.scss");
styly!(s2 {
@use "theme";
.card {
@include theme.surface(secondary);
}
.pocwarn {
@include theme.surface(secondary);
text-transform: uppercase;
}
});
styly!(style "src/routes/home.scss");
/// Renders the home page of your application.
#[component]
@ -21,13 +10,14 @@ pub fn Route() -> impl IntoView {
let count = RwSignal::new(0);
let on_click = move |_| *count.write() += 1;
view! {
<section class=s::table>
view! {class = STYLE,
<section class=style::table>
<h1>"Welcome to Leptos!"</h1>
<button class=s::btn on:click=on_click>"Ima CRAZY button, clicked: " {count} " times!"</button>
<span class=s2::card>"DISCLAIMER:"</span>
<p class=s2::pocwarn>"This isn't a design example! Its just proof of sabry's capabilities."</p>
<p class=s2::pocwarn>"Plz dont make websites/apps which look like this page :D"</p>
<button class=style::btn on:click=on_click>"Ima CRAZY button, clicked: " {count} " times!"</button>
<button class=style::_dark(style::btn) on:click=on_click>"Ima CRAZY button, clicked: " {count} " times!"</button>
<span class=style::card>"DISCLAIMER:"</span>
<p class=style::pocwarn>"This isn't a design example! Its just proof of sabry's capabilities."</p>
<p class=style::pocwarn>"Plz dont make websites/apps which look like this page :D"</p>
</section>
}
}

11
examples/leptos-axum/src/routes/home.scss
View file

@ -4,9 +4,20 @@
.btn {
@include tokens.clickable(accent);
&-dark {
@include tokens.clickable(secondary, 0.8, 1.1);
}
}
.table {
@include utils.flex(column, center, center);
@include theme.surface(primary);
}
.card {
@include theme.surface(secondary);
}
.pocwarn {
@include theme.surface(secondary);
text-transform: uppercase;
}