purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 12:35:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/withinpixels/fuse2

Browse Source
This commit is contained in:
mustafahlvc 2017-08-03 16:35:46 +03:00
commit 54da3f4ef5
28 changed files with 1755 additions and 283 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/app/core/components/hljs/hljs.component.ts
View File

@ -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'; import * as hljs from 'highlight.js';
@Component({ @Component({
@ -10,7 +10,7 @@ export class FuseHljsComponent implements OnInit
{ {
hljs: any; hljs: any;
@Input('source') source: any; @ContentChild('source') source: ElementRef;
@Input('lang') lang: string; @Input('lang') lang: string;
constructor( constructor(
@ -22,12 +22,37 @@ export class FuseHljsComponent implements OnInit
ngOnInit() ngOnInit()
{ {
if ( !this.source && this.lang ) const originalSource = this.source.nativeElement.value;
if ( !originalSource || !this.lang )
{ {
return; 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.elementRef.nativeElement.innerHTML =
`<pre><code class="highlight">` + this.hljs.highlight(this.lang, this.source).value + `</code></pre>`; `<pre><code class="highlight">` + this.hljs.highlight(this.lang, source).value + `</code></pre>`;
} }
} }

6
src/app/core/components/navigation/navigation.model.ts
View File

@ -258,6 +258,12 @@ export class FuseNavigation
'icon' : 'text_fields', 'icon' : 'text_fields',
'url' : '/ui/typography' 'url' : '/ui/typography'
}, },
{
'title': 'Helper Classes',
'type' : 'nav-item',
'icon' : 'help',
'url' : '/ui/helper-classes'
},
{ {
'title' : 'Page Layouts', 'title' : 'Page Layouts',
'type' : 'nav-collapse', 'type' : 'nav-collapse',

38
src/app/main/content/ui/helper-classes/helper-classes.component.html Normal file
View File

@ -0,0 +1,38 @@
<div id="helper-classes" class="page-layout simple tabbed" fxLayout="column">
<!-- HEADER -->
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
<div fxLayout="column" fxLayoutAlign="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="secondary-text s-16">home</md-icon>
<md-icon class="secondary-text s-16">chevron_right</md-icon>
<span class="secondary-text">User Interface</span>
</div>
<div class="h2 mt-16">Helper Classes</div>
</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content">
<md-tab-group md-dynamic-height="true">
<md-tab label="Padding & Margin Helpers">
<fuse-helper-classes-padding-margin></fuse-helper-classes-padding-margin>
</md-tab>
<md-tab label="Width & Height Helpers">
<fuse-helper-classes-width-height></fuse-helper-classes-width-height>
</md-tab>
</md-tab-group>
</div>
<!-- / CONTENT -->
</div>

3
src/app/main/content/ui/helper-classes/helper-classes.component.scss Normal file
View File

@ -0,0 +1,3 @@
:host {
}

14
src/app/main/content/ui/helper-classes/helper-classes.component.ts Normal file
View File

@ -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()
{
}
}

29
src/app/main/content/ui/helper-classes/helper-classes.module.ts Normal file
View File

@ -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
{
}

225
src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.html Normal file
View File

@ -0,0 +1,225 @@
<div id="helper-classes-padding-margin" class="p-24">
<div class="mat-title">Padding Helpers</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span>p-0</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="p-0">No padding</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
<span>p-4</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="p-4">4px padding</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
<span>p-12</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="p-12">12px padding</span>
</textarea>
</fuse-hljs>
</div>
</div>
<div class="mat-title mt-20">Direction Specific Padding Helpers</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
<span>pt-0</span>
<span>pr-0</span>
<span>pb-0</span>
<span>pl-0</span>
<span>px-0</span>
<span>py-0</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="pt-0">0 padding from top</span>
<span class="pr-0">0 padding from right</span>
<span class="pb-0">0 padding from bottom</span>
<span class="pl-0">0 padding from left</span>
<span class="px-0">0 padding from left and right</span>
<span class="py-0">0 padding from top and bottom</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
<span>pt-4</span>
<span>pr-4</span>
<span>pb-4</span>
<span>pl-4</span>
<span>px-4</span>
<span>py-4</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="pt-4">4px padding from top</span>
<span class="pr-4">4px padding from right</span>
<span class="pb-4">4px padding from bottom</span>
<span class="pl-4">4px padding from left</span>
<span class="px-4">4px padding from left and right</span>
<span class="py-4">4px padding from top and bottom</span>
</textarea>
</fuse-hljs>
</div>
</div>
<div class="mat-title mt-20">Margin Helpers</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span>m-0</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="m-0">No margin</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
<span>m-4</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="m-4">4px margin</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
<span>m-12</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="m-12">12px margin</span>
</textarea>
</fuse-hljs>
</div>
</div>
<div class="mat-title mt-20">Direction Specific Margin Helpers</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
<span>mt-0</span>
<span>mr-0</span>
<span>mb-0</span>
<span>ml-0</span>
<span>mx-0</span>
<span>my-0</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="mt-0">0 margin from top</span>
<span class="mr-0">0 margin from right</span>
<span class="mb-0">0 margin from bottom</span>
<span class="ml-0">0 margin from left</span>
<span class="mx-0">0 margin from left and right</span>
<span class="my-0">0 margin from top and bottom</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
<span>mt-4</span>
<span>mr-4</span>
<span>mb-4</span>
<span>ml-4</span>
<span>mx-4</span>
<span>my-4</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="mt-4">4px margin from top</span>
<span class="mr-4">4px margin from right</span>
<span class="mb-4">4px margin from bottom</span>
<span class="ml-4">4px margin from left</span>
<span class="mx-4">4px margin from left and right</span>
<span class="my-4">4px margin from top and bottom</span>
</textarea>
</fuse-hljs>
</div>
</div>
</div>

31
src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.scss Normal file
View File

@ -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;
}
}
}
}

15
src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.ts Normal file
View File

@ -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()
{
}
}

141
src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.html Normal file
View File

@ -0,0 +1,141 @@
<div id="helper-classes-width-height" class="p-24">
<div class="mat-title">Width Helpers</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span>w-0</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="w-0">0px width</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption mb-16">Min:0 - Max:512, Multiples of 4</div>
<span>w-100</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="w-100">100px width</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption mb-16">Min:0 - Max:100, Multiples of 5</div>
<span>w-25-p</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="w-25-p">25% width</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption mb-16">Min:0 - Max:100, Multiples of 5</div>
<span>w-100-p</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="w-100-p">100% width</span>
</textarea>
</fuse-hljs>
</div>
</div>
<div class="mat-title mt-20">Height Helpers</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span>h-0</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="h-0">0px height</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption mb-16">Min:0 - Max:512, Multiples of 4</div>
<span>h-100</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="h-100">100px height</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption mb-16">Min:0 - Max:100, Multiples of 5</div>
<span>h-25-p</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="h-25-p">25% height</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption mb-16">Min:0 - Max:100, Multiples of 5</div>
<span>h-100-p</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="h-100-p">100% height</span>
</textarea>
</fuse-hljs>
</div>
</div>
</div>

31
src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.scss Normal file
View File

@ -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;
}
}
}
}

15
src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.ts Normal file
View File

@ -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()
{
}
}

203
src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.html Normal file
View File

@ -0,0 +1,203 @@
<div id="typography-blockquotes-lists" class="p-24">
<div class="mat-title">Blockquotes</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<blockquote>
<p>
You can do anything, but not everything.
</p>
</blockquote>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<blockquote>
<p>
You can do anything, but not everything.
</p>
</blockquote>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<blockquote>
<p>
You can do anything, but not everything.
</p>
<footer>
David Allen
</footer>
</blockquote>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<blockquote>
<p>
You can do anything, but not everything.
</p>
<footer>
David Allen
</footer>
</blockquote>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<blockquote class="reverse">
<p>
You can do anything, but not everything.
</p>
<footer>
David Allen
</footer>
</blockquote>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<blockquote class="reverse">
<p>
You can do anything, but not everything.
</p>
<footer>
David Allen
</footer>
</blockquote>
</textarea>
</fuse-hljs>
</div>
</div>
<div class="mat-title mt-20">Lists</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<ol>
<li>Ordered list item</li>
<li>
Ordered list item
<ol>
<li>Ordered list item</li>
<li>Ordered list item</li>
</ol>
</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
</ol>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<ol>
<li>Ordered list item</li>
<li>
Ordered list item
<ol>
<li>Ordered list item</li>
<li>Ordered list item</li>
</ol>
</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
</ol>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<ul>
<li>Unordered list item</li>
<li>
Unordered list item
<ul>
<li>Unordered list item</li>
<li>Unordered list item</li>
</ul>
</li>
<li>Unordered list item</li>
<li>Unordered list item</li>
</ul>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<ul>
<li>Unordered list item</li>
<li>
Unordered list item
<ul>
<li>Unordered list item</li>
<li>Unordered list item</li>
</ul>
</li>
<li>Unordered list item</li>
<li>Unordered list item</li>
</ul>
</textarea>
</fuse-hljs>
</div>
</div>
<div class="mat-title mt-20">Definition Lists</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<dl>
<dt>Definition term</dt>
<dd>This is the definition description</dd>
<dt>Another definition term</dt>
<dd>This is also another definition description</dd>
</dl>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<dl>
<dt>Definition term</dt>
<dd>This is the definition description</dd>
<dt>Another definition term</dt>
<dd>This is also another definition description</dd>
</dl>
</textarea>
</fuse-hljs>
</div>
</div>
</div>

