worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

refactor: use css module at components/global/loading.vue (#8750)

Browse source 
* refactor: use css module at components/global/loading.vue

* rename class name to "root"
This commit is contained in:
tamaina 2022-05-29 00:15:32 +09:00 committed by GitHub
parent 4a50c49211
commit abc8998b48
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 33 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
packages/client/src/components/global/loading.vue
View file

@ -1,12 +1,12 @@
<template> <template>
<div class="yxspomdl" :class="{ inline, colored, mini }"> <div :class="[$style.root, { [$style.inline]: inline, [$style.colored]: colored, [$style.mini]: mini }]">
<div class="container"> <div :class="$style.container">
<svg class="spinner bg" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg"> <svg :class="[$style.spinner, $style.bg]" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1.125,0,0,1.125,12,12)"> <g transform="matrix(1.125,0,0,1.125,12,12)">
<circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/> <circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/>
</g> </g>
</svg> </svg>
<svg class="spinner fg" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg"> <svg :class="[$style.spinner, $style.fg]" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1.125,0,0,1.125,12,12)"> <g transform="matrix(1.125,0,0,1.125,12,12)">
<path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/> <path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/>
</g> </g>
@ -16,7 +16,9 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { } from 'vue'; import { useCssModule } from 'vue';
useCssModule();
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
inline?: boolean; inline?: boolean;
@ -29,7 +31,7 @@ const props = withDefaults(defineProps<{
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
@keyframes spinner { @keyframes spinner {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
@ -39,7 +41,7 @@ const props = withDefaults(defineProps<{
} }
} }
.yxspomdl { .root {
padding: 32px; padding: 32px;
text-align: center; text-align: center;
cursor: wait; cursor: wait;
@ -60,33 +62,33 @@ const props = withDefaults(defineProps<{
padding: 16px; padding: 16px;
--size: 32px; --size: 32px;
} }
}
> .container { .container {
position: relative; position: relative;
width: var(--size); width: var(--size);
height: var(--size); height: var(--size);
margin: 0 auto; margin: 0 auto;
}
> .spinner { .spinner {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: var(--size); width: var(--size);
height: var(--size); height: var(--size);
fill-rule: evenodd; fill-rule: evenodd;
clip-rule: evenodd; clip-rule: evenodd;
stroke-linecap: round; stroke-linecap: round;
stroke-linejoin: round; stroke-linejoin: round;
stroke-miterlimit: 1.5; stroke-miterlimit: 1.5;
} }
> .bg { .bg {
opacity: 0.275; opacity: 0.275;
} }
> .fg { .fg {
animation: spinner 0.5s linear infinite; animation: spinner 0.5s linear infinite;
}
}
} }
</style> </style>