fix: fix subtitle style for vertical progress indicator

bcgov · Sep 27, 2023 · 98bdf18 · 98bdf18
1 parent 6b4ff8f
commit 98bdf18
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 7 deletions.
diff --git a/frontend/src/assets/styles/global.scss b/frontend/src/assets/styles/global.scss
@@ -133,6 +133,10 @@ cds-progress-step::part(cds--progress-label) {
   padding-right: 0.5rem;
 }
 
+cds-progress-step.step-inactive::part(cds--progress-optional) {
+  color:#939395;
+}
+
 cds-inline-notification::part(div),
 cds-inline-notification,
 .cds--inline-notification {
@@ -194,10 +198,6 @@ hr {
   width:100%;
 }
 
-.text-disabled {
-  color:#939395;
-}
-
 div#app {
   height: 100vh;
   display: flex;

diff --git a/frontend/src/pages/FormBCeIDPage.vue b/frontend/src/pages/FormBCeIDPage.vue
@@ -352,9 +352,7 @@ const isSmallScreen = useMediaQuery("(max-width: 671px)");
           :class="item.step <= currentTab ? 'step-active' : 'step-inactive'"          
           :disabled="item.disabled"
           v-shadow="3"
-          >
-          <span slot="secondary-label-text" class="cds--progress-optional" :class="{'text-disabled':item.disabled}">{{item.subtitle}}</span>
-          </cds-progress-step>
+        />
       </cds-progress-indicator>
       <error-notification-grouping-component
         :form-data="formData"