Remove unneeded calc in scc (#7059)

* Remove unneeded calc in scc * Fix PostCss errors in defaultV2 css * Rename css variables names and use mixin
surveyjs · Oct 3, 2023 · 950f06a · 950f06a
1 parent b61f99c
commit 950f06a
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 47 deletions.
diff --git a/src/defaultV2-theme/blocks/cover.scss b/src/defaultV2-theme/blocks/cover.scss
@@ -92,12 +92,11 @@
 }
 
 .sv-cover__title .sd-title {
+  @include cover_title;
   margin: 0;
   color: $cover-title-forecolor;
   font-family: $font-surveytitle-family;
-  font-size: $font-surveytitle-size;
   font-weight: $font-surveytitle-weight;
-  line-height: multiply(1.25, $font-surveytitle-size);
 }
 
 .sv-cover__description {

diff --git a/src/defaultV2-theme/blocks/mixins.scss b/src/defaultV2-theme/blocks/mixins.scss
@@ -1,13 +1,20 @@
 @mixin page_title {
+  --page-title-font-size: var(--sjs-font-pagetitle-size, calc(1.5 * (var(--sjs-font-size, 16px))));
   font-family: $font-pagetitle-family;
   font-weight: $font-pagetitle-weight;
-  font-size: $font-pagetitle-size;
+  font-size: var(--page-title-font-size);
   color: $font-pagetitle-color;
   position: static;
-  line-height: multiply(1.33, $font-pagetitle-size);
+  line-height: multiply(1.33, var(--page-title-font-size));
   margin: calcSize(0.5) 0px;
 }
 
+@mixin cover_title {
+  --cover-title-font-size: var(--sjs-font-surveytitle-size, calc(2 * (var(--sjs-font-size, 16px))));
+  font-size: var(--cover-title-font-size);
+  line-height: multiply(1.25, var(--cover-title-font-size));
+}
+
 @mixin page_description {
   font-family: $font-pagedescription-family;
   font-weight: $font-pagedescription-weight;

diff --git a/src/defaultV2-theme/blocks/sd-title.scss b/src/defaultV2-theme/blocks/sd-title.scss
@@ -29,11 +29,10 @@
   flex-grow: 1;
 
   .sd-title {
+    @include cover_title;
     color: $primary;
     font-family: $font-surveytitle-family;
-    font-size: $font-surveytitle-size;
     font-weight: $font-surveytitle-weight;
-    line-height: multiply(1.25, $font-surveytitle-size);
   }
 
   h3 {
@@ -62,6 +61,7 @@
 }
 
 .sd-root-modern {
+
   .sv-conver__content,
   .sd-container-modern__title {
     .sd-header__text h3 {

diff --git a/src/defaultV2-theme/variables.scss b/src/defaultV2-theme/variables.scss
@@ -10,14 +10,10 @@ $secondary-backcolor-semi-light: var(--sjs-secondary-backcolor-semi-light, rgba(
 $secondary-forecolor: var(--sjs-secondary-forecolor, #fff);
 $secondary-forecolor-light: var(--sjs-secondary-forecolor-light, rgba(#fff, 0.25));
 
-$editor-background: var(
-  --sjs-editorpanel-backcolor,
-  var(--sjs-editor-background, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9)))
-);
-$question-background: var(
-  --sjs-questionpanel-backcolor,
-  var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff)))
-);
+$editor-background: var(--sjs-editorpanel-backcolor,
+    var(--sjs-editor-background, var(--sjs-general-backcolor-dim-light, var(--background-dim-light, #f9f9f9))));
+$question-background: var(--sjs-questionpanel-backcolor,
+    var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff))));
 
 $background: var(--sjs-general-backcolor, var(--background, #fff));
 $background-dim: var(--sjs-general-backcolor-dim, var(--background-dim, #f3f3f3));
@@ -65,71 +61,96 @@ $font-size: var(--sjs-font-size, 16px);
 
 $font-surveytitle-family: var(--sjs-font-surveytitle-family, var(--font-family));
 $font-surveytitle-weight: var(--sjs-font-surveytitle-weight, 700);
-$font-surveytitle-size: var(--sjs-font-surveytitle-size, calc(2 * var(--sjs-font-size, $font-size)));
 
 $font-pagetitle-family: var(--sjs-font-pagetitle-family, var(--font-family));
 $font-pagetitle-weight: var(--sjs-font-pagetitle-weight, 700);
 $font-pagetitle-color: var(--sjs-font-pagetitle-color, var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91)));
-$font-pagetitle-size: var(--sjs-font-pagetitle-size, calc(1.5 * var(--sjs-font-size, $font-size)));
 
 $font-pagedescription-family: var(--sjs-font-pagedescription-family, var(--font-family));
 $font-pagedescription-weight: var(--sjs-font-pagedescription-weight, 400);
-$font-pagedescription-color: var(
-  --sjs-font-pagedescription-color,
-  var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45))
-);
-$font-pagedescription-size: var(--sjs-font-pagedescription-size, calc(1 * var(--sjs-font-size, $font-size)));
+$font-pagedescription-color: var(--sjs-font-pagedescription-color,
+    var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45)));
+$font-pagedescription-size: var(--sjs-font-pagedescription-size, $font-size);
 
 $font-questiontitle-family: var(--sjs-font-questiontitle-family, var(--font-family));
 $font-questiontitle-weight: var(--sjs-font-questiontitle-weight, 600);
-$font-questiontitle-color: var(
-  --sjs-font-questiontitle-color,
-  var(--sjs-general-forecolor, var(--foreground, #161616))
-);
-$font-questiontitle-size: var(--sjs-font-questiontitle-size, calc(1 * var(--sjs-font-size, $font-size)));
+$font-questiontitle-color: var(--sjs-font-questiontitle-color,
+    var(--sjs-general-forecolor, var(--foreground, #161616)));
+$font-questiontitle-size: var(--sjs-font-questiontitle-size, $font-size);
 
 $font-questiondescription-family: var(--sjs-font-questiondescription-family, var(--font-family));
 $font-questiondescription-weight: var(--sjs-font-questiondescription-weight, 400);
-$font-questiondescription-color: var(
-  --sjs-font-questiondescription-color,
-  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)));
-$font-questionplaceholder-color: var(
-  --sjs-font-questiondescription-color,
-  var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45))
-);
+$font-questiondescription-color: var(--sjs-font-questiondescription-color,
+    var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
+$font-questiondescription-size: var(--sjs-font-questiondescription-size, $font-size);
+$font-questionplaceholder-color: var(--sjs-font-questiondescription-color,
+    var(--sjs-general-forecolor-light, rgba(0, 0, 0, 0.45)));
 
 $font-editorfont-family: var(--sjs-font-editorfont-family, var(--font-family));
 $font-editorfont-weight: var(--sjs-font-editorfont-weight, 400);
 $font-editorfont-color: var(--sjs-font-editorfont-color, var(--sjs-general-forecolor, rgba(0, 0, 0, 0.91)));
 $font-editorfont-placeholdercolor: var(--sjs-font-editorfont-placeholdercolor, var(--sjs-general-forecolor-light, var(--foreground-light, #909090)));
-$font-editorfont-size: var(--sjs-font-editorfont-size, calc(1 * var(--sjs-font-size, $font-size)));
+$font-editorfont-size: var(--sjs-font-editorfont-size, $font-size);
 $base-unit: var(--sjs-base-unit, var(--base-unit, 8px));
 
 @function multiply($a, $b) {
-  $result: calc(#{$a} * #{$b});
-  @return $result;
+  @if $a ==1 {
+    $result: #{$b};
+    @return $result;
+  }
+
+  @else {
+    $result: calc(#{$a} * (#{$b}));
+    @return $result;
+  }
 }
 
 @function calcSize($multiplier) {
-  $result: calc(#{$multiplier} * #{$base-unit});
-  @return $result;
+  @if $multiplier ==1 {
+    $result: #{$base-unit};
+    @return $result;
+  }
+
+  @else {
+    $result: calc(#{$multiplier} * (#{$base-unit}));
+    @return $result;
+  }
 }
 
 @function calcFontSize($multiplier) {
-  $result: calc(#{$multiplier} * #{$font-size});
-  @return $result;
+  @if $multiplier ==1 {
+    $result: #{$font-size};
+    @return $result;
+  }
+
+  @else {
+    $result: calc(#{$multiplier} * (#{$font-size}));
+    @return $result;
+  }
 }
 
 @function calcLineHeight($multiplier) {
-  $result: calc(#{$multiplier} * #{$font-size});
-  @return $result;
+  @if $multiplier ==1 {
+    $result: #{$font-size};
+    @return $result;
+  }
+
+  @else {
+    $result: calc(#{$multiplier} * (#{$font-size}));
+    @return $result;
+  }
 }
 
 @function calcCornerRadius($multiplier) {
-  $result: calc(#{$multiplier} * #{$corner-radius});
-  @return $result;
+  @if $multiplier ==1 {
+    $result: #{$corner-radius};
+    @return $result;
+  }
+
+  @else {
+    $result: calc(#{$multiplier} * (#{$corner-radius}));
+    @return $result;
+  }
 }
 
 @mixin smallBold {
@@ -228,4 +249,4 @@ $base-unit: var(--sjs-base-unit, var(--base-unit, 8px));
   line-height: var(--sjs-article-font-default-lineHeight, 28px);
   text-indent: var(--sjs-article-font-default-paragraphIndent, 0px);
   text-transform: var(--sjs-article-font-default-textCase, "none");
-}
+}