Merge pull request #341 from picturepan2/0.4.6

0.4.6
picturepan2 · Nov 20, 2017 · 605dbf8 · 605dbf8
2 parents 721fb6f + f9b68c6
commit 605dbf8
Show file tree

Hide file tree

Showing 29 changed files with 193 additions and 104 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,15 @@
 ## Spectre.css Changelog
 
+### [v0.4.6](https://github.com/picturepan2/spectre/releases/tag/v0.4.6)
+
+- Add new Sliders example #328
+- Add Table with horizontal scroll support #333
+- Update Calendar event style which makes use of color utilities #326 
+- Define $parallax-fade-color as default variable #332
+- Fix the Docs content mistake
+- Fix breadcrumb-item extra spacing #337
+- Fix comparison slider image responsive bug #338
+
 ### [v0.4.5](https://github.com/picturepan2/spectre/releases/tag/v0.4.5)
 
 - Rewrite Off-canvas component
@@ -21,7 +31,7 @@
 - Improve Buttons and Forms small and large variables
 - Improve Filters code
 - Improve gulpfile and package
-- Add Importing SASS Docs
+- Add Importing Sass Docs
 
 ### [v0.4.2](https://github.com/picturepan2/spectre/releases/tag/v0.4.2)
 
@@ -39,7 +49,7 @@
 
 ### [v0.4.0](https://github.com/picturepan2/spectre/releases/tag/v0.4.0)
 
-- Switch from LESS to SASS
+- Switch from Less to Sass
 - Add Cursor utilities
 
 ### [v0.3.2](https://github.com/picturepan2/spectre/releases/tag/v0.3.2)

diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@ Spectre.css is a lightweight, responsive and modern CSS framework.
 - Flexbox-based, responsive and mobile-friendly layout
 - Elegantly designed and developed elements and components
 
