diff --git a/src/app/core/components/hljs/hljs.component.ts b/src/app/core/components/hljs/hljs.component.ts index fa49254c..3bf9c1fc 100644 --- a/src/app/core/components/hljs/hljs.component.ts +++ b/src/app/core/components/hljs/hljs.component.ts @@ -1,4 +1,4 @@ -import { Component, ElementRef, Input, OnInit } from '@angular/core'; +import { Component, ContentChild, ElementRef, Input, OnInit } from '@angular/core'; import * as hljs from 'highlight.js'; @Component({ @@ -10,7 +10,7 @@ export class FuseHljsComponent implements OnInit { hljs: any; - @Input('source') source: any; + @ContentChild('source') source: ElementRef; @Input('lang') lang: string; constructor( @@ -22,12 +22,37 @@ export class FuseHljsComponent implements OnInit ngOnInit() { - if ( !this.source && this.lang ) + const originalSource = this.source.nativeElement.value; + + if ( !originalSource || !this.lang ) { return; } + // Split the source into lines + const sourceLines = originalSource.split('\n'); + + // Find the first non-whitespace char index in + // the first line of the source code + const indexOfFirstChar = sourceLines[0].search(/\S|$/); + + // Generate the trimmed source + let source = ''; + + // Iterate through all the lines and trim the + // beginning white space depending on the index + sourceLines.forEach((line, index) => { + + source = source + line.substr(indexOfFirstChar, line.length); + + if ( index !== sourceLines.length - 1 ) + { + source = source + '\n'; + } + }); + this.elementRef.nativeElement.innerHTML = - `
` + this.hljs.highlight(this.lang, this.source).value + `
`; + `
` + this.hljs.highlight(this.lang, source).value + `
`; } } + diff --git a/src/app/core/components/navigation/navigation.model.ts b/src/app/core/components/navigation/navigation.model.ts index 474bc7f7..bcfbf7c5 100644 --- a/src/app/core/components/navigation/navigation.model.ts +++ b/src/app/core/components/navigation/navigation.model.ts @@ -258,6 +258,12 @@ export class FuseNavigation 'icon' : 'text_fields', 'url' : '/ui/typography' }, + { + 'title': 'Helper Classes', + 'type' : 'nav-item', + 'icon' : 'help', + 'url' : '/ui/helper-classes' + }, { 'title' : 'Page Layouts', 'type' : 'nav-collapse', diff --git a/src/app/main/content/ui/helper-classes/helper-classes.component.html b/src/app/main/content/ui/helper-classes/helper-classes.component.html new file mode 100644 index 00000000..f9d6cff1 --- /dev/null +++ b/src/app/main/content/ui/helper-classes/helper-classes.component.html @@ -0,0 +1,38 @@ +
+ + +
+
+
+ home + chevron_right + User Interface +
+
Helper Classes
+
+
+ + + +
+ + + + + + + + + + + + + + + + + +
+ + +
\ No newline at end of file diff --git a/src/app/main/content/ui/helper-classes/helper-classes.component.scss b/src/app/main/content/ui/helper-classes/helper-classes.component.scss new file mode 100644 index 00000000..8fdbe2d4 --- /dev/null +++ b/src/app/main/content/ui/helper-classes/helper-classes.component.scss @@ -0,0 +1,3 @@ +:host { + +} \ No newline at end of file diff --git a/src/app/main/content/ui/helper-classes/helper-classes.component.ts b/src/app/main/content/ui/helper-classes/helper-classes.component.ts new file mode 100644 index 00000000..a9b4dc51 --- /dev/null +++ b/src/app/main/content/ui/helper-classes/helper-classes.component.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'fuse-helper-classes', + templateUrl: './helper-classes.component.html', + styleUrls : ['./helper-classes.component.scss'] +}) +export class HelperClassesComponent +{ + constructor() + { + } + +} diff --git a/src/app/main/content/ui/helper-classes/helper-classes.module.ts b/src/app/main/content/ui/helper-classes/helper-classes.module.ts new file mode 100644 index 00000000..3f16962c --- /dev/null +++ b/src/app/main/content/ui/helper-classes/helper-classes.module.ts @@ -0,0 +1,29 @@ +import { NgModule } from '@angular/core'; +import { SharedModule } from '../../../../core/modules/shared.module'; +import { RouterModule, Routes } from '@angular/router'; + +import { HelperClassesComponent } from './helper-classes.component'; +import { HelperClassesPaddingMarginComponent } from './tabs/padding-margin/padding-margin.component'; +import { HelperClassesWidthHeightComponent } from './tabs/width-height/width-height.component'; + +const routes: Routes = [ + { + path : 'ui/helper-classes', + component: HelperClassesComponent + } +]; + +@NgModule({ + imports : [ + SharedModule, + RouterModule.forChild(routes) + ], + declarations: [ + HelperClassesComponent, + HelperClassesPaddingMarginComponent, + HelperClassesWidthHeightComponent + ] +}) +export class UIHelperClassesModule +{ +} diff --git a/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.html b/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.html new file mode 100644 index 00000000..4038d9f3 --- /dev/null +++ b/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.html @@ -0,0 +1,225 @@ +
+ +
Padding Helpers
+ +
+ +
+ +
+ p-0 +
+ + + + + +
+ +
+ +
+
Min:0 - Max:256, Multiples of 4
+ p-4 +
+ + + + + +
+ +
+ +
+
Min:0 - Max:256, Multiples of 4
+ p-12 +
+ + + + + +
+ +
+ +
Direction Specific Padding Helpers
+ +
+ +
+ +
+
Min:0 - Max:256, Multiples of 4
+ pt-0 + pr-0 + pb-0 + pl-0 + px-0 + py-0 +
+ + + + + +
+ +
+ +
+
Min:0 - Max:256, Multiples of 4
+ pt-4 + pr-4 + pb-4 + pl-4 + px-4 + py-4 +
+ + + + + +
+ +
+ +
Margin Helpers
+ +
+ +
+ +
+ m-0 +
+ + + + + +
+ +
+ +
+
Min:0 - Max:256, Multiples of 4
+ m-4 +
+ + + + + +
+ +
+ +
+
Min:0 - Max:256, Multiples of 4
+ m-12 +
+ + + + + +
+ +
+ +
Direction Specific Margin Helpers
+ +
+ +
+ +
+
Min:0 - Max:256, Multiples of 4
+ mt-0 + mr-0 + mb-0 + ml-0 + mx-0 + my-0 +
+ + + + + +
+ +
+ +
+
Min:0 - Max:256, Multiples of 4
+ mt-4 + mr-4 + mb-4 + ml-4 + mx-4 + my-4 +
+ + + + + +
+ +
+ +
\ No newline at end of file diff --git a/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.scss b/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.scss new file mode 100644 index 00000000..17201e2f --- /dev/null +++ b/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.scss @@ -0,0 +1,31 @@ +:host { + + #helper-classes-padding-margin { + + .source-code { + position: relative; + background: #F3F4F6; + margin-bottom: 24px; + min-height: 180px; + + code { + background: none !important; + } + } + + .preview { + font-size: 16px; + padding: 16px; + margin-bottom: 24px; + min-height: 180px; + + &:last-child { + margin-bottom: 0; + } + + .mat-caption { + margin-bottom: 16px; + } + } + } +} \ No newline at end of file diff --git a/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.ts b/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.ts new file mode 100644 index 00000000..02151317 --- /dev/null +++ b/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'fuse-helper-classes-padding-margin', + templateUrl: './padding-margin.component.html', + styleUrls : ['./padding-margin.component.scss'] +}) +export class HelperClassesPaddingMarginComponent +{ + + constructor() + { + + } +} diff --git a/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.html b/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.html new file mode 100644 index 00000000..79fda541 --- /dev/null +++ b/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.html @@ -0,0 +1,141 @@ +
+ +
Width Helpers
+ +
+ +
+ +
+ w-0 +
+ + + + + +
+ +
+ +
+
Min:0 - Max:512, Multiples of 4
+ w-100 +
+ + + + + +
+ +
+ +
+
Min:0 - Max:100, Multiples of 5
+ w-25-p +
+ + + + + +
+ +
+ +
+
Min:0 - Max:100, Multiples of 5
+ w-100-p +
+ + + + + +
+ +
+ +
Height Helpers
+ +
+ +
+ +
+ h-0 +
+ + + + + +
+ +
+ +
+
Min:0 - Max:512, Multiples of 4
+ h-100 +
+ + + + + +
+ +
+ +
+
Min:0 - Max:100, Multiples of 5
+ h-25-p +
+ + + + + +
+ +
+ +
+
Min:0 - Max:100, Multiples of 5
+ h-100-p +
+ + + + + +
+ +
+ +
\ No newline at end of file diff --git a/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.scss b/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.scss new file mode 100644 index 00000000..d1ed4228 --- /dev/null +++ b/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.scss @@ -0,0 +1,31 @@ +:host { + + #helper-classes-width-height { + + .source-code { + position: relative; + background: #F3F4F6; + margin-bottom: 24px; + min-height: 180px; + + code { + background: none !important; + } + } + + .preview { + font-size: 16px; + padding: 16px; + margin-bottom: 24px; + min-height: 180px; + + &:last-child { + margin-bottom: 0; + } + + .mat-caption { + margin-bottom: 16px; + } + } + } +} \ No newline at end of file diff --git a/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.ts b/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.ts new file mode 100644 index 00000000..ccb778c3 --- /dev/null +++ b/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'fuse-helper-classes-width-height', + templateUrl: './width-height.component.html', + styleUrls : ['./width-height.component.scss'] +}) +export class HelperClassesWidthHeightComponent +{ + + constructor() + { + + } +} diff --git a/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.html b/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.html new file mode 100644 index 00000000..71a9f742 --- /dev/null +++ b/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.html @@ -0,0 +1,203 @@ +
+ +
Blockquotes
+ +
+ +
+ +
+
+

+ You can do anything, but not everything. +

+
+
+ + + + + +
+ +
+ +
+
+

+ You can do anything, but not everything. +

+
+ David Allen +
+
+
+ + + + + +
+ +
+ +
+
+

+ You can do anything, but not everything. +

+
+ David Allen +
+
+
+ + + + + +
+ +
+ +
Lists
+ +
+ +
+ +
+
    +
  1. Ordered list item
    2. +
  2. + Ordered list item +
      +
    1. Ordered list item
      2. +
    2. Ordered list item
      3. +
    +
    3. +
  3. Ordered list item
    4. +
  4. Ordered list item
    5. +
+
+ + + + + +
+ +
+ +
+
    +
  • Unordered list item
    • +
  • + Unordered list item +
      +
    • Unordered list item
      • +
    • Unordered list item
      • +
    +
    • +
  • Unordered list item
    • +
  • Unordered list item
    • +
+
+ + + + + +
+ +
+ +
Definition Lists
+ +
+ +
+ +
+
+
Definition term
+
This is the definition description
+ +
Another definition term
+
This is also another definition description
+
+
+ + + + + +
+ +
+ +
\ No newline at end of file diff --git a/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.scss b/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.scss new file mode 100644 index 00000000..a4340ab6 --- /dev/null +++ b/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.scss @@ -0,0 +1,31 @@ +:host { + + #typography-blockquotes-lists { + + .source-code { + position: relative; + background: #F3F4F6; + margin-bottom: 24px; + min-height: 180px; + + code { + background: none !important; + } + } + + .preview { + font-size: 16px; + padding: 16px; + margin-bottom: 24px; + min-height: 180px; + + &:last-child { + margin-bottom: 0; + } + + .mat-caption { + margin-bottom: 16px; + } + } + } +} \ No newline at end of file diff --git a/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.ts b/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.ts new file mode 100644 index 00000000..65f7a7b2 --- /dev/null +++ b/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'fuse-typography-blockquotes-lists', + templateUrl: './blockquotes-lists.component.html', + styleUrls : ['./blockquotes-lists.component.scss'] +}) +export class TypographyBlockquotesListsComponent +{ + + constructor() + { + + } +} diff --git a/src/app/main/content/ui/typography/tabs/headings/headings.component.html b/src/app/main/content/ui/typography/tabs/headings/headings.component.html new file mode 100644 index 00000000..1c9a2501 --- /dev/null +++ b/src/app/main/content/ui/typography/tabs/headings/headings.component.html @@ -0,0 +1,292 @@ +
+ +
Material design typography classes
+ +
+ +
+ +
+
112px
+ Display 4 +
+ + + + + +
+ +
+ +
+
56px
+ Display 3 +
+ + + + + +
+ +
+ +
+
45px
+ Display 2 +
+ + + + +
+ +
+ +
+
34px
+ Display 1 +
+ + + + + +
+ +
+ +
+
24px
+ Headline +
+ + + + + +
+ +
+ +
+
20px
+ Title +
+ + + + + +
+ +
+ +
+
16px
+ Subheading 2 +
+ + + + + +
+ +
+ +
+
15px
+ Subheading 1 +
+ + + + + +
+ +
+ +
+
14px
+ Body 1 +
+ + + + + +
+ +
+ +
+
14px
+ Body 2 +
+ + + + + +
+ +
+ +
+
12px
+ Caption +
+ + + + + +
+ +
+ +
Standard Headings
+ +
+ +
+ +
+
24px
+ Heading 1 +
+ + + + + +
+ +
+ +
+
20px
+ Heading 2 +
+ + + + + +
+ +
+ +
+
16px
+ Heading 3 +
+ + + + + +
+ +
+ +
+
15px
+ Heading 4 +
+ + + + + +
+ +
+ +
+
13px
+ Heading 5 +
+ + + + + +
+ +
+ +
+
12px
+ Heading 6 +
+ + + + + +
+ +
+ +
\ No newline at end of file diff --git a/src/app/main/content/ui/typography/tabs/headings/headings.component.scss b/src/app/main/content/ui/typography/tabs/headings/headings.component.scss new file mode 100644 index 00000000..94d9b834 --- /dev/null +++ b/src/app/main/content/ui/typography/tabs/headings/headings.component.scss @@ -0,0 +1,31 @@ +:host { + + #typography-headings { + + .source-code { + position: relative; + background: #F3F4F6; + margin-bottom: 24px; + min-height: 180px; + + code { + background: none !important; + } + } + + .preview { + font-size: 16px; + padding: 16px; + margin-bottom: 24px; + min-height: 180px; + + &:last-child { + margin-bottom: 0; + } + + .mat-caption { + margin-bottom: 16px; + } + } + } +} \ No newline at end of file diff --git a/src/app/main/content/ui/typography/tabs/headings/headings.component.ts b/src/app/main/content/ui/typography/tabs/headings/headings.component.ts new file mode 100644 index 00000000..ce4027d8 --- /dev/null +++ b/src/app/main/content/ui/typography/tabs/headings/headings.component.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'fuse-typography-headings', + templateUrl: './headings.component.html', + styleUrls : ['./headings.component.scss'] +}) +export class TypographyHeadingsComponent +{ + + constructor() + { + + } +} diff --git a/src/app/main/content/ui/typography/tabs/helpers/helpers.component.html b/src/app/main/content/ui/typography/tabs/helpers/helpers.component.html new file mode 100644 index 00000000..0269bf1e --- /dev/null +++ b/src/app/main/content/ui/typography/tabs/helpers/helpers.component.html @@ -0,0 +1,249 @@ +
+ +
Font Weight
+ +
+ +
+ +
+
From 100 to 900
+ font-weight: 100 + ... + font-weight: 900 +
+ + + + + +
+ +
+ +
Font Size
+ +
+ +
+ +
+
Multiplies of 2, max: 120
+ font-size: 20 +
+ + + + + +
+ +
+ +
Line Height
+ +
+ +
+ +
+
Multiplies of 2, max: 120
+ line-height: 2 + ... + line-height: 120 +
+ + + + + +
+ +
+ +
Other helpers
+ +
+ +
+ +
+
Left aligned text
+
+ + + + + +
+ +
+ +
+
Center aligned text
+
+ + + + + +
+ +
+ +
+
Right aligned text
+
+ + + + + +
+ +
+ +
+

+ Boxed text +

+
+ + + + + +
+ +
+ +
+

+ Boxed text light +

+
+ + + + + +
+ +
+ +
+

+ Strike-through text +

+
+ + + + + +
+ +
+ +
+
Italic text
+
+ + + + + +
+ +
+ +
+
Semi-bold text
+
+ + + + + +
+ +
+ +
+
Bold text
+
+ + + + + +
+ +
+ +
+ This is a truncated text. It will be truncated if it's too long. Vivamus + convallis dui porta massa. + +
+ + + + + +
+ +
+ +
\ No newline at end of file diff --git a/src/app/main/content/ui/typography/tabs/helpers/helpers.component.scss b/src/app/main/content/ui/typography/tabs/helpers/helpers.component.scss new file mode 100644 index 00000000..48dd1da4 --- /dev/null +++ b/src/app/main/content/ui/typography/tabs/helpers/helpers.component.scss @@ -0,0 +1,31 @@ +:host { + + #typography-helpers { + + .source-code { + position: relative; + background: #F3F4F6; + margin-bottom: 24px; + min-height: 180px; + + code { + background: none !important; + } + } + + .preview { + font-size: 16px; + padding: 16px; + margin-bottom: 24px; + min-height: 180px; + + &:last-child { + margin-bottom: 0; + } + + .mat-caption { + margin-bottom: 16px; + } + } + } +} \ No newline at end of file diff --git a/src/app/main/content/ui/typography/tabs/helpers/helpers.component.ts b/src/app/main/content/ui/typography/tabs/helpers/helpers.component.ts new file mode 100644 index 00000000..57120790 --- /dev/null +++ b/src/app/main/content/ui/typography/tabs/helpers/helpers.component.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'fuse-typography-helpers', + templateUrl: './helpers.component.html', + styleUrls : ['./helpers.component.scss'] +}) +export class TypographyHelpersComponent +{ + + constructor() + { + + } +} diff --git a/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.html b/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.html new file mode 100644 index 00000000..2d3cca52 --- /dev/null +++ b/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.html @@ -0,0 +1,232 @@ +
+ +
+ +
+ +
+ CSS +
+ + + + + +
+ +
+ +
+ This is a marked text. +
+ + + + + +
+ +
+ +
+ + This is a deleted text. + +
+ + + + + +
+ +
+ +
+ This is a strike-through text. +
+ + + + + +
+ +
+ +
+ This is an underlined text. +
+ + + + + +
+ +
+ +
+ + This is a small text. + +
+ + + + + +
+ +
+ +
+ This is a strong text. +
+ + + + + +
+ +
+ +
+ This is an italic text. +
+ + + + + +
+ +
+ +
+ This is a + super + text. + +
+ + + + + +
+ +
+ +
+ + This is a + sub + text. + +
+ + + + + +
+ +
+ +
+ This is a + capitalized + text. + +
+ + + + + +
+ +
+ +
+ This is an + uppercase + text. + +
+ + + + + +
+ +
+ +
+ This is a + LOWERCASE + text. + +
+ + + + + +
+ +
+ +
\ No newline at end of file diff --git a/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.scss b/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.scss new file mode 100644 index 00000000..0445f273 --- /dev/null +++ b/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.scss @@ -0,0 +1,31 @@ +:host { + + #typography-inline-text-elements { + + .source-code { + position: relative; + background: #F3F4F6; + margin-bottom: 24px; + min-height: 180px; + + code { + background: none !important; + } + } + + .preview { + font-size: 16px; + padding: 16px; + margin-bottom: 24px; + min-height: 180px; + + &:last-child { + margin-bottom: 0; + } + + .mat-caption { + margin-bottom: 16px; + } + } + } +} \ No newline at end of file diff --git a/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.ts b/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.ts new file mode 100644 index 00000000..54347cc0 --- /dev/null +++ b/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'fuse-typography-inline-text-elements', + templateUrl: './inline-text-elements.component.html', + styleUrls : ['./inline-text-elements.component.scss'] +}) +export class TypographyInlineTextElementsComponent +{ + + constructor() + { + + } +} diff --git a/src/app/main/content/ui/typography/typography.component.html b/src/app/main/content/ui/typography/typography.component.html index 4cc0daf4..b6f34029 100644 --- a/src/app/main/content/ui/typography/typography.component.html +++ b/src/app/main/content/ui/typography/typography.component.html @@ -20,266 +20,25 @@ -
- -
Material design typography classes
- -
- -
- -
-
112px
- Display 4 -
- - - - -
- -
- -
-
56px
- Display 3 -
- - - - -
- -
- -
-
45px
- Display 2 -
- - - -
- -
- -
-
34px
- Display 1 -
- - - - -
- -
- -
-
24px
- Headline -
- - - - -
- -
- -
-
20px
- Title -
- - - - -
- -
- -
-
16px
- Subheading 2 -
- - - - -
- -
- -
-
15px
- Subheading 1 -
- - - - -
- -
- -
-
14px
- Body 1 -
- - - - -
- -
- -
-
14px
- Body 2 -
- - - - -
- -
- -
-
12px
- Caption -
- - - - -
- -
- -
Standard Headings
- -
- -
- -
-
24px
- Heading 1 -
- - - - -
- -
- -
-
20px
- Heading 2 -
- - - - -
- -
- -
-
16px
- Heading 3 -
- - - - -
- -
- -
-
15px
- Heading 4 -
- - - - -
- -
- -
-
13px
- Heading 5 -
- - - -
- -
- -
-
12px
- Heading 6 -
- - - - -
- -
- -
+ + + + diff --git a/src/app/main/content/ui/typography/typography.component.scss b/src/app/main/content/ui/typography/typography.component.scss index 6f1e1604..8fdbe2d4 100644 --- a/src/app/main/content/ui/typography/typography.component.scss +++ b/src/app/main/content/ui/typography/typography.component.scss @@ -1,34 +1,3 @@ :host { - #typography { - - .content { - - .source-code { - position: relative; - background: #F3F4F6; - margin-bottom: 24px; - min-height: 180px; - - code { - background: none !important; - } - } - - .preview { - font-size: 16px; - padding: 16px; - margin-bottom: 24px; - min-height: 180px; - - &:last-child { - margin-bottom: 0; - } - - .mat-caption { - margin-bottom: 16px; - } - } - } - } } \ No newline at end of file diff --git a/src/app/main/content/ui/typography/typography.module.ts b/src/app/main/content/ui/typography/typography.module.ts index 12c50460..3a0134b0 100644 --- a/src/app/main/content/ui/typography/typography.module.ts +++ b/src/app/main/content/ui/typography/typography.module.ts @@ -1,7 +1,12 @@ import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; import { SharedModule } from '../../../../core/modules/shared.module'; +import { RouterModule, Routes } from '@angular/router'; + import { TypographyComponent } from './typography.component'; +import { TypographyHeadingsComponent } from './tabs/headings/headings.component'; +import { TypographyInlineTextElementsComponent } from './tabs/inline-text-elements/inline-text-elements.component'; +import { TypographyBlockquotesListsComponent } from './tabs/blockquotes-lists/blockquotes-lists.component'; +import { TypographyHelpersComponent } from './tabs/helpers/helpers.component'; const routes: Routes = [ { @@ -16,7 +21,11 @@ const routes: Routes = [ RouterModule.forChild(routes) ], declarations: [ - TypographyComponent + TypographyComponent, + TypographyHeadingsComponent, + TypographyInlineTextElementsComponent, + TypographyBlockquotesListsComponent, + TypographyHelpersComponent ] }) export class UITypographyModule diff --git a/src/app/main/content/ui/ui.module.ts b/src/app/main/content/ui/ui.module.ts index e2a18b93..c98d9f42 100644 --- a/src/app/main/content/ui/ui.module.ts +++ b/src/app/main/content/ui/ui.module.ts @@ -3,12 +3,14 @@ import { NgModule } from '@angular/core'; import { UIPageLayoutsModule } from './page-layouts/page-layouts.module'; import { UIColorsModule } from './colors/colors.module'; import { UITypographyModule } from './typography/typography.module'; +import { UIHelperClassesModule } from './helper-classes/helper-classes.module'; @NgModule({ imports: [ UIColorsModule, UIPageLayoutsModule, - UITypographyModule + UITypographyModule, + UIHelperClassesModule ] }) export class UIModule