ui-soxo-bootstrap-core 2.6.40 → 2.6.42

package/core/modules/steps/steps.scss

@@ -159,16 +159,19 @@
   flex: 0 0 auto;
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 6px 12px;
-  border-bottom: 1px solid #e8eef8;
-  background: #f8fbff;
-  min-height: 50px;
+  gap: 12px;
+  padding: 0 24px;
+  min-height: 70px;
   width: 100%;
   max-width: 100%;
   min-width: 0;
   box-sizing: border-box;
   overflow: hidden;
+  position: relative;
+  /* Clean solid header on the soft sage → ivory gradient (no glass/frost).
+     Matches the onboarding reference without the frosted-glass treatment. */
+  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
+  background: linear-gradient(180deg, #a7c2c6 0%, #eff3e3 100%);
 }
 
 .steps-breadcrumb-strip {
@@ -176,13 +179,45 @@
   min-width: 0;
   display: flex;
   align-items: center;
-  gap: 6px;
+  justify-content: center;
+  gap: 52px;
   overflow-x: auto;
   overflow-y: hidden;
   white-space: nowrap;
-  scrollbar-width: thin;
-  scrollbar-color: #d0dff5 transparent;
-  padding-bottom: 2px;
+  scrollbar-width: none;
+  padding: 0 8px;
+}
+
+.steps-breadcrumb-strip::-webkit-scrollbar {
+  height: 0;
+  display: none;
+}
+
+/* Full-screen toggle — grey frosted pill anchored to the far left. */
+.steps-fullscreen-toggle {
+  flex: 0 0 auto;
+}
+
+.steps-fullscreen-toggle.ant-btn,
+.steps-fullscreen-toggle.ant-btn-dashed {
+  height: 38px;
+  padding: 0 18px;
+  border-radius: 999px;
+  background: #07232E33;
+  border: 1px solid #dbe3e6;
+  color: #ffffff;
+  font-size: 13px;
+  font-weight: 500;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  transition: all 0.2s ease;
+}
+
+.steps-fullscreen-toggle.ant-btn:hover,
+.steps-fullscreen-toggle.ant-btn:focus {
+  background: #ffffff;
+  border-color: #ffffff;
+  color: #000000;
+  transform: translateY(-1px);
 }
 
 .steps-nav-actions {
@@ -190,20 +225,40 @@
   display: flex;
   align-items: center;
   gap: 6px;
+  /*
+    Anchors the Back + primary CTA to the far right. In fullscreen the
+    breadcrumb strip is not rendered, so this margin keeps the group pinned
+    right with only the Full Screen toggle sitting on the left.
+  */
+  margin-left: auto;
 }
 
 .steps-nav-actions .ant-btn {
-  min-height: 34px;
-  border-radius: 8px;
-  padding: 0 14px;
+  min-height: 40px;
+  border-radius: 999px;
+  padding: 0 18px;
   font-size: 13px;
   font-weight: 600;
   touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
-  transition: all 0.15s ease;
+  transition: all 0.2s ease;
   white-space: nowrap;
 }
 
+/* Secondary (Back / previous-process) — solid white pill. */
+.steps-nav-actions .ant-btn-default {
+  background: #ffffff;
+  border-color: #dbe3e6;
+  color: #4a5a68;
+}
+
+.steps-nav-actions .ant-btn-default:hover,
+.steps-nav-actions .ant-btn-default:focus {
+  background: #f4f7f8;
+  border-color: #c3ccd0;
+  color: #253a5b;
+}
+
 .steps-nav-actions .ant-btn:active {
   transform: scale(0.97);
 }
@@ -253,17 +308,23 @@
 }
 
 .steps-breadcrumb-item {
+  /* Compact, natural-width steps that sit centered with connector lines
+     between them — matching the onboarding reference. */
+  position: relative;
+  flex: 0 0 auto;
+  min-width: 0;
   display: inline-flex;
   align-items: center;
-  gap: 7px;
-  border: 1.5px solid #dce6f5;
-  background: #f8fbff;
+  justify-content: flex-start;
+  gap: 8px;
+  border: none;
+  background: transparent;
   border-radius: 999px;
-  padding: 6px 14px;
+  padding: 4px;
   cursor: pointer;
-  transition: all 0.18s ease;
-  color: #475569;
-  font-size: 12px;
+  transition: all 0.2s ease;
+  color: #7a8792;
+  font-size: 13px;
   font-weight: 500;
   white-space: nowrap;
   min-height: 34px;
@@ -271,56 +332,109 @@
   -webkit-tap-highlight-color: transparent;
 }
 
-.steps-breadcrumb-item:hover {
-  background: #eef5ff;
-  border-color: #c8d9f6;
-  color: #1d4ed8;
+/* Thin connecting line drawn into the gap toward the next step. */
+.steps-breadcrumb-item:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  width: 52px;
+  height: 1px;
+  background: rgba(37, 58, 91, 0.2);
+  transform: translateY(-50%);
 }
 
 .steps-breadcrumb-item:active {
-  transform: scale(0.96);
+  transform: scale(0.97);
+}
+
+/* Number bubble — default (upcoming) solid muted circle. */
+.steps-breadcrumb-index {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 600;
+  background: #ffffff;
+  border: 1px solid #d3dbdf;
+  color: #8a97a2;
+  flex: 0 0 auto;
+  transition: all 0.2s ease;
+}
+
+.steps-breadcrumb-item:hover .steps-breadcrumb-index {
+  border-color: rgba(37, 58, 91, 0.35);
+  color: #253a5b;
 }
 
+/* Label is shown only for the active step (upcoming steps are circle-only,
+   as in the reference). */
+.steps-breadcrumb-label {
+  display: none;
+  font-size: 13px;
+  font-weight: 500;
+  color: inherit;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ACTIVE — solid white rounded pill with dark navy text. */
 .steps-breadcrumb-item.active {
-  background: #1e3a8a;
-  border-color: #1e3a8a;
-  color: #ffffff;
+  background: #ffffff;
+  padding: 4px 16px 4px 6px;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
+  color: #253a5b;
   font-weight: 600;
 }
 
-.steps-breadcrumb-item.completed {
-  border-color: #86efac;
-  background: #f0fdf4;
-  color: #15803d;
+.steps-breadcrumb-item.active .steps-breadcrumb-index {
+  background: #ffffff;
+  border-color: rgba(37, 58, 91, 0.25);
+  color: #253a5b;
+}
+
+.steps-breadcrumb-item.active .steps-breadcrumb-label {
+  display: inline;
+  color: #253a5b;
 }
 
+/* COMPLETED — filled navy circle. */
 .steps-breadcrumb-item.completed .steps-breadcrumb-index {
-  background: #16a34a;
+  background: #253a5b;
+  border-color: #253a5b;
   color: #ffffff;
 }
 
-.steps-breadcrumb-item.active .steps-breadcrumb-index {
-  background: rgba(255, 255, 255, 0.22);
-  color: #ffffff;
+/* Primary CTA (Start / Verify Profile / Next / Finish) — dark navy pill. */
+.steps-nav-actions .ant-btn-primary {
+  background: #253a5b;
+  border-color: #253a5b;
+  border-radius: 999px;
+  padding: 0 30px;
+  min-height: 40px;
+  box-shadow: 0 8px 20px rgba(37, 58, 91, 0.28);
 }
 
-.steps-breadcrumb-index {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 11px;
-  font-weight: 700;
-  background: #e2e8f4;
-  color: #1e293b;
-  flex: 0 0 auto;
+.steps-nav-actions .ant-btn-primary:hover,
+.steps-nav-actions .ant-btn-primary:focus {
+  background: #1d3054;
+  border-color: #1d3054;
+  transform: translateY(-1px);
+  box-shadow: 0 12px 26px rgba(37, 58, 91, 0.36);
 }
 
-.steps-breadcrumb-label {
-  font-size: 12px;
-  font-weight: 600;
+.steps-nav-actions .ant-btn-primary:disabled,
+.steps-nav-actions .ant-btn-primary[disabled] {
+  background: #c8d0e0;
+  border-color: #c8d0e0;
+  color: #ffffff;
+  box-shadow: none;
+  transform: none;
 }
 
 .steps-breadcrumb-empty {
@@ -347,8 +461,8 @@
   padding: 10px 14px;
   box-sizing: border-box;
   position: relative;
+    background: linear-gradient(180deg, #a7c2c6 0%, #eff3e3 100%);
 }
-
 .steps-stage-body.is-swipe-enabled {
   touch-action: pan-y;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.6.40",
+  "version": "2.6.42",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"