Merge pull request #345 from picturepan2/0.4.7

0.4.7
picturepan2 · Nov 26, 2017 · 57febed · 57febed
2 parents 605dbf8 + abcb03d
commit 57febed
Show file tree

Hide file tree

Showing 25 changed files with 300 additions and 99 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,13 @@
 ## Spectre.css Changelog
 
+### [v0.4.7](https://github.com/picturepan2/spectre/releases/tag/v0.4.7)
+
+- Add new button colors (success and error) #227 #241 #342
+- Add overflow-scrolling: touch; CSS for better scrolling
+- Add touch support to Parallax image hover effect
+- Update the Modal example code
+- Fix form horizontal layout spacing
+
 ### [v0.4.6](https://github.com/picturepan2/spectre/releases/tag/v0.4.6)
 
 - Add new Sliders example #328

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "spectre.css",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "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
@@ -25,7 +25,7 @@
       <div class="docs-brand">
         <a href="index.html" class="docs-logo">
           <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
-          <h2>Spectre.css</h2>
+          <h2>SPECTRE</h2>
         </a>
       </div>
       <div class="docs-nav">
@@ -38,7 +38,7 @@ <h2>Spectre.css</h2>
             <div class="accordion-body">
               <ul class="menu menu-nav">
                 <li class="menu-item">
-                  <a href="getting-started.html#introduction">Introduction</a>
+                  <a href="getting-started.html">Introduction</a>
                 </li>
                 <li class="menu-item">
                   <a href="getting-started.html#installation">Installation</a>
@@ -63,7 +63,7 @@ <h2>Spectre.css</h2>
             <div class="accordion-body">
               <ul class="menu menu-nav">
                 <li class="menu-item">
-                  <a href="elements.html#typography">Typography</a>
+                  <a href="elements.html">Typography</a>
                 </li>
                 <li class="menu-item">
                   <a href="elements.html#tables">Tables</a>
@@ -97,7 +97,7 @@ <h2>Spectre.css</h2>
             <div class="accordion-body">
               <ul class="menu menu-nav">
                 <li class="menu-item">
-                  <a href="layout.html#grid">Flexbox grid</a>
+                  <a href="layout.html">Flexbox grid</a>
                 </li>
                 <li class="menu-item">
                   <a href="layout.html#responsive">Responsive</a>
@@ -116,7 +116,7 @@ <h2>Spectre.css</h2>
             <div class="accordion-body">
               <ul class="menu menu-nav">
                 <li class="menu-item">
-                  <a href="components.html#accordions">Accordions</a>
+                  <a href="components.html">Accordions</a>
                 </li>
                 <li class="menu-item">
                   <a href="components.html#autocomplete">Autocomplete</a>
@@ -186,7 +186,7 @@ <h2>Spectre.css</h2>
             <div class="accordion-body">
               <ul class="menu menu-nav">
                 <li class="menu-item">
-                  <a href="utilities.html#colors">Colors</a>
+                  <a href="utilities.html">Colors</a>
                 </li>
                 <li class="menu-item">
                   <a href="utilities.html#cursors">Cursors</a>
@@ -220,7 +220,7 @@ <h2>Spectre.css</h2>
             <div class="accordion-body">
               <ul class="menu menu-nav">
                 <li class="menu-item">
-                  <a href="experimentals.html#calendars">Calendars</a>
+                  <a href="experimentals.html">Calendars</a>
                 </li>
                 <li class="menu-item">
                   <a href="experimentals.html#carousels">Carousels</a>
@@ -444,6 +444,20 @@ <h3 class="s-title"><a href="#accordions" class="anchor" aria-hidden="true">#</a
 
       </div>
 
+      <div class="container">
+        <div class="docs-ad docs-ad-sidebar">
+          <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+          <!-- github-vertical-sm -->
+          <ins class="adsbygoogle"
+              style="display:inline-block;width:120px;height:240px"
+              data-ad-client="ca-pub-2225124559530218"
+              data-ad-slot="5087273059"></ins>
+          <script>
+          (adsbygoogle = window.adsbygoogle || []).push({});
+          </script>
+        </div>
+      </div>
+
       <div id="autocomplete" class="container">
         <h3 class="s-title"><a href="#autocomplete" class="anchor" aria-hidden="true">#</a>Autocomplete</h3>
         <div class="docs-note">
@@ -1418,11 +1432,11 @@ <h4>Candy ipsum</h4>
         </div>
 
 <!-- modals example -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal active&quot;</span>&gt;
-  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-overlay&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal active&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;modal-id&quot;</span>&gt;
+  &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#close&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;modal-overlay&quot;</span> <span class="atn">aria-label</span>=<span class="atv">&quot;Close&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
   &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-container&quot;</span>&gt;
     &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-header&quot;</span>&gt;
-      &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear float-right&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
+      &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#close&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear float-right&quot;</span> <span class="atn">aria-label</span>=<span class="atv">&quot;Close&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
       &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-title h5&quot;</span>&gt;Modal title&lt;<span class="tag">/div</span>&gt;
     &lt;<span class="tag">/div</span>&gt;
     &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-body&quot;</span>&gt;
@@ -1518,7 +1532,7 @@ <h4>Candy ipsum</h4>
 
 <!-- modals -->
 <pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal modal-sm&quot;</span>&gt;
-  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-overlay&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+  &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#close&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;modal-overlay&quot;</span> <span class="atn">aria-label</span>=<span class="atv">&quot;Close&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
   &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-container&quot;</span>&gt;
     <span class="com">&lt;!-- modal structure here --&gt;</span>
   &lt;<span class="tag">/div</span>&gt;
@@ -2450,7 +2464,7 @@ <h3 class="s-title"><a href="#tooltips" class="anchor" aria-hidden="true">#</a>T
 
       <footer class="docs-footer">
         <p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p>
