From f14b8fc079737ca2c27c1fd27d418917440f0e24 Mon Sep 17 00:00:00 2001 From: Haoyu Xu Date: Tue, 14 Mar 2023 13:20:58 -0400 Subject: [PATCH] refactor(aklive2d): use scss, stylelint, and postcss --- .postcssrc.json | 6 + .stylelintrc.json | 3 + directory/Version | 2 +- directory/src/App.css | 25 +- directory/src/component/dropdown.css | 107 -- directory/src/component/dropdown.jsx | 18 +- directory/src/component/dropdown.module.scss | 111 +++ directory/src/component/main_border.css | 23 - directory/src/component/main_border.jsx | 4 +- .../src/component/main_border.module.scss | 22 + directory/src/component/popup.css | 102 -- directory/src/component/popup.jsx | 18 +- directory/src/component/popup.module.scss | 94 ++ directory/src/component/return_button.css | 50 - directory/src/component/return_button.jsx | 37 +- .../src/component/return_button.module.scss | 46 + directory/src/component/switch.css | 62 -- directory/src/component/switch.jsx | 12 +- directory/src/component/switch.module.scss | 60 ++ directory/src/routes/path/operator.jsx | 15 +- directory/src/routes/root.css | 6 +- directory/src/routes/root.jsx | 2 + package.json | 6 + pnpm-lock.yaml | 914 +++++++++++++++++- 24 files changed, 1326 insertions(+), 419 deletions(-) create mode 100644 .postcssrc.json create mode 100644 .stylelintrc.json delete mode 100644 directory/src/component/dropdown.css create mode 100644 directory/src/component/dropdown.module.scss delete mode 100644 directory/src/component/main_border.css create mode 100644 directory/src/component/main_border.module.scss delete mode 100644 directory/src/component/popup.css create mode 100644 directory/src/component/popup.module.scss delete mode 100644 directory/src/component/return_button.css create mode 100644 directory/src/component/return_button.module.scss delete mode 100644 directory/src/component/switch.css create mode 100644 directory/src/component/switch.module.scss diff --git a/.postcssrc.json b/.postcssrc.json new file mode 100644 index 0000000..0452220 --- /dev/null +++ b/.postcssrc.json @@ -0,0 +1,6 @@ +{ + "map": true, + "plugins": { + "autoprefixer": {} + } +} diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 0000000..eff2560 --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "stylelint-config-standard-scss" +} diff --git a/directory/Version b/directory/Version index 492b167..e92964f 100644 --- a/directory/Version +++ b/directory/Version @@ -1 +1 @@ -1.0.12 \ No newline at end of file +1.0.17 \ No newline at end of file diff --git a/directory/src/App.css b/directory/src/App.css index 57c1de6..920b6ba 100644 --- a/directory/src/App.css +++ b/directory/src/App.css @@ -1,26 +1,25 @@ -@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap'); -@import url('https://fonts.cdnfonts.com/css/bender'); -@import url('https://fonts.cdnfonts.com/css/geometos'); +@import 'https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap'; +@import 'https://fonts.cdnfonts.com/css/bender'; +@import 'https://fonts.cdnfonts.com/css/geometos'; :root { - --text-color: rgba(255, 255, 255, 0.87); + --text-color: rgba(255 255 255 87%); --text-color-full: #fff; --secondary-text-color: #686a72; - --date-color: rgba(255, 255, 255, 0.2); + --date-color: rgba(255 255 255 20%); --border-color: #707070; --link-highlight-color: #33b5e5; - --drawer-background-color: rgba(0, 0, 0, 0.88); + --drawer-background-color: rgba(0 0 0 88%); --root-background-color: #131313; - --home-item-hover-background-color: rgba(67, 67, 67, 0.3); - --home-item-background-linear-gradient-color: rgba(255, 255, 255, 0.1); - --home-item-outline-color: rgba(214, 214, 214, 0.3); + --home-item-hover-background-color: rgba(67 67 67 30%); + --home-item-background-linear-gradient-color: rgba(255 255 255 10%); + --home-item-outline-color: rgba(214 214 214 30%); --button-color: #666; - font-family: "Geometos", "Noto Sans SC", sans-serif; + font-family: Geometos, "Noto Sans SC", sans-serif; font-size: 16px; line-height: 1.2em; font-weight: 400; - color: var(--text-color); background-color: var(--root-background-color); min-height: 100vh; @@ -28,9 +27,7 @@ #root { display: flex; - flex-direction: column; - flex-wrap: nowrap; - align-content: flex-start; + flex-flow: column nowrap; justify-content: flex-start; align-items: stretch; min-height: 100vh; diff --git a/directory/src/component/dropdown.css b/directory/src/component/dropdown.css deleted file mode 100644 index 726a5a5..0000000 --- a/directory/src/component/dropdown.css +++ /dev/null @@ -1,107 +0,0 @@ -.dropdown { - position: relative; - display: inline-block; - user-select: none; - z-index: 2; - padding: 0.5rem; - cursor: pointer; -} - -.dropdown .text { - display: flex; - flex-direction: row; - align-items: center; -} - -.dropdown .content { - padding-right: 0.5rem; -} - -.dropdown .icon { - position: absolute; - bottom: 0.5rem; - right: -0.1rem; - width: 0.5em; - height: 0.5em; - display: inline-block; - vertical-align: middle; - border-left: 0.15em solid var(--text-color); - border-bottom: 0.15em solid var(--text-color); - border-right: 0.15em solid var(--text-color); - border-top: 0.15em solid var(--text-color); - transform: translate(0, -0.15em) rotate(-45deg); -} - -.dropdown.active .icon, -.dropdown:hover .icon { - animation: icon-flash 2s cubic-bezier(0.65, 0.05, 0.36, 1) infinite; -} - -.dropdown .menu { - opacity: 0; - position: absolute; - background-color: var(--root-background-color); - width: max-content; - z-index: -1; - top: 2rem; - right: 0; - gap: 0.5rem; - display: flex; - align-items: center; - flex-direction: column; - flex-wrap: nowrap; - transition: all cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s; - overflow: hidden; - padding: 0.5rem; - border: 1px solid var(--border-color); - visibility: hidden; - color: var(--link-highlight-color); -} - -.dropdown.active .menu { - visibility: visible; - opacity: 1; - z-index: 2; -} - -.dropdown .menu .item { - cursor: pointer; - padding: 0.5rem; - font-size: 1rem; - width: max-content; - height: max-content; - cursor: pointer; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - flex-wrap: nowrap; - transition: color cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s; -} - -.dropdown .menu .item:hover .text, -.dropdown .menu .item:focus .text, -.dropdown .menu .item.active .text { - color: currentColor; -} - -.dropdown .text { - color: var(--text-color); -} - -.dropdown .overlay { - z-index: 1; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: 100vw; - height: 100vh; -} - -@keyframes icon-flash { - 50% { - opacity: 0.2; - } -} \ No newline at end of file diff --git a/directory/src/component/dropdown.jsx b/directory/src/component/dropdown.jsx index 4240751..4adb0a6 100644 --- a/directory/src/component/dropdown.jsx +++ b/directory/src/component/dropdown.jsx @@ -2,7 +2,7 @@ import React, { useState } from 'react' import PropTypes from 'prop-types'; -import './dropdown.css' +import classes from './dropdown.module.scss' export default function Dropdown(props) { const [hidden, setHidden] = useState(true) @@ -13,34 +13,34 @@ export default function Dropdown(props) { return ( <> -
+
toggleDropdown()} > - {props.text} - + {props.text} +
-
    +
      { props.menu.map((item) => { return (
    • { props.onClick(item) toggleDropdown() }} > -
      {item.name}
      +
      {item.name}
    • ) }) }