From abc8998b485ebe6f9a1be03cd93950f668a974cc Mon Sep 17 00:00:00 2001 From: tamaina <tamaina@hotmail.co.jp> Date: Sun, 29 May 2022 00:15:32 +0900 Subject: [PATCH] refactor: use css module at components/global/loading.vue (#8750) * refactor: use css module at components/global/loading.vue * rename class name to "root" --- .../client/src/components/global/loading.vue | 64 ++++++++++--------- 1 file changed, 33 insertions(+), 31 deletions(-) diff --git a/packages/client/src/components/global/loading.vue b/packages/client/src/components/global/loading.vue index fa2ce1800c..5a7e362fcf 100644 --- a/packages/client/src/components/global/loading.vue +++ b/packages/client/src/components/global/loading.vue @@ -1,12 +1,12 @@ <template> -<div class="yxspomdl" :class="{ inline, colored, mini }"> - <div class="container"> - <svg class="spinner bg" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg"> +<div :class="[$style.root, { [$style.inline]: inline, [$style.colored]: colored, [$style.mini]: mini }]"> + <div :class="$style.container"> + <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)"> <circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/> </g> </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)"> <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> @@ -16,7 +16,9 @@ </template> <script lang="ts" setup> -import { } from 'vue'; +import { useCssModule } from 'vue'; + +useCssModule(); const props = withDefaults(defineProps<{ inline?: boolean; @@ -29,7 +31,7 @@ const props = withDefaults(defineProps<{ }); </script> -<style lang="scss" scoped> +<style lang="scss" module> @keyframes spinner { 0% { transform: rotate(0deg); @@ -39,7 +41,7 @@ const props = withDefaults(defineProps<{ } } -.yxspomdl { +.root { padding: 32px; text-align: center; cursor: wait; @@ -60,33 +62,33 @@ const props = withDefaults(defineProps<{ padding: 16px; --size: 32px; } +} - > .container { - position: relative; - width: var(--size); - height: var(--size); - margin: 0 auto; +.container { + position: relative; + width: var(--size); + height: var(--size); + margin: 0 auto; +} - > .spinner { - position: absolute; - top: 0; - left: 0; - width: var(--size); - height: var(--size); - fill-rule: evenodd; - clip-rule: evenodd; - stroke-linecap: round; - stroke-linejoin: round; - stroke-miterlimit: 1.5; - } +.spinner { + position: absolute; + top: 0; + left: 0; + width: var(--size); + height: var(--size); + fill-rule: evenodd; + clip-rule: evenodd; + stroke-linecap: round; + stroke-linejoin: round; + stroke-miterlimit: 1.5; +} - > .bg { - opacity: 0.275; - } +.bg { + opacity: 0.275; +} - > .fg { - animation: spinner 0.5s linear infinite; - } - } +.fg { + animation: spinner 0.5s linear infinite; } </style>