@egovernments/digit-ui-components-css 0.0.2-beta.1 → 0.0.2-beta.11

package/src/digitv2/components/{stepper.scss → stepperV2.scss}

@@ -1,127 +1,148 @@
-.digit-stepper-container {
-  @apply flex overflow-auto;
-  min-height: 4rem;
-
-  &.vertical {
-    @apply flex-col;
-  }
-
-  .digit-stepper-checkpoint {
-    @apply relative flex-1;
-    min-height: 4rem;
-    z-index: 1;
-  }
-
-  .digit-stepper-content {
-    @apply flex flex-col items-center;
-    min-height: 4rem;
-    gap: theme(digitv2.spacers.spacer2);
-
-    .stepper-label {
-      @extend .typography.body-s;
-      @apply text-center;
-      color: theme(digitv2.lightTheme.text-secondary);
-      letter-spacing: theme(digitv2.spacers.spacer0);
-      &.completed {
-        color: theme(digitv2.lightTheme.text-primary);
-      }
-      &.current {
-        @extend .typography.heading-s;
-        line-height:1.37rem;
-        color: theme(digitv2.lightTheme.text-primary);
-      }
-      &.vertical{
-        @apply text-left;
-        margin-top:0.438rem;
-      }
-    }
-    &.vertical {
-      @apply flex-row;
-    }
-  }
-  .stepper-circle {
-    @apply flex text-center justify-center items-center font-regular w-8 h-8;
-    background-color: theme(digitv2.lightTheme.paper-primary);
-    border-radius: 50%;
-    margin-top: theme(digitv2.spacers.spacer1);
-    border: 0.125rem solid theme(digitv2.lightTheme.generic-divider);
-    color: #787878;
-    @media (max-aspect-ratio: 9/16) {
-      @apply w-6 h-6;
-    }
-  }
-  .active {
-    @apply font-bold;
-    background-color: theme(digitv2.lightTheme.primary-1);
-    border-color: theme(digitv2.lightTheme.primary-1);
-    color:theme(digitv2.lightTheme.paper-primary);
-  }
-  .stepper-connect {
-    @apply absolute;
-    top: theme(digitv2.spacers.spacer5);
-    left: calc(50% + (theme(digitv2.spacers.spacer2)));
-    right: calc(-50% + (theme(digitv2.spacers.spacer2)));
-    border-top: 0.125rem solid theme(colors.border);
-    z-index: -1;
-    height: 0.125rem;
-    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
-      min-width: 6.313rem;
-      max-width: 39.438rem;
-    }
-    @media (max-aspect-ratio: 9/16) {
-      min-width: 4.313rem;
-      max-width: 16.875rem;
-      top: 0.875rem;
-    }
-    @media (min-aspect-ratio: 3/4) {
-      min-width: 5.313rem;
-      max-width: 82.688rem;
-    }
-    &.active {
-      background-color: theme(digitv2.lightTheme.primary-1);
-      border-color: theme(digitv2.lightTheme.primary-1);
-      height:theme(digitv2.spacers.spacer1);
-      border-top: theme(digitv2.spacers.spacer1) solid theme(digitv2.lightTheme.primary-1);
-    }
-    &.vertical {
-      top: calc(50% + (theme(digitv2.spacers.spacer2)));
-      bottom: calc(-50% + (theme(digitv2.spacers.spacer2)));
-      left: -(theme(digitv2.spacers.spacer12));
-      width: 0.125rem;
-      height: auto;
-      transform: rotate(90deg);
-      &.active {
-        background-color: transparent;
-        border-color: theme(digitv2.lightTheme.primary-1);
-      }
-    }
-  }
-  .digit-stepper-content:hover {
-    .stepper-circle.active {
-      outline: theme(digitv2.spacers.spacer1) solid #F477381F;
-    }
-    .stepper-label {
-      &.completed {
-        @extend .typography.heading-s;
-        line-height:1.37rem;
-        color: theme(digitv2.lightTheme.text-primary);
-      }
-    }
-  }
-}
-
-.digit-stepper-container::-webkit-scrollbar {
-  width:theme(digitv2.spacers.spacer2);
-  height:theme(digitv2.spacers.spacer2);
-  background-color: theme(digitv2.lightTheme.generic-background);
-}
-
-.digit-stepper-container::-webkit-scrollbar-track {
-  background-color: theme(digitv2.lightTheme.generic-background);
-  border-radius: 0.563rem;
-}
-
-.digit-stepper-container::-webkit-scrollbar-thumb {
-  background-color: theme(digitv2.lightTheme.generic-divider);
-  border-radius: 0.563rem;
+.digit-stepper-container {
+  @apply flex overflow-auto;
+  min-height: 4rem;
+
+  &.vertical {
+    @apply flex-col;
+  }
+
+  .digit-stepper-checkpoint {
+    @apply relative flex-1;
+    min-height: 4rem;
+    z-index: 1;
+  }
+
+  .digit-stepper-content {
+    @apply flex flex-col items-center font-sans font-regular;
+    min-height: 4rem;
+    gap: theme(digitv2.spacers.spacer2);
+    color: theme(digitv2.lightTheme.text-secondary);
+    font-size: theme(digitv2.spacers.spacer4);
+    line-height: theme(digitv2.spacers.spacer6);
+    text-align: center;
+
+
+    .stepper-label {
+      @extend .typography.body-s;
+      @apply text-center;
+      color: theme(digitv2.lightTheme.text-secondary);
+      letter-spacing: theme(digitv2.spacers.spacer0);
+
+      &.completed {
+        color: theme(digitv2.lightTheme.text-primary);
+      }
+
+      &.current {
+        @extend .typography.heading-s;
+        line-height: 1.37rem;
+        color: theme(digitv2.lightTheme.text-primary);
+      }
+
+      &.vertical {
+        @apply text-left;
+        margin-top: 0.438rem;
+      }
+    }
+
+    &.vertical {
+      @apply flex-row;
+    }
+  }
+
+  .stepper-circle {
+    @apply flex text-center justify-center items-center font-regular w-8 h-8;
+    background-color: theme(digitv2.lightTheme.paper-primary);
+    border-radius: 50%;
+    margin-top: theme(digitv2.spacers.spacer1);
+    border: 0.125rem solid theme(digitv2.lightTheme.generic-divider);
+    color: #787878;
+
+    @media (max-aspect-ratio: 9/16) {
+      @apply w-6 h-6;
+    }
+  }
+
+  .active {
+    @apply font-bold;
+    background-color: theme(digitv2.lightTheme.primary-1);
+    border-color: theme(digitv2.lightTheme.primary-1);
+    color: theme(digitv2.lightTheme.paper-primary);
+  }
+
+  .stepper-connect {
+    @apply absolute;
+    top: theme(digitv2.spacers.spacer5);
+    left: calc(50% + (theme(digitv2.spacers.spacer2)));
+    right: calc(-50% + (theme(digitv2.spacers.spacer2)));
+    border-top: 0.125rem solid theme(colors.border);
+    z-index: -1;
+    height: 0.125rem;
+
+    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
+      min-width: 6.313rem;
+      max-width: 39.438rem;
+    }
+
+    @media (max-aspect-ratio: 9/16) {
+      min-width: 4.313rem;
+      max-width: 16.875rem;
+      top: 0.875rem;
+    }
+
+    @media (min-aspect-ratio: 3/4) {
+      min-width: 5.313rem;
+      max-width: 82.688rem;
+    }
+
+    &.active {
+      background-color: theme(digitv2.lightTheme.primary-1);
+      border-color: theme(digitv2.lightTheme.primary-1);
+      height: theme(digitv2.spacers.spacer1);
+      border-top: theme(digitv2.spacers.spacer1) solid theme(digitv2.lightTheme.primary-1);
+    }
+
+    &.vertical {
+      top: calc(50% + (theme(digitv2.spacers.spacer2)));
+      bottom: calc(-50% + (theme(digitv2.spacers.spacer2)));
+      left: -(theme(digitv2.spacers.spacer12));
+      width: 0.125rem;
+      height: auto;
+      transform: rotate(90deg);
+
+      &.active {
+        background-color: transparent;
+        border-color: theme(digitv2.lightTheme.primary-1);
+      }
+    }
+  }
+
+  .digit-stepper-content:hover {
+    .stepper-circle.active {
+      outline: theme(digitv2.spacers.spacer1) solid #F477381F;
+    }
+
+    .stepper-label {
+      &.completed {
+        @extend .typography.heading-s;
+        line-height: 1.37rem;
+        color: theme(digitv2.lightTheme.text-primary);
+      }
+    }
+  }
+}
+
+.digit-stepper-container::-webkit-scrollbar {
+  width: theme(digitv2.spacers.spacer2);
+  height: theme(digitv2.spacers.spacer2);
+  background-color: theme(digitv2.lightTheme.generic-background);
+}
+
+.digit-stepper-container::-webkit-scrollbar-track {
+  background-color: theme(digitv2.lightTheme.generic-background);
+  border-radius: 0.563rem;
+}
+
+.digit-stepper-container::-webkit-scrollbar-thumb {
+  background-color: theme(digitv2.lightTheme.generic-divider);
+  border-radius: 0.563rem;
 }