New: expand on Narrative progress indicator state styles (fixes #509) (…

…#510) * narrative progress indicator color and border-color styles added * bg-color mixin narrative progress styles updated to include color, border-color and transparency conditions * update legacy block-color mixin as per bg-color mixin
adaptlearning · May 7, 2024 · 5010471 · 5010471
1 parent 06023c7
commit 5010471
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 0 deletions.
diff --git a/less/plugins/adapt-contrib-narrative/narrative.less b/less/plugins/adapt-contrib-narrative/narrative.less
@@ -21,15 +21,21 @@
 
   &__progress {
     background-color: @item-color;
+    color: @item-color-inverted;
+    border-color: @item-color-inverted;
     border-radius: 50%;
   }
 
   &__progress.is-visited {
     background-color: @visited;
+    color: @visited-inverted;
+    border-color: @visited-inverted;
   }
 
   &__progress.is-selected {
     background-color: @item-color-selected;
+    color: @item-color-inverted-selected;
+    border-color: @item-color-selected;
   }
 
   &__strapline-btn {

diff --git a/less/project/theme-blocks.less b/less/project/theme-blocks.less
@@ -62,10 +62,37 @@
   .narrative {
     &__progress {
       background-color: fade(@@color-inverted, 50%);
+      color: @@color;
+      border-color: inherit;
     }
 
     &__progress.is-selected {
       background-color: @@color-inverted;
+      color: @@color;
+      border-color: @@color-inverted;
+    }
+  }
+
+  & when (@color = transparent-dark) {
+    .narrative {
+      &__progress {
+        background-color: darken(@@color-inverted, 50%);
+        color: @@color-inverted;
+        border-color: @@color;
+      }
+
+      &__progress.is-selected  {
+        background-color: @@color-inverted;
+        color: darken(@@color-inverted, 50%);
+      }
+    }
+  }
+
+  & when (@color = transparent-light) {
+    .narrative {
+      &__progress, &__progress.is-selected {
+        color: @white;
+      }
     }
   }
 }

diff --git a/less/project/theme-common.less b/less/project/theme-common.less
@@ -43,10 +43,37 @@
   .narrative {
     &__progress {
       background-color: fade(@@color-inverted, 50%);
+      color: @@color;
+      border-color: inherit;
     }
 
     &__progress.is-selected {
       background-color: @@color-inverted;
+      color: @@color;
+      border-color: @@color-inverted;
+    }
+  }
+
+  & when (@color = transparent-dark) {
+    .narrative {
+      &__progress {
+        background-color: darken(@@color-inverted, 50%);
+        color: @@color-inverted;
+        border-color: @@color;
+      }
+
+      &__progress.is-selected  {
+        background-color: @@color-inverted;
+        color: darken(@@color-inverted, 50%);
+      }
+    }
+  }
+
+  & when (@color = transparent-light) {
+    .narrative {
+      &__progress, &__progress.is-selected {
+        color: @white;
+      }
     }
   }
 }