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/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