Skip to content

Commit

Permalink
♻️ switch mover
Browse files Browse the repository at this point in the history
  • Loading branch information
@nanarino
nanarino committed Nov 20, 2023
1 parent c9de0d1 commit 18f7106
Show file tree
Hide file tree
Showing 10 changed files with 197 additions and 158 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"description": "style lib",
"author": "☘",
"license": "MIT",
"version": "0.1.8",
"version": "0.2.0",
"main": "./dist/index.css",
"scripts": {
"dev": "astro dev --host",
Expand Down
5 changes: 3 additions & 2 deletions src/components/header/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,12 +42,13 @@ const { href } = Astro.props;
* 为了兼容 Safari浏览器里 `<svg>` 不能同时拥有 `box-shadow` 和 `drop-shadow`
* 所以额外用了 `<i>` 来包裹 `<svg>`
*/}
<i>
<i class={`${prefix}-switch-mover`}>
<Icon name="general/outline/sun"/>
</i>
<i>
<i class={`${prefix}-switch-mover`}>
<Icon name="general/outline/moon"/>
</i>
<label class={`${prefix}-switch-slot`} for="header-theme-switch"></label>
</Switch>
</header>

Expand Down
12 changes: 5 additions & 7 deletions src/components/header/theme-switch.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,29 +14,27 @@
// 关闭按钮颜色
--color-switch var(--gold-3)

#header-theme-switch+label

i
background unset
svg
width 100%
height 100%

i:first-child
i:first-of-type
// 打开按钮 字体颜色
color _rgb(var(--orange-10))
opacity 1
svg
filter drop-shadow(0 0 2px _rgb(var(--gold-6)))
i:last-child
i:last-of-type
// 关闭按钮 字体颜色
color _rgb(var(--blue-10))
opacity 0
svg
filter drop-shadow(0 0 2px _rgb(var(--blue-6)))

