From 5ff2f89afb71fd2976c487692ec73085241e09c7 Mon Sep 17 00:00:00 2001 From: Haishan Date: Sun, 6 Jun 2021 00:32:24 +0800 Subject: Stop use postcss-nested postcss-extend-rule --- src/components/shared/BaseModal.module.css | 17 ---- src/components/shared/BaseModal.module.scss | 17 ++++ src/components/shared/BaseModal.tsx | 4 +- src/components/shared/Basic.module.css | 116 --------------------------- src/components/shared/Basic.module.scss | 116 +++++++++++++++++++++++++++ src/components/shared/Basic.tsx | 2 +- src/components/shared/Fab.module.css | 33 -------- src/components/shared/Fab.module.scss | 33 ++++++++ src/components/shared/Fab.tsx | 2 +- src/components/shared/RotateIcon.module.css | 16 ---- src/components/shared/RotateIcon.module.scss | 16 ++++ src/components/shared/RotateIcon.tsx | 2 +- src/components/shared/Select.module.css | 30 ------- src/components/shared/Select.module.scss | 30 +++++++ src/components/shared/Select.tsx | 2 +- src/components/shared/Styled.module.css | 5 -- src/components/shared/Styled.module.scss | 5 ++ src/components/shared/Styled.tsx | 2 +- src/components/shared/TextFitler.module.scss | 19 +++++ src/components/shared/TextFitler.tsx | 21 +++++ 20 files changed, 264 insertions(+), 224 deletions(-) delete mode 100644 src/components/shared/BaseModal.module.css create mode 100644 src/components/shared/BaseModal.module.scss delete mode 100644 src/components/shared/Basic.module.css create mode 100644 src/components/shared/Basic.module.scss delete mode 100644 src/components/shared/Fab.module.css create mode 100644 src/components/shared/Fab.module.scss delete mode 100644 src/components/shared/RotateIcon.module.css create mode 100644 src/components/shared/RotateIcon.module.scss delete mode 100644 src/components/shared/Select.module.css create mode 100644 src/components/shared/Select.module.scss delete mode 100644 src/components/shared/Styled.module.css create mode 100644 src/components/shared/Styled.module.scss create mode 100644 src/components/shared/TextFitler.module.scss create mode 100644 src/components/shared/TextFitler.tsx (limited to 'src/components/shared') diff --git a/src/components/shared/BaseModal.module.css b/src/components/shared/BaseModal.module.css deleted file mode 100644 index 1d206e1..0000000 --- a/src/components/shared/BaseModal.module.css +++ /dev/null @@ -1,17 +0,0 @@ -.overlay { - background-color: rgba(0, 0, 0, 0.6); -} -.cnt { - position: absolute; - background-color: var(--bg-modal); - color: var(--color-text); - line-height: 1.4; - opacity: 0.6; - transition: all 0.3s ease; - transform: translate(-50%, -50%) scale(1.2); - box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 4px, rgba(0, 0, 0, 0.24) 0px 16px 32px; -} -.afterOpen { - opacity: 1; - transform: translate(-50%, -50%) scale(1); -} diff --git a/src/components/shared/BaseModal.module.scss b/src/components/shared/BaseModal.module.scss new file mode 100644 index 0000000..1d206e1 --- /dev/null +++ b/src/components/shared/BaseModal.module.scss @@ -0,0 +1,17 @@ +.overlay { + background-color: rgba(0, 0, 0, 0.6); +} +.cnt { + position: absolute; + background-color: var(--bg-modal); + color: var(--color-text); + line-height: 1.4; + opacity: 0.6; + transition: all 0.3s ease; + transform: translate(-50%, -50%) scale(1.2); + box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 4px, rgba(0, 0, 0, 0.24) 0px 16px 32px; +} +.afterOpen { + opacity: 1; + transform: translate(-50%, -50%) scale(1); +} diff --git a/src/components/shared/BaseModal.tsx b/src/components/shared/BaseModal.tsx index dcd0b57..25edce9 100644 --- a/src/components/shared/BaseModal.tsx +++ b/src/components/shared/BaseModal.tsx @@ -2,8 +2,8 @@ import cx from 'clsx'; import * as React from 'react'; import Modal from 'react-modal'; -import modalStyle from '../Modal.module.css'; -import s from './BaseModal.module.css'; +import modalStyle from '../Modal.module.scss'; +import s from './BaseModal.module.scss'; const { useMemo } = React; 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) } -} diff --git a/src/components/shared/Basic.module.scss b/src/components/shared/Basic.module.scss new file mode 100644 index 0000000..8e5a113 --- /dev/null +++ b/src/components/shared/Basic.module.scss @@ -0,0 +1,116 @@ +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) } +} diff --git a/src/components/shared/Basic.tsx b/src/components/shared/Basic.tsx index dbd1bc7..c2ced0f 100644 --- a/src/components/shared/Basic.tsx +++ b/src/components/shared/Basic.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import s from './Basic.module.css'; +import s from './Basic.module.scss'; export function SectionNameType({ name, type }) { return ( diff --git a/src/components/shared/Fab.module.css b/src/components/shared/Fab.module.css deleted file mode 100644 index 61aaecb..0000000 --- a/src/components/shared/Fab.module.css +++ /dev/null @@ -1,33 +0,0 @@ -.spining { - position: relative; - border-radius: 50%; - background: linear-gradient(60deg, #e66465, #9198e5); - - width: 48px; - height: 48px; - display: flex; - justify-content: center; - align-items: center; -} - -.spining:before { - content: ''; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - border: 2px solid transparent; - border-top-color: currentColor; - border-radius: 50%; - animation: spining_keyframes 1s linear infinite; -} - -@keyframes spining_keyframes { - 0% { - transform: rotate(0); - } - 100% { - transform: rotate(360deg); - } -} diff --git a/src/components/shared/Fab.module.scss b/src/components/shared/Fab.module.scss new file mode 100644 index 0000000..61aaecb --- /dev/null +++ b/src/components/shared/Fab.module.scss @@ -0,0 +1,33 @@ +.spining { + position: relative; + border-radius: 50%; + background: linear-gradient(60deg, #e66465, #9198e5); + + width: 48px; + height: 48px; + display: flex; + justify-content: center; + align-items: center; +} + +.spining:before { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + border: 2px solid transparent; + border-top-color: currentColor; + border-radius: 50%; + animation: spining_keyframes 1s linear infinite; +} + +@keyframes spining_keyframes { + 0% { + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} diff --git a/src/components/shared/Fab.tsx b/src/components/shared/Fab.tsx index 68750ef..70c0c03 100644 --- a/src/components/shared/Fab.tsx +++ b/src/components/shared/Fab.tsx @@ -3,7 +3,7 @@ import './rtf.css'; import * as React from 'react'; import { Action, Fab } from 'react-tiny-fab/dist'; -import s from './Fab.module.css'; +import s from './Fab.module.scss'; export function IsFetching({ children }: { children: React.ReactNode }) { return {children}; diff --git a/src/components/shared/RotateIcon.module.css b/src/components/shared/RotateIcon.module.css deleted file mode 100644 index 60748de..0000000 --- a/src/components/shared/RotateIcon.module.css +++ /dev/null @@ -1,16 +0,0 @@ -.rotate { - display: inline-flex; -} -.isRotating { - animation: rotating 3s infinite linear; - animation-fill-mode: forwards; -} - -@keyframes rotating { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/components/shared/RotateIcon.module.scss b/src/components/shared/RotateIcon.module.scss new file mode 100644 index 0000000..60748de --- /dev/null +++ b/src/components/shared/RotateIcon.module.scss @@ -0,0 +1,16 @@ +.rotate { + display: inline-flex; +} +.isRotating { + animation: rotating 3s infinite linear; + animation-fill-mode: forwards; +} + +@keyframes rotating { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/src/components/shared/RotateIcon.tsx b/src/components/shared/RotateIcon.tsx index e2d4ad8..7e3ceae 100644 --- a/src/components/shared/RotateIcon.tsx +++ b/src/components/shared/RotateIcon.tsx @@ -2,7 +2,7 @@ import cx from 'clsx'; import * as React from 'react'; import { RotateCw } from 'react-feather'; -import s from './RotateIcon.module.css'; +import s from './RotateIcon.module.scss'; export function RotateIcon({ isRotating }: { isRotating: boolean }) { const cls = cx(s.rotate, { diff --git a/src/components/shared/Select.module.css b/src/components/shared/Select.module.css deleted file mode 100644 index 9e1a20c..0000000 --- a/src/components/shared/Select.module.css +++ /dev/null @@ -1,30 +0,0 @@ -.select { - height: 40px; - line-height: 1.5; - width: 100%; - padding-left: 8px; - appearance: none; - background-color: var(--color-input-bg); - color: var(--color-text); - padding-right: 20px; - border-radius: 4px; - border: 1px solid var(--color-input-border); - background-image: url(data:image/svg+xml,%0A%20%20%20%20%3Csvg%20width%3D%228%22%20height%3D%2224%22%20viewBox%3D%220%200%208%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%207L7%2011H1L4%207Z%22%20fill%3D%22%23999999%22%20%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%2017L1%2013L7%2013L4%2017Z%22%20fill%3D%22%23999999%22%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20); - background-position: right 8px center; - background-repeat: no-repeat; -} - -.select:hover, -.select:focus { - border-color: rgb(52, 52, 52); - outline: none !important; - color: var(--color-text-highlight); - background-image: var(--select-bg-hover); -} -.select:focus { - box-shadow: rgba(66, 153, 225, 0.6) 0px 0px 0px 3px; -} - -.select option { - background-color: var(--color-background); -} diff --git a/src/components/shared/Select.module.scss b/src/components/shared/Select.module.scss new file mode 100644 index 0000000..9e1a20c --- /dev/null +++ b/src/components/shared/Select.module.scss @@ -0,0 +1,30 @@ +.select { + height: 40px; + line-height: 1.5; + width: 100%; + padding-left: 8px; + appearance: none; + background-color: var(--color-input-bg); + color: var(--color-text); + padding-right: 20px; + border-radius: 4px; + border: 1px solid var(--color-input-border); + background-image: url(data:image/svg+xml,%0A%20%20%20%20%3Csvg%20width%3D%228%22%20height%3D%2224%22%20viewBox%3D%220%200%208%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%207L7%2011H1L4%207Z%22%20fill%3D%22%23999999%22%20%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%2017L1%2013L7%2013L4%2017Z%22%20fill%3D%22%23999999%22%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20); + background-position: right 8px center; + background-repeat: no-repeat; +} + +.select:hover, +.select:focus { + border-color: rgb(52, 52, 52); + outline: none !important; + color: var(--color-text-highlight); + background-image: var(--select-bg-hover); +} +.select:focus { + box-shadow: rgba(66, 153, 225, 0.6) 0px 0px 0px 3px; +} + +.select option { + background-color: var(--color-background); +} diff --git a/src/components/shared/Select.tsx b/src/components/shared/Select.tsx index 376fb3c..de409cb 100644 --- a/src/components/shared/Select.tsx +++ b/src/components/shared/Select.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import s from './Select.module.css'; +import s from './Select.module.scss'; type Props = { options: Array; diff --git a/src/components/shared/Styled.module.css b/src/components/shared/Styled.module.css deleted file mode 100644 index 88b84ad..0000000 --- a/src/components/shared/Styled.module.css +++ /dev/null @@ -1,5 +0,0 @@ -.FlexCenter { - display: flex; - justify-content: center; - align-items: center; -} diff --git a/src/components/shared/Styled.module.scss b/src/components/shared/Styled.module.scss new file mode 100644 index 0000000..88b84ad --- /dev/null +++ b/src/components/shared/Styled.module.scss @@ -0,0 +1,5 @@ +.FlexCenter { + display: flex; + justify-content: center; + align-items: center; +} diff --git a/src/components/shared/Styled.tsx b/src/components/shared/Styled.tsx index ac2d04a..86d87ca 100644 --- a/src/components/shared/Styled.tsx +++ b/src/components/shared/Styled.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import s from './Styled.module.css'; +import s from './Styled.module.scss'; export function FlexCenter({ children }: { children: React.ReactNode }) { return
{children}
; diff --git a/src/components/shared/TextFitler.module.scss b/src/components/shared/TextFitler.module.scss new file mode 100644 index 0000000..7d7ba9b --- /dev/null +++ b/src/components/shared/TextFitler.module.scss @@ -0,0 +1,19 @@ +.input { + -webkit-appearance: none; + background-color: var(--color-input-bg); + background-image: none; + border-radius: 20px; + border: 1px solid var(--color-input-border); + box-sizing: border-box; + color: #c1c1c1; + display: inline-block; + font-size: inherit; + outline: none; + padding: 8px 15px; + transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + width: 100%; + + &:focus { + border: 1px solid var(--color-focus-blue); + } +} diff --git a/src/components/shared/TextFitler.tsx b/src/components/shared/TextFitler.tsx new file mode 100644 index 0000000..e4a4a88 --- /dev/null +++ b/src/components/shared/TextFitler.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; +import type { RecoilState } from 'recoil'; +import { useTextInut } from 'src/hooks/useTextInput'; + +import s from './TextFitler.module.scss'; + +export function TextFilter(props: { + textAtom: RecoilState; + placeholder?: string; +}) { + const [onChange, text] = useTextInut(props.textAtom); + return ( + + ); +} -- cgit v1.3.1