mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 23:40:14 +01:00
ui typography
This commit is contained in:
nixa
parent
0dfcf86787
commit
85d5441f71
3 changed files with 247 additions and 9 deletions
|
|
@ -1,8 +1,13 @@
|
||||||
import {Component, ViewEncapsulation} from '@angular/core';
|
import {Component, ViewEncapsulation} from '@angular/core';
|
||||||
|
|
||||||
|
|
||||||
|
import {AppPicturePipe} from '../../../../theme/pipes';
|
||||||
|
import {BaCard} from '../../../../theme/components';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'typography',
|
selector: 'typography',
|
||||||
pipes: [],
|
pipes: [AppPicturePipe],
|
||||||
|
directives: [BaCard],
|
||||||
providers: [],
|
providers: [],
|
||||||
styles: [],
|
styles: [],
|
||||||
template: require('./typography.html'),
|
template: require('./typography.html'),
|
||||||
|
|
@ -11,9 +16,4 @@ export class Typography {
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
|
||||||
console.log('typography');
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1 +1,238 @@
|
||||||
hello
|
<div class="typography-document-samples row-fluid">
|
||||||
|
<div class="col-xlg-3 col-lg-6 col-md-6 col-sm-6 col-xs-12 typography-widget">
|
||||||
|
|
||||||
|
<ba-card title="Text Size" baCardClass="with-scroll heading-widget">
|
||||||
|
|
||||||
|
<div class="section-block">
|
||||||
|
<h1>H1. Heading 1</h1>
|
||||||
|
|
||||||
|
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
|
||||||
|
vestibulum eleifend pellentesque.</p>
|
||||||
|
</div>
|
||||||
|
<div class="section-block">
|
||||||
|
<h2>H2. Heading 2</h2>
|
||||||
|
|
||||||
|
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
|
||||||
|
vestibulum eleifend pellentesque.</p>
|
||||||
|
</div>
|
||||||
|
<div class="section-block">
|
||||||
|
<h3>H3. Heading 3</h3>
|
||||||
|
|
||||||
|
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
|
||||||
|
vestibulum eleifend pellentesque.</p>
|
||||||
|
</div>
|
||||||
|
<div class="section-block">
|
||||||
|
<h4>H4. Heading 4</h4>
|
||||||
|
|
||||||
|
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra,.</p>
|
||||||
|
</div>
|
||||||
|
<div class="section-block">
|
||||||
|
<h5>H5. Heading 5</h5>
|
||||||
|
|
||||||
|
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ba-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-xlg-3 col-lg-6 col-md-6 col-sm-6 col-xs-12 typography-widget">
|
||||||
|
|
||||||
|
<ba-card title="Some more text" baCardClass="with-scroll more-text-widget">
|
||||||
|
|
||||||
|
<div class="section-block light-text">
|
||||||
|
<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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="section-block regular-text">
|
||||||
|
<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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="section-block upper-text bold-text">
|
||||||
|
<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. </p>
|
||||||
|
</div>
|
||||||
|
<div class="section-block bold-text">
|
||||||
|
<p>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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="section-block small-text">
|
||||||
|
<p>Secondary text. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar,</p>
|
||||||
|
|
||||||
|
<p>lacinia scelerisque pharetra, placerat vestibulum eleifend</p>
|
||||||
|
|
||||||
|
<p> pellentesque, mi nam.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</ba-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-xlg-3 col-lg-6 col-md-6 col-sm-6 col-xs-12 typography-widget">
|
||||||
|
|
||||||
|
<ba-card title="Lists" baCardClass="with-scroll lists-widget">
|
||||||
|
|
||||||
|
<div class="section-block">
|
||||||
|
<h5 class="list-header">Unordered list:</h5>
|
||||||
|
<ul class="blur">
|
||||||
|
<li>Lorem ipsum dolor sit amet</li>
|
||||||
|
<li>Сlacinia scelerisque pharetra
|
||||||
|
<ul>
|
||||||
|
<li>Dui rhoncus quisque integer lorem
|
||||||
|
<ul>
|
||||||
|
<li>Libero iaculis vestibulum eu vitae</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>Nisl lectus nibh habitasse suspendisse ut</li>
|
||||||
|
<li><span>Posuere cursus hac, vestibulum wisi nulla bibendum</span></li>
|
||||||
|
</ul>
|
||||||
|
<h5 class="list-header">Ordered Lists:</h5>
|
||||||
|
<ol class="blur">
|
||||||
|
<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 class="accent">Important text fragment. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl
|
||||||
|
pulvinar,
|
||||||
|
lacinia scelerisque pharetra.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ba-card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-xlg-3 col-lg-6 col-md-6 col-sm-6 col-xs-12 typography-widget">
|
||||||
|
|
||||||
|
<ba-card title="Text Color" baCardClass="with-scroll color-widget">
|
||||||
|
<div class="section-block red-text ">
|
||||||
|
<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="section-block yellow-text ">
|
||||||
|
<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="section-block 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="section-block links">
|
||||||
|
<p><a href>Active link — #209e91</a></p>
|
||||||
|
|
||||||
|
<p class="hovered"><a href>Hover link — #17857a</a></p>
|
||||||
|
</div>
|
||||||
|
</ba-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="row-fluid">
|
||||||
|
<div class="col-lg-12 col-sm-12 col-xs-12">
|
||||||
|
|
||||||
|
<ba-card baCardClass="banner-column-panel">
|
||||||
|
<div class="banner">
|
||||||
|
<div class="large-banner-wrapper">
|
||||||
|
<img src="{{ ( 'app/typography/banner.png' | appPicture ) }}" alt=""/>
|
||||||
|
</div>
|
||||||
|
<div class="banner-text-wrapper">
|
||||||
|
<div class="banner-text">
|
||||||
|
<h1>Simple Banner Text</h1>
|
||||||
|
|
||||||
|
<p>Lorem ipsum dolor sit amet</p>
|
||||||
|
|
||||||
|
<p>Odio amet viverra rutrum</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="section">
|
||||||
|
<h2>Columns</h2>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="img-wrapper"><img src="{{ ( 'app/typography/typo03.png' | appPicture ) }}" alt="" title=""/>
|
||||||
|
</div>
|
||||||
|
<p>Vel elit, eros elementum, id lacinia, duis non ut ut tortor blandit. Mauris <a
|
||||||
|
href>dapibus</a> magna rutrum. Ornare neque suspendisse <a
|
||||||
|
href>phasellus wisi</a>, quam cras pede rutrum suspendisse, <a
|
||||||
|
href>felis amet eu</a>. Congue magna elit quisque quia, nullam justo sagittis,
|
||||||
|
ante erat libero placerat, proin condimentum consectetuer lacus. Velit condimentum velit, sed
|
||||||
|
penatibus
|
||||||
|
arcu nulla.</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-6">
|
||||||
|
<div class="img-wrapper"><img src="{{ ( 'app/typography/typo01.png' | appPicture ) }}" alt="" title=""/>
|
||||||
|
</div>
|
||||||
|
<p>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.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="separator"></div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<h4>Column heading example</h4>
|
||||||
|
<div class="img-wrapper"><img src="{{ ( 'app/typography/typo04.png' | appPicture ) }}" alt=""/></div>
|
||||||
|
<p>Eget augue, lacus erat ante egestas scelerisque aliquam, metus molestie leo in habitasse magna
|
||||||
|
maecenas</p>
|
||||||
|
<a href class="learn-more">Lean more</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<h4>Yet another column heading example</h4>
|
||||||
|
<div class="img-wrapper"><img src="{{ ( 'app/typography/typo05.png' | appPicture ) }}" alt=""/></div>
|
||||||
|
<p>Augue massa et parturient, suspendisse orci nec scelerisque sit, integer nam mauris pede consequat
|
||||||
|
in
|
||||||
|
velit</p>
|
||||||
|
<a href class="learn-more">Lean more</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<h4>Third column heading example</h4>
|
||||||
|
<div class="img-wrapper"><img src="{{ ( 'app/typography/typo06.png' | appPicture ) }}" alt=""/></div>
|
||||||
|
<p>Eget turpis, tortor lobortis porttitor, vestibulum nullam vehicula aliquam</p>
|
||||||
|
<a href class="learn-more">Lean more</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="separator"></div>
|
||||||
|
</div>
|
||||||
|
</ba-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,7 @@ body a {
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
|
|
@ -213,7 +214,7 @@ h5 {
|
||||||
line-height: 14px;
|
line-height: 14px;
|
||||||
position: relative;
|
position: relative;
|
||||||
span {
|
span {
|
||||||
color: $default-text;
|
color: $default;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
ol {
|
ol {
|
||||||
|
|
@ -420,7 +421,7 @@ a.learn-more {
|
||||||
padding: 0 20px 50px 20px;
|
padding: 0 20px 50px 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card.banner-column-card {
|
.card.banner-column-panel {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin-bottom: 90px;
|
margin-bottom: 90px;
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue