From 2603b8a9d0787f88cc77ca3238a6b3e5375f1602 Mon Sep 17 00:00:00 2001
From: nixa <4dmitr@gmail.com>
Date: Wed, 18 May 2016 13:38:39 +0300
Subject: [PATCH] typography stylefix

---
 .../ui/components/typography/typography.html  | 356 +++++++++---------
 1 file changed, 180 insertions(+), 176 deletions(-)

diff --git a/src/app/pages/ui/components/typography/typography.html b/src/app/pages/ui/components/typography/typography.html
index ab7d12d1..06618bf9 100644
--- a/src/app/pages/ui/components/typography/typography.html
+++ b/src/app/pages/ui/components/typography/typography.html
@@ -1,41 +1,43 @@
-<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">
+<div class="widgets">
 
-    <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">
-        <h1>H1. Heading 1</h1>
+      <ba-card title="Text Size" baCardClass="with-scroll heading-widget">
 
-        <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>
+        <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">
-        <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">
+          <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">
-        <h4>H4. Heading 4</h4>
+          <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,.</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, 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>
+          <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>
 
-    </ba-card>
-  </div>
+          <p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra.</p>
+        </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">
 
@@ -69,170 +71,172 @@
           </p>
         </div>
         <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>
-      </div>
+          <p> pellentesque, mi nam.</p>
+        </div>
 
       </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">
-        <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 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>
-      </div>
-      <div class="section">
-        <h2>Columns</h2>
+      </ba-card>
+    </div>
 
-        <div class="row">
-          <div class="col-sm-6">
-            <div class="img-wrapper"><img src="{{ ( 'app/typography/typo03.png' | appPicture ) }}" alt="" title=""/>
+    <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">
+    <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>
-            <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>
+        <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>
-            <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="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 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>
-        <div class="separator"></div>
-      </div>
-    </ba-card>
+      </ba-card>
+    </div>
   </div>
+
 </div>