adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-03-13 05:59:49 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

pref: Switch style (#150)

Browse source 
* pref: Switch style

* pref: Switch style and ARIA
This commit is contained in:
luoxiaozero 2024-03-21 22:08:02 +08:00 • committed by GitHub
parent c8e74113ba
commit 27dbca1c00
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 20 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
thaw/src/switch/mod.rs
View file

@ -37,6 +37,8 @@ pub fn Switch(
style=move || css_vars.get() style=move || css_vars.get()
on:click=move |_| value.set(!value.get_untracked()) on:click=move |_| value.set(!value.get_untracked())
role="switch"
aria-checked=move || if value.get() { "true" } else { "false" }
> >
<div class="thaw-switch__button"></div> <div class="thaw-switch__button"></div>
</div> </div>

28
thaw/src/switch/switch.css
View file

@ -1,24 +1,24 @@
.thaw-switch { .thaw-switch {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 35px; width: 40px;
height: 19px; height: 22px;
padding: 2px 5px 3px;
background-color: var(--thaw-background-color); background-color: var(--thaw-background-color);
border-radius: 25px; border-radius: 11px;
cursor: pointer; cursor: pointer;
box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.05); box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.05);
transition: all 0.4s ease; transition: all 0.4s ease;
box-sizing: content-box; user-select: none;
} }
.thaw-switch__button { .thaw-switch__button {
position: absolute; position: absolute;
left: 4px; top: 2px;
left: 2px;
display: inline-block; display: inline-block;
width: 19px; width: 18px;
height: 19px; height: 18px;
border-radius: 50%; border-radius: 9px;
background-color: #fff; background-color: #fff;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3), box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3),
inset 0 0 1px 0 rgba(0, 0, 0, 0.05); inset 0 0 1px 0 rgba(0, 0, 0, 0.05);
@ -30,5 +30,13 @@
} }
.thaw-switch--active .thaw-switch__button { .thaw-switch--active .thaw-switch__button {
left: 22px; left: 20px;
}
.thaw-switch--active:active .thaw-switch__button {
left: 14px;
}
.thaw-switch:active .thaw-switch__button {
width: 24px;
} }