#7189 Update the Completed Before page

Fixes #7189
surveyjs · Nov 3, 2023 · e9b0dbc · e9b0dbc
1 parent 31f9a78
commit e9b0dbc
Show file tree

Hide file tree

Showing 6 changed files with 178 additions and 299 deletions.
diff --git a/src/common-styles/sv-ranking.scss b/src/common-styles/sv-ranking.scss
@@ -1,4 +1,5 @@
 @import "../defaultV2-theme/variables.scss";
+@import "../defaultV2-theme/mixins.scss";
 
 .sv-ranking {
   outline: none;

diff --git a/src/defaultV2-theme/blocks/sd-body.scss b/src/defaultV2-theme/blocks/sd-body.scss
@@ -1,3 +1,4 @@
+@import "../defaultV2-theme/mixins.scss";
 .sd-body {
   width: 100%;
 
@@ -111,70 +112,7 @@
 
 .sd-body--empty,
 .sd-body--loading {
-  h1 {
-    @include articleXXLargeFont;
-  }
-
-  h2 {
-    @include articleXLargeFont;
-  }
-
-  h3 {
-    @include articleLargeFont;
-  }
-
-  h4,
-  h5,
-  h6 {
-    @include articleMediumFont;
-  }
-
-  td,
-  span,
-  div,
-  p {
-    @include articleDefaultFont;
-  }
-
-  a {
-    color: $primary;
-  }
-
-  button {
-    display: flex;
-    align-items: center;
-    padding: calcSize(1.5) calcSize(4);
-    vertical-align: baseline;
-    text-align: center;
-    background-color: $background;
-    box-shadow: $shadow-small;
-    border: none;
-    border-radius: calcSize(0.5);
-    cursor: pointer;
-    user-select: none;
-    outline: solid calcSize(0.25) transparent;
-
-    &:hover {
-      background-color: $background-dark;
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 2px $primary;
-    }
-
-    span {
-      display: flex;
-      align-items: center;
-      flex-grow: 1;
-      justify-content: center;
-      color: $primary;
-      font-weight: 600;
-      font-style: normal;
-      font-family: $font-family;
-      font-size: $font-questiontitle-size;
-      line-height: multiply(1.5, $font-questiontitle-size);
-    }
-  }
+  @include articleHtml;
 }
 
 .sd-root_background-image {

diff --git a/src/defaultV2-theme/blocks/sd-completedpage.scss b/src/defaultV2-theme/blocks/sd-completedpage.scss
@@ -1,80 +1,13 @@
-.sd-completedpage {
+@import "../defaultV2-theme/mixins.scss";
+
+.sd-completedpage,
+.sd-completed-before-page {
   font-family: $font-family;
   font-weight: bold;
   box-sizing: border-box;
   text-align: center;
   height: auto;
-}
-
-.sd-completedpage,
-.sd-completed-before-page {
-  // h3 {
-  //   font-size: calcFontSize(1.5);
-  // }
-
-  h1 {
-    @include articleXXLargeFont;
-  }
-
-  h2 {
-    @include articleXLargeFont;
-  }
-
-  h3 {
-    @include articleLargeFont;
-  }
-
-  h4,  
-  h5,
-  h6 {
-    @include articleMediumFont;
-  }
-
-  td,
-  span,
-  div,
-  p {
-    @include articleDefaultFont;
-  }
-
-  a {
-    color: $primary;
-  }
-
-  button {
-    display: flex;
-    align-items: center;
-    padding: calcSize(1.5) calcSize(4);
-    vertical-align: baseline;
-    text-align: center;
-    background-color: $background;
-    box-shadow: $shadow-small;
-    border: none;
-    border-radius: calcSize(0.5);
-    cursor: pointer;
-    user-select: none;
-    outline: solid calcSize(0.25) transparent;
-
-    &:hover {
-      background-color: $background-dark;
-    }
-    &:focus {
-      box-shadow: 0 0 0 2px $primary;
-    }
-
-    span {
-      display: flex;
-      align-items: center;
-      flex-grow: 1;
-      justify-content: center;
-      color: $primary;
-      font-weight: 600;
-      font-style: normal;
-      font-family: $font-family;
-      font-size: $font-questiontitle-size;
-      line-height: multiply(1.5, $font-questiontitle-size);
-    }
-  }
+  @include articleHtml;
 }
 
 .sd-completedpage:before,

diff --git a/src/defaultV2-theme/blocks/sd-html.scss b/src/defaultV2-theme/blocks/sd-html.scss
@@ -1,71 +1,8 @@
+@import "../defaultV2-theme/mixins.scss";
 .sd-html {
   white-space: initial;
 }
 
 .sd-html {
-  @include articleDefaultFont;
-
-  h1 {
-    @include articleXXLargeFont;
-  }
-
-  h2 {
-    @include articleXLargeFont;
-  }
-
-  h3 {
-    @include articleLargeFont;
-  }
-
-  h4,
-  h5,
-  h6 {
-    @include articleMediumFont;
-  }
-
-  td,
-  span,
-  div,
-  p {
-    @include articleDefaultFont;
-  }
-
-  a {
-    color: $primary;
-  }
-
-  button {
-    display: flex;
-    align-items: center;
-    padding: calcSize(1.5) calcSize(4);
-    vertical-align: baseline;
-    text-align: center;
-    background-color: $background;
-    box-shadow: $shadow-small;
-    border: none;
-    border-radius: calcSize(0.5);
-    cursor: pointer;
-    user-select: none;
-    outline: solid calcSize(0.25) transparent;
-
-    &:hover {
-      background-color: $background-dark;
-    }
-    &:focus {
-      box-shadow: 0 0 0 2px $primary;
-    }
-
-    span {
-      display: flex;
-      align-items: center;
-      flex-grow: 1;
-      justify-content: center;
-      color: $primary;
-      font-weight: 600;
-      font-style: normal;
-      font-family: $font-family;
-      font-size: $font-questiontitle-size;
-      line-height: multiply(1.5, $font-questiontitle-size);
-    }
-  }
+  @include articleHtml;
 }