Replace current class by active

Orange-OpenSource · Feb 22, 2021 · 778e165 · 778e165
1 parent fbf66a6
commit 778e165
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/scss/_stepped-process.scss b/scss/_stepped-process.scss
@@ -7,6 +7,9 @@
     padding: 0;
     margin: 0;
     overflow: hidden;
+    font-weight: $font-weight-bold;
+    text-align: center;
+    list-style: none;
     counter-reset: step;
   }
 }
@@ -16,14 +19,11 @@
   flex: 1;
   padding: map-get($spacers, 2);
   margin-right: $stepped-process-margin-r;
-  font-weight: $font-weight-bold;
-  text-align: center;
-  list-style: none;
   counter-increment: step;
   background-color: $black;
 }
 
-.current {
+.active {
   background-color: $primary;
 
   .stepped-process-link {
@@ -105,24 +105,24 @@
     }
   }
 
-  .current,
-  .current .stepped-process-link {
+  .active,
+  .active .stepped-process-link {
     max-width: none;
   }
 
-  .current::after {
+  .active::after {
     background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 40'><path fill='#{$primary}' d='M0 0l14 20L0 40z'/><path fill='#{$white}' d='M3 0H0l14 20L0 40h3l14-20z'/></svg>"));
   }
 
-  .current ~ .stepped-process-item {
+  .active ~ .stepped-process-item {
     padding-left: 2rem;
 
     &::after {
       background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 40'><path fill='#{$gray-400}' d='M0 0l14 20L0 40z'/><path fill='#{$white}' d='M3 0H0l14 20L0 40h3l14-20z'/></svg>"));
     }
   }
 
-  .current .stepped-process-link::before {
+  .active .stepped-process-link::before {
     content: counter(step) ".\A0";
   }
 }

diff --git a/site/content/docs/5.0/components/stepped-process.md b/site/content/docs/5.0/components/stepped-process.md
@@ -12,7 +12,7 @@ Use a `nav` element with `.stepped-process` class, containing an ordered list `<
 
 Be careful to choose short labels when using multiple steps process, otherwise label will be cut to preserve inline layout. More information can be carried on the `title` attribute of the `.stepped-process-link`.
 
-Use `.current` class to define current step, alongwith with `aria-current="step"`.
+Add `.active` to a `.stepped-process-item` to indicate the current step, alongside `aria-current="step"` to convey the active state to assistive technologies.
 
 ## Example
 
@@ -23,7 +23,7 @@ Use `.current` class to define current step, alongwith with `aria-current="step"
     <li class="stepped-process-item">
       <a class="stepped-process-link" href="#" title="1. Sign in">Sign in</a>
     </li>
-    <li class="stepped-process-item current">
+    <li class="stepped-process-item active">
       <a class="stepped-process-link" href="#" title="2. Review" aria-current="step">Review</a>
     </li>
     <li class="stepped-process-item">