diff --git a/src/app/pages/ui-features/typography/typography.component.html b/src/app/pages/ui-features/typography/typography.component.html index f0df190a..c471d425 100644 --- a/src/app/pages/ui-features/typography/typography.component.html +++ b/src/app/pages/ui-features/typography/typography.component.html @@ -1,159 +1,116 @@
-
-
-
- - - Used Fonts - - -
-
-
Exo
- -
- Bold - Regular - Light -
-
-

- Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, - there live the blind texts. - Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. -

-
- -
-
-
Roboto
- -
- Bold - Regular - Light -
-
-

- Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, - there live the blind texts. - Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. -

-
- - - - - - Article Example - - -

So what's About the grammar?

-

- Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, - there live the blind texts. - They live in Bookmarksgrove. -

-

- A small river named Duden flows by their place and supplies it with the - necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly - into your mouth. - Even the all-powerful Pointing has no control about the blind texts it is an almost - unorthographic life One day however a small - line of blind text by the name of - Lorem Ipsum decided to leave for - the far World of Grammar. -

- - -
-
- - - Headings - - -
-
-

H1. Heading

-
- -
- Demibold 2.5rem (40px) -
-
-
-
-

H2. Heading

-
- -
- Demibold 2rem (32px) -
-
-
-
-

H3. Heading

-
- -
- Demibold 1.75rem (28px) -
-
-
-
-

H4. Heading

-
- -
- Demibold 1.5rem (24px) -
-
-
-
-
H5. Heading
-
- -
- Demibold 1.25rem (20px) -
-
-
-
-
H6. Heading
-
- -
- Demibold 1rem (16px) -
-
- - - - - - Blockquotes - - -
-

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia. -

-
-

Far far away, behind the word mountains, far from the countries.

-
Vladimir Lugovsky
-
-
-

Far far away, behind the word mountains.

-
Vladimir Lugovsky
-
- - -
-
+
+ + + Used Fonts + + +
+
+
Open Sans
+
+

+ Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, + there live the blind texts. + Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. +

+
+ +
- + + + Headings + + +
+
+

H1. Heading

+
+ +
+ 800 2.25rem (36px) +
+
+
+
+

H2. Heading

+
+ +
+ 800 2rem (32px) +
+
+
+
+

H3. Heading

+
+ +
+ 800 1.875rem (30px) +
+
+
+
+

H4. Heading

+
+ +
+ 800 1.625rem (26px) +
+
+
+
+
H5. Heading
+
+ +
+ 800 1.375rem (22px) +
+
+
+
+
H6. Heading
+
+ +
+ 800 1.125rem (18px) +
+
+ + +
+ +
+ + + Article Example + + +

So what's About the grammar?

+

+ Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, + there live the blind texts. + They live in Bookmarksgrove. +

+

+ A small river named Duden flows by their place and supplies it with the + necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly + into your mouth. + Even the all-powerful Pointing has no control about the blind texts it is an almost + unorthographic life One day however a small + line of blind text by the name of + Lorem Ipsum decided to leave for + the far World of Grammar. +

+ + +
+ +
+ Font Colors @@ -187,38 +144,38 @@ Far far away, behind the your awesomeness.
-
-
+
+
-
Primary Text
+
Primary Text
Far far away, behind the your awesomeness.
-
-
+
+
-
Success Text
+
Success Text
Far far away, behind the your awesomeness.
-
-
+
+
-
Info Text
+
Info Text
Far far away, behind the your awesomeness.
-
-
+
+
-
Warning Text
+
Warning Text
Far far away, behind the your awesomeness.
-
-
+
+
-
Danger Text
+
Danger Text
Far far away, behind the your awesomeness.
@@ -233,49 +190,24 @@ Alerts - - - - - - - - -
- -
- - - Text Types - - -

Highlighted text

-

- Far far away, behind the word mountains, far from the countries - Vokalia and Consonantia, there live the blind texts. -

-

Bold Text

-

- Far far away, behind the word mountains, far from the countries - Vokalia and Consonantia, there live the blind texts. -

-

Link Text

-

- Far far away, behind the word mountains, far from the countries - Vokalia and Consonantia, there live the blind texts. -

+ + Heads up! This alert needs your attention, but it's not super important. + + + Oh snap! Change a few things up and try submitting again. + + + Well done! You successfully read this important alert message. + + + Heads up! This alert needs your attention, but it's not super important. + + + Warning! Better check yourself, you're not looking too good. + + + Oh snap! Change a few things up and try submitting again. +
diff --git a/src/app/pages/ui-features/typography/typography.component.scss b/src/app/pages/ui-features/typography/typography.component.scss index 03c01d39..d5d295ee 100644 --- a/src/app/pages/ui-features/typography/typography.component.scss +++ b/src/app/pages/ui-features/typography/typography.component.scss @@ -17,9 +17,17 @@ } .headings-card { + h1 { + margin: 0; + } + .header { padding-bottom: 0.675rem; margin-bottom: 0.675rem; + + &:last-child { + margin-bottom: 0; + } } } @@ -62,8 +70,6 @@ .detail { flex: 1; display: flex; - justify-content: flex-end; - align-items: flex-end; } } @@ -101,4 +107,37 @@ .bg-link { background: nb-theme(link-text-color); } + + .bg-heading { + background: nb-theme(text-basic-color); + } + + .bg-body { + background: nb-theme(text-basic-color); + } + + .bg-hint { + background: nb-theme(text-hint-color); + } + + .text-hint { + color: nb-theme(text-hint-color); + } + + .bg-link { + background: nb-theme(link-text-color); + } + + .text-link { + color: nb-theme(link-text-color); + } + + @each $status in nb-get-statuses() { + .bg-status-#{$status} { + background: nb-theme(text-#{$status}-color); + } + .text-status-#{$status} { + color: nb-theme(text-#{$status}-color); + } + } } diff --git a/src/app/pages/ui-features/ui-features.module.ts b/src/app/pages/ui-features/ui-features.module.ts index 2456963a..4f1c8159 100644 --- a/src/app/pages/ui-features/ui-features.module.ts +++ b/src/app/pages/ui-features/ui-features.module.ts @@ -1,5 +1,5 @@ import { NgModule } from '@angular/core'; -import { NbCardModule, NbIconModule, NbPopoverModule, NbSearchModule } from '@nebular/theme'; +import { NbAlertModule, NbCardModule, NbIconModule, NbPopoverModule, NbSearchModule } from '@nebular/theme'; import { ThemeModule } from '../../@theme/theme.module'; import { UiFeaturesRoutingModule } from './ui-features-routing.module'; @@ -23,6 +23,7 @@ const components = [ NbPopoverModule, NbSearchModule, NbIconModule, + NbAlertModule, ThemeModule, UiFeaturesRoutingModule, ],