31
src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.scss Normal file
View File

@ -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;
}
}
}
}

15
src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.ts Normal file
View File

@ -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()
{
}
}

292
src/app/main/content/ui/typography/tabs/headings/headings.component.html Normal file
View File

@ -0,0 +1,292 @@
<div id="typography-headings" class="p-24">
<div class="mat-title">Material design typography classes</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">112px</div>
<span class="mat-display-4">Display 4</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="mat-display-4">Display 4</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">56px</div>
<span class="mat-display-3">Display 3</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="mat-display-3">Display 3</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">45px</div>
<span class="mat-display-2">Display 2</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="mat-display-2">Display 2</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">34px</div>
<span class="mat-display-1">Display 1</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="mat-display-1">Display 1</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">24px</div>
<span class="mat-headline">Headline</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="mat-headline">Headline</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">20px</div>
<span class="mat-title">Title</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="mat-title">Title</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">16px</div>
<span class="mat-subheading-2">Subheading 2</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="mat-subheading-2">Subheading 2</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">15px</div>
<span class="mat-subheading-1">Subheading 1</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="mat-subheading-1">Subheading 1</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">14px</div>
<span class="mat-body-1">Body 1</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="mat-body-1">Body 1</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">14px</div>
<span class="mat-body-2">Body 2</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="mat-body-2">Body 2</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">12px</div>
<span class="mat-caption">Caption</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="mat-caption">Caption</span>
</textarea>
</fuse-hljs>
</div>
</div>
<div class="mat-title mt-20">Standard Headings</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">24px</div>
<span class="h1">Heading 1</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<h1>Heading 1</h1>
<span class="h1">Heading 1</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">20px</div>
<span class="h2">Heading 2</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<h2>Heading 2</h2>
<span class="h2">Heading 2</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">16px</div>
<span class="h3">Heading 3</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<h3>Heading 3</h3>
<span class="h3">Heading 3</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">15px</div>
<span class="h4">Heading 4</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<h4>Heading 4</h4>
<span class="h4">Heading 4</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">13px</div>
<span class="h5">Heading 5</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<h5>Heading 5</h5>
<span class="h5">Heading 5</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">12px</div>
<span class="h6">Heading 6</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<h6>Heading 6</h6>
<span class="h6">Heading 6</span>
</textarea>
</fuse-hljs>
</div>
</div>
</div>

31
src/app/main/content/ui/typography/tabs/headings/headings.component.scss Normal file
View File

@ -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;
}
}
}
}

15
src/app/main/content/ui/typography/tabs/headings/headings.component.ts Normal file
View File

@ -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()
{
}
}

249
src/app/main/content/ui/typography/tabs/helpers/helpers.component.html Normal file
View File

