css

3 years ago · 91cc2e96e3
11 changed files with 161 additions and 320 deletions
--- a/src/pages/account/center/components/ArticleListContent/index.style.ts
+++ b/src/pages/account/center/components/ArticleListContent/index.style.ts
@ -2,24 +2,15 @@ import { createStyles } from "antd-style";

 const useStyles = createStyles(({ token }) => {
  return {
-    listContent: {},
+    listContent: {
+      [`@media screen and (max-width: ${token.screenXS}px)`]: {},
+    },
    description: {
      maxWidth: "720px",
      lineHeight: "22px",
    },
    extra: {
-      marginTop: "16px",
-      color: token.colorTextSecondary,
-      lineHeight: "22px",
-      "& > em": {
-        marginLeft: "16px",
-        color: token.colorTextDisabled,
-        fontStyle: "normal",
-      },
-    },
-    [`@media screen and (max-width: ${token.screenXS})`]: {
-      listContent: {},
-      extra: {
+      [`@media screen and (max-width: ${token.screenXS}px)`]: {
        "& > em": {
          display: "block",
          marginTop: "8px",
--- a/src/pages/account/settings/components/BaseView.style.ts
+++ b/src/pages/account/settings/components/BaseView.style.ts
@ -1,58 +1,51 @@
-import { createStyles } from 'antd-style';
+import { createStyles } from "antd-style";

 const useStyles = createStyles(({ token }) => {
  return {
    baseView: {
-      display: 'flex',
-      paddingTop: '12px',
+      [`@media screen and (max-width: ${token.screenXL}px)`]: {
+        flexDirection: "column-reverse",
+      },
    },
-    '.ant-legacy-form-item .ant-legacy-form-item-control-wrapper': {
-      width: '100%',
+    ".ant-legacy-form-item .ant-legacy-form-item-control-wrapper": {
+      width: "100%",
    },
    left: {
-      minWidth: '224px',
-      maxWidth: '448px',
+      minWidth: "224px",
+      maxWidth: "448px",
    },
    right: {
-      flex: '1',
-      paddingLeft: '104px',
+      [`@media screen and (max-width: ${token.screenXL}px)`]: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        maxWidth: "448px",
+        padding: "20px",
+      },
    },
    avatar_title: {
-      height: '22px',
-      marginBottom: '8px',
-      color: token.colorTextHeading,
-      fontSize: token.fontSize,
-      lineHeight: '22px',
+      [`@media screen and (max-width: ${token.screenXL}px)`]: {
+        display: "none",
+      },
    },
    avatar: {
-      width: '144px',
-      height: '144px',
-      marginBottom: '12px',
-      overflow: 'hidden',
+      width: "144px",
+      height: "144px",
+      marginBottom: "12px",
+      overflow: "hidden",
    },
    img: {
-      width: '100%',
+      width: "100%",
    },
    button_view: {
-      width: '144px',
-      textAlign: 'center',
+      width: "144px",
+      textAlign: "center",
    },
    area_code: {
-      width: '72px',
+      width: "72px",
    },
    phone_number: {
-      width: '214px',
-    },
-    [`@media screen and (max-width: ${token.screenXL})`]: {
-      baseView: { flexDirection: 'column-reverse' },
-      right: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        maxWidth: '448px',
-        padding: '20px',
-      },
-      avatar_title: { display: 'none' },
+      width: "214px",
    },
  };
 });
--- a/src/pages/account/settings/style.style.ts
+++ b/src/pages/account/settings/style.style.ts
@ -3,16 +3,15 @@ import { createStyles } from "antd-style";
 const useStyles = createStyles(({ token }) => {
  return {
    main: {
-      display: "flex",
-      width: "100%",
-      height: "100%",
-      paddingTop: "16px",
-      paddingBottom: "16px",
-      backgroundColor: token.colorBgContainer,
+      [`@media screen and (max-width: ${token.screenMD}px)`]: {
+        flexDirection: "column",
+      },
    },
    leftMenu: {
-      width: "224px",
-      borderRight: `${token.lineWidth} ${token.borderStyle} ${token.colorSplit}`,
+      [`@media screen and (max-width: ${token.screenMD}px)`]: {
+        width: "100%",
+        border: "none",
+      },
    },
    ".ant-menu-inline": {
      border: "none",
@ -21,8 +20,9 @@ const useStyles = createStyles(({ token }) => {
      fontWeight: "bold",
    },
    right: {
-      flex: "1",
-      padding: "8px 40px",
+      [`@media screen and (max-width: ${token.screenMD}px)`]: {
+        padding: "40px",
+      },
    },
    title: {
      marginBottom: "12px",
@ -70,11 +70,6 @@ const useStyles = createStyles(({ token }) => {
    "font.weak": {
      color: token.colorError,
    },
-    [`@media screen and (max-width: ${token.screenMD})`]: {
-      main: { flexDirection: "column" },
-      leftMenu: { width: "100%", border: "none" },
-      right: { padding: "40px" },
-    },
  };
 });

--- a/src/pages/dashboard/analysis/style.style.ts
+++ b/src/pages/dashboard/analysis/style.style.ts
@ -11,22 +11,10 @@ const useStyles = createStyles(({ token }) => {
      "&:hover": { color: token.colorText },
    },
    rankingList: {
-      margin: "25px 0 0",
-      padding: "0",
-      listStyle: "none",
+      [`@media screen and (max-width: ${token.screenLG}px)`]: {},
    },
    li: {
-      display: "flex",
-      alignItems: "center",
-      marginTop: "16px",
-      zoom: "1",
-      "&::before, &::after": { display: "table", content: "' '" },
-      "&::after": {
-        clear: "both",
-        height: "0",
-        fontSize: "0",
-        visibility: "hidden",
-      },
+      [`@media screen and (max-width: ${token.screenLG}px)`]: {},
    },
    span: {
      color: token.colorText,
@ -58,8 +46,9 @@ const useStyles = createStyles(({ token }) => {
      textOverflow: "ellipsis",
    },
    salesExtra: {
-      display: "inline-block",
-      marginRight: "24px",
+      [`@media screen and (max-width: ${token.screenLG}px)`]: {
+        display: "none",
+      },
    },
    a: {
      marginLeft: "24px",
@ -69,9 +58,13 @@ const useStyles = createStyles(({ token }) => {
    currentDate: {
      color: token.colorPrimary,
    },
-    salesCard: {},
+    salesCard: {
+      [`@media screen and (max-width: ${token.screenSM}px)`]: {},
+    },
    salesBar: {
-      padding: "0 0 32px 32px",
+      [`@media screen and (max-width: ${token.screenMD}px)`]: {
+        padding: "16px",
+      },
    },
    salesRank: {
      padding: "0 32px 32px 72px",
@ -128,21 +121,25 @@ const useStyles = createStyles(({ token }) => {
      marginLeft: "8px",
      color: token.colorTextHeading,
    },
-    [`@media screen and (max-width: ${token.screenLG})`]: {
-      salesExtra: { display: "none" },
-      rankingList: {},
-      li: {},
-      "span:first-child": { marginRight: "8px" },
-    },
-    [`@media screen and (max-width: ${token.screenMD})`]: {
-      rankingTitle: { marginTop: "16px" },
-      salesCard: { padding: "16px" },
-      salesBar: { padding: "16px" },
-    },
-    [`@media screen and (max-width: ${token.screenSM})`]: {
-      salesExtraWrap: { display: "none" },
-      salesCard: {},
-      ".ant-tabs-content": { paddingTop: "30px" },
+    "span:first-child": {
+      [`@media screen and (max-width: ${token.screenLG}px)`]: {
+        marginRight: "8px",
+      },
+    },
+    rankingTitle: {
+      [`@media screen and (max-width: ${token.screenMD}px)`]: {
+        marginTop: "16px",
+      },
+    },
+    salesExtraWrap: {
+      [`@media screen and (max-width: ${token.screenSM}px)`]: {
+        display: "none",
+      },
+    },
+    ".ant-tabs-content": {
+      [`@media screen and (max-width: ${token.screenSM}px)`]: {
+        paddingTop: "30px",
+      },
    },
  };
 });
--- a/src/pages/dashboard/monitor/style.style.ts
+++ b/src/pages/dashboard/monitor/style.style.ts
@ -3,17 +3,15 @@ import { createStyles } from "antd-style";
 const useStyles = createStyles(({ token }) => {
  return {
    mapChart: {
-      height: "452px",
-      paddingTop: "24px",
+      [`@media screen and (max-width: ${token.screenLG}px)`]: {
+        height: "auto",
+      },
    },
    img: {
      display: "inline-block",
      maxWidth: "100%",
      maxHeight: "437px",
    },
-    [`@media screen and (max-width: ${token.screenLG})`]: {
-      mapChart: { height: "auto" },
-    },
  };
 });

--- a/src/pages/dashboard/workplace/style.style.ts
+++ b/src/pages/dashboard/workplace/style.style.ts
@ -12,7 +12,9 @@ const useStyles = createStyles(({ token }) => {
      fontWeight: "normal",
    },
    pageHeaderContent: {
-      display: "flex",
+      [`@media screen and (max-width: ${token.screenSM}px)`]: {
+        display: "block",
+      },
    },
    avatar: {
      flex: "0 1 72px",
@ -24,12 +26,9 @@ const useStyles = createStyles(({ token }) => {
      },
    },
    content: {
-      position: "relative",
-      top: "4px",
-      flex: "1 1 auto",
-      marginLeft: "24px",
-      color: token.colorTextSecondary,
-      lineHeight: "22px",
+      [`@media screen and (max-width: ${token.screenSM}px)`]: {
+        marginLeft: "0",
+      },
    },
    contentTitle: {
      marginBottom: "12px",
@ -39,36 +38,10 @@ const useStyles = createStyles(({ token }) => {
      lineHeight: "28px",
    },
    extraContent: {
-      zoom: "1",
-      "&::before, &::after": { display: "table", content: "' '" },
-      "&::after": {
-        clear: "both",
-        height: "0",
-        fontSize: "0",
-        visibility: "hidden",
-      },
-      float: "right",
-      whiteSpace: "nowrap",
+      [`@media screen and (max-width: ${token.screenSM}px)`]: {},
    },
    statItem: {
-      position: "relative",
-      display: "inline-block",
-      padding: "0 32px",
-      "&::after": {
-        position: "absolute",
-        top: "8px",
-        right: "0",
-        width: "1px",
-        height: "40px",
-        backgroundColor: token.colorSplit,
-        content: "''",
-      },
-      "&:last-child": {
-        paddingRight: "0",
-        "&::after": {
-          display: "none",
-        },
-      },
+      [`@media screen and (max-width: ${token.screenSM}px)`]: { float: "none" },
    },
    "> p:first-child": {
      marginBottom: "4px",
@ -86,7 +59,11 @@ const useStyles = createStyles(({ token }) => {
      color: token.colorTextSecondary,
      fontSize: "20px",
    },
-    members: {},
+    members: {
+      [`@media screen and (max-width: ${token.screenLG}px)`]: {
+        marginBottom: "0",
+      },
+    },
    a: {
      display: "inline-block",
      flex: "1 1 0",
@ -123,7 +100,9 @@ const useStyles = createStyles(({ token }) => {
      lineHeight: "24px",
      verticalAlign: "top",
    },
-    projectList: {},
+    projectList: {
+      [`@media screen and (max-width: ${token.screenXS}px)`]: {},
+    },
    ".ant-card-meta-description": {
      height: "44px",
      overflow: "hidden",
@ -134,7 +113,7 @@ const useStyles = createStyles(({ token }) => {
      fontSize: "0",
    },
    projectGrid: {
-      width: "33.33%",
+      [`@media screen and (max-width: ${token.screenXS}px)`]: { width: "100%" },
    },
    projectItemContent: {
      display: "flex",
@ -169,40 +148,11 @@ const useStyles = createStyles(({ token }) => {
    datetime: {
      color: token.colorTextDisabled,
    },
-    [`@media screen and (max-width: ${token.screenXL}) and (min-width: @screen-lg)`]:
-      {
-        activeCard: { marginBottom: "24px" },
-        members: { marginBottom: "0" },
-        extraContent: { marginLeft: "-44px" },
-        statItem: { padding: "0 16px" },
-      },
-    [`@media screen and (max-width: ${token.screenLG})`]: {
-      activeCard: { marginBottom: "24px" },
-      members: { marginBottom: "0" },
-      extraContent: { float: "none", marginRight: "0" },
-      statItem: {
-        padding: "0 16px",
-        textAlign: "left",
-        "&::after": {
-          display: "none",
-        },
+    activeCard: {
+      [`@media screen and (max-width: ${token.screenLG}px)`]: {
+        marginBottom: "24px",
      },
    },
-    [`@media screen and (max-width: ${token.screenMD})`]: {
-      extraContent: { marginLeft: "-16px" },
-      projectList: {},
-      projectGrid: { width: "50%" },
-    },
-    [`@media screen and (max-width: ${token.screenSM})`]: {
-      pageHeaderContent: { display: "block" },
-      content: { marginLeft: "0" },
-      extraContent: {},
-      statItem: { float: "none" },
-    },
-    [`@media screen and (max-width: ${token.screenXS})`]: {
-      projectList: {},
-      projectGrid: { width: "100%" },
-    },
  };
 });

--- a/src/pages/list/basic-list/style.style.ts
+++ b/src/pages/list/basic-list/style.style.ts
@ -2,13 +2,16 @@ import { createStyles } from "antd-style";

 const useStyles = createStyles(({ token }) => {
  return {
-    standardList: {},
+    standardList: {
+      "@media screen and (max-width: 1400px)": {},
+    },
    ".ant-card-head": {
      borderBottom: "none",
    },
    ".ant-card-head-title": {
-      padding: "24px 0",
-      lineHeight: "32px",
+      [`@media screen and (max-width: ${token.screenXS}px)`]: {
+        overflow: "visible",
+      },
    },
    ".ant-card-extra": {
      padding: "24px 0",
@ -23,32 +26,20 @@ const useStyles = createStyles(({ token }) => {
      lineHeight: "48px",
    },
    headerInfo: {
-      position: "relative",
-      textAlign: "center",
-      "& > span": {
-        display: "inline-block",
-        marginBottom: "4px",
-        color: token.colorTextSecondary,
-        fontSize: token.fontSize,
-        lineHeight: "22px",
-      },
-      "& > p": {
-        margin: "0",
-        color: token.colorTextHeading,
-        fontSize: "24px",
-        lineHeight: "32px",
-      },
-      "& > em": {
-        position: "absolute",
-        top: "0",
-        right: "0",
-        width: "1px",
-        height: "56px",
-        backgroundColor: token.colorSplit,
+      [`@media screen and (max-width: ${token.screenSM}px)`]: {
+        marginBottom: "16px",
+        "& > em": {
+          display: "none",
+        },
      },
    },
    listContent: {
-      fontSize: "0",
+      "@media screen and (max-width: 1400px)": {
+        textAlign: "right",
+        "& > div:last-child": {
+          top: "0",
+        },
+      },
    },
    listContentItem: {
      display: "inline-block",
@ -66,81 +57,30 @@ const useStyles = createStyles(({ token }) => {
      lineHeight: "22px",
    },
    extraContentSearch: {
-      width: "272px",
-      marginLeft: "16px",
+      [`@media screen and (max-width: ${token.screenSM}px)`]: {
+        width: "100%",
+        marginLeft: "0",
+      },
    },
-    [`@media screen and (max-width: ${token.screenXS})`]: {
-      standardList: {},
-      ".ant-list-item-content": {
+    ".ant-list-item-content": {
+      [`@media screen and (max-width: ${token.screenXS}px)`]: {
        display: "block",
        flex: "none",
        width: "100%",
      },
-      ".ant-list-item-action": { marginLeft: "0" },
-      listContent: {
-        marginLeft: "0",
-        "& > div": {
-          marginLeft: "0",
-        },
-      },
-      listCard: {},
-      ".ant-card-head-title": { overflow: "visible" },
    },
-    [`@media screen and (max-width: ${token.screenSM})`]: {
-      standardList: {},
-      extraContentSearch: { width: "100%", marginLeft: "0" },
-      headerInfo: {
-        marginBottom: "16px",
-        "& > em": {
-          display: "none",
-        },
+    ".ant-list-item-action": {
+      [`@media screen and (max-width: ${token.screenXS}px)`]: {
+        marginLeft: "0",
      },
    },
-    [`@media screen and (max-width: ${token.screenMD})`]: {
-      standardList: {},
-      listContent: {
-        "& > div": {
-          display: "block",
-        },
-        "& > div:last-child": {
-          top: "0",
-          width: "100%",
-        },
-      },
-      listCard: {},
-      ".ant-radio-group": { display: "block", marginBottom: "8px" },
-    },
-    [`@media screen and (max-width: ${token.screenLG}) and (min-width: @screen-md)`]:
-      {
-        standardList: {},
-        listContent: {
-          "& > div": {
-            display: "block",
-          },
-          "& > div:last-child": {
-            top: "0",
-            width: "100%",
-          },
-        },
-      },
-    [`@media screen and (max-width: ${token.screenXL})`]: {
-      standardList: {},
-      listContent: {
-        "& > div": {
-          marginLeft: "24px",
-        },
-        "& > div:last-child": {
-          top: "0",
-        },
-      },
+    listCard: {
+      [`@media screen and (max-width: ${token.screenMD}px)`]: {},
    },
-    "@media screen and (max-width: 1400px)": {
-      standardList: {},
-      listContent: {
-        textAlign: "right",
-        "& > div:last-child": {
-          top: "0",
-        },
+    ".ant-radio-group": {
+      [`@media screen and (max-width: ${token.screenMD}px)`]: {
+        display: "block",
+        marginBottom: "8px",
      },
    },
    standardListForm: {},
--- a/src/pages/list/card-list/style.style.ts
+++ b/src/pages/list/card-list/style.style.ts
@ -23,13 +23,14 @@ const useStyles = createStyles(({ token }) => {
      maxWidth: "100%",
    },
    extraImg: {
-      width: "155px",
-      marginTop: "-20px",
-      textAlign: "center",
+      [`@media screen and (max-width: ${token.screenMD}px)`]: {
+        display: "none",
+      },
    },
    img: {
-      marginRight: "8px",
-      verticalAlign: "middle",
+      [`@media screen and (max-width: ${token.screenSM}px)`]: {
+        marginRight: "4px",
+      },
    },
    newButton: {
      width: "100%",
@ -50,31 +51,22 @@ const useStyles = createStyles(({ token }) => {
      wordBreak: "break-all",
    },
    pageHeaderContent: {
-      position: "relative",
+      [`@media screen and (max-width: ${token.screenSM}px)`]: {
+        paddingBottom: "30px",
+      },
    },
    contentLink: {
-      marginTop: "16px",
-    },
-    a: {
-      marginRight: "32px",
-    },
-    [`@media screen and (max-width: ${token.screenLG})`]: {
-      contentLink: {},
-      a: { marginRight: "16px" },
-    },
-    [`@media screen and (max-width: ${token.screenMD})`]: {
-      extraImg: { display: "none" },
-    },
-    [`@media screen and (max-width: ${token.screenSM})`]: {
-      pageHeaderContent: { paddingBottom: "30px" },
-      contentLink: {
+      [`@media screen and (max-width: ${token.screenSM}px)`]: {
        position: "absolute",
        bottom: "-4px",
        left: "0",
        width: "1000px",
      },
-      a: { marginRight: "16px" },
-      img: { marginRight: "4px" },
+    },
+    a: {
+      [`@media screen and (max-width: ${token.screenSM}px)`]: {
+        marginRight: "16px",
+      },
    },
  };
 });
--- a/src/pages/list/search/articles/components/ArticleListContent/index.style.ts
+++ b/src/pages/list/search/articles/components/ArticleListContent/index.style.ts
@ -2,24 +2,15 @@ import { createStyles } from "antd-style";

 const useStyles = createStyles(({ token }) => {
  return {
-    listContent: {},
+    listContent: {
+      [`@media screen and (max-width: ${token.screenXS}px)`]: {},
+    },
    description: {
      maxWidth: "720px",
      lineHeight: "22px",
    },
    extra: {
-      marginTop: "16px",
-      color: token.colorTextSecondary,
-      lineHeight: "22px",
-      "& > em": {
-        marginLeft: "16px",
-        color: token.colorTextDisabled,
-        fontStyle: "normal",
-      },
-    },
-    [`@media screen and (max-width: ${token.screenXS})`]: {
-      listContent: {},
-      extra: {
+      [`@media screen and (max-width: ${token.screenXS}px)`]: {
        "& > em": {
          display: "block",
          marginTop: "8px",
--- a/src/pages/list/search/articles/style.style.ts
+++ b/src/pages/list/search/articles/style.style.ts
@ -6,20 +6,16 @@ const useStyles = createStyles(({ token }) => {
      color: token.colorTextHeading,
    },
    listItemExtra: {
-      width: "272px",
-      height: "1px",
+      [`@media screen and (max-width: ${token.screenLG}px)`]: {
+        width: "0",
+        height: "1px",
+      },
    },
    selfTrigger: {
-      marginLeft: "12px",
-    },
-    [`@media screen and (max-width: ${token.screenXS})`]: {
-      selfTrigger: { display: "block", marginLeft: "0" },
-    },
-    [`@media screen and (max-width: ${token.screenMD})`]: {
-      selfTrigger: { display: "block", marginLeft: "0" },
-    },
-    [`@media screen and (max-width: ${token.screenLG})`]: {
-      listItemExtra: { width: "0", height: "1px" },
+      [`@media screen and (max-width: ${token.screenMD}px)`]: {
+        display: "block",
+        marginLeft: "0",
+      },
    },
  };
 });
--- a/src/pages/profile/advanced/style.style.ts
+++ b/src/pages/profile/advanced/style.style.ts
@ -13,17 +13,15 @@ const useStyles = createStyles(({ token }) => {
      marginBottom: "4px",
    },
    stepDescription: {
-      position: "relative",
-      left: "38px",
-      paddingTop: "8px",
-      fontSize: "14px",
-      textAlign: "left",
+      [`@media screen and (max-width: ${token.screenSM}px)`]: { left: "8px" },
    },
    "> div": {
      marginTop: "8px",
      marginBottom: "4px",
    },
-    pageHeader: {},
+    pageHeader: {
+      [`@media screen and (max-width: ${token.screenSM}px)`]: {},
+    },
    ".ant-page-header-heading-extra > * + *": {
      marginLeft: "8px",
    },
@ -32,10 +30,10 @@ const useStyles = createStyles(({ token }) => {
      justifyContent: "space-between",
      width: "200px",
    },
-    [`@media screen and (max-width: ${token.screenSM})`]: {
-      stepDescription: { left: "8px" },
-      pageHeader: {},
-      ".ant-pro-page-header-wrap-row": { flexDirection: "column" },
+    ".ant-pro-page-header-wrap-row": {
+      [`@media screen and (max-width: ${token.screenSM}px)`]: {
+        flexDirection: "column",
+      },
    },
  };
 });