ui-soxo-bootstrap-core 2.4.25-dev.9 → 2.4.25

package/core/modules/steps/steps.scss

@@ -1,158 +0,0 @@
-.timeline-card .ant-card-body {
-  padding: 20px;
-  min-height: 400px;
-  position: relative; /* For positioning the arrow */
-}
-
-.timeline-sidebar {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  transition: all 0.3s ease;
-}
-
-.timeline-step {
-  display: flex;
-  cursor: pointer;
-}
-
-.timeline-step.active .step-number {
-  background: #3b82f6;
-  color: white;
-}
-
-.timeline-step.completed .step-number {
-  background:  #22c55e;
-  color: white;
-}
-
-.step-marker {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-right: 14px;
-}
-
-.step-number {
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  background: #d9d9d9;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-}
-
-.vertical-line {
-  width: 2px;
-  height: 40px;
-  background: #d9d9d9;
-}
-
-.step-info {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.step-title {
-  font-size: 13px;
-  font-weight: 500;
-}
-
-.step-main {
-  font-size: 15px;
-  font-weight: 600;
-}
-
-.toggle-arrow {
-  position: absolute;
-  top: 50%;
-  right: -12px; /* Position it just outside the card body padding */
-  transform: translateY(-50%);
-  width: 24px;
-  height: 24px;
-  background: #fff;
-  border: 1px solid #f0f0f0;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
-  z-index: 10;
-  transition: all 0.3s ease;
-
-  &:hover {
-    background: #f5f5f5;
-  }
-}
-
-/* ============================
-   MOBILE & TABLET VIEW FIXES
-   ============================ */
-
-   
-
-@media (max-width: 992px) {   // iPad & tablets
-  .timeline-card .ant-card-body {
-    padding: 12px;
-    min-height: auto;
-  }
-
-  .timeline-sidebar {
-    flex-direction: row !important;
-    overflow-x: auto;
-    gap: 12px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid #eee;
-  }
-
-  .timeline-step {
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .step-marker {
-    margin-right: 0;
-  }
-
-  .step-info {
-    text-align: center;
-  }
-
-  .toggle-arrow {
-    display: none !important; /* Hide collapse icon */
-  }
-}
-
-@media (max-width: 768px) {   // mobile screens
-  .timeline-sidebar {
-    gap: 8px;
-  }
-
-  .step-number {
-    width: 24px;
-    height: 24px;
-    font-size: 12px;
-  }
-
-  .step-title {
-    font-size: 11px;
-  }
-
-  .step-main {
-    font-size: 13px;
-  }
-
-  .vertical-line {
-    display: none;
-  }
-
-  /* Card layout full width */
-  .timeline-card .ant-card-body {
-    padding: 10px;
-  }
-}
-

package/core/modules/steps/timeline.js

@@ -1,49 +0,0 @@
-import React from "react";
-import { Skeleton } from "antd";
-import { LeftOutlined, RightOutlined } from "@ant-design/icons";
-import { Card } from "../../lib";
-
-export default function TimelinePanel({
-  loading,
-  steps,
-  activeStep,
-  timelineCollapsed,
-  handleTimelineClick,
-  setTimelineCollapsed
-}) {
-  return (
-    <Card className="timeline-card">
-      {loading ? (
-        <Skeleton active />
-      ) : (
-        <div className={`timeline-sidebar ${timelineCollapsed ? "collapsed" : ""}`}>
-          {steps.map((step, index) => (
-            <div
-              key={step.step_id}
-              className={`timeline-step 
-                ${index === activeStep ? "active" : ""} 
-                ${index < activeStep ? "completed" : ""}`}
-              onClick={() => handleTimelineClick(index)}
-            >
-              <div className="step-marker">
-                <div className="step-number">{index + 1}</div>
-                {index < steps.length - 1 && <div className="vertical-line"></div>}
-              </div>
-
-              {!timelineCollapsed && (
-                <div className="step-info">
-                  <div className="step-title">Step {index + 1}</div>
-                  <div className="step-main">{step.step_name}</div>
-                </div>
-              )}
-            </div>
-          ))}
-
-          <div className="toggle-arrow" onClick={() => setTimelineCollapsed(!timelineCollapsed)}>
-            {timelineCollapsed ? <RightOutlined /> : <LeftOutlined />}
-          </div>
-        </div>
-      )}
-    </Card>
-  );
-}