issue #9

Author: pgalias

.gitignore

@@ -5,3 +5,4 @@ build
 .grunt
 .DS_Store
 .idea/
+test.html

docs/components/index.html

@@ -427,6 +427,7 @@ <h3>Theme</h3>
                 <input type="checkbox" name="modal" id="modal" class="modal__trigger">
                 <label for="modal" class="btn btn-lg btn-blue-inverse">Launch Modal</label>
                 <div class="modal__overlay">
+                  <label for="modal" class="modal__overlay--dismiss"></label>
                   <div class="modal__dialog modal__dialog--fixed-size modal__dialog--blue">
                     <div class="modal__header">
                       <h3>Modal</h3>
@@ -442,6 +443,7 @@ <h3>Modal</h3>
   &lt;input type=&quot;checkbox&quot; name=&quot;modal&quot; id=&quot;modal&quot; class=&quot;modal__trigger&quot;&gt;
   &lt;label for=&quot;modal&quot; class=&quot;btn btn-lg btn-blue-inverse&quot;&gt;Launch modal&lt;/label&gt;
   &lt;div class=&quot;modal__overlay&quot; role=&quot;dialog&quot;&gt;
+    &lt;label for=&quot;modal&quot; class=&quot;modal__overlay--dismiss&quot;&gt;&lt;/label&gt;
     &lt;div class=&quot;modal__dialog modal__dialog--fixed-size modal__dialog--blue"&gt;
       &lt;div class=&quot;modal__header"&gt;
         &lt;h3&gt;Modal&lt;/h3&gt;
@@ -503,7 +505,7 @@ <h3>Theme</h3>
                 <input type="radio" name="slider" id="slide-3">
                 <input type="radio" name="slider" id="slide-4">
                 <ul>
-                  <li><img src="https://placekitten.com/800/600">
+                  <li><img src="https://placekitten.com/900/650">
                     <div class="slide__content">
                       <h2>slide #1</h2>
                       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, inventore, nisi! Accusantium ad aliquam beatae culpa dignissimos eligendi esse explicabo fugit laboriosam maxime modi nam nulla, obcaecati odit, provident vero!</p>
@@ -629,9 +631,9 @@ <h2>Tab #1</h2>
                 <li>
                   <input type="radio" name="tabs" id="tabs-2">
                   <label for="tabs-2">tab 2</label>
-                  <div class="tab__content">
+                  <div class="tab__content tab__content--scrollable">
                     <h2>Tab #2</h2>
-                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, inventore, nisi! Accusantium ad aliquam beatae culpa dignissimos eligendi esse explicabo fugit laboriosam maxime modi nam nulla, obcaecati odit, provident vero!</p>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, inventore, nisi! Accusantium ad aliquam beatae culpa dignissimos eligendi esse explicabo fugit laboriosam maxime modi nam nulla, obcaecati odit, provident vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, inventore, nisi! Accusantium ad aliquam beatae culpa dignissimos eligendi esse explicabo fugit laboriosam maxime modi nam nulla, obcaecati odit, provident vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, inventore, nisi! Accusantium ad aliquam beatae culpa dignissimos eligendi esse explicabo fugit laboriosam maxime modi nam nulla, obcaecati odit, provident vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, inventore, nisi! Accusantium ad aliquam beatae culpa dignissimos eligendi esse explicabo fugit laboriosam maxime modi nam nulla, obcaecati odit, provident vero! Admirals walk from metamorphosis like remarkable girls. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, inventore, nisi! Accusantium ad aliquam beatae culpa dignissimos eligendi esse explicabo fugit laboriosam maxime modi nam nulla, obcaecati odit, provident vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, inventore, nisi! Accusantium ad aliquam beatae culpa dignissimos eligendi esse explicabo fugit laboriosam maxime modi nam nulla, obcaecati odit, provident vero!</p>
                   </div>
                 </li>
                 <li>
@@ -665,9 +667,9 @@ <h2>Tab #4</h2>
   &lt;li&gt;
     &lt;input type=&quot;radio&quot; name=&quot;tabs&quot; id=&quot;tab2&quot;&gt;
     &lt;label for=&quot;tab2&quot;&gt;tab2 header&lt;/label&gt;
-    &lt;div class=&quot;tab__content&quot;&gt;
+    &lt;div class=&quot;tab__content tab__content--scrollable&quot;&gt;
       &lt;h2&gt;Tab 2&lt;/h2&gt;
-      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, inventore, nisi! Accusantium ad aliquam beatae culpa dignissimos eligendi esse explicabo fugit laboriosam maxime modi nam nulla, obcaecati odit, provident vero!&lt;/p&gt;
+      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, inventore, nisi! Accusantium ad aliquam beatae culpa dignissimos eligendi esse explicabo fugit laboriosam maxime modi nam nulla, obcaecati odit, provident vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, inventore, nisi! Accusantium ad aliquam beatae culpa dignissimos eligendi esse explicabo fugit laboriosam maxime modi nam nulla, obcaecati odit, provident vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, inventore, nisi! Accusantium ad aliquam beatae culpa dignissimos eligendi esse explicabo fugit laboriosam maxime modi nam nulla, obcaecati odit, provident vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, inventore, nisi! Accusantium ad aliquam beatae culpa dignissimos eligendi esse explicabo fugit laboriosam maxime modi nam nulla, obcaecati odit, provident vero! Admirals walk from metamorphosis like remarkable girls. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, inventore, nisi! Accusantium ad aliquam beatae culpa dignissimos eligendi esse explicabo fugit laboriosam maxime modi nam nulla, obcaecati odit, provident vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, inventore, nisi! Accusantium ad aliquam beatae culpa dignissimos eligendi esse explicabo fugit laboriosam maxime modi nam nulla, obcaecati odit, provident vero!&lt;/p&gt;
     &lt;/div&gt; &lt;!-- /.tab__content --&gt;
   &lt;/li&gt; &lt;!-- /tab element --&gt;
 &nbsp;

docs/get-started/index.html

@@ -53,15 +53,15 @@
         <div class="col-xs-12 col-md-8">
           <article id="download">
             <h1><a href="#download">Download</a></h1>
-            <p>PCC (now in v2.0.0) can be downloaded in two different ways.</p>
+            <p>PCC (now in <span class="version"></span>) can be downloaded in two different ways.</p>
             <div class="row">
               <div class="col-xs-12 col-sm-6">
                 <h3>Compiled</h3>
                 <p>Compiled and minified CSS file, ready for including and using in your project.</p><a href="#" class="btn btn-lg btn-blue-inverse">Download compiled</a>
               </div>
               <div class="col-xs-12 col-sm-6">
                 <h3>Source</h3>
-                <p>Source LESS code and Gulp file. Requires LESS compiler to compiling code and Gulp to running tasks.</p><a href="https://github.com/pgalias/pure-css-components/archive/v2.0.0.zip" class="btn btn-lg btn-blue-inverse">Download source</a>
+                <p>Source LESS code and Gulp file. Requires LESS compiler to compiling code and Gulp to running tasks.</p><a href="#" class="btn btn-lg btn-blue-inverse package-dwn">Download source</a>
               </div>
             </div>
           </article>