mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 23:40:14 +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="col-xxxl-8">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-xxl-7">
|
||||
<nb-card size="medium">
|
||||
<nb-card-header>
|
||||
Used Fonts
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="font-row font-secondary">
|
||||
<div class="header">
|
||||
<div class="name bold">Exo</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>
|
||||
|
||||
<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 class="col-md-6 col-xxxl-4">
|
||||
<nb-card size="medium">
|
||||
<nb-card-header>
|
||||
Used Fonts
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="font-row">
|
||||
<div class="header">
|
||||
<div class="name bold">Open Sans</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>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
Font Colors
|
||||
</nb-card-header>
|
||||
|
|
@ -187,38 +144,38 @@
|
|||
Far far away, behind the your awesomeness.
|
||||
</div>
|
||||
</div>
|
||||
<div class="item text-primary">
|
||||
<div class="color bg-primary"></div>
|
||||
<div class="item text-status-primary">
|
||||
<div class="color bg-status-primary"></div>
|
||||
<div>
|
||||
<h5 class="text-primary">Primary Text</h5>
|
||||
<h5 class="text-status-primary">Primary Text</h5>
|
||||
Far far away, behind the your awesomeness.
|
||||
</div>
|
||||
</div>
|
||||
<div class="item text-success">
|
||||
<div class="color bg-success"></div>
|
||||
<div class="item text-status-success">
|
||||
<div class="color bg-status-success"></div>
|
||||
<div>
|
||||
<h5 class="text-success">Success Text</h5>
|
||||
<h5 class="text-status-success">Success Text</h5>
|
||||
Far far away, behind the your awesomeness.
|
||||
</div>
|
||||
</div>
|
||||
<div class="item text-info">
|
||||
<div class="color bg-info"></div>
|
||||
<div class="item text-status-info">
|
||||
<div class="color bg-status-info"></div>
|
||||
<div>
|
||||
<h5 class="text-info">Info Text</h5>
|
||||
<h5 class="text-status-info">Info Text</h5>
|
||||
Far far away, behind the your awesomeness.
|
||||
</div>
|
||||
</div>
|
||||
<div class="item text-warning">
|
||||
<div class="color bg-warning"></div>
|
||||
<div class="item text-status-warning">
|
||||
<div class="color bg-status-warning"></div>
|
||||
<div>
|
||||
<h5 class="text-warning">Warning Text</h5>
|
||||
<h5 class="text-status-warning">Warning Text</h5>
|
||||
Far far away, behind the your awesomeness.
|
||||
</div>
|
||||
</div>
|
||||
<div class="item text-danger">
|
||||
<div class="color bg-danger"></div>
|
||||
<div class="item text-status-danger">
|
||||
<div class="color bg-status-danger"></div>
|
||||
<div>
|
||||
<h5 class="text-danger">Danger Text</h5>
|
||||
<h5 class="text-status-danger">Danger Text</h5>
|
||||
Far far away, behind the your awesomeness.
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -233,49 +190,24 @@
|
|||
Alerts
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<div class="alert alert-primary" role="alert">
|
||||
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
|
||||
</div>
|
||||
<div class="alert alert-hint" role="alert">
|
||||
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
|
||||
</div>
|
||||
<div class="alert alert-success" role="alert">
|
||||
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
|
||||
</div>
|
||||
<div class="alert alert-info" role="alert">
|
||||
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
|
||||
</div>
|
||||
<div class="alert alert-warning" role="alert">
|
||||
<strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
|
||||
</div>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
|
||||
</div>
|
||||
</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-alert>
|
||||
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
|
||||
</nb-alert>
|
||||
<nb-alert status="primary">
|
||||
<strong>Oh snap!</strong> Change a few things up and try submitting again.
|
||||
</nb-alert>
|
||||
<nb-alert status="success">
|
||||
<strong>Well done!</strong> You successfully read this important alert message.
|
||||
</nb-alert>
|
||||
<nb-alert status="info">
|
||||
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
|
||||
</nb-alert>
|
||||
<nb-alert status="warning">
|
||||
<strong>Warning!</strong> Better check yourself, you're not looking too good.
|
||||
</nb-alert>
|
||||
<nb-alert status="danger">
|
||||
<strong>Oh snap!</strong> Change a few things up and try submitting again.
|
||||
</nb-alert>
|
||||
</nb-card-body>
|
||||
</nb-card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
],
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue