blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-21 13:59:15 +08:00
Code Issues Projects Releases Wiki Activity

style(Loading): simplify selector (#9117)

Browse Source
This commit is contained in:
neverland 2021-07-25 11:53:56 +08:00 committed by GitHub
parent cafbf2bef4
commit 2821acb37a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 106 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/button/test/__snapshots__/demo.spec.ts.snap
View File

@ -139,29 +139,29 @@ exports[`should render demo and match snapshot 1`] = `
<div class="van-button__content">
<div class="van-loading van-loading--spinner van-button__loading">
<span class="van-loading__spinner van-loading__spinner--spinner">
<i>
<i class="van-loading__line van-loading__line--1">
</i>
<i>
<i class="van-loading__line van-loading__line--2">
</i>
<i>
<i class="van-loading__line van-loading__line--3">
</i>
<i>
<i class="van-loading__line van-loading__line--4">
</i>
<i>
<i class="van-loading__line van-loading__line--5">
</i>
<i>
<i class="van-loading__line van-loading__line--6">
</i>
<i>
<i class="van-loading__line van-loading__line--7">
</i>
<i>
<i class="van-loading__line van-loading__line--8">
</i>
<i>
<i class="van-loading__line van-loading__line--9">
</i>
<i>
<i class="van-loading__line van-loading__line--10">
</i>
<i>
<i class="van-loading__line van-loading__line--11">
</i>
<i>
<i class="van-loading__line van-loading__line--12">
</i>
</span>
</div>

48
src/image-preview/test/__snapshots__/index.spec.ts.snap
View File

@ -86,29 +86,29 @@ exports[`zoom in and drag image to move 1`] = `
<div class="van-image__loading">
<div class="van-loading van-loading--spinner">
<span class="van-loading__spinner van-loading__spinner--spinner">
<i>
<i class="van-loading__line van-loading__line--1">
</i>
<i>
<i class="van-loading__line van-loading__line--2">
</i>
<i>
<i class="van-loading__line van-loading__line--3">
</i>
<i>
<i class="van-loading__line van-loading__line--4">
</i>
<i>
<i class="van-loading__line van-loading__line--5">
</i>
<i>
<i class="van-loading__line van-loading__line--6">
</i>
<i>
<i class="van-loading__line van-loading__line--7">
</i>
<i>
<i class="van-loading__line van-loading__line--8">
</i>
<i>
<i class="van-loading__line van-loading__line--9">
</i>
<i>
<i class="van-loading__line van-loading__line--10">
</i>
<i>
<i class="van-loading__line van-loading__line--11">
</i>
<i>
<i class="van-loading__line van-loading__line--12">
</i>
</span>
</div>
@ -127,29 +127,29 @@ exports[`zoom in and drag image to move 2`] = `
<div class="van-image__loading">
<div class="van-loading van-loading--spinner">
<span class="van-loading__spinner van-loading__spinner--spinner">
<i>
<i class="van-loading__line van-loading__line--1">
</i>
<i>
<i class="van-loading__line van-loading__line--2">
</i>
<i>
<i class="van-loading__line van-loading__line--3">
</i>
<i>
<i class="van-loading__line van-loading__line--4">
</i>
<i>
<i class="van-loading__line van-loading__line--5">
</i>
<i>
<i class="van-loading__line van-loading__line--6">
</i>
<i>
<i class="van-loading__line van-loading__line--7">
</i>
<i>
<i class="van-loading__line van-loading__line--8">
</i>
<i>
<i class="van-loading__line van-loading__line--9">
</i>
<i>
<i class="van-loading__line van-loading__line--10">
</i>
<i>
<i class="van-loading__line van-loading__line--11">
</i>
<i>
<i class="van-loading__line van-loading__line--12">
</i>
</span>
</div>

24
src/image/test/__snapshots__/demo.spec.ts.snap
View File

@ -242,29 +242,29 @@ exports[`should render demo and match snapshot 1`] = `
<span class="van-loading__spinner van-loading__spinner--spinner"
style="width: 20px; height: 20px;"
>
<i>
<i class="van-loading__line van-loading__line--1">
</i>
<i>
<i class="van-loading__line van-loading__line--2">
</i>
<i>
<i class="van-loading__line van-loading__line--3">
</i>
<i>
<i class="van-loading__line van-loading__line--4">
</i>
<i>
<i class="van-loading__line van-loading__line--5">
</i>
<i>
<i class="van-loading__line van-loading__line--6">
</i>
<i>
<i class="van-loading__line van-loading__line--7">
</i>
<i>
<i class="van-loading__line van-loading__line--8">
</i>
<i>
<i class="van-loading__line van-loading__line--9">
</i>
<i>
<i class="van-loading__line van-loading__line--10">
</i>
<i>
<i class="van-loading__line van-loading__line--11">
</i>
<i>
<i class="van-loading__line van-loading__line--12">
</i>
</span>
</div>

4
src/loading/Loading.tsx
View File

@ -3,7 +3,9 @@ import { createNamespace, addUnit, getSizeStyle, extend } from '../utils';
const [name, bem] = createNamespace('loading');
const SpinIcon: JSX.Element[] = Array(12).fill(<i />);
const SpinIcon: JSX.Element[] = Array(12)
.fill(null)
.map((_, index) => <i class={bem('line', String(index + 1))} />);
const CircularIcon = (
<svg class={bem('circular')} viewBox="25 25 50 50">

38
src/loading/index.less
View File

@ -28,24 +28,6 @@
&--spinner {
animation-timing-function: steps(12);
i {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
&::before {
display: block;
width: 2px;
height: 25%;
margin: 0 auto;
background-color: currentColor;
border-radius: 40%;
content: ' ';
}
}
}
&--circular {
@ -53,6 +35,24 @@
}
}
&__line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
&::before {
display: block;
width: 2px;
height: 25%;
margin: 0 auto;
background-color: currentColor;
border-radius: 40%;
content: ' ';
}
}
&__circular {
display: block;
width: 100%;
@ -103,7 +103,7 @@
}
.generate-spinner(@n, @i: 1) when (@i =< @n) {
.van-loading__spinner--spinner i:nth-of-type(@{i}) {
.van-loading__line--@{i} {
transform: rotate(@i * 30deg);
opacity: 1 - (0.75 / 12) * (@i - 1);
}

72
src/loading/test/__snapshots__/demo.spec.ts.snap
View File

@ -18,29 +18,29 @@ exports[`should render demo and match snapshot 1`] = `
</div>
<div class="van-loading van-loading--spinner">
<span class="van-loading__spinner van-loading__spinner--spinner">
<i>
<i class="van-loading__line van-loading__line--1">
</i>
<i>
<i class="van-loading__line van-loading__line--2">
</i>
<i>
<i class="van-loading__line van-loading__line--3">
</i>
<i>
<i class="van-loading__line van-loading__line--4">
</i>
<i>
<i class="van-loading__line van-loading__line--5">
</i>
<i>
<i class="van-loading__line van-loading__line--6">
</i>
<i>
<i class="van-loading__line van-loading__line--7">
</i>
<i>
<i class="van-loading__line van-loading__line--8">
</i>
<i>
<i class="van-loading__line van-loading__line--9">
</i>
<i>
<i class="van-loading__line van-loading__line--10">
</i>
<i>
<i class="van-loading__line van-loading__line--11">
</i>
<i>
<i class="van-loading__line van-loading__line--12">
</i>
</span>
</div>
@ -66,29 +66,29 @@ exports[`should render demo and match snapshot 1`] = `
<span class="van-loading__spinner van-loading__spinner--spinner"
style="color: rgb(25, 137, 250);"
>
<i>
<i class="van-loading__line van-loading__line--1">
</i>
<i>
<i class="van-loading__line van-loading__line--2">
</i>
<i>
<i class="van-loading__line van-loading__line--3">
</i>
<i>
<i class="van-loading__line van-loading__line--4">
</i>
<i>
<i class="van-loading__line van-loading__line--5">
</i>
<i>
<i class="van-loading__line van-loading__line--6">
</i>
<i>
<i class="van-loading__line van-loading__line--7">
</i>
<i>
<i class="van-loading__line van-loading__line--8">
</i>
<i>
<i class="van-loading__line van-loading__line--9">
</i>
<i>
<i class="van-loading__line van-loading__line--10">
</i>
<i>
<i class="van-loading__line van-loading__line--11">
</i>
<i>
<i class="van-loading__line van-loading__line--12">
</i>
</span>
</div>
@ -114,29 +114,29 @@ exports[`should render demo and match snapshot 1`] = `
<span class="van-loading__spinner van-loading__spinner--spinner"
style="width: 24px; height: 24px;"
>
<i>
<i class="van-loading__line van-loading__line--1">
</i>
<i>
<i class="van-loading__line van-loading__line--2">
</i>
<i>
<i class="van-loading__line van-loading__line--3">
</i>
<i>
<i class="van-loading__line van-loading__line--4">
</i>
<i>
<i class="van-loading__line van-loading__line--5">
</i>
<i>
<i class="van-loading__line van-loading__line--6">
</i>
<i>
<i class="van-loading__line van-loading__line--7">
</i>
<i>
<i class="van-loading__line van-loading__line--8">
</i>
<i>
<i class="van-loading__line van-loading__line--9">
</i>
<i>
<i class="van-loading__line van-loading__line--10">
</i>
<i>
<i class="van-loading__line van-loading__line--11">
</i>
<i>
<i class="van-loading__line van-loading__line--12">
</i>
</span>
</div>