diff options
Diffstat (limited to 'src/components/shared/Basic.module.css')
| -rw-r--r-- | src/components/shared/Basic.module.css | 116 |
1 files changed, 0 insertions, 116 deletions
diff --git a/src/components/shared/Basic.module.css b/src/components/shared/Basic.module.css deleted file mode 100644 index 8e5a113..0000000 --- a/src/components/shared/Basic.module.css +++ /dev/null @@ -1,116 +0,0 @@ -h2.sectionNameType { - margin: 0; - font-size: 1.3em; - @media (--breakpoint-not-small) { - font-size: 1.5em; - } - - span:nth-child(2) { - font-size: 12px; - color: #777; - font-weight: normal; - margin: 0 0.3em; - } -} - -/** - * 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 - * - */ - -:global { - body.light { - /* - * --loading-dot-{dot-index}-{dot-keyframe-phase} - */ - --loading-dot-1-1: rgba(0, 0, 0, 0.1); - --loading-dot-1-2: rgba(0, 0, 0, 0.5); - --loading-dot-1-3: rgba(0, 0, 0, 0.3); - --loading-dot-2-1: rgba(0, 0, 0, 0.3); - --loading-dot-2-2: rgba(0, 0, 0, 0.1); - --loading-dot-2-3: rgba(0, 0, 0, 0.5); - --loading-dot-3-1: rgba(0, 0, 0, 0.5); - --loading-dot-3-2: rgba(0, 0, 0, 0.3); - --loading-dot-3-3: rgba(0, 0, 0, 0.1); - } - body.dark { - --loading-dot-1-1: rgba(255, 255, 255, 0.5); - --loading-dot-1-2: rgba(255, 255, 255, 0.1); - --loading-dot-1-3: rgba(255, 255, 255, 0.3); - --loading-dot-2-1: rgba(255, 255, 255, 0.3); - --loading-dot-2-2: rgba(255, 255, 255, 0.5); - --loading-dot-2-3: rgba(255, 255, 255, 0.1); - --loading-dot-3-1: rgba(255, 255, 255, 0.1); - --loading-dot-3-2: rgba(255, 255, 255, 0.3); - --loading-dot-3-3: rgba(255, 255, 255, 0.5); - } -} - -.loadingDot, -.loadingDot:before, -.loadingDot:after { - display: inline-block; - vertical-align: middle; - width: 6px; - height: 6px; - border-radius: 50%; - font-size: 0; -} - -.loadingDot { - $d: 1s; - - position: relative; - background-color: var(--loading-dot-2-1); - animation: dot2 $d step-start infinite; - &:before { - content: ''; - position: absolute; - left: -12px; - background-color: var(--loading-dot-1-1); - animation: dot1 $d step-start infinite; - } - &:after { - content: ''; - position: absolute; - right: -12px; - background-color: var(--loading-dot-3-1); - 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) } -} -/* 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) } -} -/* 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) } -} |
