mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-17 07:50:12 +01:00
refactor: update typography
This commit is contained in:
Sergey Andrievskiy
parent
3fc47c5a41
commit
25724812c4
3 changed files with 185 additions and 213 deletions
|
|
@ -1,159 +1,116 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xxxl-8">
|
<div class="col-md-6 col-xxxl-4">
|
||||||
<div class="row">
|
<nb-card size="medium">
|
||||||
<div class="col-md-6 col-xxl-7">
|
<nb-card-header>
|
||||||
<nb-card size="medium">
|
Used Fonts
|
||||||
<nb-card-header>
|
</nb-card-header>
|
||||||
Used Fonts
|
<nb-card-body>
|
||||||
</nb-card-header>
|
<div class="font-row">
|
||||||
<nb-card-body>
|
<div class="header">
|
||||||
<div class="font-row font-secondary">
|
<div class="name bold">Open Sans</div>
|
||||||
<div class="header">
|
</div>
|
||||||
<div class="name bold">Exo</div>
|
<p>
|
||||||
|
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,
|
||||||
<div class="variants">
|
there live the blind texts.
|
||||||
<span class="font-w-bold">Bold</span>
|
Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
|
||||||
<span class="font-w-regular">Regular</span>
|
</p>
|
||||||
<span class="font-w-light">Light</span>
|
</div>
|
||||||
</div>
|
</nb-card-body>
|
||||||
</div>
|
</nb-card>
|
||||||
<p>
|
|
||||||
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.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="font-row font-main">
|
|
||||||
<div class="header">
|
|
||||||
<div class="name bold">Roboto</div>
|
|
||||||
|
|
||||||
<div class="variants">
|
|
||||||
<span class="font-w-bold">Bold</span>
|
|
||||||
<span class="font-w-regular">Regular</span>
|
|
||||||
<span class="font-w-light">Light</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p>
|
|
||||||
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.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</nb-card-body>
|
|
||||||
</nb-card>
|
|
||||||
|
|
||||||
<nb-card size="small">
|
|
||||||
<nb-card-header>
|
|
||||||
Article Example
|
|
||||||
</nb-card-header>
|
|
||||||
<nb-card-body>
|
|
||||||
<h4>So what's About the grammar?</h4>
|
|
||||||
<p class="text-indent">
|
|
||||||
Far far away, behind the word mountains, far from the countries <strong>Vokalia</strong> and <strong>Consonantia</strong>,
|
|
||||||
there live the blind texts.
|
|
||||||
They live in <strong>Bookmarksgrove</strong>.
|
|
||||||
</p>
|
|
||||||
<p class="text-indent">
|
|
||||||
A small <strong>river named Duden</strong> 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
|
|
||||||
<a href="http://google.com" target="_blank">Lorem Ipsum</a> decided to leave for
|
|
||||||
the far <strong>World of Grammar</strong>.
|
|
||||||
</p>
|
|
||||||
</nb-card-body>
|
|
||||||
</nb-card>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-6 col-xxl-5">
|
|
||||||
<nb-card size="medium" class="headings-card">
|
|
||||||
<nb-card-header>
|
|
||||||
Headings
|
|
||||||
</nb-card-header>
|
|
||||||
<nb-card-body>
|
|
||||||
<div class="header">
|
|
||||||
<div>
|
|
||||||
<h1>H1. Heading</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="detail font-w-light">
|
|
||||||
Demibold 2.5rem (40px)
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="header">
|
|
||||||
<div>
|
|
||||||
<h2>H2. Heading</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="detail font-w-light">
|
|
||||||
Demibold 2rem (32px)
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="header">
|
|
||||||
<div>
|
|
||||||
<h3>H3. Heading</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="detail font-w-light">
|
|
||||||
Demibold 1.75rem (28px)
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="header">
|
|
||||||
<div>
|
|
||||||
<h4>H4. Heading</h4>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="detail font-w-light">
|
|
||||||
Demibold 1.5rem (24px)
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="header">
|
|
||||||
<div>
|
|
||||||
<h5>H5. Heading</h5>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="detail font-w-light">
|
|
||||||
Demibold 1.25rem (20px)
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="header">
|
|
||||||
<div>
|
|
||||||
<h6>H6. Heading</h6>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="detail font-w-light">
|
|
||||||
Demibold 1rem (16px)
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nb-card-body>
|
|
||||||
</nb-card>
|
|
||||||
|
|
||||||
<nb-card size="small">
|
|
||||||
<nb-card-header>
|
|
||||||
Blockquotes
|
|
||||||
</nb-card-header>
|
|
||||||
<nb-card-body>
|
|
||||||
<blockquote class="blockquote">
|
|
||||||
<p class="mb-0">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.
|
|
||||||
</blockquote>
|
|
||||||
<blockquote class="blockquote">
|
|
||||||
<p class="mb-0">Far far away, behind the word mountains, far from the countries.</p>
|
|
||||||
<footer class="blockquote-footer">Vladimir Lugovsky</footer>
|
|
||||||
</blockquote>
|
|
||||||
<blockquote class="blockquote-reverse">
|
|
||||||
<p class="mb-0">Far far away, behind the word mountains.</p>
|
|
||||||
<footer class="blockquote-footer">Vladimir Lugovsky</footer>
|
|
||||||
</blockquote>
|
|
||||||
</nb-card-body>
|
|
||||||
</nb-card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-6 col-xxxl-4">
|
<div class="col-md-6 col-xxxl-4">
|
||||||
<nb-card [size]="breakpoint.width >= breakpoints.xxxl ? 'giant' : 'large'">
|
<nb-card size="medium" class="headings-card">
|
||||||
|
<nb-card-header>
|
||||||
|
Headings
|
||||||
|
</nb-card-header>
|
||||||
|
<nb-card-body>
|
||||||
|
<div class="header">
|
||||||
|
<div>
|
||||||
|
<h1>H1. Heading</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="detail">
|
||||||
|
800 2.25rem (36px)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header">
|
||||||
|
<div>
|
||||||
|
<h2>H2. Heading</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="detail">
|
||||||
|
800 2rem (32px)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header">
|
||||||
|
<div>
|
||||||
|
<h3>H3. Heading</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="detail">
|
||||||
|
800 1.875rem (30px)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header">
|
||||||
|
<div>
|
||||||
|
<h4>H4. Heading</h4>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="detail">
|
||||||
|
800 1.625rem (26px)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header">
|
||||||
|
<div>
|
||||||
|
<h5>H5. Heading</h5>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="detail">
|
||||||
|
800 1.375rem (22px)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header">
|
||||||
|
<div>
|
||||||
|
<h6>H6. Heading</h6>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="detail">
|
||||||
|
800 1.125rem (18px)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nb-card-body>
|
||||||
|
</nb-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6 col-xxxl-4">
|
||||||
|
<nb-card [size]="breakpoint.width >= breakpoints.xxxl ? 'medium' : 'large'">
|
||||||
|
<nb-card-header>
|
||||||
|
Article Example
|
||||||
|
</nb-card-header>
|
||||||
|
<nb-card-body>
|
||||||
|
<h4>So what's About the grammar?</h4>
|
||||||
|
<p>
|
||||||
|
Far far away, behind the word mountains, far from the countries <strong>Vokalia</strong> and <strong>Consonantia</strong>,
|
||||||
|
there live the blind texts.
|
||||||
|
They live in <strong>Bookmarksgrove</strong>.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
A small <strong>river named Duden</strong> 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
|
||||||
|
<a href="http://google.com" target="_blank">Lorem Ipsum</a> decided to leave for
|
||||||
|
the far <strong>World of Grammar</strong>.
|
||||||
|
</p>
|
||||||
|
</nb-card-body>
|
||||||
|
</nb-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6 col-xxxl-4">
|
||||||
|
<nb-card size="large">
|
||||||
<nb-card-header>
|
<nb-card-header>
|
||||||
Font Colors
|
Font Colors
|
||||||
</nb-card-header>
|
</nb-card-header>
|
||||||
|
|
@ -187,38 +144,38 @@
|
||||||
Far far away, behind the your awesomeness.
|
Far far away, behind the your awesomeness.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item text-primary">
|
<div class="item text-status-primary">
|
||||||
<div class="color bg-primary"></div>
|
<div class="color bg-status-primary"></div>
|
||||||
<div>
|
<div>
|
||||||
<h5 class="text-primary">Primary Text</h5>
|
<h5 class="text-status-primary">Primary Text</h5>
|
||||||
Far far away, behind the your awesomeness.
|
Far far away, behind the your awesomeness.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item text-success">
|
<div class="item text-status-success">
|
||||||
<div class="color bg-success"></div>
|
<div class="color bg-status-success"></div>
|
||||||
<div>
|
<div>
|
||||||
<h5 class="text-success">Success Text</h5>
|
<h5 class="text-status-success">Success Text</h5>
|
||||||
Far far away, behind the your awesomeness.
|
Far far away, behind the your awesomeness.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item text-info">
|
<div class="item text-status-info">
|
||||||
<div class="color bg-info"></div>
|
<div class="color bg-status-info"></div>
|
||||||
<div>
|
<div>
|
||||||
<h5 class="text-info">Info Text</h5>
|
<h5 class="text-status-info">Info Text</h5>
|
||||||
Far far away, behind the your awesomeness.
|
Far far away, behind the your awesomeness.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item text-warning">
|
<div class="item text-status-warning">
|
||||||
<div class="color bg-warning"></div>
|
<div class="color bg-status-warning"></div>
|
||||||
<div>
|
<div>
|
||||||
<h5 class="text-warning">Warning Text</h5>
|
<h5 class="text-status-warning">Warning Text</h5>
|
||||||
Far far away, behind the your awesomeness.
|
Far far away, behind the your awesomeness.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item text-danger">
|
<div class="item text-status-danger">
|
||||||
<div class="color bg-danger"></div>
|
<div class="color bg-status-danger"></div>
|
||||||
<div>
|
<div>
|
||||||
<h5 class="text-danger">Danger Text</h5>
|
<h5 class="text-status-danger">Danger Text</h5>
|
||||||
Far far away, behind the your awesomeness.
|
Far far away, behind the your awesomeness.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -233,49 +190,24 @@
|
||||||
Alerts
|
Alerts
|
||||||
</nb-card-header>
|
</nb-card-header>
|
||||||
<nb-card-body>
|
<nb-card-body>
|
||||||
<div class="alert alert-primary" role="alert">
|
<nb-alert>
|
||||||
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
|
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
|
||||||
</div>
|
</nb-alert>
|
||||||
<div class="alert alert-hint" role="alert">
|
<nb-alert status="primary">
|
||||||
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
|
<strong>Oh snap!</strong> Change a few things up and try submitting again.
|
||||||
</div>
|
</nb-alert>
|
||||||
<div class="alert alert-success" role="alert">
|
<nb-alert status="success">
|
||||||
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
|
<strong>Well done!</strong> You successfully read this important alert message.
|
||||||
</div>
|
</nb-alert>
|
||||||
<div class="alert alert-info" role="alert">
|
<nb-alert status="info">
|
||||||
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
|
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
|
||||||
</div>
|
</nb-alert>
|
||||||
<div class="alert alert-warning" role="alert">
|
<nb-alert status="warning">
|
||||||
<strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
|
<strong>Warning!</strong> Better check yourself, you're not looking too good.
|
||||||
</div>
|
</nb-alert>
|
||||||
<div class="alert alert-danger" role="alert">
|
<nb-alert status="danger">
|
||||||
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
|
<strong>Oh snap!</strong> Change a few things up and try submitting again.
|
||||||
</div>
|
</nb-alert>
|
||||||
</nb-card-body>
|
|
||||||
</nb-card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-6 col-xxxl-4">
|
|
||||||
<nb-card size="large">
|
|
||||||
<nb-card-header>
|
|
||||||
Text Types
|
|
||||||
</nb-card-header>
|
|
||||||
<nb-card-body>
|
|
||||||
<h4>Highlighted text</h4>
|
|
||||||
<p class="mb-5">
|
|
||||||
Far far away, behind the word mountains, far from the countries
|
|
||||||
Vokalia and <mark>Consonantia, there live the blind texts.</mark>
|
|
||||||
</p>
|
|
||||||
<h4>Bold Text</h4>
|
|
||||||
<p class="mb-5">
|
|
||||||
Far far away, behind the word mountains, far from the countries
|
|
||||||
Vokalia and <strong>Consonantia, there live the blind texts.</strong>
|
|
||||||
</p>
|
|
||||||
<h4>Link Text</h4>
|
|
||||||
<p class="mb-5">
|
|
||||||
Far far away, behind the word mountains, far from the countries
|
|
||||||
Vokalia and <a href="http://google.com" target="_blank">Consonantia, there live the blind texts.</a>
|
|
||||||
</p>
|
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -17,9 +17,17 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.headings-card {
|
.headings-card {
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
padding-bottom: 0.675rem;
|
padding-bottom: 0.675rem;
|
||||||
margin-bottom: 0.675rem;
|
margin-bottom: 0.675rem;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -62,8 +70,6 @@
|
||||||
.detail {
|
.detail {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: flex-end;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -101,4 +107,37 @@
|
||||||
.bg-link {
|
.bg-link {
|
||||||
background: nb-theme(link-text-color);
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { NgModule } from '@angular/core';
|
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 { ThemeModule } from '../../@theme/theme.module';
|
||||||
import { UiFeaturesRoutingModule } from './ui-features-routing.module';
|
import { UiFeaturesRoutingModule } from './ui-features-routing.module';
|
||||||
|
|
@ -23,6 +23,7 @@ const components = [
|
||||||
NbPopoverModule,
|
NbPopoverModule,
|
||||||
NbSearchModule,
|
NbSearchModule,
|
||||||
NbIconModule,
|
NbIconModule,
|
||||||
|
NbAlertModule,
|
||||||
ThemeModule,
|
ThemeModule,
|
||||||
UiFeaturesRoutingModule,
|
UiFeaturesRoutingModule,
|
||||||
],
|
],
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue