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;
+ }
  }
  }
 }