-Spectre is a side project based on years of CSS development work on a large web service project. Spectre only includes modern base styles, responsive layout system, CSS components and utilities, and it can be modified for your project with SASS/SCSS compiler.
+Spectre is a side project based on years of CSS development work on a large web service project. Spectre only includes modern base styles, responsive layout system, CSS components and utilities, and it can be modified for your project with Sass/Scss compiler.
 
 Spectre.css is completely free to use. If you enjoy it, please consider [donating via Paypal](https://www.paypal.me/picturepan2) for the further development. ♥ 
 

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "spectre.css",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "description": "Spectre.css: a lightweight, responsive and modern CSS framework.",
   "homepage": "http://picturepan2.github.io/spectre",
   "repository": "picturepan2/spectre",

diff --git a/docs/components.html b/docs/components.html
@@ -858,53 +858,36 @@ <h3 class="s-title"><a href="#breadcrumbs" class="anchor" aria-hidden="true">#</
             <div class="column col-12">
                 <ul class="breadcrumb">
                   <li class="breadcrumb-item">
-                    <a href="#breadcrumbs" class="tooltip" data-tooltip="Home">
-                      Home
-                    </a>
+                    <a href="#breadcrumbs" class="tooltip" data-tooltip="Home">Home</a>
                   </li>
                   <li class="breadcrumb-item">
-                    <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings">
-                      Settings
-                    </a>
+                    <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings">Settings</a>
                   </li>
                 </ul>
               </div>
           <div class="column col-12">
             <ul class="breadcrumb">
               <li class="breadcrumb-item">
-                <a href="#breadcrumbs" class="tooltip" data-tooltip="Home">
-                  Home
-                </a>
+                <a href="#breadcrumbs" class="tooltip" data-tooltip="Home">Home</a>
               </li>
               <li class="breadcrumb-item">
-                <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings">
-                  Settings
-                </a>
+                <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings">Settings</a>
               </li>
               <li class="breadcrumb-item">
-                <a href="#breadcrumbs" class="tooltip" data-tooltip="Change avatar">
-                  Change avatar
-                </a>
+                <a href="#breadcrumbs" class="tooltip" data-tooltip="Change avatar">Change avatar</a>
               </li>
             </ul>
           </div>
           <div class="column col-12">
             <ul class="breadcrumb">
               <li class="breadcrumb-item">
-                <a href="#breadcrumbs" class="tooltip" data-tooltip="Home">
-                  Home
-                </a>
+                <a href="#breadcrumbs" class="tooltip" data-tooltip="Home">Home</a>
               </li>
               <li class="breadcrumb-item">
-                <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings">
-                  Settings
-                </a>
+                <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings">Settings</a>
               </li>
-              <li class="breadcrumb-item">
-                Search result:
-                <a href="#breadcrumbs" class="tooltip" data-tooltip="Search result: Spectre">
-                  Spectre
-                </a>
+              <li class="breadcrumb-item">Search result:
+                <a href="#breadcrumbs" class="tooltip" data-tooltip="Search result: Spectre">Spectre</a>
               </li>
             </ul>
           </div>
@@ -1922,7 +1905,7 @@ <h3 class="s-title"><a href="#popovers" class="anchor" aria-hidden="true">#</a>P
                 <div class="card">
                   <div class="card-header">
                     <div class="card-title h5">Apple</div>
-                    <div class="card-subtitle">Software and hardware</div>
+                    <div class="card-subtitle text-gray">Software and hardware</div>
                   </div>
                   <div class="card-body">
                     To make a contribution to the world by making tools for the mind that advance humankind.
@@ -1943,7 +1926,7 @@ <h3 class="s-title"><a href="#popovers" class="anchor" aria-hidden="true">#</a>P
                 <div class="card">
                   <div class="card-header">
                     <div class="card-title h5">Apple</div>
-                    <div class="card-subtitle">Software and hardware</div>
+                    <div class="card-subtitle text-gray">Software and hardware</div>
                   </div>
                   <div class="card-body">
                     To make a contribution to the world by making tools for the mind that advance humankind.
@@ -1964,7 +1947,7 @@ <h3 class="s-title"><a href="#popovers" class="anchor" aria-hidden="true">#</a>P
                 <div class="card">
                   <div class="card-header">
                     <div class="card-title h5">Apple</div>
-                    <div class="card-subtitle">Software and hardware</div>
+                    <div class="card-subtitle text-gray">Software and hardware</div>
                   </div>
                   <div class="card-body">
                     To make a contribution to the world by making tools for the mind that advance humankind.
@@ -1985,7 +1968,7 @@ <h3 class="s-title"><a href="#popovers" class="anchor" aria-hidden="true">#</a>P
                 <div class="card">
                   <div class="card-header">
                     <div class="card-title h5">Apple</div>
-                    <div class="card-subtitle">Software and hardware</div>
+                    <div class="card-subtitle text-gray">Software and hardware</div>
                   </div>
                   <div class="card-body">
                     To make a contribution to the world by making tools for the mind that advance humankind.

diff --git a/docs/css/docs.css b/docs/css/docs.css
@@ -1,6 +1,6 @@
 /*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */
 .version::after {
-  content: "0.4.5";
+  content: "0.4.6";
 }
 
 .off-canvas .off-canvas-toggle {

diff --git a/docs/dist/spectre-exp.css b/docs/dist/spectre-exp.css
@@ -1,4 +1,4 @@
-/*! Spectre.css Experimentals v0.4.5 | MIT License | github.com/picturepan2/spectre */
+/*! Spectre.css Experimentals v0.4.6 | MIT License | github.com/picturepan2/spectre */
 .calendar {
   border: .05rem solid #e7e9ed;
   border-radius: .1rem;
@@ -196,9 +196,7 @@
 }
 
 .calendar.calendar-lg .calendar-event {
-  background: #f1f1fc;
   border-radius: .1rem;
-  color: #5755d9;
   display: block;
   font-size: .7rem;
   margin: .1rem auto;
@@ -356,7 +354,7 @@
 .comparison-slider .comparison-before img,
 .comparison-slider .comparison-after img {
   height: 100%;
-  object-fit: none;
+  object-fit: cover;
   object-position: left center;
   position: absolute;
   width: 100%;
@@ -816,6 +814,10 @@
   outline: none;
 }
 
+.slider.tooltip:not([data-tooltip])::after {
+  content: attr(value);
+}
+
 .slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   background: #5755d9;

diff --git a/docs/dist/spectre-exp.min.css b/docs/dist/spectre-exp.min.css
diff --git a/docs/dist/spectre-icons.css b/docs/dist/spectre-icons.css
@@ -1,4 +1,4 @@
-/*! Spectre.css Icons v0.4.5 | MIT License | github.com/picturepan2/spectre */
+/*! Spectre.css Icons v0.4.6 | MIT License | github.com/picturepan2/spectre */
 .icon {
   box-sizing: border-box;
   display: inline-block;

diff --git a/docs/dist/spectre-icons.min.css b/docs/dist/spectre-icons.min.css
diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css
@@ -1,4 +1,4 @@
-/*! Spectre.css v0.4.5 | MIT License | github.com/picturepan2/spectre */
+/*! Spectre.css v0.4.6 | MIT License | github.com/picturepan2/spectre */
 /* Manually forked from Normalize.css */
 /* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
 /** 1. Change the default font family in all browsers (opinionated). 2. Correct the line height in all browsers. 3. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. */
@@ -509,15 +509,22 @@ dl dd {
   background: #f8f9fa;
 }
 
-.table.table-hover tbody tr:hover {
+.table tbody tr.active,
+.table.table-striped tbody tr.active {
   background: #f0f1f4;
 }
 
-.table tbody tr.active,
-.table.table-striped tbody tr.active {
+.table.table-hover tbody tr:hover {
   background: #f0f1f4;
 }
 
+.table.table-scroll {
+  display: block;
+  overflow-x: auto;
+  padding-bottom: .75rem;
+  white-space: nowrap;
+}
+
 .table td,
 .table th {
   border-bottom: .05rem solid #e7e9ed;
@@ -2119,7 +2126,7 @@ summary.accordion-header::-webkit-details-marker {
 .breadcrumb .breadcrumb-item:not(:first-child)::before {
   color: #e7e9ed;
   content: "/";
-  padding-right: .2rem;
+  padding-right: .4rem;
 }
 
 .bar {
@@ -2591,7 +2598,6 @@ summary.accordion-header::-webkit-details-marker {
 }
 
 .popover .popover-container {
-  content: attr(data-tooltip);
   left: 50%;
   opacity: 0;
   padding: .4rem;
@@ -2603,7 +2609,7 @@ summary.accordion-header::-webkit-details-marker {
   z-index: 400;
 }
 
-.popover :focus + .popover-container,
+.popover *:focus + .popover-container,
 .popover:hover .popover-container,
 .popover .popover-container:hover {
   display: block;
@@ -3033,6 +3039,7 @@ a.text-error:hover {
 
 .bg-primary {
   background: #5755d9;
+  color: #fff;
 }
 
 .bg-secondary {
@@ -3041,6 +3048,7 @@ a.text-error:hover {
 
 .bg-dark {
   background: #454d5d;
+  color: #fff;
 }
 
 .bg-gray {
@@ -3049,14 +3057,17 @@ a.text-error:hover {
 
 .bg-success {
   background: #32b643;
+  color: #fff;
 }
 
 .bg-warning {
   background: #ffb700;
+  color: #fff;
 }
 
 .bg-error {
   background: #e85600;
+  color: #fff;
 }
 
 .c-hand {

diff --git a/docs/dist/spectre.min.css b/docs/dist/spectre.min.css
diff --git a/docs/elements.html b/docs/elements.html
@@ -600,6 +600,63 @@ <h3 class="s-title"><a href="#tables" class="anchor" aria-hidden="true">#</a>Tab
     &lt;<span class="tag">/tr</span>&gt;
   &lt;<span class="tag">/tbody</span>&gt;
 &lt;<span class="tag">/table</span>&gt;
+</code></pre>
+
+        <div class="docs-note">
+          <p>If you need the tables with horizontal scroll, add the <code>table-scroll</code> class to the &lt;table&gt; element. </p>
+        </div>
+
+        <table class="table table-scroll">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Genre</th>
+              <th>Director</th>
+              <th>Rating</th>
+              <th>Duration</th>
+              <th>Release date</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>The Shawshank Redemption</td>
+              <td>Crime, Drama</td>
+              <td>Frank Darabont</td>
+              <td>R</td>
+              <td>2h 22min</td>
+              <td>14 October 1994</td>
+            </tr>
+            <tr>
+              <td>The Godfather</td>
+              <td>Crime, Drama</td>
+              <td>Francis Ford Coppola</td>
+              <td>R</td>
+              <td>2h 55min</td>
+              <td>24 March 1972</td>
+            </tr>
+            <tr>
+              <td>Schindler's List</td>
+              <td>Biography, Drama, History</td>
+              <td>Steven Spielberg</td>
+              <td>R</td>
+              <td>3h 15min</td>
+              <td>4 February 1994</td>
+            </tr>
+            <tr>
+              <td>Se7en</td>
+              <td>Crime, Drama, Mystery</td>
+              <td>David Fincher</td>
+              <td>R</td>
+              <td>2h 7min</td>
+              <td>22 September 1995</td>
+            </tr>
+          </tbody>
+        </table>
+
+<!-- tables -->
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">table</span> <span class="atn">class</span>=<span class="atv">&quot;table table-scroll&quot;</span>&gt;
+  <span class="com">&lt;!-- table content --&gt;</span>
+&lt;<span class="tag">/table</span>&gt;
 </code></pre>
 
       </div>