diff options
| author | kunish <[email protected]> | 2023-01-27 02:56:42 +0800 |
|---|---|---|
| committer | kunish <[email protected]> | 2023-01-27 15:13:28 +0800 |
| commit | 48e37a055984a3b895cecfb6a74e5654f05b818f (patch) | |
| tree | 7905e663bb4c9e00da3f9d0c5ff04c9562937267 /src/components/shared/Basic.module.scss | |
| parent | 11704b9be37c7442ae5c7585e15ed16ef27849ae (diff) | |
chore: optimize development workflow
Diffstat (limited to 'src/components/shared/Basic.module.scss')
| -rw-r--r-- | src/components/shared/Basic.module.scss | 70 |
1 files changed, 35 insertions, 35 deletions
diff --git a/src/components/shared/Basic.module.scss b/src/components/shared/Basic.module.scss index 289b694..8602377 100644 --- a/src/components/shared/Basic.module.scss +++ b/src/components/shared/Basic.module.scss @@ -1,3 +1,5 @@ +@import '~/styles/utils/custom-media'; + h2.sectionNameType { margin: 0; font-size: 1em; @@ -13,29 +15,6 @@ h2.sectionNameType { } } -/** - * loading dots - * - * light - * dot color is #000 (black) - * - * transparency change: - * dot1 dot2 do3 - * phase1 0.1 0.3 0.5 - * phase2 0.5 0.1 0.3 - * phase3 0.3 0.5 0.1 - * - * dark - * dot color is #fff (white) - * - * transparency change: - * dot1 dot2 do3 - * phase1 0.5 0.3 0.1 - * phase2 0.1 0.5 0.3 - * phase3 0.3 0.1 0.5 - * - */ - @mixin light { --loading-dot-1-1: rgba(0, 0, 0, 0.1); --loading-dot-1-2: rgba(0, 0, 0, 0.5); @@ -113,21 +92,42 @@ h2.sectionNameType { animation: dot3 $d step-start infinite; } } -/* prettier-ignore */ + @keyframes dot1 { - 0%, 100% { background-color: var(--loading-dot-1-1) } - 33% { background-color: var(--loading-dot-1-2) } - 66% { background-color: var(--loading-dot-1-3) } + 0%, + 100% { + background-color: var(--loading-dot-1-1); + } + 33% { + background-color: var(--loading-dot-1-2); + } + 66% { + background-color: var(--loading-dot-1-3); + } } -/* prettier-ignore */ + @keyframes dot2 { - 0%, 100% { background-color: var(--loading-dot-2-1) } - 33% { background-color: var(--loading-dot-2-2) } - 66% { background-color: var(--loading-dot-2-3) } + 0%, + 100% { + background-color: var(--loading-dot-2-1); + } + 33% { + background-color: var(--loading-dot-2-2); + } + 66% { + background-color: var(--loading-dot-2-3); + } } -/* prettier-ignore */ + @keyframes dot3 { - 0%, 100% { background-color: var(--loading-dot-3-1) } - 33% { background-color: var(--loading-dot-3-2) } - 66% { background-color: var(--loading-dot-3-3) } + 0%, + 100% { + background-color: var(--loading-dot-3-1); + } + 33% { + background-color: var(--loading-dot-3-2); + } + 66% { + background-color: var(--loading-dot-3-3); + } } |