mt-ui-components-vue3/lib/TableCard/style/index.style.js

玛果添实UI组件库(Vue3)

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _antdStyle = require("antd-style");
var useStyles = (0, _antdStyle.createStyles)(function (_ref) {
  var token = _ref.token;
  return {
    "costom-table-card": {
      border: "1px solid #e6e6e6",
      width: "398px",
      borderRadius: "6px",
      position: "relative",
      overflow: "hidden",
      padding: "16px 24px",
      "&::before": {
        content: "''",
        position: "absolute",
        width: "30%",
        height: "80px",
        top: "-69px",
        left: "20px",
        zIndex: "0",
        background: "rgba(47, 84, 235, 0.55)",
        transform: "perspective(0.5em) rotateX(177deg)"
      },
      "&::after": {
        content: "''",
        position: "absolute",
        width: "84px",
        height: "84px",
        top: "-84px",
        left: "84px",
        background: "linear-gradient(\n            301.73deg,\n            rgba(150, 236, 227, 0.63) 16.45%,\n            rgba(150, 236, 227, 0) 66.56%\n        )",
        boxShadow: "inset 30px -10px 60px rgba(255, 255, 255, 0.25)",
        filter: "blur(25px)",
        transform: "matrix(-1, 0, 0, 1, 0, 0)"
      },
      "&:hover": {
        boxShadow: "0px 2px 16px rgba(0, 0, 0, 0.1)"
      }
    },
    "table-card-title": {
      width: "100%",
      display: "flex",
      padding: "20px 0",
      alignItems: "center",
      fontWeight: "700",
      fontSize: "18px",
      borderBottom: "1px solid #e6e6e6"
    },
    "table-card-status": {
      width: "96px",
      height: "30px",
      lineHeight: "30px",
      fontSize: "14px",
      position: "absolute",
      right: "0",
      top: "0",
      backgroundColor: "rgba(74, 234, 220, 0.3)",
      clipPath: "polygon(0% 0%, 20% 100%, 100% 100%, 100% 0%)",
      textAlign: "center"
    },
    "table-card-content": {
      margin: "20px 0"
    },
    "table-card-btns": {
      display: "flex",
      justifyContent: "flex-end",
      alignItems: "center"
    },
    "card-btn": {
      flex: "1",
      margin: "4px",
      height: "40px"
    },
    "@{ant-prefix}-btn": {
      width: "100%",
      height: "40px",
      background: "#f1f1f1",
      borderRadius: "10px",
      border: "1px solid #e6e6e6",
      color: "#000000",
      "&:hover": {
        backgroundColor: token.colorPrimary,
        color: "#ffffff"
      },
      "&:disabled": {
        color: token["btn-disable-color"],
        backgroundColor: token["btn-disable-bg"]
      }
    },
    "@{ant-prefix}-popover-inner": {
      backgroundColor: "#3f4960",
      borderRadius: "4px"
    },
    "@{ant-prefix}-popover-inner-content": {
      padding: "10px 0",
      borderRadius: "4px"
    },
    "@{ant-prefix}-popover-arrow-content": {
      background: "#3f4960"
    },
    "card-popover-item": {
      width: "100%",
      display: "flex",
      justifyContent: "flex-start",
      alignItems: "center",
      color: "#ffffff",
      backgroundColor: "#3f4960",
      fontSize: "14px",
      padding: "10px 50px 10px 20px",
      cursor: "pointer",
      "span:last-child": {
        marginLeft: "10px"
      },
      "&:hover": {
        background: "rgba(255, 255, 255, 0.12)"
      }
    }
  };
});
var _default = useStyles;
exports.default = _default;