css

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",
+      [`@media screen and (max-width: ${token.screenXS}px)`]: {
-      color: token.colorTextSecondary,
-      lineHeight: "22px",
-      "& > em": {
-        marginLeft: "16px",
-        color: token.colorTextDisabled,
-        fontStyle: "normal",
-      },
-    },
-    [`@media screen and (max-width: ${token.screenXS})`]: {
-      listContent: {},
-      extra: {
         "& > em": {
           display: "block",
           marginTop: "8px",

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',
+      [`@media screen and (max-width: ${token.screenXL}px)`]: {
-      paddingTop: '12px',
+        flexDirection: "column-reverse",
+      },
     },
-    '.ant-legacy-form-item .ant-legacy-form-item-control-wrapper': {
+    ".ant-legacy-form-item .ant-legacy-form-item-control-wrapper": {
-      width: '100%',
+      width: "100%",
     },
     left: {
-      minWidth: '224px',
+      minWidth: "224px",
-      maxWidth: '448px',
+      maxWidth: "448px",
     },
     right: {
-      flex: '1',
+      [`@media screen and (max-width: ${token.screenXL}px)`]: {
-      paddingLeft: '104px',
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        maxWidth: "448px",
+        padding: "20px",
+      },
     },
     avatar_title: {
-      height: '22px',
+      [`@media screen and (max-width: ${token.screenXL}px)`]: {
-      marginBottom: '8px',
+        display: "none",
-      color: token.colorTextHeading,
+      },
-      fontSize: token.fontSize,
-      lineHeight: '22px',
     },
     avatar: {
-      width: '144px',
+      width: "144px",
-      height: '144px',
+      height: "144px",
-      marginBottom: '12px',
+      marginBottom: "12px",
-      overflow: 'hidden',
+      overflow: "hidden",
     },
     img: {
-      width: '100%',
+      width: "100%",
     },
     button_view: {
-      width: '144px',
+      width: "144px",
-      textAlign: 'center',
+      textAlign: "center",
     },
     area_code: {
-      width: '72px',
+      width: "72px",
     },
     phone_number: {
-      width: '214px',
+      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' },
     },
   };
 });

src/pages/account/settings/style.style.ts