#header-theme-switch:checked+label
i:first-child
#header-theme-switch:checked~i
&:first-of-type
opacity 0
i:last-child
&:last-of-type
opacity 1
29 changes: 13 additions & 16 deletions src/components/switch/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import prefix from "src/scripts/prefix";
import dataset from "src/scripts/server/dataset";
const props = Astro.props;
interface Props {
id: string;
id?: string;
title?: string;
name?: string;
checked?: boolean;
Expand All @@ -12,16 +12,9 @@ interface Props {
style?: Record<string, any> | string;
dataset?: Record<string, any>;
}
if (!props.id) {
throw new Error("`swicth`必须传入`id`");
/**
* 其实可以不传入，那样导致label[for]无法绑定开关，从而导致开关无法展示hover效果
*
* 所以对于本文档的这个astro组件，为了完全的展示样式，必须要传入
*
* （实际上支持label不传for是后来加的，懒得调整组件和pug示例代码了所以一刀切了）
*/
let slots = "";
if (Astro.slots.has("default")) {
slots = await Astro.slots.render("default");
}
---

Expand All @@ -37,10 +30,14 @@ if (!props.id) {
name={props.name || props.id}
checked={props.checked}
disabled={props.disabled}
title={props.title || props.id || props.name}
/>
<label
class={`${prefix}-switch-mover`}
for={props.id}
title={props.title || props.id}><slot /></label
>
{
slots ? (
<Fragment set:html={slots} />
) : (
<i class={`${prefix}-switch-mover`}></i>
<span class={`${prefix}-switch-slot`}></span>
)
}
</span>
13 changes: 7 additions & 6 deletions src/components/switch/oxalis.astro
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
import Switch from "./index.astro";
import prefix from "src/scripts/prefix";
const props = Astro.props;
interface Props {
id: string
id: string;
}
---

<Switch
id={props.id}
class="oxalis-switch"
checked
style={{
["--size-switch"]: "48px",
["--padding-switch"]: "4px",
Expand All @@ -18,10 +18,11 @@ interface Props {
["--color-switch"]: "var(--gold-3)",
}}
>
<span class="oxalis-switch-mover">☘</span>
<span class={`${prefix}-switch-mover oxalis-switch-mover`}>☘</span>
<label class={`${prefix}-switch-slot`} for={props.id}></label>
</Switch>

<style lang="stylus">
.oxalis-switch>:global(input:checked+label)
:global(.oxalis-switch-mover)
transform rotate(360deg)
.oxalis-switch>:global(input:checked)+.oxalis-switch-mover
transform rotate(360deg)
</style>
194 changes: 98 additions & 96 deletions src/lib/components/switch.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,108 +37,110 @@
position relative
font-size calc(var(--size-switch-mover) - var(--font-offset-parent))

height var(--size-switch, 22px)
width calc(var(--size-switch, 22px) * 2)
border-radius calc((var(--size-switch, 22px) / 2))
// overflow hidden

&.sm
--size-switch 16px

input.{prefix}-input[type=checkbox]

&-mover
z-index 1
overflow hidden
border-radius 50%
background-color _rgb(var(--color-switch-mover, var(--gray-1)))
will-change filter
&-slot
position absolute
opacity 0
margin 0
// pointer-events none
z-index 0
background-color _rgb(var(--color-switch, var(--gray-4)))
transition background-color 1s, box-shadow .5s
inset 0
border-radius @border-radius
&-mover
input.{prefix}-input[type=checkbox]
cursor pointer
position absolute
display flex
align-items center
justify-content center
margin 0
left var(--padding-switch, 2px)
top var(--padding-switch, 2px)
bottom var(--padding-switch, 2px)
width var(--size-switch-mover)
height @width
transition all .5s
input.{prefix}-input[type=checkbox]
opacity 0
z-index 2
~/[data-wider-trigger] ^[-1..-1]
inset 0 !important
width @width
height @height

^[-1..-1]:focus-visible~^[0]-mover
outline 2px solid _rgb(var(--outline-color-focus))

&:disabled
^[-1..-1]:disabled~^[0]-mover
cursor not-allowed
^[-1..-1]:disabled~^[0]-slot
background-color _rgb(var(--color-switch-disabled, var(--gray-3)))
^[-1..-1]:checked:disabled~^[0]-slot
background-color _rgb(var(--color-switch-checked-disabled, var(--primary-3)))

&:checked
^[-1..-1]:checked~^[0]-mover
left calc(var(--size-switch, 22px) + var(--padding-switch, 2px))
^[-1..-1]:checked~^[0]-slot
background-color _rgb(var(--color-switch-checked, var(--primary-6)))

~/-mover
&:not([for])
pointer-events none
display inline-flex
cursor pointer
height var(--size-switch, 22px)
width calc(var(--size-switch, 22px) * 2)
^[1..1]:focus-visible+&
outline 2px solid _rgb(var(--outline-color-focus))
border-radius calc((var(--size-switch, 22px) / 2))
background-color _rgb(var(--color-switch, var(--gray-4)))
transition background-color 1s, box-shadow .5s
/**
* 使用 `^[1..1]` 代替 `../` 减少编译后体积以及选择器冗余
*/
^[1..1]:checked+&
background-color _rgb(var(--color-switch-checked, var(--primary-6)))
^[1..1]:checked:disabled+&
background-color _rgb(var(--color-switch-checked-disabled, var(--primary-3)))
^[1..1]:disabled+&
background-color _rgb(var(--color-switch-disabled, var(--gray-3)))
cursor not-allowed

&:empty::before, &>*
content ''
display flex
align-items center
justify-content center
position absolute
z-index 1
left var(--padding-switch, 2px)
top var(--padding-switch, 2px)
bottom var(--padding-switch, 2px)
width var(--size-switch-mover)
height @width
overflow hidden
border-radius 50%
background-color _rgb(var(--color-switch-mover, var(--gray-1)))
transition all .5s
will-change filter

^[1..1]:checked+&
left calc(var(--size-switch, 22px) + var(--padding-switch, 2px))




^[1..1]:not(:disabled)+&:hover
box-shadow \
inset \
0 \
0 \
var(--padding-switch, 2px) \
var(--padding-switch, 2px) \
&:not(:disabled):hover~^[0]-mover
^[-1..-1]:not(:disabled)~^[0]-mover:hover
filter drop-shadow(
0 \
0 \
var(--padding-switch, 2px) \
_rgb(box-shadow-color-switch) \
)
box-shadow \
0 \
0 \
box-shadow-width-switch \
box-shadow-width-switch \
_rgb(box-shadow-color-switch \/ 25%)
&:empty::before, &>*
filter drop-shadow(
0 \
0 \
var(--padding-switch, 2px) \
_rgb(box-shadow-color-switch) \
)
box-shadow \
0 \
0 \
box-shadow-width-switch \
box-shadow-width-switch \
_rgb(box-shadow-color-switch \/ 25%)



^[1..1]:not(:disabled):checked+&:hover
box-shadow \
inset \
0 \
0 \
var(--padding-switch, 2px) \
var(--padding-switch, 2px) \
_rgb(box-shadow-color-switch-checked \/ 25%)
&:empty::before, &>*
filter drop-shadow(
0 \
0 \
var(--padding-switch, 2px) \
_rgb(box-shadow-color-switch-checked) \
)
box-shadow \
0 \
0 \
box-shadow-width-switch \
box-shadow-width-switch \
_rgb(box-shadow-color-switch-checked \/ 25%)
&:not(:disabled):hover~^[0]-slot
^[-1..-1]:not(:disabled)~^[0]-slot:hover
box-shadow \
inset \
0 \
0 \
var(--padding-switch, 2px) \
var(--padding-switch, 2px) \
_rgb(box-shadow-color-switch \/ 25%)

&:not(:disabled):checked:hover~^[0]-mover
^[-1..-1]:not(:disabled):checked~^[0]-mover:hover
filter drop-shadow(
0 \
0 \
var(--padding-switch, 2px) \
_rgb(box-shadow-color-switch-checked) \
)
box-shadow \
0 \
0 \
box-shadow-width-switch \
box-shadow-width-switch \
_rgb(box-shadow-color-switch-checked \/ 25%)
&:not(:disabled):checked:hover~^[0]-slot
^[-1..-1]:not(:disabled):checked~^[0]-slot:hover
box-shadow \
inset \
0 \
0 \
var(--padding-switch, 2px) \
var(--padding-switch, 2px) \
_rgb(box-shadow-color-switch-checked \/ 25%)
2 changes: 1 addition & 1 deletion src/pages/menu/button.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ button.☘-button(title="关机" data-primary="danger" style={

配合 `input[type=file].☘-input` 使用即可

上传按钮并**不捆绑** `<label>` ，默认情况下label被点击时也会触发系统文件选择
上传按钮并**不捆绑** `<label>` ，绑定`[for]`时label被点击时也会触发系统文件选择

<T
tag="input"
Expand Down
2 changes: 1 addition & 1 deletion src/pages/menu/form/checkbox.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ span.☘-checkbox(style="--indent-checkbox: 2em")
label.☘-checkbox-label(for="hello") world
```

注意，checkbox**捆绑**了 `<label>` ，你必须携带它，默认情况下label被点击时也会触发选择或反选
注意，checkbox**捆绑**了 `<label>` ，你必须携带它，绑定`[for]`时label被点击时也会触发选择或反选

## `disabled`

Expand Down
2 changes: 1 addition & 1 deletion src/pages/menu/form/radio.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ div(style="--indent-radio: 20px")
label.☘-radio-label(for="kotlin") Kotlin
```

注意，radio**捆绑**了 `<label>` ，你必须携带它，默认情况下label被点击时也会触发选择或反选
注意，radio**捆绑**了 `<label>` ，你必须携带它，绑定`[for]`时label被点击时也会触发选择或反选

## `disabled`

Expand Down
Loading

0 comments on commit 18f7106

Please sign in to comment.