Initial checkin

src/assets/theme-dark/components/stepper/index.ts

@@ -0,0 +1,47 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// Material Dashboard 2 PRO React TS Base Styles
+import colors from "assets/theme-dark/base/colors";
+import borders from "assets/theme-dark/base/borders";
+import boxShadows from "assets/theme-dark/base/boxShadows";
+
+// Material Dashboard 2 PRO React TS Helper Functions
+import pxToRem from "assets/theme-dark/functions/pxToRem";
+import linearGradient from "assets/theme-dark/functions/linearGradient";
+
+const { transparent, gradients } = colors;
+const { borderRadius } = borders;
+const { colored } = boxShadows;
+
+// types
+type Types = any;
+
+const stepper: Types = {
+  styleOverrides: {
+    root: {
+      background: linearGradient(gradients.info.main, gradients.info.state),
+      padding: `${pxToRem(24)} 0 ${pxToRem(16)}`,
+      borderRadius: borderRadius.lg,
+      boxShadow: colored.info,
+
+      "&.MuiPaper-root": {
+        backgroundColor: transparent.main,
+      },
+    },
+  },
+};
+
+export default stepper;

src/assets/theme-dark/components/stepper/step.ts

@@ -0,0 +1,30 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// Material Dashboard 2 PRO React TS Helper Functions
+import pxToRem from "assets/theme-dark/functions/pxToRem";
+
+// types
+type Types = any;
+
+const step: Types = {
+  styleOverrides: {
+    root: {
+      padding: `0 ${pxToRem(6)}`,
+    },
+  },
+};
+
+export default step;

src/assets/theme-dark/components/stepper/stepConnector.ts

@@ -0,0 +1,55 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// Material Dashboard 2 PRO React TS Base Styles
+import borders from "assets/theme-dark/base/borders";
+import colors from "assets/theme-dark/base/colors";
+
+const { white } = colors;
+const { borderWidth } = borders;
+
+// types
+type Types = any;
+
+const stepConnector: Types = {
+  styleOverrides: {
+    root: {
+      color: "#9fc9ff",
+      transition: "all 200ms linear",
+
+      "&.Mui-active": {
+        color: white.main,
+      },
+
+      "&.Mui-completed": {
+        color: white.main,
+      },
+    },
+
+    alternativeLabel: {
+      top: "14%",
+      left: "-50%",
+      right: "50%",
+    },
+
+    line: {
+      borderWidth: `${borderWidth[2]} !important`,
+      borderColor: "currentColor",
+      opacity: 0.5,
+    },
+  },
+};
+
+export default stepConnector;

src/assets/theme-dark/components/stepper/stepIcon.ts

@@ -0,0 +1,60 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// Material Dashboard 2 PRO React TS Base Styles
+import colors from "assets/theme-dark/base/colors";
+
+// Material Dashboard 2 PRO React TS Helper Functions
+import pxToRem from "assets/theme-dark/functions/pxToRem";
+import boxShadow from "assets/theme-dark/functions/boxShadow";
+
+const { white } = colors;
+
+// types
+type Types = any;
+
+const stepIcon: Types = {
+  styleOverrides: {
+    root: {
+      background: "#9fc9ff",
+      fill: "#9fc9ff",
+      stroke: "#9fc9ff",
+      strokeWidth: pxToRem(10),
+      width: pxToRem(13),
+      height: pxToRem(13),
+      borderRadius: "50%",
+      zIndex: 99,
+      transition: "all 200ms linear",
+
+      "&.Mui-active": {
+        background: white.main,
+        fill: white.main,
+        stroke: white.main,
+        borderColor: white.main,
+        boxShadow: boxShadow([0, 0], [0, 2], white.main, 1),
+      },
+
+      "&.Mui-completed": {
+        background: white.main,
+        fill: white.main,
+        stroke: white.main,
+        borderColor: white.main,
+        boxShadow: boxShadow([0, 0], [0, 2], white.main, 1),
+      },
+    },
+  },
+};
+
+export default stepIcon;

src/assets/theme-dark/components/stepper/stepLabel.ts

@@ -0,0 +1,52 @@
+/**
+=========================================================
+* Material Dashboard 2 PRO React TS - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
+* Copyright 2022 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+ =========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+*/
+
+// Material Dashboard 2 PRO React TS Base Styles
+import typography from "assets/theme-dark/base/typography";
+import colors from "assets/theme-dark/base/colors";
+
+// Material Dashboard 2 PRO React TS Helper Functions
+import pxToRem from "assets/theme-dark/functions/pxToRem";
+import rgba from "assets/theme-dark/functions/rgba";
+
+const { size, fontWeightRegular } = typography;
+const { white } = colors;
+
+// types
+type Types = any;
+
+const stepLabel: Types = {
+  styleOverrides: {
+    label: {
+      marginTop: `${pxToRem(8)} !important`,
+      fontWeight: fontWeightRegular,
+      fontSize: size.xs,
+      color: "#9fc9ff",
+      textTransform: "uppercase",
+
+      "&.Mui-active": {
+        fontWeight: `${fontWeightRegular} !important`,
+        color: `${rgba(white.main, 0.8)} !important`,
+      },
+
+      "&.Mui-completed": {
+        fontWeight: `${fontWeightRegular} !important`,
+        color: `${rgba(white.main, 0.8)} !important`,
+      },
+    },
+  },
+};
+
+export default stepLabel;