@ -0,0 +1,249 @@
<div id="typography-helpers" class="p-24">
<div class="mat-title">Font Weight</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="md-caption mb-16">From 100 to 900</div>
<span class="font-weight-100">font-weight: 100</span>
<span>...</span>
<span class="font-weight-900">font-weight: 900</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="font-weight-100">100 font weight</span>
...
<span class="font-weight-900">900 font weight</span>
</textarea>
</fuse-hljs>
</div>
</div>
<div class="mat-title mt-20">Font Size</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="md-caption mb-16">Multiplies of 2, max: 120</div>
<span class="font-size-20">font-size: 20</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="font-size-20">font-size: 20</span>
</textarea>
</fuse-hljs>
</div>
</div>
<div class="mat-title mt-20">Line Height</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="md-caption mb-16">Multiplies of 2, max: 120</div>
<span>line-height: 2</span>
<span>...</span>
<span>line-height: 120</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="line-height-2">2px line height</span>
...
<span class="line-height-120">120px line height</span>
</textarea>
</fuse-hljs>
</div>
</div>
<div class="mat-title mt-20">Other helpers</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="text-left">Left aligned text</div>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<div class="text-left">Left aligned text</div>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="text-center">Center aligned text</div>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<div class="text-center">Center aligned text</div>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="text-right">Right aligned text</div>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<div class="text-right">Right aligned text</div>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<p>
<span class="text-boxed">Boxed text</span>
</p>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<p>
<span class="text-boxed">Boxed text</span>
</p>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview md-grey-700-bg" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<p>
<span class="text-boxed-light">Boxed text light</span>
</p>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<p>
<span class="text-boxed-light">Boxed text light</span>
</p>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<p>
<span class="text-strike">Strike-through text</span>
</p>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<p>
<span class="text-strike">Strike-through text</span>
</p>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="text-italic">Italic text</div>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<div class="text-italic">Italic text</div>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="text-semibold">Semi-bold text</div>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<div class="text-semibold">Semi-bold text</div>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="text-bold">Bold text</div>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<div class="text-bold">Bold text</div>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span class="text-truncate">This is a truncated text. It will be truncated if it's too long. Vivamus
convallis dui porta massa.
</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="text-truncate">
This is a truncated text. It will be truncated if it's too long. Vivamus convallis dui porta massa.
</span>
</textarea>
</fuse-hljs>
</div>
</div>
</div>

31
src/app/main/content/ui/typography/tabs/helpers/helpers.component.scss Normal file
View File

@ -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;
}
}
}
}

15
src/app/main/content/ui/typography/tabs/helpers/helpers.component.ts Normal file
View File

@ -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()
{
}
}

232
src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.html Normal file
View File

@ -0,0 +1,232 @@
<div id="typography-inline-text-elements" class="p-24">
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span><abbr title="Cascaded Style Sheet">CSS</abbr></span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<abbr title="Cascaded Style Sheet">CSS</abbr>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span>This is a <mark>marked</mark> text.</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
This is a <mark>marked</mark> text.
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span>
<del>This is a deleted text.</del>
</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<del>This is a deleted text.</del>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span><s>This is a strike-through text.</s></span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<s>This is a strike-through text.</s>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span><u>This is an underlined text.</u></span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<u>This is an underlined text.</u>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span>
<small>This is a small text.</small>
</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<small>This is a small text.</small>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span><strong>This is a strong text.</strong></span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<strong>This is a strong text.</strong>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span><em>This is an italic text.</em></span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<em>This is an italic text.</em>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span>This is a
<span class="text-super">super</span>
text.
</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
This is a
<span class="text-super">super</span>
text.
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span>
This is a
<span class="text-sub">sub</span>
text.
</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
This is a
<span class="text-sub">sub</span>
text.
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span>This is a
<span class="text-capitalize">capitalized</span>
text.
</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
This is a
<span class="text-capitalized">capitalized</span>
text.
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span>This is an
<span class="text-uppercase">uppercase</span>
text.
</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
This is an
<span class="text-uppercase">uppercase</span>
text.
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span>This is a
<span class="text-lowercase">LOWERCASE</span>
text.
</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
This is a
<span class="text-lowercase">LOWERCASE</span>
text.
</textarea>
</fuse-hljs>
</div>
</div>
</div>

31
src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.scss Normal file
View File

@ -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;
}
}
}
}

15
src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.ts Normal file
View File

@ -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()
{
}
}

249
src/app/main/content/ui/typography/typography.component.html
View File

