ui-soxo-bootstrap-core 2.6.6 → 2.6.7

package/core/modules/steps/steps.scss

@@ -1,357 +1,357 @@
-.process-steps-page {
-  height: 100dvh;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.process-steps-card {
-  flex: 1;
-  height: 100%;
-  overflow: hidden;
-
-  .ant-card-body {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-}
-
-.process-steps-row {
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.process-steps-timeline-col,
-.process-steps-content-col {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  box-sizing: border-box;
-}
-
-.process-steps-timeline-col {
-  position: sticky;
-  top: 0;
-  align-self: flex-start;
-  height: 100%;
-  max-height: 100%;
-}
-
-.process-steps-timeline-col .timeline-card {
-  height: 100%;
-  width: 100%;
-}
-
-.process-steps-content-col {
-  flex: 1;
-  max-height: 100%;
-  overflow: hidden;
-  background: #fff;
-  border: 1px solid #e5ebf3;
-  border-radius: 14px;
-  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
-  padding: 14px 16px;
-  position: relative;
-  z-index: 2;
-}
-
-.process-steps-content-col > .action-buttons-layout {
-  flex: 1;
-  min-height: 0;
-  height: 100%;
-}
-
-.process-step-header {
-  margin-bottom: 20px;
-  flex-shrink: 0;
-}
-
-.process-step-title {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.process-step-description {
-  margin: 0;
-  color: #666;
-}
-
-.timeline-card {
-  height: 100%;
-  border: none !important;
-  border-radius: 12px;
-  background: linear-gradient(180deg, #f4f7fc 0%, #edf2f9 100%);
-  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8), inset 0 8px 16px rgba(15, 23, 42, 0.08), inset 0 -2px 8px rgba(15, 23, 42, 0.04);
-}
-
-.timeline-card .ant-card-body {
-  padding: 8px;
-  border: none;
-  min-height: 100%;
-  position: relative;
-  overflow: visible;
-}
-
-.timeline-sidebar-wrap {
-  height: 100%;
-  position: relative;
-}
-
-.timeline-sidebar {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  transition: all 0.3s ease;
-  height: 100%;
-  overflow-y: auto;
-  padding-right: 4px;
-}
-
-.timeline-step {
-  display: flex;
-  align-items: flex-start;
-  cursor: pointer;
-  border: 1px solid #e4eaf3;
-  border-radius: 10px;
-  background: #fff;
-  padding: 10px 12px;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
-}
-
-.timeline-step:hover {
-  border-color: #b7c8ea;
-  box-shadow: 0 2px 8px rgba(24, 45, 84, 0.08);
-  transform: translateY(-1px);
-}
-
-.timeline-step.active .step-number {
-  background: #1f6fe5;
-  border-color: #1f6fe5;
-  color: white;
-}
-
-.timeline-step.completed .step-number {
-  background: #2fa857;
-  border-color: #2fa857;
-  color: white;
-}
-
-.timeline-step.active {
-  border-color: #96b9f7;
-  box-shadow: 0 0 0 1px rgba(31, 111, 229, 0.2);
-}
-
-.timeline-step.completed {
-  border-color: #cfead9;
-}
-
-.step-marker {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-right: 12px;
-  min-width: 34px;
-}
-
-.step-number {
-  width: 34px;
-  height: 34px;
-  border-radius: 50%;
-  border: 2px solid #d4dde9;
-  background: #fff;
-  color: #5b6678;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-}
-
-.vertical-line {
-  width: 2px;
-  min-height: 14px;
-  flex: 1;
-  margin-top: 6px;
-  background: #d5deea;
-}
-
-.timeline-step.completed .vertical-line {
-  background: #2fa857;
-}
-
-.step-info {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  min-width: 0;
-}
-
-.step-title {
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 1.2;
-  color: #6b7280;
-  margin-bottom: 2px;
-}
-
-.step-main {
-  font-size: 16px;
-  font-weight: 600;
-  color: #1f2937;
-  line-height: 1.2;
-  margin-bottom: 2px;
-}
-
-.step-desc {
-  font-size: 13px;
-  color: #7a8495;
-  line-height: 1.2;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-
-.toggle-arrow {
-  position: absolute;
-  top: 50%;
-  right: -12px;
-  transform: translateY(-50%);
-  width: 30px;
-  height: 30px;
-  background: #fff;
-  border: 1px solid #b8c9e4;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  color: #1f3f74;
-  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.2);
-  z-index: 40;
-  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
-
-  &:hover {
-    background: #f0f6ff;
-    border-color: #90abd1;
-    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.24);
-  }
-
-  &:active {
-    transform: translateY(-50%) scale(0.96);
-  }
-}
-
-.timeline-sidebar.collapsed {
-  align-items: center;
-}
-
-.timeline-sidebar.collapsed .timeline-step {
-  padding: 6px 4px;
-  border: none;
-  background: transparent;
-  box-shadow: none;
-}
-
-.timeline-sidebar.collapsed .step-marker {
-  margin-right: 0;
-}
-
-/* ============================
-   MOBILE & TABLET VIEW FIXES
-   ============================ */
-
-   
-
-@media (max-width: 992px) {   // iPad & tablets
-  .process-steps-page,
-  .process-steps-row {
-    min-height: auto;
-    height: auto;
-    overflow: visible;
-  }
-
-  .process-steps-card,
-  .process-steps-card .ant-card-body,
-  .process-steps-content-col {
-    overflow: visible;
-  }
-
-  .process-steps-content-col {
-    padding: 12px;
-    border-radius: 12px;
-    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
-  }
-
-  .process-steps-timeline-col {
-    position: static;
-    top: auto;
-    align-self: stretch;
-    height: auto;
-    max-height: none;
-  }
-
-  .timeline-card .ant-card-body {
-    padding: 12px;
-    min-height: auto;
-    overflow: visible;
-  }
-
-  .timeline-sidebar {
-    flex-direction: row !important;
-    overflow-x: auto;
-    overflow-y: visible;
-    gap: 10px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid #eee;
-  }
-
-  .timeline-step {
-    min-width: 190px;
-  }
-
-  .step-marker {
-    margin-right: 10px;
-  }
-
-  .vertical-line {
-    display: none;
-  }
-
-  .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: 14px;
-  }
-
-  .step-desc {
-    font-size: 12px;
-  }
-
-  /* Card layout full width */
-  .timeline-card .ant-card-body {
-    padding: 10px;
-  }
-}
+.process-steps-page {
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.process-steps-card {
+  flex: 1;
+  height: 100%;
+  overflow: hidden;
+
+  .ant-card-body {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+}
+
+.process-steps-row {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.process-steps-timeline-col,
+.process-steps-content-col {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  box-sizing: border-box;
+}
+
+.process-steps-timeline-col {
+  position: sticky;
+  top: 0;
+  align-self: flex-start;
+  height: 100%;
+  max-height: 100%;
+}
+
+.process-steps-timeline-col .timeline-card {
+  height: 100%;
+  width: 100%;
+}
+
+.process-steps-content-col {
+  flex: 1;
+  max-height: 100%;
+  overflow: hidden;
+  background: #fff;
+  border: 1px solid #e5ebf3;
+  border-radius: 14px;
+  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
+  padding: 14px 16px;
+  position: relative;
+  z-index: 2;
+}
+
+.process-steps-content-col > .action-buttons-layout {
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+}
+
+.process-step-header {
+  margin-bottom: 20px;
+  flex-shrink: 0;
+}
+
+.process-step-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.process-step-description {
+  margin: 0;
+  color: #666;
+}
+
+.timeline-card {
+  height: 100%;
+  border: none !important;
+  border-radius: 12px;
+  background: linear-gradient(180deg, #f4f7fc 0%, #edf2f9 100%);
+  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8), inset 0 8px 16px rgba(15, 23, 42, 0.08), inset 0 -2px 8px rgba(15, 23, 42, 0.04);
+}
+
+.timeline-card .ant-card-body {
+  padding: 8px;
+  border: none;
+  min-height: 100%;
+  position: relative;
+  overflow: visible;
+}
+
+.timeline-sidebar-wrap {
+  height: 100%;
+  position: relative;
+}
+
+.timeline-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  transition: all 0.3s ease;
+  height: 100%;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.timeline-step {
+  display: flex;
+  align-items: flex-start;
+  cursor: pointer;
+  border: 1px solid #e4eaf3;
+  border-radius: 10px;
+  background: #fff;
+  padding: 10px 12px;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+.timeline-step:hover {
+  border-color: #b7c8ea;
+  box-shadow: 0 2px 8px rgba(24, 45, 84, 0.08);
+  transform: translateY(-1px);
+}
+
+.timeline-step.active .step-number {
+  background: #1f6fe5;
+  border-color: #1f6fe5;
+  color: white;
+}
+
+.timeline-step.completed .step-number {
+  background: #2fa857;
+  border-color: #2fa857;
+  color: white;
+}
+
+.timeline-step.active {
+  border-color: #96b9f7;
+  box-shadow: 0 0 0 1px rgba(31, 111, 229, 0.2);
+}
+
+.timeline-step.completed {
+  border-color: #cfead9;
+}
+
+.step-marker {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 12px;
+  min-width: 34px;
+}
+
+.step-number {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  border: 2px solid #d4dde9;
+  background: #fff;
+  color: #5b6678;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+}
+
+.vertical-line {
+  width: 2px;
+  min-height: 14px;
+  flex: 1;
+  margin-top: 6px;
+  background: #d5deea;
+}
+
+.timeline-step.completed .vertical-line {
+  background: #2fa857;
+}
+
+.step-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+}
+
+.step-title {
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.2;
+  color: #6b7280;
+  margin-bottom: 2px;
+}
+
+.step-main {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1f2937;
+  line-height: 1.2;
+  margin-bottom: 2px;
+}
+
+.step-desc {
+  font-size: 13px;
+  color: #7a8495;
+  line-height: 1.2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.toggle-arrow {
+  position: absolute;
+  top: 50%;
+  right: -12px;
+  transform: translateY(-50%);
+  width: 30px;
+  height: 30px;
+  background: #fff;
+  border: 1px solid #b8c9e4;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #1f3f74;
+  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.2);
+  z-index: 40;
+  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+
+  &:hover {
+    background: #f0f6ff;
+    border-color: #90abd1;
+    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.24);
+  }
+
+  &:active {
+    transform: translateY(-50%) scale(0.96);
+  }
+}
+
+.timeline-sidebar.collapsed {
+  align-items: center;
+}
+
+.timeline-sidebar.collapsed .timeline-step {
+  padding: 6px 4px;
+  border: none;
+  background: transparent;
+  box-shadow: none;
+}
+
+.timeline-sidebar.collapsed .step-marker {
+  margin-right: 0;
+}
+
+/* ============================
+   MOBILE & TABLET VIEW FIXES
+   ============================ */
+
+   
+
+@media (max-width: 992px) {   // iPad & tablets
+  .process-steps-page,
+  .process-steps-row {
+    min-height: auto;
+    height: auto;
+    overflow: visible;
+  }
+
+  .process-steps-card,
+  .process-steps-card .ant-card-body,
+  .process-steps-content-col {
+    overflow: visible;
+  }
+
+  .process-steps-content-col {
+    padding: 12px;
+    border-radius: 12px;
+    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
+  }
+
+  .process-steps-timeline-col {
+    position: static;
+    top: auto;
+    align-self: stretch;
+    height: auto;
+    max-height: none;
+  }
+
+  .timeline-card .ant-card-body {
+    padding: 12px;
+    min-height: auto;
+    overflow: visible;
+  }
+
+  .timeline-sidebar {
+    flex-direction: row !important;
+    overflow-x: auto;
+    overflow-y: visible;
+    gap: 10px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #eee;
+  }
+
+  .timeline-step {
+    min-width: 190px;
+  }
+
+  .step-marker {
+    margin-right: 10px;
+  }
+
+  .vertical-line {
+    display: none;
+  }
+
+  .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: 14px;
+  }
+
+  .step-desc {
+    font-size: 12px;
+  }
+
+  /* Card layout full width */
+  .timeline-card .ant-card-body {
+    padding: 10px;
+  }
+}