Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 23:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

ui typography

Browse source
This commit is contained in:
nixa 2016-05-12 11:17:54 +03:00
parent 0dfcf86787
commit 85d5441f71
3 changed files with 247 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/app/pages/ui/components/typography/typography.component.ts
View file

@ -1,8 +1,13 @@
import {Component, ViewEncapsulation} from '@angular/core';
import {AppPicturePipe} from '../../../../theme/pipes';
import {BaCard} from '../../../../theme/components';
@Component({
selector: 'typography',
pipes: [],
pipes: [AppPicturePipe],
directives: [BaCard],
providers: [],
styles: [],
template: require('./typography.html'),
@ -11,9 +16,4 @@ export class Typography {
constructor() {
}
ngOnInit() {
console.log('typography');
}
}

239
src/app/pages/ui/components/typography/typography.html
View file

@ -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>

5
src/app/theme/sass/_typography.scss
View file

@ -19,6 +19,7 @@ body a {
h1 {
font-size: 32px;
margin-bottom: 0.5rem;
}
h2 {
@ -213,7 +214,7 @@ h5 {
line-height: 14px;
position: relative;
span {
color: $default-text;
color: $default;
display: block;
}
ol {
@ -420,7 +421,7 @@ a.learn-more {
padding: 0 20px 50px 20px;
}
.card.banner-column-card {
.card.banner-column-panel {
padding: 0;
margin-bottom: 90px;