@ -20,266 +20,25 @@
<md-tab label="Headings"> <md-tab label="Headings">
<div class="p-24"> <fuse-typography-headings></fuse-typography-headings>
<div class="mat-title">Material design typography classes</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">112px</div>
<span class="mat-display-4">Display 4</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"
source='<span class="mat-display-4">Display 4</span>'>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">56px</div>
<span class="mat-display-3">Display 3</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"
source='<span class="mat-display-3">Display 3</span>'>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">45px</div>
<span class="mat-display-2">Display 2</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"
source='<span class="mat-display-2">Display 2</span>'>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">34px</div>
<span class="mat-display-1">Display 1</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"
source='<span class="mat-display-1">Display 1</span>'>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">24px</div>
<span class="mat-headline">Headline</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"
source='<span class="md-headline">Headline</span>'>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">20px</div>
<span class="mat-title">Title</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"
source='<span class="md-title">Title</span>'>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">16px</div>
<span class="mat-subheading-2">Subheading 2</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"
source='<span class="mat-subheading-2">Subheading 2</span>'>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">15px</div>
<span class="mat-subheading-1">Subheading 1</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"
source='<span class="mat-subheading-1">Subheading 1</span>'>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">14px</div>
<span class="mat-body-1">Body 1</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"
source='<span class="mat-body-1">Body 1</span>'>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">14px</div>
<span class="mat-body-2">Body 2</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"
source='<span class="mat-body-2">Body 2</span>'>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">12px</div>
<span class="mat-caption">Caption</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50"
source='<span class="mat-caption">Caption</span>'>
</fuse-hljs>
</div>
</div>
<div class="mat-title mt-20">Standard Headings</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">24px</div>
<span class="h1">Heading 1</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50" source='<h1>Heading 1</h1><span class="h1">Heading 1</span>'>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">20px</div>
<span class="h2">Heading 2</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50" source='<h2>Heading 2</h2><span class="h2">Heading 2</span>'>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">16px</div>
<span class="h3">Heading 3</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50" source='<h3>Heading 3</h3><span class="h3">Heading 3</span>'>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">15px</div>
<span class="h4">Heading 4</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50" source='<h4>Heading 4</h4><span class="h4">Heading 4</span>'>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">13px</div>
<span class="h5">Heading 5</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50" source='<h5>Heading 5</h5><span class="h5">Heading 5</span>'>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption secondary-text">12px</div>
<span class="h6">Heading 6</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50" source='<h6>Heading 6</h6><span class="h6">Heading 6</span>'>
</fuse-hljs>
</div>
</div>
</div>
</md-tab> </md-tab>
<md-tab label="Inline Text Elements"> <md-tab label="Inline Text Elements">
<fuse-typography-inline-text-elements></fuse-typography-inline-text-elements>
</md-tab> </md-tab>
<md-tab label="Blockquotes & Lists"> <md-tab label="Blockquotes & Lists">
<fuse-typography-blockquotes-lists></fuse-typography-blockquotes-lists>
</md-tab> </md-tab>
<md-tab label="Helpers"> <md-tab label="Helpers">
<fuse-typography-helpers></fuse-typography-helpers>
</md-tab> </md-tab>

31
src/app/main/content/ui/typography/typography.component.scss
View File

@ -1,34 +1,3 @@
:host { :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;
}
}
}
}
} }

13
src/app/main/content/ui/typography/typography.module.ts
View File

@ -1,7 +1,12 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SharedModule } from '../../../../core/modules/shared.module'; import { SharedModule } from '../../../../core/modules/shared.module';
import { RouterModule, Routes } from '@angular/router';
import { TypographyComponent } from './typography.component'; 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 = [ const routes: Routes = [
{ {
@ -16,7 +21,11 @@ const routes: Routes = [
RouterModule.forChild(routes) RouterModule.forChild(routes)
], ],
declarations: [ declarations: [
TypographyComponent TypographyComponent,
TypographyHeadingsComponent,
TypographyInlineTextElementsComponent,
TypographyBlockquotesListsComponent,
TypographyHelpersComponent
] ]
}) })
export class UITypographyModule export class UITypographyModule

4
src/app/main/content/ui/ui.module.ts
View File

@ -3,12 +3,14 @@ import { NgModule } from '@angular/core';
import { UIPageLayoutsModule } from './page-layouts/page-layouts.module'; import { UIPageLayoutsModule } from './page-layouts/page-layouts.module';
import { UIColorsModule } from './colors/colors.module'; import { UIColorsModule } from './colors/colors.module';
import { UITypographyModule } from './typography/typography.module'; import { UITypographyModule } from './typography/typography.module';
import { UIHelperClassesModule } from './helper-classes/helper-classes.module';
@NgModule({ @NgModule({
imports: [ imports: [
UIColorsModule, UIColorsModule,
UIPageLayoutsModule, UIPageLayoutsModule,
UITypographyModule UITypographyModule,
UIHelperClassesModule
] ]
}) })
export class UIModule export class UIModule