Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-03-14 09:26:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

typography stylefix

Browse source
This commit is contained in:
nixa 2016-05-18 13:38:39 +03:00
parent 89c541f6c6
commit 2603b8a9d0
1 changed files with 180 additions and 176 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,41 +1,43 @@
<div class="typography-document-samples row-fluid"> <div class="widgets">
<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="typography-document-samples row">
<div class="col-xlg-3 col-lg-6 col-md-6 col-sm-6 col-xs-12 typography-widget">
<div class="section-block"> <ba-card title="Text Size" baCardClass="with-scroll heading-widget">
<h1>H1. Heading 1</h1>
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat <div class="section-block">
vestibulum eleifend pellentesque.</p> <h1>H1. Heading 1</h1>
</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 <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
vestibulum eleifend pellentesque.</p> vestibulum eleifend pellentesque.</p>
</div> </div>
<div class="section-block"> <div class="section-block">
<h3>H3. Heading 3</h3> <h2>H2. Heading 2</h2>
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
vestibulum eleifend pellentesque.</p> vestibulum eleifend pellentesque.</p>
</div> </div>
<div class="section-block"> <div class="section-block">
<h4>H4. Heading 4</h4> <h3>H3. Heading 3</h3>
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra,.</p> <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
</div> vestibulum eleifend pellentesque.</p>
<div class="section-block"> </div>
<h5>H5. Heading 5</h5> <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> <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra,.</p>
</div> </div>
<div class="section-block">
<h5>H5. Heading 5</h5>
</ba-card> <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra.</p>
</div> </div>
<div class="col-xlg-3 col-lg-6 col-md-6 col-sm-6 col-xs-12 typography-widget"> </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"> <ba-card title="Some more text" baCardClass="with-scroll more-text-widget">
@ -69,170 +71,172 @@
</p> </p>
</div> </div>
<div class="section-block small-text"> <div class="section-block small-text">
<p>Secondary text. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar,</p> <p>Secondary text. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar,</p>
<p>lacinia scelerisque pharetra, placerat vestibulum eleifend</p> <p>lacinia scelerisque pharetra, placerat vestibulum eleifend</p>
<p> pellentesque, mi nam.</p> <p> pellentesque, mi nam.</p>
</div> </div>
</ba-card> </ba-card>
</div> </div>
<div class="col-xlg-3 col-lg-6 col-md-6 col-sm-6 col-xs-12 typography-widget"> <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"> <ba-card title="Lists" baCardClass="with-scroll lists-widget">
<div class="section-block"> <div class="section-block">
<h5 class="list-header">Unordered list:</h5> <h5 class="list-header">Unordered list:</h5>
<ul class="blur"> <ul class="blur">
<li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li>
<li>Сlacinia scelerisque pharetra <li>Сlacinia scelerisque pharetra
<ul> <ul>
<li>Dui rhoncus quisque integer lorem <li>Dui rhoncus quisque integer lorem
<ul> <ul>
<li>Libero iaculis vestibulum eu vitae</li> <li>Libero iaculis vestibulum eu vitae</li>
</ul> </ul>
</li> </li>
</ul> </ul>
</li> </li>
<li>Nisl lectus nibh habitasse suspendisse ut</li> <li>Nisl lectus nibh habitasse suspendisse ut</li>
<li><span>Posuere cursus hac, vestibulum wisi nulla bibendum</span></li> <li><span>Posuere cursus hac, vestibulum wisi nulla bibendum</span></li>
</ul> </ul>
<h5 class="list-header">Ordered Lists:</h5> <h5 class="list-header">Ordered Lists:</h5>
<ol class="blur"> <ol class="blur">
<li><span>Eu non nec cursus quis mollis, amet quam nec</span></li> <li><span>Eu non nec cursus quis mollis, amet quam nec</span></li>
<li><span>Et suspendisse, adipiscing fringilla ornare sit ligula sed</span> <li><span>Et suspendisse, adipiscing fringilla ornare sit ligula sed</span>
<ol> <ol>
<li><span>Interdum et justo nulla</span> <li><span>Interdum et justo nulla</span>
<ol> <ol>
<li><span>Magna amet, suscipit suscipit non amet</span></li> <li><span>Magna amet, suscipit suscipit non amet</span></li>
</ol> </ol>
</li> </li>
</ol> </ol>
</li> </li>
<li><span>Metus duis eu non eu ridiculus turpis</span></li> <li><span>Metus duis eu non eu ridiculus turpis</span></li>
<li> <li>
<span>Neque egestas id fringilla consectetuer justo curabitur, wisi magna neque commodo volutpat</span> <span>Neque egestas id fringilla consectetuer justo curabitur, wisi magna neque commodo volutpat</span>
</li> </li>
</ol> </ol>
<div class="accent">Important text fragment. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl <div class="accent">Important text fragment. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl
pulvinar, pulvinar,
lacinia scelerisque pharetra. 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>
</div> </ba-card>
<div class="section"> </div>
<h2>Columns</h2>
<div class="row"> <div class="col-xlg-3 col-lg-6 col-md-6 col-sm-6 col-xs-12 typography-widget">
<div class="col-sm-6">
<div class="img-wrapper"><img src="{{ ( 'app/typography/typo03.png' | appPicture ) }}" alt="" title=""/> <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">
<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>
<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>
<div class="col-sm-6"> </div>
<div class="img-wrapper"><img src="{{ ( 'app/typography/typo01.png' | appPicture ) }}" alt="" title=""/> <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>
<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>
<div class="separator"></div> <div class="separator"></div>
<div class="row"> <div class="row">
<div class="col-sm-4"> <div class="col-sm-4">
<h4>Column heading example</h4> <h4>Column heading example</h4>
<div class="img-wrapper"><img src="{{ ( 'app/typography/typo04.png' | appPicture ) }}" alt=""/></div> <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 <p>Eget augue, lacus erat ante egestas scelerisque aliquam, metus molestie leo in habitasse magna
maecenas</p> maecenas</p>
<a href class="learn-more">Lean more</a> <a href class="learn-more">Lean more</a>
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<h4>Yet another column heading example</h4> <h4>Yet another column heading example</h4>
<div class="img-wrapper"><img src="{{ ( 'app/typography/typo05.png' | appPicture ) }}" alt=""/></div> <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 <p>Augue massa et parturient, suspendisse orci nec scelerisque sit, integer nam mauris pede consequat
in in
velit</p> velit</p>
<a href class="learn-more">Lean more</a> <a href class="learn-more">Lean more</a>
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<h4>Third column heading example</h4> <h4>Third column heading example</h4>
<div class="img-wrapper"><img src="{{ ( 'app/typography/typo06.png' | appPicture ) }}" alt=""/></div> <div class="img-wrapper"><img src="{{ ( 'app/typography/typo06.png' | appPicture ) }}" alt=""/></div>
<p>Eget turpis, tortor lobortis porttitor, vestibulum nullam vehicula aliquam</p> <p>Eget turpis, tortor lobortis porttitor, vestibulum nullam vehicula aliquam</p>
<a href class="learn-more">Lean more</a> <a href class="learn-more">Lean more</a>
</div>
</div> </div>
<div class="separator"></div>
</div> </div>
<div class="separator"></div> </ba-card>
</div> </div>
</ba-card>
</div> </div>
</div> </div>