-        <p>Designed and built with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+        <p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
       </footer>
 
     </div>

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.6";
+  content: "0.4.7";
 }
 
 .off-canvas .off-canvas-toggle {
@@ -30,6 +30,7 @@
 
 .docs-sidebar .docs-nav {
   bottom: 1.5rem;
+  -webkit-overflow-scrolling: touch; 
   overflow-y: auto;
   padding: .5rem 1.5rem;
   position: fixed;
@@ -324,6 +325,7 @@
   display: inline;
   font-size: .9rem;
   font-weight: 500;
+  line-height: 1.5rem;
   margin-bottom: 0;
   margin-left: .5rem;
   margin-right: .5rem;
@@ -350,7 +352,7 @@
 
 .section-hero .docs-brand {
   position: absolute;
-  top: .5rem;
+  top: .85rem;
 }
 
 .section-hero .docs-brand h2 {
@@ -393,7 +395,6 @@
 .grid-hero {
   padding-bottom: 2rem;
   padding-top: 6rem;
-  position: relative;
 }
 
 .grid-hero h1 {
@@ -505,4 +506,12 @@
   .docs-content .anchor {
     display: none;
   }
+}
+
+@media (min-width: 1366px) {
+  .docs-ad.docs-ad-sidebar {
+    bottom: 1rem;
+    position: fixed;
+    right: 1rem;
+  }
 }
diff --git a/docs/dist/spectre-exp.css b/docs/dist/spectre-exp.css
@@ -1,4 +1,4 @@
-/*! Spectre.css Experimentals v0.4.6 | MIT License | github.com/picturepan2/spectre */
+/*! Spectre.css Experimentals v0.4.7 | MIT License | github.com/picturepan2/spectre */
 .calendar {
   border: .05rem solid #e7e9ed;
   border-radius: .1rem;
@@ -211,6 +211,7 @@
   background: #f8f9fa;
   display: block;
   overflow: hidden;
+  -webkit-overflow-scrolling: touch; 
   position: relative;
   width: 100%;
 }
@@ -337,6 +338,7 @@
 .comparison-slider {
   height: 50vh;
   overflow: hidden;
+  -webkit-overflow-scrolling: touch; 
   position: relative;
   width: 100%;
 }
@@ -672,41 +674,49 @@
 .parallax .parallax-top-left {
   height: 50%;
   left: 0;
+  outline: none;
   position: absolute;
   top: 0; 
   width: 50%;
   z-index: 100;
 }
 
+.parallax .parallax-top-left:focus ~ .parallax-content,
 .parallax .parallax-top-left:hover ~ .parallax-content {
   transform: perspective(1000px) rotateX(3deg) rotateY(-3deg);
 }
 
+.parallax .parallax-top-left:focus ~ .parallax-content::before,
 .parallax .parallax-top-left:hover ~ .parallax-content::before {
   background: linear-gradient(135deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
 }
 
+.parallax .parallax-top-left:focus ~ .parallax-content .parallax-front,
 .parallax .parallax-top-left:hover ~ .parallax-content .parallax-front {
   transform: translate3d(4.5px, 4.5px, 50px) scale(.95);
 }
 
 .parallax .parallax-top-right {
   height: 50%;
+  outline: none;
   position: absolute;
   right: 0;
   top: 0; 
   width: 50%;
   z-index: 100;
 }
 
+.parallax .parallax-top-right:focus ~ .parallax-content,
 .parallax .parallax-top-right:hover ~ .parallax-content {
   transform: perspective(1000px) rotateX(3deg) rotateY(3deg);
 }
 
+.parallax .parallax-top-right:focus ~ .parallax-content::before,
 .parallax .parallax-top-right:hover ~ .parallax-content::before {
   background: linear-gradient(-135deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
 }
 
+.parallax .parallax-top-right:focus ~ .parallax-content .parallax-front,
 .parallax .parallax-top-right:hover ~ .parallax-content .parallax-front {
   transform: translate3d(-4.5px, 4.5px, 50px) scale(.95);
 }
@@ -715,40 +725,48 @@
   bottom: 0;
   height: 50%;
   left: 0; 
+  outline: none;
   position: absolute;
   width: 50%;
   z-index: 100;
 }
 
+.parallax .parallax-bottom-left:focus ~ .parallax-content,
 .parallax .parallax-bottom-left:hover ~ .parallax-content {
   transform: perspective(1000px) rotateX(-3deg) rotateY(-3deg);
 }
 
+.parallax .parallax-bottom-left:focus ~ .parallax-content::before,
 .parallax .parallax-bottom-left:hover ~ .parallax-content::before {
   background: linear-gradient(45deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
 }
 
+.parallax .parallax-bottom-left:focus ~ .parallax-content .parallax-front,
 .parallax .parallax-bottom-left:hover ~ .parallax-content .parallax-front {
   transform: translate3d(4.5px, -4.5px, 50px) scale(.95);
 }
 
 .parallax .parallax-bottom-right {
   bottom: 0;
   height: 50%;
+  outline: none;
   position: absolute;
   right: 0; 
   width: 50%;
   z-index: 100;
 }
 
+.parallax .parallax-bottom-right:focus ~ .parallax-content,
 .parallax .parallax-bottom-right:hover ~ .parallax-content {
   transform: perspective(1000px) rotateX(-3deg) rotateY(3deg);
 }
 
+.parallax .parallax-bottom-right:focus ~ .parallax-content::before,
 .parallax .parallax-bottom-right:hover ~ .parallax-content::before {
   background: linear-gradient(-45deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
 }
 
+.parallax .parallax-bottom-right:focus ~ .parallax-content .parallax-front,
 .parallax .parallax-bottom-right:hover ~ .parallax-content .parallax-front {
   transform: translate3d(-4.5px, -4.5px, 50px) scale(.95);
 }

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.6 | MIT License | github.com/picturepan2/spectre */
+/*! Spectre.css Icons v0.4.7 | MIT License | github.com/picturepan2/spectre */
 .icon {
   box-sizing: border-box;
   display: inline-block;