fix: dbx-section style fixes

dereekb · Nov 16, 2022 · 2bdaa88 · 2bdaa88
1 parent de62ecf
commit 2bdaa88
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 8 deletions.
diff --git a/apps/demo/src/app/modules/doc/modules/layout/container/section.component.html b/apps/demo/src/app/modules/doc/modules/layout/container/section.component.html
@@ -7,13 +7,24 @@
         <p>{{ lorem }}</p>
         <button mat-button mat-flat-button color="primary">Ok</button>
       </dbx-section>
+      <dbx-section header="Header With Icon And Elevated" icon="star" hint="This is a section with an icon." [elevate]="true">
+        <span sectionHeader>Custom Navigation Span</span>
+        <p>This section is configured with elevation and a star icon.</p>
+      </dbx-section>
     </doc-feature-example>
     <doc-feature-example header="dbx-subsection" hint="The subsection has a smaller header than a section.">
       <dbx-subsection header="Subsection Header" hint="This is the subsection hint.">
         <span sectionHeader>Custom Navigation Span</span>
         <p>{{ lorem }}</p>
         <button mat-button mat-flat-button color="primary">Ok</button>
       </dbx-subsection>
+      <dbx-section header="Parent Section" icon="circle" hint="This is a section with a subsection inside.">
+        <dbx-subsection header="Subsection Header" icon="circle" hint="This is the subsection hint and a circle." [elevate]="true">
+          <span sectionHeader>Custom Navigation Span</span>
+          <p>{{ lorem }}</p>
+          <button mat-button mat-flat-button color="primary">Ok</button>
+        </dbx-subsection>
+      </dbx-section>
     </doc-feature-example>
   </doc-feature-layout>
 </dbx-content-container>
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/dbx-web/src/lib/layout/section/_section.scss b/packages/dbx-web/src/lib/layout/section/_section.scss
@@ -7,15 +7,15 @@ $content-navbar-height: theming.$content-navbar-height;
 
 $page-h1-height: 32px;
 
-$header-bottom-padding: 16px;
+$header-bottom-margin: 16px;
 $header-left-reserved-space: 200px;
 $header-left-reserved-space-small-screen: 120px;
 
 // MARK: Mixin
 @mixin core() {
   // MARK: Header
   .dbx-section-header {
-    padding: 0 0 $header-bottom-padding;
+    margin: 0 0 $header-bottom-margin;
     box-sizing: border-box;
 
     .dbx-section-header-content {
@@ -24,10 +24,17 @@ $header-left-reserved-space-small-screen: 120px;
       h3,
       h4,
       h5 {
-        padding-top: 5px;
+        padding-top: 4px;
+        padding-bottom: 1px;
         height: $page-h1-height;
-        display: inline;
+        display: inline-flex;
+        align-items: center;
         margin: 0;
+
+        > .mat-icon {
+          padding-right: 2px;
+          padding-bottom: 2px;
+        }
       }
 
       display: flex;

diff --git a/packages/dbx-web/src/lib/layout/section/section.component.ts b/packages/dbx-web/src/lib/layout/section/section.component.ts
@@ -15,7 +15,7 @@ import { DbxSectionHeaderComponent } from './section.header.component';
     </div>
   `,
   host: {
-    class: 'd-block, dbx-section',
+    class: 'd-block dbx-section',
     '[class]': `(elevate) ? 'dbx-section-elevate dbx-content-elevate' : ''`
   }
 })