mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 23:40:14 +01:00
feat(typography): first bunch of typography
This commit is contained in:
Dmitry Nehaychik
parent
fe7ef91ada
commit
009e5788ac
5 changed files with 773 additions and 3651 deletions
3983
package-lock.json
generated
3983
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -57,7 +57,7 @@
|
||||||
"ng2-smart-table": "1.1.0",
|
"ng2-smart-table": "1.1.0",
|
||||||
"ng2-tree": "2.0.0-alpha.5",
|
"ng2-tree": "2.0.0-alpha.5",
|
||||||
"normalize.css": "6.0.0",
|
"normalize.css": "6.0.0",
|
||||||
"roboto-fontface": "0.7.0",
|
"open-sans-fontface": "^1.4.0",
|
||||||
"rxjs": "5.4.0",
|
"rxjs": "5.4.0",
|
||||||
"tether": "1.4.0",
|
"tether": "1.4.0",
|
||||||
"tinymce": "4.5.7",
|
"tinymce": "4.5.7",
|
||||||
|
|
|
||||||
|
|
@ -1,160 +1,232 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-6">
|
|
||||||
<nga-card>
|
|
||||||
<nga-card-header>
|
|
||||||
Text size
|
|
||||||
</nga-card-header>
|
|
||||||
<nga-card-body>
|
|
||||||
<div>
|
|
||||||
<h1>H1. Heading 1</h1>
|
|
||||||
|
|
||||||
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat vestibulum
|
<div class="col-md-9">
|
||||||
eleifend pellentesque.</p>
|
<div class="row">
|
||||||
</div>
|
<div class="col-md-7">
|
||||||
<div>
|
<nga-card size="large">
|
||||||
<h2>H2. Heading 2</h2>
|
<nga-card-header>
|
||||||
|
Used Fonts
|
||||||
|
</nga-card-header>
|
||||||
|
<nga-card-body>
|
||||||
|
<div class="font-row font-secondary">
|
||||||
|
<div class="header">
|
||||||
|
<div class="name bold">Exo</div>
|
||||||
|
|
||||||
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat vestibulum
|
<div class="variants">
|
||||||
eleifend pellentesque.</p>
|
<span class="font-w-bold">Bold</span>
|
||||||
</div>
|
<span class="font-w-regular">Regular</span>
|
||||||
<div>
|
<span class="font-w-light">Light</span>
|
||||||
<h3>H3. Heading 3</h3>
|
</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>
|
||||||
|
|
||||||
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat vestibulum
|
<div class="font-row font-main">
|
||||||
eleifend pellentesque.</p>
|
<div class="header">
|
||||||
</div>
|
<div class="name bold">Open Sans</div>
|
||||||
<div>
|
|
||||||
<h4>H4. Heading 4</h4>
|
|
||||||
|
|
||||||
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra,.</p>
|
<div class="variants">
|
||||||
</div>
|
<span class="bold">Bold</span>
|
||||||
<div>
|
<span class="regular">Regular</span>
|
||||||
<h5>H5. Heading 5</h5>
|
<span class="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>
|
||||||
|
</nga-card-body>
|
||||||
|
<nga-card-footer></nga-card-footer>
|
||||||
|
</nga-card>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-5">
|
||||||
|
<nga-card size="large">
|
||||||
|
<nga-card-header>
|
||||||
|
Headings
|
||||||
|
</nga-card-header>
|
||||||
|
<nga-card-body>
|
||||||
|
<div class="header">
|
||||||
|
<div>
|
||||||
|
<h1>H1. Heading</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra.</p>
|
<div class="detail font-w-light">
|
||||||
</div>
|
Demibold 2.5rem (40px)
|
||||||
</nga-card-body>
|
</div>
|
||||||
<nga-card-footer></nga-card-footer>
|
</div>
|
||||||
</nga-card>
|
<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>
|
||||||
|
</nga-card-body>
|
||||||
|
<nga-card-footer></nga-card-footer>
|
||||||
|
</nga-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-7">
|
||||||
|
<nga-card size="medium">
|
||||||
|
<nga-card-header>
|
||||||
|
Article Example
|
||||||
|
</nga-card-header>
|
||||||
|
<nga-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.
|
||||||
|
Separated they live in <strong>Bookmarksgrove</strong>
|
||||||
|
right at the coast of the Semantics, a large language ocean.
|
||||||
|
</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>
|
||||||
|
</nga-card-body>
|
||||||
|
<nga-card-footer></nga-card-footer>
|
||||||
|
</nga-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-5">
|
||||||
|
<nga-card size="medium">
|
||||||
|
<nga-card-header>
|
||||||
|
Blockquotes
|
||||||
|
</nga-card-header>
|
||||||
|
<nga-card-body>
|
||||||
|
<blockquote class="blockquote">
|
||||||
|
<p class="mb-0">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.</p>
|
||||||
|
</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, far from the countries.</p>
|
||||||
|
<footer class="blockquote-footer">Vladimir Lugovsky</footer>
|
||||||
|
</blockquote>
|
||||||
|
</nga-card-body>
|
||||||
|
<nga-card-footer></nga-card-footer>
|
||||||
|
</nga-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6">
|
<div class="col-md-3">
|
||||||
<nga-card>
|
<nga-card size="xxlarge">
|
||||||
<nga-card-header>
|
<nga-card-header>
|
||||||
Some more text
|
Font Colors
|
||||||
</nga-card-header>
|
</nga-card-header>
|
||||||
<nga-card-body>
|
<nga-card-body>
|
||||||
<div class="font-italic">
|
<div class="colors">
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula
|
<div class="item text-heading">
|
||||||
sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed ornare nulla. Nullam quis risus
|
<div class="color bg-heading"></div>
|
||||||
eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis.
|
<div class="color-name">
|
||||||
</p>
|
<h5 class="text-heading">Heading Text</h5>
|
||||||
</div>
|
Far far away, behind the your awesomeness.
|
||||||
<div class="font-weight-normal">
|
</div>
|
||||||
<p>Curabitur bibendum ornare dolor, quis ullamcorper ligula dfgz`zzsodales at. Nullam quis risus eget urna mollis
|
</div>
|
||||||
ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam
|
<div class="item text-body">
|
||||||
id dolor id.
|
<div class="color bg-body"></div>
|
||||||
</p>
|
<div class="color-name">
|
||||||
</div>
|
<h5 class="text-body">Body Text</h5>
|
||||||
<div class="text-uppercase font-weight-bold">
|
Far far away, behind the your awesomeness.
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula
|
</div>
|
||||||
sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed ornare nulla. </p>
|
</div>
|
||||||
</div>
|
<div class="item text-hint">
|
||||||
<div class="font-weight-bold">
|
<div class="color bg-hint"></div>
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullam-corper ligula
|
<div class="color-name">
|
||||||
sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed ornare nulla.
|
<h5 class="text-hint">Hint Text</h5>
|
||||||
</p>
|
Far far away, behind the your awesomeness.
|
||||||
</div>
|
</div>
|
||||||
<div class="small">
|
</div>
|
||||||
<p>Secondary text. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar,</p>
|
<div class="item text-primary">
|
||||||
|
<div class="color bg-primary"></div>
|
||||||
<p>lacinia scelerisque pharetra, placerat vestibulum eleifend</p>
|
<div class="color-name">
|
||||||
|
<h5 class="text-primary">Primary Text</h5>
|
||||||
<p> pellentesque, mi nam.</p>
|
Far far away, behind the your awesomeness.
|
||||||
</div>
|
</div>
|
||||||
</nga-card-body>
|
</div>
|
||||||
<nga-card-footer></nga-card-footer>
|
<div class="item text-success">
|
||||||
</nga-card>
|
<div class="color bg-success"></div>
|
||||||
</div>
|
<div class="color-name">
|
||||||
</div>
|
<h5 class="text-success">Link/Hightlight Text</h5>
|
||||||
<div class="row">
|
Far far away, behind the your awesomeness.
|
||||||
<div class="col-md-6">
|
</div>
|
||||||
<nga-card>
|
</div>
|
||||||
<nga-card-header>
|
<div class="item text-info">
|
||||||
Lists
|
<div class="color bg-info"></div>
|
||||||
</nga-card-header>
|
<div class="color-name">
|
||||||
<nga-card-body>
|
<h5 class="text-info">Info Text</h5>
|
||||||
<div>
|
Far far away, behind the your awesomeness.
|
||||||
<h5>Unordered list:</h5>
|
</div>
|
||||||
<ul class="theme">
|
</div>
|
||||||
<li>Lorem ipsum dolor sit amet</li>
|
<div class="item text-warning">
|
||||||
<li>Сlacinia scelerisque pharetra
|
<div class="color bg-warning"></div>
|
||||||
<ul>
|
<div class="color-name">
|
||||||
<li>Dui rhoncus quisque integer lorem
|
<h5 class="text-warning">Warning Text</h5>
|
||||||
<ul>
|
Far far away, behind the your awesomeness.
|
||||||
<li>Libero iaculis vestibulum eu vitae</li>
|
</div>
|
||||||
</ul>
|
</div>
|
||||||
</li>
|
<div class="item text-danger">
|
||||||
</ul>
|
<div class="color bg-danger"></div>
|
||||||
</li>
|
<div class="color-name">
|
||||||
<li>Nisl lectus nibh habitasse suspendisse ut</li>
|
<h5 class="text-danger">Danger Text</h5>
|
||||||
<li><span>Posuere cursus hac, vestibulum wisi nulla bibendum</span></li>
|
Far far away, behind the your awesomeness.
|
||||||
</ul>
|
</div>
|
||||||
<h5>Ordered Lists:</h5>
|
|
||||||
<ol class="theme">
|
|
||||||
<li><span>Eu non nec cursus quis mollis, amet quam nec</span></li>
|
|
||||||
<li><span>Et suspendisse, adipiscing fringilla ornare sit ligula sed</span>
|
|
||||||
<ol>
|
|
||||||
<li><span>Interdum et justo nulla</span>
|
|
||||||
<ol>
|
|
||||||
<li><span>Magna amet, suscipit suscipit non amet</span></li>
|
|
||||||
</ol>
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
</li>
|
|
||||||
<li><span>Metus duis eu non eu ridiculus turpis</span></li>
|
|
||||||
<li>
|
|
||||||
<span>Neque egestas id fringilla consectetuer justo curabitur, wisi magna neque commodo volutpat</span>
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
<div>Important text fragment. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra.
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nga-card-body>
|
</nga-card-body>
|
||||||
<nga-card-footer></nga-card-footer>
|
<nga-card-footer></nga-card-footer>
|
||||||
</nga-card>
|
</nga-card>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6">
|
|
||||||
<nga-card>
|
|
||||||
<nga-card-header>
|
|
||||||
Text color
|
|
||||||
</nga-card-header>
|
|
||||||
<nga-card-body>
|
|
||||||
<div class="text-danger">
|
|
||||||
<p>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.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="text-warning">
|
|
||||||
<p>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.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="links">
|
|
||||||
<p>Lorem ipsum <a href>dolor</a> sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis
|
|
||||||
<a href>ullamcorper</a> ligula sodales at. Nulla tellus elit, varius non commodo eget, <a href>mattis</a> vel
|
|
||||||
eros. In sed ornare nulla.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="links">
|
|
||||||
<p><a href>Active link — #209e91</a></p>
|
|
||||||
|
|
||||||
<p class="hovered"><a href>Hover link — #17857a</a></p>
|
|
||||||
</div>
|
|
||||||
</nga-card-body>
|
|
||||||
<nga-card-footer></nga-card-footer>
|
|
||||||
</nga-card>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,80 @@
|
||||||
|
@import '../../../@theme/styles/variables';
|
||||||
|
|
||||||
|
@include nga-install-component() {
|
||||||
|
|
||||||
|
.font-secondary .header .name {
|
||||||
|
font-size: 4.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font-main .header .name {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font-row {
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
border-bottom: 1px solid rgba(nga-theme(color-fg), 0.1);
|
||||||
|
color: nga-theme(color-fg-heading);
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
div:first-child {
|
||||||
|
flex-basis: 50%;
|
||||||
|
line-height: 1;
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.variants {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
|
span {
|
||||||
|
padding-left: 1rem;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: flex-end;
|
||||||
|
color: nga-theme(color-fg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.colors {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.color {
|
||||||
|
width: 86px;
|
||||||
|
height: 60px;
|
||||||
|
border-top-right-radius: 1rem;
|
||||||
|
border-bottom-left-radius: 1rem;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -2,6 +2,7 @@ import { Component } from '@angular/core';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ngx-typography',
|
selector: 'ngx-typography',
|
||||||
|
styleUrls: ['./typography.component.scss'],
|
||||||
templateUrl: './typography.component.html',
|
templateUrl: './typography.component.html',
|
||||||
})
|
})
|
||||||
export class TypographyComponent {
|
export class TypographyComponent {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue