Add theme options for content text colors

Make color of sub heading and content text configurable by themes. REDMINE-18400
codevise · Feb 24, 2021 · 902789a · 902789a
1 parent 2faa506
commit 902789a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/app/assets/stylesheets/pageflow/text_page.scss b/app/assets/stylesheets/pageflow/text_page.scss
@@ -67,7 +67,6 @@ $inverted-background-color: black;
 
       .contentInnerWrapper {
         position: relative;
-        color: black;
 
         .content_background_layer {
           height: 100%;
@@ -380,8 +379,6 @@ $inverted-background-color: black;
   &.invert_text .scroller {
     > div {
       .contentInnerWrapper {
-        color: white;
-
         .content_background_layer {
           background-color: black;
         }

diff --git a/app/assets/stylesheets/pageflow/text_page/themes/default.scss b/app/assets/stylesheets/pageflow/text_page/themes/default.scss
@@ -4,6 +4,12 @@ $text-page-content-text-base-font-size: 0.8em !default;
 /// Used to undo scaling of text title and content text on phone
 $text-page-content-text-phone-base-font-size: 1em !default;
 
+$text-page-content-text-color: #000 !default;
+$text-page-content-text-inverted-color: #fff !default;
+
+$text-page-text-title-color: null !default;
+$text-page-text-title-inverted-color: null !default;
+
 /// Typography of the header displayed above the content text
 /// paragraph.
 $text-page-text-title-typography: () !default;
@@ -40,6 +46,7 @@ $text-page-anchor-inverted-color: $page-anchor-color !default;
   .page_text {
     font-size: $text-page-content-text-base-font-size;
     max-width: 500px;
+    color: $text-page-content-text-color;
 
     @include phone {
       font-size: $text-page-content-text-phone-base-font-size;
@@ -51,6 +58,8 @@ $text-page-anchor-inverted-color: $page-anchor-color !default;
     }
 
     .page_sub_header {
+      color: $text-page-text-title-color;
+
       @include typography(
         $text-page-text-title-typography,
         (
@@ -77,8 +86,16 @@ $text-page-anchor-inverted-color: $page-anchor-color !default;
       color: $text-page-inline-image-caption-inverted-text-color;
     }
 
-    .page_text a {
-      color: $text-page-anchor-inverted-color;
+    .page_text {
+      color: $text-page-content-text-inverted-color;
+
+      a {
+        color: $text-page-anchor-inverted-color;
+      }
+
+      .page_sub_header {
+        color: $text-page-text-title-inverted-color;
+      }
     }
   }
 }