diff --git a/src/app/@theme/styles/cosmic/cosmic.theme.scss b/src/app/@theme/styles/cosmic/cosmic.theme.scss index ce310265..dca9bf15 100644 --- a/src/app/@theme/styles/cosmic/cosmic.theme.scss +++ b/src/app/@theme/styles/cosmic/cosmic.theme.scss @@ -24,3 +24,7 @@ $theme-name: 'cosmic'; // @nga/maps module styles @import '~@nga/theme/overrides/maps/styles/themes/nga.theme.default'; @include nga-maps($theme-name); + +// @nga/typography module styles +@import '~@nga/theme/overrides/typography/styles/themes/nga.theme.default'; +@include nga-typography($theme-name); diff --git a/src/app/@theme/styles/light/light.theme.scss b/src/app/@theme/styles/light/light.theme.scss index 20989fd1..b7b7cae8 100644 --- a/src/app/@theme/styles/light/light.theme.scss +++ b/src/app/@theme/styles/light/light.theme.scss @@ -23,3 +23,7 @@ $theme-name: 'light'; // @nga/maps module styles @import '~@nga/theme/overrides/maps/styles/themes/nga.theme.default'; @include nga-maps($theme-name); + +// @nga/typography module styles +@import '~@nga/theme/overrides/typography/styles/themes/nga.theme.default'; +@include nga-typography($theme-name); diff --git a/src/app/pages/pages-menu.ts b/src/app/pages/pages-menu.ts index 98e134ff..9dd1052f 100644 --- a/src/app/pages/pages-menu.ts +++ b/src/app/pages/pages-menu.ts @@ -26,6 +26,9 @@ export const menuItems: List = List([{ }, { title: 'Modals', link: '/pages/ui-features/modals', + }, { + title: 'Typography', + link: '/pages/ui-features/typography', }]), }, { title: 'Components', diff --git a/src/app/pages/ui-features/typography/typography.component.html b/src/app/pages/ui-features/typography/typography.component.html new file mode 100644 index 00000000..cd80b567 --- /dev/null +++ b/src/app/pages/ui-features/typography/typography.component.html @@ -0,0 +1,231 @@ +
+
+ + + Text size + + +
+

H1. Heading 1

+ +

Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat vestibulum + eleifend pellentesque.

+
+
+

H2. Heading 2

+ +

Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat vestibulum + eleifend pellentesque.

+
+
+

H3. Heading 3

+ +

Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat vestibulum + eleifend pellentesque.

+
+
+

H4. Heading 4

+ +

Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra,.

+
+
+
H5. Heading 5
+ +

Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra.

+
+ + + +
+
+ + + Some more text + + +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula + sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed ornare nulla. Nullam quis risus + eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis. +

+
+
+

Curabitur bibendum ornare dolor, quis ullamcorper ligula dfgz`zzsodales at. Nullam quis risus eget urna mollis + ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam + id dolor id. +

+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula + sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed ornare nulla.

+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullam-corper ligula + sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed ornare nulla. +

+
+
+

Secondary text. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar,

+ +

lacinia scelerisque pharetra, placerat vestibulum eleifend

+ +

pellentesque, mi nam.

+
+ + + +
+
+
+
+ + + Lists + + +
+
Unordered list:
+
    +
  • Lorem ipsum dolor sit amet
    • +
  • Сlacinia scelerisque pharetra +
      +
    • Dui rhoncus quisque integer lorem +
        +
      • Libero iaculis vestibulum eu vitae
        • +
      +
      • +
    +
    • +
  • Nisl lectus nibh habitasse suspendisse ut
    • +
  • Posuere cursus hac, vestibulum wisi nulla bibendum
    • +
+
Ordered Lists:
+
    +
  1. Eu non nec cursus quis mollis, amet quam nec
    2. +
  2. Et suspendisse, adipiscing fringilla ornare sit ligula sed +
      +
    1. Interdum et justo nulla +
        +
      1. Magna amet, suscipit suscipit non amet
        2. +
      +
      2. +
    +
    3. +
  3. Metus duis eu non eu ridiculus turpis
    4. +
  4. + Neque egestas id fringilla consectetuer justo curabitur, wisi magna neque commodo volutpat +
    5. +
+
Important text fragment. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra. +
+
+ + + +
+
+ + + Text color + + +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula + sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed ornare nulla. Nullam quis risus + eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus + mus. +

+
+
+

Curabitur bibendum ornare dolor, quis ullamcorper ligula dfgz`zzsodales at. Nullam quis risus eget urna mollis + ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam + id dolor id nibh ultricies vehicula ut id elit. In sed ornare nulla. +

+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis + ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel + eros. In sed ornare nulla. +

+
+
+

Active link — #209e91

+ +

Hover link — #17857a

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

Columns

+ +
+
+
+
+

