chore: some fixes

openedx · Aug 30, 2024 · ea08309 · ea08309
1 parent ad790d7
commit ea08309
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 12 deletions.
diff --git a/common/static/sass/_builtin-block-variables.scss b/common/static/sass/_builtin-block-variables.scss
@@ -35,6 +35,8 @@
  --danger: $danger;
  --darkGrey: $darkGrey;
  --error-color: $error-color;
+ --error-color-dark: darken($error-color, 11%);
+ --error-color-light: lighten($error-color, 25%);
  --font-bold: $font-bold;
  --font-family-sans-serif: $font-family-sans-serif;
  --general-color-accent: $general-color-accent;
@@ -45,6 +47,12 @@
  --gray-l3: $gray-l3;
  --gray-l4: $gray-l4;
  --gray-l6: $gray-l6;
+ --icon-correct: url($static-path + '/images/correct-icon.png');
+ --icon-incorrect: url($static-path + '/images/incorrect-icon.png');
+ --icon-info: url($static-path + '/images/info-icon.png');
+ --icon-partially-correct: url($static-path + '/images/partially-correct-icon.png');
+ --icon-spinner: url($static-path + '/images/spinner.gif');
+ --icon-unanswered: url($static-path + '/images/unanswered-icon.png');
  --incorrect: $incorrect;
  --lightGrey: $lightGrey;
  --lighter-base-font-color: $lighter-base-font-color;

diff --git a/xmodule/assets/capa/_display.scss b/xmodule/assets/capa/_display.scss
@@ -143,7 +143,7 @@ iframe[seamless] {
 }
 
 .inline-error {
- color: darken($error-color, 11%);
+ color: var(--error-color-dark);
 }
 
 div.problem-progress {
@@ -517,7 +517,7 @@ div.problem {
  top: 4px;
  width: 14px;
  height: 14px;
- background: url('#{var(--static-path)}/images/unanswered-icon.png') center center no-repeat;
+ background: var(--icon-unanswered) center center no-repeat;
  }
 
  &.processing, &.ui-icon-processing {
@@ -526,7 +526,7 @@ div.problem {
  top: 6px;
  width: 25px;
  height: 20px;
- background: url('#{var(--static-path)}/images/spinner.gif') center center no-repeat;
+ background: var(--icon-spinner) center center no-repeat;
  }
 
  &.ui-icon-check {
@@ -535,7 +535,7 @@ div.problem {
  top: 3px;
  width: 25px;
  height: 20px;
- background: url('#{var(--static-path)}/images/correct-icon.png') center center no-repeat;
+ background: var(--icon-correct) center center no-repeat;
  }
 
  &.incomplete, &.ui-icon-close {
@@ -544,7 +544,7 @@ div.problem {
  top: 3px;
  width: 20px;
  height: 20px;
- background: url('#{var(--static-path)}/images/incorrect-icon.png') center center no-repeat;
+ background: var(--icon-incorrect) center center no-repeat;
  }
  }
 
@@ -574,7 +574,7 @@ div.problem {
  .grading {
  margin: 0px 7px 0 0;
  padding-left: 25px;
- background: url('#{var(--static-path)}/images/info-icon.png') left center no-repeat;
+ background: var(--icon-info) left center no-repeat;
  text-indent: 0px;
  }
 
@@ -1239,7 +1239,7 @@ div.problem {
 
  div.capa_reset {
  padding: 25px;
- background-color: lighten($error-color, 25%);
+ background-color: var(--error-color-light);
  border: 1px solid var(--error-color);
  border-radius: 3px;
  font-size: 1em;
@@ -1371,7 +1371,7 @@ div.problem {
  .result-errors {
  margin: calc((var(--baseline)/4));
  padding: calc((var(--baseline)/2)) calc((var(--baseline)/2)) calc((var(--baseline)/2)) calc((var(--baseline)*2));
- background: url('#{var(--static-path)}/images/incorrect-icon.png') center left no-repeat;
+ background: var(--icon-incorrect) center left no-repeat;
 
  li {
  color: #b00;
@@ -1403,23 +1403,23 @@ div.problem {
  }
 
  .result-correct {
- background: url('#{var(--static-path)}/images/correct-icon.png') left 20px no-repeat;
+ background: var(--icon-correct) left 20px no-repeat;
 
  .result-actual-output {
  color: #090;
  }
  }
 
  .result-partially-correct {
- background: url('#{var(--static-path)}/images/partially-correct-icon.png') left 20px no-repeat;
+ background: var(--icon-partially-correct) left 20px no-repeat;
 
  .result-actual-output {
  color: #090;
  }
  }
 
  .result-incorrect {
- background: url('#{var(--static-path)}/images/incorrect-icon.png') left 20px no-repeat;
+ background: var(--icon-incorrect) left 20px no-repeat;
 
  .result-actual-output {
  color: #b00;
@@ -1647,7 +1647,7 @@ div.problem {
  &::after {
  @include margin-left(calc((var(--baseline)*0.75)));
 
- content: url('#{var(--static-path)}/images/correct-icon.png');
+ content: var(--icon-correct);
  }
  }