From 14888e01ebf7691f6b2c35ee42abee3ee55ca7bc Mon Sep 17 00:00:00 2001 From: LASER-Yi Date: Fri, 18 Mar 2022 13:40:00 +0800 Subject: Change all px unit to rem in scss files --- frontend/src/components/modals/ManualSearchModal.tsx | 20 ++++++++------------ frontend/src/styles/_custom-bootstrap.scss | 5 +++-- frontend/src/styles/_layout.scss | 10 +++++----- frontend/src/styles/_variables.scss | 4 ++-- frontend/src/styles/components/_chart.scss | 2 +- frontend/src/styles/components/_flat-card.scss | 2 +- frontend/src/styles/components/_header.scss | 2 +- frontend/src/styles/components/_notification.scss | 10 ++-------- frontend/src/styles/components/_search-modal.scss | 2 +- frontend/src/styles/components/_slider.scss | 6 +++--- 10 files changed, 27 insertions(+), 36 deletions(-) diff --git a/frontend/src/components/modals/ManualSearchModal.tsx b/frontend/src/components/modals/ManualSearchModal.tsx index 49c95ea5c..f1739ff69 100644 --- a/frontend/src/components/modals/ManualSearchModal.tsx +++ b/frontend/src/components/modals/ManualSearchModal.tsx @@ -10,6 +10,7 @@ import { faTimes, } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import clsx from "clsx"; import { FunctionComponent, useCallback, useMemo, useState } from "react"; import { Badge, @@ -128,19 +129,14 @@ export function ManualSearchModal( return Cannot get release info; } - const cls = [ - "release-container", - "d-flex", - "justify-content-between", - "align-items-center", - ]; - - if (value.length > 1) { - cls.push("release-multi"); - } - return ( -
setOpen((o) => !o)}> +
1 } + )} + onClick={() => setOpen((o) => !o)} + >
{value[0]} diff --git a/frontend/src/styles/_custom-bootstrap.scss b/frontend/src/styles/_custom-bootstrap.scss index 0c4335b9f..dc4fac3ef 100644 --- a/frontend/src/styles/_custom-bootstrap.scss +++ b/frontend/src/styles/_custom-bootstrap.scss @@ -7,8 +7,9 @@ $dark: #4f566f; .progress-bar { cursor: default; - text-shadow: -2px -2px 5px $primary, 2px -2px 5px $primary, - -2px 2px 5px $primary, 2px 2px 5px $primary; + text-shadow: -0.16rem -0.16rem 0.24rem $primary, + 0.16rem -0.16rem 0.24rem $primary, -0.16rem 0.16rem 0.24rem $primary, + 0.16rem 0.16rem 0.24rem $primary; overflow: visible; } diff --git a/frontend/src/styles/_layout.scss b/frontend/src/styles/_layout.scss index 9227aac35..c6a34f2c8 100644 --- a/frontend/src/styles/_layout.scss +++ b/frontend/src/styles/_layout.scss @@ -57,7 +57,7 @@ #{$side}: { color: rgba(0, 0, 0, 0.125); style: solid; - width: 1px; + width: 0.08rem; } } } @@ -92,13 +92,13 @@ $sidebar-active-color: #252833; span { font-size: 0.85rem; - letter-spacing: 0.5px; + letter-spacing: 0.04rem; } scrollbar-width: none; &::-webkit-scrollbar { - width: 0px; - height: 0px; + width: 0; + height: 0; } .title { @@ -112,7 +112,7 @@ $sidebar-active-color: #252833; top: 0; bottom: 0; left: 0; - width: 3px; + width: 0.1rem; z-index: 10; background-color: bs.$primary; } diff --git a/frontend/src/styles/_variables.scss b/frontend/src/styles/_variables.scss index 9ffa2a0e7..d67450e97 100644 --- a/frontend/src/styles/_variables.scss +++ b/frontend/src/styles/_variables.scss @@ -1,2 +1,2 @@ -$sidebar-width: 190px; -$header-height: 60px; +$sidebar-width: 12.6rem; +$header-height: 3.6rem; diff --git a/frontend/src/styles/components/_chart.scss b/frontend/src/styles/components/_chart.scss index e15f5d1f8..160e505b4 100644 --- a/frontend/src/styles/components/_chart.scss +++ b/frontend/src/styles/components/_chart.scss @@ -2,5 +2,5 @@ .chart-container { height: calc(100vh - #{vars.$header-height}); - padding-bottom: 12px; + padding-bottom: 0.6rem; } diff --git a/frontend/src/styles/components/_flat-card.scss b/frontend/src/styles/components/_flat-card.scss index 11b51257e..26f22743f 100644 --- a/frontend/src/styles/components/_flat-card.scss +++ b/frontend/src/styles/components/_flat-card.scss @@ -3,7 +3,7 @@ .settings-card { cursor: pointer; - min-height: 85px; + min-height: 5.4rem; transition: { duration: 0.2s; diff --git a/frontend/src/styles/components/_header.scss b/frontend/src/styles/components/_header.scss index 8fc143f01..65e3f0274 100644 --- a/frontend/src/styles/components/_header.scss +++ b/frontend/src/styles/components/_header.scss @@ -13,7 +13,7 @@ border: none; border-bottom: { color: white !important; - width: 1px !important; + width: 0.08rem !important; style: solid !important; } background-color: transparent; diff --git a/frontend/src/styles/components/_notification.scss b/frontend/src/styles/components/_notification.scss index 484f97d8d..4690f0b97 100644 --- a/frontend/src/styles/components/_notification.scss +++ b/frontend/src/styles/components/_notification.scss @@ -8,8 +8,8 @@ background-color: red; content: ""; border-radius: 50%; - height: 6px; - width: 6px; + height: 0.4rem; + width: 0.4rem; right: 10%; top: 10%; } @@ -30,12 +30,6 @@ word-wrap: break-word; white-space: normal; } - - .progress .progress-bar { - text-shadow: -2px -2px 5px bs.$primary, 2px -2px 5px bs.$primary, - -2px 2px 5px bs.$primary, 2px 2px 5px bs.$primary; - overflow: visible; - } } .notification-center-notification { diff --git a/frontend/src/styles/components/_search-modal.scss b/frontend/src/styles/components/_search-modal.scss index 91c35b3d7..3c3c7409c 100644 --- a/frontend/src/styles/components/_search-modal.scss +++ b/frontend/src/styles/components/_search-modal.scss @@ -2,7 +2,7 @@ flex-wrap: nowrap; overflow: hidden; .text-container { - max-width: 500px; + max-width: 36rem; .release-text { text-overflow: ellipsis; overflow-wrap: break-word; diff --git a/frontend/src/styles/components/_slider.scss b/frontend/src/styles/components/_slider.scss index 76c02d128..042a64787 100644 --- a/frontend/src/styles/components/_slider.scss +++ b/frontend/src/styles/components/_slider.scss @@ -8,12 +8,12 @@ cursor: pointer; } .rc-slider-handle { - border: 3px solid bs.$primary; + border: 0.2rem solid bs.$primary; margin-top: 0; top: 50%; transform: translate(-50%, -50%) !important; - width: 18px; - height: 18px; + width: 1.2rem; + height: 1.2rem; cursor: pointer; .rc-slider-handle-tips-always { -- cgit v1.2.3