@@ -3,16 +3,15 @@ import { createStyles } from "antd-style";
 const useStyles = createStyles(({ token }) => {
   return {
     main: {
-      display: "flex",
+      [`@media screen and (max-width: ${token.screenMD}px)`]: {
-      width: "100%",
+        flexDirection: "column",
-      height: "100%",
+      },
-      paddingTop: "16px",
-      paddingBottom: "16px",
-      backgroundColor: token.colorBgContainer,
     },
     leftMenu: {
-      width: "224px",
+      [`@media screen and (max-width: ${token.screenMD}px)`]: {
-      borderRight: `${token.lineWidth} ${token.borderStyle} ${token.colorSplit}`,
+        width: "100%",
+        border: "none",
+      },
     },
     ".ant-menu-inline": {
       border: "none",
@@ -21,8 +20,9 @@ const useStyles = createStyles(({ token }) => {
       fontWeight: "bold",
     },
     right: {
-      flex: "1",
+      [`@media screen and (max-width: ${token.screenMD}px)`]: {
-      padding: "8px 40px",
+        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" },
-    },
   };
 });
 

src/pages/dashboard/analysis/style.style.ts

@@ -11,22 +11,10 @@ const useStyles = createStyles(({ token }) => {
       "&:hover": { color: token.colorText },
     },
     rankingList: {
-      margin: "25px 0 0",
+      [`@media screen and (max-width: ${token.screenLG}px)`]: {},
-      padding: "0",
-      listStyle: "none",
     },
     li: {
-      display: "flex",
+      [`@media screen and (max-width: ${token.screenLG}px)`]: {},
-      alignItems: "center",
-      marginTop: "16px",
-      zoom: "1",
-      "&::before, &::after": { display: "table", content: "' '" },
-      "&::after": {
-        clear: "both",
-        height: "0",
-        fontSize: "0",
-        visibility: "hidden",
-      },
     },
     span: {
       color: token.colorText,
@@ -58,8 +46,9 @@ const useStyles = createStyles(({ token }) => {
       textOverflow: "ellipsis",
     },
     salesExtra: {
-      display: "inline-block",
+      [`@media screen and (max-width: ${token.screenLG}px)`]: {
-      marginRight: "24px",
+        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})`]: {
+    "span:first-child": {
-      salesExtra: { display: "none" },
+      [`@media screen and (max-width: ${token.screenLG}px)`]: {
-      rankingList: {},
+        marginRight: "8px",
-      li: {},
+      },
-      "span:first-child": { marginRight: "8px" },
+    },
-    },
+    rankingTitle: {
-    [`@media screen and (max-width: ${token.screenMD})`]: {
+      [`@media screen and (max-width: ${token.screenMD}px)`]: {
-      rankingTitle: { marginTop: "16px" },
+        marginTop: "16px",
-      salesCard: { padding: "16px" },
+      },
-      salesBar: { padding: "16px" },
+    },
-    },
+    salesExtraWrap: {
-    [`@media screen and (max-width: ${token.screenSM})`]: {
+      [`@media screen and (max-width: ${token.screenSM}px)`]: {
-      salesExtraWrap: { display: "none" },
+        display: "none",
-      salesCard: {},
+      },
-      ".ant-tabs-content": { paddingTop: "30px" },
+    },
+    ".ant-tabs-content": {
+      [`@media screen and (max-width: ${token.screenSM}px)`]: {
+        paddingTop: "30px",
+      },
     },
   };
 });

src/pages/dashboard/monitor/style.style.ts

@@ -3,17 +3,15 @@ import { createStyles } from "antd-style";
 const useStyles = createStyles(({ token }) => {
   return {
     mapChart: {
-      height: "452px",
+      [`@media screen and (max-width: ${token.screenLG}px)`]: {
-      paddingTop: "24px",
+        height: "auto",
+      },
     },
     img: {
       display: "inline-block",
       maxWidth: "100%",
       maxHeight: "437px",
     },
-    [`@media screen and (max-width: ${token.screenLG})`]: {
-      mapChart: { height: "auto" },
-    },
   };
 });
 

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",
+      [`@media screen and (max-width: ${token.screenSM}px)`]: {
-      top: "4px",
+        marginLeft: "0",
-      flex: "1 1 auto",
+      },
-      marginLeft: "24px",
-      color: token.colorTextSecondary,
-      lineHeight: "22px",
     },
     contentTitle: {
       marginBottom: "12px",
@@ -39,36 +38,10 @@ const useStyles = createStyles(({ token }) => {
       lineHeight: "28px",
     },
     extraContent: {
-      zoom: "1",
+      [`@media screen and (max-width: ${token.screenSM}px)`]: {},
-      "&::before, &::after": { display: "table", content: "' '" },
-      "&::after": {
-        clear: "both",
-        height: "0",
-        fontSize: "0",
-        visibility: "hidden",
-      },
-      float: "right",
-      whiteSpace: "nowrap",
     },
     statItem: {
-      position: "relative",
+      [`@media screen and (max-width: ${token.screenSM}px)`]: { float: "none" },
-      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",
-        },
-      },
     },
     "> 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: {
-      {
+      [`@media screen and (max-width: ${token.screenLG}px)`]: {
-        activeCard: { marginBottom: "24px" },
+        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",
-        },
       },
     },
-    [`@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%" },
-    },
   };
 });
 

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",
+      [`@media screen and (max-width: ${token.screenXS}px)`]: {
-      lineHeight: "32px",
+        overflow: "visible",
+      },
     },
     ".ant-card-extra": {
       padding: "24px 0",
@@ -23,32 +26,20 @@ const useStyles = createStyles(({ token }) => {
       lineHeight: "48px",
     },
     headerInfo: {
-      position: "relative",
+      [`@media screen and (max-width: ${token.screenSM}px)`]: {
-      textAlign: "center",
+        marginBottom: "16px",
-      "& > span": {
+        "& > em": {
-        display: "inline-block",
+          display: "none",
-        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,
       },
     },
     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",
+      [`@media screen and (max-width: ${token.screenSM}px)`]: {
-      marginLeft: "16px",
+        width: "100%",
+        marginLeft: "0",
+      },
     },
-    [`@media screen and (max-width: ${token.screenXS})`]: {
+    ".ant-list-item-content": {
-      standardList: {},
+      [`@media screen and (max-width: ${token.screenXS}px)`]: {
-      ".ant-list-item-content": {
         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})`]: {
+    ".ant-list-item-action": {
-      standardList: {},
+      [`@media screen and (max-width: ${token.screenXS}px)`]: {
-      extraContentSearch: { width: "100%", marginLeft: "0" },
+        marginLeft: "0",
-      headerInfo: {
-        marginBottom: "16px",
-        "& > em": {
-          display: "none",
-        },
       },
     },
-    [`@media screen and (max-width: ${token.screenMD})`]: {
+    listCard: {
-      standardList: {},
+      [`@media screen and (max-width: ${token.screenMD}px)`]: {},
-      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",
-        },
-      },
     },
-    "@media screen and (max-width: 1400px)": {
+    ".ant-radio-group": {
-      standardList: {},
+      [`@media screen and (max-width: ${token.screenMD}px)`]: {
-      listContent: {
+        display: "block",
-        textAlign: "right",
+        marginBottom: "8px",
-        "& > div:last-child": {
-          top: "0",
-        },
       },
     },
     standardListForm: {},

src/pages/list/card-list/style.style.ts

@@ -23,13 +23,14 @@ const useStyles = createStyles(({ token }) => {
       maxWidth: "100%",
     },
     extraImg: {
-      width: "155px",
+      [`@media screen and (max-width: ${token.screenMD}px)`]: {
-      marginTop: "-20px",
+        display: "none",
-      textAlign: "center",
+      },
     },
     img: {
-      marginRight: "8px",
+      [`@media screen and (max-width: ${token.screenSM}px)`]: {
-      verticalAlign: "middle",
+        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",
+      [`@media screen and (max-width: ${token.screenSM}px)`]: {
-    },
-    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: {
         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",
+      },
     },
   };
 });

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",
+      [`@media screen and (max-width: ${token.screenXS}px)`]: {
-      color: token.colorTextSecondary,
-      lineHeight: "22px",
-      "& > em": {
-        marginLeft: "16px",
-        color: token.colorTextDisabled,
-        fontStyle: "normal",
-      },
-    },
-    [`@media screen and (max-width: ${token.screenXS})`]: {
-      listContent: {},
-      extra: {
         "& > em": {
           display: "block",
           marginTop: "8px",

src/pages/list/search/articles/style.style.ts

@@ -6,20 +6,16 @@ const useStyles = createStyles(({ token }) => {
       color: token.colorTextHeading,
     },
     listItemExtra: {
-      width: "272px",
+      [`@media screen and (max-width: ${token.screenLG}px)`]: {
-      height: "1px",
+        width: "0",
+        height: "1px",
+      },
     },
     selfTrigger: {
-      marginLeft: "12px",
+      [`@media screen and (max-width: ${token.screenMD}px)`]: {
-    },
+        display: "block",
-    [`@media screen and (max-width: ${token.screenXS})`]: {
+        marginLeft: "0",
-      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" },
     },
   };
 });

src/pages/profile/advanced/style.style.ts

@@ -13,17 +13,15 @@ const useStyles = createStyles(({ token }) => {
       marginBottom: "4px",
     },
     stepDescription: {
-      position: "relative",
+      [`@media screen and (max-width: ${token.screenSM}px)`]: { left: "8px" },
-      left: "38px",
-      paddingTop: "8px",
-      fontSize: "14px",
-      textAlign: "left",
     },
     "> 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})`]: {
+    ".ant-pro-page-header-wrap-row": {
-      stepDescription: { left: "8px" },
+      [`@media screen and (max-width: ${token.screenSM}px)`]: {
-      pageHeader: {},
+        flexDirection: "column",
-      ".ant-pro-page-header-wrap-row": { flexDirection: "column" },
+      },
     },
   };
 });