Vel elit, eros elementum, id lacinia, duis non ut ut tortor blandit. Mauris dapibus magna rutrum. + Ornare neque suspendisse phasellus wisi, quam cras pede rutrum suspendisse, felis amet eu. + Congue magna elit quisque quia, nullam justo sagittis, ante erat libero placerat, proin condimentum consectetuer + lacus. Velit condimentum velit, sed penatibus arcu nulla.

+
+
+
+
+

Et suspendisse, adipiscing fringilla ornare sit ligula sed, vel nam. Interdum et justo nulla, fermentum lobortis + purus ut eu, duis nibh dolor massa tristique elementum, nibh iste potenti risus fusce aliquet fusce, ullamcorper + debitis primis arcu tellus vestibulum ac.

+
+
+ +
+ +
+
+

Column heading example

+
+

Eget augue, lacus erat ante egestas scelerisque aliquam, metus molestie leo in habitasse magna maecenas +

+ Learn more +
+
+

Yet another column heading example

+
+

Augue massa et parturient, suspendisse orci nec scelerisque sit, integer nam mauris pede consequat in velit +

+ Learn more +
+
+

Third column heading example

+
+

Eget turpis, tortor lobortis porttitor, vestibulum nullam vehicula aliquam

+ Learn more +
+
+
+
+ + + +
+
diff --git a/src/app/pages/ui-features/typography/typography.component.ts b/src/app/pages/ui-features/typography/typography.component.ts new file mode 100644 index 00000000..b963a535 --- /dev/null +++ b/src/app/pages/ui-features/typography/typography.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ngx-typography', + templateUrl: './typography.component.html', +}) +export class TypographyComponent { + +} diff --git a/src/app/pages/ui-features/ui-features-routing.module.ts b/src/app/pages/ui-features/ui-features-routing.module.ts index 30e98e94..159e4a31 100644 --- a/src/app/pages/ui-features/ui-features-routing.module.ts +++ b/src/app/pages/ui-features/ui-features-routing.module.ts @@ -6,6 +6,7 @@ import { ButtonsComponent } from './buttons/buttons.component'; import { GridComponent } from './grid/grid.component'; import { IconsComponent } from './icons/icons.component'; import { ModalsComponent } from './modals/modals.component'; +import { TypographyComponent } from './typography/typography.component'; const routes: Routes = [{ path: '', @@ -22,6 +23,9 @@ const routes: Routes = [{ }, { path: 'modals', component: ModalsComponent, + }, { + path: 'typography', + component: TypographyComponent, }], }]; diff --git a/src/app/pages/ui-features/ui-features.module.ts b/src/app/pages/ui-features/ui-features.module.ts index 21d1f15f..335a7453 100644 --- a/src/app/pages/ui-features/ui-features.module.ts +++ b/src/app/pages/ui-features/ui-features.module.ts @@ -17,6 +17,7 @@ import { DropdownButtonsComponent } from './buttons/dropdown/dropdown.component' import { GroupButtonsComponent } from './buttons/group/group.component'; import { LargeButtonsComponent } from './buttons/large/large.component'; import { ModalComponent } from './modals/modal/modal.component'; +import { TypographyComponent } from './typography/typography.component'; const COMPONENTS = [ UiFeaturesComponent, @@ -33,6 +34,7 @@ const COMPONENTS = [ GroupButtonsComponent, LargeButtonsComponent, ModalComponent, + TypographyComponent, ]; @NgModule({ diff --git a/src/assets/img/typography/banner.png b/src/assets/img/typography/banner.png new file mode 100644 index 00000000..f49b8f4f Binary files /dev/null and b/src/assets/img/typography/banner.png differ diff --git a/src/assets/img/typography/typo01.png b/src/assets/img/typography/typo01.png new file mode 100644 index 00000000..a8a471cd Binary files /dev/null and b/src/assets/img/typography/typo01.png differ diff --git a/src/assets/img/typography/typo03.png b/src/assets/img/typography/typo03.png new file mode 100644 index 00000000..f8d12f0d Binary files /dev/null and b/src/assets/img/typography/typo03.png differ diff --git a/src/assets/img/typography/typo04.png b/src/assets/img/typography/typo04.png new file mode 100644 index 00000000..db911d55 Binary files /dev/null and b/src/assets/img/typography/typo04.png differ diff --git a/src/assets/img/typography/typo05.png b/src/assets/img/typography/typo05.png new file mode 100644 index 00000000..65d53b2b Binary files /dev/null and b/src/assets/img/typography/typo05.png differ diff --git a/src/assets/img/typography/typo06.png b/src/assets/img/typography/typo06.png new file mode 100644 index 00000000..7c57f033 Binary files /dev/null and b/src/assets/img/typography/typo06.png differ diff --git a/src/assets/img/typography/typo07.png b/src/assets/img/typography/typo07.png new file mode 100644 index 00000000..1c174936 Binary files /dev/null and b/src/assets/img/typography/typo07.png differ