Added styling to the MCR to aid in readability

Mainly the sub-header-1 and sub-header-2 styles which are used in CSET proper, are now available in the MCR output.
cisagov · Nov 6, 2024 · 6317da3 · 6317da3
1 parent 9069836
commit 6317da3
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 6 deletions.
diff --git a/CSETWebNg/src/app/reports/module-content/module-content/module-content.component.scss b/CSETWebNg/src/app/reports/module-content/module-content/module-content.component.scss
@@ -21,6 +21,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE. 
 
 */
+
 .color1 {
     color: #044;
 }
@@ -37,4 +38,4 @@ SOFTWARE.
 
 .resource-table td.section-ref {
     white-space: nowrap;
-}
+}
diff --git a/CSETWebNg/src/app/reports/module-content/module-content/module-content.component.ts b/CSETWebNg/src/app/reports/module-content/module-content/module-content.component.ts
@@ -21,15 +21,16 @@
 //  SOFTWARE.
 //
 ////////////////////////////////
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { ReportService } from '../../../services/report.service';
 
 
 @Component({
   selector: 'app-module-content',
   templateUrl: './module-content.component.html',
-  styleUrls: ['./module-content.component.scss', '../../../reports/reports.scss']
+  styleUrls: ['../../../reports/reports.scss', './module-content.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class ModuleContentComponent implements OnInit {
 

diff --git a/CSETWebNg/src/app/reports/reports.scss b/CSETWebNg/src/app/reports/reports.scss
@@ -26,9 +26,13 @@ SOFTWARE.
 
 $primary-color: #052637;
 $secondary-color: #094997;
+
 $gray-50: #fafafa;
 $gray-100: #f2f2f2;
 
+$primary-550: $primary-color;
+$primary-900: $secondary-color;
+
 
 * {
   font-family: Arial, sans-serif;
@@ -525,7 +529,8 @@ table.assessment-summary th {
   padding: .5rem;
 }
 
-.table.table-td-p2 th, .table.table-td-p2 td {
+.table.table-td-p2 th,
+.table.table-td-p2 td {
   padding: .5rem !important;
 }
 
@@ -1917,14 +1922,33 @@ div.spinner-size-50 {
 
 
 
-///   CPG Styles ////////////////////////////////////////////////
+///   Supplemental Guidance Styles ////////////////////////////////////////////////
+
 .sub-header-1 {
   font-weight: bold;
-  font-size: 1.05rem;
+  font-size: 1.1rem;
+  color: $primary-550;
 }
 
+.sub-header-2 {
+  font-weight: bold;
+  font-size: 1rem;
+  color: $primary-900;
+}
 
+ol.alpha-bracket {
+  list-style-type: none;
+  counter-reset: list-counter;
+}
+
+ol.alpha-bracket li {
+  counter-increment: list-counter;
+  margin-bottom: 5px;
+}
 
+ol.alpha-bracket li::before {
+  content: "[" counter(list-counter, lower-alpha) "] ";
+}