Themes issues (#6630)

* A special state in light mode for navigatin buttons surveyjs/private-tasks#246 (comment) * fix question description forecolor --------- Co-authored-by: OlgaLarina <olga.larina.dev@gmail.com>
surveyjs · Aug 2, 2023 · 1bdc734 · 1bdc734
1 parent 216ba95
commit 1bdc734
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 1 deletion.
diff --git a/src/defaultCss/defaultV2Css.ts b/src/defaultCss/defaultV2Css.ts
@@ -14,6 +14,7 @@ export var defaultV2Css = {
   root: "sd-root-modern",
   rootMobile: "sd-root-modern--mobile",
   rootReadOnly: "sd-root--readonly",
+  rootCompact: "sd-root--compact",
   rootBackgroundImage: "sd-root_background-image",
   container: "sd-container-modern",
   header: "sd-title sd-container-modern__title",

diff --git a/src/defaultV2-theme/blocks/sd-navigation.scss b/src/defaultV2-theme/blocks/sd-navigation.scss
@@ -3,6 +3,16 @@
     padding: calcSize(2) calcSize(8);
   }
 }
+
+.sd-root--compact .sd-body__navigation {
+  .sd-btn:not(.sd-btn--action) {
+    background-color: $background-dim-light;
+  }
+  .sd-btn:not(.sd-btn--action):hover {
+    background-color: $background-dim-dark;
+  }
+}
+
 .sd-root-modern--mobile .sd-body__navigation {
   .sv-action:not(.sv-action--hidden),
   .sd-btn {

diff --git a/src/defaultV2-theme/variables.scss b/src/defaultV2-theme/variables.scss
@@ -89,7 +89,7 @@ $font-questiondescription-family: var(--sjs-font-questiondescription-family, var
 $font-questiondescription-weight: var(--sjs-font-questiondescription-weight, 400);
 $font-questiondescription-color: var(
   --sjs-font-questiondescription-color,
-  var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45))
+  var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45))
 );
 $font-questiondescription-size: var(--sjs-font-questiondescription-size, calc(1 * var(--sjs-font-size, $font-size)));
 

diff --git a/src/survey.ts b/src/survey.ts
@@ -2524,6 +2524,7 @@ export class SurveyModel extends SurveyElementCore
     for (var i = 0; i < pages.length; i++) {
       pages[i].updateElementCss(reNew);
     }
+    this.updateCss();
   }
   /**
    * Gets or sets the error message position.
@@ -4473,6 +4474,7 @@ export class SurveyModel extends SurveyElementCore
       .append(this.css.root)
       .append(this.css.rootMobile, this.isMobile)
       .append(this.css.rootReadOnly, this.mode === "display")
+      .append(this.css.rootCompact, this.isCompact)
       .toString();
   }
   private resizeObserver: ResizeObserver;